| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Pixel Perfect Undress 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://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .dropzone { |
| border: 3px dashed rgba(255, 255, 255, 0.4); |
| transition: all 0.3s ease; |
| } |
| .dropzone.active { |
| border-color: white; |
| background-color: rgba(255, 255, 255, 0.1); |
| } |
| .tooltip { |
| position: relative; |
| } |
| .tooltip-text { |
| visibility: hidden; |
| width: 200px; |
| background-color: rgba(0, 0, 0, 0.8); |
| color: #fff; |
| text-align: center; |
| border-radius: 6px; |
| padding: 5px; |
| position: absolute; |
| z-index: 1; |
| bottom: 125%; |
| left: 50%; |
| transform: translateX(-50%); |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| .tooltip:hover .tooltip-text { |
| visibility: visible; |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body class="gradient-bg min-h-screen text-white"> |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> |
| <div class="relative z-10 container mx-auto px-4 py-12"> |
| <header class="text-center mb-12"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 animate-pulse">Pixel Perfect Undress Wizard 👗</h1> |
| <p class="text-xl opacity-90">AI-powered clothing transformation with pixel-perfect precision</p> |
| </header> |
|
|
| <main class="max-w-4xl mx-auto"> |
| <div class="bg-white/10 backdrop-blur-lg rounded-xl p-8 shadow-2xl"> |
| <div id="dropzone" class="dropzone rounded-lg p-12 text-center cursor-pointer mb-8"> |
| <div class="flex flex-col items-center justify-center space-y-4"> |
| <i data-feather="upload-cloud" class="w-16 h-16"></i> |
| <h3 class="text-2xl font-semibold">Drag & Drop Your Image</h3> |
| <p class="opacity-80">or click to browse files</p> |
| <input type="file" id="fileInput" class="hidden" accept="image/*"> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> |
| <button class="bg-purple-600 hover:bg-purple-700 transition py-3 px-4 rounded-lg flex items-center justify-center space-x-2"> |
| <i data-feather="user"></i> |
| <span>Human</span> |
| </button> |
| <button class="bg-pink-600 hover:bg-pink-700 transition py-3 px-4 rounded-lg flex items-center justify-center space-x-2"> |
| <i data-feather="t-shirt"></i> |
| <span>Clothing</span> |
| </button> |
| <button class="bg-blue-600 hover:bg-blue-700 transition py-3 px-4 rounded-lg flex items-center justify-center space-x-2"> |
| <i data-feather="edit-3"></i> |
| <span>Edit</span> |
| </button> |
| <button class="bg-green-600 hover:bg-green-700 transition py-3 px-4 rounded-lg flex items-center justify-center space-x-2"> |
| <i data-feather="download"></i> |
| <span>Export</span> |
| </button> |
| </div> |
|
|
| <div class="bg-black/20 rounded-lg p-6 mb-8"> |
| <h3 class="text-xl font-semibold mb-4">AI Tools</h3> |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> |
| <div class="tooltip bg-indigo-600 hover:bg-indigo-700 transition p-4 rounded-lg cursor-pointer"> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="eye-off"></i> |
| <span>Remove Clothes</span> |
| </div> |
| <span class="tooltip-text">Automatically detect and remove clothing items</span> |
| </div> |
| <div class="tooltip bg-rose-600 hover:bg-rose-700 transition p-4 rounded-lg cursor-pointer"> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="droplet"></i> |
| <span>Change Color</span> |
| </div> |
| <span class="tooltip-text">Modify the color of any clothing item</span> |
| </div> |
| <div class="tooltip bg-amber-600 hover:bg-amber-700 transition p-4 rounded-lg cursor-pointer"> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="repeat"></i> |
| <span>Swap Style</span> |
| </div> |
| <span class="tooltip-text">Replace clothing with different styles</span> |
| </div> |
| <div class="tooltip bg-emerald-600 hover:bg-emerald-700 transition p-4 rounded-lg cursor-pointer"> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="plus"></i> |
| <span>Add Items</span> |
| </div> |
| <span class="tooltip-text">Add new clothing or accessories</span> |
| </div> |
| <div class="tooltip bg-violet-600 hover:bg-violet-700 transition p-4 rounded-lg cursor-pointer"> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="zap"></i> |
| <span>Enhance</span> |
| </div> |
| <span class="tooltip-text">Improve image quality and details</span> |
| </div> |
| <div class="tooltip bg-cyan-600 hover:bg-cyan-700 transition p-4 rounded-lg cursor-pointer"> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="smile"></i> |
| <span>Fix Face</span> |
| </div> |
| <span class="tooltip-text">Enhance facial features and expressions</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> |
| <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div> |
| <span>AI Processing Ready</span> |
| </div> |
| <div class="flex space-x-3"> |
| <button class="bg-gray-600 hover:bg-gray-700 transition py-2 px-6 rounded-lg"> |
| Reset |
| </button> |
| <button class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 transition py-2 px-6 rounded-lg font-semibold"> |
| Process Image |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <footer class="mt-16 text-center opacity-80 text-sm"> |
| <p>Powered by advanced AI algorithms • Privacy-focused processing • No images stored</p> |
| <div class="flex justify-center space-x-4 mt-4"> |
| <a href="terms.html" class="hover:text-purple-300 transition">Terms</a> |
| <a href="privacy.html" class="hover:text-purple-300 transition">Privacy</a> |
| <a href="faq.html" class="hover:text-purple-300 transition">FAQ</a> |
| <a href="contact.html" class="hover:text-purple-300 transition">Contact</a> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| // Initialize Vanta.js background |
| VANTA.NET({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x7b5bff, |
| backgroundColor: 0x0, |
| points: 12.00, |
| maxDistance: 22.00, |
| spacing: 16.00 |
| }); |
| |
| // Initialize Feather Icons |
| feather.replace(); |
| |
| // Dropzone functionality |
| const dropzone = document.getElementById('dropzone'); |
| const fileInput = document.getElementById('fileInput'); |
| |
| ['dragenter', 'dragover', 'drag |
| </body> |
| </html> |
