| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ArtVerse - Creative Gallery</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| dark: '#0f0f0f', |
| card: '#1a1a1a', |
| accent: '#00c8b3', |
| 'accent-hover': '#00b09d' |
| }, |
| fontFamily: { |
| sans: ['Inter', 'system-ui', 'sans-serif'], |
| } |
| } |
| } |
| } |
| </script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { font-family: 'Inter', sans-serif; } |
| .artwork-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 1.5rem; |
| } |
| @media (max-width: 640px) { |
| .artwork-grid { grid-template-columns: 1fr; } |
| } |
| .masonry-item { break-inside: avoid; margin-bottom: 1.5rem; } |
| .hover-overlay { |
| background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); |
| } |
| .like-anim { animation: heartBeat 0.3s ease; } |
| @keyframes heartBeat { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.2); } |
| } |
| .fade-in { animation: fadeIn 0.5s ease-in; } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .loading-skeleton { |
| background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%); |
| background-size: 200% 100%; |
| animation: loading 1.5s infinite; |
| } |
| @keyframes loading { |
| 0% { background-position: 200% 0; } |
| 100% { background-position: -200% 0; } |
| } |
| </style> |
| </head> |
| <body class="bg-dark text-gray-100 min-h-screen"> |
| |
| <nav class="fixed top-0 w-full bg-dark/95 backdrop-blur-md border-b border-gray-800 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <div class="flex items-center gap-8"> |
| <a href="#" class="flex items-center gap-2 text-2xl font-bold text-white"> |
| <i data-lucide="palette" class="text-accent"></i> |
| <span>ArtVerse</span> |
| </a> |
| <div class="hidden md:flex items-center gap-6 text-sm"> |
| <a href="#" class="hover:text-accent transition-colors">Browse</a> |
| <a href="#" class="hover:text-accent transition-colors">Watch</a> |
| <a href="#" class="hover:text-accent transition-colors">Community</a> |
| <a href="#" class="hover:text-accent transition-colors">Shop</a> |
| </div> |
| </div> |
| |
| <div class="flex items-center gap-4"> |
| <div class="relative hidden sm:block"> |
| <input type="text" |
| id="searchInput" |
| placeholder="Search artworks..." |
| class="bg-card border border-gray-700 rounded-full px-4 py-1.5 pl-10 text-sm focus:outline-none focus:border-accent w-64 transition-all"> |
| <i data-lucide="search" class="absolute left-3 top-2 w-4 h-4 text-gray-400"></i> |
| </div> |
| <button id="themeToggle" class="p-2 hover:bg-card rounded-full transition-colors"> |
| <i data-lucide="moon" class="w-5 h-5"></i> |
| </button> |
| <button class="bg-accent hover:bg-accent-hover text-dark font-semibold px-4 py-1.5 rounded-full text-sm transition-colors"> |
| Submit |
| </button> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-accent to-blue-500 cursor-pointer"></div> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
| |
| <div class="mb-12 text-center fade-in"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent"> |
| Discover Amazing Art |
| </h1> |
| <p class="text-gray-400 text-lg max-w-2xl mx-auto"> |
| Join the world's largest art community and share your creativity with millions of artists and art enthusiasts. |
| </p> |
| </div> |
|
|
| |
| <div class="flex flex-wrap items-center justify-center gap-3 mb-8 fade-in" style="animation-delay: 0.1s"> |
| <button class="filter-btn active px-4 py-2 rounded-full bg-accent text-dark font-medium text-sm transition-all" data-category="all"> |
| All |
| </button> |
| <button class="filter-btn px-4 py-2 rounded-full bg-card border border-gray-700 hover:border-accent text-sm transition-all" data-category="digital"> |
| Digital Art |
| </button> |
| <button class="filter-btn px-4 py-2 rounded-full bg-card border border-gray-700 hover:border-accent text-sm transition-all" data-category="traditional"> |
| Traditional |
| </button> |
| <button class="filter-btn px-4 py-2 rounded-full bg-card border border-gray-700 hover:border-accent text-sm transition-all" data-category="photography"> |
| Photography |
| </button> |
| <button class="filter-btn px-4 py-2 rounded-full bg-card border border-gray-700 hover:border-accent text-sm transition-all" data-category="3d"> |
| 3D & Fractal |
| </button> |
| <button class="filter-btn px-4 py-2 rounded-full bg-card border border-gray-700 hover:border-accent text-sm transition-all" data-category="anime"> |
| Anime & Manga |
| </button> |
| </div> |
|
|
| |
| <div class="flex justify-between items-center mb-6 fade-in" style="animation-delay: 0.2s"> |
| <span class="text-gray-400 text-sm" id="resultCount">Showing 12 artworks</span> |
| <select id="sortSelect" class="bg-card border border-gray-700 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-accent cursor-pointer"> |
| <option value="newest">Newest First</option> |
| <option value="popular">Most Popular</option> |
| <option value="comments">Most Commented</option> |
| </select> |
| </div> |
|
|
| |
| <div id="gallery" class="artwork-grid fade-in" style="animation-delay: 0.3s"> |
| |
| </div> |
|
|
| |
| <div id="loadingState" class="hidden py-12"> |
| <div class="flex justify-center items-center gap-2"> |
| <div class="w-3 h-3 bg-accent rounded-full animate-bounce"></div> |
| <div class="w-3 h-3 bg-accent rounded-full animate-bounce" style="animation-delay: 0.1s"></div> |
| <div class="w-3 h-3 bg-accent rounded-full animate-bounce" style="animation-delay: 0.2s"></div> |
| </div> |
| <p class="text-center text-gray-400 mt-4 text-sm">Loading amazing artworks...</p> |
| </div> |
|
|
| |
| <div class="mt-12 text-center"> |
| <button id="loadMoreBtn" class="px-8 py-3 bg-card border border-gray-700 hover:border-accent rounded-full text-sm font-medium transition-all hover:scale-105"> |
| Load More Artworks |
| </button> |
| </div> |
| </main> |
|
|
| |
| <div id="imageModal" class="fixed inset-0 bg-black/95 z-[60] hidden overflow-y-auto"> |
| <div class="min-h-screen px-4 text-center"> |
| <button id="closeModal" class="fixed top-4 right-4 p-2 hover:bg-white/10 rounded-full transition-colors z-50"> |
| <i data-lucide="x" class="w-8 h-8"></i> |
| </button> |
| |
| <div class="inline-block w-full max-w-6xl my-8 text-left align-middle transition-all transform bg-card rounded-lg shadow-2xl overflow-hidden" id="modalContent"> |
| <div class="grid md:grid-cols-3 gap-0"> |
| |
| <div class="md:col-span-2 bg-black flex items-center justify-center p-4 md:p-8"> |
| <img id="modalImage" src="" alt="" class="max-h-[80vh] w-auto object-contain rounded-lg shadow-2xl"> |
| </div> |
| |
| |
| <div class="p-6 md:p-8 border-l border-gray-800"> |
| <div class="flex items-start justify-between mb-4"> |
| <div> |
| <h2 id="modalTitle" class="text-2xl font-bold mb-1"></h2> |
| <p id="modalCategory" class="text-accent text-sm"></p> |
| </div> |
| <div class="flex gap-2"> |
| <button id="modalLikeBtn" class="p-2 hover:bg-white/10 rounded-full transition-colors group"> |
| <i data-lucide="heart" class="w-6 h-6 group-hover:text-red-500 transition-colors"></i> |
| </button> |
| <button class="p-2 hover:bg-white/10 rounded-full transition-colors"> |
| <i data-lucide="bookmark" class="w-6 h-6"></i> |
| </button> |
| <button class="p-2 hover:bg-white/10 rounded-full transition-colors"> |
| <i data-lucide="share-2" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="flex items-center gap-3 mb-6 pb-6 border-b border-gray-800"> |
| <img id="modalAvatar" src="" class="w-12 h-12 rounded-full bg-gray-700"> |
| <div class="flex-1"> |
| <h3 id="modalArtist" class="font-semibold hover:text-accent cursor-pointer transition-colors"></h3> |
| <p class="text-xs text-gray-400">Professional Digital Artist</p> |
| </div> |
| <button class="px-4 py-1.5 bg-accent text-dark text-sm font-semibold rounded-full hover:bg-accent-hover transition-colors"> |
| Watch |
| </button> |
| </div> |
|
|
| <div class="space-y-4 mb-6"> |
| <div class="flex items-center gap-4 text-sm text-gray-400"> |
| <span class="flex items-center gap-1"> |
| <i data-lucide="eye" class="w-4 h-4"></i> |
| <span id="modalViews"></span> |
| </span> |
| <span class="flex items-center gap-1"> |
| <i data-lucide="message-circle" class="w-4 h-4"></i> |
| <span id="modalComments"></span> |
| </span> |
| <span class="flex items-center gap-1"> |
| <i data-lucide="heart" class="w-4 h-4"></i> |
| <span id="modalLikes"></span> |
| </span> |
| </div> |
| <p id="modalDescription" class="text-gray-300 leading-relaxed text-sm"></p> |
| </div> |
|
|
| <div class="flex flex-wrap gap-2 mb-6" id="modalTags"> |
| |
| </div> |
|
|
| <button class="w-full py-3 bg-accent text-dark font-semibold rounded-lg hover:bg-accent-hover transition-colors flex items-center justify-center gap-2"> |
| <i data-lucide="download" class="w-5 h-5"></i> |
| Download Full Size |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="toast" class="fixed bottom-4 right-4 bg-accent text-dark px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 font-medium flex items-center gap-2"> |
| <i data-lucide="check-circle" class="w-5 h-5"></i> |
| <span id="toastMessage">Action successful!</span> |
| </div> |
|
|
| <script src="script.js"></script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
