WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
4237
Andev.web
Apri nell'Editor
Video
Pubblica il Tuo Codice
6
Consigliato
12 December 2025
Gioco di ping pong retrò JavaScript con round speciali
26 April 2025
Un codice di Metehan
25 November 2025
Invasori spaziali
HTML
Copy
Andev Web
Andev
web
Inciar
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=Poppins:wght@300&display=swap'); :root { --background: #1a1a2e; --color: #ffffff; --primary-color: #0f3460; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Poppins", sans-serif; background: var(--background); color: var(--color); letter-spacing: 1px; transition: background 0.2s ease; } a { text-decoration: none; color: var(--color); } h1 { font-size: 2.5rem; } .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .login-container { position: relative; width: 22.2rem; } .form-container { border: 1px solid hsla(0, 0%, 65%, 0.158); box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.2); border-radius: 10px; backdrop-filter: blur(20px); z-index: 99; padding: 2rem; } .login-container form input { display: block; padding: 14.5px; width: 100%; margin: 2rem 0; color: var(--color); outline: none; background-color: #9191911f; border: none; border-radius: 5px; font-weight: 500; letter-spacing: 0.8px; font-size: 15px; backdrop-filter: blur(15px); } .login-container form input:focus { box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2); animation: wobble 0.3s ease-in; } .login-container form button { background-color: var(--primary-color); color: var(--color); display: block; padding: 13px; border-radius: 5px; outline: none; font-size: 18px; letter-spacing: 1.5px; font-weight: bold; width: 100%; cursor: pointer; margin-bottom: 2rem; transition: all 0.1s ease-in-out; border: none; } .login-container form button:hover { box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15); transform: scale(1.02); } .circle { width: 8rem; height: 8rem; background: var(--primary-color); border-radius: 50%; position: absolute; } .illustration { position: absolute; top: -14%; right: -2px; width: 90%; } .circle-one { top: 0; left: 0; z-index: -1; transform: translate(-45%, -45%); } .circle-two { bottom: 0; right: 0; z-index: -1; transform: translate(45%, 45%); } .register-forget { margin: 1rem 0; display: flex; justify-content: space-between; } .opacity { opacity: 0.6; } .theme-btn-container { display: flex; justify-content: center; align-items: center; margin-top: 2rem; padding: 1rem; background: #fff; border-radius: 10px; box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.1); } .theme-btn { cursor: pointer; transition: all 0.3s ease-in; margin: 0 5px; width: 25px; height: 25px; border-radius: 50%; } .theme-btn:hover { width: 40px !important; } @keyframes wobble { 0% { transform: scale(1.025); } 25% { transform: scale(1); } 75% { transform: scale(1.025); } 100% { transform: scale(1); } }
JS
Copy
const themes = [ { background: "#1A1A2E", color: "#FFFFFF", primaryColor: "#0F3460" }, { background: "#461220", color: "#FFFFFF", primaryColor: "#E94560" }, { background: "#192A51", color: "#FFFFFF", primaryColor: "#967AA1" }, { background: "#F7B267", color: "#000000", primaryColor: "#F4845F" }, { background: "#F25F5C", color: "#000000", primaryColor: "#642B36" }, { background: "#231F20", color: "#FFF", primaryColor: "#BB4430" } ]; const setTheme = (theme) => { const root = document.querySelector(":root"); root.style.setProperty("--background", theme.background); root.style.setProperty("--color", theme.color); root.style.setProperty("--primary-color", theme.primaryColor); root.style.setProperty("--glass-color", theme.glassColor); }; const displayThemeButtons = () => { const btnContainer = document.querySelector(".theme-btn-container"); themes.forEach((theme) => { const div = document.createElement("div"); div.className = "theme-btn"; div.style.cssText = `background: ${theme.background}; width: 25px; height: 25px`; btnContainer.appendChild(div); div.addEventListener("click", () => setTheme(theme)); }); }; displayThemeButtons();