Hugging Face's logo

Spaces:
ZT00
/
blackholy
Running

App Files Community
ZT00 commited on
Commit
4ac8075
·
verified ·
1 Parent(s): f1b0f03

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +812 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Blackholy
3
- emoji: 📈
4
- colorFrom: red
5
  colorTo: gray
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: blackholy
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: gray
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,812 @@
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>Cosmic Phenomena Explorer</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
+ .galaxy-bg {
11
+ background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
12
+ }
13
+ .cosmic-text {
14
+ background: linear-gradient(90deg, #ff8a00, #e52e71, #9b59b6);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ animation: cosmicGlow 8s ease infinite;
19
+ background-size: 300% 300%;
20
+ }
21
+ @keyframes cosmicGlow {
22
+ 0% { background-position: 0% 50%; }
23
+ 50% { background-position: 100% 50%; }
24
+ 100% { background-position: 0% 50%; }
25
+ }
26
+ .blackhole {
27
+ width: 200px;
28
+ height: 200px;
29
+ background: radial-gradient(circle at center, #000 0%, #000 40%, #4b0082 70%, #0000ff 85%, #00ffff 100%);
30
+ border-radius: 50%;
31
+ position: relative;
32
+ box-shadow: 0 0 60px rgba(0, 255, 255, 0.5);
33
+ animation: spin 20s linear infinite;
34
+ }
35
+ .blackhole::before {
36
+ content: '';
37
+ position: absolute;
38
+ top: 50%;
39
+ left: 50%;
40
+ transform: translate(-50%, -50%);
41
+ width: 50%;
42
+ height: 50%;
43
+ background: #000;
44
+ border-radius: 50%;
45
+ }
46
+ @keyframes spin {
47
+ 100% { transform: rotate(360deg); }
48
+ }
49
+ .event-horizon {
50
+ position: absolute;
51
+ top: 50%;
52
+ left: 50%;
53
+ transform: translate(-50%, -50%);
54
+ width: 220px;
55
+ height: 220px;
56
+ border: 2px dashed rgba(0, 255, 255, 0.5);
57
+ border-radius: 50%;
58
+ animation: pulse 4s ease-in-out infinite;
59
+ }
60
+ @keyframes pulse {
61
+ 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
62
+ 50% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.05); }
63
+ }
64
+ .supernova {
65
+ width: 150px;
66
+ height: 150px;
67
+ background: radial-gradient(circle at center, #ff8a00 0%, #e52e71 50%, #9b59b6 100%);
68
+ border-radius: 50%;
69
+ position: relative;
70
+ box-shadow: 0 0 40px rgba(255, 138, 0, 0.7);
71
+ animation: explode 5s ease-in-out infinite;
72
+ }
73
+ @keyframes explode {
74
+ 0%, 100% { transform: scale(1); opacity: 1; }
75
+ 50% { transform: scale(1.2); opacity: 0.8; }
76
+ }
77
+ .light-beam {
78
+ position: absolute;
79
+ bottom: 0;
80
+ left: 50%;
81
+ transform: translateX(-50%);
82
+ width: 4px;
83
+ height: 0;
84
+ background: linear-gradient(to top, rgba(255,255,255,0.8), transparent);
85
+ box-shadow: 0 0 10px 2px rgba(255,255,255,0.8);
86
+ animation: lightSpeed 2s linear infinite;
87
+ }
88
+ @keyframes lightSpeed {
89
+ 0% { height: 0; opacity: 1; }
90
+ 100% { height: 300px; opacity: 0; }
91
+ }
92
+ .interactive-card {
93
+ transition: all 0.3s ease;
94
+ transform-style: preserve-3d;
95
+ }
96
+ .interactive-card:hover {
97
+ transform: translateY(-10px) scale(1.02);
98
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
99
+ }
100
+ .accordion-content {
101
+ max-height: 0;
102
+ overflow: hidden;
103
+ transition: max-height 0.3s ease-out;
104
+ }
105
+ .simulation-container {
106
+ perspective: 1000px;
107
+ }
108
+ .simulation-box {
109
+ transition: transform 0.5s;
110
+ transform-style: preserve-3d;
111
+ }
112
+ </style>
113
+ </head>
114
+ <body class="galaxy-bg min-h-screen text-white font-sans">
115
+ <!-- Header -->
116
+ <header class="py-8 px-4 text-center">
117
+ <h1 class="cosmic-text text-4xl md:text-6xl font-bold mb-4">Cosmic Phenomena Explorer</h1>
118
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">An interactive journey through black holes, supernovae, and the speed of light</p>
119
+ </header>
120
+
121
+ <!-- Navigation -->
122
+ <nav class="flex justify-center mb-12">
123
+ <div class="flex space-x-1 bg-gray-900 bg-opacity-50 rounded-full p-1">
124
+ <button onclick="showSection('blackhole')" class="px-4 py-2 rounded-full hover:bg-purple-900 transition">Black Holes</button>
125
+ <button onclick="showSection('supernova')" class="px-4 py-2 rounded-full hover:bg-orange-900 transition">Supernovae</button>
126
+ <button onclick="showSection('light')" class="px-4 py-2 rounded-full hover:bg-blue-900 transition">Speed of Light</button>
127
+ <button onclick="showSection('quiz')" class="px-4 py-2 rounded-full hover:bg-green-900 transition">Quiz</button>
128
+ </div>
129
+ </nav>
130
+
131
+ <!-- Main Content -->
132
+ <main class="container mx-auto px-4 pb-16">
133
+ <!-- Black Hole Section -->
134
+ <section id="blackhole-section" class="mb-20">
135
+ <div class="text-center mb-12">
136
+ <h2 class="text-3xl font-bold mb-4">Black Holes: Cosmic Vacuum Cleaners</h2>
137
+ <p class="text-gray-300 max-w-3xl mx-auto">Explore the mysterious regions of spacetime where gravity is so strong that nothing, not even light, can escape.</p>
138
+ </div>
139
+
140
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
141
+ <div class="flex justify-center">
142
+ <div class="relative">
143
+ <div class="blackhole"></div>
144
+ <div class="event-horizon"></div>
145
+ <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
146
+ <div class="w-16 h-16 bg-yellow-400 rounded-full animate-pulse"></div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ <div>
151
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
152
+ <h3 class="text-2xl font-semibold mb-4">What is a Black Hole?</h3>
153
+ <p class="text-gray-300 mb-4">A black hole is a region of spacetime exhibiting gravitational acceleration so strong that nothing—no particles or even electromagnetic radiation such as light—can escape from it.</p>
154
+ <div class="mb-4">
155
+ <button onclick="toggleAccordion('bh-formation')" class="flex items-center justify-between w-full py-2 text-left">
156
+ <span class="font-medium">How do black holes form?</span>
157
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
158
+ </button>
159
+ <div id="bh-formation" class="accordion-content">
160
+ <p class="mt-2 text-gray-300">Most black holes form from the remnants of a large star that dies in a supernova explosion. If the total mass of the star is large enough (about three times the mass of the Sun), it can be proven theoretically that no force can keep the star from collapsing under the influence of gravity.</p>
161
+ </div>
162
+ </div>
163
+ <div class="mb-4">
164
+ <button onclick="toggleAccordion('bh-types')" class="flex items-center justify-between w-full py-2 text-left">
165
+ <span class="font-medium">Types of black holes</span>
166
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
167
+ </button>
168
+ <div id="bh-types" class="accordion-content">
169
+ <ul class="mt-2 text-gray-300 list-disc pl-5">
170
+ <li class="mb-1"><strong>Stellar black holes:</strong> Formed by collapsing massive stars (3 to 10 solar masses)</li>
171
+ <li class="mb-1"><strong>Supermassive black holes:</strong> Millions to billions of solar masses, found at galaxy centers</li>
172
+ <li class="mb-1"><strong>Intermediate black holes:</strong> Hundreds to thousands of solar masses</li>
173
+ <li><strong>Primordial black holes:</strong> Hypothetical, formed in the early universe</li>
174
+ </ul>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
182
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
183
+ <div class="text-purple-400 text-3xl mb-4">
184
+ <i class="fas fa-compress-arrows-alt"></i>
185
+ </div>
186
+ <h3 class="text-xl font-semibold mb-2">Event Horizon</h3>
187
+ <p class="text-gray-300">The boundary around a black hole from which nothing can escape, not even light. It's the "point of no return."</p>
188
+ </div>
189
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
190
+ <div class="text-blue-400 text-3xl mb-4">
191
+ <i class="fas fa-spinner"></i>
192
+ </div>
193
+ <h3 class="text-xl font-semibold mb-2">Singularity</h3>
194
+ <p class="text-gray-300">At the center of a black hole lies the singularity, where matter is crushed to infinite density and spacetime curvature becomes infinite.</p>
195
+ </div>
196
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
197
+ <div class="text-yellow-400 text-3xl mb-4">
198
+ <i class="fas fa-ring"></i>
199
+ </div>
200
+ <h3 class="text-xl font-semibold mb-2">Accretion Disk</h3>
201
+ <p class="text-gray-300">A disk of superheated gas and dust spiraling into a black hole, often emitting powerful X-rays visible to telescopes.</p>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="mt-12 bg-gray-900 bg-opacity-50 rounded-xl p-6">
206
+ <h3 class="text-2xl font-semibold mb-4">Black Hole Simulation</h3>
207
+ <div class="simulation-container">
208
+ <div class="simulation-box" id="bh-simulation">
209
+ <div class="flex flex-col md:flex-row items-center justify-between">
210
+ <div class="mb-6 md:mb-0">
211
+ <label class="block mb-2">Black Hole Mass (Solar Masses)</label>
212
+ <input type="range" min="3" max="100" value="10" class="w-full md:w-64" id="bh-mass" oninput="updateBlackHole()">
213
+ <div class="flex justify-between text-xs text-gray-400">
214
+ <span>3</span>
215
+ <span>100</span>
216
+ </div>
217
+ </div>
218
+ <div class="mb-6 md:mb-0">
219
+ <label class="block mb-2">Spin Rate</label>
220
+ <input type="range" min="0" max="100" value="50" class="w-full md:w-64" id="bh-spin" oninput="updateBlackHole()">
221
+ <div class="flex justify-between text-xs text-gray-400">
222
+ <span>Slow</span>
223
+ <span>Fast</span>
224
+ </div>
225
+ </div>
226
+ <div>
227
+ <label class="block mb-2">Accretion Disk Brightness</label>
228
+ <input type="range" min="0" max="100" value="70" class="w-full md:w-64" id="bh-brightness" oninput="updateBlackHole()">
229
+ <div class="flex justify-between text-xs text-gray-400">
230
+ <span>Dim</span>
231
+ <span>Bright</span>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ <div class="mt-8 flex justify-center">
236
+ <div class="relative">
237
+ <div id="dynamic-blackhole" class="blackhole" style="animation-duration: 15s;"></div>
238
+ <div class="event-horizon"></div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </section>
245
+
246
+ <!-- Supernova Section -->
247
+ <section id="supernova-section" class="mb-20 hidden">
248
+ <div class="text-center mb-12">
249
+ <h2 class="text-3xl font-bold mb-4">Supernovae: Stellar Fireworks</h2>
250
+ <p class="text-gray-300 max-w-3xl mx-auto">Witness the spectacular explosion that marks the death of a star, outshining entire galaxies for weeks.</p>
251
+ </div>
252
+
253
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
254
+ <div class="flex justify-center">
255
+ <div class="supernova"></div>
256
+ </div>
257
+ <div>
258
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
259
+ <h3 class="text-2xl font-semibold mb-4">What is a Supernova?</h3>
260
+ <p class="text-gray-300 mb-4">A supernova is a powerful and luminous stellar explosion that occurs during the last evolutionary stages of a massive star or when a white dwarf is triggered into runaway nuclear fusion.</p>
261
+ <div class="mb-4">
262
+ <button onclick="toggleAccordion('sn-types')" class="flex items-center justify-between w-full py-2 text-left">
263
+ <span class="font-medium">Types of Supernovae</span>
264
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
265
+ </button>
266
+ <div id="sn-types" class="accordion-content">
267
+ <ul class="mt-2 text-gray-300 list-disc pl-5">
268
+ <li class="mb-1"><strong>Type Ia:</strong> White dwarf in binary system accretes matter until it reaches critical mass (1.4 solar masses) and explodes</li>
269
+ <li class="mb-1"><strong>Type II:</strong> Massive star (8+ solar masses) collapses when it can no longer sustain nuclear fusion</li>
270
+ <li><strong>Type Ib/Ic:</strong> Similar to Type II but the star has lost its outer hydrogen (Ib) or helium (Ic) envelope</li>
271
+ </ul>
272
+ </div>
273
+ </div>
274
+ <div class="mb-4">
275
+ <button onclick="toggleAccordion('sn-importance')" class="flex items-center justify-between w-full py-2 text-left">
276
+ <span class="font-medium">Why are supernovae important?</span>
277
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
278
+ </button>
279
+ <div id="sn-importance" class="accordion-content">
280
+ <p class="mt-2 text-gray-300">Supernovae play a crucial role in distributing elements heavier than hydrogen and helium throughout the universe. They're also used as "standard candles" to measure cosmic distances. The iron in your blood, calcium in your bones, and gold in jewelry were all forged in supernova explosions.</p>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
288
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
289
+ <div class="text-orange-400 text-3xl mb-4">
290
+ <i class="fas fa-fire"></i>
291
+ </div>
292
+ <h3 class="text-xl font-semibold mb-2">Energy Release</h3>
293
+ <p class="text-gray-300">A single supernova can briefly outshine an entire galaxy, releasing as much energy as the Sun will in its entire 10-billion-year lifetime.</p>
294
+ </div>
295
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
296
+ <div class="text-yellow-400 text-3xl mb-4">
297
+ <i class="fas fa-atom"></i>
298
+ </div>
299
+ <h3 class="text-xl font-semibold mb-2">Element Creation</h3>
300
+ <p class="text-gray-300">Supernovae create and disperse heavy elements like iron, gold, and uranium into space, seeding future generations of stars and planets.</p>
301
+ </div>
302
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
303
+ <div class="text-red-400 text-3xl mb-4">
304
+ <i class="fas fa-star"></i>
305
+ </div>
306
+ <h3 class="text-xl font-semibold mb-2">Neutron Stars</h3>
307
+ <p class="text-gray-300">The core left behind after a Type II supernova may collapse into an incredibly dense neutron star, a teaspoon of which would weigh a billion tons.</p>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="mt-12 bg-gray-900 bg-opacity-50 rounded-xl p-6">
312
+ <h3 class="text-2xl font-semibold mb-4">Supernova Timeline</h3>
313
+ <div class="relative h-64 overflow-hidden">
314
+ <div class="absolute top-0 left-0 h-full w-1 bg-gradient-to-b from-blue-500 to-purple-600"></div>
315
+ <div class="absolute top-0 left-6 w-full">
316
+ <div class="relative h-full">
317
+ <!-- Timeline items -->
318
+ <div class="absolute" style="top: 5%;">
319
+ <div class="flex items-center">
320
+ <div class="w-4 h-4 rounded-full bg-blue-400 -ml-5"></div>
321
+ <div class="ml-4">
322
+ <h4 class="font-semibold">Core Collapse</h4>
323
+ <p class="text-sm text-gray-400">Iron core collapses in milliseconds</p>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ <div class="absolute" style="top: 25%;">
328
+ <div class="flex items-center">
329
+ <div class="w-4 h-4 rounded-full bg-purple-400 -ml-5"></div>
330
+ <div class="ml-4">
331
+ <h4 class="font-semibold">Shock Wave</h4>
332
+ <p class="text-sm text-gray-400">Rebound creates outward shock wave (1-2 hours)</p>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ <div class="absolute" style="top: 45%;">
337
+ <div class="flex items-center">
338
+ <div class="w-4 h-4 rounded-full bg-pink-400 -ml-5"></div>
339
+ <div class="ml-4">
340
+ <h4 class="font-semibold">Breakout</h4>
341
+ <p class="text-sm text-gray-400">Shock reaches surface (hours to days)</p>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ <div class="absolute" style="top: 65%;">
346
+ <div class="flex items-center">
347
+ <div class="w-4 h-4 rounded-full bg-orange-400 -ml-5"></div>
348
+ <div class="ml-4">
349
+ <h4 class="font-semibold">Peak Brightness</h4>
350
+ <p class="text-sm text-gray-400">Maximum luminosity (days to weeks)</p>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ <div class="absolute" style="top: 85%;">
355
+ <div class="flex items-center">
356
+ <div class="w-4 h-4 rounded-full bg-red-400 -ml-5"></div>
357
+ <div class="ml-4">
358
+ <h4 class="font-semibold">Remnant</h4>
359
+ <p class="text-sm text-gray-400">Expanding nebula (years to millennia)</p>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <!-- Speed of Light Section -->
370
+ <section id="light-section" class="mb-20 hidden">
371
+ <div class="text-center mb-12">
372
+ <h2 class="text-3xl font-bold mb-4">Speed of Light: Cosmic Speed Limit</h2>
373
+ <p class="text-gray-300 max-w-3xl mx-auto">Discover why nothing in the universe can travel faster than light, and how this fundamental constant shapes our reality.</p>
374
+ </div>
375
+
376
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
377
+ <div class="flex justify-center relative h-64">
378
+ <div class="light-beam"></div>
379
+ <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-yellow-400 rounded-full"></div>
380
+ </div>
381
+ <div>
382
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
383
+ <h3 class="text-2xl font-semibold mb-4">The Speed of Light</h3>
384
+ <p class="text-gray-300 mb-4">The speed of light in vacuum, commonly denoted as c, is a universal physical constant important in many areas of physics. Its exact value is 299,792,458 meters per second (about 186,282 miles per second).</p>
385
+ <div class="mb-4">
386
+ <button onclick="toggleAccordion('light-constant')" class="flex items-center justify-between w-full py-2 text-left">
387
+ <span class="font-medium">Why is the speed of light constant?</span>
388
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
389
+ </button>
390
+ <div id="light-constant" class="accordion-content">
391
+ <p class="mt-2 text-gray-300">According to Einstein's theory of relativity, the speed of light is constant in all inertial frames of reference, regardless of the motion of the source or observer. This constancy leads to phenomena like time dilation and length contraction.</p>
392
+ </div>
393
+ </div>
394
+ <div class="mb-4">
395
+ <button onclick="toggleAccordion('light-travel')" class="flex items-center justify-between w-full py-2 text-left">
396
+ <span class="font-medium">Light travel time examples</span>
397
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
398
+ </button>
399
+ <div id="light-travel" class="accordion-content">
400
+ <ul class="mt-2 text-gray-300 list-disc pl-5">
401
+ <li class="mb-1">Earth to Moon: ~1.28 seconds</li>
402
+ <li class="mb-1">Earth to Sun: ~8.3 minutes</li>
403
+ <li class="mb-1">Sun to Pluto: ~5.5 hours</li>
404
+ <li class="mb-1">Sun to nearest star (Proxima Centauri): ~4.24 years</li>
405
+ <li>Across Milky Way galaxy: ~100,000 years</li>
406
+ </ul>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
414
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
415
+ <div class="text-blue-400 text-3xl mb-4">
416
+ <i class="fas fa-clock"></i>
417
+ </div>
418
+ <h3 class="text-xl font-semibold mb-2">Time Dilation</h3>
419
+ <p class="text-gray-300">As objects approach light speed, time slows down for them relative to stationary observers. At light speed, time would stop completely.</p>
420
+ </div>
421
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
422
+ <div class="text-green-400 text-3xl mb-4">
423
+ <i class="fas fa-ruler"></i>
424
+ </div>
425
+ <h3 class="text-xl font-semibold mb-2">Length Contraction</h3>
426
+ <p class="text-gray-300">Objects moving near light speed appear shortened in the direction of motion to stationary observers.</p>
427
+ </div>
428
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 interactive-card">
429
+ <div class="text-yellow-400 text-3xl mb-4">
430
+ <i class="fas fa-weight-hanging"></i>
431
+ </div>
432
+ <h3 class="text-xl font-semibold mb-2">Mass Increase</h3>
433
+ <p class="text-gray-300">As velocity approaches light speed, relativistic mass increases toward infinity, requiring infinite energy to accelerate further.</p>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="mt-12 bg-gray-900 bg-opacity-50 rounded-xl p-6">
438
+ <h3 class="text-2xl font-semibold mb-4">Light Speed Calculator</h3>
439
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
440
+ <div>
441
+ <div class="mb-4">
442
+ <label class="block mb-2">Distance (light-years)</label>
443
+ <input type="number" id="distance" class="w-full bg-gray-800 rounded p-2" value="1" min="0" step="0.1">
444
+ </div>
445
+ <div class="mb-4">
446
+ <label class="block mb-2">Speed (% of light speed)</label>
447
+ <input type="number" id="speed" class="w-full bg-gray-800 rounded p-2" value="10" min="0.1" max="99.999" step="0.1">
448
+ </div>
449
+ <button onclick="calculateTravelTime()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Calculate</button>
450
+ </div>
451
+ <div class="bg-gray-800 rounded p-4">
452
+ <h4 class="font-semibold mb-2">Results:</h4>
453
+ <div id="results" class="text-gray-300">
454
+ <p>Time on Earth: <span id="earth-time" class="font-medium">-</span> years</p>
455
+ <p>Time for Traveler: <span id="traveler-time" class="font-medium">-</span> years</p>
456
+ <p class="mt-2 text-sm">Due to relativistic effects, the traveler experiences less time than observers on Earth.</p>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </section>
462
+
463
+ <!-- Quiz Section -->
464
+ <section id="quiz-section" class="mb-20 hidden">
465
+ <div class="text-center mb-12">
466
+ <h2 class="text-3xl font-bold mb-4">Cosmic Quiz</h2>
467
+ <p class="text-gray-300 max-w-3xl mx-auto">Test your knowledge about black holes, supernovae, and the speed of light!</p>
468
+ </div>
469
+
470
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 max-w-3xl mx-auto">
471
+ <div id="quiz-container">
472
+ <div id="quiz-intro" class="text-center">
473
+ <h3 class="text-2xl font-semibold mb-4">Ready to test your cosmic knowledge?</h3>
474
+ <p class="text-gray-300 mb-6">This quiz contains 10 questions about black holes, supernovae, and the speed of light. You'll get immediate feedback after each question.</p>
475
+ <button onclick="startQuiz()" class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg text-lg">Start Quiz</button>
476
+ </div>
477
+ <div id="quiz-questions" class="hidden">
478
+ <div class="flex justify-between items-center mb-6">
479
+ <div id="progress" class="text-gray-400">Question 1 of 10</div>
480
+ <div id="score" class="bg-gray-800 px-3 py-1 rounded">Score: 0</div>
481
+ </div>
482
+ <div id="question" class="text-xl font-semibold mb-6"></div>
483
+ <div id="options" class="grid grid-cols-1 gap-3 mb-8"></div>
484
+ <div id="feedback" class="hidden p-4 rounded mb-6"></div>
485
+ <button id="next-btn" onclick="nextQuestion()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded hidden">Next Question</button>
486
+ </div>
487
+ <div id="quiz-results" class="hidden text-center">
488
+ <h3 class="text-2xl font-semibold mb-4">Quiz Complete!</h3>
489
+ <div id="final-score" class="text-4xl font-bold mb-6 cosmic-text"></div>
490
+ <p id="result-message" class="text-gray-300 mb-6"></p>
491
+ <button onclick="resetQuiz()" class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg text-lg">Try Again</button>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </section>
496
+ </main>
497
+
498
+ <!-- Footer -->
499
+ <footer class="bg-gray-900 bg-opacity-70 py-8 px-4">
500
+ <div class="container mx-auto text-center text-gray-400">
501
+ <p>© 2023 Cosmic Phenomena Explorer | Educational Interactive Tutorial</p>
502
+ <div class="flex justify-center space-x-4 mt-4">
503
+ <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
504
+ <a href="#" class="hover:text-white"><i class="fab fa-facebook"></i></a>
505
+ <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
506
+ <a href="#" class="hover:text-white"><i class="fab fa-github"></i></a>
507
+ </div>
508
+ </div>
509
+ </footer>
510
+
511
+ <script>
512
+ // Show initial section
513
+ document.addEventListener('DOMContentLoaded', function() {
514
+ showSection('blackhole');
515
+ });
516
+
517
+ // Section navigation
518
+ function showSection(sectionId) {
519
+ // Hide all sections
520
+ document.getElementById('blackhole-section').classList.add('hidden');
521
+ document.getElementById('supernova-section').classList.add('hidden');
522
+ document.getElementById('light-section').classList.add('hidden');
523
+ document.getElementById('quiz-section').classList.add('hidden');
524
+
525
+ // Show selected section
526
+ document.getElementById(`${sectionId}-section`).classList.remove('hidden');
527
+
528
+ // Update active button (visual feedback)
529
+ const buttons = document.querySelectorAll('nav button');
530
+ buttons.forEach(btn => {
531
+ btn.classList.remove('bg-purple-900', 'bg-orange-900', 'bg-blue-900', 'bg-green-900');
532
+ });
533
+ const activeButton = document.querySelector(`nav button[onclick="showSection('${sectionId}')"]`);
534
+ if (sectionId === 'blackhole') activeButton.classList.add('bg-purple-900');
535
+ if (sectionId === 'supernova') activeButton.classList.add('bg-orange-900');
536
+ if (sectionId === 'light') activeButton.classList.add('bg-blue-900');
537
+ if (sectionId === 'quiz') activeButton.classList.add('bg-green-900');
538
+ }
539
+
540
+ // Accordion functionality
541
+ function toggleAccordion(id) {
542
+ const content = document.getElementById(id);
543
+ const icon = content.previousElementSibling.querySelector('i');
544
+
545
+ if (content.style.maxHeight) {
546
+ content.style.maxHeight = null;
547
+ icon.style.transform = 'rotate(0deg)';
548
+ } else {
549
+ content.style.maxHeight = content.scrollHeight + 'px';
550
+ icon.style.transform = 'rotate(180deg)';
551
+ }
552
+ }
553
+
554
+ // Black hole simulation controls
555
+ function updateBlackHole() {
556
+ const mass = document.getElementById('bh-mass').value;
557
+ const spin = document.getElementById('bh-spin').value;
558
+ const brightness = document.getElementById('bh-brightness').value;
559
+
560
+ const bh = document.getElementById('dynamic-blackhole');
561
+
562
+ // Adjust animation speed based on spin
563
+ const spinSpeed = 20 - (spin / 100 * 15); // Range from 5s to 20s
564
+ bh.style.animationDuration = `${spinSpeed}s`;
565
+
566
+ // Adjust size based on mass (simplified)
567
+ const size = 150 + (mass / 100 * 100); // Range from 150px to 250px
568
+ bh.style.width = `${size}px`;
569
+ bh.style.height = `${size}px`;
570
+
571
+ // Adjust brightness
572
+ const opacity = brightness / 100 * 0.7 + 0.3; // Range from 0.3 to 1
573
+ bh.style.boxShadow = `0 0 ${brightness / 2}px rgba(0, 255, 255, ${opacity})`;
574
+ }
575
+
576
+ // Light speed calculator
577
+ function calculateTravelTime() {
578
+ const distance = parseFloat(document.getElementById('distance').value);
579
+ const speed = parseFloat(document.getElementById('speed').value) / 100; // Convert to fraction
580
+
581
+ if (isNaN(distance) || isNaN(speed) || distance <= 0 || speed <= 0 || speed >= 1) {
582
+ alert('Please enter valid values (distance > 0, 0 < speed < 100)');
583
+ return;
584
+ }
585
+
586
+ // Time on Earth (simple distance/speed)
587
+ const earthTime = distance / speed;
588
+
589
+ // Time for traveler (relativistic time dilation)
590
+ const gamma = 1 / Math.sqrt(1 - Math.pow(speed, 2));
591
+ const travelerTime = earthTime / gamma;
592
+
593
+ document.getElementById('earth-time').textContent = earthTime.toFixed(2);
594
+ document.getElementById('traveler-time').textContent = travelerTime.toFixed(2);
595
+ }
596
+
597
+ // Quiz functionality
598
+ const quizQuestions = [
599
+ {
600
+ question: "What is the boundary around a black hole from which nothing can escape called?",
601
+ options: [
602
+ "Schwarzschild radius",
603
+ "Event horizon",
604
+ "Singularity",
605
+ "Accretion disk"
606
+ ],
607
+ answer: 1,
608
+ explanation: "The event horizon is the point of no return around a black hole. Once anything crosses this boundary, it cannot escape the black hole's gravitational pull."
609
+ },
610
+ {
611
+ question: "What typically remains after a Type II supernova explosion?",
612
+ options: [
613
+ "White dwarf",
614
+ "Neutron star or black hole",
615
+ "Red giant",
616
+ "Nothing - the star is completely destroyed"
617
+ ],
618
+ answer: 1,
619
+ explanation: "After a Type II supernova, the core collapses to form either a neutron star (if the core mass is less than about 3 solar masses) or a black hole (for more massive cores)."
620
+ },
621
+ {
622
+ question: "What is the speed of light in a vacuum?",
623
+ options: [
624
+ "300,000 km/s",
625
+ "150,000 miles/second",
626
+ "299,792,458 m/s",
627
+ "1 billion km/hour"
628
+ ],
629
+ answer: 2,
630
+ explanation: "The exact speed of light in a vacuum is 299,792,458 meters per second (about 186,282 miles per second). This is a fundamental constant of nature."
631
+ },
632
+ {
633
+ question: "What causes a Type Ia supernova?",
634
+ options: [
635
+ "Collapse of a massive star's core",
636
+ "White dwarf exceeding 1.4 solar masses",
637
+ "Collision of two neutron stars",
638
+ "Black hole absorbing too much matter"
639
+ ],
640
+ answer: 1,
641
+ explanation: "Type Ia supernovae occur when a white dwarf in a binary system accretes enough matter to exceed the Chandrasekhar limit of 1.4 solar masses, triggering a runaway nuclear fusion reaction."
642
+ },
643
+ {
644
+ question: "According to relativity, what happens to time as you approach the speed of light?",
645
+ options: [
646
+ "Time speeds up",
647
+ "Time slows down",
648
+ "Time stops completely",
649
+ "Time becomes irrelevant"
650
+ ],
651
+ answer: 1,
652
+ explanation: "As an object approaches the speed of light, time slows down for it relative to a stationary observer. This is called time dilation."
653
+ },
654
+ {
655
+ question: "What is at the center of a black hole?",
656
+ options: [
657
+ "A super-dense neutron star",
658
+ "A wormhole to another universe",
659
+ "A gravitational singularity",
660
+ "A pocket of antimatter"
661
+ ],
662
+ answer: 2,
663
+ explanation: "The singularity is the point at the center of a black hole where matter is thought to be crushed to infinite density and zero volume."
664
+ },
665
+ {
666
+ question: "Which of these elements is primarily created in supernova explosions?",
667
+ options: [
668
+ "Hydrogen",
669
+ "Helium",
670
+ "Iron",
671
+ "Oxygen"
672
+ ],
673
+ answer: 2,
674
+ explanation: "While hydrogen and helium were created in the Big Bang, and elements up to iron can be forged in stellar cores, elements heavier than iron (like gold, uranium, etc.) are primarily created in supernova explosions."
675
+ },
676
+ {
677
+ question: "What would happen if you could travel at the speed of light?",
678
+ options: [
679
+ "You would experience time normally",
680
+ "Time would stop for you relative to the universe",
681
+ "You would travel backwards in time",
682
+ "You would become energy"
683
+ ],
684
+ answer: 1,
685
+ explanation: "At the speed of light, time would stop completely for the traveler relative to the rest of the universe. This is why photons (light particles) don't experience time."
686
+ },
687
+ {
688
+ question: "What is the name of our galaxy's supermassive black hole?",
689
+ options: [
690
+ "Cygnus X-1",
691
+ "Sagittarius A*",
692
+ "M87",
693
+ "Andromeda Core"
694
+ ],
695
+ answer: 1,
696
+ explanation: "Sagittarius A* (pronounced 'Sagittarius A-star') is the supermassive black hole at the center of our Milky Way galaxy, with a mass of about 4 million suns."
697
+ },
698
+ {
699
+ question: "How long does it take for light from the Sun to reach Earth?",
700
+ options: [
701
+ "1 second",
702
+ "8 minutes",
703
+ "1 hour",
704
+ "1 day"
705
+ ],
706
+ answer: 1,
707
+ explanation: "Light takes approximately 8 minutes and 20 seconds to travel from the Sun to Earth, as they are about 93 million miles (150 million km) apart."
708
+ }
709
+ ];
710
+
711
+ let currentQuestion = 0;
712
+ let score = 0;
713
+
714
+ function startQuiz() {
715
+ document.getElementById('quiz-intro').classList.add('hidden');
716
+ document.getElementById('quiz-questions').classList.remove('hidden');
717
+ showQuestion();
718
+ }
719
+
720
+ function showQuestion() {
721
+ const question = quizQuestions[currentQuestion];
722
+ document.getElementById('progress').textContent = `Question ${currentQuestion + 1} of ${quizQuestions.length}`;
723
+ document.getElementById('score').textContent = `Score: ${score}`;
724
+ document.getElementById('question').textContent = question.question;
725
+
726
+ const optionsContainer = document.getElementById('options');
727
+ optionsContainer.innerHTML = '';
728
+
729
+ question.options.forEach((option, index) => {
730
+ const button = document.createElement('button');
731
+ button.className = 'bg-gray-800 hover:bg-gray-700 text-left p-3 rounded transition';
732
+ button.textContent = option;
733
+ button.onclick = () => selectAnswer(index);
734
+ optionsContainer.appendChild(button);
735
+ });
736
+
737
+ document.getElementById('feedback').classList.add('hidden');
738
+ document.getElementById('next-btn').classList.add('hidden');
739
+ }
740
+
741
+ function selectAnswer(selectedIndex) {
742
+ const question = quizQuestions[currentQuestion];
743
+ const feedback = document.getElementById('feedback');
744
+ const options = document.querySelectorAll('#options button');
745
+
746
+ // Disable all options
747
+ options.forEach(option => {
748
+ option.disabled = true;
749
+ });
750
+
751
+ // Highlight selected answer
752
+ options[selectedIndex].classList.remove('bg-gray-800', 'hover:bg-gray-700');
753
+
754
+ if (selectedIndex === question.answer) {
755
+ // Correct answer
756
+ options[selectedIndex].classList.add('bg-green-600');
757
+ feedback.textContent = `Correct! ${question.explanation}`;
758
+ feedback.className = 'hidden p-4 rounded mb-6 bg-green-900';
759
+ score++;
760
+ document.getElementById('score').textContent = `Score: ${score}`;
761
+ } else {
762
+ // Wrong answer
763
+ options[selectedIndex].classList.add('bg-red-600');
764
+ options[question.answer].classList.add('bg-green-600');
765
+ feedback.textContent = `Incorrect. ${question.explanation}`;
766
+ feedback.className = 'hidden p-4 rounded mb-6 bg-red-900';
767
+ }
768
+
769
+ feedback.classList.remove('hidden');
770
+ document.getElementById('next-btn').classList.remove('hidden');
771
+ }
772
+
773
+ function nextQuestion() {
774
+ currentQuestion++;
775
+
776
+ if (currentQuestion < quizQuestions.length) {
777
+ showQuestion();
778
+ } else {
779
+ showResults();
780
+ }
781
+ }
782
+
783
+ function showResults() {
784
+ document.getElementById('quiz-questions').classList.add('hidden');
785
+ document.getElementById('quiz-results').classList.remove('hidden');
786
+
787
+ const percentage = Math.round((score / quizQuestions.length) * 100);
788
+ document.getElementById('final-score').textContent = `${percentage}%`;
789
+
790
+ let message;
791
+ if (percentage >= 80) {
792
+ message = "Cosmic genius! Your knowledge of the universe is stellar!";
793
+ } else if (percentage >= 60) {
794
+ message = "Great job! You've got a solid grasp of cosmic phenomena.";
795
+ } else if (percentage >= 40) {
796
+ message = "Not bad! The universe is complex, keep exploring!";
797
+ } else {
798
+ message = "Keep learning! The cosmos has many more secrets to discover.";
799
+ }
800
+
801
+ document.getElementById('result-message').textContent = message;
802
+ }
803
+
804
+ function resetQuiz() {
805
+ currentQuestion = 0;
806
+ score = 0;
807
+ document.getElementById('quiz-results').classList.add('hidden');
808
+ document.getElementById('quiz-intro').classList.remove('hidden');
809
+ }
810
+ </script>
811
+ <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=ZT00/blackholy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
812
+ </html>