# Design2Clothes
===============

Aplicación web de diseño de ropa asistida por inteligencia artificial.
Permite crear, personalizar y exportar diseños de moda usando IA generativa (Gemini).

---

## 🎯 Descripción del Proyecto

**Design2Clothes** es un diseñador de ropa online con un flujo de trabajo que combina:

- Un canvas de diseño interactivo
- Panel de Assets (Colores, Patrones, Telas)
- Inspector de propiedades (Model Controls, Panel Controls, Garment Controls, Artwork Controls)
- Panel de exportación con prompt AI y generación de imagen

El sistema usa IA generativa (Gemini API) a través de flujos de automatización con **n8n** para generar diseños basados en parámetros configurados por el usuario.

---

## 🛠️ Stack Tecnológico

| Tecnología | Uso |
|---|---|
| **PHP** | Backend, endpoints API, integración con n8n |
| **jQuery** | Lógica frontend, AJAX, interactividad |
| **Bootstrap 5** | Framework CSS / UI Components |
| **Font Awesome 6** | Iconografía (incluido en `/css`) |
| **Gemini API** | IA generativa para diseño de ropa |
| **n8n** | Automatización y flujos de trabajo (webhooks) |

---

## 📁 Estructura de Carpetas

```
clothes/
├── css/                    # Estilos
│   ├── style.css           # CSS principal del proyecto
│   ├── all.min.css         # Font Awesome 6 (incluido localmente)
│   └── webfonts/           # Fuentes de Font Awesome
├── js/                     # JavaScript
│   └── app.js              # Lógica principal (jQuery)
├── media/                  # Imágenes, recursos multimedia
├── n8n/                    # Flujos de trabajo n8n (JSON exports)
├── design2clothes.pen      # Diseño de referencia UI (Pencil)
└── README.md               # Este fichero
```

---

## 🎨 Diseño de Referencia

El fichero `design2clothes.pen` contiene los mockups del diseño UI con temática **dark mode**:

- **Fondo base**: `#121212`
- **Cards/Panels**: `#1B1B1B` con borde `#2C2C2C`
- **Color acento**: `#FF6A00` (naranja)
- **Tipografía**: Inter
- **Pantallas**: Dashboard 1.0 y 1.1

### Secciones principales:
1. **Topbar** – Marca + botón "New Project"
2. **Quick Access** – Acceso rápido a últimos proyectos
3. **Canvas Shell** – 3 paneles:
   - 🎛️ **Left** – Assets (Textures, Patterns, Suppliers) + Inspector
   - 🖼️ **Center** – Design Canvas / Área de diseño
   - 📤 **Right** – Export (Summary, AI Prompt, Export button)

---

## ⚙️ Configuración

### API Keys
- `GEMINI_API_KEY` – Clave de la API de Google Gemini
- Configurar en el fichero de configuración PHP (pendiente de crear)

### n8n Webhooks
- Flujos de automatización en la carpeta `/n8n`
- Integración mediante webhooks HTTP

---

## 🚀 Estado del Proyecto

- [x] Estructura de carpetas creada
- [x] Diseño UI de referencia (design2clothes.pen)
- [x] Font Awesome 6 incluido localmente
- [ ] HTML principal (index.php)
- [ ] PHP backend / API endpoints
- [ ] Integración Gemini API
- [ ] Flujos n8n
- [ ] Lógica jQuery / app.js
