commencing warcrime by moving the file into xampp/htdocs

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

auth.php

@@ -1,50 +1,62 @@
 <?php
-// Mulai session paling atas (wajib untuk login)
 session_start();
-
+require_once "Config.php"; 
-// Panggil koneksi database sekali saja
-require_once "Config.php";
 
 // ==========================================
 // BAGIAN 1: LOGIKA REGISTER
 // ==========================================
 if (isset($_POST['btn-register'])) {
+    
     $username = $_POST['username'];
     $email    = $_POST['email'];
     $password = $_POST['password'];
-    $confirm  = $_POST['confirm_password'];
+    // Pastikan di HTML name-nya sudah 'confirm_password'
+    $confirm  = $_POST['confirm_password']; 
 
-    // Validasi input kosong
+    // --- 1. VALIDASI DATA ---
+
+    // Cek Kosong
     if (empty($username) || empty($email) || empty($password) || empty($confirm)) {
-        echo "<script>alert('Semua data harus diisi!'); window.location='index.html';</script>";
+        echo "<script>alert('Semua data wajib diisi!'); window.location='index.html';</script>";
         exit;
     }
 
-    // Validasi password match
+    // Cek Format Email (Biar gak ngawur)
+    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        echo "<script>alert('Format email tidak valid! (contoh: nama@email.com)'); window.location='index.html';</script>";
+        exit;
+    }
+
+    // Cek Panjang Password (Minimal 6)
+    if (strlen($password) < 6) {
+        echo "<script>alert('Password terlalu pendek! Minimal 6 karakter.'); window.location='index.html';</script>";
+        exit;
+    }
+
+    // Cek Kesamaan Password
     if ($password !== $confirm) {
         echo "<script>alert('Password dan Konfirmasi tidak cocok!'); window.location='index.html';</script>";
         exit;
     }
 
-    // Cek Username/Email sudah ada atau belum
+    // --- 2. CEK DUPLIKAT DI DATABASE ---
     $stmt = mysqli_prepare($conn, "SELECT id FROM users WHERE username = ? OR email = ?");
     mysqli_stmt_bind_param($stmt, "ss", $username, $email);
     mysqli_stmt_execute($stmt);
     mysqli_stmt_store_result($stmt);
 
     if (mysqli_stmt_num_rows($stmt) > 0) {
-        echo "<script>alert('Username atau Email sudah terpakai!'); window.location='index.html';</script>";
+        echo "<script>alert('Username atau Email sudah terpakai! Ganti yang lain.'); window.location='index.html';</script>";
-        exit; // Stop di sini
+        exit;
     }
     mysqli_stmt_close($stmt);
 
-    // Hash password & Insert
+    // --- 3. SIMPAN DATA ---
     $hashed_password = password_hash($password, PASSWORD_DEFAULT);
     $stmtInsert = mysqli_prepare($conn, "INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
     mysqli_stmt_bind_param($stmtInsert, "sss", $username, $email, $hashed_password);
 
     if (mysqli_stmt_execute($stmtInsert)) {
-        // Balik ke index.html tapi kasih pesan sukses
         echo "<script>alert('Registrasi Berhasil! Silakan Login.'); window.location='index.html';</script>";
     } else {
         echo "Error: " . mysqli_error($conn);
@@ -68,23 +80,18 @@ else if (isset($_POST['btn-login'])) {
     $result = mysqli_stmt_get_result($stmt);
     $row = mysqli_fetch_assoc($result);
 
-    // Cek user ada ATAU password salah
+    // JIKA GAGAL
     if (!$row || !password_verify($password, $row['password'])) {
-        echo "<script>
+        // Kirim sinyal error ke HTML (Kotak Merah)
-            alert('Username atau Password salah!');
+        header("Location: index.html?error=gagal");
-            window.location.href='index.html';
-        </script>";
         exit;
     }
 
-    // Login Sukses
+    // JIKA SUKSES
     $_SESSION['username'] = $row['username'];
     $_SESSION['login'] = true; 
 
-    echo "<script>
+    header("Location: mainboard.html");
-        alert('Login Berhasil! Selamat Datang, " . $username . "'); 
-        window.location.href='mainboard.html';
-    </script>";
     exit;
 }
 ?>

index.html

@@ -11,7 +11,7 @@
 
 body {
     margin: 0;
-    font-family: Arial, sans-serif;
+    font-family: 'Segoe UI', Arial, sans-serif;
     background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
     min-height: 100vh;
     display: flex;
@@ -20,17 +20,17 @@ body {
     overflow-x: hidden;
 }
 
-/* --- 2. CONTAINER KARTU --- */
+/* --- 2. CONTAINER KARTU (DENGAN ANIMASI RESIZE) --- */
 .auth-card {
     width: 380px;
-    background: rgba(255, 255, 255, 0.9); /* Dibuat lebih solid sedikit */
+    background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(12px);
     border-radius: 25px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.2);
     overflow: hidden; 
     position: relative;
     z-index: 10;
-    /* Animasi Tinggi agar mulus saat resize */
+    /* PENTING: Transisi halus saat tinggi berubah */
     transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
 }
 
@@ -38,31 +38,27 @@ body {
     width: 100%;
 }
 
-/* --- PERBAIKAN UTAMA ADA DI SINI --- */
 .forms-container {
     display: flex;
-    width: 200%;
+    width: 200%; /* Lebar 200% untuk menampung Login & Register berdampingan */
     transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-    /* PENTING: Agar form Login tidak dipaksa setinggi form Register */
     align-items: flex-start; 
 }
 
 .auth-card.active .forms-container {
-    transform: translateX(-50%);
+    transform: translateX(-50%); /* Geser ke kiri untuk menampilkan Register */
 }
 
-/* --- 3. STYLING FORM INDIVIDUAL --- */
+/* --- 3. STYLING FORM --- */
 form {
     width: 50%;
     flex-shrink: 0;
-    padding: 40px; /* Padding ini menentukan jarak dalam */
+    padding: 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    /* Hapus justify-content: center agar tinggi dihitung dari konten asli */
 }
 
-/* Typography & Inputs */
 h2 {
     margin: 0 0 10px;
     text-align: center;
@@ -105,14 +101,28 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
 .switch-text a { color: purple; text-decoration: none; font-weight: bold; cursor: pointer; }
 .switch-text a:hover { text-decoration: underline; }
 
-/* Error Box */
+/* --- ERROR BOX (KOTAK MERAH) --- */
 .error-box {
-    width: 100%; color: #d8000c; background: #ffbaba;
+    width: 100%; 
-    padding: 10px; border-radius: 10px; margin-bottom: 15px;
+    color: #d8000c; 
-    font-size: 13px; text-align: center; display: none;
+    background: #ffbaba;
+    border: 1px solid #ff7675;
+    padding: 12px; 
+    border-radius: 10px; 
+    margin-bottom: 20px;
+    font-size: 13px; 
+    text-align: center; 
+    display: none; /* Default sembunyi */
+    font-weight: bold;
+    animation: fadeIn 0.3s;
 }
 
-/* Dekorasi (Buah & Glitter) */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Dekorasi Buah */
 .fruit { position: absolute; width: 90px; opacity: 0.85; animation: float 6s infinite ease-in-out, drift 15s infinite linear; pointer-events: none; z-index: 1; }
 .f1 { top: 8%; left: 10%; width: 80px; } .f2 { top: 65%; right: 12%; } .f3 { top: 22%; right: 55%; width: 60px; }
 .f4 { bottom: 15%; left: 28%; } .f5 { bottom: 10%; right: 30%; width: 70px; } .f6 { top: 40%; left: 50%; }
@@ -120,6 +130,8 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
 .f10 { bottom: 20%; right: 5%; }
 @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px) rotate(6deg); } }
 @keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(15px); } }
+
+/* Glitter */
 .glitter { position: absolute; width: 4px; height: 4px; background: purple; border-radius: 50%; opacity: 0; animation: glitter-burst 2s infinite ease-out; pointer-events: none; z-index: 11; }
 @keyframes glitter-burst { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1) translate(var(--x), var(--y)); opacity: 0; } }
 </style>
@@ -172,7 +184,6 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
 
                     <label>Konfirmasi Password</label>
                     <input type="password" id="regConfirm" name="confirm_password" placeholder="Ulangi Password" required>
-
                     <button type="submit" class="btn-submit" name="btn-register">Daftar Sekarang</button>
 
                     <p class="switch-text">
@@ -185,24 +196,27 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
     </div>
 
 <script>
-    /* --- LOGIC RESIZE OTOMATIS --- */
+    /* LOGIC JAVASCRIPT UTAMA 
+       Menghubungkan PHP Error -> Tampilan Kotak Merah & Resize & Validasi
+    */
+
     const card = document.getElementById("authCard");
     const loginForm = document.getElementById("loginForm");
     const registerForm = document.getElementById("registerForm");
 
+    // 1. FUNGSI MENGATUR TINGGI (RESIZE OTOMATIS)
     function setHeight() {
         const isActive = card.classList.contains("active");
-        
+        // Hitung tinggi form yang sedang aktif (termasuk jika ada error box)
-        // Hitung tinggi form yang sedang aktif
-        // offsetHeight akan mengambil tinggi asli konten + padding
         const formHeight = isActive ? registerForm.offsetHeight : loginForm.offsetHeight;
         
-        // Terapkan tinggi ke kartu utama
+        // Terapkan tinggi ke card
         card.style.height = formHeight + "px";
     }
 
+    // 2. FUNGSI PINDAH LOGIN <-> REGISTER
     function toggleAuth(mode) {
-        // Hilangkan error saat pindah
+        // Reset Error Box saat pindah
         document.getElementById("loginError").style.display = "none";
         document.getElementById("regError").style.display = "none";
 
@@ -212,47 +226,31 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
             card.classList.remove("active");
         }
         
-        // Tunggu transisi slide sedikit, lalu resize
+        // Tunggu animasi slide sebentar, baru resize
         setTimeout(setHeight, 50); 
     }
 
-    // Jalankan saat pertama kali loading
+    // 3. DETEKSI ERROR DARI PHP
-    window.addEventListener("load", setHeight);
+    window.addEventListener("DOMContentLoaded", function() {
-    // Jalankan jika ukuran layar browser diubah
+        setHeight(); // Set tinggi awal
+
+        const urlParams = new URLSearchParams(window.location.search);
+        const errorStatus = urlParams.get('error');
+
+        if (errorStatus === 'gagal') {
+            const errorBox = document.getElementById("loginError");
+            errorBox.innerText = "Username atau Password salah!";
+            errorBox.style.display = "block";
+            
+            setHeight();
+            window.history.replaceState(null, null, window.location.pathname);
+        }
+    });
+
     window.addEventListener("resize", setHeight);
 
-
+    // 4. EFEK GLITTER (HIASAN)
-    /* --- LOGIC SUBMIT (PHP) --- */
-    loginForm.addEventListener("submit", function(e) {
-        const username = document.getElementById("loginUser").value.trim();
-        const password = document.getElementById("loginPass").value.trim();
-        if (!username || !password) {
-            e.preventDefault();
-            showMsg(document.getElementById("loginError"), "Isi semua data!");
-        }
-    });
-
-    registerForm.addEventListener("submit", function(e) {
-        const pass = document.getElementById("regPass").value.trim();
-        const confirm = document.getElementById("regConfirm").value.trim();
-        if (pass.length < 6) {
-            e.preventDefault();
-            showMsg(document.getElementById("regError"), "Password minimal 6 karakter!");
-        } else if (pass !== confirm) {
-            e.preventDefault();
-            showMsg(document.getElementById("regError"), "Password tidak cocok!");
-        }
-    });
-
-    function showMsg(element, msg) {
-        element.innerText = msg;
-        element.style.display = "block";
-        setHeight(); // Resize ulang jika pesan error muncul
-    }
-
-    /* Glitter Effect */
     document.addEventListener("DOMContentLoaded", function () {
-        const card = document.querySelector(".auth-card");
         for (let i = 0; i < 15; i++) {
             const g = document.createElement("div");
             g.className = "glitter";
@@ -264,6 +262,59 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
             card.appendChild(g);
         }
     });
+
+    // ==========================================
+    // 5. VALIDASI REGISTER (YANG BARU DITAMBAHKAN)
+    // ==========================================
+    if (registerForm) {
+        registerForm.addEventListener("submit", function(event) {
+            // Tahan pengiriman form ke PHP dulu
+            event.preventDefault();
+
+            // Ambil nilai dari inputan (Pastikan ID di HTML sudah sesuai ya!)
+            const username = document.getElementById("regUser").value;
+            const email    = document.getElementById("regEmail").value;
+            const password = document.getElementById("regPass").value;
+            const confirmPassword = document.getElementById("regConfirm").value;
+
+            // Fungsi helper untuk menampilkan error di kotak merah Register
+            function showError(pesan) {
+                const errorBox = document.getElementById("regError");
+                errorBox.innerText = pesan;
+                errorBox.style.display = "block";
+                setHeight(); // PENTING: Resize kartu agar pesan error muat
+            }
+
+            // --- Mulai Cek Validasi ---
+
+            // 1. Cek Kosong
+            if (!username || !email || !password || !confirmPassword) {
+                showError("Semua field harus diisi!");
+                return;
+            }
+
+            // 2. Cek Format Email
+            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+                showError("Format email tidak valid");
+                return;
+            }
+
+            // 3. Cek Panjang Password
+            if (password.length < 6) {
+                showError("Password minimal 6 karakter");
+                return;
+            }
+
+            // 4. Cek Kesamaan Password
+            if (password !== confirmPassword) {
+                showError("Password dan konfirmasi password tidak cocok");
+                return;
+            }
+
+            // Jika semua aman, baru kirim ke auth.php
+            this.submit();
+        });
+    }
 </script>
 
 </body>