
<?php


session_start();

if (isset($_SESSION['iduser'])) {
    // Si la sesión está activa, redirigir a medicina.php
    header('Location: medicina.php');
    exit();  // Es importante detener la ejecución después de la redirección
}

?>



<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Iniciar Sesión</title>
    <link rel="icon" type="image/png" href="img/logo_krugert.png">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css">
 


    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #23252a;
}

.box {
    position: relative;
    width: 380px;
    height: 550px;
    background: #222222;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
}

.box::before{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
}

.box::after{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -3s;
}

.borderLine::before{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg, transparent, transparent, #007bff, #274cff, #007bff);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -1.5s;
}

.borderLine::after
{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -4.5s;
}


@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    
}

.box form{
    position: absolute;
    inset: 4px;
    background: #222;
    padding: 50px 40px;
    border-radius: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.box form h2{
    color: #fff;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.1em;
}

.box form .inputBox{
    position: relative;
    width: 300px;
    margin-top: 35px;
}

.box form .inputBox input{
    position: relative;
    width: 100%;
    padding: 20px 10px 10px;
    background: transparent;
    outline: none;
    border: none;
    box-shadow: none;
    color: #23242a;
    font-size: 1em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    z-index: 10;
}

.box form .inputBox span{
    position: absolute;
    left: 0;
    padding: 20px 0px 10px;
    pointer-events: none;
    color: #8f8f8f;
    font-size: 1em;
    letter-spacing: 0.05em;
    transition: 0.5s;
}

.box form .inputBox input:valid ~ span,
.box form .inputBox input:focus ~ span {
    color: #fff;
    font-size: 0.75em;
    transform: translateY((-34px));
}

.box form .inputBox i{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    transition: 0.5s;
    pointer-events: none;
}

.box form .inputBox input:valid ~ i,
.box form .inputBox input:focus ~ i {
    height: 44px;
}

.box form .links{
    display: flex;
    justify-content: space-between;
}

.box form .links a{
    margin: 10px 0;
    font-size: 0.75em;
    color: #8f8f8f;
    text-decoration: none;
}

.box form .links a:hover,
.box form .links a:nth-child(2){
    color: #fff;
}

#submit{
    border: none;
    outline: none;
    padding: 9px 25px;
    cursor: pointer;
    font-size: 0.9em;
    border-radius: 4px;
    font-weight: 600;
    width: 100px;
    margin-top: 10px;
}

#submit:active{
    opacity: 0.8;
}
    </style>


 <style>
        /* Estilo del popup */
        .popup {
            position: fixed;
            top: -100px; /* Empieza fuera de la pantalla */
            left: 50%;
            transform: translateX(-50%);
            background-color: #4CAF50; /* Verde de éxito */
            color: white;
            padding: 15px 25px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            transition: top 0.5s ease-in-out;
            z-index: 1000;
        }

        /* Clase para mostrar el popup */
        .show {
            top: 20px; /* Baja el popup */
        }

              /* Estilo del popup */
        .popup2 {
            position: fixed;
            top: -100px; /* Empieza fuera de la pantalla */
            left: 50%;
            transform: translateX(-50%);
            background-color: #dc3545; /* Verde de éxito */
            color: white;
            padding: 15px 25px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            transition: top 0.5s ease-in-out;
            z-index: 1000;
        }

        /* Clase para mostrar el popup */
        .show2 {
            top: 20px; /* Baja el popup */
        }
    </style>


</head>
<body style="background: #222222;">
    
 <!-- Contenedor del popup -->
    <div id="popup" class="popup">✅ CONEXIÓN EXITOSA!</div>
    <div id="popup2" class="popup2">❌ DATOS INCORRECTOS</div>

    <div class="box">
        <span class="borderLine"></span>

        <form action="">
            <div style="width: 100%;justify-content: center;text-align: center;margin-bottom: 10px;">
            <img src="img/logo_krugert.png" height="140">
            </div>

            <h2>INICIO AHORA</h2>
            <div class="inputBox">
                <input type="text" required id="username" autocomplete="off">
                <span>TU USUARIO</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="password" required id="password" autocomplete="off">
                <span>TU CONTRASEÑA</span>
                <i></i>
            </div>
            <div class="links">
                <a href="#">Forgot Password</a>
          
            </div>
            <input  type="button" id="submit" value="Login">

            <div id="loginResult" style="margin-top: 5px;"></div>
        </form>
    </div>




    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        



  function mostrarPopup() {
            var popup = document.getElementById("popup");
            popup.classList.add("show");

            // Ocultar después de 3 segundos
            setTimeout(function() {
                popup.classList.remove("show");
            }, 3000);
        }

  function mostrarPopup2() {
            var popup = document.getElementById("popup2");
            popup.classList.add("show2");

            // Ocultar después de 3 segundos
            setTimeout(function() {
                popup.classList.remove("show2");
            }, 3000);
        }



        $(document).ready(function() {




            $('#submit').click(function() {


                let user = $('#username').val();
                let pass = $('#password').val();


                if(user=='' && pass ==''){
                    return;
                }

                document.getElementById('submit').disabled=true;
    $.ajax({
        type:"POST",
        url:"php/login.php",
        async: true,
        data:{username:user,password:pass},
        success: function(datos){
        var dataJson = eval(datos);
        
          if(dataJson.length>0){
                    //console.log('totalEnBaseDatos: ' + dataJson[0].total);
                    

                    if(dataJson[0].s=='1'){

                         mostrarPopup();
                            

                        setTimeout(function() {window.location.href = 'medicina.php';}, 2000);
                        
                    }
                    if(dataJson[0].s=='0'){
                    mostrarPopup2()
                         document.getElementById('login').disabled=false;


                    }



          }else{

               document.getElementById('submit').disabled=false;
          
          }

      },});


    });





            $('.toggle-password').click(function() {
                let input = $('#password')[0];
                let icon = $(this).find('i');
                if (input.type === "password") {
                    input.type = "text";
                    icon.removeClass('bi-eye-fill').addClass('bi-eye-slash-fill');
                } else {
                    input.type = "password";
                    icon.removeClass('bi-eye-slash-fill').addClass('bi-eye-fill');
                }
            });
        });
    </script>


</body>


</html>


