<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Register - Memory Game</title>
    <link rel="stylesheet" href="/Kelompok02-Memory-Card/assets/style.css">
</head>
<body>
    <img src="images/fruit1.png" class="fruit f1"><img src="images/fruit2.png" class="fruit f2">
    <img src="images/fruit3.png" class="fruit f3"><img src="images/fruit4.png" class="fruit f4">
    <img src="images/fruit5.png" class="fruit f5"><img src="images/fruit6.png" class="fruit f6">
    <img src="images/fruit7.png" class="fruit f7"><img src="images/fruit8.png" class="fruit f8">
    <img src="images/fruit9.png" class="fruit f9"><img src="images/fruit10.png" class="fruit f10">

    <div class="auth-card" id="authCard">
        <div class="form-wrapper">
            <div class="forms-container">
                <form id="loginForm" action="auth.php" method="POST">
                    <h2>Selamat Datang! ✨</h2>
                    <p class="subtitle">Login untuk bermain</p>

                    <div id="loginError" class="error-box"></div>

                    <label>Username</label>
                    <input type="text" id="loginUser" name="username" placeholder="Masukan Username" required>

                    <label>Password</label>
                    <input type="password" id="loginPass" name="password" placeholder="Masukan Password" required>

                    <button type="submit" class="btn-submit" name="btn-login">Login Sekarang</button>

                    <p class="switch-text">
                        Belum punya akun? <a onclick="toggleAuth('register')">Daftar Sekarang</a>
                    </p>
                </form>

                <form id="registerForm" action="auth.php" method="POST">
                    <h2>Buat Akun Baru ✨</h2>
                    <p class="subtitle">Daftar petualangan baru</p>

                    <div id="regError" class="error-box"></div>

                    <label>Username</label>
                    <input type="text" id="regUser" name="username" placeholder="Pilih Username" required>

                    <label>Email</label>
                    <input type="email" id="regEmail" name="email" placeholder="Masukan Email" required>

                    <label>Password</label>
                    <input type="password" id="regPass" name="password" placeholder="Minimal 6 karakter" required>

                    <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">
                        Sudah punya akun? <a onclick="toggleAuth('login')">Login Sekarang</a>
                    </p>
                </form>

            </div>
        </div>
    </div>

<script src="assets/script.js"></script>

</body>
</html>