ubah login dan merapihkan

login.css

@@ -1,174 +1,211 @@
-/* Background & body */
 body {
   margin: 0;
-  font-family: Poppins, Arial, sans-serif;
+  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;
 }
 
-/* Animated background circles */
+.container, .login-card {
-.bg-1, .bg-2, .bg-3 {
+  background: rgba(255,255,255,0.7);
-  position: absolute;
+  backdrop-filter: blur(10px);
-  border-radius: 50%;
+  padding: 40px;
-  filter: blur(70px);
-  opacity: 0.8;
-  animation: float 7s infinite ease-in-out;
-}
-
-.bg-1 {
-  top: 10%;
-  left: 5%;
-  width: 220px;
-  height: 220px;
-  background: rgba(255,255,255,0.5);
-}
-
-.bg-2 {
-  bottom: 10%;
-  right: 5%;
-  width: 300px;
-  height: 300px;
-  background: rgba(255,180,220,0.5);
-  animation-delay: 1.3s;
-}
-
-.bg-3 {
-  top: 55%;
-  left: 50%;
-  width: 200px;
-  height: 200px;
-  transform: translate(-50%, -50%);
-  background: rgba(150,110,255,0.5);
-  animation-delay: 2s;
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-25px); }
-}
-
-/* Login Card (match with register) */
-.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;
 }
 
-/* Icon */
 .icon-wrapper {
   display: flex;
   justify-content: center;
-  margin-bottom: 25px;
+  margin-bottom: 20px;
-}
-
-.icon-bg {
-  width: 90px;
-  height: 90px;
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(15px);
-  background: linear-gradient(135deg, #7928ff, #ff0080);
-  animation: float 5s infinite ease-in-out;
-}
-
-.icon {
-  width: 70px;
-  height: 70px;
-  background: linear-gradient(135deg, #7928ff, #ff0080);
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   position: relative;
 }
 
-/* Title & subtitle */
+.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 {
+  width: 70px; height: 70px;
+  border-radius: 50%;
+  background: linear-gradient(45deg, purple, hotpink);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .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 {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: purple;
+  border-radius: 50%;
+  opacity: 0;
+  animation: glitter-burst 2s infinite ease-out;
+  pointer-events: none;
+}
+
+/* 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);
+    opacity: 0.9;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1) translate(var(--x), var(--y));
+    opacity: 0;
+  }
+}
+@keyframes glow {
+    0% { opacity: 0.2; }
+    100% { opacity: 0.55; }
+}

login.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Login Page</title>
+  <title>Login</title>
   <link rel="stylesheet" href="login.css" />
 </head>
 <body>
@@ -20,14 +20,12 @@
     <!-- Login Card -->
     <div class="login-card">
       <div class="icon-wrapper">
-        <div class="icon-bg"></div>
         <div class="icon-circle">
         </div>
-      </div>
+      </div>                                                                                                                                                                                                                  
-
       <div class="header-text">
         <h2>Selamat Datang! ✨</h2>
-        <p>Login untuk bermain Memory Card Game</p>
+        <p>Login untuk bermain Memory Flip Card Game</p>
       </div>
 
       <form id="loginForm">
@@ -39,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">
@@ -47,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 */

mainboard.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Memory Game</title>
+  <title>Memory Flip Card Game</title>
   <link rel="stylesheet" href="mainboard.css">
 </head>
 
@@ -25,7 +25,6 @@
       </div>
     </header>
 
-    <!-- TITLE -->
     <div class="title">
       <h1>🎮 Memory Flip Card Game</h1>
       <p>Pilih tingkat kesulitan untuk memulai permainan</p>

register.css

@@ -1,7 +1,7 @@
 body {
     margin: 0;
     font-family: Arial, sans-serif;
-    background: #f7f7ff;
+    background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);;
 }
 
 .page {

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>