Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OLIM | Advanced Clothing Mockup Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #000000; | |
| --secondary: #ffffff; | |
| --accent: #ff003c; | |
| --accent-light: rgba(255, 0, 60, 0.1); | |
| } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #f5f5f5; | |
| color: var(--primary); | |
| overflow-x: hidden; | |
| } | |
| .font-archivo { | |
| font-family: 'Archivo Black', sans-serif; | |
| } | |
| .text-accent { | |
| color: var(--accent); | |
| } | |
| .bg-accent { | |
| background-color: var(--accent); | |
| } | |
| .bg-accent-light { | |
| background-color: var(--accent-light); | |
| } | |
| .border-accent { | |
| border-color: var(--accent); | |
| } | |
| .canvas-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| #clothingCanvas { | |
| background-color: white; | |
| display: block; | |
| } | |
| .tool-btn { | |
| transition: all 0.2s ease; | |
| border-radius: 8px; | |
| } | |
| .tool-btn.active { | |
| background-color: var(--accent); | |
| color: white; | |
| } | |
| .tool-btn:hover:not(.active) { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| } | |
| .color-option { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| border: 2px solid transparent; | |
| } | |
| .color-option:hover, .color-option.selected { | |
| transform: scale(1.1); | |
| border-color: var(--primary); | |
| } | |
| .design-preview { | |
| width: 80px; | |
| height: 80px; | |
| border: 2px solid #ddd; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .design-preview:hover { | |
| border-color: var(--accent); | |
| transform: scale(1.05); | |
| } | |
| .dropzone { | |
| border: 2px dashed #ccc; | |
| border-radius: 8px; | |
| padding: 25px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .dropzone:hover, .dropzone.dragover { | |
| border-color: var(--accent); | |
| background-color: var(--accent-light); | |
| } | |
| .customize-option { | |
| border-radius: 8px; | |
| transition: all 0.2s; | |
| cursor: pointer; | |
| } | |
| .customize-option:hover { | |
| background-color: var(--accent-light); | |
| } | |
| .customize-option.active { | |
| background-color: var(--accent-light); | |
| border-left: 3px solid var(--accent); | |
| } | |
| .slider { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 6px; | |
| border-radius: 5px; | |
| background: #ddd; | |
| outline: none; | |
| } | |
| .slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| cursor: pointer; | |
| } | |
| .slider::-moz-range-thumb { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| cursor: pointer; | |
| } | |
| .element-item { | |
| transition: all 0.2s; | |
| border-radius: 8px; | |
| } | |
| .element-item:hover { | |
| background-color: var(--accent-light); | |
| } | |
| .element-item.selected { | |
| background-color: var(--accent-light); | |
| border-left: 3px solid var(--accent); | |
| } | |
| .tab-btn { | |
| transition: all 0.2s; | |
| border-bottom: 3px solid transparent; | |
| } | |
| .tab-btn.active { | |
| border-bottom: 3px solid var(--accent); | |
| font-weight: 600; | |
| } | |
| .tab-btn:hover:not(.active) { | |
| border-bottom: 3px solid rgba(255, 0, 60, 0.3); | |
| } | |
| .modal { | |
| transition: opacity 0.2s, visibility 0.2s; | |
| } | |
| .modal-content { | |
| transform: translateY(20px); | |
| transition: transform 0.3s; | |
| } | |
| .modal.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal.active .modal-content { | |
| transform: translateY(0); | |
| } | |
| .filter-option { | |
| transition: all 0.2s; | |
| border-radius: 20px; | |
| } | |
| .filter-option:hover { | |
| background-color: var(--accent-light); | |
| } | |
| .filter-option.active { | |
| background-color: var(--accent); | |
| color: white; | |
| } | |
| .gradient-preview { | |
| width: 100%; | |
| height: 40px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| border: 1px solid #ddd; | |
| } | |
| .pattern-preview { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| border: 1px solid #ddd; | |
| } | |
| .texture-preview { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| border: 1px solid #ddd; | |
| } | |
| .fabric-preview { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| border: 1px solid #ddd; | |
| } | |
| .mockup-preview { | |
| transition: all 0.2s; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .mockup-preview:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .loading-spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Navigation --> | |
| <nav class="bg-black text-white py-4 px-6 flex justify-between items-center sticky top-0 z-50"> | |
| <a href="#" class="font-archivo text-2xl flex items-center"> | |
| <i class="fas fa-tshirt mr-2"></i> | |
| OLIM MOCKUP | |
| </a> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-accent transition">Home</a> | |
| <a href="#generator" class="hover:text-accent transition">Generator</a> | |
| <a href="#designs" class="hover:text-accent transition">My Designs</a> | |
| <a href="#templates" class="hover:text-accent transition">Templates</a> | |
| <a href="#tutorial" class="hover:text-accent transition">Learn</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="loginBtn" class="px-4 py-2 rounded font-bold hover:bg-white hover:text-black transition">Login</button> | |
| <button id="signupBtn" class="bg-accent px-4 py-2 rounded font-bold hover:bg-opacity-90 transition">Sign Up</button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-black to-gray-900 text-white py-20 px-6"> | |
| <div class="container mx-auto max-w-6xl text-center"> | |
| <h1 class="font-archivo text-4xl md:text-6xl mb-6">Professional Clothing Mockups Made Simple</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Design, customize, and visualize your apparel with our powerful yet easy-to-use mockup generator. Add zippers, pockets, and realistic textures with just a few clicks.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#generator" class="bg-accent px-8 py-4 font-bold rounded-lg hover:bg-opacity-90 transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-play"></i> Start Designing | |
| </a> | |
| <a href="#tutorial" class="bg-white text-black px-8 py-4 font-bold rounded-lg hover:bg-opacity-90 transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-video"></i> Watch Tutorial | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Grid --> | |
| <section class="py-16 px-6 bg-white"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <h2 class="font-archivo text-3xl mb-12 text-center">CREATE PROFESSIONAL MOCKUPS IN MINUTES</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="bg-accent text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-sliders-h text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Advanced Customization</h3> | |
| <p class="text-gray-700">Add zippers, pockets, buttons and other clothing details with our specialized tools.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="bg-accent text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-cloud-upload-alt text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Upload Your Designs</h3> | |
| <p class="text-gray-700">Import your own artwork, logos, or patterns to apply to any clothing item.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="bg-accent text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-magic text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Realistic Rendering</h3> | |
| <p class="text-gray-700">Generate photorealistic mockups with shadows, folds, and fabric textures.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mockup Generator Section --> | |
| <section id="generator" class="py-16 px-6 bg-gray-50"> | |
| <div class="container mx-auto max-w-7xl"> | |
| <h2 class="font-archivo text-3xl mb-12 text-center">MOCKUP GENERATOR</h2> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Column - Controls --> | |
| <div class="lg:w-1/4 bg-white p-6 rounded-xl shadow-sm"> | |
| <!-- Tabs --> | |
| <div class="flex border-b mb-6"> | |
| <button class="tab-btn active px-4 py-2" data-tab="design">Design</button> | |
| <button class="tab-btn px-4 py-2" data-tab="customize">Customize</button> | |
| <button class="tab-btn px-4 py-2" data-tab="effects">Effects</button> | |
| </div> | |
| <!-- Design Tab Content --> | |
| <div id="designTab" class="tab-content"> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4 flex justify-between items-center"> | |
| <span>PRODUCT TYPE</span> | |
| <button class="text-sm text-accent font-medium hover:underline">See all</button> | |
| </h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button data-product="tshirt" class="product-btn bg-black text-white py-3 rounded-lg font-bold flex items-center justify-center gap-2"> | |
| <i class="fas fa-tshirt"></i> T-Shirt | |
| </button> | |
| <button data-product="hoodie" class="product-btn bg-gray-100 py-3 rounded-lg font-bold flex items-center justify-center gap-2"> | |
| <i class="fas fa-hoodie"></i> Hoodie | |
| </button> | |
| <button data-product="tank" class="product-btn bg-gray-100 py-3 rounded-lg font-bold flex items-center justify-center gap-2"> | |
| <i class="fas fa-vest"></i> Tank Top | |
| </button> | |
| <button data-product="longsleeve" class="product-btn bg-gray-100 py-3 rounded-lg font-bold flex items-center justify-center gap-2"> | |
| <i class="fas fa-tshirt"></i> Long Sleeve | |
| </button> | |
| <button data-product="polo" class="product-btn bg-gray-100 py-3 rounded-lg font-bold flex items-center justify-center gap-2"> | |
| <i class="fas fa-tshirt"></i> Polo | |
| </button> | |
| <button data-product="jacket" class="product-btn bg-gray-100 py-3 rounded-lg font-bold flex items-center justify-center gap-2"> | |
| <i class="fas fa-jacket"></i> Jacket | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">COLOR</h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <div data-color="#000000" class="color-option bg-black selected" title="Black"></div> | |
| <div data-color="#FFFFFF" class="color-option bg-white border border-gray-300" title="White"></div> | |
| <div data-color="#C0C0C0" class="color-option bg-gray-300" title="Silver"></div> | |
| <div data-color="#808080" class="color-option bg-gray-500" title="Gray"></div> | |
| <div data-color="#FF0000" class="color-option bg-red-600" title="Red"></div> | |
| <div data-color="#0000FF" class="color-option bg-blue-600" title="Blue"></div> | |
| <div data-color="#008000" class="color-option bg-green-600" title="Green"></div> | |
| <div data-color="#FFFF00" class="color-option bg-yellow-400" title="Yellow"></div> | |
| <div data-color="#FFA500" class="color-option bg-orange-500" title="Orange"></div> | |
| <div data-color="#800080" class="color-option bg-purple-600" title="Purple"></div> | |
| <div data-color="#FFC0CB" class="color-option bg-pink-300" title="Pink"></div> | |
| <div data-color="#A52A2A" class="color-option bg-brown-600" title="Brown"></div> | |
| </div> | |
| <button id="customColorBtn" class="mt-3 text-sm text-accent font-medium hover:underline flex items-center gap-1"> | |
| <i class="fas fa-plus"></i> Custom Color | |
| </button> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">TOOLS</h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button data-tool="text" class="tool-btn bg-gray-100 py-3 rounded-lg font-bold active"> | |
| <i class="fas fa-text-height"></i> Text | |
| </button> | |
| <button data-tool="image" class="tool-btn bg-gray-100 py-3 rounded-lg font-bold"> | |
| <i class="fas fa-image"></i> Image | |
| </button> | |
| <button data-tool="draw" class="tool-btn bg-gray-100 py-3 rounded-lg font-bold"> | |
| <i class="fas fa-pencil"></i> Draw | |
| </button> | |
| <button data-tool="shape" class="tool-btn bg-gray-100 py-3 rounded-lg font-bold"> | |
| <i class="fas fa-shapes"></i> Shape | |
| </button> | |
| <button data-tool="move" class="tool-btn bg-gray-100 py-3 rounded-lg font-bold"> | |
| <i class="fas fa-arrows-alt"></i> Move | |
| </button> | |
| <button data-tool="delete" class="tool-btn bg-gray-100 py-3 rounded-lg font-bold"> | |
| <i class="fas fa-trash"></i> Delete | |
| </button> | |
| <button data-tool="zip" class="tool-btn bg-gray-100 py-3 rounded-lg font-bold"> | |
| <i class="fas fa-zipper"></i> Zipper | |
| </button> | |
| <button data-tool="pocket" class="tool-btn bg-gray-100 py-3 rounded-lg font-bold"> | |
| <i class="fas fa-parking"></i> Pocket | |
| </button> | |
| <button data-tool="button" class="tool-btn bg-gray-100 py-3 rounded-lg font-bold"> | |
| <i class="fas fa-circle"></i> Button | |
| </button> | |
| </div> | |
| </div> | |
| <div id="textControls" class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">TEXT OPTIONS</h3> | |
| <input type="text" id="textInput" placeholder="Enter your text" class="w-full px-4 py-2 border border-gray-300 rounded-lg mb-3"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <select id="fontFamily" class="flex-grow px-3 py-2 border border-gray-300 rounded-lg"> | |
| <option value="Arial">Arial</option> | |
| <option value="Helvetica">Helvetica</option> | |
| <option value="Times New Roman">Times New Roman</option> | |
| <option value="Courier New">Courier New</option> | |
| <option value="Georgia">Georgia</option> | |
| <option value="Verdana">Verdana</option> | |
| <option value="Impact">Impact</option> | |
| <option value="Comic Sans MS">Comic Sans</option> | |
| <option value="'Archivo Black', sans-serif">Archivo Black</option> | |
| </select> | |
| <input type="color" id="textColor" value="#000000" class="w-10 h-10 cursor-pointer rounded-lg border border-gray-300"> | |
| </div> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="range" id="textSize" min="10" max="72" value="24" class="slider"> | |
| <span id="textSizeValue" class="text-sm font-bold">24px</span> | |
| </div> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <button id="boldBtn" class="tool-btn bg-gray-100 px-3 py-2 rounded-lg"> | |
| <i class="fas fa-bold"></i> | |
| </button> | |
| <button id="italicBtn" class="tool-btn bg-gray-100 px-3 py-2 rounded-lg"> | |
| <i class="fas fa-italic"></i> | |
| </button> | |
| <button id="underlineBtn" class="tool-btn bg-gray-100 px-3 py-2 rounded-lg"> | |
| <i class="fas fa-underline"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button id="alignLeftBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-align-left"></i> | |
| </button> | |
| <button id="alignCenterBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-align-center"></i> | |
| </button> | |
| <button id="alignRightBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-align-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="imageControls" class="mb-8 hidden"> | |
| <h3 class="font-bold text-lg mb-4">IMAGE OPTIONS</h3> | |
| <div id="dropzone" class="dropzone mb-4"> | |
| <i class="fas fa-cloud-upload-alt text-4xl mb-3 text-gray-400"></i> | |
| <p class="mb-2">Drag & drop your image here</p> | |
| <p class="text-sm text-gray-500">or click to browse</p> | |
| <input type="file" id="imageUpload" accept="image/*" class="hidden"> | |
| </div> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="range" id="imageOpacity" min="10" max="100" value="100" class="slider"> | |
| <span id="imageOpacityValue" class="text-sm font-bold">100%</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button id="flipHorizontalBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-arrows-alt-h"></i> Flip H | |
| </button> | |
| <button id="flipVerticalBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-arrows-alt-v"></i> Flip V | |
| </button> | |
| </div> | |
| </div> | |
| <div id="drawControls" class="mb-8 hidden"> | |
| <h3 class="font-bold text-lg mb-4">DRAWING TOOLS</h3> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="color" id="drawColor" value="#000000" class="w-10 h-10 cursor-pointer rounded-lg border border-gray-300"> | |
| <input type="range" id="brushSize" min="1" max="20" value="5" class="slider"> | |
| <span id="brushSizeValue" class="text-sm font-bold">5px</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button id="clearCanvasBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-eraser"></i> Clear | |
| </button> | |
| </div> | |
| </div> | |
| <div id="shapeControls" class="mb-8 hidden"> | |
| <h3 class="font-bold text-lg mb-4">SHAPES</h3> | |
| <div class="grid grid-cols-3 gap-3 mb-3"> | |
| <button data-shape="rectangle" class="tool-btn bg-gray-100 py-3 rounded-lg"> | |
| <i class="far fa-square"></i> | |
| </button> | |
| <button data-shape="circle" class="tool-btn bg-gray-100 py-3 rounded-lg"> | |
| <i class="far fa-circle"></i> | |
| </button> | |
| <button data-shape="triangle" class="tool-btn bg-gray-100 py-3 rounded-lg"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="color" id="shapeColor" value="#000000" class="w-10 h-10 cursor-pointer rounded-lg border border-gray-300"> | |
| <input type="range" id="shapeOpacity" min="10" max="100" value="100" class="slider"> | |
| <span id="shapeOpacityValue" class="text-sm font-bold">100%</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <button id="shapeFillBtn" class="tool-btn bg-gray-100 px-3 py-2 rounded-lg"> | |
| <i class="fas fa-fill"></i> Fill | |
| </button> | |
| <button id="shapeStrokeBtn" class="tool-btn bg-gray-100 px-3 py-2 rounded-lg"> | |
| <i class="fas fa-border-style"></i> Stroke | |
| </button> | |
| </div> | |
| </div> | |
| <div id="zipControls" class="mb-8 hidden"> | |
| <h3 class="font-bold text-lg mb-4">ZIPPER OPTIONS</h3> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="color" id="zipColor" value="#000000" class="w-10 h-10 cursor-pointer rounded-lg border border-gray-300"> | |
| <select id="zipType" class="flex-grow px-3 py-2 border border-gray-300 rounded-lg"> | |
| <option value="standard">Standard</option> | |
| <option value="hidden">Hidden</option> | |
| <option value="exposed">Exposed</option> | |
| <option value="double">Double</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="range" id="zipLength" min="50" max="200" value="100" class="slider"> | |
| <span id="zipLengthValue" class="text-sm font-bold">100px</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button id="zipHorizontalBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-arrows-alt-h"></i> Horizontal | |
| </button> | |
| <button id="zipVerticalBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-arrows-alt-v"></i> Vertical | |
| </button> | |
| </div> | |
| </div> | |
| <div id="pocketControls" class="mb-8 hidden"> | |
| <h3 class="font-bold text-lg mb-4">POCKET OPTIONS</h3> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="color" id="pocketColor" value="#000000" class="w-10 h-10 cursor-pointer rounded-lg border border-gray-300"> | |
| <select id="pocketType" class="flex-grow px-3 py-2 border border-gray-300 rounded-lg"> | |
| <option value="chest">Chest</option> | |
| <option value="side">Side</option> | |
| <option value="kangaroo">Kangaroo</option> | |
| <option value="welt">Welt</option> | |
| <option value="patch">Patch</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="range" id="pocketSize" min="30" max="150" value="80" class="slider"> | |
| <span id="pocketSizeValue" class="text-sm font-bold">80px</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button id="pocketLeftBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-arrow-left"></i> Left | |
| </button> | |
| <button id="pocketRightBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-arrow-right"></i> Right | |
| </button> | |
| </div> | |
| </div> | |
| <div id="buttonControls" class="mb-8 hidden"> | |
| <h3 class="font-bold text-lg mb-4">BUTTON OPTIONS</h3> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="color" id="buttonColor" value="#000000" class="w-10 h-10 cursor-pointer rounded-lg border border-gray-300"> | |
| <select id="buttonType" class="flex-grow px-3 py-2 border border-gray-300 rounded-lg"> | |
| <option value="round">Round</option> | |
| <option value="square">Square</option> | |
| <option value="toggle">Toggle</option> | |
| <option value="snap">Snap</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="range" id="buttonSize" min="10" max="40" value="20" class="slider"> | |
| <span id="buttonSizeValue" class="text-sm font-bold">20px</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button id="addButtonBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-plus"></i> Add Button | |
| </button> | |
| <button id="addButtonRowBtn" class="tool-btn bg-gray-100 py-2 rounded-lg"> | |
| <i class="fas fa-grip-lines"></i> Add Row | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Customize Tab Content --> | |
| <div id="customizeTab" class="tab-content hidden"> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">FABRIC TYPE</h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button data-fabric="cotton" class="filter-option bg-gray-100 py-2 rounded-lg active"> | |
| Cotton | |
| </button> | |
| <button data-fabric="denim" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Denim | |
| </button> | |
| <button data-fabric="knit" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Knit | |
| </button> | |
| <button data-fabric="polyester" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Polyester | |
| </button> | |
| <button data-fabric="silk" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Silk | |
| </button> | |
| <button data-fabric="wool" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Wool | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">FABRIC TEXTURE</h3> | |
| <div class="flex gap-3 overflow-x-auto pb-2"> | |
| <div class="texture-preview bg-gray-200" data-texture="none" style="background-image: url('https://via.placeholder.com/50x50');"></div> | |
| <div class="texture-preview" data-texture="weave" style="background-image: url('https://via.placeholder.com/50x50/cccccc/333333?text=Weave');"></div> | |
| <div class="texture-preview" data-texture="knit" style="background-image: url('https://via.placeholder.com/50x50/cccccc/333333?text=Knit');"></div> | |
| <div class="texture-preview" data-texture="denim" style="background-image: url('https://via.placeholder.com/50x50/cccccc/333333?text=Denim');"></div> | |
| <div class="texture-preview" data-texture="corduroy" style="background-image: url('https://via.placeholder.com/50x50/cccccc/333333?text=Cord');"></div> | |
| <div class="texture-preview" data-texture="canvas" style="background-image: url('https://via.placeholder.com/50x50/cccccc/333333?text=Canvas');"></div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">PATTERNS</h3> | |
| <div class="flex gap-3 overflow-x-auto pb-2"> | |
| <div class="pattern-preview bg-gray-200" data-pattern="none"> | |
| <i class="fas fa-ban text-gray-400"></i> | |
| </div> | |
| <div class="pattern-preview" data-pattern="stripes" style="background-image: url('https://via.placeholder.com/50x50/cccccc/333333?text=Stripes');"></div> | |
| <div class="pattern-preview" data-pattern="check" style="background-image: url('https://via.placeholder.com/50x50/cccccc/333333?text=Check');"></div> | |
| <div class="pattern-preview" data-pattern="dots" style="background-image: url('https://via.placeholder.com/50x50/cccccc/333333?text=Dots');"></div> | |
| <div class="pattern-preview" data-pattern="camo" style="background-image: url('https://via.placeholder.com/50x50/cccccc/333333?text=Camo');"></div> | |
| <div class="pattern-preview" data-pattern="floral" style="background-image: url('https://via.placeholder.com/50x50/cccccc/333333?text=Floral');"></div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">GRADIENTS</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="gradient-preview" data-gradient="none" style="background: #fff; display: flex; align-items: center; justify-content: center;"> | |
| <i class="fas fa-ban text-gray-400"></i> | |
| </div> | |
| <div class="gradient-preview" data-gradient="black-white" style="background: linear-gradient(to right, #000, #fff);"></div> | |
| <div class="gradient-preview" data-gradient="red-yellow" style="background: linear-gradient(to right, #ff0000, #ffff00);"></div> | |
| <div class="gradient-preview" data-gradient="blue-purple" style="background: linear-gradient(to right, #0000ff, #800080);"></div> | |
| <div class="gradient-preview" data-gradient="green-blue" style="background: linear-gradient(to right, #008000, #0000ff);"></div> | |
| <div class="gradient-preview" data-gradient="pink-orange" style="background: linear-gradient(to right, #ffc0cb, #ffa500);"></div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">FOLDS & WRINKLES</h3> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="range" id="foldsIntensity" min="0" max="100" value="50" class="slider"> | |
| <span id="foldsIntensityValue" class="text-sm font-bold">50%</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button data-fold="none" class="filter-option bg-gray-100 py-2 rounded-lg active"> | |
| None | |
| </button> | |
| <button data-fold="light" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Light | |
| </button> | |
| <button data-fold="heavy" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Heavy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Effects Tab Content --> | |
| <div id="effectsTab" class="tab-content hidden"> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">SHADOWS</h3> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="range" id="shadowIntensity" min="0" max="100" value="30" class="slider"> | |
| <span id="shadowIntensityValue" class="text-sm font-bold">30%</span> | |
| </div> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="range" id="shadowAngle" min="0" max="360" value="45" class="slider"> | |
| <span id="shadowAngleValue" class="text-sm font-bold">45°</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button data-shadow="none" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| None | |
| </button> | |
| <button data-shadow="drop" class="filter-option bg-gray-100 py-2 rounded-lg active"> | |
| Drop | |
| </button> | |
| <button data-shadow="inner" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Inner | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">LIGHTING</h3> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="range" id="lightingIntensity" min="0" max="100" value="70" class="slider"> | |
| <span id="lightingIntensityValue" class="text-sm font-bold">70%</span> | |
| </div> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <input type="range" id="lightingAngle" min="0" max="360" value="135" class="slider"> | |
| <span id="lightingAngleValue" class="text-sm font-bold">135°</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button data-lighting="soft" class="filter-option bg-gray-100 py-2 rounded-lg active"> | |
| Soft | |
| </button> | |
| <button data-lighting="hard" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Hard | |
| </button> | |
| <button data-lighting="studio" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Studio | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">EFFECTS</h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button data-effect="none" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| None | |
| </button> | |
| <button data-effect="vintage" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Vintage | |
| </button> | |
| <button data-effect="grunge" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Grunge | |
| </button> | |
| <button data-effect="distressed" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Distressed | |
| </button> | |
| <button data-effect="bleach" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Bleach | |
| </button> | |
| <button data-effect="faded" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Faded | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-bold text-lg mb-4">BACKGROUND</h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button data-bg="transparent" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Transparent | |
| </button> | |
| <button data-bg="white" class="filter-option bg-gray-100 py-2 rounded-lg active"> | |
| White | |
| </button> | |
| <button data-bg="gray" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Gray | |
| </button> | |
| <button data-bg="black" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Black | |
| </button> | |
| <button data-bg="custom" class="filter-option bg-gray-100 py-2 rounded-lg"> | |
| Custom | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Column - Canvas --> | |
| <div class="lg:w-2/4"> | |
| <div class="canvas-container"> | |
| <canvas id="clothingCanvas" width="600" height="700"></canvas> | |
| <div id="canvasOverlay" class="absolute inset-0 pointer-events-none"></div> | |
| </div> | |
| <div class="mt-6 flex justify-center gap-4"> | |
| <button id="saveDesignBtn" class="bg-accent text-white px-6 py-3 rounded-lg font-bold hover:bg-opacity-90 transition flex items-center gap-2"> | |
| <i class="fas fa-save"></i> Save Design | |
| </button> | |
| <button id="exportBtn" class="bg-black text-white px-6 py-3 rounded-lg font-bold hover:bg-opacity-90 transition flex items-center gap-2"> | |
| <i class="fas fa-download"></i> Export | |
| </button> | |
| <button id="generateRealisticBtn" class="bg-white border border-gray-300 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition flex items-center gap-2"> | |
| <i class="fas fa-magic"></i> Realistic | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right Column - Design Elements & Layers --> | |
| <div class="lg:w-1/4 bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex border-b mb-6"> | |
| <button class="tab-btn active px-4 py-2" data-panel="elements">Elements</button> | |
| <button class="tab-btn px-4 py-2" data-panel="layers">Layers</button> | |
| <button class="tab-btn px-4 py-2" data-panel="templates">Templates</button> | |
| </div> | |
| <!-- Elements Panel --> | |
| <div id="elementsPanel" class="tab-content"> | |
| <h3 class="font-bold text-lg mb-4">DESIGN ELEMENTS</h3> | |
| <div id="designElements" class="space-y-3 max-h-[400px] overflow-y-auto"> | |
| <p class="text-gray-500 text-center py-10">Add elements to your design to see them listed here</p> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="font-bold text-lg mb-4">QUICK DESIGNS</h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <div class="design-preview bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-plus text-gray-400"></i> | |
| </div> | |
| <div class="design-preview" style="background-color: #000; color: #fff; display: flex; align-items: center; justify-content: center;"> | |
| <span style="font-weight: bold; font-size: 12px;">OLIM</span> | |
| </div> | |
| <div class="design-preview" style="background-color: #fff; display: flex; align-items: center; justify-content: center;"> | |
| <span style="font-weight: bold; font-size: 12px; color: #ff003c;">STREET</span> | |
| </div> | |
| <div class="design-preview" style="background-color: #ff003c; display: flex; align-items: center; justify-content: center;"> | |
| <span style="font-weight: bold; font-size: 12px; color: #fff;">WEAR</span> | |
| </div> | |
| <div class="design-preview bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-plus text-gray-400"></i> | |
| </div> | |
| <div class="design-preview bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-plus text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Layers Panel --> | |
| <div id="layersPanel" class="tab-content hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">LAYERS</h3> | |
| <button id="addLayerBtn" class="text-accent text-sm font-medium hover:underline"> | |
| <i class="fas fa-plus"></i> New | |
| </button> | |
| </div> | |
| <div id="layersList" class="space-y-2 max-h-[500px] overflow-y-auto"> | |
| <div class="bg-gray-100 p-3 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center gap-2"> | |
| <i class="fas fa-tshirt text-gray-500"></i> | |
| <span class="text-sm">Base Layer</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i class="fas fa-eye text-gray-500"></i> | |
| <i class="fas fa-lock text-gray-300"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Templates Panel --> | |
| <div id="templatesPanel" class="tab-content hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">TEMPLATES</h3> | |
| <button id="uploadTemplateBtn" class="text-accent text-sm font-medium hover:underline"> | |
| <i class="fas fa-upload"></i> Upload | |
| </button> | |
| </div> | |
| <div class="space-y-3 max-h-[500px] overflow-y-auto"> | |
| <div class="mockup-preview bg-gray-100 p-3"> | |
| <div class="aspect-square bg-gray-200 mb-2"></div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm font-medium">Basic Tee</span> | |
| <button class="text-gray-500 hover:text-accent"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mockup-preview bg-gray-100 p-3"> | |
| <div class="aspect-square bg-gray-200 mb-2"></div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm font-medium">Hoodie</span> | |
| <button class="text-gray-500 hover:text-accent"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mockup-preview bg-gray-100 p-3"> | |
| <div class="aspect-square bg-gray-200 mb-2"></div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm font-medium">Denim Jacket</span> | |
| <button class="text-gray-500 hover:text-accent"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mockup-preview bg-gray-100 p-3"> | |
| <div class="aspect-square bg-gray-200 mb-2"></div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm font-medium">Polo Shirt</span> | |
| <button class="text-gray-500 hover:text-accent"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Templates Section --> | |
| <section id="templates" class="py-16 px-6 bg-white"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <h2 class="font-archivo text-3xl mb-12 text-center">PROFESSIONAL TEMPLATES</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Template 1 --> | |
| <div class="mockup-preview bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition"> | |
| <div class="aspect-square bg-gray-200 mb-3 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/300x300?text=T-Shirt+Template" alt="Template 1" class="w-full h-full object-contain"> | |
| </div> | |
| <h3 class="font-bold">Basic T-Shirt</h3> | |
| <p class="text-sm text-gray-600 mb-3">Front and back views with color options</p> | |
| <div class="flex justify-between"> | |
| <button class="text-sm bg-accent text-white px-3 py-1 rounded font-bold hover:bg-opacity-90 transition">Use Template</button> | |
| <button class="text-sm text-gray-600 hover:text-black flex items-center gap-1"> | |
| <i class="fas fa-eye"></i> Preview | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Template 2 --> | |
| <div class="mockup-preview bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition"> | |
| <div class="aspect-square bg-gray-200 mb-3 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/300x300?text=Hoodie+Template" alt="Template 2" class="w-full h-full object-contain"> | |
| </div> | |
| <h3 class="font-bold">Zip Hoodie</h3> | |
| <p class="text-sm text-gray-600 mb-3">With functional zipper and pocket</p> | |
| <div class="flex justify-between"> | |
| <button class="text-sm bg-accent text-white px-3 py-1 rounded font-bold hover:bg-opacity-90 transition">Use Template</button> | |
| <button class="text-sm text-gray-600 hover:text-black flex items-center gap-1"> | |
| <i class="fas fa-eye"></i> Preview | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Template 3 --> | |
| <div class="mockup-preview bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition"> | |
| <div class="aspect-square bg-gray-200 mb-3 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/300x300?text=Jacket+Template" alt="Template 3" class="w-full h-full object-contain"> | |
| </div> | |
| <h3 class="font-bold">Denim Jacket</h3> | |
| <p class="text-sm text-gray-600 mb-3">With realistic denim texture</p> | |
| <div class="flex justify-between"> | |
| <button class="text-sm bg-accent text-white px-3 py-1 rounded font-bold hover:bg-opacity-90 transition">Use Template</button> | |
| <button class="text-sm text-gray-600 hover:text-black flex items-center gap-1"> | |
| <i class="fas fa-eye"></i> Preview | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Template 4 --> | |
| <div class="mockup-preview bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition"> | |
| <div class="aspect-square bg-gray-200 mb-3 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/300x300?text=Polo+Template" alt="Template 4" class="w-full h-full object-contain"> | |
| </div> | |
| <h3 class="font-bold">Polo Shirt</h3> | |
| <p class="text-sm text-gray-600 mb-3">With collar and button details</p> | |
| <div class="flex justify-between"> | |
| <button class="text-sm bg-accent text-white px-3 py-1 rounded font-bold hover:bg-opacity-90 transition">Use Template</button> | |
| <button class="text-sm text-gray-600 hover:text-black flex items-center gap-1"> | |
| <i class="fas fa-eye"></i> Preview | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Template 5 --> | |
| <div class="mockup-preview bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition"> | |
| <div class="aspect-square bg-gray-200 mb-3 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/300x300?text=Tank+Template" alt="Template 5" class="w-full h-full object-contain"> | |
| </div> | |
| <h3 class="font-bold">Tank Top</h3> | |
| <p class="text-sm text-gray-600 mb-3">Sleeveless with side seams</p> | |
| <div class="flex justify-between"> | |
| <button class="text-sm bg-accent text-white px-3 py-1 rounded font-bold hover:bg-opacity-90 transition">Use Template</button> | |
| <button class="text-sm text-gray-600 hover:text-black flex items-center gap-1"> | |
| <i class="fas fa-eye"></i> Preview | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Template 6 --> | |
| <div class="mockup-preview bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition"> | |
| <div class="aspect-square bg-gray-200 mb-3 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/300x300?text=Long+Sleeve+Template" alt="Template 6" class="w-full h-full object-contain"> | |
| </div> | |
| <h3 class="font-bold">Long Sleeve</h3> | |
| <p class="text-sm text-gray-600 mb-3">With cuff details</p> | |
| <div class="flex justify-between"> | |
| <button class="text-sm bg-accent text-white px-3 py-1 rounded font-bold hover:bg-opacity-90 transition">Use Template</button> | |
| <button class="text-sm text-gray-600 hover:text-black flex items-center gap-1"> | |
| <i class="fas fa-eye"></i> Preview | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Template 7 --> | |
| <div class="mockup-preview bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition"> | |
| <div class="aspect-square bg-gray-200 mb-3 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/300x300?text=Kids+Template" alt="Template 7" class="w-full h-full object-contain"> | |
| </div> | |
| <h3 class="font-bold">Kids T-Shirt</h3> | |
| <p class="text-sm text-gray-600 mb-3">Child size proportions</p> | |
| <div class="flex justify-between"> | |
| <button class="text-sm bg-accent text-white px-3 py-1 rounded font-bold hover:bg-opacity-90 transition">Use Template</button> | |
| <button class="text-sm text-gray-600 hover:text-black flex items-center gap-1"> | |
| <i class="fas fa-eye"></i> Preview | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Upload Template --> | |
| <div class="mockup-preview bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition flex flex-col items-center justify-center border-2 border-dashed border-gray-300"> | |
| <i class="fas fa-cloud-upload-alt text-4xl mb-3 text-gray-400"></i> | |
| <h3 class="font-bold">Upload Your Own</h3> | |
| <p class="text-sm text-gray-600 mb-3">Use your custom templates</p> | |
| <button id="uploadCustomTemplateBtn" class="bg-accent text-white px-4 py-2 rounded text-sm font-bold hover:bg-opacity-90 transition">Upload Template</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tutorial Section --> | |
| <section id="tutorial" class="py-16 px-6 bg-gray-100"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <h2 class="font-archivo text-3xl mb-12 text-center">LEARN HOW TO CREATE AMAZING MOCKUPS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Tutorial 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="aspect-video bg-gray-200 mb-4 flex items-center justify-center"> | |
| <i class="fas fa-play text-4xl text-gray-400"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">Getting Started Guide</h3> | |
| <p class="text-gray-700 mb-3">Learn the basics of our mockup generator in under 5 minutes.</p> | |
| <button class="text-sm text-accent font-bold hover:underline flex items-center gap-1"> | |
| <i class="fas fa-play"></i> Watch Now | |
| </button> | |
| </div> | |
| <!-- Tutorial 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="aspect-video bg-gray-200 mb-4 flex items-center justify-center"> | |
| <i class="fas fa-play text-4xl text-gray-400"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">Advanced Customization</h3> | |
| <p class="text-gray-700 mb-3">Master zippers, pockets, and other clothing details.</p> | |
| <button class="text-sm text-accent font-bold hover:underline flex items-center gap-1"> | |
| <i class="fas fa-play"></i> Watch Now | |
| </button> | |
| </div> | |
| <!-- Tutorial 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="aspect-video bg-gray-200 mb-4 flex items-center justify-center"> | |
| <i class="fas fa-play text-4xl text-gray-400"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">Realistic Rendering</h3> | |
| <p class="text-gray-700 mb-3">Create photorealistic mockups with our pro tips.</p> | |
| <button class="text-sm text-accent font-bold hover:underline flex items-center gap-1"> | |
| <i class="fas fa-play"></i> Watch Now | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-black aspect-video flex items-center justify-center"> | |
| <i class="fas fa-play text-6xl text-white"></i> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="font-archivo text-2xl mb-4">Masterclass: Professional Mockups in 10 Minutes</h3> | |
| <p class="text-gray-700 mb-6">Join our lead designer as they walk through creating a complete, professional clothing mockup from scratch, including all the advanced features our tool offers.</p> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <button class="bg-accent text-white px-6 py-3 rounded-lg font-bold hover:bg-opacity-90 transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-play"></i> Watch Full Tutorial | |
| </button> | |
| <button class="bg-white border border-gray-300 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-download"></i> Download Assets | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 px-6 bg-black text-white"> | |
| <div class="container mx-auto max-w-4xl text-center"> | |
| <h2 class="font-archivo text-3xl mb-6">READY TO CREATE PROFESSIONAL MOCKUPS?</h2> | |
| <p class="text-xl mb-8">Join thousands of designers using our free mockup generator to bring their ideas to life.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#generator" class="bg-accent px-8 py-4 font-bold rounded-lg text-lg hover:bg-opacity-90 transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-play"></i> Start Designing Now | |
| </a> | |
| <a href="#" class="bg-white text-black px-8 py-4 font-bold rounded-lg text-lg hover:bg-opacity-90 transition flex items-center justify-center gap-2"> | |
| <i class="fas fa-user-plus"></i> Sign Up for Free | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-6"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="font-archivo text-xl mb-4 flex items-center"> | |
| <i class="fas fa-tshirt mr-2"></i> | |
| OLIM MOCKUP | |
| </h3> | |
| <p class="text-gray-400 mb-4">The professional online clothing mockup generator for designers and brands.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold uppercase text-sm mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#generator" class="text-gray-400 hover:text-white transition">Mockup Generator</a></li> | |
| <li><a href="#templates" class="text-gray-400 hover:text-white transition">Templates</a></li> | |
| <li><a href="#tutorial" class="text-gray-400 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold uppercase text-sm mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Templates</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold uppercase text-sm mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Partners</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center text-gray-500 text-sm"> | |
| <p>© 2023 OLIM Mockup Generator. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="hover:text-white transition">Terms</a> | |
| <a href="#" class="hover:text-white transition">Privacy</a> | |
| <a href="#" class="hover:text-white transition">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Custom Color Modal --> | |
| <div id="customColorModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible"> | |
| <div class="modal-content bg-white p-6 rounded-xl w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">Custom Color</h3> | |
| <button id="closeCustomColorModal" class="text-gray-500 hover:text-black"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2">Color Picker</label> | |
| <input type="color" id="customColorPicker" value="#000000" class="w-full h-12 cursor-pointer"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2">Hex Code</label> | |
| <input type="text" id="customColorHex" value="#000000" class="w-full px-3 py-2 border border-gray-300 rounded-lg"> | |
| </div> | |
| <div class="flex justify-end gap-3"> | |
| <button id="cancelCustomColor" class="px-4 py-2 rounded-lg font-bold hover:bg-gray-100 transition">Cancel</button> | |
| <button id="applyCustomColor" class="bg-accent text-white px-4 py-2 rounded-lg font-bold hover:bg-opacity-90 transition">Apply</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Modal --> | |
| <div id="exportModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible"> | |
| <div class="modal-content bg-white p-6 rounded-xl w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">Export Options</h3> | |
| <button id="closeExportModal" class="text-gray-500 hover:text-black"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2">File Format</label> | |
| <select id="exportFormat" class="w-full px-3 py-2 border border-gray-300 rounded-lg"> | |
| <option value="png">PNG (Transparent)</option> | |
| <option value="jpg">JPG (High Quality)</option> | |
| <option value="svg">SVG (Vector)</option> | |
| <option value="pdf">PDF (Print Ready)</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2">Resolution</label> | |
| <select id="exportResolution" class="w-full px-3 py-2 border border-gray-300 rounded-lg"> | |
| <option value="1x">Standard (1x)</option> | |
| <option value="2x">High (2x)</option> | |
| <option value="3x">Ultra (3x)</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="flex items-center gap-2"> | |
| <input type="checkbox" id="exportWithBg" class="rounded"> | |
| <span class="text-sm font-medium">Include Background</span> | |
| </label> | |
| </div> | |
| <div class="flex justify-end gap-3"> | |
| <button id="cancelExport" class="px-4 py-2 rounded-lg font-bold hover:bg-gray-100 transition">Cancel</button> | |
| <button id="confirmExport" class="bg-accent text-white px-4 py-2 rounded-lg font-bold hover:bg-opacity-90 transition">Export</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Realistic Render Modal --> | |
| <div id="realisticModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible"> | |
| <div class="modal-content bg-white p-6 rounded-xl w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">Generate Realistic Mockup</h3> | |
| <button id="closeRealisticModal" class="text-gray-500 hover:text-black"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb | |
| </html> |