Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelForge AI Studio - Create Stunning AI Art & Videos</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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: '#8B5CF6', | |
| secondary: '#06B6D4', | |
| dark: '#0F172A', | |
| light: '#F8FAFC' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sidebar-transition { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .creative-card { | |
| background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); | |
| box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .floating-animation { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark text-light min-h-screen flex"> | |
| <!-- Sidebar --> | |
| <div class="w-20 lg:w-64 sidebar-transition glass-effect min-h-screen p-4 flex flex-col"> | |
| <!-- Logo --> | |
| <div class="flex items-center justify-center lg:justify-start mb-8"> | |
| <div class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center"> | |
| <i data-feather="sparkles" class="text-white"></i> | |
| </div> | |
| <span class="hidden lg:block ml-3 text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> | |
| PixelForge | |
| </span> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1"> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center p-3 rounded-xl bg-primary text-white transition-all duration-200 hover:scale-105"> | |
| <i data-feather="home" class="w-5 h-5"></i> | |
| <span class="hidden lg:block ml-3 font-medium">Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded-xl text-gray-300 hover:bg-white/10 transition-all duration-200"> | |
| <i data-feather="image" class="w-5 h-5"></i> | |
| <span class="hidden lg:block ml-3 font-medium">Image Generation</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded-xl text-gray-300 hover:bg-white/10 transition-all duration-200"> | |
| <i data-feather="video" class="w-5 h-5"></i> | |
| <span class="hidden lg:block ml-3 font-medium">Video Creation</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded-xl text-gray-300 hover:bg-white/10 transition-all duration-200"> | |
| <i data-feather="zap" class="w-5 h-5"></i> | |
| <span class="hidden lg:block ml-3 font-medium">AI Upscale</span> | |
| </a> | |
| <a href="#" class="flex items-center p-3 rounded-xl text-gray-300 hover:bg-white/10 transition-all duration-200"> | |
| <i data-feather="folder" class="w-5 h-5"></i> | |
| <span class="hidden lg:block ml-3 font-medium">My Creations</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- User Profile --> | |
| <div class="mt-auto"> | |
| <div class="flex items-center p-3 rounded-xl hover:bg-white/10 transition-all duration-200 cursor-pointer"> | |
| <div class="w-8 h-8 bg-gradient-to-r from-secondary to-primary rounded-full flex items-center justify-center"> | |
| <i data-feather="user" class="w-4 h-4 text-white"></i> | |
| </div> | |
| <div class="hidden lg:block ml-3"> | |
| <p class="text-sm font-medium">Alex Chen</p> | |
| <p class="text-xs text-gray-400">Pro Plan</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 p-6 lg:p-8"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between"> | |
| <div> | |
| <h1 class="text-3xl lg:text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> | |
| Create Magic with AI | |
| </h1> | |
| <p class="text-gray-400 mt-2">Transform your ideas into stunning visuals and videos</p> | |
| </div> | |
| <div class="flex items-center space-x-4 mt-4 lg:mt-0"> | |
| <button class="flex items-center px-4 py-2 bg-primary text-white rounded-xl hover:bg-purple-700 transition-all duration-200"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| New Creation | |
| </button> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search creations..." class="pl-10 pr-4 py-2 bg-dark border border-gray-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <i data-feather="search" class="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="creative-card rounded-2xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-600 text-sm">Images Created</p> | |
| <p class="text-2xl font-bold text-dark mt-1">1,247</p> | |
| </div> | |
| <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center"> | |
| <i data-feather="image" class="w-6 h-6 text-blue-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="creative-card rounded-2xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-600 text-sm">Videos Generated</p> | |
| <p class="text-2xl font-bold text-dark mt-1">328</p> | |
| </div> | |
| <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center"> | |
| <i data-feather="video" class="w-6 h-6 text-green-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="creative-card rounded-2xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-600 text-sm">Credits Left</p> | |
| <p class="text-2xl font-bold text-dark mt-1">1.2K</p> | |
| </div> | |
| <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center"> | |
| <i data-feather="zap" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="creative-card rounded-2xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-600 text-sm">Active Projects</p> | |
| <p class="text-2xl font-bold text-dark mt-1">12</p> | |
| </div> | |
| <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center"> | |
| <i data-feather="folder" class="w-6 h-6 text-orange-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Creation Tools --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Image Generator --> | |
| <div class="creative-card rounded-2xl p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold text-dark">AI Image Generator</h2> | |
| <div class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center"> | |
| <i data-feather="image" class="w-5 h-5 text-white"></i> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <textarea | |
| placeholder="Describe your vision... A majestic dragon flying over a futuristic city at sunset..." | |
| class="w-full h-32 p-4 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary resize-none" | |
| ></textarea> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <select class="p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <option>Realistic Style</option> | |
| <option>Anime Style</option> | |
| <option>Digital Art</option> | |
| <option>Oil Painting</option> | |
| </select> | |
| <select class="p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <option>Square (1:1)</option> | |
| <option>Landscape (16:9)</option> | |
| <option>Portrait (9:16)</option> | |
| </select> | |
| </div> | |
| <button class="w-full bg-gradient-to-r from-primary to-secondary text-white py-3 rounded-xl font-medium hover:shadow-lg transition-all duration-200"> | |
| Generate Image | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Video Generator --> | |
| <div class="creative-card rounded-2xl p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold text-dark">AI Video Creator</h2> | |
| <div class="w-10 h-10 bg-gradient-to-r from-secondary to-primary rounded-xl flex items-center justify-center"> | |
| <i data-feather="video" class="w-5 h-5 text-white"></i> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <textarea | |
| placeholder="Describe your video scene... A robot exploring an alien planet with glowing plants..." | |
| class="w-full h-32 p-4 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary resize-none" | |
| ></textarea> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <select class="p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <option>4 Seconds</option> | |
| <option>8 Seconds</option> | |
| <option>12 Seconds</option> | |
| </select> | |
| <select class="p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <option>Cinematic</option> | |
| <option>Animated</option> | |
| <option>Realistic</option> | |
| </select> | |
| </div> | |
| <button class="w-full bg-gradient-to-r from-secondary to-primary text-white py-3 rounded-xl font-medium hover:shadow-lg transition-all duration-200"> | |
| Create Video | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Creations --> | |
| <div class="mt-12"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold text-light">Recent Creations</h2> | |
| <a href="#" class="text-primary hover:text-purple-400 transition-colors duration-200"> | |
| View All | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Sample Creation Cards --> | |
| <div class="creative-card rounded-2xl p-4 group cursor-pointer hover:scale-105 transition-all duration-300"> | |
| <div class="aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-xl mb-3 flex items-center justify-center"> | |
| <i data-feather="image" class="w-8 h-8 text-white opacity-80"></i> | |
| </div> | |
| <p class="text-sm text-gray-600">Cosmic warrior in neon armor</p> | |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> | |
| </div> | |
| <div class="creative-card rounded-2xl p-4 group cursor-pointer hover:scale-105 transition-all duration-300"> | |
| <div class="aspect-square bg-gradient-to-br from-green-400 to-cyan-600 rounded-xl mb-3 flex items-center justify-center"> | |
| <i data-feather="video" class="w-8 h-8 text-white opacity-80"></i> | |
| </div> | |
| <p class="text-sm text-gray-600">Floating islands animation</p> | |
| <p class="text-xs text-gray-400 mt-1">5 hours ago</p> | |
| </div> | |
| <div class="creative-card rounded-2xl p-4 group cursor-pointer hover:scale-105 transition-all duration-300"> | |
| <div class="aspect-square bg-gradient-to-br from-orange-400 to-pink-600 rounded-xl mb-3 flex items-center justify-center"> | |
| <i data-feather="image" class="w-8 h-8 text-white opacity-80"></i> | |
| </div> | |
| <p class="text-sm text-gray-600">Cyberpunk city at night</p> | |
| <p class="text-xs text-gray-400 mt-1">Yesterday</p> | |
| </div> | |
| <div class="creative-card rounded-2xl p-4 group cursor-pointer hover:scale-105 transition-all duration-300"> | |
| <div class="aspect-square bg-gradient-to-br from-purple-400 to-blue-600 rounded-xl mb-3 flex items-center justify-center"> | |
| <i data-feather="image" class="w-8 h-8 text-white opacity-80"></i> | |
| </div> | |
| <p class="text-sm text-gray-600">Magical forest portal</p> | |
| <p class="text-xs text-gray-400 mt-1">2 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "body", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x8b5cf6, | |
| backgroundColor: 0x0f172a, | |
| size: 0.8 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |