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:21:42 +00:00
parent 6613252067
commit da701274e1
1 changed files with 53 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
cita.html
View File

@@ -10,8 +10,17 @@
body { background-color: #f8fafc; }
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.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); }
/* Estilos para los días del carrusel */
.day-chip { transition: all 0.2s; border: 2px solid transparent; }
.day-chip.active { background-color: #2563eb !important; color: white !important; border-color: #2563eb !important; transform: scale(1.05); box-shadow: 0 4px 10px rgba(37,99,235,0.2); }
.day-chip.inactive { background-color: white; color: #475569; border-color: #e2e8f0; }
</style>
</head>
<body class="text-slate-800 font-sans antialiased min-h-screen flex flex-col items-center">
@@ -48,10 +57,9 @@
<div id="step2" class="hidden space-y-6 fade-in">
<div>
<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>
</select>
<h3 class="font-black text-slate-800 uppercase tracking-widest text-xs mb-3">1. Elige un día disponible</h3>
<div id="dayCarousel" class="flex overflow-x-auto gap-3 pb-2 no-scrollbar">
</div>
</div>
<div id="hoursContainer" class="hidden space-y-4 fade-in">
@@ -90,6 +98,7 @@
let currentPreference = null;
let selectedDate = null;
let selectedTime = null;
let filteredDays = [];
document.addEventListener("DOMContentLoaded", async () => {
lucide.createIcons();
@@ -118,10 +127,11 @@
function selectPreference(pref) {
currentPreference = pref;
selectedDate = null;
selectedTime = null;
updateConfirmButton();
// UI feedback
// UI feedback botones principales
document.getElementById('btnMorning').classList.remove('border-blue-500', 'bg-blue-50');
document.getElementById('btnAfternoon').classList.remove('border-blue-500', 'bg-blue-50');
@@ -130,20 +140,49 @@
document.getElementById('step2').classList.remove('hidden');
// Llenar el selector de días solo con los días que tengan huecos en esa preferencia
const select = document.getElementById('daySelect');
select.innerHTML = '<option value="">Selecciona un día...</option>';
agendaData.forEach(day => {
const hasSlots = pref === 'morning' ? day.morning.length > 0 : day.afternoon.length > 0;
if (hasSlots) {
select.innerHTML += `<option value="${day.date}" class="uppercase">${day.displayDate}</option>`;
}
// Filtrar los días que sí tienen huecos para esta preferencia (mañana o tarde)
filteredDays = agendaData.filter(day => {
return pref === 'morning' ? day.morning.length > 0 : day.afternoon.length > 0;
});
renderDayCarousel();
document.getElementById('hoursContainer').classList.add('hidden');
}
// --- RENDERIZAR CARRUSEL DE DÍAS ---
function renderDayCarousel() {
const carousel = document.getElementById('dayCarousel');
carousel.innerHTML = "";
if (filteredDays.length === 0) {
carousel.innerHTML = '<p class="text-sm text-slate-500 italic p-2">No hay rutas disponibles en este turno para los próximos días.</p>';
return;
}
filteredDays.forEach(day => {
// Extraer un formato corto para el chip (ej: "Lun 15")
const dObj = new Date(day.date);
const dayNameShort = dObj.toLocaleDateString('es-ES', { weekday: 'short' }).replace('.', '');
const dayNum = dObj.getDate();
const isSelected = day.date === selectedDate;
carousel.innerHTML += `
<button onclick="selectDay('${day.date}')" class="day-chip flex flex-col items-center justify-center min-w-[4.5rem] p-3 rounded-2xl shrink-0 ${isSelected ? 'active' : 'inactive'}">
<span class="text-[10px] font-black uppercase opacity-80">${dayNameShort}</span>
<span class="text-xl font-black leading-none mt-1">${dayNum}</span>
</button>
`;
});
}
function selectDay(dateStr) {
selectedDate = dateStr;
selectedTime = null;
renderDayCarousel(); // Repintar para marcar como activo
renderSlots();
}
// --- FUNCIÓN HELPER PARA SUMAR 1 HORA ---
function addOneHour(timeStr) {
let [h, m] = timeStr.split(':').map(Number);
@@ -154,8 +193,6 @@
}
function renderSlots() {
selectedDate = document.getElementById('daySelect').value;
selectedTime = null;
updateConfirmButton();
if (!selectedDate) {