<?php
session_name('d2c_session');
session_start();
require_once __DIR__ . '/config.php';
// Demo/mock project state
$project = [
'title' => 'ThreadVision SS26 Capsule',
'description' => 'AI-assisted fashion mockup workflow for mapping 2D graphics onto 3D garment avatars. Focus: oversized tee and hoodie variants for portfolio-ready exports.',
];
// Scan existing uploads for this session
$sessionUploadDir = UPLOAD_DIR . (session_id() ?: 'demo') . '/';
$uploadedAssets = [];
if (is_dir($sessionUploadDir)) {
foreach (glob($sessionUploadDir . '*') as $f) {
$ext = strtoupper(pathinfo($f, PATHINFO_EXTENSION));
$uploadedAssets[] = [
'name' => basename($f),
'ext' => $ext,
'url' => APP_BASE_PATH . '/media/uploads/' . session_id() . '/' . basename($f),
];
}
}
// Predefined models
$predefinedModels = [
['id' => 'model_f_front', 'label' => 'Female — Front', 'icon' => 'fa-person-dress'],
['id' => 'model_f_3q', 'label' => 'Female — 3/4', 'icon' => 'fa-person-dress'],
['id' => 'model_m_front', 'label' => 'Male — Front', 'icon' => 'fa-person'],
['id' => 'model_m_3q', 'label' => 'Male — 3/4', 'icon' => 'fa-person'],
['id' => 'model_m_side', 'label' => 'Male — Side', 'icon' => 'fa-person'],
['id' => 'model_flat_tee', 'label' => 'Flat — Tee', 'icon' => 'fa-shirt'],
['id' => 'model_flat_hoodie', 'label' => 'Flat — Hoodie', 'icon' => 'fa-shirt'],
];
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design2Clothes — AI Fashion Designer</title>
<meta name="description" content="AI-powered fashion mockup designer. Upload your artwork, generate a model, apply your design and export in high resolution.">
<!-- 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="<?= APP_BASE_PATH ?>/css/all.min.css">
<!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- App CSS -->
<link rel="stylesheet" href="<?= APP_BASE_PATH ?>/css/style.css">
</head>
<body>
<div class="app-wrapper" id="appWrapper">
<!-- ═══════════════════════════════════════════════════════
TOPBAR / HEADER
═══════════════════════════════════════════════════════ -->
<header class="app-header">
<div class="app-brand">Design2Clothes</div>
<div class="d-flex align-center gap-3">
<!-- Step indicator -->
<div class="step-indicator" id="stepIndicator">
<span class="step-pip active" data-step="1" title="1. Upload">1</span>
<span class="step-sep"><i class="fa-solid fa-chevron-right"></i></span>
<span class="step-pip" data-step="2" title="2. Modelo">2</span>
<span class="step-sep"><i class="fa-solid fa-chevron-right"></i></span>
<span class="step-pip" data-step="3" title="3. Apply">3</span>
<span class="step-sep"><i class="fa-solid fa-chevron-right"></i></span>
<span class="step-pip" data-step="4" title="4. Export">4</span>
</div>
<button class="btn-d2c btn-orange btn-d2c--lg" id="btnNewProject">
<i class="fa-solid fa-plus"></i> New Project
</button>
</div>
</header>
<!-- ═══════════════════════════════════════════════════════
DASH ROW — Quick Access + Project Info
═══════════════════════════════════════════════════════ -->
<div class="dash-row">
<!-- Quick Access -->
<div class="panel" style="width:288px;flex-shrink:0;">
<div class="panel-title">Quick Access</div>
<button class="btn-d2c btn-purple btn-d2c--md btn-d2c--full" id="btnAssetLib">
<i class="fa-solid fa-images"></i> Asset Library
</button>
<button class="btn-d2c btn-dark btn-d2c--md btn-d2c--full" id="btnProjectsList">
<i class="fa-solid fa-list"></i> Projects List
</button>
</div>
<!-- Project Info -->
<div class="panel flex-1">
<div class="panel-label">Current Project</div>
<div class="d-flex align-center justify-between">
<div class="project-title" id="projectTitle"><?= htmlspecialchars($project['title']) ?></div>
<button class="btn-icon" id="btnEditTitle" title="Edit title">
<i class="fa-solid fa-pencil"></i>
</button>
</div>
<div class="project-desc" id="projectDesc"><?= htmlspecialchars($project['description']) ?></div>
</div>
</div><!-- /dash-row -->
<!-- ═══════════════════════════════════════════════════════
CANVAS SHELL — 3 Columns
═══════════════════════════════════════════════════════ -->
<div class="canvas-shell">
<!-- ────────────────────────────────────────────────────
LEFT PANEL — Assets + Inspector
──────────────────────────────────────────────────── -->
<aside class="canvas-left">
<div class="panel h-100">
<!-- ── STEP 1: Assets ── -->
<div class="panel-title d-flex align-center justify-between">
Assets
<span class="step-badge">Step 1</span>
</div>
<!-- Asset tabs -->
<div class="tabs-d2c" id="assetTabs">
<button class="tab-item active--purple" data-tab="tabUploads">Uploads</button>
<button class="tab-item" data-tab="tabPatterns">Patterns</button>
<button class="tab-item" data-tab="tabGraphics">Graphics</button>
</div>
<!-- Tab: Uploads -->
<div class="tab-pane active" id="tabUploads">
<!-- Drop zone -->
<div class="upload-zone" id="uploadZone">
<input type="file" id="fileInput" accept=".png,.jpg,.jpeg,.svg" multiple>
<i class="fa-solid fa-cloud-arrow-up"></i>
<p>Drop .png .jpg .svg here</p>
<button class="btn-d2c btn-dark btn-d2c--sm" type="button" id="btnBrowse">
<i class="fa-solid fa-folder-open"></i> Browse
</button>
</div>
<!-- Asset list -->
<div class="asset-list" id="assetList">
<?php foreach ($uploadedAssets as $asset): ?>
<div class="asset-item" data-url="<?= htmlspecialchars($asset['url']) ?>" data-name="<?= htmlspecialchars($asset['name']) ?>">
<div class="d-flex align-center gap-2">
<i class="fa-solid fa-file-image" style="font-size:15px;color:var(--clr-accent-purple)"></i>
<span class="asset-item__name"><?= htmlspecialchars($asset['name']) ?></span>
</div>
<span class="file-badge file-badge--<?= strtolower($asset['ext']) ?>"><?= $asset['ext'] ?></span>
</div>
<?php endforeach; ?>
</div>
<?php if (empty($uploadedAssets)): ?>
<div class="empty-hint" id="emptyHint">
<i class="fa-solid fa-inbox"></i>
<span>No assets yet</span>
</div>
<?php endif; ?>
</div>
<!-- Tab: Patterns (placeholder) -->
<div class="tab-pane" id="tabPatterns">
<div class="empty-hint"><i class="fa-solid fa-swatchbook"></i><span>Patterns coming soon</span></div>
</div>
<!-- Tab: Graphics (placeholder) -->
<div class="tab-pane" id="tabGraphics">
<div class="empty-hint"><i class="fa-solid fa-pen-ruler"></i><span>Graphics coming soon</span></div>
</div>
<div class="divider-d2c"></div>
<!-- ── STEP 2: Inspector ── -->
<div class="panel-title d-flex align-center justify-between">
Inspector
<span class="step-badge">Step 2</span>
</div>
<!-- Model Controls -->
<div class="subpanel">
<div class="panel-title--sm">Model Controls</div>
<!-- Custom / Predefined tabs -->
<div class="tabs-d2c" id="modelTabs">
<button class="tab-item active--purple" data-tab="tabCustom">Custom</button>
<button class="tab-item" data-tab="tabPredefined">Predefined</button>
</div>
<!-- Custom mode -->
<div class="tab-pane active" id="tabCustom">
<div class="form-group">
<label class="form-label-d2c">Model Prompt</label>
<textarea class="field-d2c textarea-d2c" id="modelPrompt" rows="2"
placeholder="editorial female model, hands in pockets, studio light..."></textarea>
</div>
<div class="form-group">
<label class="form-label-d2c">Pose</label>
<select class="field-d2c select-d2c" id="modelPose">
<option value="front">Front</option>
<option value="threequarter">3/4 View</option>
<option value="side">Side</option>
<option value="back">Back</option>
</select>
</div>
</div>
<!-- Predefined mode -->
<div class="tab-pane" id="tabPredefined">
<div class="predefined-grid" id="predefinedGrid">
<?php foreach ($predefinedModels as $m): ?>
<div class="predefined-item" data-model="<?= $m['id'] ?>">
<i class="fa-solid <?= $m['icon'] ?>"></i>
<span><?= $m['label'] ?></span>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<!-- Garment Controls -->
<div class="subpanel">
<div class="panel-title--sm">Garment Controls</div>
<div class="form-row">
<span class="form-row__label">Type</span>
<select class="field-d2c select-d2c" id="garmentType" style="height:28px;font-size:11px;padding:0 24px 0 8px;flex:1;margin-left:8px;">
<option value="oversized_tee">Oversized Tee</option>
<option value="slim_fit">Slim Fit</option>
<option value="hoodie">Hoodie</option>
<option value="jacket">Jacket</option>
<option value="dress">Dress</option>
</select>
</div>
<div class="form-row">
<span class="form-row__label">Fabric</span>
<select class="field-d2c select-d2c" id="garmentFabric" style="height:28px;font-size:11px;padding:0 24px 0 8px;flex:1;margin-left:8px;">
<option value="cotton">Cotton</option>
<option value="jersey">Jersey</option>
<option value="heavyweight">Heavyweight</option>
<option value="linen">Linen</option>
<option value="denim">Denim</option>
</select>
</div>
<div class="form-row" style="justify-content:space-between;">
<span class="form-row__label">Base Colour</span>
<input type="color" id="garmentColor" value="#3A3A3A" class="color-input-d2c" title="Base colour">
</div>
</div>
<!-- STEP 2 — Generate button -->
<button class="btn-d2c btn-purple btn-d2c--md btn-d2c--full" id="btnGenerateModel">
<i class="fa-solid fa-wand-magic-sparkles"></i> Generate Model
</button>
<div class="divider-d2c"></div>
<!-- ── STEP 3: Artwork Controls ── -->
<div class="panel-title--sm d-flex align-center justify-between">
Artwork Controls
<span class="step-badge">Step 3</span>
</div>
<div class="subpanel">
<!-- Scale -->
<div class="form-group">
<div class="d-flex justify-between">
<label class="form-label-d2c mb-0">Scale</label>
<span class="form-label-d2c mb-0" id="scaleVal">85%</span>
</div>
<input type="range" class="range-d2c" id="artScale" min="10" max="200" value="85">
</div>
<!-- Rotation -->
<div class="form-group">
<div class="d-flex justify-between">
<label class="form-label-d2c mb-0">Rotation</label>
<span class="form-label-d2c mb-0" id="rotVal">0°</span>
</div>
<input type="range" class="range-d2c" id="artRotation" min="-180" max="180" value="0">
</div>
<!-- Opacity -->
<div class="form-group">
<div class="d-flex justify-between">
<label class="form-label-d2c mb-0">Opacity</label>
<span class="form-label-d2c mb-0" id="opaVal">82%</span>
</div>
<input type="range" class="range-d2c" id="artOpacity" min="0" max="100" value="82">
</div>
<!-- Blending -->
<div class="form-group">
<label class="form-label-d2c">Blending Mode</label>
<select class="field-d2c select-d2c" id="artBlending">
<option value="print">Print</option>
<option value="multiply">Multiply</option>
<option value="soft_light">Soft Light</option>
<option value="overlay">Overlay</option>
<option value="screen">Screen</option>
</select>
</div>
</div>
</div><!-- /panel left -->
</aside>
<!-- ────────────────────────────────────────────────────
CENTER PANEL — Design Canvas
──────────────────────────────────────────────────── -->
<main class="canvas-center">
<div class="panel panel--alt h-100">
<div class="d-flex align-center justify-between">
<div class="panel-title">Design Canvas</div>
<div class="d-flex gap-2">
<button class="btn-icon" id="btnZoomIn" title="Zoom in"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
<button class="btn-icon" id="btnZoomOut" title="Zoom out"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
<button class="btn-icon" id="btnZoomReset" title="Reset zoom"><i class="fa-solid fa-expand"></i></button>
</div>
</div>
<!-- Viewport -->
<div class="design-viewport" id="designViewport">
<!-- Empty state -->
<div class="viewport-empty" id="viewportEmpty">
<i class="fa-solid fa-shirt"></i>
<p>Generate a model to start designing</p>
<div class="viewport-steps">
<div class="vs-step active" id="vs1">
<span class="vs-num">1</span> Upload artwork
</div>
<i class="fa-solid fa-arrow-right vs-arrow"></i>
<div class="vs-step" id="vs2">
<span class="vs-num">2</span> Generate model
</div>
<i class="fa-solid fa-arrow-right vs-arrow"></i>
<div class="vs-step" id="vs3">
<span class="vs-num">3</span> Apply artwork
</div>
</div>
</div>
<!-- Canvas content (hidden until model generated) -->
<div class="viewport-content" id="viewportContent" style="display:none;">
<div class="canvas-layers" id="canvasLayers">
<!-- Model image layer -->
<img src="" alt="Generated model" class="layer-model" id="layerModel">
<!-- Artwork overlay layer -->
<img src="" alt="Artwork overlay" class="layer-artwork" id="layerArtwork">
</div>
<div class="viewport-label">AI Texture-Mapped Preview</div>
</div>
<!-- Loading overlay -->
<div class="viewport-loading" id="viewportLoading" style="display:none;">
<div class="spinner-d2c spinner-d2c--lg"></div>
<p id="loadingMsg">Generating model...</p>
<div class="progress-d2c" style="width:200px;margin-top:12px;">
<div class="progress-bar-d2c" id="loadingBar" style="width:0%"></div>
</div>
</div>
</div><!-- /viewport -->
<!-- Apply Artwork prompt + button (Step 3) -->
<div class="apply-prompt-wrap" id="applyPromptWrap">
<label class="form-label-d2c">
<span class="step-badge me-1">Step 3</span> Apply Artwork Prompt
<span class="text-muted-d ms-2" style="font-weight:400;font-size:10px;">(optional refinement)</span>
</label>
<div class="input-wrap">
<i class="fa-solid fa-comment-dots input-icon"></i>
<input type="text" class="field-d2c input-d2c" id="applyPromptInput"
placeholder="Make print placement sharper and aligned to chest...">
</div>
</div>
<div class="d-flex gap-2">
<button class="btn-d2c btn-orange btn-d2c--md flex-1" id="btnApplyArtwork" disabled>
<i class="fa-solid fa-wand-magic-sparkles"></i> Apply Artwork
</button>
<button class="btn-icon" id="btnUndoApply" title="Undo last apply" disabled>
<i class="fa-solid fa-rotate-left"></i>
</button>
</div>
</div><!-- /panel center -->
</main>
<!-- ────────────────────────────────────────────────────
RIGHT PANEL — Export (Step 4)
──────────────────────────────────────────────────── -->
<aside class="canvas-right">
<div class="panel h-100">
<div class="panel-title d-flex align-center justify-between">
Export
<span class="step-badge">Step 4</span>
</div>
<!-- Result preview thumbnail -->
<div class="export-thumb" id="exportThumb">
<i class="fa-solid fa-image"></i>
<span>Result preview</span>
</div>
<div class="panel-label">Summary</div>
<div class="export-meta" id="exportMeta">
<div class="export-meta-row">
<span><i class="fa-solid fa-shirt"></i> Type</span>
<span id="metaType">—</span>
</div>
<div class="export-meta-row">
<span><i class="fa-solid fa-layer-group"></i> Asset</span>
<span id="metaAsset">—</span>
</div>
<div class="export-meta-row">
<span><i class="fa-solid fa-sliders"></i> Blending</span>
<span id="metaBlending">—</span>
</div>
<div class="export-meta-row">
<span><i class="fa-solid fa-rotate"></i> Scale / Rot</span>
<span id="metaScaleRot">—</span>
</div>
</div>
<div class="divider-d2c"></div>
<div class="panel-label">Resolution</div>
<div class="resolution-list" id="resolutionList">
<label class="res-option">
<input type="radio" name="exportRes" value="2k"> <span>2K PNG <small>2048×2048</small></span>
</label>
<label class="res-option">
<input type="radio" name="exportRes" value="4k" checked> <span>4K PNG <small>4096×4096</small></span>
</label>
<label class="res-option">
<input type="radio" name="exportRes" value="instagram"> <span>Instagram <small>1080×1350</small></span>
</label>
<label class="res-option">
<input type="radio" name="exportRes" value="story"> <span>Story <small>1080×1920</small></span>
</label>
<label class="res-option">
<input type="radio" name="exportRes" value="original"> <span>Original <small>as generated</small></span>
</label>
</div>
<div class="divider-d2c"></div>
<div class="panel-label">Format</div>
<div class="format-row">
<label class="res-option">
<input type="radio" name="exportFmt" value="png" checked> <span>PNG</span>
</label>
<label class="res-option">
<input type="radio" name="exportFmt" value="jpg"> <span>JPG</span>
</label>
<label class="res-option">
<input type="radio" name="exportFmt" value="webp"> <span>WebP</span>
</label>
</div>
<div class="divider-d2c"></div>
<button class="btn-d2c btn-orange btn-d2c--md btn-d2c--full" id="btnExport" disabled>
<i class="fa-solid fa-arrow-up-from-bracket"></i> Export
</button>
<div class="export-status" id="exportStatus" style="display:none;"></div>
</div><!-- /panel right -->
</aside>
</div><!-- /canvas-shell -->
<!-- ═══════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════ -->
<footer class="app-footer">
<span>Design2Clothes © <?= date('Y') ?> — AI Fashion Designer</span>
<span class="d-flex align-center gap-3">
<span id="apiStatus" class="api-status api-status--idle">
<i class="fa-solid fa-circle"></i> Idle
</span>
<a href="ui-kit.html" target="_blank" class="text-dim">
<i class="fa-solid fa-palette"></i> UI Kit
</a>
</span>
</footer>
</div><!-- /app-wrapper -->
<!-- ═══════════════════════════════════════════════════════
MODALS
═══════════════════════════════════════════════════════ -->
<!-- New Project Modal -->
<div class="modal-overlay" id="modalNewProject">
<div class="modal-d2c">
<div class="modal-header">
<div class="modal-title"><i class="fa-solid fa-plus-circle text-orange me-2"></i>New Project</div>
<button class="btn-icon" data-close-modal="modalNewProject"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="form-group mb-3">
<label class="form-label-d2c">Project Name</label>
<input type="text" class="field-d2c input-d2c" id="newProjectTitle" placeholder="ThreadVision FW27...">
</div>
<div class="form-group mb-3">
<label class="form-label-d2c">Brief Description</label>
<textarea class="field-d2c textarea-d2c" id="newProjectDesc" rows="3"
placeholder="Describe the concept and target garments..."></textarea>
</div>
<div class="form-group">
<label class="form-label-d2c">Base Garment Type</label>
<select class="field-d2c select-d2c" id="newProjectType">
<option value="oversized_tee">Oversized Tee</option>
<option value="hoodie">Hoodie</option>
<option value="jacket">Jacket</option>
<option value="dress">Dress</option>
</select>
</div>
<div class="modal-footer">
<button class="btn-d2c btn-ghost btn-d2c--sm" data-close-modal="modalNewProject">Cancel</button>
<button class="btn-d2c btn-orange btn-d2c--sm" id="btnCreateProject">
<i class="fa-solid fa-plus"></i> Create Project
</button>
</div>
</div>
</div>
<!-- Projects List Modal -->
<div class="modal-overlay" id="modalProjectsList">
<div class="modal-d2c" style="max-width:680px;">
<div class="modal-header">
<div class="modal-title"><i class="fa-solid fa-list text-purple me-2"></i>Projects</div>
<button class="btn-icon" data-close-modal="modalProjectsList"><i class="fa-solid fa-xmark"></i></button>
</div>
<div id="projectsListContent">
<div class="empty-hint"><i class="fa-solid fa-folder-open"></i><span>No projects yet</span></div>
</div>
<div class="modal-footer">
<button class="btn-d2c btn-orange btn-d2c--sm" id="btnNewFromList">
<i class="fa-solid fa-plus"></i> New Project
</button>
</div>
</div>
</div>
<!-- Toast container -->
<div class="toast-container" id="toastContainer"></div>
<!-- ═══════════════════════════════════════════════════════
SCRIPTS
═══════════════════════════════════════════════════════ -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// Pass PHP constants to JS
window.D2C = {
basePath: '<?= APP_BASE_PATH ?>',
baseUrl: '<?= APP_BASE_URL ?>',
debug: <?= DEBUG_MODE ? 'true' : 'false' ?>,
sessionId: '<?= session_id() ?>'
};
</script>
<script src="<?= APP_BASE_PATH ?>/js/app.js"></script>
</body>
</html>
