mengubah css mainboard

login.css

@@ -1,4 +1,5 @@
 body {
+<<<<<<< HEAD
     font-family: Arial, sans-serif;
     background: #1e90ff;
     display: flex;
@@ -6,133 +7,159 @@ body {
     align-items: center;
     height: 100vh;
     margin: 0;
-}
-
-.container {
-    background: #fff;
-    padding: 25px;
-    border-radius: 10px;
-    width: 300px;
-    text-align: center;
-}
-
-input {
-    width: 100%;
-    padding: 10px;
-    margin: 10px 0;
-    border: 1px solid #aaa;
-    border-radius: 5px;
-}
-
-button {
-    width: 100%;
-    padding: 10px;
-    background: #1e90ff;
-    color: white;
-    border: none;
-    border-radius: 5px;
-}
-
-button:hover {
-    background: #0c65b2;
-}
-
-#error {
-    color: red;
-    margin-top: 10px;
-}
 =======
-  font-family: Arial, sans-serif;
+  font-family: Poppins, Arial, sans-serif;
-  background: #f7f6ff;
+  background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
+  min-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+>>>>>>> 149dc47c4d90a64a3fe437ba26e7cf4d1cbbbf50
 }
 
-/* Background animation */
+/* Background animation circles */
 .bg-animated .bg-circle {
   position: absolute;
   border-radius: 50%;
-  filter: blur(60px);
+  filter: blur(70px);
-  animation: float 6s infinite ease-in-out;
+  animation: float 7s infinite ease-in-out;
+  opacity: 0.8;
+}
+
+.one { 
+  top: 10%; 
+  left: 5%; 
+  width: 220px; 
+  height: 220px; 
+  background: rgba(255,255,255,0.5); 
+}
+.two { 
+  bottom: 10%; 
+  right: 5%; 
+  width: 300px; 
+  height: 300px; 
+  background: rgba(255,180,220,0.5);
+  animation-delay: 1.3s; 
+}
+.three { 
+  top: 60%; 
+  left: 50%; 
+  width: 200px; 
+  height: 200px; 
+  background: rgba(150,110,255,0.5);
+  animation-delay: 2s; 
 }
-.one { top: 20%; left: 10%; width: 180px; height: 180px; background: rgba(255,255,255,0.1); }
-.two { bottom: 15%; right: 10%; width: 250px; height: 250px; background: rgba(255,192,203,0.2); animation-delay: 1s; }
-.three { top: 50%; left: 50%; width: 160px; height: 160px; background: rgba(200,120,255,0.2); animation-delay: 2s; }
 
 @keyframes float {
   0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-20px); }
+  50% { transform: translateY(-25px); }
 }
 
 /* Card */
 .login-card {
-  background: rgba(255,255,255,0.6);
+  background: rgba(255, 255, 255, 0.35);
-  backdrop-filter: blur(15px);
+  backdrop-filter: blur(20px);
-  padding: 30px;
+  padding: 35px;
-  max-width: 400px;
+  max-width: 420px;
   width: 100%;
-  border-radius: 20px;
+  border-radius: 25px;
-  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
+  border: 1px solid rgba(255,255,255,0.4);
   position: relative;
-  z-index: 10;
 }
 
 /* Icon */
-.icon-wrapper { display: flex; justify-content: center; margin-bottom: 20px; }
+.icon-wrapper { 
-.icon-circle {
+  display: flex; 
-  background: linear-gradient(45deg, purple, hotpink);
+  justify-content: center; 
-  padding: 20px;
+  margin-bottom: 25px; 
-  border-radius: 50%;
 }
-.login-icon { width: 40px; height: 40px; }
+.icon-circle {
+  background: linear-gradient(135deg, #7928ff, #ff0080);
+  padding: 22px;
+  border-radius: 50%;
+  box-shadow: 0 6px 20px rgba(255,0,128,0.4);
+}
+.login-icon { width: 45px; height: 45px; }
 
-/* Text */
+/* Header Text */
 .header-text { text-align: center; margin-bottom: 20px; }
-.header-text h2 { background: -webkit-linear-gradient(purple, hotpink); 
+.header-text h2 { 
+  background: linear-gradient(45deg, #7928ff, #ff0080);
+  color: transparent;
+  font-weight: 700;
+  font-size: 28px;
+}
+.header-text p {
+  color: #333;
+  font-size: 14px;
+}
 
-/* Input */
+/* Inputs */
 input {
   width: 100%;
-  padding: 12px;
+  padding: 13px;
   margin-bottom: 15px;
-  border-radius: 10px;
+  border-radius: 12px;
-  border: 2px solid #ddd;
+  border: 2px solid #e6d9ff;
-  background: #fafafa;
+  background: rgba(255,255,255,0.75);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+  transition: 0.3s ease;
 }
 
-/* Button */
+input:focus {
+  border-color: #b47cff;
+  box-shadow: 0 0 10px rgba(180,124,255,0.7);
+  outline: none;
+}
+
+/* Login Button */
 .btn-login {
   width: 100%;
-  padding: 12px;
+  padding: 13px;
-  background: linear-gradient(to right, purple, hotpink);
+  background: linear-gradient(to right, #7928ff, #ff0080);
   color: white;
-  border-radius: 12px;
+  border-radius: 14px;
   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;
 }
 
-/* Error */
+.btn-login:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 18px rgba(255,0,128,0.4);
+}
+
+/* Error Box */
 .error {
   background: #ffe5e5;
   border: 1px solid #ffb2b2;
   color: #b00000;
   padding: 10px;
-  border-radius: 10px;
+  border-radius: 12px;
   margin-bottom: 10px;
   display: none;
+  box-shadow: 0 5px 15px rgba(255,0,0,0.1);
 }
 
 /* Demo Box */
 .demo-box {
-  background: #eef3ff;
+  background: rgba(240,240,255,0.7);
-  padding: 15px;
+  padding: 18px;
   margin-top: 20px;
-  border-radius: 15px;
+  border-radius: 18px;
-  border: 1px solid #d8e0ff;
+  border: 1px solid rgba(180,160,255,0.4);
+  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
 }
+
 .demo-item {
   background: white;
-  padding: 10px;
+  padding: 12px;
-  margin-top: 10px;
+  margin-top: 12px;
-  border-radius: 10px;
+  border-radius: 12px;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
 }
-}
->>>>>>> 034e71546358d1709edc3df62da8342c7a9fa647

register.js

@@ -0,0 +1,64 @@
+document.getElementById("registerForm").addEventListener("submit", function (e) {
+    e.preventDefault();
+
+    let username = document.getElementById("username").value.trim();
+    let email = document.getElementById("email").value.trim();
+    let password = document.getElementById("password").value.trim();
+    let confirmPassword = document.getElementById("confirmPassword").value.trim();
+    let errorBox = document.getElementById("errorBox");
+
+    errorBox.style.display = "none";
+
+    // Validasi
+    if (!username || !email || !password || !confirmPassword) {
+        showError("Semua field harus diisi");
+        return;
+    }
+
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        showError("Format email tidak valid");
+        return;
+    }
+
+    if (password.length < 6) {
+        showError("Password minimal 6 karakter");
+        return;
+    }
+
+    if (password !== confirmPassword) {
+        showError("Password dan konfirmasi password tidak cocok");
+        return;
+    }
+
+    let users = JSON.parse(localStorage.getItem("users") || "[]");
+
+    if (users.some(u => u.username === username)) {
+        showError("Username sudah digunakan");
+        return;
+    }
+
+    if (users.some(u => u.email === email)) {
+        showError("Email sudah digunakan");
+        return;
+    }
+
+    // Simpan user baru
+    users.push({
+        id: Date.now().toString(),
+        username,
+        email,
+        password,
+        role: "player"
+    });
+
+    localStorage.setItem("users", JSON.stringify(users));
+
+    alert("Registrasi berhasil! Silakan login.");
+    window.location.href = "login.html";
+});
+
+function showError(msg) {
+    let box = document.getElementById("errorBox");
+    box.innerText = msg;
+    box.style.display = "block";
+}