File size: 8,093 Bytes
b320581 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HeroForge - Transform into a Superhero</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
}
}
}
}
</script>
</head>
<body class="bg-gray-900 text-white">
<custom-header></custom-header>
<main class="container mx-auto px-4 py-12">
<section class="max-w-4xl mx-auto text-center mb-16">
<h1 class="text-5xl font-bold mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Become a Superhero</h1>
<p class="text-xl text-gray-300 mb-8">Upload your photo and we'll transform you into a Marvel-style superhero with a realistic 10-second transformation sequence.</p>
<div class="bg-gray-800 rounded-2xl p-8 shadow-xl border border-gray-700">
<div id="upload-container" class="border-2 border-dashed border-gray-600 rounded-xl p-12 mb-8 transition-all hover:border-primary cursor-pointer">
<div class="flex flex-col items-center justify-center">
<i data-feather="upload" class="w-16 h-16 text-primary mb-4"></i>
<h3 class="text-2xl font-semibold mb-2">Upload Your Photo</h3>
<p class="text-gray-400">Drag & drop or click to select</p>
</div>
<input type="file" id="photo-upload" class="hidden" accept="image/*">
</div>
<div id="preview-container" class="hidden mb-8">
<div class="flex flex-col md:flex-row gap-8 items-center justify-center">
<div class="text-center">
<h4 class="font-medium mb-2">Original</h4>
<div class="w-48 h-48 rounded-full overflow-hidden border-4 border-primary">
<img id="original-preview" class="w-full h-full object-cover" src="" alt="Original photo">
</div>
</div>
<i data-feather="arrow-right" class="text-primary hidden md:block"></i>
<i data-feather="arrow-down" class="text-primary block md:hidden"></i>
<div class="text-center">
<h4 class="font-medium mb-2">Superhero</h4>
<div class="w-48 h-48 rounded-full overflow-hidden border-4 border-secondary relative">
<img id="hero-preview" class="w-full h-full object-cover" src="" alt="Superhero preview">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<div class="animate-pulse text-center">
<div class="spinner"></div>
<p class="text-sm mt-2">Generating...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="controls" class="hidden">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div>
<label class="block text-gray-300 mb-2">Hero Type</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
<option>Marvel Style</option>
<option>DC Style</option>
<option>Custom</option>
</select>
</div>
<div>
<label class="block text-gray-300 mb-2">Transformation Style</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
<option>Hulk (Green/Strong)</option>
<option>Iron Man (Tech Armor)</option>
<option>Spider-Man (Symbiote)</option>
<option>Thor (Lightning)</option>
</select>
</div>
<div>
<label class="block text-gray-300 mb-2">Video Length</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
<option>10 seconds</option>
<option>15 seconds</option>
<option>5 seconds</option>
</select>
</div>
</div>
<button id="generate-btn" class="w-full md:w-auto px-8 py-4 bg-gradient-to-r from-primary to-secondary rounded-full font-bold text-lg hover:opacity-90 transition-all flex items-center justify-center mx-auto">
<i data-feather="zap" class="mr-2"></i>
Generate Transformation
</button>
</div>
</div>
</section>
<section class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-6">How It Works</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
<div class="w-16 h-16 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mx-auto mb-4">
<i data-feather="upload" class="w-8 h-8 text-primary"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Upload Your Photo</h3>
<p class="text-gray-400">Simply upload a clear photo of your face.</p>
</div>
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
<div class="w-16 h-16 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mx-auto mb-4">
<i data-feather="settings" class="w-8 h-8 text-primary"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Customize Your Hero</h3>
<p class="text-gray-400">Choose from various superhero styles.</p>
</div>
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
<div class="w-16 h-16 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mx-auto mb-4">
<i data-feather="film" class="w-8 h-8 text-primary"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Get Your Video</h3>
<p class="text-gray-400">Receive a realistic transformation video.</p>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/header.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |