diff --git a/login.css b/login.css index cf43234..171f6e9 100644 --- a/login.css +++ b/login.css @@ -3,132 +3,195 @@ body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd); min-height: 100vh; - overflow: hidden; + overflow-y: auto; + overflow-x: hidden; display: flex; justify-content: center; align-items: center; } -/* Hapus semua circle pink sebelumnya */ -.bg-1, .bg-2, .bg-3 { - display: none !important; -} - -/* Login Card */ -.login-card { - background: rgba(255,255,255,0.35); - backdrop-filter: blur(20px); - padding: 35px; - max-width: 420px; - width: 100%; +.container, .login-card { + background: rgba(255,255,255,0.7); + backdrop-filter: blur(10px); + padding: 40px; border-radius: 25px; - box-shadow: 0 20px 50px rgba(0,0,0,0.15); - border: 1px solid rgba(255,255,255,0.4); + width: 350px; + z-index: 10; + box-shadow: 0 10px 28px rgba(0,0,0,0.2); position: relative; - z-index: 5; - overflow: visible; } -/* Hapus lingkaran icon pink */ -.icon-wrapper, -.icon-bg, +.icon-wrapper { + display: flex; + justify-content: center; + margin-bottom: 20px; + position: relative; +} + +.icon-bg { + width: 90px; height: 90px; + background: linear-gradient(45deg, purple, hotpink); + border-radius: 50%; + filter: blur(12px); + position: absolute; + animation: glow 3s infinite alternate; +} + .icon { - display: none !important; + width: 70px; height: 70px; + border-radius: 50%; + background: linear-gradient(45deg, purple, hotpink); + display: flex; + justify-content: center; + align-items: center; } -/* Title & subtitle */ .title { text-align: center; - font-size: 28px; - font-weight: 700; + font-size: 22px; margin-bottom: 10px; - background: linear-gradient(45deg, #7928ff, #ff0080); - color: transparent; + background: linear-gradient(45deg, purple, hotpink); -webkit-background-clip: text; background-clip: text; + color: transparent; } .subtitle { text-align: center; - color: #333; + color: gray; margin-bottom: 20px; } -/* Input fields */ +label { + font-size: 14px; + color: #444; +} + input { width: 100%; - padding: 13px; + padding: 12px; border-radius: 12px; - border: 2px solid #e6d9ff; - background: rgba(255,255,255,0.75); + border: 2px solid #ccc; + background: #fafafa; margin-bottom: 15px; - transition: 0.3s ease; - box-shadow: 0 4px 12px rgba(0,0,0,0.05); } input:focus { - border-color: #b47cff; - box-shadow: 0 0 10px rgba(180,124,255,0.7); outline: none; + border-color: purple; } -/* Error box */ #errorBox { + color: red; background: #ffe5e5; - border: 1px solid #ffb2b2; - color: #b00000; padding: 10px; - border-radius: 12px; + border-radius: 10px; margin-bottom: 10px; display: none; - box-shadow: 0 5px 15px rgba(255,0,0,0.1); } -/* Button */ .btn { width: 100%; - padding: 13px; - background: linear-gradient(to right, #7928ff, #ff0080); + padding: 14px; + background: linear-gradient(45deg, purple, hotpink); color: white; - border-radius: 14px; + border-radius: 15px; border: none; cursor: pointer; - font-weight: bold; - letter-spacing: 0.5px; - box-shadow: 0 6px 15px rgba(255,0,128,0.3); - transition: 0.3s ease; + font-size: 16px; + transition: 0.2s; } .btn:hover { - transform: translateY(-2px); - box-shadow: 0 10px 18px rgba(255,0,128,0.4); + transform: scale(1.02); + box-shadow: 0 4px 15px rgba(0,0,0,0.3); +} + +.btn-login { + width: 100%; + padding: 14px; + background: linear-gradient(45deg, purple, hotpink); + color: white; + border-radius: 15px; + border: none; + cursor: pointer; + font-size: 16px; + transition: 0.25s ease; +} + +.btn-login:hover { + transform: scale(1.03); + box-shadow: 0 4px 15px rgba(0,0,0,0.25); +} + +.login-container { + max-height: none; + height: auto; + overflow: visible; /* Penting */ + padding-bottom: 40px; /* Biar bagian bawah tidak kepotong */ } -/* Register link */ .login-link { text-align: center; margin-top: 15px; } .login-link a { - color: #7928ff; - font-weight: 600; + color: purple; text-decoration: underline; } -/* ✨ GLITTER BURST ANIMATION ✨ */ .glitter { position: absolute; width: 4px; height: 4px; - background: white; + background: purple; border-radius: 50%; opacity: 0; animation: glitter-burst 2s infinite ease-out; pointer-events: none; } -/* Random sparkle movement */ +/* Tombol Toggle Demo */ +.demo-toggle { + margin-top: 10px; + width: 100%; + padding: 10px; + border: none; + border-radius: 12px; + background: rgba(255,255,255,0.6); + cursor: pointer; + font-size: 15px; + transition: 0.3s; +} + +.demo-section { + margin-top: 20px; + padding-bottom: 20px; + overflow: visible; +} + +.demo-toggle:hover { + background: rgba(255,255,255,0.85); +} + +.demo-box { + overflow: hidden; + max-height: 0; + opacity: 0; + transition: max-height 0.5s ease, opacity 0.4s ease; + background: rgba(255, 255, 255, 0.6); + padding: 15px; + border-radius: 12px; + line-height: 1.6; +} + +.demo-box.show { + max-height: 1000px; + opacity: 1; +} + + @keyframes glitter-burst { 0% { transform: scale(0.4) translate(0,0); @@ -142,3 +205,7 @@ input:focus { opacity: 0; } } +@keyframes glow { + 0% { opacity: 0.2; } + 100% { opacity: 0.55; } +} diff --git a/login.html b/login.html index 8e1b3ac..503efcf 100644 --- a/login.html +++ b/login.html @@ -20,7 +20,6 @@
-
@@ -38,7 +37,7 @@
- +

@@ -46,22 +45,21 @@ Daftar Sekarang

-
-

🎮 Demo Akun

+ -
-

Player:

-

Username: player

-

Password: player123

-
+
+

🎮 Demo Akun

-
-

Admin:

-

Username: admin

-

Password: admin123

-
-
+
+

Player:

+

Username: player

+

Password: player123

+
+
+

Admin:

+

Username: admin

+

Password: admin123

diff --git a/login.js b/login.js index 3b43ed3..f00a5f1 100644 --- a/login.js +++ b/login.js @@ -1,3 +1,4 @@ +/*LOGIN VALIDATION*/ document.getElementById("loginForm").addEventListener("submit", function(e) { e.preventDefault(); @@ -33,7 +34,7 @@ document.getElementById("loginForm").addEventListener("submit", function(e) { return; } - // Login success + // Login sukses localStorage.setItem("loggedInUser", JSON.stringify(user)); window.location.href = "mainboard.html"; }); @@ -43,3 +44,43 @@ function showError(msg) { errorBox.innerText = msg; errorBox.style.display = "block"; } + +function toggleDemo() { + const box = document.getElementById("demoBox"); + const btn = document.querySelector(".demo-toggle"); + + box.classList.toggle("show"); + + // Ubah teks tombol + if (box.classList.contains("show")) { + btn.textContent = "Sembunyikan Demo Akun ▲"; + } else { + btn.textContent = "Lihat Demo Akun ▼"; + } +} + + +/* GLITTER EFFECT*/ + +document.addEventListener("DOMContentLoaded", function () { + const card = document.querySelector(".login-card"); + + if (!card) return; + + // Tambah glitter 20x + for (let i = 0; i < 20; i++) { + const g = document.createElement("div"); + g.className = "glitter"; + + // Random posisi ledakan glitter + g.style.setProperty("--x", (Math.random() * 200 - 100) + "px"); + g.style.setProperty("--y", (Math.random() * 200 - 100) + "px"); + + g.style.left = (Math.random() * 100) + "%"; + g.style.top = (Math.random() * 100) + "%"; + + g.style.animationDelay = (Math.random() * 2) + "s"; + + card.appendChild(g); + } +}); diff --git a/mainboard.css b/mainboard.css index 758be5d..3236296 100644 --- a/mainboard.css +++ b/mainboard.css @@ -33,6 +33,13 @@ body { margin: auto; position: relative; z-index: 10; + background: rgba(255,255,255,0.7); + backdrop-filter: blur(10px); + padding: 40px; + border-radius: 25px; + width: 600px; + z-index: 10; + box-shadow: 0 10px 28px rgba(0,0,0,0.2); } /* HEADER CARD */ diff --git a/register.html b/register.html index cd3e754..4f441e1 100644 --- a/register.html +++ b/register.html @@ -18,7 +18,6 @@
-