WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
3963
Andev.web
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
15 April 2025
Un codice di bhviet1510
14 September 2024
Negozio di E-Commerce
31 May 2025
Un codice di alejandrokundrah
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();