लोग इन वाला पन्ना

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

21 September 2024

टेक्स्ट एनिमेशन इन एचटीएमएल एंड सीएसएस

5 January 2025

@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.');
        });

लोग इन वाला पन्ना

अनुशंसित

पासवर्ड इनपुट लाइट

टेक्स्ट एनिमेशन इन एचटीएमएल एंड सीएसएस

मैट्रिक्स प्लगइन होम पेज

HTML

CSS

JS

अनुशंसित

पासवर्ड इनपुट लाइट

टेक्स्ट एनिमेशन इन एचटीएमएल एंड सीएसएस

मैट्रिक्स प्लगइन होम पेज

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS