Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dream Machine - Uncensored AI Generation</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| 950: '#2e1065', | |
| }, | |
| secondary: { | |
| 50: '#ecfeff', | |
| 100: '#cffafe', | |
| 200: '#a5f3fc', | |
| 300: '#67e8f9', | |
| 400: '#22d3ee', | |
| 500: '#06b6d4', | |
| 600: '#0891b2', | |
| 700: '#0e7490', | |
| 800: '#155e75', | |
| 900: '#164e63', | |
| 950: '#083344', | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'shimmer': 'shimmer 2s linear infinite', | |
| }, | |
| keyframes: { | |
| glow: { | |
| '0%': { boxShadow: '0 0 5px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3)' }, | |
| '100%': { boxShadow: '0 0 20px rgba(139, 92, 246, 0.8), 0 0 40px rgba(139, 92, 246, 0.5)' } | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| shimmer: { | |
| '0%': { backgroundPosition: '-1000px 0' }, | |
| '100%': { backgroundPosition: '1000px 0' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/generator-panel.js"></script> | |
| <script src="components/gallery-grid.js"></script> | |
| </head> | |
| <body class="bg-slate-950 text-slate-100 font-sans antialiased selection:bg-primary-500 selection:text-white overflow-x-hidden"> | |
| <app-navbar></app-navbar> | |
| <main class="relative min-h-screen pt-20 pb-12 px-4 sm:px-6 lg:px-8"> | |
| <!-- Background Effects --> | |
| <div class="fixed inset-0 pointer-events-none overflow-hidden"> | |
| <div class="absolute top-0 left-1/4 w-96 h-96 bg-primary-600/20 rounded-full blur-3xl animate-float"></div> | |
| <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-secondary-600/20 rounded-full blur-3xl animate-float" style="animation-delay: -3s;"></div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-radial from-primary-900/30 to-transparent rounded-full blur-3xl"></div> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto"> | |
| <!-- Hero Section --> | |
| <div class="text-center mb-12 space-y-4"> | |
| <h1 class="text-5xl md:text-7xl font-black tracking-tight bg-gradient-to-r from-primary-400 via-secondary-400 to-primary-400 bg-clip-text text-transparent animate-pulse-slow"> | |
| Dream Machine | |
| </h1> | |
| <p class="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto"> | |
| Text to Image to Video. Advanced AI generation for your creative vision. | |
| </p> | |
| <div class="flex items-center justify-center gap-4 text-sm text-slate-500"> | |
| <span class="flex items-center gap-1"><i data-feather="cpu" class="w-4 h-4"></i> AI-Powered</span> | |
| <span class="w-1 h-1 bg-slate-600 rounded-full"></span> | |
| <span class="flex items-center gap-1"><i data-feather="zap" class="w-4 h-4"></i> Real-time Generation</span> | |
| <span class="w-1 h-1 bg-slate-600 rounded-full"></span> | |
| <span class="flex items-center gap-1"><i data-feather="sparkles" class="w-4 h-4"></i> High Quality Output</span> | |
| </div> | |
| </div> | |
| <!-- Main Interface --> | |
| <div class="grid lg:grid-cols-12 gap-8"> | |
| <!-- Left Panel: Controls --> | |
| <div class="lg:col-span-4 space-y-6"> | |
| <generator-controls></generator-controls> | |
| <!-- Quick Tips --> | |
| <div class="glass-card p-6 rounded-2xl border border-slate-700/50"> | |
| <h3 class="text-sm font-semibold text-slate-300 mb-3 flex items-center gap-2"> | |
| <i data-feather="sparkles" class="w-4 h-4 text-secondary-400"></i> | |
| Pro Tips | |
| </h3> | |
| <ul class="space-y-2 text-xs text-slate-400"> | |
| <li class="flex gap-2"><span class="text-primary-400">•</span> Be specific with lighting and camera angles</li> | |
| <li class="flex gap-2"><span class="text-primary-400">•</span> Use "8k, photorealistic, highly detailed" for best results</li> | |
| <li class="flex gap-2"><span class="text-primary-400">•</span> Negative prompts help remove unwanted elements</li> | |
| <li class="flex gap-2"><span class="text-primary-400">•</span> For video, describe motion in your prompt</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Center/Right: Preview & Gallery --> | |
| <div class="lg:col-span-8 space-y-6"> | |
| <generator-preview></generator-preview> | |
| <gallery-grid></gallery-grid> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |