|
|
<!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> |
