Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NexusAI | Premium AI Creative Platform</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #7c3aed; | |
| --primary-dark: #5b21b6; | |
| --secondary: #06b6d4; | |
| --accent: #f59e0b; | |
| --dark: #0f172a; | |
| --darker: #020617; | |
| --light: #f8fafc; | |
| --gray: #64748b; | |
| --gray-dark: #334155; | |
| --glass: rgba(30, 41, 59, 0.7); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--darker); | |
| color: var(--light); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| .app-container { | |
| display: flex; | |
| min-height: 100vh; | |
| background: linear-gradient(135deg, var(--darker) 0%, #1e293b 100%); | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 260px; | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border-right: 1px solid var(--glass-border); | |
| padding: 1.5rem 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| position: fixed; | |
| height: 100vh; | |
| z-index: 100; | |
| transition: var(--transition); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| padding-left: 0.5rem; | |
| } | |
| .logo-icon { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 12px; | |
| font-size: 1.5rem; | |
| } | |
| .logo-text { | |
| font-family: 'Poppins', sans-serif; | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .nav-menu { | |
| list-style: none; | |
| flex: 1; | |
| } | |
| .nav-item { | |
| margin-bottom: 0.5rem; | |
| } | |
| .nav-link { | |
| display: flex; | |
| align-items: center; | |
| padding: 0.75rem 1rem; | |
| border-radius: 10px; | |
| color: var(--light); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| font-weight: 500; | |
| } | |
| .nav-link:hover, .nav-link.active { | |
| background: rgba(124, 58, 237, 0.2); | |
| color: var(--primary); | |
| } | |
| .nav-link i { | |
| margin-right: 12px; | |
| font-size: 1.2rem; | |
| width: 24px; | |
| text-align: center; | |
| } | |
| .user-section { | |
| padding: 1rem; | |
| border-top: 1px solid var(--glass-border); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 12px; | |
| font-weight: 600; | |
| } | |
| .user-info h4 { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| } | |
| .user-info p { | |
| font-size: 0.8rem; | |
| color: var(--gray); | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| flex: 1; | |
| margin-left: 260px; | |
| padding: 1.5rem; | |
| transition: var(--transition); | |
| } | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| } | |
| .page-title { | |
| font-family: 'Poppins', sans-serif; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .credits-badge { | |
| background: var(--glass); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 0.5rem 1rem; | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-upgrade { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| padding: 0.75rem 1.5rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .btn-upgrade:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| } | |
| /* Tool Cards */ | |
| .tools-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .tool-card { | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow); | |
| border-color: rgba(124, 58, 237, 0.3); | |
| } | |
| .tool-card.active { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2); | |
| } | |
| .tool-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 12px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| font-size: 1.8rem; | |
| } | |
| .tool-title { | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .tool-description { | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| margin-bottom: 1rem; | |
| } | |
| .tool-status { | |
| display: inline-block; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .status-active { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--success); | |
| } | |
| .status-coming { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: var(--warning); | |
| } | |
| /* Tool Interface */ | |
| .tool-interface { | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| margin-top: 1.5rem; | |
| display: none; | |
| } | |
| .tool-interface.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .tool-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .tool-header h2 { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .prompt-container { | |
| margin-bottom: 1.5rem; | |
| } | |
| .prompt-input { | |
| width: 100%; | |
| background: rgba(15, 23, 42, 0.7); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 12px; | |
| padding: 1.25rem; | |
| color: var(--light); | |
| font-size: 1rem; | |
| resize: vertical; | |
| min-height: 120px; | |
| transition: var(--transition); | |
| } | |
| .prompt-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); | |
| } | |
| .controls-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .control-group { | |
| margin-bottom: 1rem; | |
| } | |
| .control-label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| font-size: 0.9rem; | |
| } | |
| .control-select, .control-input { | |
| width: 100%; | |
| background: rgba(15, 23, 42, 0.7); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 8px; | |
| padding: 0.75rem; | |
| color: var(--light); | |
| font-size: 0.9rem; | |
| } | |
| .control-select:focus, .control-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .slider-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .slider { | |
| flex: 1; | |
| -webkit-appearance: none; | |
| height: 6px; | |
| border-radius: 3px; | |
| background: var(--gray-dark); | |
| outline: none; | |
| } | |
| .slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| cursor: pointer; | |
| } | |
| .slider-value { | |
| min-width: 40px; | |
| text-align: center; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .style-presets { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .style-preset { | |
| padding: 0.5rem 1rem; | |
| background: rgba(15, 23, 42, 0.7); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .style-preset:hover, .style-preset.active { | |
| background: rgba(124, 58, 237, 0.2); | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| } | |
| .action-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .btn-generate { | |
| flex: 1; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 1rem 2rem; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.75rem; | |
| } | |
| .btn-generate:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| } | |
| .btn-secondary { | |
| background: rgba(30, 41, 59, 0.7); | |
| border: 1px solid var(--glass-border); | |
| color: var(--light); | |
| border-radius: 10px; | |
| padding: 1rem 1.5rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(30, 41, 59, 0.9); | |
| border-color: var(--primary); | |
| } | |
| /* Generation Results */ | |
| .results-section { | |
| margin-top: 2rem; | |
| } | |
| .results-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .results-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .result-card { | |
| background: rgba(15, 23, 42, 0.7); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| transition: var(--transition); | |
| } | |
| .result-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-light); | |
| } | |
| .result-image { | |
| width: 100%; | |
| height: 180px; | |
| object-fit: cover; | |
| background: linear-gradient(135deg, #1e293b, #334155); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--gray); | |
| } | |
| .result-info { | |
| padding: 1rem; | |
| } | |
| .result-actions { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 0.5rem; | |
| } | |
| .result-action-btn { | |
| background: none; | |
| border: none; | |
| color: var(--gray); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| padding: 0.25rem; | |
| } | |
| .result-action-btn:hover { | |
| color: var(--primary); | |
| } | |
| /* Progress Bar */ | |
| .progress-bar-container { | |
| position: fixed; | |
| bottom: 0; | |
| left: 260px; | |
| right: 0; | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border-top: 1px solid var(--glass-border); | |
| padding: 1rem 1.5rem; | |
| display: none; | |
| z-index: 1000; | |
| } | |
| .progress-bar-container.active { | |
| display: block; | |
| animation: slideUp 0.3s ease; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(100%); } | |
| to { transform: translateY(0); } | |
| } | |
| .progress-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.5rem; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background: var(--gray-dark); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| } | |
| /* Mobile Menu Toggle */ | |
| .mobile-menu-toggle { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: var(--light); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| position: fixed; | |
| top: 1.5rem; | |
| left: 1.5rem; | |
| z-index: 1001; | |
| } | |
| /* Footer */ | |
| .footer { | |
| text-align: center; | |
| padding: 2rem 1rem; | |
| margin-top: 3rem; | |
| border-top: 1px solid var(--glass-border); | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| } | |
| .footer a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer a:hover { | |
| color: var(--secondary); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1024px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| .main-content { | |
| margin-left: 0; | |
| } | |
| .progress-bar-container { | |
| left: 0; | |
| } | |
| .mobile-menu-toggle { | |
| display: block; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .tools-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .controls-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .action-buttons { | |
| flex-direction: column; | |
| } | |
| .results-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| } | |
| .header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| } | |
| .header-actions { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| } | |
| /* Loading Skeleton */ | |
| .skeleton { | |
| background: linear-gradient(90deg, rgba(30, 41, 59, 0.5) 25%, rgba(51, 65, 85, 0.5) 50%, rgba(30, 41, 59, 0.5) 75%); | |
| background-size: 200% 100%; | |
| animation: loading 1.5s infinite; | |
| border-radius: 8px; | |
| } | |
| @keyframes loading { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| /* Built with anycoder */ | |
| .anycoder-badge { | |
| position: fixed; | |
| top: 1.5rem; | |
| right: 1.5rem; | |
| z-index: 1000; | |
| } | |
| .anycoder-badge a { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 0.5rem 1rem; | |
| font-size: 0.8rem; | |
| color: var(--light); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .anycoder-badge a:hover { | |
| background: rgba(124, 58, 237, 0.2); | |
| color: var(--primary); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Mobile Menu Toggle --> | |
| <button class="mobile-menu-toggle" id="mobileMenuToggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="logo"> | |
| <div class="logo-icon"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div class="logo-text">NexusAI</div> | |
| </div> | |
| <ul class="nav-menu"> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link active" data-tool="dashboard"> | |
| <i class="fas fa-home"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link" data-tool="text-to-image"> | |
| <i class="fas fa-image"></i> | |
| <span>Text to Image</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link" data-tool="image-editor"> | |
| <i class="fas fa-paint-brush"></i> | |
| <span>AI Canvas</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link" data-tool="text-to-video"> | |
| <i class="fas fa-video"></i> | |
| <span>Text to Video</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link" data-tool="ai-music"> | |
| <i class="fas fa-music"></i> | |
| <span>AI Music</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="fas fa-history"></i> | |
| <span>History</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="fas fa-save"></i> | |
| <span>Saved Projects</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link"> | |
| <i class="fas fa-cog"></i> | |
| <span>Settings</span> | |
| </a> | |
| </li> | |
| </ul> | |
| <div class="user-section"> | |
| <div class="user-avatar">JD</div> | |
| <div class="user-info"> | |
| <h4>John Doe</h4> | |
| <p>Pro Plan</p> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <div class="header"> | |
| <h1 class="page-title" id="pageTitle">AI Creative Dashboard</h1> | |
| <div class="header-actions"> | |
| <div class="credits-badge"> | |
| <i class="fas fa-bolt"></i> | |
| <span>Credits: <strong>142</strong></span> | |
| </div> | |
| <button class="btn-upgrade"> | |
| <i class="fas fa-crown"></i> | |
| Upgrade Plan | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tool Cards --> | |
| <div class="tools-grid" id="toolsGrid"> | |
| <div class="tool-card active" data-tool="text-to-image"> | |
| <div class="tool-icon"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <h3 class="tool-title">Text to Image</h3> | |
| <p class="tool-description">Transform text prompts into stunning visuals with advanced AI models.</p> | |
| <span class="tool-status status-active">Active</span> | |
| </div> | |
| <div class="tool-card" data-tool="image-editor"> | |
| <div class="tool-icon"> | |
| <i class="fas fa-paint-brush"></i> | |
| </div> | |
| <h3 class="tool-title">AI Canvas</h3> | |
| <p class="tool-description">Edit, inpaint, outpaint and transform images with AI-powered tools.</p> | |
| <span class="tool-status status-active">Active</span> | |
| </div> | |
| <div class="tool-card" data-tool="text-to-video"> | |
| <div class="tool-icon"> | |
| <i class="fas fa-video"></i> | |
| </div> | |
| <h3 class="tool-title">Text to Video</h3> | |
| <p class="tool-description">Generate dynamic videos from text prompts or animate existing images.</p> | |
| <span class="tool-status status-active">Active</span> | |
| </div> | |
| <div class="tool-card" data-tool="ai-music"> | |
| <div class="tool-icon"> | |
| <i class="fas fa-music"></i> | |
| </div> | |
| <h3 class="tool-title">AI Music</h3> | |
| <p class="tool-description">Create original music tracks in any genre with AI composition.</p> | |
| <span class="tool-status status-coming">Coming Soon</span> | |
| </div> | |
| </div> | |
| <!-- Text to Image Interface --> | |
| <div class="tool-interface active" id="text-to-image-interface"> | |
| <div class="tool-header"> | |
| <h2>Text to Image Generator</h2> | |
| <div class="credits-badge"> | |
| <i class="fas fa-info-circle"></i> | |
| <span>2 credits per generation</span> | |
| </div> | |
| </div> | |
| <div class="prompt-container"> | |
| <textarea class="prompt-input" id="textToImagePrompt" placeholder="Describe the image you want to create...">A majestic dragon flying over a futuristic city at sunset, cinematic lighting, hyper-detailed, 8K</textarea> | |
| </div> | |
| <div class="style-presets"> | |
| <div class="style-preset active">Realistic</div> | |
| <div class="style-preset">Cinematic</div> | |
| <div class="style-preset">Anime</div> | |
| <div class="style-preset">Streetwear</div> | |
| <div class="style-preset">Logo Design</div> | |
| <div class="style-preset">Poster Art</div> | |
| <div class="style-preset">Fantasy</div> | |
| <div class="style-preset">Cyberpunk</div> | |
| </div> | |
| <div class="controls-grid"> | |
| <div class="control-group"> | |
| <label class="control-label">Aspect Ratio</label> | |
| <select class="control-select" id="aspectRatio"> | |
| <option value="1:1">Square (1:1)</option> | |
| <option value="16:9" selected>Widescreen (16:9)</option> | |
| <option value="9:16">Portrait (9:16)</option> | |
| <option value="4:3">Standard (4:3)</option> | |
| <option value="3:2">Classic (3:2)</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label class="control-label">Model</label> | |
| <select class="control-select" id="aiModel"> | |
| <option value="nexus-v5" selected>Nexus V5 (Premium)</option> | |
| <option value="stable-diffusion">Stable Diffusion XL</option> | |
| <option value="dall-e">DALL-E 3</option> | |
| <option value="midjourney">Midjourney V6</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label class="control-label"> | |
| CFG Scale: <span id="cfgValue">7.5</span> | |
| </label> | |
| <div class="slider-container"> | |
| <input type="range" min="1" max="20" value="7.5" step="0.5" class="slider" id="cfgScale"> | |
| <div class="slider-value" id="cfgDisplay">7.5</div> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <label class="control-label"> | |
| Steps: <span id="stepsValue">30</span> | |
| </label> | |
| <div class="slider-container"> | |
| <input type="range" min="10" max="100" value="30" step="5" class="slider" id="steps"> | |
| <div class="slider-value" id="stepsDisplay">30</div> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <label class="control-label">Seed</label> | |
| <input type="text" class="control-input" id="seed" placeholder="Random" value="428763"> | |
| </div> | |
| <div class="control-group"> | |
| <label class="control-label">Batch Count</label> | |
| <select class="control-select" id="batchCount"> | |
| <option value="1">1 image</option> | |
| <option value="2" selected>2 images</option> | |
| <option value="4">4 images</option> | |
| <option value="8">8 images</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="action-buttons"> | |
| <button class="btn-secondary" id="advancedSettingsBtn"> | |
| <i class="fas fa-sliders-h"></i> | |
| Advanced Settings | |
| </button> | |
| <button class="btn-generate" id="generateImageBtn"> | |
| <i class="fas fa-magic"></i> | |
| Generate Image | |
| </button> | |
| </div> | |
| <div class="results-section"> | |
| <h3 class="results-title"> | |
| Recent Generations | |
| <button class="btn-secondary" style="font-size: 0.9rem;"> | |
| <i class="fas fa-history"></i> | |
| View All | |
| </button> | |
| </h3> | |
| <div class="results-grid" id="imageResults"> | |
| <!-- Image results will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Editor Interface --> | |
| <div class="tool-interface" id="image-editor-interface"> | |
| <div class="tool-header"> | |
| <h2>AI Canvas Editor</h2> | |
| <div class="credits-badge"> | |
| <i class="fas fa-info-circle"></i> | |
| <span>3 credits per edit</span> | |
| </div> | |
| </div> | |
| <div style="text-align: center; padding: 3rem 0;"> | |
| <div style="font-size: 4rem; color: var(--gray); margin-bottom: 1rem;"> | |
| <i class="fas fa-upload"></i> | |
| </div> | |
| <h3 style="margin-bottom: 1rem; font-weight: 600;">Drag & Drop Image to Edit</h3> | |
| <p style="color: var(--gray); margin-bottom: 2rem;">Or click to browse your files</p> | |
| <button class="btn-secondary" style="padding: 1rem 2rem;"> | |
| <i class="fas fa-folder-open"></i> | |
| Browse Files | |
| </button> | |
| </div> | |
| <div class="controls-grid"> | |
| <div class="control-group"> | |
| <label class="control-label">Edit Tool</label> | |
| <select class="control-select"> | |
| <option value="inpaint">AI Inpainting</option> | |
| <option value="outpaint">Outpainting</option> | |
| <option value="remove">Object Removal</option> | |
| <option value="background">Replace Background</option> | |
| <option value="style">Style Transfer</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label class="control-label">Brush Size</label> | |
| <div class="slider-container"> | |
| <input type="range" min="5" max="100" value="30" step="5" class="slider"> | |
| <div class="slider-value">30</div> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <label class="control-label">Strength</label> | |
| <div class="slider-container"> | |
| <input type="range" min="0" max="100" value="75" step="5" class="slider"> | |
| <div class="slider-value">75%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Text to Video Interface --> | |
| <div class="tool-interface" id="text-to-video-interface"> | |
| <div class="tool-header"> | |
| <h2>Text to Video Generator</h2> | |
| <div class="credits-badge"> | |
| <i class="fas fa-info-circle"></i> | |
| <span>10 credits per generation</span> | |
| </div> | |
| </div> | |
| <div class="prompt-container"> | |
| <textarea class="prompt-input" placeholder="Describe the video you want to create...">A time-lapse of a futuristic city being built, neon lights, cyberpunk aesthetic, smooth camera movement</textarea> | |
| </div> | |
| <div class="controls-grid"> | |
| <div class="control-group"> | |
| <label class="control-label">Duration</label> | |
| <select class="control-select"> | |
| <option value="3">3 seconds</option> | |
| <option value="5" selected>5 seconds</option> | |
| <option value="10">10 seconds</option> | |
| <option value="15">15 seconds</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label class="control-label">FPS</label> | |
| <select class="control-select"> | |
| <option value="24">24 FPS</option> | |
| <option value="30" selected>30 FPS</option> | |
| <option value="60">60 FPS</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label class="control-label">Motion Strength</label> | |
| <div class="slider-container"> | |
| <input type="range" min="0" max="100" value="65" step="5" class="slider"> | |
| <div class="slider-value">65%</div> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <label class="control-label">Style</label> | |
| <select class="control-select"> | |
| <option value="realistic">Realistic</option> | |
| <option value="cinematic" selected>Cinematic</option> | |
| <option value="anime">Anime</option> | |
| <option value="artistic">Artistic</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="action-buttons"> | |
| <button class="btn-secondary"> | |
| <i class="fas fa-upload"></i> | |
| Upload Image to Animate | |
| </button> | |
| <button class="btn-generate"> | |
| <i class="fas fa-film"></i> | |
| Generate Video | |
| </button> | |
| </div> | |
| </div> | |
| <!-- AI Music Interface --> | |
| <div class="tool-interface" id="ai-music-interface"> | |
| <div class="tool-header"> | |
| <h2>AI Music Generator</h2> | |
| <div class="credits-badge"> | |
| <i class="fas fa-info-circle"></i> | |
| <span>Coming in Phase 2</span> | |
| </div> | |
| </div> | |
| <div style="text-align: center; padding: 4rem 0;"> | |
| <div style="font-size: 5rem; color: var(--accent); margin-bottom: 1rem;"> | |
| <i class="fas fa-music"></i> | |
| </div> | |
| <h3 style="margin-bottom: 1rem; font-weight: 600;">AI Music Generator</h3> | |
| <p style="color: var(--gray); max-width: 500px; margin: 0 auto 2rem;"> | |
| Create original music tracks in any genre with AI composition. | |
| This feature is currently in development and will be available in Phase 2. | |
| </p> | |
| <button class="btn-secondary" disabled> | |
| <i class="fas fa-bell"></i> | |
| Notify Me When Available | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="footer"> | |
| <p>© 2023 NexusAI. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p> | |
| <p>This is a frontend prototype. Backend integration with AI models, GPU inference, and payment processing would be implemented in a full production version.</p> | |
| </div> | |
| </main> | |
| <!-- Progress Bar --> | |
| <div class="progress-bar-container" id="progressBar"> | |
| <div class="progress-header"> | |
| <div> | |
| <strong>Generating Image</strong> | |
| <span style="margin-left: 1rem; color: var(--gray); font-size: 0.9rem;" id="progressText">Initializing...</span> | |
| </div> | |
| <div style="color: var(--gray); font-size: 0.9rem;" id="progressPercent">0%</div> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| </div> | |
| <!-- Built with anycoder badge --> | |
| <div class="anycoder-badge"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const mobileMenuToggle = document.getElementById('mobileMenuToggle'); | |
| const sidebar = document.getElementById('sidebar'); | |
| const toolsGrid = document.getElementById('toolsGrid'); | |
| const toolCards = document.querySelectorAll('.tool-card'); | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| const toolInterfaces = document.querySelectorAll('.tool-interface'); | |
| const pageTitle = document.getElementById('pageTitle'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const progressFill = document.getElementById('progressFill'); | |
| const progressText = document.getElementById('progressText'); | |
| const progressPercent = document.getElementById('progressPercent'); | |
| const generateImageBtn = document.getElementById('generateImageBtn'); | |
| const imageResults = document.getElementById('imageResults'); | |
| // Sliders | |
| const cfgScale = document.getElementById('cfgScale'); | |
| const cfgDisplay = document.getElementById('cfgDisplay'); | |
| const cfgValue = document.getElementById('cfgValue'); | |
| const steps = document.getElementById('steps'); | |
| const stepsDisplay = document.getElementById('stepsDisplay'); | |
| const stepsValue = document.getElementById('stepsValue'); | |
| // Sample image data for the gallery | |
| const sampleImages = [ | |
| { id: 1, prompt: "A majestic dragon flying over a futuristic city at sunset", style: "Cinematic" }, | |
| { id: 2, prompt: "Portrait of a cyberpunk samurai with neon lights", style: "Cyberpunk" }, | |
| { id: 3, prompt: "A serene landscape with mountains and a glowing lake", style: "Realistic" }, | |
| { id: 4, prompt: "Anime character in a magical forest with floating crystals", style: "Anime" }, | |
| { id: 5, prompt: "Abstract geometric patterns with vibrant colors", style: "Artistic" }, | |
| { id: 6, prompt: "Futuristic car design concept with sleek lines", style: "Concept Art" } | |
| ]; | |
| // Initialize the page | |
| function initPage() { | |
| // Set up slider events | |
| cfgScale.addEventListener('input', function() { | |
| cfgDisplay.textContent = this.value; | |
| cfgValue.textContent = this.value; | |
| }); | |
| steps.addEventListener('input', function() { | |
| stepsDisplay.textContent = this.value; | |
| stepsValue.textContent = this.value; | |
| }); | |
| // Load sample images | |
| renderSampleImages(); | |
| // Set up mobile menu toggle | |
| mobileMenuToggle.addEventListener('click', function() { | |
| sidebar.classList.toggle('active'); | |
| }); | |
| // Set up tool card clicks | |
| toolCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| const tool = this.getAttribute('data-tool'); | |
| // Update active card | |
| toolCards.forEach(c => c.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Show corresponding interface | |
| showToolInterface(tool); | |
| // Update active nav link | |
| navLinks.forEach(link => { | |
| if (link.getAttribute('data-tool') === tool) { | |
| link.classList.add('active'); | |
| } else { | |
| link.classList.remove('active'); | |
| } | |
| }); | |
| // Update page title | |
| updatePageTitle(tool); | |
| // Close mobile menu on selection | |
| if (window.innerWidth <= 1024) { | |
| sidebar.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| // Set up nav link clicks | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const tool = this.getAttribute('data-tool'); | |
| // Update active nav link | |
| navLinks.forEach(l => l.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Update active tool card | |
| toolCards.forEach(card => { | |
| if (card.getAttribute('data-tool') === tool) { | |
| card.classList.add('active'); | |
| } else { | |
| card.classList.remove('active'); | |
| } | |
| }); | |
| // Show corresponding interface | |
| showToolInterface(tool); | |
| // Update page title | |
| updatePageTitle(tool); | |
| // Close mobile menu on selection | |
| if (window.innerWidth <= 1024) { | |
| sidebar.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| // Set up generate image button | |
| generateImageBtn.addEventListener('click', simulateGeneration); | |
| // Set up style preset clicks | |
| const stylePresets = document.querySelectorAll('.style-preset'); | |
| stylePresets.forEach(preset => { | |
| preset.addEventListener('click', function() { | |
| stylePresets.forEach(p => p.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| } | |
| // Show the selected tool interface | |
| function showToolInterface(tool) { | |
| toolInterfaces.forEach(interface => { | |
| interface.classList.remove('active'); | |
| }); | |
| const targetInterface = document.getElementById(`${tool}-interface`); | |
| if (targetInterface) { | |
| targetInterface.classList.add('active'); | |
| } | |
| } | |
| // Update page title based on selected tool | |
| function updatePageTitle(tool) { | |
| const titles = { | |
| 'dashboard': 'AI Creative Dashboard', | |
| 'text-to-image': 'Text to Image Generator', | |
| 'image-editor': 'AI Canvas Editor', | |
| 'text-to-video': 'Text to Video Generator', | |
| 'ai-music': 'AI Music Generator' | |
| }; | |
| pageTitle.textContent = titles[tool] || 'NexusAI'; | |
| } | |
| // Render sample images in the gallery | |
| function renderSampleImages() { | |
| imageResults.innerHTML = ''; | |
| sampleImages.forEach(image => { | |
| const resultCard = document.createElement('div'); | |
| resultCard.className = 'result-card'; | |
| resultCard.innerHTML = ` | |
| <div class="result-image"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <div class="result-info"> | |
| <div style="font-size: 0.8rem; color: var(--gray); margin-bottom: 0.25rem;">${image.style}</div> | |
| <div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 2.5rem;"> | |
| ${image.prompt} | |
| </div> | |
| <div class="result-actions"> | |
| <button class="result-action-btn" title="Download"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="result-action-btn" title="Upscale"> | |
| <i class="fas fa-expand-alt"></i> | |
| </button> | |
| <button class="result-action-btn" title= |