Restaurante con menú

Sitio para restaurantes, fondas, cafeterías o taquerías con lo que más buscan los comensales: el menú con precios, el horario, la ubicación y una forma rápida de reservar. El menú se genera desde un arreglo de JavaScript, así que actualizar precios o agregar platillos es editar una lista, no tocar HTML.

Vista previa

La Casona de Mamá Tere

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Secciones

Sección	Detalle
Header + papel picado	Franja de colores hecha con repeating-linear-gradient (sin imágenes), logo de texto y menú responsive.
Hero	Foto con degradado lateral para que el texto sea legible, dos llamadas a la acción e información rápida.
Especialidades	Tres tarjetas con foto para los platillos estrella.
Menú interactivo	Filtros por categoría, buscador que ignora acentos, precio con línea punteada estilo carta y etiquetas (Favorito, Picante, Vegetariano, Temporada).
Reservación	Formulario que arma un mensaje bonito y abre WhatsApp con los datos; no necesita servidor.
Ubicación y horario	Tres tarjetas con dirección, horario y contacto.

Cómo funciona el menú

Los datos están separados de la presentación. Para editar el menú sólo cambias estos dos arreglos al inicio del script:

const CATEGORIAS = [
  { id: 'todos', nombre: 'Todo' },
  { id: 'desayunos', nombre: '🍳 Desayunos' },
  { id: 'fuertes', nombre: '🍲 Platos fuertes' },
  // agrega las que necesites
];

const PLATILLOS = [
  {
    cat: 'fuertes',                 // id de la categoría
    nombre: 'Mole poblano',
    precio: 210,
    desc: 'Pieza de pollo bañada en mole de la casa...',
    img: 'mole-poblano',            // en la demo es una "semilla" de picsum.photos
    etiquetas: ['Favorito', 'Típico'],
  },
];

La función pintarPlatillos() filtra por categoría y por texto, y genera el HTML con template literals. El buscador usa normalize('NFD') para quitar acentos, así "cafe" encuentra "Café de olla".

Usar fotos propias

Cambia la línea del img dentro de pintarPlatillos():

// Antes (demo)
`<img src="https://picsum.photos/seed/${p.img}/160/160" ...>`
// Después: guarda tus fotos como img/menu/mole-poblano.webp
`<img src="img/menu/${p.img}.webp" ...>`

Cargar el menú desde un archivo o una API

Para que el dueño actualice precios sin tocar el HTML, mueve los datos a un menu.json y cárgalo con fetch:

const { categorias, platillos } = await (await fetch('menu.json')).json();

Un paso más allá: guárdalo en una tabla MySQL y crea un endpoint con la API REST en PHP, con un pequeño panel para editar precios.

Reservación por WhatsApp

El formulario no envía nada a un servidor: valida los campos (fecha mínima hoy, teléfono de 10 dígitos), construye un mensaje con emojis y abre wa.me con el texto codificado. Para cambiar el número edita:

const WHATSAPP = '522221234567'; // 52 + 10 dígitos

Si el restaurante necesita control real de disponibilidad (mesas, horarios ocupados), usa el proyecto Reservas con Node + MySQL.

Personalización rápida

:root {
  --primario: #be123c;   /* botones y acentos */
  --secundario: #15803d;
  --dorado: #d97706;     /* precios y filtro activo */
  --oscuro: #1f1410;     /* fondo del menú y footer */
  --fondo: #fffaf3;      /* fondo general cálido */
  --titulos: 'Georgia', serif;
}

• Sushi / cocina asiática: --primario: #dc2626, --oscuro: #0a0a0a, quita el papel picado.
• Cafetería: --primario: #78350f, --dorado: #ca8a04, fondo #faf7f2.
• Comida saludable: --primario: #16a34a, --oscuro: #052e16.

Mejoras que puedes cobrar aparte

1. Menú con código QR para las mesas: genera un QR que apunte a tusitio.mx/#menu.
2. Pedidos para llevar combinando el menú con el carrito de la tienda.
3. Versión en inglés para zonas turísticas.
4. Integración con Google Reservas o plataformas como OpenTable.

Imprimir el menú

El botón "Imprimir menú" llama a window.print(). Añade una hoja de estilos @media print que oculte header, hero y formulario para que el cliente obtenga una carta limpia en PDF.

Precios actualizados

Un menú con precios viejos genera malas reseñas. Acuerda con el cliente quién y cada cuánto los actualiza, o entrégale la versión con menu.json para que lo haga él.