|
|
<!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> |
