/home/simp499cl/public_html/washbe_v2

Name	Size	Mode	Actions
agendar_paso1.html	10241	0644	edit dl rm
avatar-1.svg	3557	0644	edit dl rm
avatar-2.svg	7061	0644	edit dl rm
avatar.svg	8035	0644	edit dl rm
css2-1.css	15925	0644	edit dl rm
css2.css	2339	0644	edit dl rm
favicon.ico.html	10005	0644	edit dl rm
index.html	123970	0644	edit dl rm
index_fixed(3).html	123933	0644	edit dl rm
main.css	90186	0644	edit dl rm
p1xy54fw_Logo-Washbe-2025-New.png	74494	0644	edit dl rm
pexels-photo-210627.jpeg	548804	0644	edit dl rm
pexels-photo-372810.jpeg	2073642	0644	edit dl rm
photo-1520340356584-f9917d1eea6f.jpg	4560790	0644	edit dl rm
photo-1607860108855-64acf2078ed9.jpg	3835699	0644	edit dl rm
photo-1633014041037-f5446fb4ce99.jpg	3392170	0644	edit dl rm
photo-1761934657948-708146148588.jpg	4314676	0644	edit dl rm
photo-1761934658038-d0e6792378b1.jpg	4176896	0644	edit dl rm
photo-1761934658331-2e00b20dc6c6.jpg	5005398	0644	edit dl rm
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0I5nvwUgHU.woff2	18720	0644	edit dl rm
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0I5nvwUgHU.woff2	18940	0644	edit dl rm
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0I5nvwU.woff2	48532	0644	edit dl rm
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0I5nvwUgHU.woff2	25812	0644	edit dl rm
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0I5nvwUgHU.woff2	10212	0644	edit dl rm
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0I5nvwUgHU.woff2	11176	0644	edit dl rm
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0I5nvwUgHU.woff2	84924	0644	edit dl rm
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZ9hiA.woff2	24452	0644	edit dl rm
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZBhiI2B.woff2	5100	0644	edit dl rm
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZFhiI2B.woff2	36260	0644	edit dl rm
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZJhiI2B.woff2	10484	0644	edit dl rm
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZNhiI2B.woff2	5432	0644	edit dl rm
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZthiI2B.woff2	7972	0644	edit dl rm
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZxhiI2B.woff2	7944	0644	edit dl rm

Edit: /home/simp499cl/public_html/washbe_v2/agendar_paso1.html (10241B)

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Washbe Agendar | Paso 1</title>

<a href="index.html#contacto"
         class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring border border-input shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4">
        Contacto
      </a>
    </div>
  </header>

<main class="booking-page">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        
        <div class="mb-6">
          <h1 class="text-2xl sm:text-3xl font-bold tracking-tight">Agendar Lavado Full M</h1>
          <p class="text-slate-600 mt-1">Paso 1 de 3 · Selecciona fecha y hora</p>
        </div>

<div class="flex items-center justify-between mb-8 px-2">
          <div class="flex flex-col items-center">
            <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold transition-all duration-300 bg-slate-900 text-white scale-110">1</div>
            <span class="text-xs mt-2 font-medium text-slate-900">Fecha y Hora</span>
          </div>
          <div class="flex-1 h-1 mx-2 rounded bg-slate-200"></div>
          <div class="flex flex-col items-center">
            <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold bg-slate-200 text-slate-400">2</div>
            <span class="text-xs mt-2 font-medium text-slate-400">Dirección</span>
          </div>
          <div class="flex-1 h-1 mx-2 rounded bg-slate-200"></div>
          <div class="flex flex-col items-center">
            <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold bg-slate-200 text-slate-400">3</div>
            <span class="text-xs mt-2 font-medium text-slate-400">Datos</span>
          </div>
        </div>

<section class="border rounded-xl shadow-sm p-6 sm:p-8">
          <div class="flex items-center gap-2 text-slate-600 mb-6">
            
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>
            </svg>
            <h2 class="font-semibold text-lg">Selecciona fecha y hora</h2>
          </div>

<div class="flex flex-col lg:flex-row gap-6">
            
            <div class="flex-1">
              <label for="bookingDate" class="font-medium text-base mb-3 block">Fecha</label>
              <div class="rounded-md border shadow-sm p-4">
                <input id="bookingDate" type="date"
                       class="w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       />
                <p class="text-xs text-slate-500 mt-2">Elige una fecha disponible para tu servicio.</p>
              </div>
            </div>

<div class="flex-1">
              <label class="font-medium text-base mb-3 block">Hora disponible</label>

<p id="bookingHint" class="text-sm text-slate-500 mt-3">Selecciona un horario para continuar.</p>
            </div>
          </div>

<div class="flex justify-end items-center pt-6 mt-6 border-t">
            <button id="btnNext" type="button"
              class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary-foreground shadow h-9 px-4 py-2 bg-slate-900 hover:bg-slate-800">
              Siguiente
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="m9 18 6-6-6-6"></path>
              </svg>
            </button>
          </div>

let selectedTime = null;

function clearError() {
        errorMsg.classList.add('hidden');
        errorMsg.textContent = '';
      }

function showError(msg) {
        errorMsg.textContent = msg;
        errorMsg.classList.remove('hidden');
      }

timeGrid.addEventListener('click', (e) => {
        const btn = e.target.closest('button[data-time]');
        if (!btn) return;

clearError();

// remove active from others
        timeGrid.querySelectorAll('.time-slot').forEach(b => b.classList.remove('is-active'));
        btn.classList.add('is-active');

selectedTime = btn.getAttribute('data-time');
        hint.textContent = 'Horario seleccionado: ' + selectedTime;
      });

btnNext.addEventListener('click', () => {
        clearError();
        const dateVal = dateInput.value;

if (!dateVal) return showError('Selecciona una fecha para continuar.');
        if (!selectedTime) return showError('Selecciona una hora disponible para continuar.');

// simple navigation to paso 2 (si lo creas después)
        const qs = new URLSearchParams({ date: dateVal, time: selectedTime }).toString();
        window.location.href = 'agendar_paso1.html?' + qs;
      });
    })();
  </script>
</body>
</html>

Washbe Agendar | Paso 1

Contacto

Agendar Lavado Full M

Paso 1 de 3 · Selecciona fecha y hora

Fecha y Hora

Dirección

Datos

Selecciona fecha y hora

Fecha

Elige una fecha disponible para tu servicio.

Hora disponible

Selecciona un horario para continuar.