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