marsalva/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar cita.html

Browse Source
This commit is contained in:
marsalva
2026-02-24 08:14:58 +00:00
parent 87972f4be1
commit 6613252067
1 changed files with 59 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
cita.html
View File

@@ -10,7 +10,8 @@
body { background-color: #f8fafc; } body { background-color: #f8fafc; }
.fade-in { animation: fadeIn 0.4s ease-out forwards; } .fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.slot-btn.selected { background-color: #2563eb; color: white; border-color: #2563eb; } .slot-btn { transition: all 0.2s; }
.slot-btn.selected { background-color: #2563eb; color: white; border-color: #2563eb; transform: scale(1.02); box-shadow: 0 4px 12px rgba(37,99,235,0.2); }
</style> </style>
</head> </head>
<body class="text-slate-800 font-sans antialiased min-h-screen flex flex-col items-center"> <body class="text-slate-800 font-sans antialiased min-h-screen flex flex-col items-center">
@@ -22,12 +23,12 @@
<main id="mainContent" class="hidden w-full max-w-md mx-auto min-h-screen flex flex-col relative pb-10"> <main id="mainContent" class="hidden w-full max-w-md mx-auto min-h-screen flex flex-col relative pb-10">
<header class="bg-white p-6 pt-10 border-b border-slate-200 sticky top-0 z-10 shrink-0"> <header class="bg-white p-6 pt-10 border-b border-slate-200 sticky top-0 z-10 shrink-0 shadow-sm">
<button onclick="window.history.back()" class="text-slate-400 hover:text-slate-800 mb-4 transition-colors"> <button onclick="window.history.back()" class="w-10 h-10 bg-slate-50 rounded-full flex items-center justify-center text-slate-500 hover:text-slate-800 mb-4 transition-colors">
<i data-lucide="arrow-left" class="w-6 h-6"></i> <i data-lucide="arrow-left" class="w-5 h-5"></i>
</button> </button>
<h1 class="text-2xl font-black tracking-tight leading-none text-slate-800">¿Cuándo te viene mejor?</h1> <h1 class="text-2xl font-black tracking-tight leading-none text-slate-800">¿Cuándo te viene mejor?</h1>
<p class="text-sm text-slate-500 font-medium mt-2">Selecciona tu preferencia y te mostraremos los horarios en los que el técnico estará por tu zona.</p> <p class="text-sm text-slate-500 font-medium mt-2">Te mostraremos franjas de <strong class="text-slate-700">1 hora de margen de llegada</strong> en las que el técnico estará por tu zona.</p>
</header> </header>
<div class="p-6 flex-1 flex flex-col gap-6 fade-in"> <div class="p-6 flex-1 flex flex-col gap-6 fade-in">
@@ -36,45 +37,48 @@
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<button onclick="selectPreference('morning')" id="btnMorning" class="bg-white border-2 border-slate-200 p-6 rounded-3xl flex flex-col items-center gap-3 hover:border-blue-400 hover:bg-blue-50 transition-all text-slate-600"> <button onclick="selectPreference('morning')" id="btnMorning" class="bg-white border-2 border-slate-200 p-6 rounded-3xl flex flex-col items-center gap-3 hover:border-blue-400 hover:bg-blue-50 transition-all text-slate-600">
<i data-lucide="sun" class="w-10 h-10 text-amber-500"></i> <i data-lucide="sun" class="w-10 h-10 text-amber-500"></i>
<span class="font-black uppercase text-sm">Mañanas</span> <span class="font-black uppercase text-sm tracking-widest">Mañanas</span>
</button> </button>
<button onclick="selectPreference('afternoon')" id="btnAfternoon" class="bg-white border-2 border-slate-200 p-6 rounded-3xl flex flex-col items-center gap-3 hover:border-blue-400 hover:bg-blue-50 transition-all text-slate-600"> <button onclick="selectPreference('afternoon')" id="btnAfternoon" class="bg-white border-2 border-slate-200 p-6 rounded-3xl flex flex-col items-center gap-3 hover:border-blue-400 hover:bg-blue-50 transition-all text-slate-600">
<i data-lucide="sunset" class="w-10 h-10 text-orange-500"></i> <i data-lucide="sunset" class="w-10 h-10 text-orange-500"></i>
<span class="font-black uppercase text-sm">Tardes</span> <span class="font-black uppercase text-sm tracking-widest">Tardes</span>
</button> </button>
</div> </div>
</div> </div>
<div id="step2" class="hidden space-y-6 fade-in"> <div id="step2" class="hidden space-y-6 fade-in">
<h3 class="font-black text-slate-800 uppercase tracking-widest text-xs">1. Elige un día disponible</h3> <div>
<select id="daySelect" onchange="renderSlots()" class="w-full bg-white border-2 border-slate-200 p-4 rounded-2xl font-bold text-slate-700 outline-none focus:border-blue-500"> <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs mb-2">1. Elige un día disponible</h3>
<select id="daySelect" onchange="renderSlots()" class="w-full bg-white border-2 border-slate-200 p-4 rounded-2xl font-bold text-slate-700 outline-none focus:border-blue-500 shadow-sm cursor-pointer">
<option value="">Selecciona un día...</option> <option value="">Selecciona un día...</option>
</select> </select>
</div>
<div id="hoursContainer" class="hidden space-y-4 fade-in"> <div id="hoursContainer" class="hidden space-y-4 fade-in">
<h3 class="font-black text-slate-800 uppercase tracking-widest text-xs">2. Elige la hora aproximada</h3> <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs mb-1">2. Ventana de llegada aproximada</h3>
<div id="slotsGrid" class="grid grid-cols-3 gap-3"> <div id="slotsGrid" class="grid grid-cols-2 gap-3">
</div> </div>
</div> </div>
</div> </div>
<div class="mt-auto pt-6"> <div class="mt-auto pt-6">
<button id="btnConfirm" onclick="confirmBooking()" class="w-full bg-blue-600 text-white font-black py-4 rounded-2xl shadow-lg opacity-50 pointer-events-none transition-all flex justify-center items-center gap-2 uppercase tracking-widest text-xs"> <button id="btnConfirm" onclick="confirmBooking()" class="w-full bg-blue-600 text-white font-black py-4 rounded-2xl shadow-lg shadow-blue-500/30 opacity-50 pointer-events-none transition-all flex justify-center items-center gap-2 uppercase tracking-widest text-xs">
Confirmar Cita <i data-lucide="check-circle" class="w-4 h-4"></i> Confirmar Cita <i data-lucide="check-circle" class="w-5 h-5"></i>
</button> </button>
</div> </div>
</div> </div>
</main> </main>
<div id="successScreen" class="hidden w-full max-w-md mx-auto p-6 flex flex-col items-center justify-center min-h-screen text-center fade-in bg-blue-600 text-white"> <div id="successScreen" class="hidden w-full max-w-md mx-auto p-6 flex flex-col items-center justify-center min-h-screen text-center fade-in bg-blue-600 text-white relative overflow-hidden">
<div class="w-24 h-24 bg-white text-blue-600 rounded-full flex items-center justify-center mb-6 shadow-2xl"> <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPjwvc3ZnPg==')] opacity-50"></div>
<i data-lucide="clock" class="w-12 h-12"></i> <div class="w-24 h-24 bg-white text-blue-600 rounded-full flex items-center justify-center mb-6 shadow-2xl relative z-10">
<i data-lucide="calendar-check" class="w-12 h-12"></i>
</div> </div>
<h2 class="text-3xl font-black mb-2">Solicitud Enviada</h2> <h2 class="text-3xl font-black mb-2 relative z-10">Solicitud Enviada</h2>
<p class="font-medium opacity-90 mb-8">Estamos revisando la ruta de tu técnico. Recibirás un mensaje en breve confirmando tu cita.</p> <p class="font-medium opacity-90 mb-8 relative z-10">El técnico ha sido avisado de tu preferencia. Recibirás un WhatsApp de confirmación en breve.</p>
<button onclick="window.location.href = window.location.href.replace('cita.html', 'portal.html')" class="bg-slate-900 text-white font-black py-3 px-8 rounded-xl shadow-lg uppercase text-xs tracking-widest"> <button onclick="window.location.href = window.location.href.replace('cita.html', 'portal.html')" class="bg-slate-900 text-white font-black py-4 px-8 rounded-2xl shadow-lg uppercase text-xs tracking-widest relative z-10 active:scale-95 transition-transform">
Volver al Resumen Volver a mi Ficha
</button> </button>
</div> </div>
@@ -140,6 +144,15 @@
document.getElementById('hoursContainer').classList.add('hidden'); document.getElementById('hoursContainer').classList.add('hidden');
} }
// --- FUNCIÓN HELPER PARA SUMAR 1 HORA ---
function addOneHour(timeStr) {
let [h, m] = timeStr.split(':').map(Number);
let totalMins = h * 60 + m + 60; // Sumamos 60 mins
let newH = Math.floor(totalMins / 60);
let newM = totalMins % 60;
return `${String(newH).padStart(2,'0')}:${String(newM).padStart(2,'0')}`;
}
function renderSlots() { function renderSlots() {
selectedDate = document.getElementById('daySelect').value; selectedDate = document.getElementById('daySelect').value;
selectedTime = null; selectedTime = null;
@@ -154,19 +167,31 @@
const slots = currentPreference === 'morning' ? dayObj.morning : dayObj.afternoon; const slots = currentPreference === 'morning' ? dayObj.morning : dayObj.afternoon;
const grid = document.getElementById('slotsGrid'); const grid = document.getElementById('slotsGrid');
grid.innerHTML = slots.map(time => `
<button onclick="selectTime('${time}', this)" class="slot-btn bg-white border border-slate-200 py-3 rounded-xl font-black text-slate-600 shadow-sm transition-all hover:bg-slate-50"> // Aquí calculamos el tramo y lo pintamos
${time} grid.innerHTML = slots.map(time => {
const endTime = addOneHour(time);
return `
<button onclick="selectTime('${time}', this)" class="slot-btn bg-white border-2 border-slate-200 py-4 px-2 rounded-2xl font-black text-slate-600 shadow-sm hover:border-blue-300 hover:bg-blue-50 flex flex-col items-center justify-center gap-1">
<span class="text-[10px] uppercase tracking-widest opacity-60 font-bold leading-none">Llegada entre</span>
<span class="text-sm">${time} - ${endTime}</span>
</button> </button>
`).join(''); `;
}).join('');
document.getElementById('hoursContainer').classList.remove('hidden'); document.getElementById('hoursContainer').classList.remove('hidden');
} }
function selectTime(time, btnEl) { function selectTime(time, btnEl) {
selectedTime = time; selectedTime = time;
document.querySelectorAll('.slot-btn').forEach(b => b.classList.remove('selected')); document.querySelectorAll('.slot-btn').forEach(b => {
btnEl.classList.add('selected'); b.classList.remove('selected', 'border-blue-500');
b.classList.add('border-slate-200', 'text-slate-600');
});
btnEl.classList.remove('border-slate-200', 'text-slate-600', 'hover:border-blue-300', 'hover:bg-blue-50');
btnEl.classList.add('selected', 'border-blue-500');
updateConfirmButton(); updateConfirmButton();
} }
@@ -174,8 +199,10 @@
const btn = document.getElementById('btnConfirm'); const btn = document.getElementById('btnConfirm');
if (selectedDate && selectedTime) { if (selectedDate && selectedTime) {
btn.classList.remove('opacity-50', 'pointer-events-none'); btn.classList.remove('opacity-50', 'pointer-events-none');
btn.classList.add('active:scale-95');
} else { } else {
btn.classList.add('opacity-50', 'pointer-events-none'); btn.classList.add('opacity-50', 'pointer-events-none');
btn.classList.remove('active:scale-95');
} }
} }
@@ -185,7 +212,8 @@
const serviceId = urlParams.get('service'); const serviceId = urlParams.get('service');
const btn = document.getElementById('btnConfirm'); const btn = document.getElementById('btnConfirm');
btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...'; const originalHtml = btn.innerHTML;
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Solicitando...';
lucide.createIcons(); lucide.createIcons();
try { try {
@@ -202,12 +230,12 @@
document.getElementById('successScreen').classList.add('flex'); document.getElementById('successScreen').classList.add('flex');
} else { } else {
alert("Error al confirmar la cita. Es posible que el hueco ya se haya ocupado."); alert("Error al confirmar la cita. Es posible que el hueco ya se haya ocupado.");
btn.innerHTML = 'Confirmar Cita <i data-lucide="check-circle" class="w-4 h-4"></i>'; btn.innerHTML = originalHtml;
lucide.createIcons(); lucide.createIcons();
} }
} catch(e) { } catch(e) {
alert("Error de conexión"); alert("Error de conexión");
btn.innerHTML = 'Confirmar Cita <i data-lucide="check-circle" class="w-4 h-4"></i>'; btn.innerHTML = originalHtml;
lucide.createIcons(); lucide.createIcons();
} }
} }