¡Bienvenido al repositorio del menú digital e interactivo de Burger Bike's! Esta es una aplicación web moderna, ultra-rápida y completamente responsiva diseñada para facilitar la visualización del menú del Food Truck y agilizar el proceso de recepción de pedidos a través de WhatsApp.
El diseño está inspirado en la cultura biker y los retro diners americanos nocturnos, utilizando una paleta de colores vibrantes y contrastantes:
- Fondo Negro Carbón (
#0a0a0a): Proporciona un lienzo oscuro premium para resaltar las luces. - Verde Limón Neón (
#66ff00): Extraído directamente del logotipo oficial. Utilizado para precios, títulos y bordes luminosos (glowing effects). - Naranja Eléctrico (
#ff5500): Color estratégico de contraste que estimula el apetito y jerarquiza los llamados a la acción principales (badges de primer lugar, indicador de carrito y botón de WhatsApp). - Tipografía: Encabezados imponentes usando Oswald y textos limpios con Space Grotesk para máxima legibilidad.
El proyecto está organizado de manera limpia y modular para simplificar el mantenimiento futuro:
Menu_Interactivos/
├── assets/ # Recursos gráficos locales
│ ├── logo.jpg # Logotipo oficial de Burger Bike's
│ ├── burger_item.jpg # Foto ilustrativa de Hamburguesas
│ ├── snack_item.jpg # Foto ilustrativa de Snacks (Snaks)
│ └── combo_item.jpg # Foto ilustrativa de Combos y fondo del banner
├── index.html # Estructura HTML5 y metadatos SEO
├── styles.css # Hojas de estilo, variables y animaciones
└── app.js # Base de datos de productos y lógica interactiva
- Buscador en Tiempo Real: Filtra instantáneamente las hamburguesas y snacks por nombre o ingredientes conforme escribes.
- Filtro por Categorías: Pestañas superiores (Todo, Hamburguesas, Combos, Snaks, Bebidas) con deslizamiento suave en dispositivos móviles.
- Modal de Detalles y Personalización: Al hacer clic en un producto se despliega una ventana modal donde el cliente puede seleccionar la cantidad y ver la descripción del artículo.
- Carrito de Compras Persistente: Guarda el progreso de la orden en el almacenamiento local del navegador (
localStorage) para evitar pérdidas de datos si la pestaña se cierra por accidente. - Flujo "Para Recoger" simplificado: Diseñado para comer en el establecimiento o pasar a recoger (sin dirección de entrega).
- Checkout automatizado por WhatsApp: Genera un mensaje detallado y formateado profesionalmente con un clic, abriendo la aplicación de WhatsApp lista para enviar.
Para ver y probar el menú interactivo en tu computadora o dispositivo móvil local:
- Descarga o clona este directorio.
- Haz doble clic en el archivo index.html para abrirlo directamente en tu navegador web preferido (Chrome, Edge, Safari, Firefox).
- ¡Las imágenes y estilos se cargarán al instante desde las carpetas locales!
Al no requerir base de datos ni servidores dinámicos backend (todo corre en el cliente), puedes alojarlo gratis y en cuestión de segundos en servicios como:
- Agregar/Modificar Productos: Abre el archivo app.js y edita la constante
PRODUCTSal inicio del archivo. Puedes modificar precios, nombres, descripciones o añadir nuevas categorías. - Modificar Colores o Fuentes: Abre el archivo styles.css y edita las variables declaradas dentro del selector
:rooten las primeras líneas.