3d design not getting generated

README.md

@@ -1,10 +1,13 @@
 ---
-title: 3d Magic Generator
-emoji: 🦀
-colorFrom: blue
-colorTo: indigo
+title: 3D Magic Generator 🎨
+colorFrom: gray
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,222 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                * {
+                    margin: 0;
+                    padding: 0;
+                    box-sizing: border-box;
+                }
+                
+                footer {
+                    background: linear-gradient(180deg, rgba(17, 24, 39, 0.5), rgba(17, 24, 39, 0.9));
+                    border-top: 1px solid rgba(75, 85, 99, 0.3);
+                    padding: 3rem 1rem 2rem;
+                    margin-top: 4rem;
+                }
+                
+                .footer-container {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                }
+                
+                .footer-content {
+                    display: grid;
+                    grid-template-columns: 2fr 1fr 1fr 1fr;
+                    gap: 3rem;
+                    margin-bottom: 3rem;
+                }
+                
+                .footer-brand h3 {
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                    margin-bottom: 1rem;
+                    background: linear-gradient(135deg, #0ea5e9, #d946ef);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+                
+                .footer-brand p {
+                    color: #9ca3af;
+                    line-height: 1.6;
+                    margin-bottom: 1.5rem;
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                }
+                
+                .social-link {
+                    width: 40px;
+                    height: 40px;
+                    background: rgba(75, 85, 99, 0.2);
+                    border: 1px solid rgba(75, 85, 99, 0.3);
+                    border-radius: 0.5rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #d1d5db;
+                    text-decoration: none;
+                    transition: all 0.2s ease;
+                }
+                
+                .social-link:hover {
+                    background: rgba(14, 165, 233, 0.2);
+                    border-color: #0ea5e9;
+                    color: #0ea5e9;
+                    transform: translateY(-2px);
+                }
+                
+                .footer-column h4 {
+                    color: white;
+                    font-size: 1rem;
+                    font-weight: 600;
+                    margin-bottom: 1rem;
+                }
+                
+                .footer-links {
+                    list-style: none;
+                }
+                
+                .footer-links li {
+                    margin-bottom: 0.75rem;
+                }
+                
+                .footer-links a {
+                    color: #9ca3af;
+                    text-decoration: none;
+                    transition: color 0.2s ease;
+                }
+                
+                .footer-links a:hover {
+                    color: #0ea5e9;
+                }
+                
+                .footer-bottom {
+                    padding-top: 2rem;
+                    border-top: 1px solid rgba(75, 85, 99, 0.3);
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    gap: 1rem;
+                }
+                
+                .footer-bottom p {
+                    color: #6b7280;
+                    font-size: 0.875rem;
+                }
+                
+                .footer-bottom-links {
+                    display: flex;
+                    gap: 2rem;
+                }
+                
+                .footer-bottom-links a {
+                    color: #6b7280;
+                    text-decoration: none;
+                    font-size: 0.875rem;
+                    transition: color 0.2s ease;
+                }
+                
+                .footer-bottom-links a:hover {
+                    color: #0ea5e9;
+                }
+                
+                @media (max-width: 1024px) {
+                    .footer-content {
+                        grid-template-columns: 1fr 1fr;
+                    }
+                }
+                
+                @media (max-width: 640px) {
+                    .footer-content {
+                        grid-template-columns: 1fr;
+                        gap: 2rem;
+                    }
+                    
+                    .footer-bottom {
+                        flex-direction: column;
+                        text-align: center;
+                    }
+                    
+                    .footer-bottom-links {
+                        gap: 1rem;
+                    }
+                }
+            </style>
+            
+            <footer>
+                <div class="footer-container">
+                    <div class="footer-content">
+                        <div class="footer-brand">
+                            <h3>TextTo3D Studio</h3>
+                            <p>Transform your ideas into stunning 3D designs with the power of AI. Create, explore, and share your digital masterpieces.</p>
+                            <div class="social-links">
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+                                    </svg>
+                                </a>
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
+                                    </svg>
+                                </a>
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                        
+                        <div class="footer-column">
+                            <h4>Product</h4>
+                            <ul class="footer-links">
+                                <li><a href="#">Features</a></li>
+                                <li><a href="#">Pricing</a></li>
+                                <li><a href="#">API</a></li>
+                                <li><a href="#">Documentation</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div class="footer-column">
+                            <h4>Company</h4>
+                            <ul class="footer-links">
+                                <li><a href="#">About Us</a></li>
+                                <li><a href="#">Blog</a></li>
+                                <li><a href="#">Careers</a></li>
+                                <li><a href="#">Contact</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div class="footer-column">
+                            <h4>Resources</h4>
+                            <ul class="footer-links">
+                                <li><a href="#">Community</a></li>
+                                <li><a href="#">Tutorials</a></li>
+                                <li><a href="#">Support</a></li>
+                                <li><a href="#">Status</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <div class="footer-bottom">
+                        <p>&copy; 2024 TextTo3D Studio. All rights reserved.</p>
+                        <div class="footer-bottom-links">
+                            <a href="#">Privacy Policy</a>
+                            <a href="#">Terms of Service</a>
+                            <a href="#">Cookie Policy</a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,182 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                * {
+                    margin: 0;
+                    padding: 0;
+                    box-sizing: border-box;
+                }
+                
+                nav {
+                    background: rgba(17, 24, 39, 0.8);
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(75, 85, 99, 0.3);
+                    position: sticky;
+                    top: 0;
+                    z-index: 50;
+                }
+                
+                .nav-container {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding: 1rem 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                    text-decoration: none;
+                    color: white;
+                }
+                
+                .logo-icon {
+                    width: 40px;
+                    height: 40px;
+                    background: linear-gradient(135deg, #0ea5e9, #d946ef);
+                    border-radius: 0.5rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    animation: float 6s ease-in-out infinite;
+                }
+                
+                @keyframes float {
+                    0%, 100% { transform: translateY(0px); }
+                    50% { transform: translateY(-5px); }
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    align-items: center;
+                }
+                
+                .nav-link {
+                    color: #d1d5db;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: color 0.2s ease;
+                    position: relative;
+                }
+                
+                .nav-link:hover {
+                    color: #0ea5e9;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -4px;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background: linear-gradient(90deg, #0ea5e9, #d946ef);
+                    transition: width 0.3s ease;
+                }
+                
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                
+                .nav-link.active {
+                    color: white;
+                }
+                
+                .nav-link.active::after {
+                    width: 100%;
+                }
+                
+                .mobile-menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                }
+                
+                @media (max-width: 768px) {
+                    .nav-links {
+                        position: fixed;
+                        top: 0;
+                        right: -100%;
+                        width: 70%;
+                        height: 100vh;
+                        background: rgba(17, 24, 39, 0.98);
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: center;
+                        gap: 2rem;
+                        transition: right 0.3s ease;
+                    }
+                    
+                    .nav-links.open {
+                        right: 0;
+                    }
+                    
+                    .mobile-menu-btn {
+                        display: block;
+                        z-index: 51;
+                    }
+                }
+            </style>
+            
+            <nav>
+                <div class="nav-container">
+                    <a href="index.html" class="logo">
+                        <div class="logo-icon">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+                                <path d="M12 2L2 7L12 12L22 7L12 2Z"></path>
+                                <path d="M2 17L12 22L22 17"></path>
+                                <path d="M2 12L12 17L22 12"></path>
+                            </svg>
+                        </div>
+                        TextTo3D Studio
+                    </a>
+                    
+                    <div class="nav-links" id="navLinks">
+                        <a href="index.html" class="nav-link active">Create</a>
+                        <a href="gallery.html" class="nav-link">Gallery</a>
+                        <a href="#" class="nav-link">Pricing</a>
+                        <a href="#" class="nav-link">About</a>
+                        <button class="px-4 py-2 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-lg font-medium hover:from-primary-600 hover:to-secondary-600 transition-all duration-200">
+                            Sign Up
+                        </button>
+                    </div>
+                    
+                    <button class="mobile-menu-btn" id="mobileMenuBtn">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="3" y1="12" x2="21" y2="12"></line>
+                            <line x1="3" y1="6" x2="21" y2="6"></line>
+                            <line x1="3" y1="18" x2="21" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+            </nav>
+        `;
+        
+        // Mobile menu functionality
+        const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
+        const navLinks = this.shadowRoot.getElementById('navLinks');
+        
+        mobileMenuBtn.addEventListener('click', () => {
+            navLinks.classList.toggle('open');
+        });
+        
+        // Close menu when link is clicked
+        this.shadowRoot.querySelectorAll('.nav-link').forEach(link => {
+            link.addEventListener('click', () => {
+                navLinks.classList.remove('open');
+            });
+        });
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

gallery.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gallery - TextTo3D Studio</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',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="px-4 py-12 lg:px-8">
+        <div class="mx-auto max-w-7xl">
+            <!-- Header -->
+            <div class="text-center mb-12">
+                <h1 class="text-4xl font-bold bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent mb-4">
+                    3D Design Gallery
+                </h1>
+                <p class="text-gray-300 max-w-2xl mx-auto">
+                    Explore amazing 3D creations from our community. Get inspired and see what's possible with AI-powered design.
+                </p>
+            </div>
+
+            <!-- Filter and Search -->
+            <div class="mb-8 flex flex-col md:flex-row gap-4 items-center justify-between">
+                <div class="flex gap-2 flex-wrap">
+                    <button class="filter-btn px-4 py-2 bg-primary-500 text-white rounded-lg transition-all duration-200" data-filter="all">
+                        All
+                    </button>
+                    <button class="filter-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all duration-200" data-filter="architecture">
+                        Architecture
+                    </button>
+                    <button class="filter-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all duration-200" data-filter="product">
+                        Products
+                    </button>
+                    <button class="filter-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all duration-200" data-filter="character">
+                        Characters
+                    </button>
+                    <button class="filter-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all duration-200" data-filter="abstract">
+                        Abstract
+                    </button>
+                </div>
+                <div class="relative">
+                    <input 
+                        type="text" 
+                        placeholder="Search designs..."
+                        class="pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                    >
+                    <i data-feather="search" class="absolute left-3 top-2.5 w-4 h-4 text-gray-400"></i>
+                </div>
+            </div>
+
+            <!-- Gallery Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="gallery-grid">
+                <!-- Gallery Items will be dynamically loaded here -->
+            </div>
+
+            <!-- Load More -->
+            <div class="text-center mt-12">
+                <button id="load-more" class="px-8 py-3 bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-semibold rounded-lg transition-all duration-200 transform hover:scale-105">
+                    Load More Designs
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        // Gallery specific logic
+        const galleryItems = [
+            { id: 1, title: "Futuristic Skyscraper", category: "architecture", likes: 234, views: 1200, image: "http://static.photos/cityscape/640x360/1" },
+            { id: 2, title: "Ergonomic Chair", category: "product", likes: 189, views: 890, image: "http://static.photos/workspace/640x360/2" },
+            { id: 3, title: "Dragon Warrior", category: "character", likes: 456, views: 2300, image: "http://static.photos/abstract/640x360/3" },
+            { id: 4, title: "Crystal Formation", category: "abstract", likes: 123, views: 560, image: "http://static.photos/minimal/640x360/4" },
+            { id: 5, title: "Modern Villa", category: "architecture", likes: 345, views: 1800, image: "http://static/photos/office/640x360/5" },
+            { id: 6, title: "Smart Watch", category: "product", likes: 267, views: 1340, image: "http://static/photos/technology/640x360/6" },
+            { id: 7, title: "Space Explorer", category: "character", likes: 523, views: 2900, image: "http://static.photos/monochrome/640x360/7" },
+            { id: 8, title: "Geometric Patterns", category: "abstract", likes: 98, views: 450, image: "http://static.photos/gradient/640x360/8" }
+        ];
+
+        function loadGalleryItems(filter = 'all') {
+            const grid = document.getElementById('gallery-grid');
+            grid.innerHTML = '';
+            
+            const filtered = filter === 'all' ? galleryItems : galleryItems.filter(item => item.category === filter);
+            
+            filtered.forEach(item => {
+                const card = document.createElement('div');
+                card.className = 'bg-gray-800/50 backdrop-blur-sm rounded-xl overflow-hidden border border-gray-700 hover:border-primary-500/50 transition-all duration-300 group cursor-pointer';
+                card.innerHTML = `
+                    <div class="relative overflow-hidden h-48">
+                        <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
+                            <button class="px-4 py-2 bg-primary-500/90 backdrop-blur-sm rounded-lg text-sm font-medium transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+                                View in 3D
+                            </button>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-lg mb-2">${item.title}</h3>
+                        <div class="flex items-center justify-between text-sm text-gray-400">
+                            <span class="capitalize">${item.category}</span>
+                            <div class="flex items-center gap-3">
+                                <span class="flex items-center gap-1">
+                                    <i data-feather="heart" class="w-4 h-4"></i>
+                                    ${item.likes}
+                                </span>
+                                <span class="flex items-center gap-1">
+                                    <i data-feather="eye" class="w-4 h-4"></i>
+                                    ${item.views}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                grid.appendChild(card);
+            });
+            
+            feather.replace();
+        }
+
+        // Filter buttons
+        document.querySelectorAll('.filter-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.filter-btn').forEach(b => {
+                    b.classList.remove('bg-primary-500', 'text-white');
+                    b.classList.add('bg-gray-700');
+                });
+                btn.classList.remove('bg-gray-700');
+                btn.classList.add('bg-primary-500', 'text-white');
+                loadGalleryItems(btn.dataset.filter);
+            });
+        });
+
+        // Load initial items
+        loadGalleryItems();
+
+        feather.replace();
+    </script>
+</body>
+</html>

index.html

@@ -1,19 +1,250 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!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">
+        <!-- Hero Section -->
+        <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>
+
+                <!-- 3D Preview Container -->
+                <div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    <!-- Input Section -->
+                    <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>
+                            
+                            <!-- Style Options -->
+                            <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>
+
+                        <!-- Generation Progress -->
+                        <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>
+
+                    <!-- 3D Output Section -->
+                    <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>
+
+                        <!-- Action Buttons -->
+                        <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>
+
+        <!-- Features 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>
+
+        <!-- Recent Creations -->
+        <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>

script.js

@@ -0,0 +1,390 @@
+// Main application logic
+document.addEventListener('DOMContentLoaded', function() {
+    // Style selection
+    const styleButtons = document.querySelectorAll('.style-btn');
+    let selectedStyle = 'realistic';
+    
+    styleButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            styleButtons.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            selectedStyle = btn.dataset.style;
+        });
+    });
+    
+    // Set default active style
+    document.querySelector('[data-style="realistic"]').classList.add('active');
+    
+    // Generate button functionality
+    const generateBtn = document.getElementById('generate-btn');
+    const textInput = document.getElementById('text-input');
+    const progressContainer = document.getElementById('progress-container');
+    const progressBar = document.getElementById('progress-bar');
+    const progressPercent = document.getElementById('progress-percent');
+    const previewContainer = document.getElementById('preview-container');
+    const canvas = document.getElementById('3d-canvas');
+    const actionButtons = document.getElementById('action-buttons');
+    const renderTime = document.getElementById('render-time');
+    
+    generateBtn.addEventListener('click', async () => {
+        const text = textInput.value.trim();
+        
+        if (!text) {
+            showNotification('Please enter a description for your 3D design', 'warning');
+            return;
+        }
+        
+        // Show progress
+        progressContainer.classList.remove('hidden');
+        generateBtn.disabled = true;
+        generateBtn.classList.add('opacity-50', 'cursor-not-allowed');
+        
+        // Simulate generation progress
+        let progress = 0;
+        const startTime = Date.now();
+        
+        const progressInterval = setInterval(() => {
+            progress += Math.random() * 15;
+            if (progress > 90) progress = 90;
+            
+            progressBar.style.width = `${progress}%`;
+            progressPercent.textContent = `${Math.round(progress)}%`;
+        }, 200);
+        
+        // Simulate API call
+        setTimeout(() => {
+            clearInterval(progressInterval);
+            progressBar.style.width = '100%';
+            progressPercent.textContent = '100%';
+            
+            // Generate 3D visualization
+            generate3DVisualization(text, selectedStyle);
+            
+            // Calculate render time
+            const endTime = Date.now();
+            const renderDuration = ((endTime - startTime) / 1000).toFixed(1);
+            renderTime.textContent = `Rendered in ${renderDuration}s`;
+            
+            // Show result
+            setTimeout(() => {
+                progressContainer.classList.add('hidden');
+                generateBtn.disabled = false;
+                generateBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+                actionButtons.classList.remove('hidden');
+                canvas.classList.remove('hidden');
+                previewContainer.querySelector('.text-center').classList.add('hidden');
+                
+                // Add to recent creations
+                addToRecentCreations(text);
+            }, 500);
+        }, 3000);
+    });
+    // Enhanced 3D Visualization
+    function generate3DVisualization(description, style) {
+        const ctx = canvas.getContext('2d');
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        
+        // Store the visualization data for animation
+        canvas.dataset.description = description;
+        canvas.dataset.style = style;
+        canvas.dataset.rotation = '0';
+        
+        draw3DModel(ctx, canvas.width, canvas.height, style, 0);
+    }
+    
+    function draw3DModel(ctx, width, height, style, rotation) {
+        // Clear canvas
+        ctx.clearRect(0, 0, width, height);
+        
+        // Create gradient background based on style
+        let gradient;
+        switch(style) {
+            case 'cartoon':
+                gradient = ctx.createLinearGradient(0, 0, width, height);
+                gradient.addColorStop(0, '#fef3c7');
+                gradient.addColorStop(0.5, '#fed7aa');
+                gradient.addColorStop(1, '#fbbf24');
+                break;
+            case 'minimalist':
+                gradient = ctx.createLinearGradient(0, 0, width, height);
+                gradient.addColorStop(0, '#f3f4f6');
+                gradient.addColorStop(0.5, '#e5e7eb');
+                gradient.addColorStop(1, '#d1d5db');
+                break;
+            case 'fantasy':
+                gradient = ctx.createRadialGradient(width/2, height/2, 0, width/2, height/2, width/2);
+                gradient.addColorStop(0, '#ddd6fe');
+                gradient.addColorStop(0.3, '#f9a8d4');
+                gradient.addColorStop(0.6, '#c084fc');
+                gradient.addColorStop(1, '#818cf8');
+                break;
+            default: // realistic
+                gradient = ctx.createLinearGradient(0, 0, width, height);
+                gradient.addColorStop(0, '#0f172a');
+                gradient.addColorStop(0.5, '#1e293b');
+                gradient.addColorStop(1, '#334155');
+        }
+        
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, width, height);
+        
+        // Add grid for depth perception
+        ctx.strokeStyle = style === 'minimalist' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.05)';
+        ctx.lineWidth = 1;
+        const gridSize = 30;
+        
+        for (let x = 0; x <= width; x += gridSize) {
+            ctx.beginPath();
+            ctx.moveTo(x, 0);
+            ctx.lineTo(x, height);
+            ctx.stroke();
+        }
+        
+        for (let y = 0; y <= height; y += gridSize) {
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(width, y);
+            ctx.stroke();
+        }
+        
+        const centerX = width / 2;
+        const centerY = height / 2;
+        
+        // Main 3D object - More complex and realistic
+        ctx.save();
+        ctx.translate(centerX, centerY);
+        
+        // Rotate the entire scene
+        ctx.rotate(rotation);
+        
+        // Draw 3D cube with proper perspective
+        const size = 100;
+        const depth = 60;
+        
+        // Back faces (darker)
+        ctx.fillStyle = style === 'cartoon' ? 'rgba(251, 191, 36, 0.4)' : 
+                       style === 'minimalist' ? 'rgba(156, 163, 175, 0.3)' :
+                       style === 'fantasy' ? 'rgba(168, 85, 247, 0.4)' :
+                       'rgba(14, 165, 233, 0.3)';
+        ctx.strokeStyle = style === 'cartoon' ? 'rgba(251, 191, 36, 0.8)' :
+                          style === 'minimalist' ? 'rgba(75, 85, 99, 0.8)' :
+                          style === 'fantasy' ? 'rgba(168, 85, 247, 0.8)' :
+                          'rgba(14, 165, 233, 0.8)';
+        ctx.lineWidth = 2;
+        
+        // Back face
+        ctx.beginPath();
+        ctx.rect(-size/2 - depth/3, -size/2 - depth/3, size, size);
+        ctx.fill();
+        ctx.stroke();
+        
+        // Side faces
+        ctx.fillStyle = style === 'cartoon' ? 'rgba(251, 191, 36, 0.5)' : 
+                       style === 'minimalist' ? 'rgba(156, 163, 175, 0.4)' :
+                       style === 'fantasy' ? 'rgba(236, 72, 153, 0.5)' :
+                       'rgba(217, 70, 239, 0.4)';
+        
+        // Right face
+        ctx.beginPath();
+        ctx.moveTo(size/2, -size/2);
+        ctx.lineTo(size/2 + depth/3, -size/2 - depth/3);
+        ctx.lineTo(size/2 + depth/3, size/2 - depth/3);
+        ctx.lineTo(size/2, size/2);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        
+        // Top face
+        ctx.beginPath();
+        ctx.moveTo(-size/2, -size/2);
+        ctx.lineTo(-size/2 - depth/3, -size/2 - depth/3);
+        ctx.lineTo(size/2 - depth/3, -size/2 - depth/3);
+        ctx.lineTo(size/2, -size/2);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        
+        // Front face (brightest)
+        ctx.fillStyle = style === 'cartoon' ? 'rgba(251, 191, 36, 0.7)' : 
+                       style === 'minimalist' ? 'rgba(156, 163, 175, 0.6)' :
+                       style === 'fantasy' ? 'rgba(236, 72, 153, 0.7)' :
+                       'rgba(14, 165, 233, 0.6)';
+        
+        ctx.beginPath();
+        ctx.rect(-size/2, -size/2, size, size);
+        ctx.fill();
+        ctx.stroke();
+        
+        // Add decorative elements based on style
+        if (style === 'fantasy') {
+            // Add sparkles
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+            for (let i = 0; i < 5; i++) {
+                const sparkleX = (Math.random() - 0.5) * size * 1.5;
+                const sparkleY = (Math.random() - 0.5) * size * 1.5;
+                const sparkleSize = Math.random() * 3 + 1;
+                
+                ctx.beginPath();
+                ctx.arc(sparkleX, sparkleY, sparkleSize, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        } else if (style === 'cartoon') {
+            // Add cartoon eyes
+            ctx.fillStyle = 'white';
+            ctx.beginPath();
+            ctx.arc(-20, -10, 12, 0, Math.PI * 2);
+            ctx.arc(20, -10, 12, 0, Math.PI * 2);
+            ctx.fill();
+            
+            ctx.fillStyle = 'black';
+            ctx.beginPath();
+            ctx.arc(-20, -10, 6, 0, Math.PI * 2);
+            ctx.arc(20, -10, 6, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        
+        ctx.restore();
+        
+        // Add shadow
+        ctx.save();
+        ctx.translate(centerX, centerY + 100);
+        ctx.scale(1, 0.3);
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+        ctx.beginPath();
+        ctx.ellipse(0, 0, size/2, size/4, 0, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+        
+        // Add text overlay
+        ctx.fillStyle = style === 'minimalist' ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.9)';
+        ctx.font = 'bold 14px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText('3D Model Generated!', centerX, height - 20);
+    }
+// Add to recent creations
+    function addToRecentCreations(description) {
+        const recentContainer = document.getElementById('recent-creations');
+        const newItem = document.createElement('div');
+        newItem.className = 'bg-gray-800/50 rounded-lg overflow-hidden hover:scale-105 transition-transform duration-300 cursor-pointer opacity-0';
+        
+        const randomSeed = Math.floor(Math.random() * 100);
+        newItem.innerHTML = `
+            <img src="http://static.photos/abstract/320x240/${randomSeed}" alt="Creation" class="w-full h-40 object-cover">
+            <div class="p-3">
+                <p class="text-sm text-gray-300 truncate">${description.substring(0, 30)}${description.length > 30 ? '...' : ''}</p>
+                <p class="text-xs text-gray-500">Just now</p>
+            </div>
+        `;
+        
+        recentContainer.insertBefore(newItem, recentContainer.firstChild);
+        
+        // Animate in
+        setTimeout(() => {
+            newItem.classList.remove('opacity-0');
+            newItem.classList.add('opacity-100');
+        }, 100);
+        
+        // Remove last item if more than 4
+        if (recentContainer.children.length > 4) {
+            recentContainer.removeChild(recentContainer.lastChild);
+        }
+    }
+    
+    // Notification system
+    function showNotification(message, type = 'info') {
+        const notification = document.createElement('div');
+        notification.className = `fixed top-20 right-4 px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 z-50`;
+        
+        const bgColor = type === 'warning' ? 'bg-yellow-500' : type === 'error' ? 'bg-red-500' : 'bg-primary-500';
+        notification.classList.add(bgColor);
+        
+        notification.innerHTML = `
+            <div class="flex items-center gap-2 text-white">
+                <i data-feather="${type === 'warning' ? 'alert-triangle' : 'info'}" class="w-5 h-5"></i>
+                <span>${message}</span>
+            </div>
+        `;
+        
+        document.body.appendChild(notification);
+        feather.replace();
+        
+        // Animate in
+        setTimeout(() => {
+            notification.classList.remove('translate-x-full');
+            notification.classList.add('translate-x-0');
+        }, 100);
+        
+        // Remove after 3 seconds
+        setTimeout(() => {
+            notification.classList.add('translate-x-full');
+            setTimeout(() => {
+                notification.remove();
+            }, 300);
+        }, 3000);
+    }
+    // Enhanced Canvas animation loop
+    let animationId;
+    function animateCanvas() {
+        if (!canvas.classList.contains('hidden') && canvas.dataset.style) {
+            const rotation = (Date.now() / 1000) % (Math.PI * 2);
+            const ctx = canvas.getContext('2d');
+            
+            draw3DModel(
+                ctx, 
+                canvas.width, 
+                canvas.height, 
+                canvas.dataset.style, 
+                rotation * 0.5
+            );
+        }
+        animationId = requestAnimationFrame(animateCanvas);
+    }
+    
+    // Start animation loop
+    animateCanvas();
+    
+    // Clean up animation when canvas is hidden
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                if (canvas.classList.contains('hidden')) {
+                    cancelAnimationFrame(animationId);
+                } else if (canvas.dataset.style) {
+                    animateCanvas();
+                }
+            }
+        });
+    });
+    
+    observer.observe(canvas, { attributes: true });
+});
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({ behavior: 'smooth' });
+        }
+    });
+});
+
+// Intersection Observer for animations
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('animate-fadeIn');
+        }
+    });
+}, observerOptions);
+
+document.querySelectorAll('.section-animate').forEach(el => {
+    observer.observe(el);
+});

style.css

@@ -1,28 +1,175 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom animations and global styles */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes gradient-shift {
+    0%, 100% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.animate-float {
+    animation: float 6s ease-in-out infinite;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.gradient-animate {
+    background: linear-gradient(-45deg, #0ea5e9, #d946ef, #0ea5e9, #d946ef);
+    background-size: 400% 400%;
+    animation: gradient-shift 15s ease infinite;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
+
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+}
+
+/* Glass morphism effect */
+.glass {
+    background: rgba(31, 41, 55, 0.5);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(75, 85, 99, 0.3);
+}
+
+/* Glow effects */
+.glow-primary {
+    box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);
+}
+
+.glow-secondary {
+    box-shadow: 0 0 20px rgba(217, 70, 239, 0.5);
+}
+
+/* Smooth transitions */
+* {
+    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Text selection */
+::selection {
+    background: rgba(14, 165, 233, 0.3);
+}
+
+/* Focus styles */
+.focus-ring:focus {
+    outline: none;
+    ring: 2px;
+    ring-color: #0ea5e9;
+    ring-offset: 2px;
+}
+
+/* Hover lift effect */
+.hover-lift {
+    transition: transform 0.2s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-4px);
+}
+
+/* Loading animation */
+.loading-dots::after {
+    content: '';
+    animation: dots 1.5s steps(4, end) infinite;
+}
+
+@keyframes dots {
+    0%, 20% {
+        content: '';
+    }
+    40% {
+        content: '.';
+    }
+    60% {
+        content: '..';
+    }
+    80%, 100% {
+        content: '...';
+    }
+}
+/* 3D Canvas styles */
+#3d-canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    border-radius: 8px;
+}
+
+/* Preview container enhancements */
+#preview-container {
+    position: relative;
+    background: linear-gradient(135deg, #1e293b, #0f172a);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+#preview-container::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(45deg, #0ea5e9, #d946ef, #0ea5e9);
+    border-radius: 12px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: -1;
+}
+
+#preview-container:hover::before {
+    opacity: 0.3;
+}
+
+/* Loading spinner for canvas */
+.canvas-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 60px;
+    height: 60px;
+    border: 3px solid rgba(14, 165, 233, 0.3);
+    border-top: 3px solid #0ea5e9;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: translate(-50%, -50%) rotate(0deg); }
+    100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+/* Style button active state */
+.style-btn.active {
+    background: linear-gradient(135deg, #0ea5e9, #d946ef);
+    color: white;
+}
+
+/* Responsive grid adjustments */
+@media (max-width: 768px) {
+    .grid-responsive {
+        grid-template-columns: 1fr;
+    }
+}