Review revise and update with a comprehensive refactoring.

components/footer.js

@@ -1,94 +1,173 @@
-class CustomFooter extends HTMLElement {
+
+class FluxFooter extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
       <style>
         :host {
           display: block;
-          margin-top: 4rem;
+          margin-top: auto;
         }
         
-        footer {
-          background-color: #111827;
+        .footer {
+          background-color: #1F2937;
           border-top: 1px solid #374151;
-          padding: 2rem 0;
+          padding: 2rem 0 1rem;
+          margin-top: auto;
         }
         
         .container {
-          max-width: 1200px;
+          max-width: 1280px;
           margin: 0 auto;
           padding: 0 1rem;
         }
         
         .footer-content {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          text-align: center;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 2rem;
+          margin-bottom: 2rem;
+        }
+        
+        .footer-section h3 {
+          color: #F9FAFB;
+          margin-bottom: 1rem;
+          font-size: 1.125rem;
+          font-weight: 600;
+        }
+        
+        .footer-links {
+          list-style: none;
+        }
+        
+        .footer-links li {
+          margin-bottom: 0.5rem;
+        }
+        
+        .footer-links a {
+          color: #9CA3AF;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        
+        .footer-links a:hover {
+          color: #10B981;
         }
         
         .social-links {
           display: flex;
-          margin: 1rem 0;
+          gap: 1rem;
+          margin-top: 1rem;
         }
         
         .social-link {
-          margin: 0 0.5rem;
-          color: #d1d5db;
-          transition: color 0.3s;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          background-color: #374151;
+          color: #F9FAFB;
+          transition: all 0.2s;
         }
         
         .social-link:hover {
-          color: #10b981;
+          background-color: #10B981;
+          transform: translateY(-2px);
         }
         
         .copyright {
-          color: #9ca3af;
+          border-top: 1px solid #374151;
+          padding-top: 1rem;
+          text-align: center;
+          color: #9CA3AF;
           font-size: 0.875rem;
-          margin-top: 1rem;
+        }
+        
+        @media (max-width: 768px) {
+          .footer-content {
+            grid-template-columns: 1fr;
+          }
         }
       </style>
       
-      <footer>
+      <footer class="footer">
         <div class="container">
           <div class="footer-content">
-            <div class="logo">
-              <i data-feather="box" style="color: #10b981;"></i>
-              <span style="margin-left: 0.5rem; font-weight: bold;">CivitAI Explorer</span>
+            <div class="footer-section">
+              <h3>Flux Fusion Studio</h3>
+              <p style="color: #9CA3AF; margin-bottom: 1rem; line-height: 1.5;">
+                Advanced AI-powered creative tools for artists, designers, and creators. 
+                Transform your imagination into reality with our cutting-edge generation platform.
+              </p>
+              <div class="social-links">
+                <a href="#" class="social-link">
+                  <i data-feather="twitter" style="width: 16px; height: 16px;"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="github" style="width: 16px; height: 16px;"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="instagram" style="width: 16px; height: 16px;"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="discord" style="width: 16px; height: 16px;"></i>
+                </a>
+              </div>
+            </div>
+            
+            <div class="footer-section">
+              <h3>Product</h3>
+              <ul class="footer-links">
+                <li><a href="#">Features</a></li>
+                <li><a href="#">Pricing</a></li>
+                <li><a href="#">API Access</a></li>
+                <li><a href="#">Integrations</a></li>
+                <li><a href="#">Roadmap</a></li>
+              </ul>
             </div>
             
-            <div class="social-links">
-              <a href="#" class="social-link">
-                <i data-feather="github"></i>
-              </a>
-              <a href="#" class="social-link">
-                <i data-feather="twitter"></i>
-              </a>
-              <a href="#" class="social-link">
-                <i data-feather="discord"></i>
-              </a>
+            <div class="footer-section">
+              <h3>Resources</h3>
+              <ul class="footer-links">
+                <li><a href="#">Documentation</a></li>
+                <li><a href="#">Tutorials</a></li>
+                <li><a href="#">Blog</a></li>
+                <li><a href="#">Community</a></li>
+                <li><a href="#">Support Center</a></li>
+              </ul>
             </div>
             
-            <p class="copyright">
-              &copy; ${new Date().getFullYear()} CivitAI Explorer. This is an unofficial client. All models belong to their respective creators.
-            </p>
+            <div class="footer-section">
+              <h3>Company</h3>
+              <ul class="footer-links">
+                <li><a href="#">About Us</a></li>
+                <li><a href="#">Careers</a></li>
+                <li><a href="#">Contact</a></li>
+                <li><a href="#">Privacy Policy</a></li>
+                <li><a href="#">Terms of Service</a></li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="copyright">
+            <p>&copy; 2023 Flux Fusion Studio. All rights reserved.</p>
           </div>
         </div>
       </footer>
     `;
     
-    // Initialize feather icons
+    // Initialize Feather Icons after rendering
     setTimeout(() => {
-      const featherScript = document.createElement('script');
-      featherScript.src = "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js";
-      featherScript.onload = () => {
-        if (this.shadowRoot) {
-          feather.replace({}, this.shadowRoot);
-        }
-      };
-      this.shadowRoot.appendChild(featherScript);
+      const icons = this.shadowRoot.querySelectorAll('[data-feather]');
+      icons.forEach(icon => {
+        const iconName = icon.getAttribute('data-feather');
+        const svg = feather.icons[iconName].toSvg();
+        icon.outerHTML = svg;
+      });
     }, 0);
   }
 }
 
-customElements.define('custom-footer', CustomFooter);
+customElements.define('flux-footer', FluxFooter);

components/header.js

@@ -1,4 +1,4 @@
-class CustomHeader extends HTMLElement {
+class FluxHeader extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
@@ -7,100 +7,150 @@ class CustomHeader extends HTMLElement {
           display: block;
         }
         
-        header {
-          background-color: #111827;
-          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        .header {
+          background-color: #1F2937;
+          border-bottom: 1px solid #374151;
+          padding: 1rem 0;
         }
         
         .container {
-          max-width: 1200px;
+          max-width: 1280px;
           margin: 0 auto;
           padding: 0 1rem;
-        }
-        
-        nav {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding: 1rem 0;
         }
         
         .logo {
           display: flex;
           align-items: center;
-          font-weight: bold;
+          font-weight: 700;
           font-size: 1.5rem;
-          color: #10b981;
+          color: #F9FAFB;
+          text-decoration: none;
         }
         
-        .logo i {
+        .logo-icon {
+          color: #10B981;
           margin-right: 0.5rem;
         }
         
-        ul {
+        .nav-links {
           display: flex;
           list-style: none;
         }
         
-        li {
+        .nav-links li {
           margin-left: 2rem;
         }
         
-        a {
-          color: #d1d5db;
+        .nav-links a {
+          color: #9CA3AF;
           text-decoration: none;
-          transition: color 0.3s;
+          font-weight: 500;
+          transition: color 0.2s;
+        }
+        
+        .nav-links a:hover, .nav-links a.active {
+          color: #10B981;
+        }
+        
+        .auth-buttons {
+          display: flex;
+          align-items: center;
+        }
+        
+        .btn {
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s;
+          border: none;
+          font-size: 0.875rem;
+        }
+        
+        .btn-login {
+          background-color: transparent;
+          color: #9CA3AF;
+          margin-right: 0.5rem;
+        }
+        
+        .btn-login:hover {
+          color: #F9FAFB;
+        }
+        
+        .btn-signup {
+          background-color: #10B981;
+          color: white;
+        }
+        
+        .btn-signup:hover {
+          background-color: #059669;
+        }
+        
+        .theme-toggle {
+          background: none;
+          border: none;
+          color: #9CA3AF;
+          cursor: pointer;
+          margin-left: 1rem;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
         }
         
-        a:hover {
-          color: #10b981;
+        .theme-toggle:hover {
+          background-color: #374151;
+          color: #F9FAFB;
         }
         
         @media (max-width: 768px) {
-          nav {
-            flex-direction: column;
+          .nav-links {
+            display: none;
           }
           
-          ul {
-            margin-top: 1rem;
-          }
-          
-          li {
-            margin: 0 1rem;
+          .logo span {
+            display: none;
           }
         }
       </style>
       
-      <header>
+      <header class="header">
         <div class="container">
-          <nav>
-            <a href="/" class="logo">
-              <i data-feather="box"></i>
-              <span>CivitAI Explorer</span>
-            </a>
-            <ul>
-              <li><a href="/">Home</a></li>
-              <li><a href="#">Models</a></li>
-              <li><a href="#">Collections</a></li>
-              <li><a href="#">About</a></li>
-            </ul>
-          </nav>
+          <a href="#" class="logo">
+            <i data-feather="aperture" class="logo-icon"></i>
+            <span>Flux Fusion Studio</span>
+          </a>
+          
+          <ul class="nav-links">
+            <li><a href="#" class="active">Create</a></li>
+            <li><a href="#">Gallery</a></li>
+            <li><a href="#">Models</a></li>
+            <li><a href="#">Community</a></li>
+          </ul>
+          
+          <div class="auth-buttons">
+            <button class="btn btn-login">Log in</button>
+            <button class="btn btn-signup">Sign up</button>
+            <button class="theme-toggle" id="theme-toggle">
+              <i data-feather="moon"></i>
+            </button>
+          </div>
         </div>
       </header>
     `;
     
-    // Initialize feather icons after a short delay to ensure DOM is ready
+    // Initialize Feather Icons after rendering
     setTimeout(() => {
-      const featherScript = document.createElement('script');
-      featherScript.src = "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js";
-      featherScript.onload = () => {
-        if (this.shadowRoot) {
-          feather.replace({}, this.shadowRoot);
-        }
-      };
-      this.shadowRoot.appendChild(featherScript);
+      const icons = this.shadowRoot.querySelectorAll('[data-feather]');
+      icons.forEach(icon => {
+        const iconName = icon.getAttribute('data-feather');
+        const svg = feather.icons[iconName].toSvg();
+        icon.outerHTML = svg;
+      });
     }, 0);
   }
 }
 
-customElements.define('custom-header', CustomHeader);
+customElements.define('flux-header', FluxHeader);

index.html

@@ -3,55 +3,253 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CivitAI Explorer</title>
+    <title>Flux Fusion 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: '#10B981',
+                        secondary: '#F97316'
+                    }
+                }
+            }
+        }
+    </script>
 </head>
 <body class="bg-gray-900 text-white">
-    <custom-header></custom-header>
+    <flux-header></flux-header>
     
     <main class="container mx-auto px-4 py-8">
-        <section class="mb-12">
-            <h1 class="text-4xl font-bold mb-6 text-center">Unlock the World of AI Models</h1>
-            <p class="text-lg text-center max-w-2xl mx-auto mb-8">
-                Access thousands of AI models from CivitAI with our secure explorer. 
-                Simply provide your API key and verify your age to get started.
-            </p>
-            
-            <div class="max-w-md mx-auto bg-gray-800 rounded-xl shadow-md overflow-hidden p-6">
-                <div class="mb-4">
-                    <label for="apiKey" class="block text-sm font-medium mb-2">CivitAI API Key</label>
-                    <input type="password" id="apiKey" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="Enter your API key">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Panel - Controls -->
+            <div class="lg:col-span-1 space-y-6">
+                <!-- Prompt Input -->
+                <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                    <h2 class="text-xl font-bold mb-4 flex items-center">
+                        <i data-feather="edit-3" class="mr-2 text-primary"></i>
+                        Prompt
+                    </h2>
+                    <textarea 
+                        id="prompt-input" 
+                        class="w-full bg-gray-700 border border-gray-600 rounded-lg p-4 text-white focus:outline-none focus:ring-2 focus:ring-primary resize-none" 
+                        rows="4" 
+                        placeholder="Describe your vision..."></textarea>
                 </div>
-                
-                <div class="flex items-center mb-6">
-                    <input id="ageVerification" type="checkbox" class="w-4 h-4 text-green-500 bg-gray-700 border-gray-600 rounded focus:ring-green-500">
-                    <label for="ageVerification" class="ml-2 text-sm">I am 18+ years old</label>
+
+                <!-- LORA Selection -->
+                <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                    <h2 class="text-xl font-bold mb-4 flex items-center">
+                        <i data-feather="layers" class="mr-2 text-primary"></i>
+                        LORA Models
+                    </h2>
+                    <div class="space-y-4">
+                        <!-- LORA Slot 1 -->
+                        <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
+                            <div class="flex items-center">
+                                <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center mr-3">
+                                    <span class="text-xs font-bold">1</span>
+                                </div>
+                                <div>
+                                    <p class="font-medium">Select LORA</p>
+                                    <p class="text-xs text-gray-400">None selected</p>
+                                </div>
+                            </div>
+                            <button class="bg-gray-600 hover:bg-gray-500 p-2 rounded-lg transition">
+                                <i data-feather="settings" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+
+                        <!-- LORA Slot 2 -->
+                        <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
+                            <div class="flex items-center">
+                                <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center mr-3">
+                                    <span class="text-xs font-bold">2</span>
+                                </div>
+                                <div>
+                                    <p class="font-medium">Select LORA</p>
+                                    <p class="text-xs text-gray-400">None selected</p>
+                                </div>
+                            </div>
+                            <button class="bg-gray-600 hover:bg-gray-500 p-2 rounded-lg transition">
+                                <i data-feather="settings" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+
+                        <!-- LORA Slot 3 -->
+                        <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
+                            <div class="flex items-center">
+                                <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center mr-3">
+                                    <span class="text-xs font-bold">3</span>
+                                </div>
+                                <div>
+                                    <p class="font-medium">Select LORA</p>
+                                    <p class="text-xs text-gray-400">None selected</p>
+                                </div>
+                            </div>
+                            <button class="bg-gray-600 hover:bg-gray-500 p-2 rounded-lg transition">
+                                <i data-feather="settings" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+
+                        <!-- LORA Slot 4 -->
+                        <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
+                            <div class="flex items-center">
+                                <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center mr-3">
+                                    <span class="text-xs font-bold">4</span>
+                                </div>
+                                <div>
+                                    <p class="font-medium">Select LORA</p>
+                                    <p class="text-xs text-gray-400">None selected</p>
+                                </div>
+                            </div>
+                            <button class="bg-gray-600 hover:bg-gray-500 p-2 rounded-lg transition">
+                                <i data-feather="settings" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <button class="mt-4 w-full py-3 bg-primary hover:bg-green-600 rounded-lg font-semibold flex items-center justify-center transition">
+                        <i data-feather="plus-circle" class="mr-2"></i>
+                        Add Custom LORA
+                    </button>
+                </div>
+
+                <!-- Generation Settings -->
+                <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                    <h2 class="text-xl font-bold mb-4 flex items-center">
+                        <i data-feather="sliders" class="mr-2 text-primary"></i>
+                        Settings
+                    </h2>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium mb-2">CFG Scale</label>
+                            <input type="range" min="1" max="20" value="7" class="w-full accent-primary">
+                            <div class="flex justify-between text-xs text-gray-400 mt-1">
+                                <span>1</span>
+                                <span>20</span>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <label class="block text-sm font-medium mb-2">Steps</label>
+                            <input type="range" min="1" max="50" value="28" class="w-full accent-secondary">
+                            <div class="flex justify-between text-xs text-gray-400 mt-1">
+                                <span>1</span>
+                                <span>50</span>
+                            </div>
+                        </div>
+                        
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label class="block text-sm font-medium mb-2">Width</label>
+                                <select class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2 text-white">
+                                    <option>512</option>
+                                    <option selected>768</option>
+                                    <option>1024</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-2">Height</label>
+                                <select class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2 text-white">
+                                    <option>512</option>
+                                    <option>768</option>
+                                    <option selected>1024</option>
+                                </select>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-center justify-between pt-2">
+                            <div class="flex items-center">
+                                <input type="checkbox" id="random-seed" class="accent-primary" checked>
+                                <label for="random-seed" class="ml-2 text-sm">Random Seed</label>
+                            </div>
+                            <button class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition">
+                                <i data-feather="refresh-cw" class="w-4 h-4 inline mr-1"></i>
+                                Randomize
+                            </button>
+                        </div>
+                    </div>
                 </div>
-                
-                <button id="unlockBtn" class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300">
-                    Unlock Models
-                </button>
             </div>
-        </section>
-        
-        <section id="modelsSection" class="hidden">
-            <h2 class="text-3xl font-bold mb-6">Featured Models</h2>
-            <div id="modelsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <!-- Model cards will be populated here -->
+
+            <!-- Right Panel - Preview & Gallery -->
+            <div class="lg:col-span-2">
+                <!-- Preview Area -->
+                <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-bold flex items-center">
+                            <i data-feather="image" class="mr-2 text-primary"></i>
+                            Preview
+                        </h2>
+                        <div class="flex space-x-2">
+                            <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg transition">
+                                <i data-feather="download" class="w-4 h-4"></i>
+                            </button>
+                            <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg transition">
+                                <i data-feather="share-2" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="aspect-video bg-gray-900 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-700">
+                        <div class="text-center">
+                            <i data-feather="camera" class="w-12 h-12 mx-auto text-gray-600 mb-2"></i>
+                            <p class="text-gray-500">Generated image will appear here</p>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-6 flex space-x-4">
+                        <button class="flex-1 py-3 bg-primary hover:bg-green-600 rounded-lg font-semibold flex items-center justify-center transition">
+                            <i data-feather="play" class="mr-2"></i>
+                            Generate Image
+                        </button>
+                        <button class="flex-1 py-3 bg-secondary hover:bg-orange-600 rounded-lg font-semibold flex items-center justify-center transition">
+                            <i data-feather="film" class="mr-2"></i>
+                            Generate Video
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Gallery -->
+                <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-bold flex items-center">
+                            <i data-feather="grid" class="mr-2 text-primary"></i>
+                            LORA Gallery
+                        </h2>
+                        <button class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition">
+                            View All
+                        </button>
+                    </div>
+                    
+                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                        <!-- Gallery Items -->
+                        <div class="aspect-square bg-gradient-to-br from-purple-900 to-blue-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
+                        <div class="aspect-square bg-gradient-to-br from-pink-900 to-red-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
+                        <div class="aspect-square bg-gradient-to-br from-yellow-900 to-orange-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
+                        <div class="aspect-square bg-gradient-to-br from-green-900 to-teal-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
+                        <div class="aspect-square bg-gradient-to-br from-indigo-900 to-purple-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
+                        <div class="aspect-square bg-gradient-to-br from-red-900 to-pink-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
+                        <div class="aspect-square bg-gradient-to-br from-blue-900 to-cyan-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
+                        <div class="aspect-square bg-gradient-to-br from-emerald-900 to-green-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
+                    </div>
+                </div>
             </div>
-        </section>
+        </div>
     </main>
-    
-    <custom-footer></custom-footer>
+
+    <flux-footer></flux-footer>
     
     <script src="components/header.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

@@ -1,99 +1,63 @@
+// Initialize Feather Icons
 document.addEventListener('DOMContentLoaded', function() {
-    const apiKeyInput = document.getElementById('apiKey');
-    const ageVerification = document.getElementById('ageVerification');
-    const unlockBtn = document.getElementById('unlockBtn');
-    const modelsSection = document.getElementById('modelsSection');
-    const modelsContainer = document.getElementById('modelsContainer');
+    feather.replace();
     
-    // Check if API key is stored in localStorage
-    const storedApiKey = localStorage.getItem('civitaiApiKey');
-    if (storedApiKey) {
-        apiKeyInput.value = storedApiKey;
+    // Theme toggle functionality
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+        themeToggle.addEventListener('click', function() {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+        });
     }
     
-    unlockBtn.addEventListener('click', async function() {
-        const apiKey = apiKeyInput.value.trim();
-        const isVerified = ageVerification.checked;
-        
-        if (!apiKey) {
-            alert('Please enter your CivitAI API key');
-            return;
-        }
-        
-        if (!isVerified) {
-            alert('Please verify your age to proceed');
-            return;
-        }
-        
-        // Store API key in localStorage
-        localStorage.setItem('civitaiApiKey', apiKey);
-        
-        // Show loading state
-        unlockBtn.innerHTML = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Loading...';
-        unlockBtn.disabled = true;
-        
-        try {
-            // Fetch models from CivitAI API
-            const response = await fetch('https://civitai.com/api/v1/models?limit=6', {
-                headers: {
-                    'Authorization': `Bearer ${apiKey}`
-                }
-            });
-            
-            if (!response.ok) {
-                throw new Error('Invalid API key or network error');
-            }
-            
-            const data = await response.json();
-            displayModels(data.items);
-            
-            // Show models section
-            modelsSection.classList.remove('hidden');
-            
-            // Scroll to models section
-            modelsSection.scrollIntoView({ behavior: 'smooth' });
-        } catch (error) {
-            alert('Error: ' + error.message);
-        } finally {
-            // Reset button
-            unlockBtn.textContent = 'Unlock Models';
-            unlockBtn.disabled = false;
-        }
-    });
+    // Check for saved theme preference
+    if (localStorage.getItem('theme') === 'dark' || 
+        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+    } else {
+        document.documentElement.classList.remove('dark');
+    }
     
-    function displayModels(models) {
-        modelsContainer.innerHTML = '';
-        
-        models.forEach(model => {
-            const modelCard = document.createElement('div');
-            modelCard.className = 'model-card';
+    // Gallery interaction
+    const galleryItems = document.querySelectorAll('.gallery-item');
+    galleryItems.forEach(item => {
+        item.addEventListener('click', function() {
+            // Remove active class from all items
+            galleryItems.forEach(i => i.classList.remove('ring-2', 'ring-primary'));
             
-            // Get first image or use placeholder
-            const imageUrl = model.images && model.images.length > 0 ? 
-                model.images[0].url : 
-                `http://static.photos/technology/320x240/${model.id}`;
+            // Add active class to clicked item
+            this.classList.add('ring-2', 'ring-primary');
             
-            modelCard.innerHTML = `
-                <img src="${imageUrl}" alt="${model.name}" class="model-image">
-                <div class="p-4">
-                    <h3 class="font-bold text-lg mb-2">${model.name}</h3>
-                    <p class="text-gray-400 text-sm mb-3 line-clamp-2">${model.description || 'No description available'}</p>
-                    <div class="model-stats">
-                        <i data-feather="download"></i>
-                        <span>${model.downloads}</span>
-                        <i data-feather="heart" class="ml-3"></i>
-                        <span>${model.favorites}</span>
+            // Update preview area with selected item
+            const previewArea = document.querySelector('.preview-placeholder');
+            if (previewArea) {
+                previewArea.innerHTML = `
+                    <div class="w-full h-full bg-gradient-to-br from-purple-900 to-blue-800 rounded-lg flex items-center justify-center">
+                        <div class="text-center">
+                            <i data-feather="check-circle" class="w-12 h-12 mx-auto text-white mb-2"></i>
+                            <p class="text-white">Selected: ${this.querySelector('p').textContent}</p>
+                        </div>
                     </div>
-                    <div class="mt-3">
-                        <span class="inline-block bg-green-500 text-xs px-2 py-1 rounded">${model.type}</span>
-                    </div>
-                </div>
-            `;
+                `;
+                feather.replace();
+            }
+        });
+    });
+    
+    // Generate button animation
+    const generateButtons = document.querySelectorAll('button.flex.items-center.justify-center');
+    generateButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const originalText = this.innerHTML;
+            this.innerHTML = '<i data-feather="loader" class="mr-2 animate-spin"></i> Generating...';
+            feather.replace();
             
-            modelsContainer.appendChild(modelCard);
+            // Simulate processing time
+            setTimeout(() => {
+                this.innerHTML = originalText;
+                feather.replace();
+            }, 2000);
         });
-        
-        // Reinitialize feather icons
-        feather.replace();
-    }
+    });
 });

style.css

@@ -1,49 +1,154 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
-/* Custom styles for model cards */
-.model-card {
-    @apply bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105;
+:root {
+  --primary: #10B981;
+  --secondary: #F97316;
 }
 
-.model-image {
-    @apply w-full h-48 object-cover;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
 }
 
-.model-stats {
-    @apply flex items-center text-sm text-gray-400 mt-2;
+body {
+  background-color: #111827;
+  color: #F9FAFB;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
-.model-stats svg {
-    @apply mr-1;
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
 }
 
-/* Animation for loading spinner */
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
+::-webkit-scrollbar-track {
+  background: #1F2937;
 }
 
-.animate-spin {
-    animation: spin 1s linear infinite;
+::-webkit-scrollbar-thumb {
+  background: #4B5563;
+  border-radius: 4px;
 }
 
-/* Custom scrollbar */
-::-webkit-scrollbar {
-    width: 8px;
+::-webkit-scrollbar-thumb:hover {
+  background: #6B7280;
 }
 
-::-webkit-scrollbar-track {
-    background: #1f2937;
+/* Custom utility classes */
+.bg-primary {
+  background-color: var(--primary);
 }
 
-::-webkit-scrollbar-thumb {
-    background: #4b5563;
-    border-radius: 4px;
+.bg-secondary {
+  background-color: var(--secondary);
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: #6b7280;
+.text-primary {
+  color: var(--primary);
+}
+
+.text-secondary {
+  color: var(--secondary);
+}
+
+.border-primary {
+  border-color: var(--primary);
+}
+
+.ring-primary {
+  --tw-ring-color: var(--primary);
+}
+
+/* Button transitions */
+button {
+  transition: all 0.2s ease-in-out;
+}
+
+/* Card shadows */
+.shadow-lg {
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
+}
+
+/* Range input styling */
+input[type="range"] {
+  -webkit-appearance: none;
+  height: 6px;
+  border-radius: 3px;
+  background: #374151;
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--primary);
+  cursor: pointer;
+  border: 2px solid #1F2937;
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--primary);
+  cursor: pointer;
+  border: 2px solid #1F2937;
+}
+
+/* Select dropdown styling */
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+/* Checkbox styling */
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #4B5563;
+  border-radius: 4px;
+  background-color: #1F2937;
+  position: relative;
+  cursor: pointer;
+}
+
+input[type="checkbox"]:checked {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+input[type="checkbox"]:checked::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+  .grid-cols-2 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  
+  .lg\:col-span-1, .lg\:col-span-2 {
+    grid-column: span 1 / span 1;
+  }
 }