|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Space English - Learn English in Cosmic Style</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> |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0c4a6e 100%); |
|
|
} |
|
|
.planet { |
|
|
background: radial-gradient(circle at 30% 30%, #4f46e5, #1e40af); |
|
|
box-shadow: 0 0 60px rgba(79, 70, 229, 0.5); |
|
|
} |
|
|
.astronaut-helmet { |
|
|
background: radial-gradient(circle at 40% 40%, #e0e7ff, #c7d2fe); |
|
|
} |
|
|
.meteor { |
|
|
position: absolute; |
|
|
width: 4px; |
|
|
height: 4px; |
|
|
background: white; |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
.word-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
.word-card:hover { |
|
|
transform: translateY(-10px) rotateX(10deg); |
|
|
box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.5); |
|
|
} |
|
|
.typewriter { |
|
|
overflow: hidden; |
|
|
border-right: 3px solid #818cf8; |
|
|
white-space: nowrap; |
|
|
letter-spacing: 2px; |
|
|
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; |
|
|
} |
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: #818cf8 } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen text-white font-sans overflow-x-hidden"> |
|
|
|
|
|
<div id="stars-container" class="fixed inset-0 overflow-hidden z-0"></div> |
|
|
|
|
|
|
|
|
<header class="relative z-10"> |
|
|
<nav class="container mx-auto px-6 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="planet w-12 h-12 rounded-full relative overflow-hidden"> |
|
|
<div class="absolute inset-0 rounded-full opacity-30" style="background: conic-gradient(from 0deg, transparent 0deg 90deg, white 90deg 180deg, transparent 180deg 270deg, white 270deg 360deg);"></div> |
|
|
</div> |
|
|
<span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">SpaceEnglish</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#courses" class="hover:text-blue-300 transition">Courses</a> |
|
|
<a href="#features" class="hover:text-blue-300 transition">Features</a> |
|
|
<a href="#practice" class="hover:text-blue-300 transition">Practice</a> |
|
|
<a href="#testimonials" class="hover:text-blue-300 transition">Testimonials</a> |
|
|
</div> |
|
|
<button class="md:hidden text-2xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="relative z-10 container mx-auto px-6 py-20 md:py-32 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> |
|
|
<span class="typewriter">Launch Your English</span><br> |
|
|
<span class="text-blue-400">To The Stars</span> |
|
|
</h1> |
|
|
<p class="text-lg md:text-xl text-gray-300 mb-8"> |
|
|
Explore the universe of English language with our interactive space-themed courses. |
|
|
Designed for cosmic explorers who want to communicate across galaxies. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition transform hover:scale-105"> |
|
|
Start Free Trial |
|
|
</button> |
|
|
<button class="border border-blue-400 text-blue-400 hover:bg-blue-900 hover:bg-opacity-30 px-8 py-3 rounded-full font-medium transition transform hover:scale-105"> |
|
|
Take a Tour |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center relative"> |
|
|
<div class="planet w-64 h-64 rounded-full relative floating"> |
|
|
<div class="absolute top-1/4 left-1/4 w-8 h-8 rounded-full bg-blue-800"></div> |
|
|
<div class="absolute bottom-1/4 right-1/4 w-12 h-12 rounded-full bg-blue-900"></div> |
|
|
<div class="absolute top-1/3 right-1/5 w-6 h-6 rounded-full bg-indigo-900"></div> |
|
|
</div> |
|
|
<div class="astronaut-helmet w-40 h-40 rounded-full absolute -bottom-10 -right-10 md:-right-20 flex items-center justify-center"> |
|
|
<div class="w-32 h-32 rounded-full relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-black opacity-30"></div> |
|
|
<div class="absolute top-1/3 left-1/4 w-16 h-1 bg-white rounded-full"></div> |
|
|
<div class="absolute top-2/3 left-1/4 w-16 h-1 bg-white rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="relative z-10 py-20 bg-black bg-opacity-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16"> |
|
|
<span class="border-b-4 border-blue-500 pb-2">Cosmic Learning Features</span> |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-12"> |
|
|
<div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800 hover:border-blue-500 transition"> |
|
|
<div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-satellite-dish text-2xl text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Interactive Lessons</h3> |
|
|
<p class="text-gray-300"> |
|
|
Engage with holographic tutors and AI-powered language exercises that adapt to your cosmic learning speed. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800 hover:border-blue-500 transition"> |
|
|
<div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-rocket text-2xl text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Accelerated Learning</h3> |
|
|
<p class="text-gray-300"> |
|
|
Our spaced repetition system ensures you retain vocabulary like a memory implant from the future. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800 hover:border-blue-500 transition"> |
|
|
<div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-user-astronaut text-2xl text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Alien Conversations</h3> |
|
|
<p class="text-gray-300"> |
|
|
Practice with our extraterrestrial AI that simulates real conversations you might have across the galaxy. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="courses" class="relative z-10 py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16"> |
|
|
<span class="border-b-4 border-blue-500 pb-2">Mission Courses</span> |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="word-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> |
|
|
<div class="h-48 bg-gradient-to-br from-purple-900 to-blue-800 flex items-center justify-center"> |
|
|
<i class="fas fa-meteor text-6xl text-white opacity-30"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">Basic Communication</h3> |
|
|
<span class="bg-blue-900 text-blue-300 text-xs px-3 py-1 rounded-full">Beginner</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Learn essential phrases to navigate space stations and communicate with fellow astronauts. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
<button class="text-blue-400 hover:text-blue-300 font-medium">Start Mission</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="word-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> |
|
|
<div class="h-48 bg-gradient-to-br from-blue-900 to-indigo-800 flex items-center justify-center"> |
|
|
<i class="fas fa-space-shuttle text-6xl text-white opacity-30"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">Technical English</h3> |
|
|
<span class="bg-purple-900 text-purple-300 text-xs px-3 py-1 rounded-full">Intermediate</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Master the technical vocabulary needed for spacecraft operations and maintenance. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="far fa-star"></i> |
|
|
</div> |
|
|
<button class="text-blue-400 hover:text-blue-300 font-medium">Start Mission</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="word-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> |
|
|
<div class="h-48 bg-gradient-to-br from-indigo-900 to-purple-800 flex items-center justify-center"> |
|
|
<i class="fas fa-globe-europe text-6xl text-white opacity-30"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">First Contact Protocol</h3> |
|
|
<span class="bg-pink-900 text-pink-300 text-xs px-3 py-1 rounded-full">Advanced</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Prepare for diplomatic encounters with extraterrestrial civilizations and alien cultures. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
<button class="text-blue-400 hover:text-blue-300 font-medium">Start Mission</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="practice" class="relative z-10 py-20 bg-black bg-opacity-30"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/3 bg-gradient-to-b from-blue-900 to-blue-800 flex items-center justify-center p-8"> |
|
|
<div class="text-center"> |
|
|
<div class="text-5xl font-bold mb-2">Word</div> |
|
|
<div class="text-3xl font-light">of the</div> |
|
|
<div class="text-5xl font-bold mt-2">Day</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-2/3 p-8"> |
|
|
<div class="flex justify-between items-start mb-6"> |
|
|
<h3 class="text-2xl font-bold">Orbit</h3> |
|
|
<button id="speak-btn" class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center hover:bg-blue-800 transition"> |
|
|
<i class="fas fa-volume-up"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<div class="text-blue-400 font-medium mb-2">/ˈɔːrbɪt/</div> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
The curved path of a celestial object or spacecraft around a star, planet, or moon. |
|
|
</p> |
|
|
<div class="bg-gray-800 rounded-lg p-4"> |
|
|
<p class="italic text-gray-400"> |
|
|
"The International Space Station completes an orbit around Earth approximately every 90 minutes." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">Save to Flashcards</button> |
|
|
<button class="border border-blue-400 text-blue-400 hover:bg-blue-900 px-4 py-2 rounded-lg transition">Practice Sentence</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="relative z-10 py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16"> |
|
|
<span class="border-b-4 border-blue-500 pb-2">Astronaut Testimonials</span> |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user-astronaut text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Commander Sarah J.</h4> |
|
|
<p class="text-sm text-gray-400">ISS Expedition 58</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 italic"> |
|
|
"SpaceEnglish helped me prepare for international crew communications. The space-themed vocabulary was incredibly relevant to my work aboard the ISS." |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user-astronaut text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Dr. Alex R.</h4> |
|
|
<p class="text-sm text-gray-400">Mars Mission Candidate</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 italic"> |
|
|
"The technical English course was exactly what I needed to understand spacecraft documentation. The interactive simulations are out of this world!" |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user-astronaut text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Engineer Mark T.</h4> |
|
|
<p class="text-sm text-gray-400">SpaceX Mission Control</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 italic"> |
|
|
"As a non-native English speaker, SpaceEnglish's accelerated learning system helped me reach professional fluency faster than I thought possible." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="relative z-10 py-20 bg-gradient-to-r from-blue-900 to-purple-900"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready for Liftoff?</h2> |
|
|
<p class="text-xl text-blue-200 max-w-2xl mx-auto mb-8"> |
|
|
Join thousands of space enthusiasts and professionals mastering English for interplanetary communication. |
|
|
</p> |
|
|
<button class="bg-white text-blue-900 hover:bg-gray-200 px-8 py-4 rounded-full font-bold text-lg transition transform hover:scale-105"> |
|
|
Start Your Free 7-Day Mission |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="relative z-10 bg-black bg-opacity-50 py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<div class="planet w-8 h-8 rounded-full"></div> |
|
|
<span class="text-xl font-bold">SpaceEnglish</span> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
Teaching English for the final frontier since 2023. |
|
|
</p> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Courses</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Beginner</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Intermediate</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Advanced</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Specialized</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Resources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Vocabulary</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Grammar</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Pronunciation</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 SpaceEnglish. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createStars() { |
|
|
const container = document.getElementById('stars-container'); |
|
|
const starsCount = 200; |
|
|
|
|
|
for (let i = 0; i < starsCount; i++) { |
|
|
const star = document.createElement('div'); |
|
|
star.className = 'meteor'; |
|
|
|
|
|
|
|
|
const x = Math.random() * 100; |
|
|
const y = Math.random() * 100; |
|
|
|
|
|
|
|
|
const size = Math.random() * 3; |
|
|
|
|
|
|
|
|
const opacity = Math.random(); |
|
|
|
|
|
|
|
|
const duration = 5 + Math.random() * 10; |
|
|
const delay = Math.random() * 5; |
|
|
|
|
|
star.style.left = `${x}%`; |
|
|
star.style.top = `${y}%`; |
|
|
star.style.width = `${size}px`; |
|
|
star.style.height = `${size}px`; |
|
|
star.style.opacity = opacity; |
|
|
star.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; |
|
|
|
|
|
container.appendChild(star); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function speakWord() { |
|
|
const speech = new SpeechSynthesisUtterance(); |
|
|
speech.text = "Orbit. The curved path of a celestial object or spacecraft around a star, planet, or moon."; |
|
|
speech.rate = 0.9; |
|
|
window.speechSynthesis.speak(speech); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
createStars(); |
|
|
|
|
|
|
|
|
document.getElementById('speak-btn').addEventListener('click', speakWord); |
|
|
|
|
|
|
|
|
const menuBtn = document.querySelector('header button'); |
|
|
menuBtn.addEventListener('click', function() { |
|
|
|
|
|
console.log('Mobile menu clicked'); |
|
|
}); |
|
|
|
|
|
|
|
|
const typewriter = document.querySelector('.typewriter'); |
|
|
setTimeout(() => { |
|
|
typewriter.style.animation = 'none'; |
|
|
setTimeout(() => { |
|
|
typewriter.style.animation = 'typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite'; |
|
|
}, 10); |
|
|
}, 3500); |
|
|
}); |
|
|
</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=matvee/space-eng" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
