|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ShadowWeave AI | Pixel Alchemy Studio</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 = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
500: '#8b5cf6', |
|
|
600: '#7c3aed', |
|
|
}, |
|
|
secondary: { |
|
|
500: '#1e293b', |
|
|
600: '#0f172a', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-secondary-600 text-gray-100 min-h-screen"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<section class="flex flex-col md:flex-row items-center justify-between gap-8 mb-16"> |
|
|
<div class="md:w-1/2 space-y-6"> |
|
|
<h1 class="text-5xl font-bold bg-gradient-to-r from-primary-500 to-purple-400 bg-clip-text text-transparent"> |
|
|
Weave Your Digital Dreams |
|
|
</h1> |
|
|
<p class="text-xl text-gray-300"> |
|
|
Transform ideas into stunning visuals with our AI-powered pixel alchemy. No skills required - just imagination. |
|
|
</p> |
|
|
<div class="flex gap-4"> |
|
|
<a href="#generate" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all flex items-center gap-2"> |
|
|
<i data-feather="sparkles"></i> Start Creating |
|
|
</a> |
|
|
<a href="#gallery" class="border border-primary-500 text-primary-500 hover:bg-primary-500/10 px-6 py-3 rounded-lg font-medium transition-all"> |
|
|
Explore Gallery |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="http://static.photos/technology/1024x576/42" alt="AI Generated Art" class="rounded-xl shadow-2xl border border-gray-700"> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="generate" class="mb-16"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center">Pixel Alchemy Studio</h2> |
|
|
|
|
|
<div class="bg-secondary-500 rounded-xl p-6 shadow-lg"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Your Creative Vision</label> |
|
|
<textarea class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-4 focus:ring-2 focus:ring-primary-500 focus:border-transparent" rows="4" placeholder="Describe what you want to create..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Style</label> |
|
|
<select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2"> |
|
|
<option>Anime</option> |
|
|
<option>Cyberpunk</option> |
|
|
<option>3D Render</option> |
|
|
<option>Pixel Art</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Model</label> |
|
|
<select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2"> |
|
|
<option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion</option> |
|
|
<option value="lykon/dreamshaper-8">DreamShaper</option> |
|
|
<option value="cagliostrolab/animagine-xl-3.0">Anime</option> |
|
|
<option value="DGSpitzer/Cyberpunk-Anime-Diffusion">Cyberpunk</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Quality</label> |
|
|
<select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2"> |
|
|
<option>Standard</option> |
|
|
<option>HD</option> |
|
|
<option selected>Premium</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Aspect</label> |
|
|
<select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2"> |
|
|
<option>Square</option> |
|
|
<option>Portrait</option> |
|
|
<option>Landscape</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="aspect-square bg-secondary-700 rounded-lg border-2 border-dashed border-gray-600 flex items-center justify-center"> |
|
|
<div class="text-center p-4"> |
|
|
<i data-feather="image" class="w-12 h-12 mx-auto text-gray-500 mb-2"></i> |
|
|
<p class="text-gray-400">Your creation will appear here</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-3 rounded-lg font-medium transition-all flex items-center justify-center gap-2"> |
|
|
<i data-feather="zap"></i> Generate Magic |
|
|
</button> |
|
|
<div class="text-xs text-gray-400 text-center"> |
|
|
<p>By generating, you agree to our Terms of Service</p> |
|
|
<p class="mt-1">Premium generations: 5 remaining</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center">Alchemy Models</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
<div class="bg-secondary-500 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all"> |
|
|
<img src="http://static.photos/abstract/640x360/1" alt="Dream Model" class="w-full h-48 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-2">Dream Weaver</h3> |
|
|
<p class="text-gray-300 text-sm">Ethereal beauty with a touch of darkness</p> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<span class="text-primary-500 font-medium">Free</span> |
|
|
<button class="text-xs bg-primary-500/20 text-primary-500 px-3 py-1 rounded-full">Select</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="gallery" class="mb-16"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center">Pixel Gallery</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> |
|
|
<img src="http://static.photos/abstract/320x240/2" alt="Gallery item" class="rounded-lg hover:scale-105 transition-transform cursor-pointer"> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="components/toast.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
