Webleb - UI Elements - Page e connexion

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
        body, html {
            height: 100%;
            margin: 0;
            font-family: 'Poppins', sans-serif;
            overflow: hidden;
        }
        #background {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            z-index: 0;
        }
        .login-container {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255,255,255,0.9);
            padding: 40px 30px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            z-index: 1;
            width: 250px;
        }
        .login-container h2 {
            margin-bottom: 25px;
            text-align: center;
        }
        .login-container input {
            width: 80%;
            padding: 10px;
            margin-left: 25px;
            border: 1px solid #ffffff;
            border-radius: 8px;
        }
        .login-container button {
            width: 80%;
            padding: 10px;
            margin-left: 25px;
            background: #278bdc;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .login-container button:hover {
            background: #0981d7;
            color: #6acbe6;
            font-size: 16px;
        }

.login-container button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .login-container input[type="text"],
        .login-container input[type="password"] {
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
            color: #0e0e0e;
            justify-content: center;
            text-align: center;
            background: #f9f9f9;
            border: 1px solid #ccc;
        }
        .login-container input[type="text"]:focus,
        .login-container input[type="password"]:focus {
            background: #fff;
            border-color: #0078d7;
        }

input {
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
            color: #141313;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 8px;
            width: calc(100% - 20px);
            box-sizing: border-box;
         }
        input:focus {
            outline: none;
            border-color: #0078d7;
        }
        .login-container .error {
            color: #d8000c;
            margin-bottom: 15px;
        }

.error {
            color: #d8000c;
            text-align: center;
            justify-content: center;
            margin-bottom: 10px;
        }
        .login-links {
            text-align: center;
            margin-top: 15px;
        }
        .login-links a {
            color: #0078d7;
            text-decoration: none;
            font-size: 14px;
            margin: 5px 0;
            display: inline-block;
            transition: color 0.2s;
        }
        .login-links a:hover {
            color: #005fa3;
            text-decoration: underline;
        }
        button {
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
            color: #fff;
            background-color: #0078d7;
            border: none;
            padding: 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;
        }

JS

// Animation de l'arrière-plan
        const canvas = document.getElementById('background');
        const ctx = canvas.getContext('2d');
        let circles = [];

function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let c of circles) {
                ctx.beginPath();
                ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
                ctx.fillStyle = c.color;
                ctx.fill();
                c.x += c.dx;
                c.y += c.dy;
                if (c.x < -c.r || c.x > canvas.width + c.r) c.dx *= -1;
                if (c.y < -c.r || c.y > canvas.height + c.r) c.dy *= -1;
            }
            requestAnimationFrame(animate);
        }
        animate();

// Fonction de connexion simple
        function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorDiv = document.getElementById('error');
            if (username === "" || password === "") {
                errorDiv.textContent = "Veuillez remplir tous les champs.";
            } else if (username === "admin" && password === "1234") {
                errorDiv.textContent = "";
                alert("Connexion réussie !");
                // Redirection ou autre action ici
            } else {
                errorDiv.textContent = "Nom d'utilisateur ou mot de passe incorrect.";
            }
        }

// Gestion des liens
        document.getElementById('forgot').addEventListener('click', function() {
            alert("Fonctionnalité de mot de passe oublié à implémenter.");
        });

document.getElementById('signup').addEventListener('click', function() {
            alert("Fonctionnalité d'inscription à implémenter.");
        });

$(document).ready(function() {
        // Gestion des liens de connexion
        $('#forgot').click(function() {
            alert('Fonctionnalité de réinitialisation du mot de passe à implémenter.');
        });

$('#signup').click(function() {
            window.location.href = 'signup.html'; // Redirection vers la page d'inscription
        });
    });

// Gestion des liens de connexion
        $('#forgot').click(function() { 
            alert('Fonctionnalité de réinitialisation du mot de passe à implémenter.');
        });

Page e connexion

Recommended

HTML E-Learning Website Template

Guess the Country Game - JavaScript Example

+- Toggle

HTML

CSS

JS

Recommended

HTML E-Learning Website Template

Guess the Country Game - JavaScript Example

+- Toggle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS