🛒 Gestor de Compras del Hogar

Una aplicación web moderna, responsiva y sumamente amigable para planificar y gestionar la lista de compras del hogar sin necesidad de bases de datos complejas. Toda la información se guarda localmente en un archivo plano en el servidor.

---

✨ Características Destacadas

• Estética Premium: Interfaz moderna de modo oscuro con efecto glassmorphism translúcido, sombras suaves y degradados elegantes.
• Micro-interacciones y Animaciones: Transiciones fluidas al agregar productos, eliminarlos o marcarlos como completados (con efecto de tachado y atenuación de opacidad).
• Soporte para Decimales: Permite ingresar cantidades fraccionadas (por ejemplo, 1.5 kg de arroz, 0.5 litros de leche) para mayor precisión.
• Persistencia sin Base de Datos: Los datos se leen y guardan directamente en el archivo compras.json mediante un script backend ligero en PHP.
• Sistema de Notificaciones (Toasts): Avisos flotantes elegantes ("Producto agregado con éxito", "Lista vaciada", etc.).
• Compartir HTML Interactivo: Genera un archivo .html autocontenido con su propio estilo y lógica reactiva local para que cualquier persona pueda ir marcando productos desde WhatsApp/Email en su móvil con una barra de progreso inteligente, funcionando 100% offline.
• Compartir Imagen PNG: Genera de forma dinámica un ticket o recibo digital usando Canvas, perfecto para compartir rápido como imagen.

---

🛠️ Tecnologías Utilizadas

• Frontend: HTML5 Semántico, CSS3 Vanilla (con Variables CSS y Animaciones), JavaScript Moderno (ES6+).
• Backend: PHP 7+ (Lógica ligera de lectura/escritura).
• Almacenamiento: Formato estructurado JSON (compras.json).

---

📂 Estructura del Proyecto

comprashouse/
├── index.html       # Estructura de la aplicación
├── style.css        # Hoja de estilos con variables y animaciones
├── app.js           # Lógica reactiva del lado del cliente y exportadores
├── api.php          # Backend en PHP para guardar y leer compras.json
├── compras.json     # Base de datos local plana
└── README.md        # Documentación del proyecto

---

🚀 Requisitos e Instalación (XAMPP)

1. Ubicación del Proyecto: Asegúrate de colocar la carpeta comprashouse dentro del directorio de publicación de tu servidor local XAMPP:

   • macOS: /Applications/XAMPP/xamppfiles/htdocs/comprashouse/
   • Windows: C:\xampp\htdocs\comprashouse\

2. Permisos de Escritura (Crucial en macOS / Linux): Dado que PHP necesita escribir sobre compras.json, debes asegurarte de que el servidor tenga permisos de escritura sobre dicho archivo. Puedes otorgar permisos completos ejecutando en tu terminal:

   chmod 666 compras.json

3. Iniciar el Servidor:

   • Abre el panel de control de XAMPP.
   • Inicia el servicio Apache.

4. Acceder a la Aplicación: Abre tu navegador e ingresa a la siguiente URL local: 👉 http://localhost/comprashouse/

---

📱 Nota Importante sobre la función "Compartir" en Celulares

El navegador utiliza la API nativa del sistema (navigator.share) al presionar Compartir HTML o Compartir Imagen:

• Seguridad (HTTPS): Los navegadores modernos (Safari, Chrome) restringen el uso de la ventana de compartir nativa únicamente a conexiones seguras HTTPS.
• Comportamiento en HTTP: Si pruebas la web desde tu celular usando la IP de tu computadora (ej. http://192.168.1.15/comprashouse/), el navegador bloqueará la ventana nativa y descargará el archivo automáticamente a tu móvil.
• Cómo enviarlo: Si el archivo se descarga debido al protocolo HTTP, simplemente abre tu WhatsApp, presiona el botón de adjuntar (clip 📎), selecciona el archivo descargado desde tu carpeta de Descargas o Galería, y envíalo manualmente.