-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlight.html
More file actions
311 lines (287 loc) · 21.3 KB
/
light.html
File metadata and controls
311 lines (287 loc) · 21.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reading Starlight - Astro for Kids</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/pages/light.css">
</head>
<body>
<div class="stars-bg"></div>
<nav class="top-nav"></nav>
<main class="page-content">
<!-- ===== HERO ===== -->
<section class="page-hero fade-in">
<h1>Reading Starlight</h1>
<p>What can a rainbow tell you about a star millions of light-years away? Turns out -- almost everything.</p>
</section>
<!-- ===== INTRO ===== -->
<section class="fade-in fade-in-delay-1">
<h2>Light Is a Cosmic Messenger</h2>
<p>Astronomers cannot visit stars. They cannot touch them, weigh them on a scale, or hold a thermometer to their surface. But stars send us a gift every second: <strong>light</strong>. And hidden inside that light are clues about a star's temperature, what it is made of, how fast it is moving, how far away it is, and even how heavy it is.</p>
<p>The trick is learning how to read those clues. When you split starlight into a rainbow (a <strong>spectrum</strong>), the colors and patterns tell an incredible story.</p>
</section>
<!-- ===== INTERACTIVE SPECTRUM ANALYZER ===== -->
<section class="interactive-area fade-in fade-in-delay-2">
<div class="interactive-label">Interactive -- Spectrum Analyzer</div>
<h3>Split the Light</h3>
<p>Drag the temperature slider to change the star's surface temperature. Watch how the spectrum, the star's color, and the absorption lines all change together.</p>
<div class="analyzer-layout">
<!-- Star and Prism Diagram -->
<div class="prism-diagram">
<svg id="prism-svg" viewBox="0 0 720 220" preserveAspectRatio="xMidYMid meet" aria-label="Light passing through a prism into a spectrum">
<!-- JS draws the star, beam, prism, and rainbow fan -->
</svg>
</div>
<!-- Spectrum Band -->
<div class="spectrum-container">
<div class="spectrum-labels">
<span>400 nm<br>Violet</span>
<span>450 nm<br>Blue</span>
<span>500 nm<br>Green</span>
<span>550 nm<br>Yellow</span>
<span>600 nm<br>Orange</span>
<span>650 nm<br>Red</span>
<span>700 nm<br>Red</span>
</div>
<div class="spectrum-band" id="spectrum-band">
<!-- JS draws absorption lines here -->
</div>
<div class="peak-marker" id="peak-marker">
<div class="peak-line"></div>
<span class="peak-label" id="peak-label">Peak: 580 nm</span>
</div>
</div>
<!-- Temperature Controls -->
<div class="temp-controls">
<div class="temp-slider-row">
<label for="temp-slider">Temperature</label>
<input type="range" id="temp-slider" min="2000" max="30000" step="100" value="5800">
<span class="temp-value" id="temp-value">5,800 K</span>
</div>
<div class="temp-presets">
<button class="btn temp-preset" data-temp="3000">Cool Red<br><span class="preset-temp">3,000 K</span></button>
<button class="btn temp-preset" data-temp="5800">Sun-like<br><span class="preset-temp">5,800 K</span></button>
<button class="btn temp-preset" data-temp="10000">Hot White<br><span class="preset-temp">10,000 K</span></button>
<button class="btn temp-preset" data-temp="25000">Blazing Blue<br><span class="preset-temp">25,000 K</span></button>
</div>
</div>
</div>
<!-- Element Identification Game -->
<div class="element-game" id="element-game">
<h3>Element Detective</h3>
<p>Each element leaves a unique fingerprint of dark lines on the spectrum. Can you match the pattern?</p>
<div class="element-challenge" id="element-challenge">
<div class="challenge-spectrum" id="challenge-spectrum">
<!-- JS draws a mystery absorption pattern -->
</div>
<p class="challenge-question" id="challenge-question">Which element produces this pattern of absorption lines?</p>
<div class="element-buttons" id="element-buttons">
<!-- JS fills element choices -->
</div>
<div class="element-feedback" id="element-feedback"></div>
<button class="btn btn-primary" id="next-challenge" style="display:none;">Next Pattern</button>
</div>
</div>
</section>
<!-- ===== WHAT LIGHT REVEALS ===== -->
<section class="fade-in">
<h2>What Light Reveals</h2>
<p>Here is a summary of everything astronomers can figure out just by carefully studying starlight.</p>
<div class="card-grid">
<div class="card info-card">
<div class="info-icon" style="background: var(--nebula-purple);">△</div>
<h4>Distance</h4>
<p>Nearby stars appear to shift back and forth as Earth orbits -- this is <strong>parallax</strong>. For farther objects, astronomers use standard candles and redshift. Each method is a rung on the cosmic distance ladder.</p>
</div>
<div class="card info-card">
<div class="info-icon" style="background: var(--cool-red);">☀</div>
<h4>Temperature</h4>
<p>The overall color of a star's spectrum reveals its surface temperature. Hot stars peak in blue light; cool stars peak in red. This is <strong>Wien's law</strong>: peak wavelength = 2,898,000 / T.</p>
</div>
<div class="card info-card">
<div class="info-icon" style="background: var(--hot-blue);">☰</div>
<h4>Composition</h4>
<p>Each element absorbs light at specific wavelengths, creating dark <strong>absorption lines</strong> in the spectrum. Hydrogen, helium, sodium, iron -- every element has its own unique barcode.</p>
</div>
<div class="card info-card">
<div class="info-icon" style="background: var(--star-yellow);">⇄</div>
<h4>Speed</h4>
<p>If a star moves toward us, its light gets slightly bluer (<strong>blueshift</strong>). If it moves away, the light stretches redder (<strong>redshift</strong>). This is the Doppler effect for light.</p>
</div>
<div class="card info-card">
<div class="info-icon" style="background: #2ecc71;">⚖</div>
<h4>Mass</h4>
<p>If a star orbits another star in a <strong>binary system</strong>, we can use Kepler's laws and the orbital speed to calculate the masses. Most stars are actually in pairs!</p>
</div>
</div>
</section>
<!-- ===== DISTANCE LADDER ===== -->
<section class="fade-in">
<h2>The Cosmic Distance Ladder</h2>
<p>You cannot stretch a tape measure to a star. Instead, astronomers use a series of techniques, each building on the last -- like climbing rungs on a ladder.</p>
<div class="ladder-diagram">
<div class="ladder-rung">
<div class="rung-bar rung-1"></div>
<div class="rung-content">
<strong>Parallax</strong>
<span class="rung-range">Up to ~1,000 light-years</span>
<p>Watch a star shift against the background as Earth moves. Closer stars shift more.</p>
</div>
</div>
<div class="ladder-rung">
<div class="rung-bar rung-2"></div>
<div class="rung-content">
<strong>Cepheid Variables</strong>
<span class="rung-range">Up to ~100 million light-years</span>
<p>These pulsating stars have a brightness linked to their pulse rate. Compare true brightness to apparent brightness.</p>
</div>
</div>
<div class="ladder-rung">
<div class="rung-bar rung-3"></div>
<div class="rung-content">
<strong>Type Ia Supernovae</strong>
<span class="rung-range">Billions of light-years</span>
<p>These explosions always reach about the same peak brightness -- standard candles visible across the universe.</p>
</div>
</div>
<div class="ladder-rung">
<div class="rung-bar rung-4"></div>
<div class="rung-content">
<strong>Redshift (Hubble's Law)</strong>
<span class="rung-range">The entire observable universe</span>
<p>The farther a galaxy is, the faster it moves away and the redder its light gets.</p>
</div>
</div>
</div>
</section>
<!-- ===== DOPPLER EFFECT ===== -->
<section class="fade-in">
<h2>The Doppler Effect: Blueshift and Redshift</h2>
<p>You have heard the Doppler effect with sound -- an ambulance siren sounds higher-pitched as it approaches and lower-pitched as it drives away. Light does the same thing.</p>
<div class="doppler-diagram">
<div class="doppler-panel doppler-blue">
<div class="doppler-arrow">←</div>
<div class="doppler-body">
<h4>Blueshift</h4>
<p>A star <strong>moving toward</strong> you compresses its light waves. The wavelengths get shorter, so absorption lines shift toward the blue end of the spectrum.</p>
</div>
</div>
<div class="doppler-panel doppler-red">
<div class="doppler-body">
<h4>Redshift</h4>
<p>A star <strong>moving away</strong> from you stretches its light waves. The wavelengths get longer, so absorption lines shift toward the red end of the spectrum.</p>
</div>
<div class="doppler-arrow">→</div>
</div>
</div>
<p>Modern instruments can measure shifts so tiny they detect a star wobbling at walking speed -- slower than 1 meter per second. That is how many exoplanets are found: the planet tugs on its star, causing a tiny, repeating Doppler wobble.</p>
</section>
<!-- ===== COOL FACT: MULTI-MESSENGER ===== -->
<div class="fact-box fade-in">
<div class="fact-label">Cool Fact</div>
<h4 style="color: var(--star-yellow); margin-bottom: 0.5rem;">Multi-Messenger Astronomy: More Than Just Light</h4>
<p>Light is not the only messenger from the cosmos. In August 2017, scientists detected <strong>gravitational waves</strong> -- ripples in spacetime itself -- from two neutron stars crashing together (event GW170817). Within hours, telescopes spotted <strong>light</strong> from the same explosion.</p>
<p>This was the first time we "heard" and "saw" the same cosmic event. It confirmed something amazing: neutron star mergers create heavy elements like <strong>gold and platinum</strong>. The gold in your jewelry was probably forged in a collision between dead stars billions of years ago!</p>
<p>Today, astronomers use four types of cosmic messengers: light, gravitational waves, neutrinos (ghost-like particles), and cosmic rays (high-energy particles). Combining them gives us a much richer picture of the universe than light alone ever could.</p>
</div>
<!-- ===== DIG DEEPER ===== -->
<section class="fade-in">
<h2>Dig Deeper</h2>
<div class="accordion">
<div class="accordion-header">
<span class="accordion-arrow">▶</span>
The Hierarchical Logic: How Properties Connect
</div>
<div class="accordion-body">
<div class="accordion-inner">
<p>Every property astronomers measure is linked in a chain, and it all starts with <strong>distance</strong>.</p>
<p><strong>Distance</strong> unlocks <strong>luminosity</strong>. If you know how far away a star is and how bright it appears, you can calculate its true energy output using the inverse-square law.</p>
<p>The <strong>spectrum</strong> gives <strong>temperature</strong> (from the peak color) and <strong>composition</strong> (from absorption lines).</p>
<p><strong>Luminosity + temperature</strong> gives <strong>size</strong>. A cool star that is very luminous must be enormous -- it is a red giant. A hot star that is dim must be tiny -- it is a white dwarf.</p>
<p>Position on the HR diagram tells you the <strong>evolutionary state</strong> -- where a star is in its life cycle.</p>
<p>For stars in binary systems, orbital dynamics give <strong>mass</strong>. And mass determines how a star burns, evolves, and ultimately dies.</p>
<p>So the chain looks like this:</p>
<p class="chain-diagram"><strong>Distance</strong> → <strong>Luminosity</strong> → <strong>Temperature</strong> → <strong>Size</strong> → <strong>Mass</strong> → <strong>Fate</strong></p>
<p>Get the distance wrong, and everything downstream is wrong too. That is why the cosmic distance ladder is so important!</p>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-header">
<span class="accordion-arrow">▶</span>
How Wien's Law Works
</div>
<div class="accordion-body">
<div class="accordion-inner">
<p>Every hot object glows. The hotter it is, the shorter the wavelength of light it emits most strongly. <strong>Wien's law</strong> puts this into a simple formula:</p>
<p class="formula-box">Peak wavelength (nm) = 2,898,000 / Temperature (K)</p>
<p>For the Sun at about 5,800 K, the peak is at about 500 nm -- right in the middle of the visible spectrum (green-yellow light).</p>
<p>A cool red star at 3,000 K peaks at about 966 nm -- in the infrared, beyond what our eyes can see. But it still glows plenty of visible red light.</p>
<p>A blazing hot star at 25,000 K peaks at about 116 nm -- deep in the ultraviolet! It looks blue-white to our eyes because the visible part of its spectrum is strongest at the blue end.</p>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-header">
<span class="accordion-arrow">▶</span>
Why Absorption Lines Exist
</div>
<div class="accordion-body">
<div class="accordion-inner">
<p>A star's hot core produces a smooth rainbow of light -- all colors, all wavelengths. But as this light passes through the cooler outer atmosphere of the star, atoms in the atmosphere absorb light at very specific wavelengths.</p>
<p>Each type of atom has electrons that can only jump between certain energy levels. When a photon with exactly the right energy comes along, an electron absorbs it and jumps to a higher level. That photon is removed from the spectrum, leaving a dark line.</p>
<p>Since every element has a different set of electron energy levels, every element produces a different pattern of dark lines -- like a fingerprint or a barcode. By matching the pattern, astronomers can identify which elements are present in the star's atmosphere.</p>
<p>In 1860, Gustav Kirchhoff and Robert Bunsen realized this technique could reveal what the Sun and stars are made of without ever going there. It was one of the most powerful discoveries in the history of science.</p>
</div>
</div>
</div>
</section>
<!-- ===== QUIZ ===== -->
<section class="fade-in">
<h2>Test Your Starlight Knowledge</h2>
<div class="quiz-box">
<h4>Question 1: Color and Temperature</h4>
<p>A star that appears blue-white is most likely...</p>
<button class="quiz-option" data-correct="false" data-feedback="Cool stars glow red, not blue. Blue means very hot!">Very cool, around 3,000 K</button>
<button class="quiz-option" data-correct="false" data-feedback="5,800 K is about the Sun's temperature -- it looks yellowish-white, not blue.">About the same temperature as our Sun</button>
<button class="quiz-option" data-correct="true" data-feedback="Correct! Blue-white stars are extremely hot -- 10,000 K or higher. Wien's law tells us hotter stars peak at shorter (bluer) wavelengths.">Very hot, above 10,000 K</button>
<button class="quiz-option" data-correct="false" data-feedback="Color is determined by surface temperature, not size. A blue star is hot regardless of its size.">Very large, regardless of temperature</button>
<div class="quiz-feedback"></div>
</div>
<div class="quiz-box">
<h4>Question 2: Absorption Lines</h4>
<p>Dark lines in a star's spectrum tell us about the star's...</p>
<button class="quiz-option" data-correct="false" data-feedback="Distance is measured by parallax, standard candles, or redshift -- not directly from absorption line positions.">Distance from Earth</button>
<button class="quiz-option" data-correct="true" data-feedback="Correct! Each element absorbs light at specific wavelengths, creating a unique pattern of dark lines. By matching the pattern, we identify the elements.">Chemical composition</button>
<button class="quiz-option" data-correct="false" data-feedback="Age is tricky to measure and usually requires knowing the star's mass and evolutionary state, not just its absorption lines.">Age in years</button>
<button class="quiz-option" data-correct="false" data-feedback="The number of planets is found through other methods like transit photometry or radial velocity surveys, not directly from absorption lines.">Number of planets</button>
<div class="quiz-feedback"></div>
</div>
<div class="quiz-box">
<h4>Question 3: Doppler Effect</h4>
<p>If a star's spectral lines are shifted toward the red end of the spectrum, the star is...</p>
<button class="quiz-option" data-correct="false" data-feedback="Blueshift means approaching. Redshift means the opposite!">Moving toward us</button>
<button class="quiz-option" data-correct="true" data-feedback="Correct! When a star moves away, its light waves stretch out, shifting to longer (redder) wavelengths. This is redshift.">Moving away from us</button>
<button class="quiz-option" data-correct="false" data-feedback="A stationary star shows no shift at all. The lines stay at their rest wavelengths.">Standing still</button>
<button class="quiz-option" data-correct="false" data-feedback="Spinning causes line broadening (lines get wider), not a consistent shift in one direction.">Spinning very fast</button>
<div class="quiz-feedback"></div>
</div>
</section>
<!-- ===== FINAL FUN FACT ===== -->
<div class="fact-box fade-in">
<div class="fact-label">Fun Fact</div>
<p>In 1835, philosopher Auguste Comte declared we could <strong>never</strong> know what stars are made of. Just 25 years later, Kirchhoff and Bunsen proved him wrong by analyzing the Sun's spectrum. Today, we know the chemical makeup of stars billions of light-years away -- all without leaving Earth!</p>
</div>
<div class="page-nav"></div>
<footer class="page-footer">
<p>Astro for Kids -- Built for curious minds exploring the cosmos</p>
</footer>
</main>
<script src="js/nav.js"></script>
<script src="js/common.js"></script>
<script src="js/pages/light.js"></script>
</body>
</html>