mengubah login dan merapihkan akun demo

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 */
+.container, .login-card {
-.bg-1, .bg-2, .bg-3 {
+  background: rgba(255,255,255,0.7);
-  display: none !important;
+  backdrop-filter: blur(10px);
-}
+  padding: 40px;
-
-/* Login Card */
-.login-card {
-  background: rgba(255,255,255,0.35);
-  backdrop-filter: blur(20px);
-  padding: 35px;
-  max-width: 420px;
-  width: 100%;
   border-radius: 25px;
-  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
+  width: 350px;
-  border: 1px solid rgba(255,255,255,0.4);
+  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-wrapper, 
+  display: flex;
-.icon-bg, 
+  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-size: 22px;
-  font-weight: 700;
   margin-bottom: 10px;
-  background: linear-gradient(45deg, #7928ff, #ff0080);
+  background: linear-gradient(45deg, purple, hotpink);
-  color: transparent;
   -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;
+  border: 2px solid #ccc;
-  background: rgba(255,255,255,0.75);
+  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;
+  padding: 14px;
-  background: linear-gradient(to right, #7928ff, #ff0080);
+  background: linear-gradient(45deg, purple, hotpink);
   color: white;
-  border-radius: 14px;
+  border-radius: 15px;
   border: none;
   cursor: pointer;
-  font-weight: bold;
+  font-size: 16px;
-  letter-spacing: 0.5px;
+  transition: 0.2s;
-  box-shadow: 0 6px 15px rgba(255,0,128,0.3);
-  transition: 0.3s ease;
 }
 
 .btn:hover {
-  transform: translateY(-2px);
+  transform: scale(1.02);
-  box-shadow: 0 10px 18px rgba(255,0,128,0.4);
+  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;
+  color: purple;
-  font-weight: 600;
   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; }
+}

login.html

@@ -20,7 +20,6 @@
     <!-- Login Card -->
     <div class="login-card">
       <div class="icon-wrapper">
-        <div class="icon-bg"></div>
         <div class="icon-circle">
         </div>
       </div>                                                                                                                                                                                                                  
@@ -38,7 +37,7 @@
 
         <div id="errorBox" class="error"></div>
 
-        <button type="submit" class="btn-login">Login Sekarang</button>
+        <button class="btn-login">Login Sekarang</button>
       </form>
 
       <p class="register-text">
@@ -46,22 +45,21 @@
         <a href="register.html">Daftar Sekarang</a>
       </p>
 
-      <div class="demo-box">
+      <button class="demo-toggle" onclick="toggleDemo()">Lihat Demo Akun ▼</button>
-        <p><strong>🎮 Demo Akun</strong></p>
 
-        <div class="demo-item">
+    <div class="demo-box" id="demoBox">
-          <p><strong>Player:</strong></p>
+      <p><strong>🎮 Demo Akun</strong></p>
-          <p>Username: <code>player</code></p>
-          <p>Password: <code>player123</code></p>
-        </div>
 
-        <div class="demo-item">
+    <div class="demo-item">
-          <p><strong>Admin:</strong></p>
+      <p><strong>Player:</strong></p>
-          <p>Username: <code>admin</code></p>
+      <p>Username: <code>player</code></p>
-          <p>Password: <code>admin123</code></p>
+      <p>Password: <code>player123</code></p>
-        </div>
+    </div>
-      </div>
 
+    <div class="demo-item">
+      <p><strong>Admin:</strong></p>
+      <p>Username: <code>admin</code></p>
+      <p>Password: <code>admin123</code></p>
     </div>
   </div>
 

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);
+  }
+});

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 */

register.html

@@ -18,7 +18,6 @@
         <div class="icon-wrapper">
             <div class="icon-bg"></div>
             <div class="icon">
-                <img src="userplus.png" width="45" />
             </div>
         </div>