Sentidos Café follows a flat-root layout for the core files — the homepage, connection layer, scripts, and styles all live at the project root — with feature-specific CRUD modules organized into subdirectories. Understanding where each file lives and what it is responsible for makes it straightforward to extend the project or debug an issue without hunting across a complex framework structure.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Jimmy13anhelo/paginaweb2.github.io/llms.txt
Use this file to discover all available pages before exploring further.
Directory Tree
Root-Level Files
index.php
The main entry point of the application. It opens with require_once 'conexion.php' to make the $conexion PDO object available, then renders the complete single-page homepage as server-side HTML. Key sections in document order:
- Header — orange
caja-estilobox containing the circularlogo.jpgimage and the “Sentidos Café” title with the tagline “Despierta tus sentidos con nuestro aroma.” - Navigation — orange nav bar with Font Awesome icons linking to
index.php,/movelo/menu/menu.php, the location anchor, and#seccion-contacto - Welcome section (
.caja-bienvenida-ancha) — two-column flex layout: a white call-to-action panel on the left with a circular coffee-cup image and a large “VER MENÚ” button; a dashed placeholder panel on the right - Google Maps section (
.caja-especialidad-ancha) — embedded iframe centred on coordinates-13.5269295, -71.9492471with a “Ver en Google Maps” deep-link button - Combo gallery (
.seccion-experiencia-completa) — four accordion-style card components (Combo Dúo, Mix Antojos, Súper Banquete, Mega Compartir), each with a WhatsApp order button driven bydata-productoattributes - Contact footer (
#seccion-contacto) — dark brown section with email, phone, and social media icon links (Facebook, Instagram, TikTok) - Floating WhatsApp button — fixed-position green circle rendered via
#btn-wsp-flotante
buscador.js and whatsapp_interactivo.js just before </body>.
conexion.php
The single shared database connection file. It defines four variables ($host, $db_name, $username, $password), instantiates a PDO object with charset=utf8, and sets PDO::ATTR_ERRMODE to PDO::ERRMODE_EXCEPTION so that any SQL error throws a catchable PDOException rather than silently failing. A catch block calls die() with the error message to surface connection problems immediately during development.
Every other PHP file in the project accesses the database through this file via:
buscador.js
The main client-side JavaScript file, loaded on every page that includes it. It is structured into five clearly commented sections:
| Section | Responsibility |
|---|---|
| 1 — Hover & image effects | Swaps background images on combo cards and the speciality image block on mouseenter / mouseleave using a fondosAlternativos lookup map |
| 2 — WhatsApp logic | abrirWhatsapp(producto) builds a https://api.whatsapp.com/send?phone=937604465&text=... URL with a pre-filled Spanish message and calls window.open(). Wired to all .btn-wsp-pedido buttons and the #btn-wsp-flotante floating button |
| 3 — AJAX user registration | saludar() reads the #reg-nombres, #reg-apellidos, #reg-edad, and #reg-genero fields, builds a FormData object, and POSTs it to guardar_usuario.php via fetch(). It updates the #bloqueResultadoSaludo div with a success or error message inline — no page reload |
| 4 — Payroll calculator | calcularYMostrar() reads a name and gross salary, applies a 0 % / 8 % / 14 % tax band, and writes the net salary and retention status into a <table id="tablaResultados"> |
| 5 — Category search | Listens to #formularioBuscador submit, reads the #categoria select value, and redirects with window.location.href — preventing the default form submission from breaking the URL |
estilo.css
The complete stylesheet for the homepage. Notable design decisions drawn directly from the source:
- Color palette — primary orange
#f7941d/ dark coffee brown#3e2723/ light grey container background#d9e1e8/ near-black page background#0b0b0b - Layout — all major sections use CSS Flexbox;
.contenedor-principalis centred withmax-width: 850px - Orange boxes — the
.caja-estiloclass (header, nav) applies the brand orange background with a#d35400border and15pxborder-radius - Accordion gallery —
.tarjetacards useflex: 1at rest, expanding toflex: 4on hover via acubic-beziertransition, revealing the.contenidooverlay with atranslateYfade-in - WhatsApp buttons —
.btn-wsp-pedidouses WhatsApp green#25D366/ dark teal#128C7Eon hover; the floating.btn-wsp-flotante-principalisposition: fixedatbottom: 25px; right: 25pxwithz-index: 9999 - Responsive breakpoints —
@media (max-width: 768px)switches.caja-bienvenida-anchafrom row to column layout and constrains image heights for mobile viewports
script.sql
The complete MySQL DDL and seed file. Running this file creates the sentidos_cafe_db database (if it does not exist), creates the pedidos, reservas, and usuarios tables with all constraints, and inserts the default admin / admin123 user row using ON DUPLICATE KEY UPDATE so it is safe to re-run:
logo.jpg and plaza.png
Static image assets at the project root.
logo.jpg— The circular café logo displayed inside the.logo-circularheader element (65 × 65 px,border-radius: 50%, white background border)plaza.png— A reference image of a plaza, available as a local asset for use in location-related sections or future page layouts
Feature Subdirectories
menu/
Contains the full interactive menu experience linked from the homepage nav (/movelo/menu/menu.php). The module uses its own estilosmenu.css stylesheet to keep menu-specific overrides separate from the root estilo.css. The cafe_expreso/ sub-folder holds assets for the espresso coffee sub-category.
pedidos/
A complete order management CRUD module. guardar_pedidos.php receives POST data and inserts a row into the pedidos table via PDO. editar_pedido.php and eliminar_pedido.php handle UPDATE and DELETE operations. administrar_clientes.php provides an admin-side list view of all customers who have placed orders.
reservas/
A table reservation CRUD module with the same pattern. guardar_reserva.php inserts into reservas; ver_reservas.php lists all upcoming reservations; editar_reserva.php and eliminar_reserva.php complete the CRUD cycle.
Login/
Session-based authentication. login.php presents a login form, validates credentials against the usuarios table (PDO prepared statement), and sets session variables on success. logout.php calls session_destroy() and redirects back to the homepage.
Referenced Files Not Yet in Root
The following files are referenced directly in the source code but are not present in the project root. They must be created or deployed alongside the main files for their features to work correctly.
guardar_usuario.php— Called by thefetch('guardar_usuario.php', { method: 'POST', ... })inbuscador.js:saludar(). This file should accept thenombres,apellidos,edad, andgeneroPOST fields, insert a row using the$conexionPDO object, and echoEXITOon success.whatsapp_interactivo.js— Loaded via<script src="whatsapp_interactivo.js"></script>at the bottom ofindex.php, directly afterbuscador.js. It is intended to hold additional WhatsApp interaction logic beyond what is already inbuscador.js.