granja-infraandClaude Sonnet 5
04f2f9ec20
Rebuilt from the unused bauxa-wordpress-theme (archived) as plain HTML/CSS/JS, matching the fleet's other marketing-site repos (urgencias-info-landing, bauxa-website). La carta stays live -- fetched client-side from api.bauxa.app/api/public/cala-verd/carta -- rather than hardcoded, so it demonstrates Bauxa's real "edit the menu from the app" feature instead of faking it. Real photos ported from the old WP media library where they existed; two slots (kitchen team, owner portrait) stay as placeholders since those were never actually uploaded, not because anything's broken. Booking form posts to Bauxa's real reservations API with SMS-verification support. Deployed at web.bauxa.app (gringo bauxa-app jail, port 8099). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
351 lines
14 KiB
HTML
351 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Cala Verd — Cocina mediterránea en Palma de Mallorca</title>
|
||
<meta name="description" content="Cocina mediterránea sin artificio en el casco antiguo de Palma. Pescado de lonja, verdura de temporada, carta corta que cambia cada semana. Reserva en 30 segundos.">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap">
|
||
<link rel="stylesheet" href="/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="bauxa-wrapper">
|
||
|
||
<!-- 0 · Top bar -->
|
||
<div class="top-bar">
|
||
<span>Carrer de Sant Feliu 12 · 07012 Palma de Mallorca</span>
|
||
<div class="lang-switcher">
|
||
<span class="is-active">ES</span>
|
||
<a href="#">CA</a>
|
||
<a href="#">EN</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 1 · Header -->
|
||
<header class="site-header">
|
||
<div class="brand">
|
||
<span class="brand-name">Cala Verd</span>
|
||
<span class="brand-tagline">Cocina mediterránea</span>
|
||
</div>
|
||
<button class="mobile-menu-toggle" aria-label="Abrir menú" aria-expanded="false" aria-controls="main-nav">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||
</button>
|
||
<nav class="main-nav" id="main-nav" aria-label="Navegación principal">
|
||
<a href="#carta">Carta</a>
|
||
<a href="#galeria">Galería</a>
|
||
<a href="#nosotros">Nosotros</a>
|
||
<a href="#grupos">Grupos</a>
|
||
<a href="#contacto">Contacto</a>
|
||
<a href="#reserva" class="btn btn-primary">Reservar mesa</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main id="main-content">
|
||
|
||
<!-- 2 · Hero -->
|
||
<section class="hero" aria-labelledby="hero-title">
|
||
<div class="hero-content">
|
||
<span class="kicker">Palma de Mallorca · Desde 1998</span>
|
||
<h1 class="hero-title" id="hero-title">Producto de<br>la isla, mesa<br>de barrio.</h1>
|
||
<p class="hero-lede">Cocina mediterránea sin artificio: pescado de la lonja de Palma, verdura de Sa Pobla y una carta corta que cambia cada semana. Comedor de 46 plazas y terraza en el patio.</p>
|
||
<div class="hero-actions">
|
||
<a href="#reserva" class="btn btn-primary">Reservar mesa</a>
|
||
<a href="#carta" class="btn btn-secondary">Ver la carta</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-media">
|
||
<img src="/assets/photos/comedor.jpg" alt="Comedor de Cala Verd" loading="eager">
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3 · Booking bar -->
|
||
<section id="reserva" class="booking-bar" aria-label="Reservar mesa">
|
||
<form id="booking-form" novalidate>
|
||
<div class="booking-bar-inner">
|
||
<div class="booking-label">Reserva<br>en 30 s</div>
|
||
|
||
<div class="booking-field">
|
||
<label for="booking-date">Fecha</label>
|
||
<input type="date" id="booking-date" name="date" required>
|
||
</div>
|
||
|
||
<div class="booking-field">
|
||
<span class="field-label">Personas</span>
|
||
<div class="covers-control">
|
||
<button type="button" id="covers-decrease" aria-label="Reducir comensales">−</button>
|
||
<span class="covers-count" id="covers-display">2 comensales</span>
|
||
<button type="button" id="covers-increase" aria-label="Aumentar comensales">+</button>
|
||
</div>
|
||
<input type="hidden" id="booking-covers" name="covers" value="2">
|
||
</div>
|
||
|
||
<div class="booking-field">
|
||
<span class="field-label">Turno</span>
|
||
<div class="time-segments" role="group" aria-label="Hora de la reserva">
|
||
<button type="button" class="time-segment" data-time="20:00" aria-pressed="false">20:00</button>
|
||
<button type="button" class="time-segment is-selected" data-time="21:00" aria-pressed="true">21:00</button>
|
||
<button type="button" class="time-segment" data-time="22:00" aria-pressed="false">22:00</button>
|
||
</div>
|
||
<input type="hidden" id="booking-time" name="time" value="21:00">
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-ink booking-submit" id="booking-submit">Confirmar</button>
|
||
</div>
|
||
|
||
<div class="booking-bar-inner booking-details-row">
|
||
<div class="booking-field">
|
||
<label for="guest-name">Nombre</label>
|
||
<input type="text" id="guest-name" name="guestName" autocomplete="name" required minlength="2" placeholder="Tu nombre">
|
||
</div>
|
||
|
||
<div class="booking-field">
|
||
<label for="guest-phone">Teléfono</label>
|
||
<input type="tel" id="guest-phone" name="guestPhone" autocomplete="tel" required minlength="6" placeholder="Tu teléfono">
|
||
</div>
|
||
|
||
<div class="booking-field" style="grid-column: span 2;">
|
||
<label for="guest-notes">Notas (opcional)</label>
|
||
<input type="text" id="guest-notes" name="notes" autocomplete="off" placeholder="Alergias, ocasión especial…">
|
||
</div>
|
||
|
||
<div class="honeypot" aria-hidden="true">
|
||
<label for="website">No rellenar este campo</label>
|
||
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
|
||
</div>
|
||
|
||
<div class="booking-message" id="booking-message" aria-live="polite"></div>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="verification-panel" id="verification-panel" hidden>
|
||
<span class="kicker">Verifica tu teléfono</span>
|
||
<p id="verification-intro">Te hemos enviado un código de 6 dígitos por SMS.</p>
|
||
<div class="verification-row">
|
||
<label for="verification-code" class="screen-reader-text">Código de verificación</label>
|
||
<input type="text" id="verification-code" inputmode="numeric" pattern="[0-9]*" maxlength="6" placeholder="000000" autocomplete="one-time-code">
|
||
<button type="button" class="btn btn-ink" id="verify-code-btn">Verificar</button>
|
||
</div>
|
||
<div class="verification-actions">
|
||
<button type="button" class="link-btn" id="resend-code-btn">¿No te ha llegado? Reenviar código</button>
|
||
<button type="button" class="link-btn" id="skip-verification-btn">Ahora no</button>
|
||
</div>
|
||
<p class="verification-message" id="verification-message" aria-live="polite"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4 · Carta (live from the Bauxa API -- see js/carta.js) -->
|
||
<section id="carta" class="carta" aria-labelledby="carta-title">
|
||
<div class="carta-header">
|
||
<div>
|
||
<span class="kicker">01 — La carta</span>
|
||
<h2 class="section-title" id="carta-title">La carta</h2>
|
||
</div>
|
||
</div>
|
||
<div id="carta-content" class="carta-grid">
|
||
<p class="menu-del-dia-status">Cargando…</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4b · Menú del día -->
|
||
<section id="menu-del-dia" class="carta menu-del-dia" aria-labelledby="menu-del-dia-title">
|
||
<div class="carta-header">
|
||
<div>
|
||
<span class="kicker">Cada día</span>
|
||
<h2 class="section-title" id="menu-del-dia-title">Menú del día</h2>
|
||
</div>
|
||
</div>
|
||
<div id="menu-del-dia-content" class="menu-del-dia-content">
|
||
<p class="menu-del-dia-status">Cargando…</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5 · Galería -->
|
||
<section id="galeria" class="galeria" aria-labelledby="galeria-title">
|
||
<div class="galeria-header">
|
||
<span class="kicker">02 — Galería</span>
|
||
<h2 class="section-title" id="galeria-title">El sitio</h2>
|
||
</div>
|
||
<div class="galeria-grid">
|
||
<div class="galeria-cell"><img src="/assets/photos/terraza.jpg" alt="Terraza de Cala Verd" loading="lazy"></div>
|
||
<div class="galeria-cell"><img src="/assets/photos/plato-raor.jpg" alt="Raor a la plancha" loading="lazy"></div>
|
||
<div class="galeria-cell"><img src="/assets/photos/verdura.jpg" alt="Verdura de temporada" loading="lazy"></div>
|
||
<div class="galeria-cell is-placeholder"><span class="placeholder-label placeholder-label-sm">equipo_cocina.jpg</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6 · Nosotros -->
|
||
<section id="nosotros" class="nosotros" aria-labelledby="nosotros-title">
|
||
<div class="nosotros-media placeholder" role="img" aria-label="Retrato de Marga Bonet">
|
||
<span class="placeholder-label">retrato_marga_vertical.jpg</span>
|
||
</div>
|
||
<div class="nosotros-content">
|
||
<span class="kicker">03 — Nosotros</span>
|
||
<h2 class="section-title" id="nosotros-title">Tres generaciones<br>en la misma esquina</h2>
|
||
<p>Marga Bonet abrió Cala Verd en 1998 con seis mesas y la carta escrita a mano cada mañana. Hoy la cocina la lleva su hija Aina, con el mismo criterio: pocos platos, temporada corta y proveedores a menos de cuarenta kilómetros.</p>
|
||
<p>Compramos el pescado en subasta cuatro días por semana. Lo que no hay, no está en la carta.</p>
|
||
<div class="nosotros-stats">
|
||
<div>
|
||
<div class="stat-value">27</div>
|
||
<div class="stat-label">años en la misma calle</div>
|
||
</div>
|
||
<div>
|
||
<div class="stat-value">46</div>
|
||
<div class="stat-label">plazas en sala y terraza</div>
|
||
</div>
|
||
<div>
|
||
<div class="stat-value">4</div>
|
||
<div class="stat-label">proveedores locales fijos</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7 · Eventos y grupos -->
|
||
<section id="grupos" class="eventos" aria-labelledby="eventos-title">
|
||
<span class="kicker">04 — Eventos y grupos</span>
|
||
<h2 class="section-title" id="eventos-title">Comidas de empresa, celebraciones y privatizaciones</h2>
|
||
<div class="eventos-grid">
|
||
<div class="evento-card">
|
||
<div class="evento-kicker">Grupos</div>
|
||
<h4>Menús cerrados desde 8 comensales</h4>
|
||
<p>Tres opciones de menú de grupo, con o sin maridaje. Confirmamos alérgenos con 48 horas de antelación.</p>
|
||
<div class="evento-price">32 € <span>por persona</span></div>
|
||
</div>
|
||
<div class="evento-card is-inverted">
|
||
<div>
|
||
<div class="evento-kicker">Privatización</div>
|
||
<h4>El comedor entero, solo para ti</h4>
|
||
<p>Hasta 46 personas, sala cerrada al público. Ideal para cenas de empresa y celebraciones familiares.</p>
|
||
</div>
|
||
<a href="#contacto" class="btn btn-primary">Pedir presupuesto</a>
|
||
</div>
|
||
<div class="evento-card">
|
||
<div class="evento-kicker">Terraza</div>
|
||
<h4>Aperitivos y cócteles en el patio</h4>
|
||
<p>El patio interior se reserva aparte de la sala, con carta propia de tapas y vino por copas.</p>
|
||
<a href="#contacto" class="btn btn-primary">Pedir presupuesto</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8 · Opiniones -->
|
||
<section class="opiniones" aria-labelledby="opiniones-title">
|
||
<span class="kicker">05 — Opiniones</span>
|
||
<h2 class="section-title" id="opiniones-title">Lo que dicen</h2>
|
||
<div class="opiniones-grid">
|
||
<div>
|
||
<p class="opinion-quote">La carta cambia de verdad cada semana — se nota que cocinan con lo que ha llegado esa mañana, no con lo que sobra.</p>
|
||
<div class="opinion-attribution">Neus Ferrer <span>· Google</span></div>
|
||
</div>
|
||
<div>
|
||
<p class="opinion-quote">Pedimos el arròs brut para dos y no sobró nada. Trato cercano, sin prisas, como un restaurante de barrio de verdad.</p>
|
||
<div class="opinion-attribution">Tomeu Riera <span>· TripAdvisor</span></div>
|
||
</div>
|
||
<div>
|
||
<p class="opinion-quote">Privatizamos la sala para una cena de empresa de 30 personas y fue perfecto — coordinaron todo por WhatsApp sin complicaciones.</p>
|
||
<div class="opinion-attribution">Laura Vidal <span>· Google</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 9 · Horarios y contacto -->
|
||
<section id="contacto" class="horarios" aria-labelledby="horarios-title">
|
||
<div class="horarios-info">
|
||
<span class="kicker">06 — Horarios y ubicación</span>
|
||
<h2 class="section-title" id="horarios-title">Dónde y cuándo</h2>
|
||
<div class="hours-table">
|
||
<div class="hours-row">
|
||
<span class="hours-label">Martes a viernes</span>
|
||
<span>13:00–16:00 · 20:00–23:00</span>
|
||
</div>
|
||
<div class="hours-row">
|
||
<span class="hours-label">Sábado</span>
|
||
<span>13:00–16:30 · 20:00–23:30</span>
|
||
</div>
|
||
<div class="hours-row">
|
||
<span class="hours-label">Domingo</span>
|
||
<span>13:00–16:30</span>
|
||
</div>
|
||
<div class="hours-row is-closed">
|
||
<span class="hours-label">Lunes</span>
|
||
<span>Cerrado</span>
|
||
</div>
|
||
</div>
|
||
<div class="horarios-contact">
|
||
<div class="contact-block">
|
||
<div class="contact-label">Dirección</div>
|
||
<div class="contact-value">
|
||
Carrer de Sant Feliu 12<br>
|
||
07012 Palma de Mallorca
|
||
</div>
|
||
</div>
|
||
<div class="contact-block">
|
||
<div class="contact-label">Contacto</div>
|
||
<div class="contact-value">
|
||
+34 971 00 00 00<br>
|
||
hola@calaverd.es
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="horarios-map placeholder" role="img" aria-label="Mapa de ubicación">
|
||
<span class="placeholder-label">mapa_palma_casco_antiguo</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 10 · Closing poster -->
|
||
<section class="closing-poster" aria-label="Reservar mesa">
|
||
<h2>Mesa para dos esta noche,<br>si te decides ahora.</h2>
|
||
<a href="#reserva" class="btn btn-light">Reservar mesa</a>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- 11 · Footer -->
|
||
<footer class="site-footer">
|
||
<span class="footer-brand">Cala Verd</span>
|
||
<div class="footer-links">
|
||
<a href="#">Aviso legal</a>
|
||
<a href="#">Privacidad</a>
|
||
<a href="#">Instagram</a>
|
||
</div>
|
||
<div class="footer-attribution">
|
||
<span>Tecnología</span>
|
||
<img src="/assets/informatiq-logo.png" alt="InformatiQ">
|
||
</div>
|
||
<span>© 2026 Cala Verd</span>
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
window.bauxaBooking = {
|
||
apiUrl: 'https://api.bauxa.app/api/public/cala-verd/reservations',
|
||
apiBase: 'https://api.bauxa.app/api/public/cala-verd',
|
||
smsVerificationEnabled: true,
|
||
success: 'Reserva confirmada. Te esperamos.',
|
||
rateLimit: 'Has enviado demasiadas reservas. Espera un momento y vuelve a intentarlo.',
|
||
error: 'No se ha podido guardar la reserva. Revisa los datos e inténtalo de nuevo.',
|
||
validation: 'Completa todos los campos obligatorios.',
|
||
verificationSent: 'Te hemos enviado un código de 6 dígitos por SMS.',
|
||
verificationOk: 'Teléfono verificado. ¡Gracias!',
|
||
verificationError: 'Código incorrecto o caducado. Inténtalo de nuevo.',
|
||
verificationResent: 'Código reenviado.'
|
||
};
|
||
window.bauxaDailyMenu = {
|
||
apiUrl: 'https://api.bauxa.app/api/public/cala-verd/daily-menu',
|
||
priceLabel: 'Precio:'
|
||
};
|
||
window.bauxaCarta = {
|
||
apiUrl: 'https://api.bauxa.app/api/public/cala-verd/carta'
|
||
};
|
||
</script>
|
||
<script src="/js/carta.js"></script>
|
||
<script src="/js/booking.js"></script>
|
||
<script src="/js/daily-menu.js"></script>
|
||
</body>
|
||
</html>
|