<!DOCTYPE html>
<html>

<head>

    <title>Login WebGIS</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <style>
    body {

        font-family: Arial;
        background: #f4f4f4;

        display: flex;
        justify-content: center;
        align-items: center;

        height: 100vh;
    }

    .login-box {

        background: white;
        padding: 30px;

        border-radius: 10px;

        width: 300px;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    input {

        width: 100%;
        padding: 10px;

        margin-top: 10px;
    }

    button {

        width: 100%;
        padding: 10px;

        margin-top: 15px;

        background: #3498db;
        color: white;

        border: none;
    }
    </style>

</head>

<body class="bg-gray-100 flex items-center justify-center min-h-screen">

    <div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-md">

        <div class="text-center mb-6">

            <h1 class="text-3xl font-bold text-blue-600">

                WebGIS Kemiskinan

            </h1>

            <p class="text-gray-500 mt-2">

                Sistem Pengentasan Kemiskinan Kalimantan Barat

            </p>

        </div>

        <form action="login.php" method="POST" class="space-y-4">

            <input type="text" name="username" placeholder="Username"
                class="w-full border rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500" required>

            <input type="password" name="password" placeholder="Password"
                class="w-full border rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500" required>

            <button type="submit"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-xl font-semibold transition">

                Login

            </button>

        </form>

        <div class="mt-6 text-center space-y-2">

            <a href="register.php" class="block text-blue-600 hover:underline">

                Daftar sebagai Warga

            </a>

            <a href="register_cs.php" class="block text-green-600 hover:underline">

                Daftar sebagai CS Rumah Ibadah

            </a>

        </div>

    </div>

</body>

</html>