file:///C:/Users/casa/Downloads/Antigravity25/standalone-editable.html
# Lienzo Urbano (lienzourbano.a con siluetas arquitectónicas de streetwear, producción bajo demanda automatizada y sincronización en tiempo real con WordPress/WooCommerce.
---
## ⚡ Características Principales
### 🛍️ 1. Tienda de Comercio Electrónico 100% Funcional & Lista para Vender
- **Catálogo de Esenciales Heavyweight**: Sudaderas de 420 GSM French Terry, camisetas boxy fit de 240 GSM, chaquetas tácticas, pantalones cargo y accesorios.
- **Carrito Reactivo Completo**: Cálculo dinámico de subtotal, impuestos, barra interactiva de progreso hacia envío gratis ($150 USD) y cupones de descuento (`AURA20`, `LIENZO15`, `FREESHIP`).
- **Selector de Tallas y Colores**: Swatches interactivos con selector de tallas (S a 2XL) y guía de medidas detallada en centímetros y pulgadas.
- **Proceso de Pago Seguro (Multi-Pasarela)**:
- Tarjetas de crédito/débito con validación en vivo.shop) 🎨
> **Tienda Oficial Streetwear de Lujo Heavyweight con Integración Printful POD & WooCommerce REST API v3.**
Bienvenido al repositorio oficial de **Lienzo Urbano**, una plataforma de comercio electrónico de alta gama diseñad
- Apple Pay / Google Pay.
- PayPal Instant.
- **Checkout Directo por WhatsApp**: Genera un mensaje pre-formateado con el desglose exacto del pedido para compra inmediata con el vendedor.
- **Rastreo de Pedidos**: Módulo interactivo de seguimiento con línea de tiempo animada (Recibido -> Impresión DTG Printful -> Inspección de Calidad -> Envío Express -> Entregado).
- **Soporte Bilingüe & Multi-Moneda**: Alternancia instantánea entre Español (ES) e Inglés (EN) y conversión a USD ($), EUR (€) y MXN ($).
- **Audio Sintetizado con Web Audio API**: Efectos hápticos sonoros al agregar al carrito, aplicar cupones y completar compras.
---
### ✏️ 2. Motor de Edición en Vivo (Live Visual Editor)
- **Modo Editor en 1 Clic**: Botón `✏️ Modo Editor` en la barra superior que habilita edición en vivo.
- **Edición Completa de Prendas**:
- Modificación de título, subtítulo, descripción, precio, precio regular, categoría, insignia (badge), SKU, imágenes y stock.
- **➕ Creación de Nuevas Prendas**:
- Modal integrado para añadir cualquier nueva prenda al catálogo con asignación automática de ID, SKU, categoría y persistencia instantánea.
- **🗑️ Eliminación de Prendas**:
- Capacidad para retirar productos del catálogo con confirmación de seguridad.
- **Edición In-Situ de Textos**: Haz clic directamente sobre anuncios, subtítulos o cajas y edita el texto en pantalla.
- **Exportación e Importación JSON**: Respalda o restaura todo el catálogo y configuración con un solo clic.
---
### 📦 3. Integración Oficial con Printful (POD)
- **Transferencia de Catálogo en 1 Clic**: Descarga y sincronización de maquetas de alta resolución, SKUs de impresión y variantes.
- **Envío Automatizado a Producción**: Al completar una orden, el sistema genera automáticamente un ticket de producción Printful con técnica de impresión DTG al agua Kornit, tallas y dirección del destinatario.
- **Panel de Control Printful**: Diagnóstico de conexión API, estado de SKUs y registro de órdenes despachadas.
---
### 🌐 4. Integración WooCommerce REST API v3
- **Conexión Directa**: Compatible con endpoints de WordPress/WooCommerce (`/wp-json/wc/v3/products`, `/wp-json/wc/v3/orders`, etc.).
- **Sincronización Batch**: Exporta productos y variantes directamente al backend de WooCommerce.
- **Gestión de Pedidos**: Visualización en vivo de órdenes generadas con sincronización bidireccional.
- **Simulador de Webhooks**: Monitor de eventos para `order.created`, `order.updated` y `order.fulfilled`.
---
### 🚀 5. Optimización SEO de Nivel Enterprise
- **Datos Estructurados Schema.org (JSON-LD)**:
- Esquema `ClothingStore` / `Organization` completo.
- Esquema `WebSite` con `SearchAction` para el cuadro de búsqueda en Google.
- Esquema `ItemList` y `Product` con ofertas, precios, disponibilidad en inventario y puntuación de reseñas (AggregateRating).
- **Meta Tags Completos**: OpenGraph para Facebook/WhatsApp, Twitter Summary Cards y etiquetas canónicas.
- **Sitemap XML & Robots.txt**: Actualizados y listos para indexación en Google Search Console y Bing Webmaster.
---
## 💻 Puesta en Marcha Local
### Prerrequisitos
- Node.js (v16 o superior)
### Ejecución
```bash
# Iniciar servidor local
node server.js
```
El servidor estará disponible en:
👉 `http://localhost:3000`
### 📦 Compilación a un Único Archivo HTML (Standalone HTML)
Para generar un archivo HTML único con todos los estilos CSS, scripts JavaScript e imágenes Base64 consolidados en un solo archivo (ideal para WebView, apps móviles, Hostinger o distribución estática):
```bash
# Compilar bundle autónomo completo (PowerShell)
.\bundle-fullpage.ps1
# O con Node.js (si está instalado)
npm run build
```
Archivos generados:
- **`standalone-editable.html`** / **`dist/standalone-editable.html`**: Versión autónoma completa con el **Modo Editor en Vivo (Live Visual Editor)** activado automáticamente al abrir. Permite hacer clic y editar cualquier texto, precio, prenda o regla directamente en el navegador, y cuenta con un botón en la barra flotante para copiar o descargar el código listo para insertar.
- **`embed-store.html`** / **`dist/embed-store.html`**: Fragmento/Widget HTML autocontenido (sin etiquetas ``, ``, `` externas) listo para copiar y pegar directamente en un bloque de **HTML Personalizado** de WordPress, Hostinger Creador Web, Elementor, Shopify o cualquier página web existente.
- **`standalone-fullpage.html`** / **`dist/standalone-fullpage.html`**: Archivo HTML 100% autónomo y autocontenido con todos los estilos (`