|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TextTo3D Studio - Transform Words into 3D Magic</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<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': { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
}, |
|
|
'secondary': { |
|
|
50: '#fdf4ff', |
|
|
100: '#fae8ff', |
|
|
200: '#f5d0fe', |
|
|
300: '#f0abfc', |
|
|
400: '#e879f9', |
|
|
500: '#d946ef', |
|
|
600: '#c026d3', |
|
|
700: '#a21caf', |
|
|
800: '#86198f', |
|
|
900: '#701a75', |
|
|
} |
|
|
}, |
|
|
animation: { |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white min-h-screen"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="relative"> |
|
|
|
|
|
<section class="relative overflow-hidden px-4 py-20 lg:px-8"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary-900/20 via-transparent to-secondary-900/20"></div> |
|
|
<div class="relative mx-auto max-w-7xl"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl font-bold tracking-tight sm:text-6xl lg:text-7xl bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent"> |
|
|
Transform Your Ideas |
|
|
<br /> |
|
|
<span class="text-gray-100">Into 3D Reality</span> |
|
|
</h1> |
|
|
<p class="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-300"> |
|
|
Describe your vision in words and watch as AI creates stunning 3D designs instantly. |
|
|
No design skills required. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-700"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="edit-3" class="w-5 h-5 text-primary-400"></i> |
|
|
Describe Your Design |
|
|
</h3> |
|
|
<textarea |
|
|
id="text-input" |
|
|
class="w-full h-32 bg-gray-900/50 border border-gray-700 rounded-lg p-4 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none" |
|
|
placeholder="E.g., A futuristic floating house with glass walls and solar panels on a tropical island..." |
|
|
></textarea> |
|
|
|
|
|
|
|
|
<div class="mt-4 space-y-3"> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Design Style</label> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<button class="style-btn px-4 py-2 bg-gray-700 hover:bg-primary-600 rounded-lg transition-all duration-200 text-sm" data-style="realistic"> |
|
|
🌟 Realistic |
|
|
</button> |
|
|
<button class="style-btn px-4 py-2 bg-gray-700 hover:bg-primary-600 rounded-lg transition-all duration-200 text-sm" data-style="cartoon"> |
|
|
🎨 Cartoon |
|
|
</button> |
|
|
<button class="style-btn px-4 py-2 bg-gray-700 hover:bg-primary-600 rounded-lg transition-all duration-200 text-sm" data-style="minimalist"> |
|
|
⭕ Minimalist |
|
|
</button> |
|
|
<button class="style-btn px-4 py-2 bg-gray-700 hover:bg-primary-600 rounded-lg transition-all duration-200 text-sm" data-style="fantasy"> |
|
|
✨ Fantasy |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button |
|
|
id="generate-btn" |
|
|
class="w-full mt-6 bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 flex items-center justify-center gap-2" |
|
|
> |
|
|
<i data-feather="cpu" class="w-5 h-5"></i> |
|
|
Generate 3D Design |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="progress-container" class="hidden bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-700"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<span class="text-sm font-medium text-gray-300">Generating...</span> |
|
|
<span id="progress-percent" class="text-sm font-medium text-primary-400">0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div id="progress-bar" class="bg-gradient-to-r from-primary-500 to-secondary-500 h-2 rounded-full transition-all duration-300" style="width: 0%"></div> |
|
|
</div> |
|
|
<p class="mt-3 text-xs text-gray-400">AI is creating your 3D masterpiece...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-700"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center justify-between"> |
|
|
<span class="flex items-center gap-2"> |
|
|
<i data-feather="box" class="w-5 h-5 text-secondary-400"></i> |
|
|
3D Preview |
|
|
</span> |
|
|
<span id="render-time" class="text-sm text-gray-400"></span> |
|
|
</h3> |
|
|
|
|
|
<div id="preview-container" class="relative bg-gray-900/50 rounded-lg overflow-hidden" style="height: 400px;"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<div class="w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-br from-primary-500/20 to-secondary-500/20 flex items-center justify-center animate-pulse-slow"> |
|
|
<i data-feather="box" class="w-12 h-12 text-gray-400"></i> |
|
|
</div> |
|
|
<p class="text-gray-400">Your 3D design will appear here</p> |
|
|
</div> |
|
|
</div> |
|
|
<canvas id="3d-canvas" class="hidden w-full h-full"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="action-buttons" class="hidden mt-4 grid grid-cols-3 gap-2"> |
|
|
<button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all duration-200 text-sm flex items-center justify-center gap-2"> |
|
|
<i data-feather="rotate-ccw" class="w-4 h-4"></i> |
|
|
Rotate |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all duration-200 text-sm flex items-center justify-center gap-2"> |
|
|
<i data-feather="download" class="w-4 h-4"></i> |
|
|
Export |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all duration-200 text-sm flex items-center justify-center gap-2"> |
|
|
<i data-feather="share-2" class="w-4 h-4"></i> |
|
|
Share |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="px-4 py-20 lg:px-8"> |
|
|
<div class="mx-auto max-w-7xl"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent"> |
|
|
Powered by Advanced AI |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-700 hover:border-primary-500/50 transition-all duration-300"> |
|
|
<div class="w-12 h-12 bg-primary-500/20 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="zap" class="w-6 h-6 text-primary-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Instant Generation</h3> |
|
|
<p class="text-gray-400">Get your 3D models in seconds, not hours. Our AI processes your text instantly.</p> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-700 hover:border-secondary-500/50 transition-all duration-300"> |
|
|
<div class="w-12 h-12 bg-secondary-500/20 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="layers" class="w-6 h-6 text-secondary-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">High Detail</h3> |
|
|
<p class="text-gray-400">Complex geometries, textures, and lighting that bring your ideas to life.</p> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-700 hover:border-primary-500/50 transition-all duration-300"> |
|
|
<div class="w-12 h-12 bg-gradient-to-br from-primary-500/20 to-secondary-500/20 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="sliders" class="w-6 h-6 text-primary-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Customizable</h3> |
|
|
<p class="text-gray-400">Adjust materials, lighting, and camera angles to perfect your vision.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="px-4 py-20 lg:px-8 bg-gray-800/30"> |
|
|
<div class="mx-auto max-w-7xl"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent"> |
|
|
Recent Creations |
|
|
</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="recent-creations"> |
|
|
<div class="bg-gray-800/50 rounded-lg overflow-hidden hover:scale-105 transition-transform duration-300 cursor-pointer"> |
|
|
<img src="http://static.photos/technology/320x240/1" alt="Creation" class="w-full h-40 object-cover"> |
|
|
<div class="p-3"> |
|
|
<p class="text-sm text-gray-300 truncate">Cyberpunk Cityscape</p> |
|
|
<p class="text-xs text-gray-500">2 min ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 rounded-lg overflow-hidden hover:scale-105 transition-transform duration-300 cursor-pointer"> |
|
|
<img src="http://static.photos/architecture/320x240/2" alt="Creation" class="w-full h-40 object-cover"> |
|
|
<div class="p-3"> |
|
|
<p class="text-sm text-gray-300 truncate">Modern Villa</p> |
|
|
<p class="text-xs text-gray-500">5 min ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 rounded-lg overflow-hidden hover:scale-105 transition-transform duration-300 cursor-pointer"> |
|
|
<img src="http://static.photos/abstract/320x240/3" alt="Creation" class="w-full h-40 object-cover"> |
|
|
<div class="p-3"> |
|
|
<p class="text-sm text-gray-300 truncate">Abstract Sculpture</p> |
|
|
<p class="text-xs text-gray-500">10 min ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800/50 rounded-lg overflow-hidden hover:scale-105 transition-transform duration-300 cursor-pointer"> |
|
|
<img src="http://static.photos/nature/320x240/4" alt="Creation" class="w-full h-40 object-cover"> |
|
|
<div class="p-3"> |
|
|
<p class="text-sm text-gray-300 truncate">Fantasy Treehouse</p> |
|
|
<p class="text-xs text-gray-500">15 min ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.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> |
