body { font-family: Arial; padding: 20px; }
.slot { margin: 10px 0; }
button:disabled { background-color: #ccc; }
</style>
</head>
<body>
<h1>Reserva tu clase de Kickboxing</h1>
<p>Las clases están disponibles lunes y miércoles a las 11:00 y 20:00. Puedes reservar desde 2 días antes y hasta 2 horas antes del inicio.</p>
<div id=»slots»></div>
<script>
const horarios = [
{ dia: 1, hora: 11 }, // lunes
{ dia: 1, hora: 20 },
{ dia: 3, hora: 11 }, // miércoles
{ dia: 3, hora: 20 }
];
const container = document.getElementById(«slots»);
function crearFechaProximaClase(diaSemana, hora) {
const hoy = new Date();
const diaActual = hoy.getDay();
const diff = (diaSemana + 7 – diaActual) % 7 || 7;
const fechaClase = new Date(hoy);
fechaClase.setDate(hoy.getDate() + diff);
fechaClase.setHours(hora, 0, 0, 0);
return fechaClase;
}
horarios.forEach(({ dia, hora }) => {
const fechaClase = crearFechaProximaClase(dia, hora);
const ahora = new Date();
const limiteInicio = new Date(fechaClase);
limiteInicio.setDate(fechaClase.getDate() – 2);
const limiteFin = new Date(fechaClase);
limiteFin.setHours(fechaClase.getHours() – 2);
const sePuedeReservar = ahora >= limiteInicio && ahora <= limiteFin;
const key = `reserva-${fechaClase.toISOString()}`;
const reservado = localStorage.getItem(key);
const div = document.createElement(«div»);
div.className = «slot»;
div.textContent = `Clase: ${fechaClase.toLocaleString(‘es-ES’)}`;
const btn = document.createElement(«button»);
btn.textContent = reservado ? «Reservado» : «Reservar»;
btn.disabled = reservado || !sePuedeReservar;
btn.onclick = () => {
localStorage.setItem(key, «true»);
btn.textContent = «Reservado»;
btn.disabled = true;
alert(«¡Clase reservada con éxito!»);
};
div.appendChild(btn);
container.appendChild(div);
});
</script>
</body>
