| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Pixel Perfect Wardrobe Wizard</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <style> |
| .dropzone { |
| border: 3px dashed #9CA3AF; |
| transition: all 0.3s ease; |
| } |
| .dropzone-active { |
| border-color: #6366F1; |
| background-color: #E0E7FF; |
| } |
| .fade-in { |
| animation: fadeIn 0.5s ease-in; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> |
| <div class="min-h-screen flex flex-col items-center justify-center px-4 py-12"> |
| <div class="w-full max-w-4xl bg-white rounded-xl shadow-2xl overflow-hidden fade-in"> |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-600 p-6 text-white"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h1 class="text-3xl font-bold">Pixel Perfect Wardrobe Wizard ✨</h1> |
| <p class="mt-2 opacity-90">AI-powered clothing editor that works like magic</p> |
| </div> |
| <i data-feather="wifi" class="w-8 h-8"></i> |
| </div> |
| </div> |
|
|
| <div class="p-8"> |
| <div id="dropzone" class="dropzone rounded-lg p-12 text-center cursor-pointer mb-8"> |
| <div class="mx-auto w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4"> |
| <i data-feather="upload-cloud" class="w-10 h-10 text-gray-400"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-700">Drag & drop your outfit here</h3> |
| <p class="text-gray-500 mt-2">or click to browse your files</p> |
| <input type="file" id="fileInput" class="hidden" accept="image/*"> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
| <div class="bg-indigo-50 rounded-lg p-4 flex items-center space-x-3"> |
| <div class="bg-indigo-100 p-3 rounded-full"> |
| <i data-feather="zap" class="w-5 h-5 text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Lightning Fast</h4> |
| <p class="text-sm text-gray-500">Edits in seconds</p> |
| </div> |
| </div> |
| <div class="bg-purple-50 rounded-lg p-4 flex items-center space-x-3"> |
| <div class="bg-purple-100 p-3 rounded-full"> |
| <i data-feather="lock" class="w-5 h-5 text-purple-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Private</h4> |
| <p class="text-sm text-gray-500">Your images stay yours</p> |
| </div> |
| </div> |
| <div class="bg-pink-50 rounded-lg p-4 flex items-center space-x-3"> |
| <div class="bg-pink-100 p-3 rounded-full"> |
| <i data-feather="star" class="w-5 h-5 text-pink-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Premium Quality</h4> |
| <p class="text-sm text-gray-500">HD results</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-gray-50 rounded-lg p-6"> |
| <h3 class="text-lg font-semibold mb-4">Edit Options</h3> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <button class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition flex flex-col items-center"> |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mb-2"> |
| <i data-feather="edit-3" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <span class="text-sm font-medium">Color Change</span> |
| </button> |
| <button class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition flex flex-col items-center"> |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2"> |
| <i data-feather="scissors" class="w-5 h-5 text-green-600"></i> |
| </div> |
| <span class="text-sm font-medium">Remove Item</span> |
| </button> |
| <button class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition flex flex-col items-center"> |
| <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2"> |
| <i data-feather="plus" class="w-5 h-5 text-yellow-600"></i> |
| </div> |
| <span class="text-sm font-medium">Add Item</span> |
| </button> |
| <button class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition flex flex-col items-center"> |
| <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mb-2"> |
| <i data-feather="refresh-cw" class="w-5 h-5 text-red-600"></i> |
| </div> |
| <span class="text-sm font-medium">Restyle</span> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-gray-50 px-8 py-4 border-t border-gray-200"> |
| <div class="flex items-center justify-between"> |
| <p class="text-sm text-gray-500">Try our premium features for free</p> |
| <button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2 rounded-full font-medium hover:shadow-lg transition"> |
| Get Started |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| VANTA.NET({ |
| el: "#vanta-bg", |
| color: 0x6366f1, |
| backgroundColor: 0xf1f5f9, |
| points: 10, |
| maxDistance: 20, |
| spacing: 15 |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| const dropzone = document.getElementById('dropzone'); |
| const fileInput = document.getElementById('fileInput'); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropzone.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| dropzone.classList.add('dropzone-active'); |
| } |
| |
| function unhighlight() { |
| dropzone.classList.remove('dropzone-active'); |
| } |
| |
| dropzone.addEventListener('drop', handleDrop, false); |
| dropzone.addEventListener('click', () => fileInput.click(), false); |
| |
| fileInput.addEventListener('change', handleFiles, false); |
| |
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| handleFiles({ target: { files } }); |
| } |
| |
| function handleFiles(e) { |
| const files = e.target.files; |
| if (files.length) { |
| |
| console.log('File selected:', files[0]); |
| |
| dropzone.innerHTML = ` |
| <div class="flex flex-col items-center"> |
| <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mb-4"> |
| <i data-feather="check" class="w-10 h-10 text-green-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-700">Ready to edit!</h3> |
| <p class="text-gray-500 mt-2">${files[0].name}</p> |
| </div> |
| `; |
| feather.replace(); |
| } |
| } |
| </script> |
| </body> |
| </html> |
|
|
