Hugging Face's logo

Spaces:
broadfield-dev
/
solar_sys
Running

App Files Community
broadfield-dev commited on
Commit
f79888b
·
verified ·
1 Parent(s): 68d26bb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +100 -19
index.html CHANGED
@@ -1,19 +1,100 @@
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>Solar System with NEOs</title>
7
+ <style>
8
+ body { margin: 0; padding: 0; background-color: #000; overflow: hidden; }
9
+ canvas { display: block; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <canvas id="solarSystemCanvas"></canvas>
14
+
15
+ <script>
16
+ // Setup canvas
17
+ const canvas = document.getElementById('solarSystemCanvas');
18
+ const ctx = canvas.getContext('2d');
19
+ canvas.width = 800;
20
+ canvas.height = 600;
21
+
22
+ // Sun at the center
23
+ const sun = {
24
+ x: canvas.width / 2,
25
+ y: canvas.height / 2,
26
+ radius: 20,
27
+ color: '#ffcc00'
28
+ };
29
+
30
+ // Planets data (simplified)
31
+ const planets = [
32
+ { name: 'Mercury', distance: 50, radius: 3, color: '#999999', speed: 0.01 },
33
+ { name: 'Venus', distance: 70, radius: 5, color: '#ff9933', speed: 0.008 },
34
+ { name: 'Earth', distance: 100, radius: 6, color: '#0066ff', speed: 0.006 },
35
+ { name: 'Mars', distance: 150, radius: 4, color: '#ff3300', speed: 0.004 },
36
+ { name: 'Jupiter', distance: 220, radius: 12, color: '#ff9933', speed: 0.002 },
37
+ { name: 'Saturn', distance: 280, radius: 10, color: '#ffcc66', speed: 0.0015 },
38
+ { name: 'Uranus', distance: 320, radius: 8, color: '#00ccff', speed: 0.001 },
39
+ { name: 'Neptune', distance: 360, radius: 8, color: '#0066ff', speed: 0.0008 }
40
+ ];
41
+
42
+ // NEOs data (fictional and simplified)
43
+ const neos = [
44
+ { name: 'NEO1', distance: 110, radius: 1, color: '#cccccc', speed: 0.0055 },
45
+ { name: 'NEO2', distance: 105, radius: 1, color: '#cccccc', speed: 0.0057 },
46
+ { name: 'NEO3', distance: 120, radius: 1, color: '#cccccc', speed: 0.0059 },
47
+ { name: 'NEO4', distance: 95, radius: 1, color: '#cccccc', speed: 0.0061 },
48
+ { name: 'NEO5', distance: 115, radius: 1, color: '#cccccc', speed: 0.0063 },
49
+ { name: 'NEO6', distance: 100, radius: 1, color: '#cccccc', speed: 0.0065 },
50
+ { name: 'NEO7', distance: 90, radius: 1, color: '#cccccc', speed: 0.0067 },
51
+ { name: 'NEO8', distance: 125, radius: 1, color: '#cccccc', speed: 0.0069 },
52
+ { name: 'NEO9', distance: 130, radius: 1, color: '#cccccc', speed: 0.0071 },
53
+ { name: 'NEO10', distance: 135, radius: 1, color: '#cccccc', speed: 0.0073 }
54
+ ];
55
+
56
+ let time = 0;
57
+
58
+ function draw() {
59
+ // Clear canvas
60
+ ctx.fillStyle = 'black';
61
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
62
+
63
+ // Draw Sun
64
+ ctx.beginPath();
65
+ ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
66
+ ctx.fillStyle = sun.color;
67
+ ctx.fill();
68
+
69
+ // Draw Planets
70
+ planets.forEach(planet => {
71
+ const angle = time * planet.speed;
72
+ const x = sun.x + Math.cos(angle) * planet.distance;
73
+ const y = sun.y + Math.sin(angle) * planet.distance;
74
+
75
+ ctx.beginPath();
76
+ ctx.arc(x, y, planet.radius, 0, Math.PI * 2);
77
+ ctx.fillStyle = planet.color;
78
+ ctx.fill();
79
+ });
80
+
81
+ // Draw NEOs
82
+ neos.forEach(neo => {
83
+ const angle = time * neo.speed;
84
+ const x = sun.x + Math.cos(angle) * neo.distance;
85
+ const y = sun.y + Math.sin(angle) * neo.distance;
86
+
87
+ ctx.beginPath();
88
+ ctx.arc(x, y, neo.radius, 0, Math.PI * 2);
89
+ ctx.fillStyle = neo.color;
90
+ ctx.fill();
91
+ });
92
+
93
+ time += 0.05;
94
+ requestAnimationFrame(draw);
95
+ }
96
+
97
+ draw();
98
+ </script>
99
+ </body>
100
+ </html>