Hugging Face's logo

Spaces:
ParulPandey
/
Tidal_Locking
Running

App Files Community
ParulPandey commited on
Commit
cac1e8e
·
verified ·
1 Parent(s): 228803d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +370 -18
index.html CHANGED
@@ -1,19 +1,371 @@
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>Why We See Only One Side of the Moon</title>
7
+ <!-- Fonts for header and body -->
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
11
+ <style>
12
+ html, body, .font-sans {
13
+ font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
14
+ }
15
+ body {
16
+ margin: 0;
17
+ padding: 0;
18
+ overflow: hidden;
19
+ }
20
+ #animation-container {
21
+ position: relative;
22
+ width: 100vw;
23
+ height: 100vh;
24
+ overflow: hidden;
25
+ background-color: #000010;
26
+ }
27
+ #animation-canvas {
28
+ display: block;
29
+ position: absolute;
30
+ top: 0;
31
+ left: 0;
32
+ z-index: 1;
33
+ }
34
+ .header-astro {
35
+ font-family: 'Space Grotesk', 'Inter', Arial, sans-serif;
36
+ font-weight: 700;
37
+ letter-spacing: -0.01em;
38
+ }
39
+ .control-panel {
40
+ position: absolute;
41
+ bottom: 2rem;
42
+ left: 2rem;
43
+ z-index: 10;
44
+ background: rgba(0, 0, 20, 0.7);
45
+ backdrop-filter: blur(10px);
46
+ border-radius: 1rem;
47
+ padding: 1rem;
48
+ box-shadow: 0 0 20px rgba(186, 215, 255, 0.2);
49
+ display: flex;
50
+ flex-direction: column;
51
+ gap: 0.5rem;
52
+ }
53
+ .explanation-panel {
54
+ position: absolute;
55
+ top: 2rem;
56
+ right: 2rem;
57
+ z-index: 10;
58
+ background: rgba(0, 0, 20, 0.7);
59
+ backdrop-filter: blur(10px);
60
+ border-radius: 1rem;
61
+ padding: 1.5rem;
62
+ box-shadow: 0 0 20px rgba(186, 215, 255, 0.2);
63
+ color: white;
64
+ width: 220px;
65
+ font-size: 1rem;
66
+ line-height: 1.6;
67
+ transition: opacity 0.3s ease-in-out;
68
+ opacity: 0;
69
+ }
70
+ .control-btn {
71
+ padding: 0.5rem 1rem;
72
+ font-size: 0.92rem;
73
+ font-weight: 600;
74
+ color: white;
75
+ background-color: rgba(255, 255, 255, 0.1);
76
+ border: 1px solid rgba(255, 255, 255, 0.2);
77
+ border-radius: 0.5rem;
78
+ cursor: pointer;
79
+ transition: background-color 0.2s ease;
80
+ text-align: center;
81
+ font-family: 'Inter', system-ui, sans-serif;
82
+ }
83
+ .control-btn:hover {
84
+ background-color: rgba(255, 255, 255, 0.2);
85
+ }
86
+ .control-btn.active {
87
+ background-color: #4f46e5;
88
+ border-color: #4f46e5;
89
+ }
90
+ /* Disclaimer at bottom, single line, smaller, no glow */
91
+ .disclaimer-line {
92
+ position: fixed;
93
+ left: 50%;
94
+ bottom: 1.1rem;
95
+ transform: translateX(-50%);
96
+ z-index: 40;
97
+ font-size: 0.89rem;
98
+ color: #b6bed7;
99
+ font-family: 'Inter', system-ui, sans-serif;
100
+ text-align: center;
101
+ padding: 0 0.5rem;
102
+ border-radius: 0.4rem;
103
+ pointer-events: none;
104
+ white-space: nowrap;
105
+ background: transparent;
106
+ opacity: 0.88;
107
+ }
108
+ </style>
109
+ </head>
110
+ <body class="bg-black text-white overflow-hidden font-sans">
111
+ <div id="animation-container" class="relative">
112
+ <h1 class="header-astro absolute text-center top-8 left-1/2 -translate-x-1/2 text-3xl md:text-4xl font-bold text-white z-20 w-11/12" style="text-shadow: 0 0 15px rgba(186, 215, 255, 0.7);">
113
+ Why We See Only One Side of the Moon
114
+ </h1>
115
+ <!-- Canvas will be inserted here by p5.js -->
116
+ </div>
117
+ <div id="explanation-panel" class="explanation-panel"></div>
118
+ <div class="control-panel">
119
+ <button id="btn-no-rotation" class="control-btn">No Rotation</button>
120
+ <button id="btn-fast-rotation" class="control-btn">Fast Rotation</button>
121
+ <button id="btn-locked-rotation" class="control-btn active">Tidally Locked</button>
122
+ </div>
123
+ <div class="disclaimer-line">
124
+ Disclaimer: Earth’s rotation is hidden to keep the focus on the Moon’s motion.
125
+ </div>
126
+ <script>
127
+ document.addEventListener('DOMContentLoaded', () => {
128
+ const sketch = (p) => {
129
+ let earth;
130
+ let moon;
131
+ let stars = [];
132
+ let rotationMode = 'locked';
133
+ let starCount = 800;
134
+
135
+ const btnNoRotation = document.getElementById('btn-no-rotation');
136
+ const btnFastRotation = document.getElementById('btn-fast-rotation');
137
+ const btnLockedRotation = document.getElementById('btn-locked-rotation');
138
+ const explanationPanel = document.getElementById('explanation-panel');
139
+
140
+ const explanations = {
141
+ none: '<strong>No Rotation:</strong> The Moon does not spin on its own axis. The red line always points in the same direction, so we see all sides of the Moon as it orbits.',
142
+ fast: '<strong>Fast Rotation:</strong> The Moon spins on its own axis very quickly, much faster than it orbits the Earth. We can easily see all of its sides.',
143
+ locked: '<strong>Tidally Locked:</strong> The Moon rotates on its axis at the same speed it orbits the Earth. This is why the red line (and the same face) always points toward the Earth!'
144
+ };
145
+
146
+ function updateActiveButton() {
147
+ document.querySelectorAll('.control-btn').forEach(btn => btn.classList.remove('active'));
148
+ explanationPanel.style.opacity = '1';
149
+ if (rotationMode === 'none') {
150
+ btnNoRotation.classList.add('active');
151
+ explanationPanel.innerHTML = explanations.none;
152
+ } else if (rotationMode === 'fast') {
153
+ btnFastRotation.classList.add('active');
154
+ explanationPanel.innerHTML = explanations.fast;
155
+ } else if (rotationMode === 'locked') {
156
+ btnLockedRotation.classList.add('active');
157
+ explanationPanel.innerHTML = explanations.locked;
158
+ }
159
+ }
160
+
161
+ btnNoRotation.addEventListener('click', () => {
162
+ rotationMode = 'none';
163
+ updateActiveButton();
164
+ });
165
+ btnFastRotation.addEventListener('click', () => {
166
+ rotationMode = 'fast';
167
+ updateActiveButton();
168
+ });
169
+ btnLockedRotation.addEventListener('click', () => {
170
+ rotationMode = 'locked';
171
+ updateActiveButton();
172
+ });
173
+
174
+ function fillStars(n) {
175
+ stars = [];
176
+ for (let i = 0; i < n; i++) {
177
+ stars.push(p.createVector(p.random(p.width), p.random(p.height)));
178
+ }
179
+ }
180
+
181
+ p.setup = () => {
182
+ let canvas = p.createCanvas(p.windowWidth, p.windowHeight);
183
+ canvas.parent('animation-container');
184
+ canvas.id('animation-canvas');
185
+ p.colorMode(p.HSB, 360, 100, 100, 100);
186
+ p.angleMode(p.DEGREES);
187
+ earth = new Earth(p.width / 2, p.height / 2);
188
+ moon = new Moon(earth.pos.x, earth.pos.y, p.min(p.width, p.height) * 0.4);
189
+
190
+ starCount = Math.floor((p.width * p.height) / 1800);
191
+ fillStars(starCount);
192
+
193
+ updateActiveButton();
194
+ };
195
+
196
+ p.draw = () => {
197
+ p.background(245, 90, 10);
198
+ drawStars();
199
+ moon.update();
200
+ earth.update();
201
+ earth.display(moon.pos);
202
+ moon.display();
203
+ };
204
+
205
+ function drawStars() {
206
+ p.noStroke();
207
+ for (const star of stars) {
208
+ star.x -= 0.02;
209
+ if (star.x < 0) {
210
+ star.x = p.width;
211
+ }
212
+ let alpha = p.random(50, 100);
213
+ let size = p.random(1, 3);
214
+ if (p.random() > 0.99) {
215
+ alpha = 100;
216
+ size = p.random(2.5, 4);
217
+ }
218
+ p.fill(0, 0, 100, alpha);
219
+ p.ellipse(star.x, star.y, size, size);
220
+ }
221
+ }
222
+
223
+ p.windowResized = () => {
224
+ p.resizeCanvas(p.windowWidth, p.windowHeight);
225
+ if (earth) earth.pos.set(p.width / 2, p.height / 2);
226
+ if (moon) {
227
+ moon.center.set(p.width / 2, p.height / 2);
228
+ moon.radius = p.min(p.width, p.height) * 0.35;
229
+ }
230
+ starCount = Math.floor((p.width * p.height) / 1800);
231
+ fillStars(starCount);
232
+ };
233
+
234
+ class Earth {
235
+ constructor(x, y) {
236
+ this.pos = p.createVector(x, y);
237
+ this.bodySize = p.min(p.width, p.height) * 0.25;
238
+ this.eyes = [
239
+ { offset: p.createVector(-this.bodySize * 0.27, -this.bodySize * 0.13), size: this.bodySize * 0.25 },
240
+ { offset: p.createVector(this.bodySize * 0.27, -this.bodySize * 0.13), size: this.bodySize * 0.25 }
241
+ ];
242
+ }
243
+ update() {
244
+ this.bodySize = p.min(p.width, p.height) * 0.25;
245
+ this.eyes[0].offset.set(-this.bodySize * 0.27, -this.bodySize * 0.13);
246
+ this.eyes[1].offset.set(this.bodySize * 0.27, -this.bodySize * 0.13);
247
+ this.eyes[0].size = this.bodySize * 0.25;
248
+ this.eyes[1].size = this.bodySize * 0.25;
249
+ }
250
+ display(target) {
251
+ p.push();
252
+ p.translate(this.pos.x, this.pos.y);
253
+ p.drawingContext.shadowBlur = 60;
254
+ p.drawingContext.shadowColor = p.color(200, 80, 100, 50);
255
+ p.fill(210, 80, 80);
256
+ p.noStroke();
257
+ p.ellipse(0, 0, this.bodySize, this.bodySize);
258
+
259
+ p.fill(120, 60, 65);
260
+ p.noStroke();
261
+ p.beginShape();
262
+ p.curveVertex(this.bodySize * -0.15, this.bodySize * -0.4);
263
+ p.curveVertex(this.bodySize * -0.1, this.bodySize * -0.4);
264
+ p.curveVertex(this.bodySize * -0.2, this.bodySize * -0.2);
265
+ p.curveVertex(this.bodySize * -0.15, 0.05);
266
+ p.curveVertex(this.bodySize * -0.3, this.bodySize * 0.3);
267
+ p.curveVertex(this.bodySize * -0.2, this.bodySize * 0.45);
268
+ p.curveVertex(this.bodySize * 0.05, this.bodySize * 0.4);
269
+ p.curveVertex(this.bodySize * 0.1, 0.1);
270
+ p.curveVertex(this.bodySize * -0.1, this.bodySize * -0.4);
271
+ p.curveVertex(this.bodySize * -0.1, this.bodySize * -0.4);
272
+ p.endShape(p.CLOSE);
273
+
274
+ p.beginShape();
275
+ p.curveVertex(this.bodySize * 0.4, this.bodySize * -0.3);
276
+ p.curveVertex(this.bodySize * 0.45, this.bodySize * -0.2);
277
+ p.curveVertex(this.bodySize * 0.35, 0);
278
+ p.curveVertex(this.bodySize * 0.4, this.bodySize * 0.25);
279
+ p.curveVertex(this.bodySize * 0.2, this.bodySize * 0.4);
280
+ p.curveVertex(this.bodySize * 0.15, this.bodySize * 0.2);
281
+ p.curveVertex(this.bodySize * 0.25, 0);
282
+ p.endShape(p.CLOSE);
283
+
284
+ p.fill(200, 5, 100, 90);
285
+ p.noStroke();
286
+ p.arc(0, 0, this.bodySize, this.bodySize, 250, 290, p.CHORD);
287
+ p.arc(0, 0, this.bodySize, this.bodySize, 70, 110, p.CHORD);
288
+
289
+ p.drawingContext.shadowBlur = 0;
290
+
291
+ this.eyes.forEach(eye => this.drawEye(eye.offset.x, eye.offset.y, eye.size, target));
292
+
293
+ p.noFill();
294
+ p.stroke(210, 20, 20, 80);
295
+ p.strokeWeight(4);
296
+ p.arc(0, this.bodySize * 0.15, this.bodySize * 0.4, this.bodySize * 0.27, 0, 180);
297
+
298
+ p.pop();
299
+ }
300
+ drawEye(x, y, size, target) {
301
+ let eyePos = p.createVector(this.pos.x + x, this.pos.y + y);
302
+ let angle = p.atan2(target.y - eyePos.y, target.x - eyePos.x);
303
+ let dist = p5.Vector.dist(target, eyePos);
304
+ let pupilOffset = p.min(dist, size / 2 - (size / 1.8 / 2));
305
+ p.push();
306
+ p.translate(x, y);
307
+ p.stroke(200, 10, 20, 80);
308
+ p.strokeWeight(2);
309
+ p.fill(200, 5, 100);
310
+ p.ellipse(0, 0, size, size);
311
+ p.rotate(angle);
312
+ p.noStroke();
313
+ p.fill(0);
314
+ p.ellipse(pupilOffset, 0, size / 1.8, size / 1.8);
315
+ p.pop();
316
+ }
317
+ }
318
+ class Moon {
319
+ constructor(centerX, centerY, radius) {
320
+ this.center = p.createVector(centerX, centerY);
321
+ this.radius = radius;
322
+ this.size = p.min(p.width, p.height) * 0.08;
323
+ this.orbitalAngle = 0;
324
+ this.selfRotationAngle = 0;
325
+ this.speed = 0.5;
326
+ this.pos = p.createVector();
327
+ }
328
+ update() {
329
+ this.size = p.min(p.width, p.height) * 0.08;
330
+ this.orbitalAngle += this.speed;
331
+ this.selfRotationAngle += 4;
332
+ this.pos.x = this.center.x + this.radius * p.cos(this.orbitalAngle);
333
+ this.pos.y = this.center.y + this.radius * p.sin(this.orbitalAngle);
334
+ }
335
+ display() {
336
+ p.noFill();
337
+ p.stroke(100, 0, 100, 10);
338
+ p.strokeWeight(1);
339
+ p.ellipse(this.center.x, this.center.y, this.radius * 2, this.radius * 2);
340
+
341
+ p.push();
342
+ p.translate(this.pos.x, this.pos.y);
343
+
344
+ if (rotationMode === 'locked') {
345
+ let angleToEarth = p.atan2(this.center.y - this.pos.y, this.center.x - this.pos.x);
346
+ p.rotate(angleToEarth);
347
+ } else if (rotationMode === 'fast') {
348
+ p.rotate(this.selfRotationAngle);
349
+ }
350
+
351
+ p.fill(0, 0, 50);
352
+ p.noStroke();
353
+ p.arc(0, 0, this.size, this.size, 90, 270);
354
+
355
+ p.fill(0, 0, 85);
356
+ p.arc(0, 0, this.size, this.size, -90, 90);
357
+
358
+ p.stroke(0, 100, 100);
359
+ p.strokeWeight(3);
360
+ p.line(0, -this.size * 0.5, 0, this.size * 0.5);
361
+
362
+ p.pop();
363
+ }
364
+ }
365
+ };
366
+
367
+ new p5(sketch);
368
+ });
369
+ </script>
370
+ </body>
371
  </html>