<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lingel Portal - Login</title>
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        :root {
            --brand-green: #0e6b57;
            --brand-green-dark: #0a4d3f;
            --brand-green-soft: #17806b;
            --brand-gold: #d8a52a;
            --brand-gold-soft: #efc45b;
            --brand-cream: #f8f4e9;
            --text-soft: #b9c7bf;
        }

      body {
 background: rgba(10, 22, 19, 0.88);
}


        .login-shell {
            position: relative;
            overflow: hidden;
            /* background: rgba(10, 22, 19, 0.88); */
            border: 1px solid rgba(216, 165, 42, 0.14);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(255,255,255,0.02) inset;
            backdrop-filter: blur(16px);
        }

        .login-shell::before {
            content: "";
            position: absolute;
            top: -90px;
            right: -90px;
            width: 220px;
            height: 220px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(216, 165, 42, 0.16), transparent 68%);
            pointer-events: none;
        }

        .login-shell::after {
            content: "";
            position: absolute;
            bottom: -90px;
            left: -90px;
            width: 220px;
            height: 220px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(14, 107, 87, 0.18), transparent 70%);
            pointer-events: none;
        }

        .logo-ring {
            width: 84px;
            height: 84px;
            border-radius: 999px;
            padding: 5px;
            background: linear-gradient(135deg, rgba(216,165,42,0.9), rgba(14,107,87,0.9));
            box-shadow: 0 12px 26px rgba(216, 165, 42, 0.16);
        }

        .logo-ring img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 999px;
            background: white;
        }

        .brand-title {
            color: var(--brand-cream);
            letter-spacing: 0.14em;
        }

        .brand-accent {
            color: var(--brand-gold-soft);
        }

        .brand-subtitle {
            color: rgba(248, 244, 233, 0.68);
        }

        .security-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--brand-gold-soft);
            background: rgba(216, 165, 42, 0.10);
            border: 1px solid rgba(216, 165, 42, 0.18);
        }

        .input-label {
            color: var(--text-soft);
        }

        .brand-input {
            background: rgba(255,255,255,0.04);
            color: white;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 14px;
            transition: all 0.25s ease;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.01);
        }

        .brand-input::placeholder {
            color: rgba(255,255,255,0.35);
        }

        .brand-input:focus {
            outline: none;
            border-color: rgba(216, 165, 42, 0.65);
            box-shadow:
                0 0 0 4px rgba(216, 165, 42, 0.10),
                0 10px 24px rgba(0,0,0,0.14);
            background: rgba(255,255,255,0.05);
        }

        .brand-button {
            background: linear-gradient(135deg, var(--brand-green), var(--brand-green-soft));
            color: white;
            border-radius: 14px;
            font-weight: 800;
            letter-spacing: 0.02em;
            box-shadow: 0 12px 24px rgba(14, 107, 87, 0.25);
            transition: all 0.25s ease;
        }

        .brand-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 30px rgba(14, 107, 87, 0.32);
            background: linear-gradient(135deg, #0d755f, #1a8b73);
        }

        .error-box {
            background: rgba(239, 68, 68, 0.10);
            border: 1px solid rgba(239, 68, 68, 0.28);
            color: #fecaca;
        }

        .footer-note {
            color: rgba(248, 244, 233, 0.45);
            font-size: 12px;
            letter-spacing: 0.05em;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center px-4">

    <div class="w-full max-w-md login-shell rounded-3xl p-8 md:p-10">
        <div class="relative z-10">
            <div class="text-center mb-8">
                <div class="flex justify-center mb-5">
                    <div class="logo-ring">
                        <img src="assets/logo.png" alt="Lingel Logo">
                    </div>
                </div>

                <div class="mb-4">
                    <span class="security-badge">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 1l7 4v5c0 5-3.438 8.938-7 10-3.562-1.062-7-5-7-10V5l7-4z" clip-rule="evenodd"></path>
                        </svg>
                        Secure Access
                    </span>
                </div>

                

                <p class="brand-subtitle mt-3 text-sm">
                    Secure portal for authorized persons only
                </p>
            </div>

            <?php if($errors->any()): ?>
                <div class="error-box text-sm p-4 rounded-xl mb-5 flex items-start gap-3">
                    <span class="mt-0.5">⚠</span>
                    <span><?php echo e($errors->first()); ?></span>
                </div>
            <?php endif; ?>

            <form method="POST" action="<?php echo e(route('login')); ?>" class="space-y-5">
                <?php echo csrf_field(); ?>

                <div>
                    <label class="block input-label text-sm font-semibold mb-2" for="email">
                        Email Address
                    </label>
                    <input
                        type="email"
                        name="email"
                        id="email"
                        value="<?php echo e(old('email')); ?>"
                        required
                        placeholder="Enter your email address"
                        class="brand-input w-full px-4 py-3.5"
                    >
                </div>

                <div>
                    <label class="block input-label text-sm font-semibold mb-2" for="password">
                        Password
                    </label>
                    <input
                        type="password"
                        name="password"
                        id="password"
                        required
                        placeholder="Enter your password"
                        class="brand-input w-full px-4 py-3.5"
                    >
                </div>

                <button type="submit" class="brand-button w-full py-3.5 px-4">
                    Secure Login
                </button>
            </form>

            
        </div>
    </div>

</body>
</html>
<?php /**PATH C:\wamp64\www\lingel-portal\system\resources\views/auth/login.blade.php ENDPATH**/ ?>