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