| <!DOCTYPE html> |
| <html lang="en" data-theme="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Vortex Cortex - Multiverse Generator</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| 950: '#082f49', |
| }, |
| secondary: { |
| 50: '#fdf4ff', |
| 100: '#fae8ff', |
| 200: '#f5d0fe', |
| 300: '#f0abfc', |
| 400: '#e879f9', |
| 500: '#d946ef', |
| 600: '#c026d3', |
| 700: '#a21caf', |
| 800: '#86198f', |
| 900: '#701a75', |
| 950: '#4a044e', |
| }, |
| accent: { |
| 50: '#fff7ed', |
| 100: '#ffedd5', |
| 200: '#fed7aa', |
| 300: '#fdba74', |
| 400: '#fb923c', |
| 500: '#f97316', |
| 600: '#ea580c', |
| 700: '#c2410c', |
| 800: '#9a3412', |
| 900: '#7c2d12', |
| 950: '#431407', |
| } |
| }, |
| animation: { |
| 'spin-slow': 'spin 8s linear infinite', |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'float': 'float 6s ease-in-out infinite', |
| 'glow': 'glow 2s ease-in-out infinite alternate', |
| 'morph': 'morph 8s ease-in-out infinite', |
| 'shimmer': 'shimmer 2s linear infinite', |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-20px)' }, |
| }, |
| glow: { |
| '0%': { boxShadow: '0 0 20px rgba(14, 165, 233, 0.5)' }, |
| '100%': { boxShadow: '0 0 40px rgba(14, 165, 233, 0.8), 0 0 60px rgba(217, 70, 239, 0.4)' }, |
| }, |
| morph: { |
| '0%, 100%': { borderRadius: '60% 40% 30% 70%/60% 30% 70% 40%' }, |
| '50%': { borderRadius: '30% 60% 70% 40%/50% 60% 30% 60%' }, |
| }, |
| shimmer: { |
| '0%': { backgroundPosition: '-200% 0' }, |
| '100%': { backgroundPosition: '200% 0' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-slate-950 text-white min-h-screen overflow-x-hidden"> |
| |
| <div class="fixed inset-0 z-0"> |
| <div class="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div> |
| <div class="absolute inset-0 opacity-30"> |
| <canvas id="neural-canvas"></canvas> |
| </div> |
| <div class="absolute top-20 left-10 w-72 h-72 bg-primary-500/20 rounded-full blur-3xl animate-float"></div> |
| <div class="absolute bottom-20 right-10 w-96 h-96 bg-secondary-500/20 rounded-full blur-3xl animate-float" style="animation-delay: -3s;"></div> |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-accent-500/10 rounded-full blur-3xl animate-pulse-slow"></div> |
| </div> |
|
|
| |
| <custom-navbar></custom-navbar> |
|
|
| |
| <main class="relative z-10 pt-20"> |
| |
| <section class="min-h-[90vh] flex items-center justify-center px-4"> |
| <div class="max-w-7xl mx-auto text-center"> |
| <div class="mb-8"> |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-primary-500/20 to-secondary-500/20 border border-primary-500/30 animate-glow"> |
| <span class="w-2 h-2 rounded-full bg-primary-400 animate-pulse"></span> |
| <span class="text-sm font-medium text-primary-300">Up to 20K Resolution</span> |
| </div> |
| </div> |
| <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold mb-6 leading-tight"> |
| <span class="bg-gradient-to-r from-primary-400 via-secondary-400 to-accent-400 bg-clip-text text-transparent animate-shimmer bg-[length:200%_100%]"> |
| Transform Ideas |
| </span> |
| <br> |
| <span class="text-white">Into Reality</span> |
| </h1> |
| <p class="text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto mb-12"> |
| Generate cinema-quality content in 4K, 8K, 16K and beyond. Professional-grade AI by Mostar Industries. |
| </p> |
| |
| <div class="max-w-4xl mx-auto"> |
| <custom-prompt-input id="hero-prompt"></custom-prompt-input> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Four Dimensions of Creation</h2> |
| <p class="text-slate-400 text-lg">Choose your medium and let AI do the magic</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <custom-feature-card |
| type="image" |
| title="AI Images" |
| description="Generate photorealistic and artistic images from text descriptions using Stable Diffusion XL." |
| icon="image" |
| color="primary" |
| ></custom-feature-card> |
| |
| <custom-feature-card |
| type="video" |
| title="AI Video" |
| description="Create dynamic video content with text-to-video diffusion models and temporal coherence." |
| icon="video" |
| color="secondary" |
| ></custom-feature-card> |
| |
| <custom-feature-card |
| type="gif" |
| title="Animated GIFs" |
| description="Produce loopable, high-quality GIF animations perfect for web and social media." |
| icon="film" |
| color="accent" |
| ></custom-feature-card> |
| |
| <custom-feature-card |
| type="3d" |
| title="3D Models" |
| description="Generate textured 3D meshes and point clouds ready for games, VR, and printing." |
| icon="box" |
| color="primary" |
| ></custom-feature-card> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="studio" class="py-20 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="glass-panel rounded-3xl p-8 md:p-12"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Generation Studio</h2> |
| <p class="text-slate-400">Advanced controls for professional results</p> |
| </div> |
| |
| <custom-generation-studio></custom-generation-studio> |
| </div> |
| </div> |
| </section> |
| |
| <section class="py-20 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="glass-panel rounded-3xl p-8 md:p-12 mb-12"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center"> |
| <div class="p-6 rounded-2xl bg-gradient-to-br from-primary-500/10 to-transparent"> |
| <div class="text-4xl md:text-5xl font-bold text-primary-400 mb-2">4K</div> |
| <div class="text-sm text-slate-400">Ultra-HD</div> |
| <div class="text-xs text-slate-500 mt-1">3840 × 2160</div> |
| </div> |
| <div class="p-6 rounded-2xl bg-gradient-to-br from-secondary-500/10 to-transparent"> |
| <div class="text-4xl md:text-5xl font-bold text-secondary-400 mb-2">8K</div> |
| <div class="text-sm text-slate-400">Full Ultra</div> |
| <div class="text-xs text-slate-500 mt-1">7680 × 4320</div> |
| </div> |
| <div class="p-6 rounded-2xl bg-gradient-to-br from-accent-500/10 to-transparent"> |
| <div class="text-4xl md:text-5xl font-bold text-accent-400 mb-2">16K</div> |
| <div class="text-sm text-slate-400">Cinema</div> |
| <div class="text-xs text-slate-500 mt-1">15360 × 8640</div> |
| </div> |
| <div class="p-6 rounded-2xl bg-gradient-to-br from-primary-500/10 via-secondary-500/10 to-accent-500/10"> |
| <div class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-primary-400 via-secondary-400 to-accent-400 bg-clip-text text-transparent mb-2">20K+</div> |
| <div class="text-sm text-slate-400">Maximum</div> |
| <div class="text-xs text-slate-500 mt-1">20480+</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="flex items-center justify-between mb-12 flex-wrap gap-4"> |
| <div> |
| <h2 class="text-3xl md:text-4xl font-bold mb-2">High-Res Gallery</h2> |
| <p class="text-slate-400">Community creations in stunning detail</p> |
| </div> |
| <custom-model-selector></custom-model-selector> |
| </div> |
| |
| <custom-gallery-grid id="gallery"></custom-gallery-grid> |
| </div> |
| </section> |
| |
| <section class="py-20 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="glass-panel rounded-2xl p-8"> |
| <div class="flex items-center justify-between mb-8 flex-wrap gap-4"> |
| <h3 class="text-2xl font-bold">Hugging Face Integration Status</h3> |
| <div class="flex items-center gap-2"> |
| <span class="w-3 h-3 rounded-full bg-emerald-500 animate-pulse"></span> |
| <span class="text-emerald-400 font-medium">All Systems Operational</span> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4" id="api-status-grid"> |
| |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="pricing" class="py-20 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Choose Your Dimension</h2> |
| <p class="text-slate-400">Flexible plans for creators of all scales</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <custom-pricing-card |
| tier="starter" |
| price="0" |
| features='["100 generations/month","Standard quality","720p images","Community support","Public gallery"]' |
| ></custom-pricing-card> |
| |
| <custom-pricing-card |
| tier="creator" |
| price="29" |
| features='["Unlimited generations","4K quality","Video up to 10s","Priority processing","Private storage","API access"]' |
| popular="true" |
| ></custom-pricing-card> |
| |
| <custom-pricing-card |
| tier="enterprise" |
| price="99" |
| features='["Everything in Creator","Custom model training","Dedicated GPU","White-label options","SLA guarantee","24/7 support"]' |
| ></custom-pricing-card> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <custom-footer></custom-footer> |
|
|
| |
| <custom-generation-modal id="generation-modal"></custom-generation-modal> |
|
|
| |
| <script src="components/navbar.js"></script> |
| <script src="components/prompt-input.js"></script> |
| <script src="components/feature-card.js"></script> |
| <script src="components/generation-studio.js"></script> |
| <script src="components/model-selector.js"></script> |
| <script src="components/gallery-grid.js"></script> |
| <script src="components/pricing-card.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="components/generation-modal.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
