Hugging Face's logo

Spaces:
matvee
/
space-eng
Running

App Files Community
matvee commited on
Commit
58b34f5
·
verified ·
1 Parent(s): 4479add

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +474 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Space Eng
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: space-eng
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,474 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Space English - Learn English in Cosmic Style</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-20px); }
13
+ }
14
+ .floating {
15
+ animation: float 6s ease-in-out infinite;
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0c4a6e 100%);
19
+ }
20
+ .planet {
21
+ background: radial-gradient(circle at 30% 30%, #4f46e5, #1e40af);
22
+ box-shadow: 0 0 60px rgba(79, 70, 229, 0.5);
23
+ }
24
+ .astronaut-helmet {
25
+ background: radial-gradient(circle at 40% 40%, #e0e7ff, #c7d2fe);
26
+ }
27
+ .meteor {
28
+ position: absolute;
29
+ width: 4px;
30
+ height: 4px;
31
+ background: white;
32
+ border-radius: 50%;
33
+ box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
34
+ }
35
+ .word-card {
36
+ transition: all 0.3s ease;
37
+ transform-style: preserve-3d;
38
+ }
39
+ .word-card:hover {
40
+ transform: translateY(-10px) rotateX(10deg);
41
+ box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.5);
42
+ }
43
+ .typewriter {
44
+ overflow: hidden;
45
+ border-right: 3px solid #818cf8;
46
+ white-space: nowrap;
47
+ letter-spacing: 2px;
48
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
49
+ }
50
+ @keyframes typing {
51
+ from { width: 0 }
52
+ to { width: 100% }
53
+ }
54
+ @keyframes blink-caret {
55
+ from, to { border-color: transparent }
56
+ 50% { border-color: #818cf8 }
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="gradient-bg min-h-screen text-white font-sans overflow-x-hidden">
61
+ <!-- Stars background -->
62
+ <div id="stars-container" class="fixed inset-0 overflow-hidden z-0"></div>
63
+
64
+ <!-- Header -->
65
+ <header class="relative z-10">
66
+ <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
67
+ <div class="flex items-center space-x-2">
68
+ <div class="planet w-12 h-12 rounded-full relative overflow-hidden">
69
+ <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>
70
+ </div>
71
+ <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">SpaceEnglish</span>
72
+ </div>
73
+ <div class="hidden md:flex space-x-8">
74
+ <a href="#courses" class="hover:text-blue-300 transition">Courses</a>
75
+ <a href="#features" class="hover:text-blue-300 transition">Features</a>
76
+ <a href="#practice" class="hover:text-blue-300 transition">Practice</a>
77
+ <a href="#testimonials" class="hover:text-blue-300 transition">Testimonials</a>
78
+ </div>
79
+ <button class="md:hidden text-2xl">
80
+ <i class="fas fa-bars"></i>
81
+ </button>
82
+ </nav>
83
+ </header>
84
+
85
+ <!-- Hero Section -->
86
+ <section class="relative z-10 container mx-auto px-6 py-20 md:py-32 flex flex-col md:flex-row items-center">
87
+ <div class="md:w-1/2 mb-12 md:mb-0">
88
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
89
+ <span class="typewriter">Launch Your English</span><br>
90
+ <span class="text-blue-400">To The Stars</span>
91
+ </h1>
92
+ <p class="text-lg md:text-xl text-gray-300 mb-8">
93
+ Explore the universe of English language with our interactive space-themed courses.
94
+ Designed for cosmic explorers who want to communicate across galaxies.
95
+ </p>
96
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
97
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition transform hover:scale-105">
98
+ Start Free Trial
99
+ </button>
100
+ <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">
101
+ Take a Tour
102
+ </button>
103
+ </div>
104
+ </div>
105
+ <div class="md:w-1/2 flex justify-center relative">
106
+ <div class="planet w-64 h-64 rounded-full relative floating">
107
+ <div class="absolute top-1/4 left-1/4 w-8 h-8 rounded-full bg-blue-800"></div>
108
+ <div class="absolute bottom-1/4 right-1/4 w-12 h-12 rounded-full bg-blue-900"></div>
109
+ <div class="absolute top-1/3 right-1/5 w-6 h-6 rounded-full bg-indigo-900"></div>
110
+ </div>
111
+ <div class="astronaut-helmet w-40 h-40 rounded-full absolute -bottom-10 -right-10 md:-right-20 flex items-center justify-center">
112
+ <div class="w-32 h-32 rounded-full relative overflow-hidden">
113
+ <div class="absolute inset-0 bg-black opacity-30"></div>
114
+ <div class="absolute top-1/3 left-1/4 w-16 h-1 bg-white rounded-full"></div>
115
+ <div class="absolute top-2/3 left-1/4 w-16 h-1 bg-white rounded-full"></div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- Features Section -->
122
+ <section id="features" class="relative z-10 py-20 bg-black bg-opacity-20">
123
+ <div class="container mx-auto px-6">
124
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
125
+ <span class="border-b-4 border-blue-500 pb-2">Cosmic Learning Features</span>
126
+ </h2>
127
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
128
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800 hover:border-blue-500 transition">
129
+ <div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mb-6">
130
+ <i class="fas fa-satellite-dish text-2xl text-blue-400"></i>
131
+ </div>
132
+ <h3 class="text-xl font-bold mb-3">Interactive Lessons</h3>
133
+ <p class="text-gray-300">
134
+ Engage with holographic tutors and AI-powered language exercises that adapt to your cosmic learning speed.
135
+ </p>
136
+ </div>
137
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800 hover:border-blue-500 transition">
138
+ <div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mb-6">
139
+ <i class="fas fa-rocket text-2xl text-blue-400"></i>
140
+ </div>
141
+ <h3 class="text-xl font-bold mb-3">Accelerated Learning</h3>
142
+ <p class="text-gray-300">
143
+ Our spaced repetition system ensures you retain vocabulary like a memory implant from the future.
144
+ </p>
145
+ </div>
146
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800 hover:border-blue-500 transition">
147
+ <div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mb-6">
148
+ <i class="fas fa-user-astronaut text-2xl text-blue-400"></i>
149
+ </div>
150
+ <h3 class="text-xl font-bold mb-3">Alien Conversations</h3>
151
+ <p class="text-gray-300">
152
+ Practice with our extraterrestrial AI that simulates real conversations you might have across the galaxy.
153
+ </p>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </section>
158
+
159
+ <!-- Courses Section -->
160
+ <section id="courses" class="relative z-10 py-20">
161
+ <div class="container mx-auto px-6">
162
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
163
+ <span class="border-b-4 border-blue-500 pb-2">Mission Courses</span>
164
+ </h2>
165
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
166
+ <!-- Course 1 -->
167
+ <div class="word-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
168
+ <div class="h-48 bg-gradient-to-br from-purple-900 to-blue-800 flex items-center justify-center">
169
+ <i class="fas fa-meteor text-6xl text-white opacity-30"></i>
170
+ </div>
171
+ <div class="p-6">
172
+ <div class="flex justify-between items-start mb-4">
173
+ <h3 class="text-xl font-bold">Basic Communication</h3>
174
+ <span class="bg-blue-900 text-blue-300 text-xs px-3 py-1 rounded-full">Beginner</span>
175
+ </div>
176
+ <p class="text-gray-400 mb-4">
177
+ Learn essential phrases to navigate space stations and communicate with fellow astronauts.
178
+ </p>
179
+ <div class="flex justify-between items-center">
180
+ <div class="flex space-x-2 text-yellow-400">
181
+ <i class="fas fa-star"></i>
182
+ <i class="fas fa-star"></i>
183
+ <i class="fas fa-star"></i>
184
+ <i class="fas fa-star"></i>
185
+ <i class="fas fa-star-half-alt"></i>
186
+ </div>
187
+ <button class="text-blue-400 hover:text-blue-300 font-medium">Start Mission</button>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Course 2 -->
193
+ <div class="word-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
194
+ <div class="h-48 bg-gradient-to-br from-blue-900 to-indigo-800 flex items-center justify-center">
195
+ <i class="fas fa-space-shuttle text-6xl text-white opacity-30"></i>
196
+ </div>
197
+ <div class="p-6">
198
+ <div class="flex justify-between items-start mb-4">
199
+ <h3 class="text-xl font-bold">Technical English</h3>
200
+ <span class="bg-purple-900 text-purple-300 text-xs px-3 py-1 rounded-full">Intermediate</span>
201
+ </div>
202
+ <p class="text-gray-400 mb-4">
203
+ Master the technical vocabulary needed for spacecraft operations and maintenance.
204
+ </p>
205
+ <div class="flex justify-between items-center">
206
+ <div class="flex space-x-2 text-yellow-400">
207
+ <i class="fas fa-star"></i>
208
+ <i class="fas fa-star"></i>
209
+ <i class="fas fa-star"></i>
210
+ <i class="fas fa-star"></i>
211
+ <i class="far fa-star"></i>
212
+ </div>
213
+ <button class="text-blue-400 hover:text-blue-300 font-medium">Start Mission</button>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Course 3 -->
219
+ <div class="word-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
220
+ <div class="h-48 bg-gradient-to-br from-indigo-900 to-purple-800 flex items-center justify-center">
221
+ <i class="fas fa-globe-europe text-6xl text-white opacity-30"></i>
222
+ </div>
223
+ <div class="p-6">
224
+ <div class="flex justify-between items-start mb-4">
225
+ <h3 class="text-xl font-bold">First Contact Protocol</h3>
226
+ <span class="bg-pink-900 text-pink-300 text-xs px-3 py-1 rounded-full">Advanced</span>
227
+ </div>
228
+ <p class="text-gray-400 mb-4">
229
+ Prepare for diplomatic encounters with extraterrestrial civilizations and alien cultures.
230
+ </p>
231
+ <div class="flex justify-between items-center">
232
+ <div class="flex space-x-2 text-yellow-400">
233
+ <i class="fas fa-star"></i>
234
+ <i class="fas fa-star"></i>
235
+ <i class="fas fa-star"></i>
236
+ <i class="fas fa-star"></i>
237
+ <i class="fas fa-star"></i>
238
+ </div>
239
+ <button class="text-blue-400 hover:text-blue-300 font-medium">Start Mission</button>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </section>
246
+
247
+ <!-- Word of the Day -->
248
+ <section id="practice" class="relative z-10 py-20 bg-black bg-opacity-30">
249
+ <div class="container mx-auto px-6">
250
+ <div class="max-w-4xl mx-auto bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
251
+ <div class="md:flex">
252
+ <div class="md:w-1/3 bg-gradient-to-b from-blue-900 to-blue-800 flex items-center justify-center p-8">
253
+ <div class="text-center">
254
+ <div class="text-5xl font-bold mb-2">Word</div>
255
+ <div class="text-3xl font-light">of the</div>
256
+ <div class="text-5xl font-bold mt-2">Day</div>
257
+ </div>
258
+ </div>
259
+ <div class="md:w-2/3 p-8">
260
+ <div class="flex justify-between items-start mb-6">
261
+ <h3 class="text-2xl font-bold">Orbit</h3>
262
+ <button id="speak-btn" class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center hover:bg-blue-800 transition">
263
+ <i class="fas fa-volume-up"></i>
264
+ </button>
265
+ </div>
266
+ <div class="mb-6">
267
+ <div class="text-blue-400 font-medium mb-2">/ˈɔːrbɪt/</div>
268
+ <p class="text-gray-300 mb-4">
269
+ The curved path of a celestial object or spacecraft around a star, planet, or moon.
270
+ </p>
271
+ <div class="bg-gray-800 rounded-lg p-4">
272
+ <p class="italic text-gray-400">
273
+ "The International Space Station completes an orbit around Earth approximately every 90 minutes."
274
+ </p>
275
+ </div>
276
+ </div>
277
+ <div class="flex space-x-4">
278
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">Save to Flashcards</button>
279
+ <button class="border border-blue-400 text-blue-400 hover:bg-blue-900 px-4 py-2 rounded-lg transition">Practice Sentence</button>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <!-- Testimonials -->
288
+ <section id="testimonials" class="relative z-10 py-20">
289
+ <div class="container mx-auto px-6">
290
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
291
+ <span class="border-b-4 border-blue-500 pb-2">Astronaut Testimonials</span>
292
+ </h2>
293
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
294
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800">
295
+ <div class="flex items-center mb-6">
296
+ <div class="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mr-4">
297
+ <i class="fas fa-user-astronaut text-2xl"></i>
298
+ </div>
299
+ <div>
300
+ <h4 class="font-bold">Commander Sarah J.</h4>
301
+ <p class="text-sm text-gray-400">ISS Expedition 58</p>
302
+ </div>
303
+ </div>
304
+ <p class="text-gray-300 italic">
305
+ "SpaceEnglish helped me prepare for international crew communications. The space-themed vocabulary was incredibly relevant to my work aboard the ISS."
306
+ </p>
307
+ </div>
308
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800">
309
+ <div class="flex items-center mb-6">
310
+ <div class="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mr-4">
311
+ <i class="fas fa-user-astronaut text-2xl"></i>
312
+ </div>
313
+ <div>
314
+ <h4 class="font-bold">Dr. Alex R.</h4>
315
+ <p class="text-sm text-gray-400">Mars Mission Candidate</p>
316
+ </div>
317
+ </div>
318
+ <p class="text-gray-300 italic">
319
+ "The technical English course was exactly what I needed to understand spacecraft documentation. The interactive simulations are out of this world!"
320
+ </p>
321
+ </div>
322
+ <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800">
323
+ <div class="flex items-center mb-6">
324
+ <div class="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mr-4">
325
+ <i class="fas fa-user-astronaut text-2xl"></i>
326
+ </div>
327
+ <div>
328
+ <h4 class="font-bold">Engineer Mark T.</h4>
329
+ <p class="text-sm text-gray-400">SpaceX Mission Control</p>
330
+ </div>
331
+ </div>
332
+ <p class="text-gray-300 italic">
333
+ "As a non-native English speaker, SpaceEnglish's accelerated learning system helped me reach professional fluency faster than I thought possible."
334
+ </p>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </section>
339
+
340
+ <!-- CTA Section -->
341
+ <section class="relative z-10 py-20 bg-gradient-to-r from-blue-900 to-purple-900">
342
+ <div class="container mx-auto px-6 text-center">
343
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready for Liftoff?</h2>
344
+ <p class="text-xl text-blue-200 max-w-2xl mx-auto mb-8">
345
+ Join thousands of space enthusiasts and professionals mastering English for interplanetary communication.
346
+ </p>
347
+ <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">
348
+ Start Your Free 7-Day Mission
349
+ </button>
350
+ </div>
351
+ </section>
352
+
353
+ <!-- Footer -->
354
+ <footer class="relative z-10 bg-black bg-opacity-50 py-12">
355
+ <div class="container mx-auto px-6">
356
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
357
+ <div>
358
+ <div class="flex items-center space-x-2 mb-4">
359
+ <div class="planet w-8 h-8 rounded-full"></div>
360
+ <span class="text-xl font-bold">SpaceEnglish</span>
361
+ </div>
362
+ <p class="text-gray-400">
363
+ Teaching English for the final frontier since 2023.
364
+ </p>
365
+ <div class="flex space-x-4 mt-4">
366
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
367
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
368
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
369
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
370
+ </div>
371
+ </div>
372
+ <div>
373
+ <h4 class="text-lg font-bold mb-4">Courses</h4>
374
+ <ul class="space-y-2">
375
+ <li><a href="#" class="text-gray-400 hover:text-white">Beginner</a></li>
376
+ <li><a href="#" class="text-gray-400 hover:text-white">Intermediate</a></li>
377
+ <li><a href="#" class="text-gray-400 hover:text-white">Advanced</a></li>
378
+ <li><a href="#" class="text-gray-400 hover:text-white">Specialized</a></li>
379
+ </ul>
380
+ </div>
381
+ <div>
382
+ <h4 class="text-lg font-bold mb-4">Resources</h4>
383
+ <ul class="space-y-2">
384
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
385
+ <li><a href="#" class="text-gray-400 hover:text-white">Vocabulary</a></li>
386
+ <li><a href="#" class="text-gray-400 hover:text-white">Grammar</a></li>
387
+ <li><a href="#" class="text-gray-400 hover:text-white">Pronunciation</a></li>
388
+ </ul>
389
+ </div>
390
+ <div>
391
+ <h4 class="text-lg font-bold mb-4">Company</h4>
392
+ <ul class="space-y-2">
393
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
394
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
395
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
396
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
397
+ </ul>
398
+ </div>
399
+ </div>
400
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
401
+ <p>&copy; 2023 SpaceEnglish. All rights reserved.</p>
402
+ </div>
403
+ </div>
404
+ </footer>
405
+
406
+ <script>
407
+ // Create stars background
408
+ function createStars() {
409
+ const container = document.getElementById('stars-container');
410
+ const starsCount = 200;
411
+
412
+ for (let i = 0; i < starsCount; i++) {
413
+ const star = document.createElement('div');
414
+ star.className = 'meteor';
415
+
416
+ // Random position
417
+ const x = Math.random() * 100;
418
+ const y = Math.random() * 100;
419
+
420
+ // Random size
421
+ const size = Math.random() * 3;
422
+
423
+ // Random opacity
424
+ const opacity = Math.random();
425
+
426
+ // Random animation
427
+ const duration = 5 + Math.random() * 10;
428
+ const delay = Math.random() * 5;
429
+
430
+ star.style.left = `${x}%`;
431
+ star.style.top = `${y}%`;
432
+ star.style.width = `${size}px`;
433
+ star.style.height = `${size}px`;
434
+ star.style.opacity = opacity;
435
+ star.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
436
+
437
+ container.appendChild(star);
438
+ }
439
+ }
440
+
441
+ // Text to speech for word of the day
442
+ function speakWord() {
443
+ const speech = new SpeechSynthesisUtterance();
444
+ speech.text = "Orbit. The curved path of a celestial object or spacecraft around a star, planet, or moon.";
445
+ speech.rate = 0.9;
446
+ window.speechSynthesis.speak(speech);
447
+ }
448
+
449
+ // Initialize
450
+ document.addEventListener('DOMContentLoaded', function() {
451
+ createStars();
452
+
453
+ // Word of the day speak button
454
+ document.getElementById('speak-btn').addEventListener('click', speakWord);
455
+
456
+ // Mobile menu toggle (would need more implementation)
457
+ const menuBtn = document.querySelector('header button');
458
+ menuBtn.addEventListener('click', function() {
459
+ // This would toggle a mobile menu in a real implementation
460
+ console.log('Mobile menu clicked');
461
+ });
462
+
463
+ // Typewriter effect
464
+ const typewriter = document.querySelector('.typewriter');
465
+ setTimeout(() => {
466
+ typewriter.style.animation = 'none';
467
+ setTimeout(() => {
468
+ typewriter.style.animation = 'typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite';
469
+ }, 10);
470
+ }, 3500);
471
+ });
472
+ </script>
473
+ <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>
474
+ </html>