AutoFrenos — instrucciones para desarrollo local

Este proyecto contiene la vista all-products.html que carga los datos de assets/productos.json.

Problema habitual:

• Si abres all-products.html mediante file:// muchos navegadores bloquean fetch('assets/productos.json') por seguridad (origen null), lo que hace que la lista de productos aparezca vacía.

Soluciones recomendadas:

1. Opcional (recomendado): levantar un servidor HTTP local y abrir la página por http://localhost.

   • Usando Python (si está instalado):

# desde la raíz del proyecto (C:\Pagina AutoFrenos)
python -m http.server 8000
# abrir en el navegador: http://localhost:8000/all-products.html

• Alternativa (Node): si tienes http-server instalado globalmente:

npx http-server -p 8000
# o si lo instalaste globalmente
http-server -p 8000

Ventaja: evita duplicar datos en el repo y es equivalente a producción.

2. Fallback para file:// (ya implementado): assets/productos-inline.js

   • Este archivo define window.PRODUCTS = [ ... ] con todo el contenido de assets/productos.json.
   • all-products.html carga assets/productos-inline.js antes de assets/all-products.js, por lo que la página funcionará abriéndola con file://.
   • Nota: esto duplica los datos en el repositorio; si actualizas productos.json debes regenerar productos-inline.js.

Regenerar productos-inline.js (dos métodos):

• Método PowerShell (incluido):

# desde la raíz del proyecto
& "assets\regenerate-productos-inline.ps1"

• Método Node (si prefieres Node y tienes node):

node assets/generate-productos-inline.js

Verificación rápida:

• Abrir all-products.html por file:// debería mostrar todos los productos si usas el fallback inline.
• Abrir http://localhost:8000/all-products.html (si corres el servidor) es la forma recomendada.

Si quieres, puedo:

• Añadir una tarea package.json/tasks.json para ejecutar el servidor con un atajo.
• O revertir la inclusión inline y documentar únicamente el servidor local.

---

Archivo añadido automáticamente por la herramienta de desarrollo para facilitar pruebas locales.

Migrar Tailwind CDN a instalación local

Advertencia: El uso de Tailwind CDN es solo para desarrollo y pruebas rápidas. Para producción, sigue estos pasos:

1. Instala Node.js desde https://nodejs.org/
2. Abre una terminal en la carpeta del proyecto y ejecuta:

   npm install -D tailwindcss
   npx tailwindcss init
   

3. Configura tu archivo tailwind.config.js y crea tu CSS personalizado:

   npx tailwindcss -i ./assets/input.css -o ./assets/tailwind.css --watch
   

4. Reemplaza el enlace CDN en tus HTML por el CSS generado localmente:

   <link href="assets/tailwind.css" rel="stylesheet">
   

5. Consulta la documentación oficial para detalles.

Ajuste de header y navegación

El header ya no es fijo. El espacio superior se ajusta dinámicamente con padding-top según la altura del header. Todos los enlaces de categorías en el mega-menu navegan correctamente a la vista de productos filtrados.