MarcosFlorSalcedo
154 lines
7.1 KiB
HTML
154 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Reservar Turno - Complejo de Canchas</title>
|
|
<link rel="stylesheet" href="../css/Reserva_Clientes.css" />
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<h1 class="header-title">Complejo Deportivo Cap1tan</h1>
|
|
<p class="header-subtitle">Reserva tu turno ahora</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="contenedor-principal">
|
|
<!-- cancha -->
|
|
<section class="seccion selector-cancha">
|
|
<h2>Selecciona el tipo de cancha</h2>
|
|
<div class="botones-cancha">
|
|
<button type="button" class="btn-cancha-tipo" data-tipo="futbol">
|
|
<img src="../css/img/futbol.svg" alt="Fútbol" class="icono">
|
|
<span class="nombre">Fútbol</span>
|
|
</button>
|
|
<button type="button" class="btn-cancha-tipo" data-tipo="padel">
|
|
<img src="../css/img/padel.svg" alt="Pádel" class="icono">
|
|
<span class="nombre">Pádel</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- fecha -->
|
|
<section class="seccion selector-fecha" style="display: none;">
|
|
<h2>Elige un día</h2>
|
|
<div class="calendario-mini">
|
|
<div class="dias-disponibles" id="dias-disponibles"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- horario -->
|
|
<section class="seccion selector-horario" style="display: none;">
|
|
<h2>Selecciona horario</h2>
|
|
<div class="grid-horarios" id="grid-horarios"></div>
|
|
</section>
|
|
|
|
<!-- número de cancha -->
|
|
<section class="seccion selector-numero-cancha" style="display: none;">
|
|
<h2>Selecciona tu cancha</h2>
|
|
<div class="botones-canchas-numeros" id="botones-canchas-numeros"></div>
|
|
</section>
|
|
|
|
<section class="seccion datos-cliente" style="display: none;">
|
|
<!-- Datos del cliente -->
|
|
<h2>Tus Datos</h2>
|
|
<div class="datos-cliente">
|
|
|
|
<form id="form-reserva" class="form-cliente">
|
|
<input type="text" id="cliente-nombre" placeholder="Nombre Completo" required />
|
|
<input type="tel" id="cliente-telefono" placeholder="Teléfono" required />
|
|
<input type="text" id="cliente-dni" placeholder="DNI" required />
|
|
</form>
|
|
</div>
|
|
<div class="botones-verificar">
|
|
<button type="button" class="btn-verificar">Verificar</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- reserva -->
|
|
<section class="seccion resumen-reserva" style="display: none;">
|
|
<h2>Resumen de Reserva</h2>
|
|
|
|
<div class="resumen-info">
|
|
<div class="info-item">
|
|
<span class="label">Cancha:</span>
|
|
<span class="valor" id="res-cancha">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">Fecha:</span>
|
|
<span class="valor" id="res-fecha">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">Horario:</span>
|
|
<span class="valor" id="res-horario">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">Duración:</span>
|
|
<span class="valor" id="res-duracion">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">Cupón:</span>
|
|
<span class="valor" id="res-cupon">-</span>
|
|
</div>
|
|
<div class="info-item" id="precio-original" style="display: none;">
|
|
<span class="label">Precio Original:</span>
|
|
<span class="valor" id="res-precio-original" style="text-decoration: line-through; color: #888;">$0.00</span>
|
|
</div>
|
|
<div class="info-item total">
|
|
<span class="label" id="label-precio">Precio:</span>
|
|
<span class="valor" id="res-precio">$0.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- quincho -->
|
|
<div class="opciones-adicionales">
|
|
<h3>Opciones Adicionales</h3>
|
|
<label class="checkbox-container">
|
|
<input type="checkbox" id="incluir-quincho" />
|
|
<span class="checkbox-text">Incluir Quincho</span>
|
|
<span class="precio-quincho" style="display: none;">
|
|
+ $<span id="precio-quincho-val">0</span>
|
|
</span>
|
|
</label>
|
|
<div id="quincho-reservas" style="display: none;" class="quincho-info">
|
|
<small>Reservas disponibles: <strong><span id="quincho-disp">-</span></strong></small>
|
|
</div>
|
|
<div id="quincho-no-disponible" style="display: none;" class="quincho-alerta">
|
|
<small>⚠️ No hay quinchos disponibles para esta fecha</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="seccion-verificacion" class="datos-cliente" style="display: none; border: 2px solid #4CAF50; padding: 15px; border-radius: 8px; margin-top: 15px;">
|
|
<h3>Verificación por WhatsApp</h3>
|
|
<p>Enviamos un código de 4 dígitos al <strong id="lbl-telefono"></strong>.</p>
|
|
<input type="text" id="codigo-verificacion" placeholder="Ingrese el código" maxlength="4" style="text-align: center; font-size: 20px; letter-spacing: 5px; margin-bottom: 10px; width: 100%;" />
|
|
<button type="button" class="btn-confirmar" id="btn-verificar-codigo" style="width: 100%;">Validar y Reservar</button>
|
|
</div>
|
|
|
|
<div class="botones-reserva">
|
|
<button type="button" class="btn-volver">← Volver</button>
|
|
<button type="button" class="btn-confirmar" id="btn-solicitar-reserva">Confirmar Reserva</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="seccion-comprobante" class="seccion" style="display: none; text-align: center;">
|
|
<h2>¡Reserva Confirmada!</h2>
|
|
<p>Para abonar tu turno, podes pagar en efectivo o realizar una transferencia a este alias: <strong>ejemplo.mp</strong> y adjuntar la foto o captura de tu comprobante.</p>
|
|
|
|
<div class="datos-cliente" style="margin-top: 20px;">
|
|
<form id="form-comprobante" enctype="multipart/form-data">
|
|
<input type="hidden" id="comprobante-id-reserva" value="" />
|
|
|
|
<input type="file" id="input-file-comprobante" accept="image/*" required style="margin-bottom: 15px; width: 100%; padding: 10px;" />
|
|
|
|
<button type="submit" class="btn-confirmar" style="width: 100%;">Enviar Comprobante</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script src="../js/Reservar_Turno.js"></script>
|
|
</body>
|
|
</html> |