<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reserva de Computadoras - Santa Rita Agustinos</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Spectral:wght@400;600;700&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--santa-rita-gold: #D4AF37;
--santa-rita-red: #8B1538;
--santa-rita-red-dark: #6B0F2A;
--santa-rita-gold-light: #E8C968;
--bg-primary: #0A0A0A;
--bg-secondary: #1A1A1A;
--bg-card: #252525;
--text-primary: #F5F5F5;
--text-secondary: #B0B0B0;
--border: #333333;
}
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(139, 21, 56, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
position: relative;
z-index: 1;
}
header {
text-align: center;
padding: 3rem 0 4rem;
position: relative;
}
.logo-container {
width: 200px;
height: 200px;
margin: 0 auto 2rem;
background: var(--bg-secondary);
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
}
.logo-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
h1 {
font-family: 'Spectral', serif;
font-size: 2.8rem;
font-weight: 700;
background: linear-gradient(135deg, var(--santa-rita-gold) 0%, var(--santa-rita-gold-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.subtitle {
color: var(--text-secondary);
font-size: 1.1rem;
font-weight: 400;
}
.main-grid {
display: grid;
grid-template-columns: 1fr 450px;
gap: 2rem;
margin-top: 2rem;
}
.calendar-section {
background: var(--bg-secondary);
border-radius: 24px;
padding: 2rem;
border: 1px solid var(--border);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--border);
}
.calendar-header h2 {
font-family: 'Spectral', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--santa-rita-gold);
}
.week-navigation {
display: flex;
gap: 1rem;
align-items: center;
}
.nav-btn {
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 0.6rem 1.2rem;
border-radius: 10px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
}
.nav-btn:hover {
background: var(--santa-rita-gold);
color: var(--bg-primary);
border-color: var(--santa-rita-gold);
transform: translateY(-2px);
}
.current-week {
font-size: 0.95rem;
color: var(--text-secondary);
font-weight: 500;
min-width: 200px;
text-align: center;
}
.calendar {
display: grid;
grid-template-columns: 100px repeat(5, 1fr);
gap: 1px;
background: var(--border);
border-radius: 12px;
overflow: hidden;
}
.calendar-cell {
background: var(--bg-card);
padding: 1rem;
min-height: 60px;
}
.calendar-header-cell {
background: var(--santa-rita-red-dark);
color: var(--santa-rita-gold-light);
font-weight: 600;
text-align: center;
padding: 1rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.time-cell {
background: var(--bg-secondary);
font-weight: 500;
color: var(--text-secondary);
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
border-right: 2px solid var(--border);
}
.reservation-cell {
cursor: pointer;
transition: all 0.2s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.reservation-cell:hover {
background: rgba(212, 175, 55, 0.1);
}
.reservation-cell.available {
background: var(--bg-card);
}
.reservation-cell.reserved {
background: linear-gradient(135deg, rgba(139, 21, 56, 0.4) 0%, rgba(139, 21, 56, 0.2) 100%);
border-left: 3px solid var(--santa-rita-red);
}
.reservation-cell.reserved::after {
content: attr(data-name);
font-size: 0.7rem;
color: var(--santa-rita-gold-light);
font-weight: 500;
}
.booking-section {
background: var(--bg-secondary);
border-radius: 24px;
padding: 2rem;
border: 1px solid var(--border);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
height: fit-content;
position: sticky;
top: 2rem;
}
.booking-section h2 {
font-family: 'Spectral', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--santa-rita-gold);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-secondary);
font-weight: 500;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.form-group input,
.form-group select {
width: 100%;
padding: 0.9rem 1.2rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text-primary);
font-size: 1rem;
font-family: 'DM Sans', sans-serif;
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--santa-rita-gold);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}
.time-slots {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
max-height: 300px;
overflow-y: auto;
padding: 0.5rem;
background: var(--bg-card);
border-radius: 10px;
border: 1px solid var(--border);
}
.time-slot {
padding: 0.8rem;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
text-align: center;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease;
}
.time-slot:hover {
background: rgba(212, 175, 55, 0.1);
border-color: var(--santa-rita-gold);
}
.time-slot.selected {
background: var(--santa-rita-gold);
color: var(--bg-primary);
border-color: var(--santa-rita-gold);
font-weight: 600;
}
.btn-submit {
width: 100%;
padding: 1.2rem;
background: linear-gradient(135deg, var(--santa-rita-red) 0%, var(--santa-rita-red-dark) 100%);
color: var(--santa-rita-gold-light);
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: 'Spectral', serif;
margin-top: 1rem;
box-shadow: 0 4px 15px rgba(139, 21, 56, 0.4);
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139, 21, 56, 0.6);
}
.btn-submit:active {
transform: translateY(0);
}
.time-slots::-webkit-scrollbar {
width: 8px;
}
.time-slots::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: 10px;
}
.time-slots::-webkit-scrollbar-thumb {
background: var(--santa-rita-gold);
border-radius: 10px;
}
@media (max-width: 1200px) {
.main-grid {
grid-template-columns: 1fr;
}
.booking-section {
position: static;
}
}
@media (max-width: 768px) {
.calendar {
grid-template-columns: 80px repeat(5, 1fr);
font-size: 0.75rem;
}
.calendar-cell {
padding: 0.5rem;
min-height: 50px;
}
h1 {
font-size: 2rem;
}
.time-slots {
grid-template-columns: 1fr;
}
}
.success-message {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #86efac;
padding: 1rem;
border-radius: 10px;
margin-bottom: 1rem;
text-align: center;
font-weight: 500;
display: none;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.success-message.show {
display: block;
}
</style>
</head>
<body id="the7-body" class="wp-singular page-template-default page page-id-4331 wp-custom-logo wp-embed-responsive wp-theme-dt-the7 ehf-footer ehf-template-dt-the7 ehf-stylesheet-dt-the7 jkit-color-scheme transparent dt-responsive-on right-mobile-menu-close-icon ouside-menu-close-icon mobile-hamburger-close-bg-enable mobile-hamburger-close-bg-hover-enable fade-medium-mobile-menu-close-icon fade-medium-menu-close-icon srcset-enabled btn-flat custom-btn-color custom-btn-hover-color phantom-fade phantom-shadow-decoration phantom-custom-logo-on floating-mobile-menu-icon top-header first-switch-logo-left first-switch-menu-right second-switch-logo-left second-switch-menu-right right-mobile-menu layzr-loading-on popup-message-style the7-ver-14.2.1.1 elementor-default elementor-kit-410 elementor-page elementor-page-4331"><!-- Google Tag Manager (noscript) -->
<noscript><iframe data-src="https://www.googletagmanager.com/ns.html?id=GTM-PZW64TX"
height="0" width="0" style="display:none;visibility:hidden" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" class="lazyload" data-load-mode="1"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="container">
<header>
<div class="logo-container">
<!-- REEMPLAZA LA SIGUIENTE LINEA CON LA URL DE TU LOGO -->
<img decoding="async" src="URL_DE_TU_LOGO_AQUI" alt="Colegio Santa Rita Agustinos">
</div>
<h1>Reserva de Computadoras</h1>
<p class="subtitle">Sistema de reservas - Santa Rita Agustinos</p>
</header>
<div class="main-grid">
<div class="calendar-section">
<div class="calendar-header">
<h2>Calendario Semanal</h2>
<div class="week-navigation">
<button class="nav-btn" onclick="changeWeek(-1)">← Anterior</button>
<span class="current-week" id="currentWeek"></span>
<button class="nav-btn" onclick="changeWeek(1)">Siguiente →</button>
</div>
</div>
<div class="calendar" id="calendar"></div>
</div>
<div class="booking-section">
<div class="success-message" id="successMessage">
✓ ¡Reserva confirmada exitosamente!
</div>
<h2>Nueva Reserva</h2>
<form id="bookingForm">
<div class="form-group">
<label for="name">Nombre completo</label>
<input type="text" id="name" required placeholder="Ingresa tu nombre">
</div>
<div class="form-group">
<label for="date">Fecha</label>
<input type="date" id="date" required>
</div>
<div class="form-group">
<label>Selecciona horarios (puedes elegir varios)</label>
<div class="time-slots" id="timeSlots"></div>
</div>
<button type="submit" class="btn-submit">Confirmar Reserva</button>
</form>
</div>
</div>
</div>
<script>
const TIME_SLOTS = [
'07:40 - 08:20',
'08:20 - 09:50',
'09:50 - 10:30',
'10:40 - 11:20',
'11:20 - 12:00',
'12:10 - 12:50',
'12:50 - 13:30',
'13:30 - 14:10',
'14:10 - 14:50',
'14:50 - 15:30',
'15:30 - 16:10',
'16:10 - 16:50'
];
const WEEKDAYS = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes'];
let currentWeekOffset = 0;
let selectedTimes = [];
let reservations = JSON.parse(localStorage.getItem('reservations')) || [];
function init() {
renderTimeSlots();
updateCalendar();
updateCurrentWeek();
setMinDate();
}
function renderTimeSlots() {
const container = document.getElementById('timeSlots');
container.innerHTML = TIME_SLOTS.map(slot => `
<div class="time-slot" onclick="selectTime('${slot}')">
${slot}
</div>
`).join('');
}
function selectTime(slot) {
const index = selectedTimes.indexOf(slot);
if (index > -1) {
selectedTimes.splice(index, 1);
} else {
selectedTimes.push(slot);
}
document.querySelectorAll('.time-slot').forEach(el => {
const slotText = el.textContent.trim();
if (selectedTimes.includes(slotText)) {
el.classList.add('selected');
} else {
el.classList.remove('selected');
}
});
}
function getWeekDates(offset) {
const today = new Date();
const monday = new Date(today);
const dayOfWeek = today.getDay();
const diff = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
monday.setDate(today.getDate() + diff + (offset * 7));
const dates = [];
for (let i = 0; i < 5; i++) {
const date = new Date(monday);
date.setDate(monday.getDate() + i);
dates.push(date);
}
return dates;
}
function updateCalendar() {
const dates = getWeekDates(currentWeekOffset);
const calendar = document.getElementById('calendar');
let html = '<div class="calendar-header-cell">Horario</div>';
dates.forEach((date, i) => {
const day = date.getDate();
const month = date.getMonth() + 1;
html += `<div class="calendar-header-cell">${WEEKDAYS[i]}<br>${day}/${month}</div>`;
});
TIME_SLOTS.forEach(timeSlot => {
html += `<div class="time-cell">${timeSlot}</div>`;
dates.forEach(date => {
const dateStr = formatDate(date);
const reservation = reservations.find(r => r.date === dateStr && r.time === timeSlot);
if (reservation) {
html += `<div class="reservation-cell reserved" data-name="${reservation.name}"></div>`;
} else {
html += `<div class="reservation-cell available"></div>`;
}
});
});
calendar.innerHTML = html;
}
function updateCurrentWeek() {
const dates = getWeekDates(currentWeekOffset);
const firstDate = dates[0];
const lastDate = dates[4];
const start = firstDate.toLocaleDateString('es-ES', { day: 'numeric', month: 'short' });
const end = lastDate.toLocaleDateString('es-ES', { day: 'numeric', month: 'long', year: 'numeric' });
document.getElementById('currentWeek').textContent = `${start} - ${end}`;
}
function changeWeek(direction) {
currentWeekOffset += direction;
updateCalendar();
updateCurrentWeek();
}
function formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
function setMinDate() {
const today = new Date();
document.getElementById('date').min = formatDate(today);
}
document.getElementById('bookingForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
const date = document.getElementById('date').value;
if (selectedTimes.length === 0) {
alert('Por favor selecciona al menos un horario');
return;
}
const conflicts = selectedTimes.filter(time =>
reservations.some(r => r.date === date && r.time === time)
);
if (conflicts.length > 0) {
alert(`Los siguientes horarios ya están reservados:\n${conflicts.join('\n')}\n\nPor favor deselecciónalos e intenta nuevamente.`);
return;
}
selectedTimes.forEach(time => {
const reservation = { name, date, time };
reservations.push(reservation);
});
localStorage.setItem('reservations', JSON.stringify(reservations));
const successMsg = document.getElementById('successMessage');
successMsg.textContent = `✓ ¡${selectedTimes.length} reserva${selectedTimes.length > 1 ? 's' : ''} confirmada${selectedTimes.length > 1 ? 's' : ''} exitosamente!`;
successMsg.classList.add('show');
setTimeout(() => successMsg.classList.remove('show'), 3000);
this.reset();
selectedTimes = [];
document.querySelectorAll('.time-slot').forEach(el => el.classList.remove('selected'));
updateCalendar();
});
init();
</script>
</body>
</html>
Santa Rita
