WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Pagina di accesso
88
idrisse2319
Apri nell'Editor
Pubblica il Tuo Codice
Hai bisogno di un sito web?
Consigliato
29 September 2024
editore
24 June 2025
Web Leb: Soluzioni digitali, Web design e tecnologia
10 July 2025
Modello di menu del ristorante HTML
HTML
Copy
Connexion
Connexion
Se connecter
Mot de passe oublié ?
Je n'ai pas de compte
CSS
Copy
@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
Copy
// 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 createCircles() { circles = []; for (let i = 0; i < 30; i++) { circles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, r: 20 + Math.random() * 40, dx: (Math.random() - 0.5) * 1.5, dy: (Math.random() - 0.5) * 1.5, color: `rgba(${100+Math.random()*155},${100+Math.random()*155},255,0.2)` }); } } createCircles(); 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.'); });