| <!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"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="gallery-grid"> |
| |
| </div> |
|
|
| |
| <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> |
| |
| 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(); |
| } |
| |
| |
| 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); |
| }); |
| }); |
| |
| |
| loadGalleryItems(); |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
