MINI MINI MANI MO

Path : /var/www/html/sistemas/spid/resources/views/sistemaVotos/
Current File : /var/www/html/sistemas/spid/resources/views/sistemaVotos/cronometro.blade.php
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Diputados</title>
    <link rel="icon" type="image/png" href="{{asset("storage/img/favicon.svg")}}">
    <script defer="defer" src="{{asset("assets/diputados/app.js")}}"></script>
    <script defer="defer" src="{{asset("assets/diputados/particles.js")}}"></script>
    <script src="https://code.jquery.com/jquery-3.6.3.js"
            integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
    <link href="{{asset("assets/diputados/app.css")}}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <meta name="csrf-token" content="{{ csrf_token() }}"/>

    <style>
        .active {
            font-weight: bold;
            color: red; /* O el color que prefieras */
        }




        .contenedor {
            text-align: center;
            background: #444;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        h1 {
            font-size: 4em;
            margin-bottom: 20px;
        }

        .botones button, .controles button {
            font-size: 1.2em;
            padding: 10px 15px;
            margin: 5px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }

        .botones button {
            background-color: #17a2b8;
            color: white;
        }

        .controles button {
            background-color: #28a745;
            color: white;
        }

        #reset {
            background-color: #dc3545;
        }
    </style>
</head>
<body>
    <audio id="alarma" src="{{ asset('images/pleno_sound.mp3') }}"></audio>

<header>
    <nav class="navbar navbar-expand-xl">
        <div class="container-xl position-lg-relative d-flex align-items-center justify-content-between py-16 py-lg-0">
            <a class="navbar-brand d-flex align-items-center position-relative" href="{{asset("/")}}"><img
                    src={{asset("images/logo/LV.svg")}} alt=""> </a>


        </div>
    </nav>
</header>
<main>
    <div class="contenedor">
        <h1 id="display">00:00</h1>
        <div class="botones">
            <button onclick="setTime(5)">5 min</button>
            <button onclick="setTime(10)">10 min</button>
            <button onclick="setTime(15)">15 min</button>
            <button onclick="setTime(20)">20 min</button>
            <button onclick="setTime(25)">25 min</button>
            <button onclick="setTime(30)">30 min</button>
        </div>
        <div class="controles">
            <button id="startPause">Iniciar</button>
            <button id="reset">Reiniciar</button>
        </div>
    </div>
</main>

@yield("scripts")
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
    let tiempoRestante = 0;
    let intervalo = null;
    let corriendo = false;
    let subiendo = false;
    let tiempoTranscurrido = 0;
    function actualizarDisplay() {
        const minutos = Math.floor(tiempoRestante / 60);
        const segundos = tiempoRestante % 60;
        document.getElementById("display").innerText =
            `${minutos.toString().padStart(2, '0')}:${segundos.toString().padStart(2, '0')}`;
    }

    function setTime(minutos) {
        tiempoRestante = minutos * 60;
        actualizarDisplay();
        clearInterval(intervalo);
        corriendo = false;
        document.getElementById("startPause").innerText = "Iniciar";
    }

    function iniciarPausar() {
        if (tiempoRestante <= 0) return;

        if (corriendo) {
            clearInterval(intervalo);
            document.getElementById("startPause").innerText = "Reanudar";
        } else {
            const alarma = document.getElementById("alarma");

            intervalo = setInterval(() => {
    if (!subiendo) {
        if (tiempoRestante > 0) {
            tiempoRestante--;

            // 🚨 Reproducir cuando queden 10 segundos
            if (tiempoRestante === 00) {
                alarma.play();
            }

            actualizarDisplay();
        } else {
            // Al llegar a 0, cambiar a modo "subida"
            clearInterval(intervalo);
            alarma.pause();
            alarma.currentTime = 0;
            // alert("¡Tiempo terminado! Iniciando conteo hacia adelante...");
            subiendo = true;
            tiempoTranscurrido = 0;

            // Iniciar nuevo intervalo en modo subida
            intervalo = setInterval(() => {
                tiempoTranscurrido++;
                const minutos = Math.floor(tiempoTranscurrido / 60);
                const segundos = tiempoTranscurrido % 60;
                document.getElementById("display").innerText =
                    `${minutos.toString().padStart(2, '0')}:${segundos.toString().padStart(2, '0')}`;
            }, 1000);
        }
    }
}, 1000);
            document.getElementById("startPause").innerText = "Pausar";
        }
        corriendo = !corriendo;
    }

   function reiniciar() {
    clearInterval(intervalo);
    tiempoRestante = 0;
    tiempoTranscurrido = 0;
    subiendo = false;
    actualizarDisplay();
    corriendo = false;
    document.getElementById("startPause").innerText = "Iniciar";
    const alarma = document.getElementById("alarma");
    alarma.pause();
    alarma.currentTime = 0;
}

    document.getElementById("startPause").addEventListener("click", iniciarPausar);
    document.getElementById("reset").addEventListener("click", reiniciar);

    actualizarDisplay();
    $(document).ready(function() {

    });


</script>
@stack("page-scripts")

</body>
</html>
OHA YOOOO