Hugging Face's logo

Spaces:
zaixx
/
cosmic-explorer
Running

App Files Community
zaixx commited on
Commit
3a074cf
·
verified ·
1 Parent(s): 082c329

create 2d solar system full implemented

Browse files
Files changed (6) hide show
  1. README.md +7 -4
  2. components/footer.js +13 -0
  3. components/navbar.js +13 -0
  4. index.html +257 -19
  5. script.js +433 -0
  6. style.css +23 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Cosmic Explorer
3
- emoji: 🐨
4
  colorFrom: blue
5
- colorTo: indigo
 
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: Cosmic Explorer 🪐
 
3
  colorFrom: blue
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ }
9
+ </style>
10
+ `;
11
+ }
12
+ }
13
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ }
9
+ </style>
10
+ `;
11
+ }
12
+ }
13
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,257 @@
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 Explorer - Interactive Solar System</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
14
+
15
+ * {
16
+ margin: 0;
17
+ padding: 0;
18
+ box-sizing: border-box;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Orbitron', monospace;
23
+ overflow: hidden;
24
+ background: #000;
25
+ }
26
+
27
+ #solarCanvas {
28
+ position: fixed;
29
+ top: 0;
30
+ left: 0;
31
+ z-index: 1;
32
+ }
33
+
34
+ .ui-overlay {
35
+ position: relative;
36
+ z-index: 10;
37
+ pointer-events: none;
38
+ }
39
+
40
+ .ui-overlay > * {
41
+ pointer-events: auto;
42
+ }
43
+
44
+ .glow-text {
45
+ text-shadow: 0 0 20px rgba(147, 51, 234, 0.5), 0 0 40px rgba(147, 51, 234, 0.3);
46
+ }
47
+
48
+ .glass-effect {
49
+ background: rgba(15, 23, 42, 0.7);
50
+ backdrop-filter: blur(10px);
51
+ border: 1px solid rgba(147, 51, 234, 0.3);
52
+ }
53
+
54
+ .planet-info {
55
+ animation: fadeIn 0.3s ease-in;
56
+ }
57
+
58
+ @keyframes fadeIn {
59
+ from { opacity: 0; transform: translateY(10px); }
60
+ to { opacity: 1; transform: translateY(0); }
61
+ }
62
+
63
+ .orbit-trail {
64
+ stroke: rgba(147, 51, 234, 0.2);
65
+ stroke-width: 1;
66
+ fill: none;
67
+ stroke-dasharray: 5, 5;
68
+ animation: rotate 60s linear infinite;
69
+ }
70
+
71
+ @keyframes rotate {
72
+ from { stroke-dashoffset: 0; }
73
+ to { stroke-dashoffset: 10; }
74
+ }
75
+
76
+ .star {
77
+ position: absolute;
78
+ background: white;
79
+ border-radius: 50%;
80
+ animation: twinkle 3s infinite;
81
+ }
82
+
83
+ @keyframes twinkle {
84
+ 0%, 100% { opacity: 0.3; }
85
+ 50% { opacity: 1; }
86
+ }
87
+
88
+ .control-button {
89
+ transition: all 0.3s ease;
90
+ }
91
+
92
+ .control-button:hover {
93
+ transform: scale(1.1);
94
+ box-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
95
+ }
96
+
97
+ .speed-indicator {
98
+ background: linear-gradient(90deg, #9333ea, #ec4899);
99
+ -webkit-background-clip: text;
100
+ -webkit-text-fill-color: transparent;
101
+ background-clip: text;
102
+ }
103
+ </style>
104
+ </head>
105
+ <body class="bg-slate-900 text-white">
106
+ <div id="vanta-bg"></div>
107
+ <canvas id="solarCanvas"></canvas>
108
+
109
+ <!-- Stars Background -->
110
+ <div id="starsContainer"></div>
111
+
112
+ <!-- UI Overlay -->
113
+ <div class="ui-overlay">
114
+ <!-- Header -->
115
+ <header class="glass-effect p-4 flex justify-between items-center">
116
+ <div class="flex items-center gap-4">
117
+ <h1 class="text-2xl font-bold glow-text">Cosmic Explorer 🪐</h1>
118
+ <div class="text-sm text-purple-300">
119
+ <span id="dateDisplay"></span>
120
+ </div>
121
+ </div>
122
+ <div class="flex gap-4">
123
+ <button id="fullscreenBtn" class="control-button glass-effect px-4 py-2 rounded-lg flex items-center gap-2">
124
+ <i data-feather="maximize" class="w-4 h-4"></i>
125
+ <span class="hidden sm:inline">Fullscreen</span>
126
+ </button>
127
+ <button id="infoBtn" class="control-button glass-effect px-4 py-2 rounded-lg flex items-center gap-2">
128
+ <i data-feather="info" class="w-4 h-4"></i>
129
+ <span class="hidden sm:inline">Info</span>
130
+ </button>
131
+ </div>
132
+ </header>
133
+
134
+ <!-- Planet Information Panel -->
135
+ <div id="planetInfo" class="planet-info fixed top-24 left-4 glass-effect p-6 rounded-xl max-w-sm hidden">
136
+ <button id="closeInfo" class="absolute top-2 right-2 text-gray-400 hover:text-white">
137
+ <i data-feather="x" class="w-5 h-5"></i>
138
+ </button>
139
+ <h2 id="planetName" class="text-xl font-bold mb-3"></h2>
140
+ <div class="space-y-2 text-sm">
141
+ <div class="flex justify-between">
142
+ <span class="text-gray-400">Type:</span>
143
+ <span id="planetType"></span>
144
+ </div>
145
+ <div class="flex justify-between">
146
+ <span class="text-gray-400">Distance from Sun:</span>
147
+ <span id="planetDistance"></span>
148
+ </div>
149
+ <div class="flex justify-between">
150
+ <span class="text-gray-400">Orbital Period:</span>
151
+ <span id="planetPeriod"></span>
152
+ </div>
153
+ <div class="flex justify-between">
154
+ <span class="text-gray-400">Diameter:</span>
155
+ <span id="planetDiameter"></span>
156
+ </div>
157
+ <div class="flex justify-between">
158
+ <span class="text-gray-400">Moons:</span>
159
+ <span id="planetMoons"></span>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Controls Panel -->
165
+ <div class="fixed bottom-4 left-4 glass-effect p-4 rounded-xl">
166
+ <div class="space-y-4">
167
+ <div class="flex items-center gap-4">
168
+ <label class="text-sm text-gray-300">Speed</label>
169
+ <input type="range" id="speedSlider" min="0" max="10" value="1" step="0.1" class="w-32">
170
+ <span id="speedValue" class="speed-indicator font-bold">1.0x</span>
171
+ </div>
172
+ <div class="flex items-center gap-4">
173
+ <label class="text-sm text-gray-300">Zoom</label>
174
+ <input type="range" id="zoomSlider" min="0.5" max="3" value="1" step="0.1" class="w-32">
175
+ <span id="zoomValue" class="text-purple-300 font-bold">1.0x</span>
176
+ </div>
177
+ <div class="flex gap-2">
178
+ <button id="pauseBtn" class="control-button bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex items-center gap-2">
179
+ <i data-feather="pause" class="w-4 h-4"></i>
180
+ <span>Pause</span>
181
+ </button>
182
+ <button id="resetBtn" class="control-button bg-slate-600 hover:bg-slate-700 px-4 py-2 rounded-lg flex items-center gap-2">
183
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
184
+ <span>Reset</span>
185
+ </button>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Legend -->
191
+ <div class="fixed bottom-4 right-4 glass-effect p-4 rounded-xl">
192
+ <h3 class="text-sm font-bold mb-2 text-purple-300">Planets</h3>
193
+ <div class="space-y-1 text-xs">
194
+ <div class="flex items-center gap-2">
195
+ <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
196
+ <span>Sun</span>
197
+ </div>
198
+ <div class="flex items-center gap-2">
199
+ <div class="w-2 h-2 rounded-full bg-gray-400"></div>
200
+ <span>Mercury</span>
201
+ </div>
202
+ <div class="flex items-center gap-2">
203
+ <div class="w-2 h-2 rounded-full bg-yellow-200"></div>
204
+ <span>Venus</span>
205
+ </div>
206
+ <div class="flex items-center gap-2">
207
+ <div class="w-2 h-2 rounded-full bg-blue-500"></div>
208
+ <span>Earth</span>
209
+ </div>
210
+ <div class="flex items-center gap-2">
211
+ <div class="w-2 h-2 rounded-full bg-red-500"></div>
212
+ <span>Mars</span>
213
+ </div>
214
+ <div class="flex items-center gap-2">
215
+ <div class="w-2 h-2 rounded-full bg-orange-400"></div>
216
+ <span>Jupiter</span>
217
+ </div>
218
+ <div class="flex items-center gap-2">
219
+ <div class="w-2 h-2 rounded-full bg-yellow-600"></div>
220
+ <span>Saturn</span>
221
+ </div>
222
+ <div class="flex items-center gap-2">
223
+ <div class="w-2 h-2 rounded-full bg-cyan-400"></div>
224
+ <span>Uranus</span>
225
+ </div>
226
+ <div class="flex items-center gap-2">
227
+ <div class="w-2 h-2 rounded-full bg-blue-700"></div>
228
+ <span>Neptune</span>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Stats Display -->
234
+ <div class="fixed top-24 right-4 glass-effect p-4 rounded-xl">
235
+ <h3 class="text-sm font-bold mb-2 text-purple-300">Statistics</h3>
236
+ <div class="space-y-1 text-xs">
237
+ <div class="flex justify-between gap-4">
238
+ <span class="text-gray-400">FPS:</span>
239
+ <span id="fpsDisplay">60</span>
240
+ </div>
241
+ <div class="flex justify-between gap-4">
242
+ <span class="text-gray-400">Days Elapsed:</span>
243
+ <span id="daysDisplay">0</span>
244
+ </div>
245
+ <div class="flex justify-between gap-4">
246
+ <span class="text-gray-400">Years Elapsed:</span>
247
+ <span id="yearsDisplay">0</span>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <script src="script.js"></script>
254
+ <script>feather.replace();</script>
255
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
256
+ </body>
257
+ </html>
script.js ADDED
@@ -0,0 +1,433 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Solar System Simulation
2
+ class SolarSystem {
3
+ constructor() {
4
+ this.canvas = document.getElementById('solarCanvas');
5
+ this.ctx = this.canvas.getContext('2d');
6
+ this.centerX = 0;
7
+ this.centerY = 0;
8
+ this.zoom = 1;
9
+ this.speed = 1;
10
+ this.isPaused = false;
11
+ this.time = 0;
12
+ this.fps = 60;
13
+ this.lastFrameTime = performance.now();
14
+ this.daysElapsed = 0;
15
+
16
+ this.planets = [
17
+ {
18
+ name: 'Mercury',
19
+ type: 'Terrestrial',
20
+ radius: 4,
21
+ distance: 60,
22
+ speed: 4.74,
23
+ color: '#9CA3AF',
24
+ info: {
25
+ diameter: '4,879 km',
26
+ moons: 0,
27
+ orbitalPeriod: '88 days'
28
+ }
29
+ },
30
+ {
31
+ name: 'Venus',
32
+ type: 'Terrestrial',
33
+ radius: 7,
34
+ distance: 85,
35
+ speed: 3.5,
36
+ color: '#FEF3C7',
37
+ info: {
38
+ diameter: '12,104 km',
39
+ moons: 0,
40
+ orbitalPeriod: '225 days'
41
+ }
42
+ },
43
+ {
44
+ name: 'Earth',
45
+ type: 'Terrestrial',
46
+ radius: 8,
47
+ distance: 110,
48
+ speed: 2.98,
49
+ color: '#3B82F6',
50
+ info: {
51
+ diameter: '12,742 km',
52
+ moons: 1,
53
+ orbitalPeriod: '365 days'
54
+ },
55
+ moons: [{
56
+ radius: 2,
57
+ distance: 15,
58
+ speed: 13,
59
+ color: '#E5E7EB'
60
+ }]
61
+ },
62
+ {
63
+ name: 'Mars',
64
+ type: 'Terrestrial',
65
+ radius: 5,
66
+ distance: 140,
67
+ speed: 2.41,
68
+ color: '#EF4444',
69
+ info: {
70
+ diameter: '6,779 km',
71
+ moons: 2,
72
+ orbitalPeriod: '687 days'
73
+ },
74
+ moons: [
75
+ {
76
+ radius: 1,
77
+ distance: 10,
78
+ speed: 20,
79
+ color: '#F3F4F6'
80
+ },
81
+ {
82
+ radius: 1,
83
+ distance: 14,
84
+ speed: 15,
85
+ color: '#D1D5DB'
86
+ }
87
+ ]
88
+ },
89
+ {
90
+ name: 'Jupiter',
91
+ type: 'Gas Giant',
92
+ radius: 20,
93
+ distance: 200,
94
+ speed: 1.31,
95
+ color: '#FB923C',
96
+ info: {
97
+ diameter: '139,820 km',
98
+ moons: 79,
99
+ orbitalPeriod: '12 years'
100
+ },
101
+ moons: [
102
+ {
103
+ radius: 2,
104
+ distance: 28,
105
+ speed: 18,
106
+ color: '#FCD34D'
107
+ },
108
+ {
109
+ radius: 2,
110
+ distance: 35,
111
+ speed: 14,
112
+ color: '#FDE68A'
113
+ }
114
+ ]
115
+ },
116
+ {
117
+ name: 'Saturn',
118
+ type: 'Gas Giant',
119
+ radius: 17,
120
+ distance: 260,
121
+ speed: 0.97,
122
+ color: '#F59E0B',
123
+ hasRings: true,
124
+ info: {
125
+ diameter: '116,460 km',
126
+ moons: 82,
127
+ orbitalPeriod: '29 years'
128
+ },
129
+ moons: [
130
+ {
131
+ radius: 3,
132
+ distance: 30,
133
+ speed: 16,
134
+ color: '#FBBF24'
135
+ }
136
+ ]
137
+ },
138
+ {
139
+ name: 'Uranus',
140
+ type: 'Ice Giant',
141
+ radius: 12,
142
+ distance: 320,
143
+ speed: 0.68,
144
+ color: '#06B6D4',
145
+ info: {
146
+ diameter: '50,724 km',
147
+ moons: 27,
148
+ orbitalPeriod: '84 years'
149
+ }
150
+ },
151
+ {
152
+ name: 'Neptune',
153
+ type: 'Ice Giant',
154
+ radius: 11,
155
+ distance: 370,
156
+ speed: 0.54,
157
+ color: '#1E40AF',
158
+ info: {
159
+ diameter: '49,244 km',
160
+ moons: 14,
161
+ orbitalPeriod: '165 years'
162
+ }
163
+ }
164
+ ];
165
+
166
+ this.init();
167
+ }
168
+
169
+ init() {
170
+ this.resize();
171
+ window.addEventListener('resize', () => this.resize());
172
+ this.setupEventListeners();
173
+ this.createStars();
174
+ this.animate();
175
+ this.updateDate();
176
+ setInterval(() => this.updateDate(), 1000);
177
+ }
178
+
179
+ resize() {
180
+ this.canvas.width = window.innerWidth;
181
+ this.canvas.height = window.innerHeight;
182
+ this.centerX = this.canvas.width / 2;
183
+ this.centerY = this.canvas.height / 2;
184
+ }
185
+
186
+ createStars() {
187
+ const starsContainer = document.getElementById('starsContainer');
188
+ for (let i = 0; i < 200; i++) {
189
+ const star = document.createElement('div');
190
+ star.className = 'star';
191
+ star.style.width = Math.random() * 3 + 'px';
192
+ star.style.height = star.style.width;
193
+ star.style.left = Math.random() * 100 + '%';
194
+ star.style.top = Math.random() * 100 + '%';
195
+ star.style.animationDelay = Math.random() * 3 + 's';
196
+ starsContainer.appendChild(star);
197
+ }
198
+ }
199
+
200
+ setupEventListeners() {
201
+ // Speed control
202
+ const speedSlider = document.getElementById('speedSlider');
203
+ speedSlider.addEventListener('input', (e) => {
204
+ this.speed = parseFloat(e.target.value);
205
+ document.getElementById('speedValue').textContent = this.speed.toFixed(1) + 'x';
206
+ });
207
+
208
+ // Zoom control
209
+ const zoomSlider = document.getElementById('zoomSlider');
210
+ zoomSlider.addEventListener('input', (e) => {
211
+ this.zoom = parseFloat(e.target.value);
212
+ document.getElementById('zoomValue').textContent = this.zoom.toFixed(1) + 'x';
213
+ });
214
+
215
+ // Pause button
216
+ const pauseBtn = document.getElementById('pauseBtn');
217
+ pauseBtn.addEventListener('click', () => {
218
+ this.isPaused = !this.isPaused;
219
+ pauseBtn.innerHTML = this.isPaused ?
220
+ '<i data-feather="play" class="w-4 h-4"></i><span>Play</span>' :
221
+ '<i data-feather="pause" class="w-4 h-4"></i><span>Pause</span>';
222
+ feather.replace();
223
+ });
224
+
225
+ // Reset button
226
+ document.getElementById('resetBtn').addEventListener('click', () => {
227
+ this.time = 0;
228
+ this.daysElapsed = 0;
229
+ this.zoom = 1;
230
+ this.speed = 1;
231
+ document.getElementById('zoomSlider').value = 1;
232
+ document.getElementById('speedSlider').value = 1;
233
+ document.getElementById('zoomValue').textContent = '1.0x';
234
+ document.getElementById('speedValue').textContent = '1.0x';
235
+ });
236
+
237
+ // Fullscreen button
238
+ document.getElementById('fullscreenBtn').addEventListener('click', () => {
239
+ if (!document.fullscreenElement) {
240
+ document.documentElement.requestFullscreen();
241
+ } else {
242
+ document.exitFullscreen();
243
+ }
244
+ });
245
+
246
+ // Info button
247
+ document.getElementById('infoBtn').addEventListener('click', () => {
248
+ const planetInfo = document.getElementById('planetInfo');
249
+ planetInfo.classList.toggle('hidden');
250
+ });
251
+
252
+ // Close info panel
253
+ document.getElementById('closeInfo').addEventListener('click', () => {
254
+ document.getElementById('planetInfo').classList.add('hidden');
255
+ });
256
+
257
+ // Canvas click for planet info
258
+ this.canvas.addEventListener('click', (e) => {
259
+ const rect = this.canvas.getBoundingClientRect();
260
+ const x = e.clientX - rect.left - this.centerX;
261
+ const y = e.clientY - rect.top - this.centerY;
262
+
263
+ for (const planet of this.planets) {
264
+ const angle = this.time * planet.speed * this.speed * 0.01;
265
+ const px = Math.cos(angle) * planet.distance * this.zoom;
266
+ const py = Math.sin(angle) * planet.distance * this.zoom;
267
+
268
+ const distance = Math.sqrt((x - px) ** 2 + (y - py) ** 2);
269
+ if (distance < planet.radius * this.zoom + 5) {
270
+ this.showPlanetInfo(planet);
271
+ break;
272
+ }
273
+ }
274
+ });
275
+ }
276
+
277
+ showPlanetInfo(planet) {
278
+ const info = document.getElementById('planetInfo');
279
+ info.classList.remove('hidden');
280
+ document.getElementById('planetName').textContent = planet.name;
281
+ document.getElementById('planetType').textContent = planet.type;
282
+ document.getElementById('planetDistance').textContent = planet.distance + ' AU';
283
+ document.getElementById('planetPeriod').textContent = planet.info.orbitalPeriod;
284
+ document.getElementById('planetDiameter').textContent = planet.info.diameter;
285
+ document.getElementById('planetMoons').textContent = planet.info.moons || 'None';
286
+ }
287
+
288
+ updateDate() {
289
+ const now = new Date();
290
+ document.getElementById('dateDisplay').textContent = now.toLocaleDateString('en-US', {
291
+ weekday: 'long',
292
+ year: 'numeric',
293
+ month: 'long',
294
+ day: 'numeric'
295
+ });
296
+ }
297
+
298
+ drawSun() {
299
+ // Sun glow
300
+ const gradient = this.ctx.createRadialGradient(this.centerX, this.centerY, 0, this.centerX, this.centerY, 40 * this.zoom);
301
+ gradient.addColorStop(0, '#FCD34D');
302
+ gradient.addColorStop(0.3, '#FBBF24');
303
+ gradient.addColorStop(0.6, '#F59E0B');
304
+ gradient.addColorStop(1, 'rgba(245, 158, 11, 0)');
305
+
306
+ this.ctx.fillStyle = gradient;
307
+ this.ctx.beginPath();
308
+ this.ctx.arc(this.centerX, this.centerY, 40 * this.zoom, 0, Math.PI * 2);
309
+ this.ctx.fill();
310
+
311
+ // Sun core
312
+ this.ctx.fillStyle = '#FEF3C7';
313
+ this.ctx.beginPath();
314
+ this.ctx.arc(this.centerX, this.centerY, 20 * this.zoom, 0, Math.PI * 2);
315
+ this.ctx.fill();
316
+ }
317
+
318
+ drawPlanet(planet) {
319
+ const angle = this.time * planet.speed * this.speed * 0.01;
320
+ const x = this.centerX + Math.cos(angle) * planet.distance * this.zoom;
321
+ const y = this.centerY + Math.sin(angle) * planet.distance * this.zoom;
322
+
323
+ // Draw orbit
324
+ this.ctx.strokeStyle = 'rgba(147, 51, 234, 0.2)';
325
+ this.ctx.lineWidth = 1;
326
+ this.ctx.setLineDash([5, 5]);
327
+ this.ctx.beginPath();
328
+ this.ctx.arc(this.centerX, this.centerY, planet.distance * this.zoom, 0, Math.PI * 2);
329
+ this.ctx.stroke();
330
+ this.ctx.setLineDash([]);
331
+
332
+ // Draw rings for Saturn
333
+ if (planet.hasRings) {
334
+ this.ctx.strokeStyle = 'rgba(245, 158, 11, 0.5)';
335
+ this.ctx.lineWidth = 3 * this.zoom;
336
+ this.ctx.beginPath();
337
+ this.ctx.ellipse(x, y, planet.radius * this.zoom * 2, planet.radius * this.zoom * 0.7, 0, 0, Math.PI * 2);
338
+ this.ctx.stroke();
339
+ }
340
+
341
+ // Draw planet
342
+ const planetGradient = this.ctx.createRadialGradient(x, y, 0, x, y, planet.radius * this.zoom);
343
+ planetGradient.addColorStop(0, planet.color);
344
+ planetGradient.addColorStop(1, this.adjustBrightness(planet.color, -30));
345
+
346
+ this.ctx.fillStyle = planetGradient;
347
+ this.ctx.beginPath();
348
+ this.ctx.arc(x, y, planet.radius * this.zoom, 0, Math.PI * 2);
349
+ this.ctx.fill();
350
+
351
+ // Draw moons
352
+ if (planet.moons) {
353
+ planet.moons.forEach(moon => {
354
+ const moonAngle = this.time * moon.speed * this.speed * 0.01;
355
+ const moonX = x + Math.cos(moonAngle) * moon.distance * this.zoom;
356
+ const moonY = y + Math.sin(moonAngle) * moon.distance * this.zoom;
357
+
358
+ this.ctx.fillStyle = moon.color;
359
+ this.ctx.beginPath();
360
+ this.ctx.arc(moonX, moonY, moon.radius * this.zoom, 0, Math.PI * 2);
361
+ this.ctx.fill();
362
+ });
363
+ }
364
+
365
+ // Draw planet name
366
+ this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
367
+ this.ctx.font = `${10 * this.zoom}px Orbitron`;
368
+ this.ctx.textAlign = 'center';
369
+ this.ctx.fillText(planet.name, x, y - planet.radius * this.zoom - 5);
370
+ }
371
+
372
+ adjustBrightness(color, amount) {
373
+ const num = parseInt(color.replace('#', ''), 16);
374
+ const r = Math.max(0, Math.min(255, (num >> 16) + amount));
375
+ const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00FF) + amount));
376
+ const b = Math.max(0, Math.min(255, (num & 0x0000FF) + amount));
377
+ return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
378
+ }
379
+
380
+ animate() {
381
+ // Clear canvas
382
+ this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
383
+ this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
384
+
385
+ // Draw sun
386
+ this.drawSun();
387
+
388
+ // Draw planets
389
+ this.planets.forEach(planet => this.drawPlanet(planet));
390
+
391
+ // Update time
392
+ if (!this.isPaused) {
393
+ this.time++;
394
+ this.daysElapsed += this.speed * 0.1;
395
+ }
396
+
397
+ // Update stats
398
+ this.updateStats();
399
+
400
+ // Calculate FPS
401
+ const now = performance.now();
402
+ const delta = now - this.lastFrameTime;
403
+ this.fps = Math.round(1000 / delta);
404
+ this.lastFrameTime = now;
405
+
406
+ requestAnimationFrame(() => this.animate());
407
+ }
408
+
409
+ updateStats() {
410
+ document.getElementById('fpsDisplay').textContent = this.fps;
411
+ document.getElementById('daysDisplay').textContent = Math.floor(this.daysElapsed);
412
+ document.getElementById('yearsDisplay').textContent = (this.daysElapsed / 365).toFixed(2);
413
+ }
414
+ }
415
+
416
+ // Initialize the solar system
417
+ document.addEventListener('DOMContentLoaded', () => {
418
+ new SolarSystem();
419
+
420
+ // Initialize Vanta.js background (optional, might interfere with performance)
421
+ // VANTA.GLOBE({
422
+ // el: "#vanta-bg",
423
+ // mouseControls: true,
424
+ // touchControls: true,
425
+ // gyroControls: false,
426
+ // minHeight: 200.00,
427
+ // minWidth: 200.00,
428
+ // scale: 1.00,
429
+ // scaleMobile: 1.00,
430
+ // color: 0x9333ea,
431
+ // backgroundColor: 0x0
432
+ // });
433
+ });
style.css CHANGED
@@ -1,28 +1,32 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom styles beyond Tailwind */
2
+ .orbitron {
3
+ font-family: 'Orbitron', monospace;
4
  }
5
 
6
+ .glass-effect {
7
+ background: rgba(15, 23, 42, 0.7);
8
+ backdrop-filter: blur(10px);
9
+ border: 1px solid rgba(147, 51, 234, 0.3);
10
  }
11
 
12
+ .planet-glow {
13
+ filter: drop-shadow(0 0 10px currentColor);
 
 
 
14
  }
15
 
16
+ /* Scrollbar styling */
17
+ ::-webkit-scrollbar {
18
+ width: 8px;
 
 
 
19
  }
20
 
21
+ ::-webkit-scrollbar-track {
22
+ background: rgba(15, 23, 42, 0.3);
23
  }
24
+
25
+ ::-webkit-scrollbar-thumb {
26
+ background: linear-gradient(135deg, #9333ea, #ec4899);
27
+ border-radius: 4px;
28
+ }
29
+
30
+ ::-webkit-scrollbar-thumb:hover {
31
+ background: linear-gradient(135deg, #a855f7, #f472b6);
32
+ }