Kitchen Diagram 2.0

Proyecto HTML/CSS/JS para visualizar la cocina y reorganizar objetos de almacenaje.

Archivos

• index.html: estructura del diagrama y slots válidos.
• styles.css: layout, estilos de cocina, badges y estados de drag and drop.
• app.js: datos de objetos, renderizado y lógica de mover elementos.

Cómo abrirlo

Opción 1: Live Server en VS Code

1. Abre la carpeta del proyecto en VS Code.
2. Abre index.html.
3. Pulsa Go Live.

Opción 2: servidor local con Python

python3 -m http.server 5500

Luego abre:

http://localhost:5500

Qué incluye la versión 2.0

• Slots válidos solo en cajones y armarios.
• Bandeja externa para objetos no colocados.
• Objetos independientes tipo tag/badge.
• Drag and drop nativo.
• Jerarquía de uso: diario, habitual y ocasional.
• Feedback visual cuando una colocación es menos recomendable.