Hugging Face's logo

Spaces:
ANTIMOLL
/
opt6968
Running

App Files Community
opt6968 / index.html
ANTIMOLL's picture
ANTIMOLL
Add 2 files
7782960 verified
raw
history blame contribute delete
35.7 kB
 <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmic Explorers | Виртуальные космические экспедиции</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Space+Grotesk:wght@300;500;700&display=swap');
:root {
--starfield-bg: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
--neon-blue: #00f3ff;
--deep-space: #0a0e17;
--stellar-purple: #7b2dff;
}
body {
font-family: 'Space Grotesk', sans-serif;
background: var(--starfield-bg);
color: white;
min-height: 100vh;
overflow-x: hidden;
}
h1, h2, h3 {
font-family: 'Orbitron', sans-serif;
}
.logo-container {
position: relative;
width: 120px;
height: 120px;
}
.logo-base {
position: absolute;
width: 100%;
height: 100%;
background: conic-gradient(from 180deg, var(--neon-blue), var(--stellar-purple));
border-radius: 50%;
animation: spin 8s linear infinite;
filter: blur(10px);
opacity: 0.7;
}
.logo-text {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
background: transparent;
border-radius: 50%;
z-index: 2;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle var(--duration) ease-in-out infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
.planet-card {
transition: all 0.3s ease;
background: rgba(10, 14, 23, 0.7);
border: 1px solid rgba(123, 45, 255, 0.3);
border-radius: 16px;
overflow: hidden;
}
.planet-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0, 243, 255, 0.3);
border-color: var(--neon-blue);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--neon-blue);
transition: width 0.3s;
}
.nav-link:hover::after {
width: 100%;
}
.btn-neon {
background: linear-gradient(45deg, var(--neon-blue), var(--stellar-purple));
color: var(--deep-space);
font-weight: 700;
transition: all 0.3s;
}
.btn-neon:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 243, 255, 0.4);
}
.mission-path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body class="antialiased">
<!-- Starfield Background -->
<div id="starfield" class="fixed top-0 left-0 w-full h-full -z-10"></div>
<!-- Navigation -->
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<div class="logo-container">
<div class="logo-base"></div>
<div class="logo-text">CE</div>
</div>
<span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500">
Cosmic Explorers
</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="nav-link text-lg">Экспедиции</a>
<a href="#" class="nav-link text-lg">Обучение</a>
<a href="#" class="nav-link text-lg">Сообщество</a>
<a href="#" class="nav-link text-lg">О нас</a>
</div>
<div class="flex items-center space-x-4">
<button class="px-4 py-2 rounded-full border border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:bg-opacity-10 transition">
Войти
</button>
<button class="btn-neon px-6 py-2 rounded-full">
Старт
</button>
<button class="md:hidden text-2xl">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="container mx-auto px-6 py-20 mt-10">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0">
<h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
Исследуйте <span class="text-cyan-400">Вселенную</span> не выходя из дома
</h1>
<p class="text-xl text-gray-300 mb-8">
Виртуальные космические экспедиции с элементами обучения.
Отправляйтесь к далеким галактикам, изучайте экзопланеты и собирайте космические достижения.
</p>
<div class="flex space-x-4">
<button class="btn-neon px-8 py-3 rounded-full text-lg">
Начать путешествие
</button>
<button class="px-6 py-3 rounded-full border border-purple-500 text-purple-400 hover:bg-purple-500 hover:bg-opacity-10 transition flex items-center">
<i class="fas fa-play-circle mr-2"></i> Демо
</button>
</div>
<div class="mt-12 flex items-center space-x-8">
<div>
<div class="text-3xl font-bold text-cyan-400">47+</div>
<div class="text-gray-400">Планетных систем</div>
</div>
<div>
<div class="text-3xl font-bold text-purple-400">120K+</div>
<div class="text-gray-400">Исследователей</div>
</div>
<div>
<div class="text-3xl font-bold text-pink-400">3D</div>
<div class="text-gray-400">Полное погружение</div>
</div>
</div>
</div>
<div class="md:w-1/2 relative">
<div class="relative">
<img src="https://images.unsplash.com/photo-1454789548928-9a2293cd51b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
alt="Cosmic Explorer"
class="rounded-2xl shadow-2xl w-full max-w-lg mx-auto border-2 border-cyan-400 border-opacity-30">
<div class="absolute -bottom-6 -right-6 bg-gray-900 rounded-xl px-4 py-2 border border-cyan-400 shadow-lg">
<div class="flex items-center">
<div class="h-3 w-3 rounded-full bg-green-400 mr-2 animate-pulse"></div>
<span>Экспедиция активна</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Expeditions -->
<section class="container mx-auto px-6 py-16">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">Популярные экспедиции</h2>
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
Выберите свою следующую космическую миссию из нашей постоянно расширяющейся коллекции
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Expedition 1 -->
<div class="planet-card group">
<div class="relative overflow-hidden h-64">
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
alt="Kepler-186f"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
<div class="absolute bottom-4 left-4">
<span class="bg-cyan-600 text-xs px-2 py-1 rounded">НОВИНКА</span>
<h3 class="text-2xl font-bold mt-2">Kepler-186f</h3>
<p class="text-sm text-gray-300">Землеподобная экзопланета</p>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<i class="fas fa-lightbulb text-yellow-400 mr-2"></i>
<span class="text-sm">Средний уровень</span>
</div>
<div class="text-purple-400">
<i class="fas fa-clock mr-1"></i>
<span>2.5 часа</span>
</div>
</div>
<p class="text-gray-400 mb-4">
Первая планета размером с Землю, обнаруженная в обитаемой зоне другой звезды.
</p>
<div class="flex justify-between items-center">
<div class="flex -space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
<div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">
+12
</div>
</div>
<button class="btn-neon px-4 py-2 rounded-full text-sm">
Присоединиться
</button>
</div>
</div>
</div>
<!-- Expedition 2 -->
<div class="planet-card group">
<div class="relative overflow-hidden h-64">
<img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
alt="Туманность Ориона"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
<div class="absolute bottom-4 left-4">
<h3 class="text-2xl font-bold mt-2">Туманность Ориона</h3>
<p class="text-sm text-gray-300">Звездные ясли</p>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<i class="fas fa-lightbulb text-green-400 mr-2"></i>
<span class="text-sm">Начинающий</span>
</div>
<div class="text-purple-400">
<i class="fas fa-clock mr-1"></i>
<span>1.5 часа</span>
</div>
</div>
<p class="text-gray-400 mb-4">
Исследуйте одну из самых ярких туманностей, где рождаются новые звезды и планетные системы.
</p>
<div class="flex justify-between items-center">
<div class="flex -space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/33.jpg" alt="">
<div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">
+28
</div>
</div>
<button class="btn-neon px-4 py-2 rounded-full text-sm">
Присоединиться
</button>
</div>
</div>
</div>
<!-- Expedition 3 -->
<div class="planet-card group">
<div class="relative overflow-hidden h-64">
<img src="https://images.unsplash.com/photo-1464802686167-b939a6910659?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
alt="Галактика Андромеды"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
<div class="absolute bottom-4 left-4">
<span class="bg-purple-600 text-xs px-2 py-1 rounded">ПРЕМИУМ</span>
<h3 class="text-2xl font-bold mt-2">Галактика Андромеды</h3>
<p class="text-sm text-gray-300">Спиральная галактика</p>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<i class="fas fa-lightbulb text-red-400 mr-2"></i>
<span class="text-sm">Эксперт</span>
</div>
<div class="text-purple-400">
<i class="fas fa-clock mr-1"></i>
<span>4 часа</span>
</div>
</div>
<p class="text-gray-400 mb-4">
Отправьтесь в межгалактическое путешествие к нашей ближайшей соседке, которая столкнется с Млечным Путем через 4 млрд лет.
</p>
<div class="flex justify-between items-center">
<div class="flex -space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/90.jpg" alt="">
<img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/42.jpg" alt="">
<div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">
+5
</div>
</div>
<button class="btn-neon px-4 py-2 rounded-full text-sm">
Присоединиться
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="px-8 py-3 rounded-full border border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:bg-opacity-10 transition flex items-center mx-auto">
<i class="fas fa-globe-americas mr-2"></i> Все экспедиции
</button>
</div>
</section>
<!-- Learning Path -->
<section class="container mx-auto px-6 py-16 bg-gradient-to-r from-gray-900 to-gray-800 rounded-3xl my-16">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">Образовательные маршруты</h2>
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
Систематизированные программы обучения, сочетающие теорию и практику космических исследований
</p>
</div>
<div class="relative">
<svg class="hidden md:block absolute top-0 left-0 w-full h-full" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path d="M100,150 Q250,50 400,150 T700,150 L900,150"
stroke="rgba(0, 243, 255, 0.3)"
stroke-width="4"
fill="none"
class="mission-path"/>
</svg>
<div class="relative grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Step 1 -->
<div class="bg-gray-800 bg-opacity-50 rounded-2xl p-6 border border-cyan-400 border-opacity-30 backdrop-blur-sm">
<div class="w-12 h-12 rounded-full bg-cyan-500 flex items-center justify-center text-xl mb-4">
1
</div>
<h3 class="text-2xl font-bold mb-3">Основы астрономии</h3>
<p class="text-gray-400 mb-4">
Изучите фундаментальные концепции: от движения планет до жизненных циклов звезд.
</p>
<div class="flex items-center text-sm text-cyan-400">
<span>8 модулей</span>
<span class="mx-2">•</span>
<span>15 часов</span>
</div>
</div>
<!-- Step 2 -->
<div class="bg-gray-800 bg-opacity-50 rounded-2xl p-6 border border-purple-500 border-opacity-30 backdrop-blur-sm md:mt-20">
<div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-xl mb-4">
2
</div>
<h3 class="text-2xl font-bold mb-3">Космические технологии</h3>
<p class="text-gray-400 mb-4">
Как работают телескопы, космические аппараты и системы навигации в космосе.
</p>
<div class="flex items-center text-sm text-purple-400">
<span>6 модулей</span>
<span class="mx-2">•</span>
<span>12 часов</span>
</div>
</div>
<!-- Step 3 -->
<div class="bg-gray-800 bg-opacity-50 rounded-2xl p-6 border border-pink-500 border-opacity-30 backdrop-blur-sm">
<div class="w-12 h-12 rounded-full bg-pink-500 flex items-center justify-center text-xl mb-4">
3
</div>
<h3 class="text-2xl font-bold mb-3">Экзопланетология</h3>
<p class="text-gray-400 mb-4">
Методы поиска и анализа планет за пределами Солнечной системы.
</p>
<div class="flex items-center text-sm text-pink-400">
<span>10 модулей</span>
<span class="mx-2">•</span>
<span>20 часов</span>
</div>
</div>
</div>
</div>
<div class="text-center mt-16">
<button class="btn-neon px-8 py-3 rounded-full text-lg">
Начать обучение
</button>
</div>
</section>
<!-- Testimonials -->
<section class="container mx-auto px-6 py-16">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">Отзывы исследователей</h2>
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
Присоединяйтесь к сообществу космических энтузиастов
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-gray-900 rounded-2xl p-8 border border-gray-800">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Анна К." class="w-16 h-16 rounded-full border-2 border-cyan-400">
<div class="ml-4">
<h4 class="text-xl font-bold">Анна К.</h4>
<p class="text-gray-400">Учитель физики</p>
</div>
</div>
<p class="text-gray-300 mb-6">
"Использую Cosmic Explorers на своих уроках. Дети в восторге от 3D-моделей планетных систем! Лучший способ заинтересовать астрономией."
</p>
<div class="flex space-x-2">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-900 rounded-2xl p-8 border border-gray-800">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/54.jpg" alt="Дмитрий П." class="w-16 h-16 rounded-full border-2 border-purple-500">
<div class="ml-4">
<h4 class="text-xl font-bold">Дмитрий П.</h4>
<p class="text-gray-400">Студент-астрофизик</p>
</div>
</div>
<p class="text-gray-300 mb-6">
"Как будущий ученый ценю точность данных и качество визуализации. Особенно впечатлила симуляция релятивистских эффектов возле черных дыр!"
</p>
<div class="flex space-x-2">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star-half-alt text-yellow-400"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-gray-900 rounded-2xl p-8 border border-gray-800">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Елена С." class="w-16 h-16 rounded-full border-2 border-pink-500">
<div class="ml-4">
<h4 class="text-xl font-bold">Елена С.</h4>
<p class="text-gray-400">UX дизайнер</p>
</div>
</div>
<p class="text-gray-300 mb-6">
"Как дизайнер оцениваю безупречный UI/UX. А как обычный человек - возможность доступно узнать о сложных космических явлениях. Идеальный баланс!"
</p>
<div class="flex space-x-2">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="container mx-auto px-6 py-20 text-center">
<div class="max-w-4xl mx-auto bg-gray-900 bg-opacity-50 rounded-3xl p-12 border border-cyan-400 border-opacity-30 backdrop-blur-sm">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Готовы к запуску?</h2>
<p class="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
Присоединяйтесь к более чем 120,000 космических исследователей по всему миру
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="btn-neon px-8 py-4 rounded-full text-lg">
Начать бесплатно
</button>
<button class="px-8 py-4 rounded-full border border-purple-500 text-purple-400 hover:bg-purple-500 hover:bg-opacity-10 transition">
Узнать о премиум
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 bg-opacity-80 border-t border-gray-800">
<div class="container mx-auto px-6 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12">
<div>
<div class="flex items-center space-x-4 mb-6">
<div class="logo-container" style="width: 50px; height: 50px;">
<div class="logo-base"></div>
<div class="logo-text text-sm">CE</div>
</div>
<span class="text-xl font-bold">Cosmic Explorers</span>
</div>
<p class="text-gray-400 mb-4">
Виртуальные космические экспедиции с 2023 года
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-cyan-400 transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-purple-400 transition">
<i class="fab fa-discord"></i>
</a>
<a href="#" class="text-gray-400 hover:text-pink-400 transition">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-6">Экспедиции</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Солнечная система</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Экзопланеты</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Галактики</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Туманности</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Черные дыры</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">Обучение</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Курсы</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Квесты</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Достижения</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Энциклопедия</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Для преподавателей</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">Компания</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-pink-400 transition">О нас</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-400 transition">Карьера</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-400 transition">Блог</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-400 transition">Контакты</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-400 transition">Поддержка</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 mb-4 md:mb-0">
© 2023 Cosmic Explorers. Все права защищены.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-gray-300 transition">Условия</a>
<a href="#" class="text-gray-500 hover:text-gray-300 transition">Конфиденциальность</a>
<a href="#" class="text-gray-500 hover:text-gray-300 transition">Cookies</a>
</div>
</div>
</div>
</footer>
<script>
// Create starfield
document.addEventListener('DOMContentLoaded', function() {
const starfield = document.getElementById('starfield');
const starsCount = 200;
for (let i = 0; i < starsCount; i++) {
const star = document.createElement('div');
star.classList.add('star');
// Random size between 1 and 3px
const size = Math.random() * 2 + 1;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
// Random position
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
// Random animation duration
star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);
starfield.appendChild(star);
}
// Animate mission path
const path = document.querySelector('.mission-path');
if (path) {
setTimeout(() => {
path.style.strokeDashoffset = '0';
}, 500);
}
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.md\\:hidden');
if (mobileMenuButton) {
mobileMenuButton.addEventListener('click', function() {
const navLinks = document.querySelector('.md\\:flex');
if (navLinks) {
navLinks.classList.toggle('hidden');
navLinks.classList.toggle('flex');
navLinks.classList.toggle('flex-col');
navLinks.classList.toggle('absolute');
navLinks.classList.toggle('top-20');
navLinks.classList.toggle('right-6');
navLinks.classList.toggle('bg-gray-900');
navLinks.classList.toggle('p-4');
navLinks.classList.toggle('rounded-lg');
navLinks.classList.toggle('border');
navLinks.classList.toggle('border-gray-800');
navLinks.classList.toggle('space-y-4');
navLinks.classList.toggle('space-x-0');
}
});
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ANTIMOLL/opt6968" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>