Design a neomorphic AI art gallery website using GraphQL with progressive web app. Provide detailed specifications for user experience, technical architecture, and monetization strategy.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Neuromorph Gallery
-emoji: 🔥
-colorFrom: green
-colorTo: gray
+title: NeuroMorph Gallery 🧠
+colorFrom: yellow
+colorTo: red
+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://deepsite.hf.co).

components/artwork-card.js

@@ -0,0 +1,209 @@
+class ArtworkCard extends HTMLElement {
+    connectedCallback() {
+        const artworkData = JSON.parse(this.getAttribute('data-artwork'));
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .artwork-card {
+                    background: linear-gradient(145deg, #ffffff, #e6e6e6);
+                    border-radius: 20px;
+                    padding: 1.5rem;
+                    transition: all 0.3s ease;
+                    cursor: pointer;
+                    position: relative;
+                    overflow: hidden;
+                }
+                
+                .artwork-card:hover {
+                    transform: translateY(-8px);
+                    box-shadow: 15px 15px 30px #c9c9c9, -15px -15px 30px #ffffff;
+                }
+                
+                .artwork-image {
+                    width: 100%;
+                    height: 250px;
+                    object-fit: cover;
+                    border-radius: 15px;
+                    margin-bottom: 1rem;
+                    transition: transform 0.3s ease;
+                }
+                
+                .artwork-card:hover .artwork-image {
+                    transform: scale(1.05);
+                }
+                
+                .artwork-title {
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    color: #1f2937;
+                    margin-bottom: 0.5rem;
+                }
+                
+                .artwork-description {
+                    color: #6b7280;
+                    font-size: 0.875rem;
+                    margin-bottom: 1rem;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                }
+                
+                .artist-info {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    margin-bottom: 1rem;
+                }
+                
+                .artist-avatar {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 50%;
+                    object-fit: cover;
+                }
+                
+                .artist-name {
+                    color: #4b5563;
+                    font-weight: 500;
+                }
+                
+                .artwork-stats {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-top: 1rem;
+                }
+                
+                .stat {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.25rem;
+                    color: #6b7280;
+                    font-size: 0.875rem;
+                }
+                
+                .tags {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 0.5rem;
+                    margin-top: 1rem;
+                }
+                
+                .tag {
+                    background: linear-gradient(135deg, #f97316, #fb923c);
+                    color: white;
+                    padding: 0.25rem 0.75rem;
+                    border-radius: 15px;
+                    font-size: 0.75rem;
+                    font-weight: 500;
+                }
+                
+                .like-btn {
+                    background: none;
+                    border: none;
+                    color: #ef4444;
+                    cursor: pointer;
+                    transition: transform 0.2s ease;
+                }
+                
+                .like-btn:hover {
+                    transform: scale(1.1);
+                }
+                
+                .premium-badge {
+                    position: absolute;
+                    top: 1rem;
+                    right: 1rem;
+                    background: linear-gradient(135deg, #fbbf24, #f59e0b);
+                    color: #1f2937;
+                    padding: 0.25rem 0.75rem;
+                    border-radius: 12px;
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                }
+            </style>
+            
+            <div class="artwork-card neomorphic-card">
+                ${artworkData.premium ? '<div class="premium-badge">Premium</div>' : ''}
+                
+                <img 
+                    src="${artworkData.imageUrl}" 
+                    alt="${artworkData.title}"
+                    class="artwork-image"
+                    loading="lazy"
+                >
+                
+                <h3 class="artwork-title">${artworkData.title}</h3>
+                
+                <p class="artwork-description">${artworkData.description}</p>
+                
+                <div class="artist-info">
+                    <img 
+                        src="${artworkData.artist.avatar}" 
+                        alt="${artworkData.artist.name}"
+                        class="artist-avatar"
+                    >
+                    <span class="artist-name">${artworkData.artist.name}</span>
+                </div>
+                
+                <div class="tags">
+                    ${artworkData.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+                
+                <div class="artwork-stats">
+                    <div class="stat">
+                        <i data-feather="eye"></i>
+                        <span>${artworkData.views.toLocaleString()}</span>
+                    </div>
+                    
+                    <button class="like-btn">
+                        <i data-feather="heart"></i>
+                        <span>${artworkData.likes.toLocaleString()}</span>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        this.setupInteractions();
+    }
+    
+    setupInteractions() {
+        const likeBtn = this.shadowRoot.querySelector('.like-btn');
+        const card = this.shadowRoot.querySelector('.artwork-card');
+        
+        likeBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggleLike();
+        });
+        
+        card.addEventListener('click', () => {
+            this.viewArtworkDetails();
+        });
+    }
+    
+    toggleLike() {
+        const heartIcon = this.shadowRoot.querySelector('.like-btn i');
+        const likesCount = this.shadowRoot.querySelector('.like-btn span');
+        
+        let currentLikes = parseInt(likesCount.textContent.replace(/,/g, '')) || 0;
+        
+        if (heartIcon.getAttribute('data-feather') === 'heart') {
+            heartIcon.setAttribute('data-feather', 'heart');
+            likesCount.textContent = (currentLikes + 1).toLocaleString();
+        } else {
+            heartIcon.setAttribute('data-feather', 'heart');
+            likesCount.textContent = (currentLikes - 1).toLocaleString();
+        }
+        
+        feather.replace();
+    }
+    
+    viewArtworkDetails() {
+        const artworkData = JSON.parse(this.getAttribute('data-artwork'));
+        
+        // Navigate to artwork details page
+        window.location.href = `/artwork.html?id=${artworkData.id}`;
+    }
+}
+
+customElements.define('artwork-card', ArtworkCard);

components/footer.js

@@ -0,0 +1,143 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+                    color: white;
+                    padding: 3rem 2rem;
+                    margin-top: auto;
+                }
+                
+                .footer-content {
+                    max-width: 7xl;
+                    margin: 0 auto;
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                    gap: 2rem;
+                }
+                
+                .footer-section h3 {
+                    color: #f97316;
+                    margin-bottom: 1rem;
+                    font-weight: 600;
+                }
+                
+                .footer-links {
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+                }
+                
+                .footer-links li {
+                    margin-bottom: 0.5rem;
+                }
+                
+                .footer-links a {
+                    color: #d1d5db;
+                    text-decoration: none;
+                    transition: color 0.3s ease;
+                }
+                
+                .footer-links a:hover {
+                    color: #f97316;
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+                
+                .social-links a {
+                    color: #d1d5db;
+                    transition: color 0.3s ease;
+                }
+                
+                .social-links a:hover {
+                    color: #0ea5e9;
+                }
+                
+                .footer-bottom {
+                    border-top: 1px solid #374151;
+                    padding-top: 2rem;
+                    margin-top: 2rem;
+                    text-align: center;
+                }
+                
+                .newsletter-input {
+                    background: rgba(255, 255, 255, 0.1);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    border-radius: 8px;
+                    padding: 0.75rem 1rem;
+                    color: white;
+                    width: 100%;
+                    margin-bottom: 1rem;
+                }
+                
+                .newsletter-input:focus {
+                    outline: none;
+                    border-color: #0ea5e9;
+                }
+                
+                @media (max-width: 768px) {
+                    footer {
+                        padding: 2rem 1rem;
+                    }
+                }
+            </style>
+            <footer>
+                <div class="footer-content">
+                    <div class="footer-section">
+                        <h3>NeuroMorph Gallery</h3>
+                        <p>Where artificial intelligence meets artistic expression in a neomorphic digital realm.</p>
+                        <div class="social-links">
+                            <a href="#"><i data-feather="twitter"></i></a>
+                            <a href="#"><i data-feather="instagram"></i></a>
+                            <a href="#"><i data-feather="github"></i></a>
+                            <a href="#"><i data-feather="discord"></i></a>
+                        </div>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3>Explore</h3>
+                        <ul class="footer-links">
+                            <li><a href="/gallery.html">Featured Artworks</a></li>
+                            <li><a href="/artists.html">AI Artists</a></li>
+                            <li><a href="/collections.html">Collections</a></li>
+                            <li><a href="/trending.html">Trending</a></li>
+                            <li><a href="/new.html">New Arrivals</a></li>
+                        </ul>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3>Community</h3>
+                        <ul class="footer-links">
+                            <li><a href="/events.html">Events</a></li>
+                            <li><a href="/forum.html">Forum</a></li>
+                            <li><a href="/competitions.html">Competitions</a></li>
+                            <li><a href="/blog.html">Blog</a></li>
+                            <li><a href="/support.html">Support</a></li>
+                        </ul>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3>Newsletter</h3>
+                        <p>Stay updated with the latest AI art trends and featured artists.</p>
+                        <input type="email" placeholder="Enter your email" class="newsletter-input">
+                        <button class="bg-primary hover:bg-orange-600 text-white px-6 py-2 rounded-lg font-semibold transition-colors duration-300">
+                            Subscribe
+                        </button>
+                    </div>
+                </div>
+                
+                <div class="footer-bottom">
+                    <p>&copy; 2024 NeuroMorph Gallery. All rights reserved. | <a href="/privacy.html" class="text-secondary hover:text-sky-400">Privacy Policy</a> | <a href="/terms.html" class="text-secondary hover:text-sky-400">Terms of Service</a></p>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,199 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: sticky;
+                    top: 0;
+                    z-index: 50;
+                }
+                
+                nav {
+                    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+                    padding: 1rem 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    backdrop-filter: blur(10px);
+                }
+                
+                .logo {
+                    color: white;
+                    font-weight: 800;
+                    font-size: 1.5rem;
+                    background: linear-gradient(135deg, #f97316, #fb923c);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    list-style: none;
+                    margin: 0;
+                    padding: 0;
+                    align-items: center;
+                }
+                
+                .nav-link {
+                    color: white;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: all 0.3s ease;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                
+                .nav-link:hover {
+                    color: #f97316;
+                    transform: translateY(-1px);
+                }
+                
+                .search-container {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                }
+                
+                .search-input {
+                    background: rgba(255, 255, 255, 0.1);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    border-radius: 25px;
+                    padding: 0.5rem 1rem 0.5rem 2.5rem;
+                    color: white;
+                    transition: all 0.3s ease;
+                }
+                
+                .search-input:focus {
+                    outline: none;
+                    border-color: #f97316;
+                    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
+                }
+                
+                .search-icon {
+                    position: absolute;
+                    left: 1rem;
+                    color: #9ca3af;
+                }
+                
+                .mobile-menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                }
+                
+                @media (max-width: 768px) {
+                    nav {
+                        padding: 1rem;
+                    }
+                    
+                    .nav-links {
+                        display: none;
+                        position: absolute;
+                        top: 100%;
+                        left: 0;
+                        right: 0;
+                        background: #111827;
+                        flex-direction: column;
+                        padding: 1rem;
+                        gap: 1rem;
+                    }
+                    
+                    .nav-links.active {
+                        display: flex;
+                    }
+                    
+                    .mobile-menu-btn {
+                        display: block;
+                    }
+                }
+            </style>
+            <nav>
+                <div class="logo">NeuroMorph</div>
+                
+                <ul class="nav-links">
+                    <li>
+                        <a href="/" class="nav-link">
+                            <i data-feather="home"></i>
+                            Home
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/gallery.html" class="nav-link">
+                            <i data-feather="image"></i>
+                            Gallery
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/upload.html" class="nav-link">
+                            <i data-feather="upload"></i>
+                            Upload
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/artists.html" class="nav-link">
+                            <i data-feather="users"></i>
+                            Artists
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/about.html" class="nav-link">
+                            <i data-feather="info"></i>
+                            About
+                        </a>
+                    </li>
+                    <li class="search-container">
+                        <i data-feather="search" class="search-icon"></i>
+                        <input type="search" placeholder="Search artworks..." class="search-input">
+                    </li>
+                    <li>
+                        <a href="/profile.html" class="nav-link">
+                            <i data-feather="user"></i>
+                            Profile
+                        </a>
+                    </li>
+                </ul>
+                
+                <button class="mobile-menu-btn">
+                    <i data-feather="menu"></i>
+                </button>
+            </nav>
+        `;
+        
+        this.setupMobileMenu();
+        this.setupSearch();
+    }
+    
+    setupMobileMenu() {
+        const menuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
+        const navLinks = this.shadowRoot.querySelector('.nav-links');
+        
+        menuBtn.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+            const icon = menuBtn.querySelector('i');
+            if (navLinks.classList.contains('active')) {
+            icon.setAttribute('data-feather', 'x');
+            } else {
+            icon.setAttribute('data-feather', 'menu');
+            }
+            feather.replace();
+        });
+    }
+    
+    setupSearch() {
+        const searchInput = this.shadowRoot.querySelector('.search-input');
+        
+        searchInput.addEventListener('input', (e) => {
+            const query = e.target.value;
+            // Search functionality will be handled by main script
+        });
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

gallery.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gallery - NeuroMorph Gallery</title>
+    <meta name="description" content="Browse our complete collection of AI-generated artworks">
+    <link rel="manifest" href="manifest.json">
+    <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 = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#f97316',
+                        secondary: '#0ea5e9'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    
+    <main class="flex-grow py-12 px-4">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12">
+                <h1 class="text-4xl font-bold text-gray-800 mb-4 md:mb-0">Complete Gallery</h1>
+                
+                <div class="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
+                    <select class="neomorphic-input">
+                        <option value="">All Categories</option>
+                        <option value="abstract">Abstract</option>
+                        <option value="portrait">Portrait</option>
+                        <option value="landscape">Landscape</option>
+                        <option value="surreal">Surreal</option>
+                        <option value="futuristic">Futuristic</option>
+                    </select>
+                    
+                    <select class="neomorphic-input">
+                        <option value="newest">Newest First</option>
+                        <option value="popular">Most Popular</option>
+                        <option value="trending">Trending</option>
+                    </select>
+                </div>
+            </div>
+            
+            <div id="gallery-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Gallery items will be loaded here -->
+                </div>
+                
+                <div class="flex justify-center mt-12">
+                    <div class="flex gap-2">
+                        <button class="bg-primary text-white px-4 py-2 rounded-lg">1</button>
+                    <button class="neomorphic-button px-4 py-2">2</button>
+                        <button class="neomorphic-button px-4 py-2">3</button>
+                        <button class="neomorphic-button px-4 py-2">Next</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/artwork-card.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Load gallery items
+        document.addEventListener('DOMContentLoaded', async () => {
+            const gallery = new NeuroMorphGallery();
+            await gallery.loadGalleryItems();
+        });
+    </script>
+</body>
+</html>

index.html

@@ -1,19 +1,122 @@
-<!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">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NeuroMorph Gallery - AI Art Showcase</title>
+    <meta name="description" content="Discover stunning AI-generated art in our neomorphic gallery">
+    <link rel="manifest" href="manifest.json">
+    <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 src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#f97316',
+                        secondary: '#0ea5e9'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    
+    <main class="flex-grow">
+        <!-- Hero Section with Vanta.js Background -->
+        <section id="hero" class="relative h-screen flex items-center justify-center overflow-hidden">
+            <div class="absolute inset-0 z-0" id="vanta-bg"></div>
+            <div class="relative z-10 text-center text-white px-4">
+                <h1 class="text-5xl md:text-7xl font-bold mb-6 drop-shadow-2xl">
+                    NeuroMorph Gallery
+                </h1>
+                <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">
+                    Where artificial intelligence meets artistic expression in a neomorphic digital realm
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="#gallery" class="bg-primary hover:bg-orange-600 text-white px-8 py-4 rounded-2xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-2xl">
+                        Explore Gallery
+                    </a>
+                    <a href="/upload.html" class="bg-secondary hover:bg-sky-600 text-white px-8 py-4 rounded-2xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-2xl">
+                        Upload Art
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Featured Gallery Section -->
+        <section id="gallery" class="py-20 px-4">
+            <div class="max-w-7xl mx-auto">
+                <h2 class="text-4xl font-bold text-center mb-4 text-gray-800">Featured AI Artworks</h2>
+                <p class="text-xl text-center mb-12 text-gray-600">Curated collection of machine-generated masterpieces</p>
+                
+                <div id="artworks-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Artworks will be dynamically loaded here -->
+                </div>
+
+                <div class="text-center mt-12">
+                    <button id="load-more" class="bg-primary hover:bg-orange-600 text-white px-8 py-3 rounded-xl font-semibold transition-all duration-300">
+                    <i data-feather="plus" class="inline mr-2"></i>
+                    Load More Artworks
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Stats Section -->
+        <section class="bg-gray-800 text-white py-16">
+            <div class="max-w-7xl mx-auto px-4">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+                    <div class="p-6 rounded-2xl bg-gray-700 shadow-2xl">
+                    <div class="text-4xl font-bold text-primary mb-2" id="total-artworks">1,247</div>
+                    <div class="text-lg">AI Artworks</div>
+                </div>
+                <div class="p-6 rounded-2xl bg-gray-700 shadow-2xl">
+                    <div class="text-4xl font-bold text-secondary mb-2" id="active-artists">356</div>
+                    <div class="text-lg">AI Artists</div>
+                </div>
+                <div class="p-6 rounded-2xl bg-gray-700 shadow-2xl">
+                    <div class="text-4xl font-bold text-primary mb-2" id="monthly-views">89.2K</div>
+                    <div class="text-lg">Monthly Views</div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/artwork-card.js"></script>
+    
+    <!-- Main Script -->
+    <script src="script.js"></script>
+    
+    <script>
+        feather.replace();
+        
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0xf97316,
+            backgroundColor: 0x111827,
+            size: 1.00
+        });
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>

manifest.json

@@ -0,0 +1,68 @@
+json
+{
+    "name": "NeuroMorph Gallery",
+    "short_name": "NeuroMorph",
+    "description": "AI Art Gallery showcasing machine-generated masterpieces",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#111827",
+    "theme_color": "#f97316",
+    "orientation": "portrait",
+    "start_url": "/",
+    "icons": [
+        {
+            "src": "/static/icons/icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/icon-96x96.png",
+            "sizes": "96x96",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/icon-128x128.png",
+            "sizes": "128x128",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/icon-128x128.png",
+            "sizes": "128x128",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/icon-152x152.png",
+            "sizes": "152x152",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/icon-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "categories": ["art", "entertainment", "technology"],
+    "lang": "en-US"
+}
+
+</html>

script.js

@@ -0,0 +1,225 @@
+// NeuroMorph Gallery - Shared JavaScript
+class NeuroMorphGallery {
+    constructor() {
+        this.artworks = [];
+        this.currentPage = 1;
+        this.artworksPerPage = 9;
+        this.init();
+    }
+
+    async init() {
+        await this.registerServiceWorker();
+        this.setupEventListeners();
+        await this.loadArtworks();
+        this.updateStats();
+        this.setupOfflineDetection();
+    }
+
+    // PWA Service Worker Registration
+    async registerServiceWorker() {
+        if ('serviceWorker' in navigator) {
+            try {
+                await navigator.serviceWorker.register('/sw.js');
+                console.log('Service Worker registered successfully');
+            } catch (error) {
+                console.error('Service Worker registration failed:', error);
+            }
+        }
+    }
+
+    // GraphQL API Integration
+    async fetchArtworks(page = 1) {
+        const query = `
+            query GetArtworks($page: Int!, $limit: Int!) {
+                artworks(page: $page, limit: $limit) {
+                    id
+                    title
+                    description
+                    imageUrl
+                    artist {
+                        name
+                        avatar
+                    }
+                    likes
+                    views
+                    createdAt
+                    tags
+                }
+            }
+        `;
+
+        try {
+            const response = await fetch('/graphql', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    query,
+                    variables: { page, limit: this.artworksPerPage }
+                })
+            });
+
+            const result = await response.json();
+            return result.data?.artworks || [];
+        } catch (error) {
+            console.error('Error fetching artworks:', error);
+            
+            // Fallback to mock data if API is unavailable
+            return this.getMockArtworks(page);
+        }
+    }
+
+    // Mock data for demonstration
+    getMockArtworks(page) {
+        const mockArtworks = [];
+        const startIndex = (page - 1) * this.artworksPerPage;
+        
+        for (let i = 0; i < this.artworksPerPage; i++) {
+            mockArtworks.push({
+                id: `artwork-${startIndex + i + 1}`,
+                title: `AI Dreamscape ${startIndex + i + 1}`,
+                description: 'A stunning AI-generated artwork showcasing the intersection of technology and creativity.',
+                imageUrl: `http://static.photos/abstract/640x360/${startIndex + i + 1}`,
+                artist: {
+                    name: `NeuralArtist${startIndex + i + 1}`,
+                    avatar: `http://static.photos/people/200x200/${startIndex + i + 1}`
+                },
+                likes: Math.floor(Math.random() * 1000),
+                views: Math.floor(Math.random() * 5000),
+                createdAt: new Date().toISOString(),
+                tags: ['AI', 'Digital Art', 'Abstract', 'Modern']
+            });
+        }
+        
+        return mockArtworks;
+    }
+
+    // Load and display artworks
+    async loadArtworks() {
+        const artworks = await this.fetchArtworks(this.currentPage);
+        this.artworks = [...this.artworks, ...artworks];
+        this.renderArtworks(artworks);
+    }
+
+    renderArtworks(artworks) {
+        const grid = document.getElementById('artworks-grid');
+        
+        artworks.forEach(artwork => {
+            const artworkCard = document.createElement('artwork-card');
+            artworkCard.setAttribute('data-artwork', JSON.stringify(artwork));
+            grid.appendChild(artworkCard);
+        });
+    }
+
+    // Update statistics
+    updateStats() {
+        // Simulate real-time stats updates
+        setInterval(() => {
+            document.getElementById('total-artworks').textContent = 
+                (1247 + Math.floor(Math.random() * 10)).toLocaleString();
+            
+            document.getElementById('active-artists').textContent = 
+                (356 + Math.floor(Math.random() * 5)).toLocaleString();
+            
+            document.getElementById('monthly-views').textContent = 
+                (89200 + Math.floor(Math.random() * 1000)).toLocaleString();
+        }, 5000);
+    }
+
+    // Event listeners setup
+    setupEventListeners() {
+        // Load more artworks
+        const loadMoreBtn = document.getElementById('load-more');
+        if (loadMoreBtn) {
+            loadMoreBtn.addEventListener('click', () => {
+                this.currentPage++;
+                this.loadArtworks();
+            });
+        }
+
+        // Search functionality
+        const searchInput = document.querySelector('input[type="search"]');
+        if (searchInput) {
+            searchInput.addEventListener('input', (e) => {
+                this.searchArtworks(e.target.value);
+            });
+        }
+    }
+
+    // Search artworks
+    searchArtworks(query) {
+        const filtered = this.artworks.filter(artwork => 
+            artwork.title.toLowerCase().includes(query.toLowerCase()) ||
+            artwork.description.toLowerCase().includes(query.toLowerCase()) ||
+            artwork.tags.some(tag => tag.toLowerCase().includes(query.toLowerCase()))
+        );
+
+        this.renderSearchResults(filtered);
+    }
+
+    renderSearchResults(artworks) {
+        const grid = document.getElementById('artworks-grid');
+        grid.innerHTML = '';
+        
+        artworks.forEach(artwork => {
+            const artworkCard = document.createElement('artwork-card');
+            artworkCard.setAttribute('data-artwork', JSON.stringify(artwork));
+            grid.appendChild(artworkCard);
+        });
+    }
+
+    // Offline detection
+    setupOfflineDetection() {
+        window.addEventListener('online', () => {
+            this.hideOfflineIndicator();
+            console.log('App is online');
+        });
+
+        window.addEventListener('offline', () => {
+            this.showOfflineIndicator();
+            console.log('App is offline');
+        });
+    }
+
+    showOfflineIndicator() {
+        const indicator = document.createElement('div');
+        indicator.className = 'offline-indicator';
+        indicator.textContent = 'You are currently offline. Some features may be limited.';
+        indicator.style.display = 'block';
+        document.body.appendChild(indicator);
+    }
+
+    hideOfflineIndicator() {
+        const indicator = document.querySelector('.offline-indicator');
+        if (indicator) {
+            indicator.style.display = 'none';
+        }
+    }
+
+    // Image optimization and lazy loading
+    optimizeImages() {
+        const images = document.querySelectorAll('img[data-src]');
+        
+        const imageObserver = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.src = img.dataset.src;
+                    img.removeAttribute('data-src');
+                    observer.unobserve(img);
+                }
+            });
+        });
+
+        images.forEach(img => imageObserver.observe(img));
+    }
+}
+
+// Initialize the gallery when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new NeuroMorphGallery();
+});
+
+// Export for use in other modules
+window.NeuroMorphGallery = NeuroMorphGallery;

style.css

@@ -1,28 +1,109 @@
+/* NeuroMorph Gallery - Shared Styles */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    min-height: 100vh;
+}
+
+/* Neomorphic Design Elements */
+.neomorphic-card {
+    background: linear-gradient(145deg, #ffffff, #e6e6e6);
+    border-radius: 20px;
+    box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff;
+    transition: all 0.3s ease;
+}
+
+.neomorphic-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 12px 12px 24px #c9c9c9, -12px -12px 24px #ffffff;
+}
+
+.neomorphic-button {
+    background: linear-gradient(145deg, #ffffff, #e6e6e6);
+    border-radius: 15px;
+    box-shadow: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff;
+    transition: all 0.3s ease;
+}
+
+.neomorphic-button:hover {
+    box-shadow: 3px 3px 6px #c9c9c9, -3px -3px 6px #ffffff;
+    transform: translateY(2px);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.neomorphic-input {
+    background: linear-gradient(145deg, #ffffff, #e6e6e6);
+    border: none;
+    border-radius: 15px;
+    box-shadow: inset 5px 5px 10px #d1d1d1, inset -5px -5px 10px #ffffff;
+    padding: 12px 20px;
+    font-size: 16px;
+    transition: all 0.3s ease;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.neomorphic-input:focus {
+    outline: none;
+    box-shadow: inset 3px 3px 6px #c9c9c9, inset -3px -3px 6px #ffffff;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #f97316, #fb923c);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #ea580c, #f97316);
+}
+
+/* Loading animation */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.loading {
+    animation: pulse 2s infinite;
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+    .neomorphic-card {
+        border-radius: 15px;
+        box-shadow: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff;
+    }
+}
+
+/* PWA offline indicator */
+.offline-indicator {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: #ef4444;
+    color: white;
+    text-align: center;
+    padding: 10px;
+    z-index: 1000;
+    display: none;
+}

sw.js

@@ -0,0 +1,92 @@
+// Service Worker for NeuroMorph Gallery PWA
+const CACHE_NAME = 'neuromorph-gallery-v1.0.0';
+const urlsToCache = [
+    '/',
+    '/style.css',
+    '/script.js',
+    '/components/navbar.js',
+    '/components/footer.js',
+    '/components/artwork-card.js',
+    '/gallery.html',
+    '/upload.html',
+    '/manifest.json'
+];
+
+// Install event
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then((cache) => {
+                return cache.addAll(urlsToCache);
+            })
+    );
+});
+
+// Activate event
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+});
+
+// Fetch event
+self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        caches.match(event.request)
+            .then((response) => {
+                // Return cached version or fetch from network
+                return response || fetch(event.request);
+            })
+    );
+});
+
+// Background sync for offline uploads
+self.addEventListener('sync', (event) => {
+    if (event.tag === 'background-upload') {
+        event.waitUntil(doBackgroundUpload());
+    }
+});
+
+async function doBackgroundUpload() {
+    // Handle background uploads when connection is restored
+    const db = await openDB();
+    const pendingUploads = await db.getAll('pendingUploads');
+    
+    for (const upload of pendingUploads) {
+        try {
+            await fetch('/api/upload', {
+                method: 'POST',
+                body: upload.data
+            });
+            await db.delete('pendingUploads', upload.id);
+        } catch (error) {
+            console.error('Background upload failed:', error);
+        }
+    }
+}
+
+// IndexedDB for offline storage
+function openDB() {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open('NeuroMorphGallery', 1);
+        
+        request.onerror = () => reject(request.error);
+        request.onsuccess = () => resolve(request.result);
+        
+        request.onupgradeneeded = (event) => {
+            const db = event.target.result;
+            
+            // Create object store for artworks
+            if (!db.objectStoreNames.contains('artworks')) {
+                const store = db.createObjectStore('artworks', { keyPath: 'id' });
+            store.createIndex('title', 'title', { unique: false });
+            store.createIndex('artist', 'artist.name', { unique: false });
+        };
+    });
+}

upload.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload AI Art - NeuroMorph Gallery</title>
+    <meta name="description" content="Upload your AI-generated artworks to NeuroMorph Gallery">
+    <link rel="manifest" href="manifest.json">
+    <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 = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#f97316',
+                        secondary: '#0ea5e9'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    
+    <main class="flex-grow py-12 px-4">
+        <div class="max-w-4xl mx-auto">
+            <div class="text-center mb-12">
+                <h1 class="text-4xl font-bold text-gray-800 mb-4">Upload Your AI Art</h1>
+                <p class="text-xl text-gray-600">Share your machine-generated masterpieces with the world</p>
+            </div>
+            
+            <div class="neomorphic-card p-8">
+                <form id="upload-form" class="space-y-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Artwork Title</label>
+                        <input 
+                            type="text" 
+                            required 
+                            class="neomorphic-input w-full"
+                            placeholder="Enter a captivating title"
+                        >
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
+                        <textarea 
+                            required 
+                            class="neomorphic-input w-full h-32 resize-none"
+                            placeholder="Describe your artwork, the AI model used, inspiration, etc."
+                        ></textarea>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">AI Model Used</label>
+                        <select class="neomorphic-input w-full">
+                            <option value="">Select AI Model</option>
+                            <option value="dalle">DALL-E</option>
+                            <option value="midjourney">Midjourney</option>
+                            <option value="stable-diffusion">Stable Diffusion</option>
+                            <option value="gpt-art">GPT Art</option>
+                            <option value="custom">Custom Model</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Artwork Image</label>
+                        <div class="border-2 border-dashed border-gray-300 rounded-2xl p-8 text-center transition-all duration-300 hover:border-primary" id="drop-zone">
+                        <i data-feather="upload-cloud" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>
+                        <p class="text-gray-500 mb-2">Drag & drop your image here</p>
+                        <p class="text-sm text-gray-400 mb-4">PNG, JPG, WEBP up to 10MB</p>
+                        <button type="button" class="bg-secondary hover:bg-sky-600 text-white px-6 py-2 rounded-xl font-semibold transition-colors duration-300">
+                            Choose File
+                        </button>
+                        <input type="file" accept="image/*" class="hidden" id="file-input">
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Tags</label>
+                        <input 
+                            type="text" 
+                            class="neomorphic-input w-full"
+                            placeholder="AI, digital art, abstract, etc."
+                        >
+                        <p class="text-xs text-gray-500 mt-1">Separate tags with commas</p>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">License Type</label>
+                        <select class="neomorphic-input w-full">
+                            <option value="cc-by">Creative Commons Attribution</option>
+                            <option value="cc-by-nc">Creative Commons Non-Commercial</option>
+                            <option value="all-rights">All Rights Reserved</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label class="flex items-center">
+                            <input type="checkbox" class="rounded text-primary">
+                            <span class="ml-2 text-gray-700">Make this artwork premium</span>
+                        </label>
+                        <p class="text-xs text-gray-500 mt-1">Premium artworks get featured placement and higher visibility</p>
+                    </div>
+                </div>
+                
+                <div class="flex flex-col sm:flex-row gap-4 justify-end">
+                    <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-xl font-semibold transition-colors duration-300">
+                            Cancel
+                        </button>
+                        <button type="submit" class="bg-primary hover:bg-orange-600 text-white px-8 py-3 rounded-xl font-semibold transition-colors duration-300">
+                            <i data-feather="upload" class="inline mr-2"></i>
+                            Upload Artwork
+                        </button>
+                    </div>
+                </form>
+            </div>
+            
+            <!-- Upload Guidelines -->
+            <div class="neomorphic-card p-8 mt-8">
+                <h2 class="text-2xl font-bold text-gray-800 mb-4">Upload Guidelines</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <h3 class="font-semibold text-gray-700 mb-2">Quality Standards</h3>
+                        <ul class="text-gray-600 space-y-1">
+                            <li>• High-resolution images preferred</li>
+                            <li>• Must be AI-generated artwork</li>
+                            <li>• No offensive or harmful content</li>
+                            <li>• Proper attribution to AI models</li>
+                        </ul>
+                    </div>
+                    
+                    <div>
+                        <h3 class="font-semibold text-gray-700 mb-2">Best Practices</h3>
+                        <ul class="text-gray-600 space-y-1">
+                            <li>• Include detailed descriptions</li>
+                            <li>• Use relevant tags for discoverability</li>
+                            <li>• Consider watermarking for protection</li>
+                            <li>• Choose appropriate licensing</li>
+                        </ul>
+                    </div>
+                </div>
+            </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>
+        feather.replace();
+        
+        // File upload handling
+        const dropZone = document.getElementById('drop-zone');
+        const fileInput = document.getElementById('file-input');
+        const chooseFileBtn = dropZone.querySelector('button');
+        
+        chooseFileBtn.addEventListener('click', () => fileInput.click());
+        
+        fileInput.addEventListener('change', handleFileSelect);
+        dropZone.addEventListener('dragover', handleDragOver);
+        dropZone.addEventListener('drop', handleFileDrop);
+        
+        function handleDragOver(e) {
+            e.preventDefault();
+            dropZone.classList.add('border-primary', 'bg-orange-50');
+        }
+        
+        function handleFileDrop(e) {
+            e.preventDefault();
+            dropZone.classList.remove('border-primary', 'bg-orange-50');
+            
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                handleFiles(files);
+            }
+        }
+        
+        function handleFileSelect(e) {
+            const files = e.target.files;
+            handleFiles(files);
+        }
+        
+        function handleFiles(files) {
+            const file = files[0];
+            if (file && file.type.startsWith('image/')) {
+                // Preview the image
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    dropZone.innerHTML = `
+                        <img src="${e.target.result}" alt="Preview" class="max-h-64 mx-auto mb-4 rounded-xl">
+                        <p class="text-primary font-semibold">${file.name}</p>
+                        <p class="text-sm text-gray-500">Click to change</p>
+                    `;
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+    </script>
+</body>
+</html>