<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design2Clothes — UI Kit</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome 6 (local) -->
<link rel="stylesheet" href="css/all.min.css">
<!-- App CSS -->
<link rel="stylesheet" href="css/style.css">
<style>
/* ── UI KIT PAGE STYLES ── */
.uikit-section {
margin-bottom: 56px;
}
.uikit-section-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--clr-text-muted);
margin-bottom: 24px;
padding-bottom: 10px;
border-bottom: 1px solid var(--clr-border);
}
.uikit-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
}
.uikit-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.uikit-label {
font-size: 10px;
font-weight: 600;
color: var(--clr-text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.color-swatch {
width: 60px; height: 60px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.05);
}
.color-swatch-label {
font-size: 10px;
color: var(--clr-text-muted);
text-align: center;
}
.swatch-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
hr.uikit-sep {
border-color: var(--clr-border);
margin: 0;
}
/* Fixed page nav */
.uikit-nav {
position: fixed;
top: 0; left: 0;
width: 200px;
height: 100vh;
background: var(--clr-bg-panel);
border-right: 1px solid var(--clr-border);
padding: 24px 16px;
overflow-y: auto;
z-index: 50;
}
.uikit-nav-brand {
font-size: 14px;
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.uikit-nav a {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--clr-text-muted);
padding: 7px 10px;
border-radius: 8px;
text-decoration: none;
transition: all 0.15s;
}
.uikit-nav a:hover {
color: var(--clr-text-primary);
background: var(--clr-bg-subpanel);
}
.uikit-nav a.active {
color: var(--clr-accent-orange);
background: rgba(255,106,0,0.1);
}
.uikit-content {
margin-left: 200px;
padding: 40px 48px;
max-width: 1100px;
}
.uikit-page-title {
font-size: 30px;
font-weight: 700;
color: var(--clr-text-primary);
margin-bottom: 8px;
}
.uikit-page-sub {
font-size: 14px;
color: var(--clr-text-muted);
margin-bottom: 48px;
}
</style>
</head>
<body>
<!-- ── Sidebar Nav ── -->
<nav class="uikit-nav">
<div class="uikit-nav-brand">
<i class="fa-solid fa-shirt" style="color:var(--clr-accent-orange)"></i>
UI Kit
</div>
<a href="#tokens">🎨 Tokens</a>
<a href="#typography">🔤 Typography</a>
<a href="#buttons">🔘 Buttons</a>
<a href="#tabs">📑 Tabs</a>
<a href="#inputs">📝 Inputs</a>
<a href="#selects">🔽 Selects</a>
<a href="#textarea">📋 Textarea</a>
<a href="#checkradio">✅ Check / Radio</a>
<a href="#toggle">🔄 Toggle</a>
<a href="#range">🎚️ Range</a>
<a href="#upload">📁 File Upload</a>
<a href="#assets">🗂️ Asset List</a>
<a href="#dropdown">📂 Dropdown</a>
<a href="#panels">🪟 Panels</a>
<a href="#badges">🏷️ Badges</a>
<a href="#alerts">⚠️ Alerts</a>
<a href="#modals">🪟 Modal</a>
<a href="#loading">⏳ Loading</a>
<a href="#formrow">📐 Form Row</a>
<a href="#layout">🏗️ App Layout</a>
</nav>
<!-- ── Main Content ── -->
<div class="uikit-content">
<div class="uikit-page-title">Design2Clothes — UI Kit</div>
<div class="uikit-page-sub">Componentes visuales generados a partir del diseño de referencia <code>design2clothes.pen</code></div>
<!-- ─────────────────────────────────────────────
1. DESIGN TOKENS
───────────────────────────────────────────── -->
<section class="uikit-section" id="tokens">
<div class="uikit-section-title">1 — Design Tokens / Colores</div>
<div class="uikit-row" style="margin-bottom:24px;">
<div class="swatch-wrap">
<div class="color-swatch" style="background:#121212"></div>
<div class="color-swatch-label">#121212<br>bg-root</div>
</div>
<div class="swatch-wrap">
<div class="color-swatch" style="background:#1B1B1B"></div>
<div class="color-swatch-label">#1B1B1B<br>panel</div>
</div>
<div class="swatch-wrap">
<div class="color-swatch" style="background:#171717"></div>
<div class="color-swatch-label">#171717<br>panel-alt</div>
</div>
<div class="swatch-wrap">
<div class="color-swatch" style="background:#242424"></div>
<div class="color-swatch-label">#242424<br>subpanel</div>
</div>
<div class="swatch-wrap">
<div class="color-swatch" style="background:#1A1A1A"></div>
<div class="color-swatch-label">#1A1A1A<br>input</div>
</div>
<div class="swatch-wrap">
<div class="color-swatch" style="background:#2C2C2C"></div>
<div class="color-swatch-label">#2C2C2C<br>border</div>
</div>
<div class="swatch-wrap">
<div class="color-swatch" style="background:#FF6A00"></div>
<div class="color-swatch-label">#FF6A00<br>orange</div>
</div>
<div class="swatch-wrap">
<div class="color-swatch" style="background:#6F2CFF"></div>
<div class="color-swatch-label">#6F2CFF<br>purple</div>
</div>
<div class="swatch-wrap">
<div class="color-swatch" style="background:#F2F2F2"></div>
<div class="color-swatch-label">#F2F2F2<br>text-prim</div>
</div>
<div class="swatch-wrap">
<div class="color-swatch" style="background:#B8B8B8"></div>
<div class="color-swatch-label">#B8B8B8<br>text-sec</div>
</div>
<div class="swatch-wrap">
<div class="color-swatch" style="background:#8E8E8E"></div>
<div class="color-swatch-label">#8E8E8E<br>muted</div>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
2. TYPOGRAPHY
───────────────────────────────────────────── -->
<section class="uikit-section" id="typography">
<div class="uikit-section-title">2 — Typography (Inter)</div>
<div style="display:flex;flex-direction:column;gap:16px;">
<div>
<div class="uikit-label mb-2">Brand / Logo — 34px 700</div>
<div style="font-size:34px;font-weight:700;color:var(--clr-text-primary)">Design2Clothes</div>
</div>
<div>
<div class="uikit-label mb-2">Project Title — 30px 700</div>
<div style="font-size:30px;font-weight:700;color:var(--clr-text-primary)">ThreadVision SS26 Capsule</div>
</div>
<div>
<div class="uikit-label mb-2">Section Heading — 24px 600</div>
<div style="font-size:24px;font-weight:600;color:var(--clr-text-primary)">Design Canvas</div>
</div>
<div>
<div class="uikit-label mb-2">Panel Title — 20px 600</div>
<div style="font-size:20px;font-weight:600;color:var(--clr-text-primary)">Assets</div>
</div>
<div>
<div class="uikit-label mb-2">CTA Button — 16px 700</div>
<div style="font-size:16px;font-weight:700;color:var(--clr-text-primary)">New Project</div>
</div>
<div>
<div class="uikit-label mb-2">Body / Label — 14px 500</div>
<div style="font-size:14px;font-weight:500;color:var(--clr-text-secondary)">AI-assisted fashion mockup workflow for mapping 2D graphics onto 3D garment avatars.</div>
</div>
<div>
<div class="uikit-label mb-2">Sub-Panel Head — 14px 600</div>
<div style="font-size:14px;font-weight:600;color:#F0F0F0">Model Controls</div>
</div>
<div>
<div class="uikit-label mb-2">Small / Tag — 12px 600</div>
<div style="font-size:12px;font-weight:600;color:var(--clr-text-secondary)">Asset Library Uploads Patterns Graphics</div>
</div>
<div>
<div class="uikit-label mb-2">Micro / Badge — 11px 500–600</div>
<div style="font-size:11px;font-weight:500;color:#A6A6A6">Scale 85% · Rotation 12° · Opacity 82% · 4K PNG ▾</div>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
3. BUTTONS
───────────────────────────────────────────── -->
<section class="uikit-section" id="buttons">
<div class="uikit-section-title">3 — Buttons</div>
<div class="uikit-row mb-4">
<div class="uikit-item">
<div class="uikit-label">Orange (Primary CTA)</div>
<button class="btn-d2c btn-orange btn-d2c--lg">
<i class="fa-solid fa-plus"></i> New Project
</button>
</div>
<div class="uikit-item">
<div class="uikit-label">Orange Medium</div>
<button class="btn-d2c btn-orange btn-d2c--md">
<i class="fa-solid fa-wand-magic-sparkles"></i> Apply Artwork
</button>
</div>
<div class="uikit-item">
<div class="uikit-label">Orange Small</div>
<button class="btn-d2c btn-orange btn-d2c--sm">Export</button>
</div>
</div>
<div class="uikit-row mb-4">
<div class="uikit-item">
<div class="uikit-label">Purple (Active / Generate)</div>
<button class="btn-d2c btn-purple btn-d2c--md">
<i class="fa-solid fa-robot"></i> Generate Model
</button>
</div>
<div class="uikit-item">
<div class="uikit-label">Purple Large</div>
<button class="btn-d2c btn-purple btn-d2c--lg">
<i class="fa-solid fa-image"></i> Asset Library
</button>
</div>
<div class="uikit-item">
<div class="uikit-label">Purple Small</div>
<button class="btn-d2c btn-purple btn-d2c--sm">Uploads</button>
</div>
</div>
<div class="uikit-row mb-4">
<div class="uikit-item">
<div class="uikit-label">Dark (Secondary)</div>
<button class="btn-d2c btn-dark btn-d2c--lg">Projects List</button>
</div>
<div class="uikit-item">
<div class="uikit-label">Ghost (Outline)</div>
<button class="btn-d2c btn-ghost btn-d2c--md">
<i class="fa-solid fa-sliders"></i> Settings
</button>
</div>
<div class="uikit-item">
<div class="uikit-label">Danger</div>
<button class="btn-d2c btn-danger btn-d2c--md">
<i class="fa-solid fa-trash"></i> Delete
</button>
</div>
<div class="uikit-item">
<div class="uikit-label">Success</div>
<button class="btn-d2c btn-success btn-d2c--md">
<i class="fa-solid fa-check"></i> Saved
</button>
</div>
</div>
<div class="uikit-row">
<div class="uikit-item">
<div class="uikit-label">Icon Buttons</div>
<div class="d-flex gap-2">
<button class="btn-icon"><i class="fa-solid fa-pencil"></i></button>
<button class="btn-icon"><i class="fa-solid fa-ellipsis"></i></button>
<button class="btn-icon"><i class="fa-solid fa-xmark"></i></button>
<button class="btn-icon"><i class="fa-solid fa-arrow-up-from-bracket"></i></button>
<button class="btn-icon"><i class="fa-solid fa-copy"></i></button>
</div>
</div>
<div class="uikit-item">
<div class="uikit-label">Loading State</div>
<button class="btn-d2c btn-purple btn-d2c--md is-loading">Generating</button>
</div>
<div class="uikit-item">
<div class="uikit-label">Full Width</div>
<div style="width:240px;">
<button class="btn-d2c btn-orange btn-d2c--md btn-d2c--full">
<i class="fa-solid fa-bolt"></i> Generate Mockup
</button>
</div>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
4. TABS
───────────────────────────────────────────── -->
<section class="uikit-section" id="tabs">
<div class="uikit-section-title">4 — Tabs</div>
<div class="uikit-row mb-4">
<div class="uikit-item" style="width:258px;">
<div class="uikit-label">Purple active (Assets)</div>
<div class="tabs-d2c" id="assetTabs">
<button class="tab-item active--purple" data-tab="tab-uploads">Uploads</button>
<button class="tab-item" data-tab="tab-patterns">Patterns</button>
<button class="tab-item" data-tab="tab-graphics">Graphics</button>
</div>
</div>
<div class="uikit-item" style="width:200px;">
<div class="uikit-label">Purple active (Model)</div>
<div class="tabs-d2c" id="modelTabs">
<button class="tab-item active--purple" data-tab="tab-custom">Custom</button>
<button class="tab-item" data-tab="tab-predefined">Predefined</button>
</div>
</div>
<div class="uikit-item" style="width:200px;">
<div class="uikit-label">Orange active</div>
<div class="tabs-d2c">
<button class="tab-item active--orange">Front</button>
<button class="tab-item">3/4</button>
<button class="tab-item">Side</button>
</div>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
5. INPUTS
───────────────────────────────────────────── -->
<section class="uikit-section" id="inputs">
<div class="uikit-section-title">5 — Inputs de Texto</div>
<div class="uikit-row" style="flex-direction:column;max-width:420px;">
<div class="form-group">
<label class="form-label-d2c">Nombre del proyecto</label>
<input type="text" class="field-d2c input-d2c" placeholder="ThreadVision SS26 Capsule">
</div>
<div class="form-group">
<label class="form-label-d2c">Prompt personalizado</label>
<div class="input-wrap">
<i class="fa-solid fa-magic input-icon"></i>
<input type="text" class="field-d2c input-d2c" placeholder="editorial female model, hands in pockets">
</div>
</div>
<div class="form-group">
<label class="form-label-d2c">API Key (oculta)</label>
<div class="input-wrap">
<i class="fa-solid fa-key input-icon"></i>
<input type="password" class="field-d2c input-d2c" placeholder="AIza...">
<i class="fa-solid fa-eye input-icon-right" style="cursor:pointer"></i>
</div>
</div>
<div class="form-group">
<label class="form-label-d2c">Input pequeño (sm)</label>
<input type="text" class="field-d2c input-d2c input-d2c--sm" placeholder="Escribe algo...">
</div>
<div class="form-group">
<label class="form-label-d2c">Input deshabilitado</label>
<input type="text" class="field-d2c input-d2c" placeholder="No editable" disabled>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
6. SELECTS
───────────────────────────────────────────── -->
<section class="uikit-section" id="selects">
<div class="uikit-section-title">6 — Selects / Dropdowns nativos</div>
<div class="uikit-row" style="flex-direction:column;max-width:420px;">
<div class="form-group">
<label class="form-label-d2c">Tipo de prenda</label>
<select class="field-d2c select-d2c">
<option value="">Selecciona tipo...</option>
<option value="tee">Oversized Tee</option>
<option value="slim">Slim Fit</option>
<option value="hoodie" selected>Hoodie</option>
<option value="jacket">Jacket</option>
</select>
</div>
<div class="form-group">
<label class="form-label-d2c">Tipo de tela</label>
<select class="field-d2c select-d2c">
<option value="">Fabric...</option>
<option value="cotton">Cotton</option>
<option value="jersey" selected>Jersey</option>
<option value="heavyweight">Heavyweight</option>
<option value="linen">Linen</option>
</select>
</div>
<div class="form-group">
<label class="form-label-d2c">Pose del modelo</label>
<select class="field-d2c select-d2c">
<option value="front">Front</option>
<option value="threequarter">3-4 View</option>
<option value="side">Side</option>
</select>
</div>
<div class="form-group">
<label class="form-label-d2c">Resolución de exportación</label>
<select class="field-d2c select-d2c">
<option value="2k">2K PNG (2048×2048)</option>
<option value="4k" selected>4K PNG (4096×4096)</option>
<option value="instagram">1080×1350 (Instagram)</option>
<option value="story">1080×1920 (Story)</option>
</select>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
7. TEXTAREAS
───────────────────────────────────────────── -->
<section class="uikit-section" id="textarea">
<div class="uikit-section-title">7 — Textareas</div>
<div style="display:flex;flex-direction:column;gap:16px;max-width:500px;">
<div class="form-group">
<label class="form-label-d2c">Descripción del proyecto</label>
<textarea class="field-d2c textarea-d2c" rows="4"
placeholder="AI-assisted fashion mockup workflow for mapping 2D graphics onto 3D garment avatars..."></textarea>
</div>
<div class="form-group">
<label class="form-label-d2c">Prompt de aplicación de artwork</label>
<textarea class="field-d2c textarea-d2c" rows="3"
placeholder="Make print placement sharper and aligned to chest..."></textarea>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
8. CHECKBOXES & RADIOS
───────────────────────────────────────────── -->
<section class="uikit-section" id="checkradio">
<div class="uikit-section-title">8 — Checkboxes & Radios</div>
<div class="uikit-row" style="gap:32px;">
<div class="uikit-item">
<div class="uikit-label mb-2">Checkboxes</div>
<div style="display:flex;flex-direction:column;gap:12px;">
<label class="check-d2c">
<input type="checkbox" checked>
Aplicar textura de tela
</label>
<label class="check-d2c">
<input type="checkbox">
Modo alta resolución
</label>
<label class="check-d2c">
<input type="checkbox" checked>
Generar variante de sombra
</label>
<label class="check-d2c">
<input type="checkbox" disabled>
Deshabilitado
</label>
</div>
</div>
<div class="uikit-item">
<div class="uikit-label mb-2">Radio Buttons</div>
<div style="display:flex;flex-direction:column;gap:12px;">
<label class="radio-d2c">
<input type="radio" name="blending" value="print" checked>
Print
</label>
<label class="radio-d2c">
<input type="radio" name="blending" value="multiply">
Multiply
</label>
<label class="radio-d2c">
<input type="radio" name="blending" value="softlight">
Soft Light
</label>
<label class="radio-d2c">
<input type="radio" name="blending" value="overlay">
Overlay
</label>
</div>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
9. TOGGLE SWITCHES
───────────────────────────────────────────── -->
<section class="uikit-section" id="toggle">
<div class="uikit-section-title">9 — Toggle Switches</div>
<div style="display:flex;flex-direction:column;gap:14px;max-width:300px;">
<label class="toggle-d2c">
<input type="checkbox" checked id="tog1">
<div class="toggle-track"></div>
Modo AI activo
</label>
<label class="toggle-d2c">
<input type="checkbox" id="tog2">
<div class="toggle-track"></div>
Modo previsualización
</label>
<label class="toggle-d2c">
<input type="checkbox" checked id="tog3">
<div class="toggle-track"></div>
Exportación automática
</label>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
10. RANGE SLIDERS
───────────────────────────────────────────── -->
<section class="uikit-section" id="range">
<div class="uikit-section-title">10 — Range Sliders</div>
<div style="display:flex;flex-direction:column;gap:20px;max-width:400px;">
<div class="form-group">
<div class="d-flex justify-between mb-2">
<label class="form-label-d2c mb-0">Scale</label>
<span class="uikit-label" id="scaleVal">85%</span>
</div>
<input type="range" class="range-d2c" min="10" max="200" value="85" id="scaleRange">
</div>
<div class="form-group">
<div class="d-flex justify-between mb-2">
<label class="form-label-d2c mb-0">Rotation</label>
<span class="uikit-label" id="rotVal">12°</span>
</div>
<input type="range" class="range-d2c" min="-180" max="180" value="12" id="rotRange">
</div>
<div class="form-group">
<div class="d-flex justify-between mb-2">
<label class="form-label-d2c mb-0">Opacity</label>
<span class="uikit-label" id="opaVal">82%</span>
</div>
<input type="range" class="range-d2c" min="0" max="100" value="82" id="opaRange">
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
11. FILE UPLOAD / DROP ZONE
───────────────────────────────────────────── -->
<section class="uikit-section" id="upload">
<div class="uikit-section-title">11 — File Upload / Drop Zone</div>
<div class="uikit-row">
<div class="uikit-item" style="width:258px;">
<div class="uikit-label">Drop Zone (estilo diseño)</div>
<div class="upload-zone" id="uploadZone">
<input type="file" id="fileInput" accept=".png,.jpg,.svg">
<i class="fa-solid fa-cloud-arrow-up"></i>
<p>Drop your designs in<br>.png, .jpg, .svg here</p>
<button class="btn-d2c btn-dark btn-d2c--sm mt-2" onclick="document.getElementById('fileInput').click()">
<i class="fa-solid fa-folder-open"></i> Browse
</button>
</div>
</div>
<div class="uikit-item" style="width:258px;">
<div class="uikit-label">Drop Zone — Estado drag over</div>
<div class="upload-zone drag-over">
<i class="fa-solid fa-cloud-arrow-up" style="color:var(--clr-accent-purple);font-size:32px;"></i>
<p style="color:var(--clr-accent-purple);font-weight:600;">Suelta el archivo aquí</p>
</div>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
12. ASSET LIST ITEMS
───────────────────────────────────────────── -->
<section class="uikit-section" id="assets">
<div class="uikit-section-title">12 — Asset List Items</div>
<div class="asset-list" style="max-width:320px;">
<div class="asset-item asset-item--active">
<div class="d-flex align-center gap-2">
<i class="fa-solid fa-file-image" style="color:var(--clr-accent-purple);font-size:16px;"></i>
<span class="asset-item__name">Logo_Brandmark.svg</span>
</div>
<span class="asset-item__badge file-badge file-badge--svg">SVG</span>
</div>
<div class="asset-item">
<div class="d-flex align-center gap-2">
<i class="fa-solid fa-image" style="color:var(--clr-accent-orange);font-size:16px;"></i>
<span class="asset-item__name">Tiger_Print.png</span>
</div>
<span class="asset-item__badge file-badge file-badge--png">PNG</span>
</div>
<div class="asset-item">
<div class="d-flex align-center gap-2">
<i class="fa-solid fa-image" style="color:#4fd17c;font-size:16px;"></i>
<span class="asset-item__name">Floral_Allover.jpg</span>
</div>
<span class="asset-item__badge file-badge file-badge--jpg">JPG</span>
</div>
<div class="asset-item">
<div class="d-flex align-center gap-2">
<i class="fa-solid fa-file-image" style="color:var(--clr-accent-purple);font-size:16px;"></i>
<span class="asset-item__name">Geometric_Pattern.svg</span>
</div>
<span class="asset-item__badge file-badge file-badge--svg">SVG</span>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
13. CUSTOM DROPDOWN
───────────────────────────────────────────── -->
<section class="uikit-section" id="dropdown">
<div class="uikit-section-title">13 — Custom Dropdown (Resolución Export)</div>
<div style="max-width:320px;">
<div class="dropdown-d2c" id="resDrop">
<div class="dropdown-trigger" onclick="document.getElementById('resDrop').classList.toggle('open')">
<span>Resolución</span>
<span style="font-weight:600;color:var(--clr-text-soft)">
4K PNG ▾
</span>
</div>
<div class="dropdown-menu-d2c">
<div class="dropdown-option">2K PNG (2048×2048)</div>
<div class="dropdown-option selected">4K PNG (4096×4096)</div>
<div class="dropdown-option">1080×1350 (Instagram)</div>
<div class="dropdown-option">1080×1920 (Story)</div>
</div>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
14. PANELS / CARDS
───────────────────────────────────────────── -->
<section class="uikit-section" id="panels">
<div class="uikit-section-title">14 — Panels / Cards</div>
<div class="uikit-row" style="align-items:flex-start;">
<div class="uikit-item">
<div class="uikit-label">Panel estándar</div>
<div class="panel" style="width:280px;">
<div class="panel-title">Quick Access</div>
<button class="btn-d2c btn-purple btn-d2c--md btn-d2c--full">
<i class="fa-solid fa-book-open-reader"></i> Asset Library
</button>
<button class="btn-d2c btn-dark btn-d2c--md btn-d2c--full">
<i class="fa-solid fa-list"></i> Projects List
</button>
</div>
</div>
<div class="uikit-item">
<div class="uikit-label">Sub-panel (Model Controls)</div>
<div class="subpanel" style="width:240px;">
<div class="panel-title--sm">Model Controls</div>
<div class="tabs-d2c">
<button class="tab-item active--purple">Custom</button>
<button class="tab-item">Predefined</button>
</div>
<input type="text" class="field-d2c input-d2c--sm" placeholder="editorial female model, hands in pockets">
<select class="field-d2c select-d2c" style="height:34px;font-size:11px;padding:0 28px 0 10px;">
<option>Front</option>
<option>3-4 View</option>
<option>Side</option>
</select>
</div>
</div>
<div class="uikit-item">
<div class="uikit-label">Project Info Card</div>
<div class="panel" style="width:320px;">
<div class="panel-label">Current Project</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
<div style="font-size:20px;font-weight:700;color:var(--clr-text-primary)">ThreadVision SS26</div>
<button class="btn-icon"><i class="fa-solid fa-pencil"></i></button>
</div>
<div style="font-size:13px;font-weight:500;color:var(--clr-text-secondary);line-height:1.5;">
AI-assisted fashion mockup workflow for mapping 2D graphics onto 3D garment avatars.
</div>
</div>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
15. BADGES & FILE TAGS
───────────────────────────────────────────── -->
<section class="uikit-section" id="badges">
<div class="uikit-section-title">15 — Badges & Tags</div>
<div class="uikit-row" style="flex-wrap:wrap;align-items:center;gap:10px;">
<span class="badge-d2c badge-purple"><i class="fa-solid fa-circle-dot"></i> Activo</span>
<span class="badge-d2c badge-orange"><i class="fa-solid fa-bolt"></i> Generando</span>
<span class="badge-d2c badge-success"><i class="fa-solid fa-check"></i> Exportado</span>
<span class="badge-d2c badge-danger"><i class="fa-solid fa-xmark"></i> Error</span>
<span class="badge-d2c badge-muted">Draft</span>
<span class="file-badge file-badge--svg">SVG</span>
<span class="file-badge file-badge--png">PNG</span>
<span class="file-badge file-badge--jpg">JPG</span>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
16. ALERTS
───────────────────────────────────────────── -->
<section class="uikit-section" id="alerts">
<div class="uikit-section-title">16 — Alerts</div>
<div style="display:flex;flex-direction:column;gap:12px;max-width:520px;">
<div class="alert-d2c alert-info">
<i class="fa-solid fa-circle-info"></i>
<span>El modelo se está generando. Esto puede tardar unos segundos.</span>
</div>
<div class="alert-d2c alert-success">
<i class="fa-solid fa-circle-check"></i>
<span>Diseño exportado correctamente en resolución 4K.</span>
</div>
<div class="alert-d2c alert-warning">
<i class="fa-solid fa-triangle-exclamation"></i>
<span>La API de Gemini ha alcanzado el límite de solicitudes. Reintenta en un momento.</span>
</div>
<div class="alert-d2c alert-danger">
<i class="fa-solid fa-circle-xmark"></i>
<span>Error al conectar con el workflow de n8n. Revisa el webhook.</span>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
17. MODAL (preview)
───────────────────────────────────────────── -->
<section class="uikit-section" id="modals">
<div class="uikit-section-title">17 — Modal</div>
<button class="btn-d2c btn-ghost btn-d2c--md" onclick="document.getElementById('demoModal').classList.add('active')">
<i class="fa-solid fa-square-arrow-up-right"></i> Abrir Modal demo
</button>
</section>
<!-- Modal overlay -->
<div class="modal-overlay" id="demoModal">
<div class="modal-d2c">
<div class="modal-header">
<div class="modal-title">Nuevo Proyecto</div>
<button class="btn-icon" onclick="document.getElementById('demoModal').classList.remove('active')">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="form-group mb-3">
<label class="form-label-d2c">Nombre del proyecto</label>
<input type="text" class="field-d2c input-d2c" placeholder="ThreadVision FW27...">
</div>
<div class="form-group mb-3">
<label class="form-label-d2c">Descripción breve</label>
<textarea class="field-d2c textarea-d2c" rows="3" placeholder="Describe el concepto..."></textarea>
</div>
<div class="form-group">
<label class="form-label-d2c">Tipo base</label>
<select class="field-d2c select-d2c">
<option>Oversized Tee</option>
<option>Hoodie</option>
<option>Jacket</option>
</select>
</div>
<div class="modal-footer">
<button class="btn-d2c btn-ghost btn-d2c--sm" onclick="document.getElementById('demoModal').classList.remove('active')">Cancelar</button>
<button class="btn-d2c btn-orange btn-d2c--sm"><i class="fa-solid fa-plus"></i> Crear Proyecto</button>
</div>
</div>
</div>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
18. LOADING / SPINNERS
───────────────────────────────────────────── -->
<section class="uikit-section" id="loading">
<div class="uikit-section-title">18 — Loading / Progress</div>
<div class="uikit-row" style="align-items:center;gap:32px;margin-bottom:24px;">
<div class="uikit-item">
<div class="uikit-label">Spinner sm</div>
<div class="spinner-d2c spinner-d2c--sm"></div>
</div>
<div class="uikit-item">
<div class="uikit-label">Spinner md</div>
<div class="spinner-d2c"></div>
</div>
<div class="uikit-item">
<div class="uikit-label">Spinner lg</div>
<div class="spinner-d2c spinner-d2c--lg"></div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px;max-width:400px;">
<div>
<div class="d-flex justify-between mb-2">
<span class="uikit-label">Generando modelo...</span>
<span class="uikit-label">65%</span>
</div>
<div class="progress-d2c">
<div class="progress-bar-d2c" style="width:65%"></div>
</div>
</div>
<div>
<div class="d-flex justify-between mb-2">
<span class="uikit-label">Aplicando artwork...</span>
<span class="uikit-label">92%</span>
</div>
<div class="progress-d2c">
<div class="progress-bar-d2c" style="width:92%;background:var(--clr-accent-orange)"></div>
</div>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
19. FORM ROW (Inspector style)
───────────────────────────────────────────── -->
<section class="uikit-section" id="formrow">
<div class="uikit-section-title">19 — Inspector Form Rows</div>
<div class="subpanel" style="max-width:300px;">
<div class="panel-title--sm">Artwork Controls</div>
<div class="form-row">
<span class="form-row__label">Scale</span>
<span class="form-row__value">85%</span>
</div>
<div class="form-row">
<span class="form-row__label">Rotation</span>
<span class="form-row__value">12°</span>
</div>
<div class="form-row">
<span class="form-row__label">Opacity</span>
<span class="form-row__value">82%</span>
</div>
<div class="form-row">
<span class="form-row__label">Blending</span>
<span class="form-row__value" style="color:var(--clr-accent-purple)">Print</span>
</div>
</div>
<div class="subpanel mt-3" style="max-width:300px;">
<div class="panel-title--sm">Garment Controls</div>
<div class="form-row">
<span class="form-row__label">Fabric</span>
<span class="form-row__value">Jersey</span>
</div>
<div class="form-row" style="justify-content:space-between;">
<span class="form-row__label">Base Colour</span>
<span style="display:inline-block;width:20px;height:20px;border-radius:50%;background:#3A3A3A;border:1px solid #555;"></span>
</div>
<div class="form-row">
<span class="form-row__label">Type</span>
<span class="form-row__value">Oversized Tee</span>
</div>
</div>
</section>
<hr class="uikit-sep mb-5">
<!-- ─────────────────────────────────────────────
20. APP LAYOUT PREVIEW
───────────────────────────────────────────── -->
<section class="uikit-section" id="layout">
<div class="uikit-section-title">20 — App Layout Preview (mini)</div>
<div style="border:1px solid var(--clr-border);border-radius:18px;overflow:hidden;background:var(--clr-bg-root);">
<!-- Mini Topbar -->
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--clr-border);">
<div style="font-size:18px;font-weight:700;color:var(--clr-text-primary)">Design2Clothes</div>
<button class="btn-d2c btn-orange btn-d2c--sm"><i class="fa-solid fa-plus"></i> New Project</button>
</div>
<!-- Mini 3-col -->
<div style="display:flex;gap:12px;padding:12px;min-height:200px;">
<div class="panel" style="width:160px;gap:8px;">
<div style="font-size:13px;font-weight:600;color:var(--clr-text-primary)">Assets</div>
<div class="tabs-d2c" style="height:28px;">
<button class="tab-item active--purple" style="font-size:10px;">Uploads</button>
<button class="tab-item" style="font-size:10px;">Patterns</button>
</div>
<div class="asset-item" style="height:36px;">
<span class="asset-item__name" style="font-size:10px;">Logo.svg</span>
<span class="file-badge file-badge--svg">SVG</span>
</div>
</div>
<div class="panel panel--alt" style="flex:1;align-items:center;justify-content:center;min-height:180px;">
<i class="fa-solid fa-shirt" style="font-size:48px;color:#2C2C2C;"></i>
<div style="font-size:11px;color:var(--clr-text-muted);margin-top:8px;">AI Texture-Mapped Preview</div>
</div>
<div class="panel" style="width:160px;gap:8px;">
<div style="font-size:13px;font-weight:600;color:var(--clr-text-primary)">Export</div>
<div style="font-size:10px;color:var(--clr-text-muted);">High-res render for portfolio.</div>
<select class="field-d2c select-d2c" style="height:28px;font-size:10px;padding:0 24px 0 8px;">
<option>4K PNG ▾</option>
</select>
<button class="btn-d2c btn-orange btn-d2c--sm btn-d2c--full" style="height:28px;font-size:11px;">Export</button>
</div>
</div>
</div>
</section>
<!-- ── Toast demo ── -->
<div class="toast-container" id="toastContainer"></div>
<div style="height:80px;"></div>
</div><!-- /uikit-content -->
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function() {
// ── Range sliders
function bindRange(inputId, labelId, suffix) {
$('#' + inputId).on('input', function() {
$('#' + labelId).text($(this).val() + suffix);
});
}
bindRange('scaleRange', 'scaleVal', '%');
bindRange('rotRange', 'rotVal', '°');
bindRange('opaRange', 'opaVal', '%');
// ── Tabs
$(document).on('click', '.tabs-d2c .tab-item', function() {
const $tabs = $(this).closest('.tabs-d2c').find('.tab-item');
$tabs.removeClass('active--purple active--orange');
$(this).addClass('active--purple');
});
// ── Drop zone drag events
const $zone = $('#uploadZone');
$zone.on('dragover dragenter', function(e) {
e.preventDefault();
$zone.addClass('drag-over');
});
$zone.on('dragleave drop', function() {
$zone.removeClass('drag-over');
});
$zone.on('drop', function(e) {
e.preventDefault();
const files = e.originalEvent.dataTransfer.files;
if (files.length) showToast('<i class="fa-solid fa-check"></i> Archivo subido: ' + files[0].name, 'success');
});
// ── Close dropdown on outside click
$(document).on('click', function(e) {
if (!$(e.target).closest('.dropdown-d2c').length) {
$('.dropdown-d2c').removeClass('open');
}
});
// ── Dropdown option click
$(document).on('click', '.dropdown-option', function() {
const text = $(this).text();
$(this).closest('.dropdown-d2c').find('.dropdown-trigger span:last').text(text + ' ▾');
$(this).closest('.dropdown-d2c').removeClass('open');
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
// ── Nav active link on scroll
const sections = $('section[id]');
$(window).on('scroll', function() {
const scrollY = $(this).scrollTop();
sections.each(function() {
const top = $(this).offset().top - 80;
const id = $(this).attr('id');
if (scrollY >= top) {
$('.uikit-nav a').removeClass('active');
$('.uikit-nav a[href="#' + id + '"]').addClass('active');
}
});
});
// ── Toast helper
window.showToast = function(message, type) {
const icons = { success: 'fa-check-circle', warning: 'fa-triangle-exclamation', danger: 'fa-circle-xmark', info: 'fa-circle-info' };
const colors = { success: 'var(--clr-accent-purple)', warning: 'var(--clr-accent-orange)', danger: '#e57161', info: '#a880ff' };
const icon = icons[type] || 'fa-circle-info';
const color = colors[type] || colors.info;
const $toast = $('<div class="toast-d2c">')
.html('<i class="fa-solid ' + icon + '" style="color:' + color + '"></i> ' + message);
$('#toastContainer').append($toast);
setTimeout(() => $toast.fadeOut(400, () => $toast.remove()), 3500);
};
// Demo toast on load
setTimeout(() => showToast('<i class="fa-solid fa-palette"></i> UI Kit cargado correctamente', 'success'), 800);
});
</script>
</body>
</html>
