1ra Versión
This commit is contained in:
MarcosFlorSalcedo
+2391
File diff suppressed because it is too large
Load Diff
+272
@@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="..\css\Login.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Iniciar Sesión</h1>
|
||||
<form id="loginForm">
|
||||
<div class="input-box">
|
||||
<input type="text" id="usuario" name="usuario" placeholder="Usuario" required>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input type="password" id="clave" name="clave" placeholder="Contraseña" required>
|
||||
</div>
|
||||
<div class="remember-password">
|
||||
<!--<label><input type="checkbox">Recordarme</label>-->
|
||||
<a href="#" id="btnOlvidoContrasena">¿Olvidaste tu contraseña?</a>
|
||||
</div>
|
||||
<button type="submit" class="btnI">Ingresar</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Modal de Recuperación de Contraseña -->
|
||||
<div id="modalRecuperacion" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<span class="close" id="cerrarModal">×</span>
|
||||
|
||||
<!-- Paso 1: Solicitar Correo -->
|
||||
<div id="paso1" class="paso-recuperacion">
|
||||
<h2>Recuperar Contraseña</h2>
|
||||
<p>Ingresa tu correo para recibir un código de verificación</p>
|
||||
<input type="email" id="correoRecuperacion" placeholder="Correo electrónico" required>
|
||||
<button id="btnEnviarCodigo" class="btnRecuperar">Enviar Código</button>
|
||||
<p id="msgPaso1" class="mensaje"></p>
|
||||
</div>
|
||||
|
||||
<!-- Paso 2: Verificar Código y Nueva Contraseña -->
|
||||
<div id="paso2" class="paso-recuperacion" style="display: none;">
|
||||
<h2>Verificar Código</h2>
|
||||
<p>Ingresa el código que recibiste en tu correo</p>
|
||||
<input type="text" id="codigoVerificacion" placeholder="Código de 6 dígitos" maxlength="6" required>
|
||||
<input type="password" id="nuevaContrasena" placeholder="Nueva contraseña" required>
|
||||
<input type="password" id="confirmarContrasena" placeholder="Confirmar contraseña" required>
|
||||
<div class="botones-grupo">
|
||||
<button id="btnCambiarContrasena" class="btnRecuperar">Cambiar Contraseña</button>
|
||||
<button id="btnVolver" class="btnVolver">Volver</button>
|
||||
</div>
|
||||
<p id="msgPaso2" class="mensaje"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Variables globales para el flujo de recuperación
|
||||
let correoRecuperacion = '';
|
||||
|
||||
// Elementos del modal
|
||||
const modalRecuperacion = document.getElementById('modalRecuperacion');
|
||||
const btnOlvidoContrasena = document.getElementById('btnOlvidoContrasena');
|
||||
const cerrarModal = document.getElementById('cerrarModal');
|
||||
const paso1 = document.getElementById('paso1');
|
||||
const paso2 = document.getElementById('paso2');
|
||||
|
||||
// Botones
|
||||
const btnEnviarCodigo = document.getElementById('btnEnviarCodigo');
|
||||
const btnCambiarContrasena = document.getElementById('btnCambiarContrasena');
|
||||
const btnVolver = document.getElementById('btnVolver');
|
||||
|
||||
// Inputs
|
||||
const correoInput = document.getElementById('correoRecuperacion');
|
||||
const codigoInput = document.getElementById('codigoVerificacion');
|
||||
const nuevaContrasenaInput = document.getElementById('nuevaContrasena');
|
||||
const confirmarContrasenaInput = document.getElementById('confirmarContrasena');
|
||||
|
||||
// Mensajes
|
||||
const msgPaso1 = document.getElementById('msgPaso1');
|
||||
const msgPaso2 = document.getElementById('msgPaso2');
|
||||
|
||||
// Abrir modal
|
||||
btnOlvidoContrasena.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
modalRecuperacion.style.display = 'block';
|
||||
correoInput.focus();
|
||||
});
|
||||
|
||||
// Cerrar modal
|
||||
cerrarModal.addEventListener('click', () => {
|
||||
modalRecuperacion.style.display = 'none';
|
||||
limpiarModal();
|
||||
});
|
||||
|
||||
window.addEventListener('click', (e) => {
|
||||
if (e.target === modalRecuperacion) {
|
||||
modalRecuperacion.style.display = 'none';
|
||||
limpiarModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Paso 1: Enviar Código
|
||||
btnEnviarCodigo.addEventListener('click', async () => {
|
||||
const correo = correoInput.value.trim();
|
||||
|
||||
if (!correo) {
|
||||
msgPaso1.textContent = 'Por favor ingresa un correo';
|
||||
msgPaso1.className = 'mensaje error';
|
||||
return;
|
||||
}
|
||||
|
||||
btnEnviarCodigo.disabled = true;
|
||||
btnEnviarCodigo.textContent = 'Enviando...';
|
||||
msgPaso1.textContent = '';
|
||||
|
||||
try {
|
||||
const response = await fetch('../php/Recuperar_Contrasena_Solicitar.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ correo })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
correoRecuperacion = correo;
|
||||
msgPaso1.textContent = data.message;
|
||||
msgPaso1.className = 'mensaje success';
|
||||
|
||||
// Cambiar al paso 2 después de 1.5 segundos
|
||||
setTimeout(() => {
|
||||
paso1.style.display = 'none';
|
||||
paso2.style.display = 'block';
|
||||
codigoInput.focus();
|
||||
}, 1500);
|
||||
} else {
|
||||
msgPaso1.textContent = data.message;
|
||||
msgPaso1.className = 'mensaje error';
|
||||
}
|
||||
} catch (error) {
|
||||
msgPaso1.textContent = 'Error al conectar con el servidor';
|
||||
msgPaso1.className = 'mensaje error';
|
||||
console.error('Error:', error);
|
||||
} finally {
|
||||
btnEnviarCodigo.disabled = false;
|
||||
btnEnviarCodigo.textContent = 'Enviar Código';
|
||||
}
|
||||
});
|
||||
|
||||
// Paso 2: Cambiar Contraseña
|
||||
btnCambiarContrasena.addEventListener('click', async () => {
|
||||
const codigo = codigoInput.value.trim();
|
||||
const nuevaContrasena = nuevaContrasenaInput.value;
|
||||
const confirmarContrasena = confirmarContrasenaInput.value;
|
||||
|
||||
if (!codigo || !nuevaContrasena || !confirmarContrasena) {
|
||||
msgPaso2.textContent = 'Por favor completa todos los campos';
|
||||
msgPaso2.className = 'mensaje error';
|
||||
return;
|
||||
}
|
||||
|
||||
if (codigo.length !== 6 || isNaN(codigo)) {
|
||||
msgPaso2.textContent = 'El código debe tener 6 dígitos';
|
||||
msgPaso2.className = 'mensaje error';
|
||||
return;
|
||||
}
|
||||
|
||||
if (nuevaContrasena.length < 6) {
|
||||
msgPaso2.textContent = 'La contraseña debe tener al menos 6 caracteres';
|
||||
msgPaso2.className = 'mensaje error';
|
||||
return;
|
||||
}
|
||||
|
||||
if (nuevaContrasena !== confirmarContrasena) {
|
||||
msgPaso2.textContent = 'Las contraseñas no coinciden';
|
||||
msgPaso2.className = 'mensaje error';
|
||||
return;
|
||||
}
|
||||
|
||||
btnCambiarContrasena.disabled = true;
|
||||
btnCambiarContrasena.textContent = 'Cambiando...';
|
||||
msgPaso2.textContent = '';
|
||||
|
||||
try {
|
||||
const response = await fetch('../php/Recuperar_Contrasena_Verificar.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
correo: correoRecuperacion,
|
||||
codigo,
|
||||
nueva_contrasena: nuevaContrasena
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
msgPaso2.textContent = data.message;
|
||||
msgPaso2.className = 'mensaje success';
|
||||
|
||||
// Cerrar modal después de 2 segundos
|
||||
setTimeout(() => {
|
||||
modalRecuperacion.style.display = 'none';
|
||||
limpiarModal();
|
||||
alert('Contraseña cambiada exitosamente. Ahora puedes iniciar sesión');
|
||||
}, 2000);
|
||||
} else {
|
||||
msgPaso2.textContent = data.message;
|
||||
msgPaso2.className = 'mensaje error';
|
||||
}
|
||||
} catch (error) {
|
||||
msgPaso2.textContent = 'Error al conectar con el servidor';
|
||||
msgPaso2.className = 'mensaje error';
|
||||
console.error('Error:', error);
|
||||
} finally {
|
||||
btnCambiarContrasena.disabled = false;
|
||||
btnCambiarContrasena.textContent = 'Cambiar Contraseña';
|
||||
}
|
||||
});
|
||||
|
||||
// Volver a paso 1
|
||||
btnVolver.addEventListener('click', () => {
|
||||
paso2.style.display = 'none';
|
||||
paso1.style.display = 'block';
|
||||
correoInput.focus();
|
||||
});
|
||||
|
||||
// Función para limpiar el modal
|
||||
function limpiarModal() {
|
||||
correoInput.value = '';
|
||||
codigoInput.value = '';
|
||||
nuevaContrasenaInput.value = '';
|
||||
confirmarContrasenaInput.value = '';
|
||||
msgPaso1.textContent = '';
|
||||
msgPaso2.textContent = '';
|
||||
paso1.style.display = 'block';
|
||||
paso2.style.display = 'none';
|
||||
correoRecuperacion = '';
|
||||
}
|
||||
|
||||
// Script original de login
|
||||
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(document.getElementById('loginForm'));
|
||||
|
||||
try {
|
||||
const response = await fetch('../php/Login.php', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
// Redirigir al panel
|
||||
window.location.href = '../php/Cantina.php';
|
||||
} else {
|
||||
// Mostrar error sin cambiar de página
|
||||
alert(data.message);
|
||||
// Limpiar campos de contraseña
|
||||
document.getElementById('clave').value = '';
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error al conectar con el servidor');
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,154 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user