MINI MINI MANI MO
<!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 src="{{ asset('assets/diputados/app.js') }}"></script> --}}
{{-- <script 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>
.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>
<div class="escudo">
<!--<img id="escudo" src="{{ asset('https://legislativoedomex.gob.mx/storage/images/EscudoLXII_Mesa.png') }}">-->
</div>
<header>
<nav class="navbar navbar-expand-xl">
<div class="container-xl d-flex align-items-center justify-content-between py-16 py-lg-0">
<a class="navbar-brand d-flex align-items-center" href="{{ asset('/') }}">
<img src="{{ asset('images/logo/LV.svg') }}" alt="">
</a>
</div>
</nav>
</header>
<main>
<div class="contenedor">
<h1 id="display">10:00</h1>
<div class="botones" style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
<label for="tiempoManual" style="color: white; font-size: 1.2em;">Ingresa el tiempo (mm:ss):</label>
<input id="tiempoManual" type="text" placeholder="e.j. 05:30" style="width: 180px; padding: 5px; font-size: 1.2em; text-align: center;">
<button onclick="setTiempoManual()">Establecer en pantalla</button>
</div>
<br>
<br>
<div class="controles">
<button id="startPause">Iniciar</button>
<button id="reset">Reiniciar</button>
</div>
</div>
</main>
<script>
let tiempoRestante = 0;
let intervalo = null;
let corriendo = false;
let subiendo = false;
let tiempoTranscurrido = 0;
let ventanaVisual = null;
$(document).ready(function() {
document.getElementById("tiempoManual").value = '10:00';
});
function actualizarDisplay() {
const minutos = Math.floor((subiendo ? tiempoTranscurrido : tiempoRestante) / 60);
const segundos = (subiendo ? tiempoTranscurrido : tiempoRestante) % 60;
const tiempoFormateado = `${minutos.toString().padStart(2, '0')}:${segundos.toString().padStart(2, '0')}`;
document.getElementById("display").innerText = tiempoFormateado;
if (ventanaVisual && !ventanaVisual.closed) {
ventanaVisual.postMessage({
tipo: "tiempo"
, tiempo: tiempoFormateado
}, "*");
}
}
function setTiempoManual() {
const input = document.getElementById("tiempoManual").value.trim();
const regex = /^(\d{1,3}):([0-5]?\d)$/; // minutos:segundos
const match = input.match(regex);
if (match) {
const minutos = parseInt(match[1], 10);
const segundos = parseInt(match[2], 10);
const totalSegundos = (minutos * 60) + segundos;
tiempoRestante = totalSegundos;
actualizarDisplay();
clearInterval(intervalo);
corriendo = false;
subiendo = false;
document.getElementById("startPause").innerText = "Iniciar";
} else {
alert("Formato inválido. Usa mm:ss (ejemplo: 03:45)");
}
}
function iniciarPausar() {
const alarma = document.getElementById("alarma");
if (corriendo) {
clearInterval(intervalo);
document.getElementById("startPause").innerText = "Reanudar";
corriendo = false;
} else {
if (!subiendo) {
// Modo descendente (cuenta regresiva)
intervalo = setInterval(() => {
if (tiempoRestante > 0) {
tiempoRestante--;
actualizarDisplay();
} else {
// Cuando termina el conteo regresivo
clearInterval(intervalo);
alarma.play();
setTimeout(() => {
alarma.pause();
alarma.currentTime = 0;
}, 2000);
subiendo = true;
tiempoTranscurrido = 0;
// Iniciar cuenta ascendente inmediatamente
intervalo = setInterval(() => {
tiempoTranscurrido++;
actualizarDisplay();
}, 1000);
}
}, 1000);
} else {
// Modo ascendente (cuenta hacia delante)
intervalo = setInterval(() => {
tiempoTranscurrido++;
actualizarDisplay();
}, 1000);
}
document.getElementById("startPause").innerText = "Pausar";
corriendo = true;
}
}
function reiniciar() {
clearInterval(intervalo);
tiempoRestante = 600;
tiempoTranscurrido = 0;
subiendo = false;
actualizarDisplay();
corriendo = false;
document.getElementById("startPause").innerText = "Iniciar";
document.getElementById("tiempoManual").value = '10:00';
const alarma = document.getElementById("alarma");
alarma.pause();
alarma.currentTime = 0;
}
document.getElementById("startPause").addEventListener("click", iniciarPausar);
document.getElementById("reset").addEventListener("click", reiniciar);
window.onload = () => {
ventanaVisual = window.open('{{ route('visual') }}', '_blank', 'width=800,height=600');
actualizarDisplay();
};
</script>
</body>
</html>
OHA YOOOO