Hugging Face's logo

Spaces:
funkybeast
/
cheese-moon
Running

App Files Community
funkybeast commited on
Commit
779e0e3
·
verified ·
1 Parent(s): abdc64b

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +541 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cheese Moon
3
- emoji: 📈
4
- colorFrom: red
5
- colorTo: green
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: cheese-moon
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,541 @@
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>Cheese Moon Calculator</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --cheese-yellow: #f9d56e;
11
+ --cheese-orange: #e47c5d;
12
+ --space-blue: #0c1445;
13
+ --moon-gray: #d9d9d9;
14
+ }
15
+
16
+ * {
17
+ margin: 0;
18
+ padding: 0;
19
+ box-sizing: border-box;
20
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
21
+ }
22
+
23
+ body {
24
+ background-color: var(--space-blue);
25
+ color: white;
26
+ min-height: 100vh;
27
+ display: flex;
28
+ flex-direction: column;
29
+ align-items: center;
30
+ padding: 2rem;
31
+ background-image: radial-gradient(circle, #1a237e 0%, #0c1445 100%);
32
+ position: relative;
33
+ overflow-x: hidden;
34
+ }
35
+
36
+ body::before {
37
+ content: '';
38
+ position: fixed;
39
+ top: 0;
40
+ left: 0;
41
+ width: 100%;
42
+ height: 100%;
43
+ background-image:
44
+ radial-gradient(circle, white 1px, transparent 1px),
45
+ radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px);
46
+ background-size: 30px 30px, 60px 60px;
47
+ z-index: -1;
48
+ animation: twinkle 15s linear infinite;
49
+ }
50
+
51
+ @keyframes twinkle {
52
+ 0% { opacity: 0.2; }
53
+ 50% { opacity: 0.8; }
54
+ 100% { opacity: 0.2; }
55
+ }
56
+
57
+ header {
58
+ text-align: center;
59
+ margin-bottom: 2rem;
60
+ position: relative;
61
+ z-index: 2;
62
+ }
63
+
64
+ h1 {
65
+ font-size: 2.5rem;
66
+ margin-bottom: 0.5rem;
67
+ background: linear-gradient(90deg, var(--cheese-yellow), var(--cheese-orange));
68
+ -webkit-background-clip: text;
69
+ background-clip: text;
70
+ color: transparent;
71
+ text-shadow: 0 0 10px rgba(248, 212, 120, 0.3);
72
+ }
73
+
74
+ .tagline {
75
+ font-style: italic;
76
+ opacity: 0.8;
77
+ margin-bottom: 1rem;
78
+ font-size: 1.1rem;
79
+ }
80
+
81
+ .content-container {
82
+ display: flex;
83
+ flex-direction: column;
84
+ align-items: center;
85
+ width: 100%;
86
+ max-width: 1200px;
87
+ gap: 2rem;
88
+ }
89
+
90
+ .visual-display {
91
+ position: relative;
92
+ width: 300px;
93
+ height: 300px;
94
+ margin: 1rem auto;
95
+ }
96
+
97
+ .moon {
98
+ position: absolute;
99
+ width: 100%;
100
+ height: 100%;
101
+ border-radius: 50%;
102
+ background-color: var(--moon-gray);
103
+ box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
104
+ overflow: hidden;
105
+ transition: all 1s ease;
106
+ }
107
+
108
+ .moon-cheese {
109
+ position: absolute;
110
+ width: 100%;
111
+ height: 100%;
112
+ border-radius: 50%;
113
+ background-color: var(--cheese-yellow);
114
+ opacity: 0;
115
+ transition: all 1s ease;
116
+ background-image:
117
+ radial-gradient(circle, var(--cheese-orange) 10%, transparent 10%),
118
+ radial-gradient(circle, var(--cheese-orange) 10%, transparent 10%);
119
+ background-size: 50px 50px;
120
+ background-position: 0 0, 25px 25px;
121
+ }
122
+
123
+ .cheese-hole {
124
+ position: absolute;
125
+ border-radius: 50%;
126
+ background-color: transparent;
127
+ border: 2px dashed var(--cheese-orange);
128
+ animation: float 4s infinite ease-in-out;
129
+ }
130
+
131
+ @keyframes float {
132
+ 0%, 100% { transform: translateY(0); }
133
+ 50% { transform: translateY(-10px); }
134
+ }
135
+
136
+ .calculator {
137
+ background: rgba(255, 255, 255, 0.1);
138
+ backdrop-filter: blur(10px);
139
+ border-radius: 15px;
140
+ padding: 2rem;
141
+ width: 100%;
142
+ max-width: 600px;
143
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
144
+ border: 1px solid rgba(255, 255, 255, 0.1);
145
+ transition: transform 0.3s ease;
146
+ }
147
+
148
+ .calculator:hover {
149
+ transform: translateY(-5px);
150
+ }
151
+
152
+ .input-group {
153
+ margin-bottom: 1.5rem;
154
+ }
155
+
156
+ label {
157
+ display: block;
158
+ margin-bottom: 0.5rem;
159
+ font-weight: 500;
160
+ color: var(--cheese-yellow);
161
+ }
162
+
163
+ select, input {
164
+ width: 100%;
165
+ padding: 0.8rem;
166
+ border-radius: 8px;
167
+ border: none;
168
+ background: rgba(255, 255, 255, 0.9);
169
+ font-size: 1rem;
170
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
171
+ }
172
+
173
+ button {
174
+ background: linear-gradient(45deg, var(--cheese-yellow), var(--cheese-orange));
175
+ color: var(--space-blue);
176
+ border: none;
177
+ padding: 1rem 2rem;
178
+ border-radius: 8px;
179
+ font-size: 1rem;
180
+ font-weight: bold;
181
+ cursor: pointer;
182
+ width: 100%;
183
+ margin-top: 1rem;
184
+ transition: all 0.3s ease;
185
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
186
+ text-transform: uppercase;
187
+ letter-spacing: 1px;
188
+ }
189
+
190
+ button:hover {
191
+ transform: translateY(-2px);
192
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
193
+ filter: brightness(1.1);
194
+ }
195
+
196
+ .result {
197
+ margin-top: 2rem;
198
+ padding: 1.5rem;
199
+ background: rgba(0, 0, 0, 0.3);
200
+ border-radius: 10px;
201
+ border-left: 4px solid var(--cheese-yellow);
202
+ animation: fadeIn 0.5s ease-in-out;
203
+ display: none;
204
+ }
205
+
206
+ @keyframes fadeIn {
207
+ from { opacity: 0; transform: translateY(10px); }
208
+ to { opacity: 1; transform: translateY(0); }
209
+ }
210
+
211
+ .result h3 {
212
+ color: var(--cheese-yellow);
213
+ margin-bottom: 1rem;
214
+ display: flex;
215
+ align-items: center;
216
+ gap: 0.5rem;
217
+ }
218
+
219
+ .result-value {
220
+ font-size: 1.5rem;
221
+ font-weight: bold;
222
+ margin: 0.5rem 0;
223
+ color: white;
224
+ }
225
+
226
+ .comparison {
227
+ margin-top: 1rem;
228
+ font-style: italic;
229
+ opacity: 0.8;
230
+ }
231
+
232
+ .facts {
233
+ margin-top: 3rem;
234
+ width: 100%;
235
+ max-width: 800px;
236
+ background: rgba(255, 255, 255, 0.1);
237
+ backdrop-filter: blur(10px);
238
+ border-radius: 15px;
239
+ padding: 2rem;
240
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
241
+ }
242
+
243
+ .facts h2 {
244
+ color: var(--cheese-yellow);
245
+ margin-bottom: 1rem;
246
+ text-align: center;
247
+ }
248
+
249
+ .fact-list {
250
+ list-style-type: none;
251
+ }
252
+
253
+ .fact-item {
254
+ padding: 1rem 0;
255
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
256
+ display: flex;
257
+ align-items: flex-start;
258
+ gap: 1rem;
259
+ }
260
+
261
+ .fact-item:last-child {
262
+ border-bottom: none;
263
+ }
264
+
265
+ .fact-icon {
266
+ color: var(--cheese-orange);
267
+ font-size: 1.2rem;
268
+ margin-top: 0.2rem;
269
+ }
270
+
271
+ footer {
272
+ margin-top: 3rem;
273
+ text-align: center;
274
+ opacity: 0.7;
275
+ font-size: 0.9rem;
276
+ }
277
+
278
+ /* Animation classes */
279
+ .show-cheese {
280
+ opacity: 1;
281
+ transform: scale(1.05);
282
+ }
283
+
284
+ .hide-moon {
285
+ opacity: 0;
286
+ transform: scale(0.9);
287
+ }
288
+
289
+ .generate-holes {
290
+ animation: holeGen 2s forwards;
291
+ pointer-events: none;
292
+ }
293
+
294
+ @keyframes holeGen {
295
+ to {
296
+ opacity: 1;
297
+ transform: scale(1.5) rotate(360deg);
298
+ }
299
+ }
300
+
301
+ /* Responsive design */
302
+ @media (min-width: 768px) {
303
+ .content-container {
304
+ flex-direction: row;
305
+ align-items: flex-start;
306
+ justify-content: center;
307
+ }
308
+
309
+ .visual-display {
310
+ width: 350px;
311
+ height: 350px;
312
+ }
313
+
314
+ h1 {
315
+ font-size: 3rem;
316
+ }
317
+ }
318
+
319
+ @media (min-width: 1024px) {
320
+ .visual-display {
321
+ width: 400px;
322
+ height: 400px;
323
+ }
324
+ }
325
+ </style>
326
+ </head>
327
+ <body>
328
+ <header>
329
+ <h1>Cheese Moon Calculator</h1>
330
+ <p class="tagline">Discover what would happen if the moon was made of Swiss cheese!</p>
331
+ </header>
332
+
333
+ <div class="content-container">
334
+ <div class="visual-display">
335
+ <div class="moon"></div>
336
+ <div class="moon-cheese"></div>
337
+ <!-- Cheese holes will be added by JS -->
338
+ </div>
339
+
340
+ <div class="calculator">
341
+ <div class="input-group">
342
+ <label for="cheese-type"><i class="fas fa-cheese"></i> Type of Swiss Cheese</label>
343
+ <select id="cheese-type">
344
+ <option value="young">Young Swiss Cheese (density: 0.93 g/cm³)</option>
345
+ <option value="aged" selected>Aged Swiss Cheese (density: 0.95 g/cm³)</option>
346
+ <option value="extra-aged">Extra Aged Swiss Cheese (density: 0.97 g/cm³)</option>
347
+ <option value="holey">Very Holey Swiss Cheese (density: 0.90 g/cm³)</option>
348
+ </select>
349
+ </div>
350
+
351
+ <div class="input-group">
352
+ <label for="hole-percentage"><i class="fas fa-circle"></i> Percentage of Holes in Cheese</label>
353
+ <input type="range" id="hole-percentage" min="1" max="30" value="15" step="1">
354
+ <span id="hole-value">15%</span>
355
+ </div>
356
+
357
+ <button id="calculate-btn"><i class="fas fa-calculator"></i> Calculate Cheese Moon Mass</button>
358
+
359
+ <div class="result" id="result">
360
+ <h3><i class="fas fa-moon"></i> Cheese Moon Results</h3>
361
+ <p>The mass of the moon if made with Swiss cheese would be approximately:</p>
362
+ <div class="result-value" id="cheese-mass">--</div>
363
+ <p class="comparison" id="comparison">
364
+ That's about <span id="percentage">--</span> of the real moon's mass!
365
+ </p>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="facts">
371
+ <h2><i class="fas fa-info-circle"></i> Fun Facts About This Calculation</h2>
372
+ <ul class="fact-list">
373
+ <li class="fact-item">
374
+ <div class="fact-icon"><i class="fas fa-weight"></i></div>
375
+ <div>
376
+ <strong>Real Moon Mass:</strong> The actual moon has a mass of about 7.342×10²² kg, which is roughly 1.2% of Earth's mass.
377
+ </div>
378
+ </li>
379
+ <li class="fact-item">
380
+ <div class="fact-icon"><i class="fas fa-cheese"></i></div>
381
+ <div>
382
+ <strong>Swiss Cheese Density:</strong> The average density of Swiss cheese is about 0.95 g/cm³, compared to the moon's 3.34 g/cm³. That's why it would be much lighter!
383
+ </div>
384
+ </li>
385
+ <li class="fact-item">
386
+ <div class="fact-icon"><i class="fas fa-percentage"></i></div>
387
+ <div>
388
+ <strong>Hole Impact:</strong> The holes in Swiss cheese typically account for 10-20% of its volume. This affects the overall mass when scaled up to moon size.
389
+ </div>
390
+ </li>
391
+ <li class="fact-item">
392
+ <div class="fact-icon"><i class="fas fa-globe-europe"></i></div>
393
+ <div>
394
+ <strong>Tidal Effects:</strong> A cheese moon would have much weaker gravitational pull due to its lower mass, causing smaller ocean tides on Earth (only about 1/3 of current tides).
395
+ </div>
396
+ </li>
397
+ </ul>
398
+ </div>
399
+
400
+ <footer>
401
+ <p>Made with <i class="fas fa-heart" style="color: #e47c5d;"></i> by Cheese Moon Enthusiasts | Scientific data approximated for educational purposes</p>
402
+ </footer>
403
+
404
+ <script>
405
+ document.addEventListener('DOMContentLoaded', function() {
406
+ // Constants
407
+ const REAL_MOON_MASS = 7.342e22; // kg
408
+ const REAL_MOON_VOLUME = 2.1968e19; // m³
409
+ const CHEESE_DENSITY = {
410
+ 'young': 930, // kg/m³
411
+ 'aged': 950,
412
+ 'extra-aged': 970,
413
+ 'holey': 900
414
+ };
415
+
416
+ // DOM elements
417
+ const holePercentageSlider = document.getElementById('hole-percentage');
418
+ const holeValueDisplay = document.getElementById('hole-value');
419
+ const cheeseTypeSelect = document.getElementById('cheese-type');
420
+ const calculateBtn = document.getElementById('calculate-btn');
421
+ const resultDiv = document.getElementById('result');
422
+ const cheeseMassDisplay = document.getElementById('cheese-mass');
423
+ const comparisonDisplay = document.getElementById('comparison');
424
+ const percentageDisplay = document.getElementById('percentage');
425
+ const moon = document.querySelector('.moon');
426
+ const moonCheese = document.querySelector('.moon-cheese');
427
+ const visualDisplay = document.querySelector('.visual-display');
428
+
429
+ // Update hole percentage display
430
+ holePercentageSlider.addEventListener('input', function() {
431
+ holeValueDisplay.textContent = `${this.value}%`;
432
+ // Trigger visual update
433
+ updateCheeseHoles(parseInt(this.value));
434
+ });
435
+
436
+ // Calculate button click handler
437
+ calculateBtn.addEventListener('click', function() {
438
+ calculateCheeseMoonMass();
439
+ });
440
+
441
+ // Cheese type change handler
442
+ cheeseTypeSelect.addEventListener('change', function() {
443
+ // Update visuals when cheese type changes
444
+ setTimeout(() => {
445
+ updateCheeseHoles(parseInt(holePercentageSlider.value));
446
+ }, 300);
447
+ });
448
+
449
+ // Function to calculate cheese moon mass
450
+ function calculateCheeseMoonMass() {
451
+ const cheeseType = cheeseTypeSelect.value;
452
+ const holePercentage = parseInt(holePercentageSlider.value);
453
+
454
+ // Calculate effective density (accounting for holes)
455
+ const baseDensity = CHEESE_DENSITY[cheeseType];
456
+ const effectiveDensity = baseDensity * (1 - holePercentage/100);
457
+
458
+ // Calculate mass (mass = density × volume)
459
+ const cheeseMoonMass = REAL_MOON_VOLUME * effectiveDensity;
460
+
461
+ // Format the mass for display
462
+ const formattedMass = formatMass(cheeseMoonMass);
463
+
464
+ // Calculate percentage of real moon mass
465
+ const percentage = (cheeseMoonMass / REAL_MOON_MASS * 100).toFixed(2);
466
+
467
+ // Update the display
468
+ cheeseMassDisplay.textContent = formattedMass;
469
+ percentageDisplay.textContent = `${percentage}%`;
470
+
471
+ // Show the result with animation
472
+ resultDiv.style.display = 'block';
473
+ resultDiv.style.animation = 'none';
474
+ void resultDiv.offsetWidth; // Trigger reflow
475
+ resultDiv.style.animation = 'fadeIn 0.5s ease-in-out';
476
+
477
+ // Animate the moon transformation
478
+ animateMoonTransformation();
479
+ }
480
+
481
+ // Format mass for display
482
+ function formatMass(massKg) {
483
+ if (massKg >= 1e21) {
484
+ return (massKg / 1e21).toFixed(2) + ' × 10²¹ kg';
485
+ }
486
+ return massKg.toExponential(2) + ' kg';
487
+ }
488
+
489
+ // Animate the moon transformation
490
+ function animateMoonTransformation() {
491
+ // Hide regular moon
492
+ moon.classList.add('hide-moon');
493
+
494
+ // Show cheese moon
495
+ setTimeout(() => {
496
+ moonCheese.classList.add('show-cheese');
497
+ }, 300);
498
+
499
+ // Generate cheese holes
500
+ updateCheeseHoles(parseInt(holePercentageSlider.value));
501
+ }
502
+
503
+ // Update cheese holes visualization
504
+ function updateCheeseHoles(percentage) {
505
+ // Clear existing holes
506
+ const existingHoles = document.querySelectorAll('.cheese-hole');
507
+ existingHoles.forEach(hole => hole.remove());
508
+
509
+ const holeCount = Math.floor(percentage * 2); // More holes for higher percentage
510
+
511
+ for (let i = 0; i < holeCount; i++) {
512
+ const hole = document.createElement('div');
513
+ hole.className = 'cheese-hole';
514
+
515
+ // Random size (3-8% of moon diameter)
516
+ const size = Math.random() * 5 + 3;
517
+ hole.style.width = `${size}%`;
518
+ hole.style.height = `${size}%`;
519
+
520
+ // Random position
521
+ const angle = Math.random() * 2 * Math.PI;
522
+ const distance = Math.random() * 40 + 5; // 5-45% from center
523
+ const x = 50 + distance * Math.cos(angle) - size/2;
524
+ const y = 50 + distance * Math.sin(angle) - size/2;
525
+
526
+ hole.style.left = `${x}%`;
527
+ hole.style.top = `${y}%`;
528
+
529
+ // Random animation delay
530
+ hole.style.animationDelay = `${Math.random() * 2}s`;
531
+
532
+ visualDisplay.appendChild(hole);
533
+ }
534
+ }
535
+
536
+ // Initialize with some holes
537
+ updateCheeseHoles(parseInt(holePercentageSlider.value));
538
+ });
539
+ </script>
540
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
541
+ </html>