<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login con Ojos Animados</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    
    <!-- Custom CSS -->
    <style>
        body {
            background: linear-gradient(135deg, #478576, #53CDE5);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .login-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 20px;
            background: #E5E3DF;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            max-width: 900px;
            width: 100%;
        }

        .login-container {
            flex: 1;
            padding: 20px;
            position: relative;
        }

        .login-title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 28px;
            font-weight: bold;
            color: #033333;
        }

        .form-control {
            border-radius: 10px;
            padding-left: 35px;
        }

        .input-group-text {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            background-color: transparent;
            border: none;
            color: #033333;
        }

        .btn-login {
            background: linear-gradient(135deg, #C7A850, #478576);
            border: none;
            color: white;
            border-radius: 10px;
            width: 100%;
            transition: background 0.3s ease;
        }

        .btn-login:hover {
            background: linear-gradient(135deg, #53CDE5, #C7A850);
        }

        /* Ojos Animados */
        .eyes-wrapper {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
        }

        .eye {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            top: 10px;
            transition: transform 0.1s;
        }

        .eye-left {
            left: 0;
        }

        .eye-right {
            right: 0;
        }

        .pupil {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.1s;
        }

        /* Imagen */
        .login-image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-image img {
            width: 100%;
            max-width: 400px;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>

    <div class="login-wrapper">
        <!-- Formulario -->
        <div class="login-container">
            <h3 class="login-title">Iniciar Sesión</h3>
            <form id="loginForm">
                <div class="input-group mb-3">
                    <span class="input-group-text"><i class="bi bi-person"></i></span>
                    <input type="text" class="form-control" id="usuario" name="usuario" placeholder="Usuario" required>
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text"><i class="bi bi-lock"></i></span>
                    <input type="password" class="form-control" id="contrasena" name="contrasena" placeholder="Contraseña" required>
                </div>
                <button type="submit" class="btn btn-login">Iniciar sesión</button>
            </form>
        </div>

        <!-- Ojos del Personaje -->
        <div class="eyes-wrapper">
            <div class="eye eye-left">
                <div class="pupil" id="pupil-left"></div>
            </div>
            <div class="eye eye-right">
                <div class="pupil" id="pupil-right"></div>
            </div>
        </div>

        <!-- Imagen -->
        <div class="login-image">
            <img src="https://levitax.mx/assets/img/hero/hero_img_4_1.png?text=Login+Image" alt="Imagen de Login">
        </div>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

    <!-- Custom JS -->
    <script>
        document.getElementById("loginForm").addEventListener("submit", function(event) {
            event.preventDefault(); 
            // Aquí agregarías la lógica de validación de login
            console.log("Usuario:", document.getElementById("usuario").value);
            console.log("Contraseña:", document.getElementById("contrasena").value);
        });

        // Ojos animados - movimiento basado en la posición del cursor
        document.addEventListener('mousemove', function(event) {
            const eyes = document.querySelectorAll('.pupil');
            const mouseX = event.clientX;
            const mouseY = event.clientY;

            eyes.forEach((eye, index) => {
                const eyeRect = eye.getBoundingClientRect();
                const eyeCenterX = eyeRect.left + eyeRect.width / 2;
                const eyeCenterY = eyeRect.top + eyeRect.height / 2;
                const deltaX = mouseX - eyeCenterX;
                const deltaY = mouseY - eyeCenterY;
                const angle = Math.atan2(deltaY, deltaX);
                const distance = Math.min(10, Math.sqrt(deltaX ** 2 + deltaY ** 2));

                eye.style.transform = `translate(-50%, -50%) translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;
            });
        });
    </script>
</body>
</html>
