InteractiveSolarSystem-3js/index.html at main · tanmaydev56/InteractiveSolarSystem-3js · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive Solar System</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
       /* Custom animations */
  @keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
  }
  .animate-twinkle {
    animation: twinkle 3s infinite ease-in-out;
  }

  /* Smooth fade out */
  .fade-out {
    opacity: 0;
  }
      body {
        margin: 0;
        overflow: hidden;
        font-family: 'Space Mono', monospace;
      }
      canvas {
        display: block;
      }
      #solarCanvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }
    </style>
</head>
<body>
   <!-- Loading Screen -->
<div id="loadingScreen" class="fixed inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-gray-900 to-indigo-900 z-50 transition-opacity duration-500">
  <!-- Animated loader -->
  <div class="relative mb-6">
    <!-- Outer ring -->
    <div class="w-24 h-24 border-4 border-indigo-400 border-t-transparent rounded-full animate-spin"></div>
    <!-- Inner planet -->
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded-full shadow-lg shadow-yellow-400/50"></div>
  </div>

  <!-- Loading text with animation -->
  <div class="text-center">
    <h2 class="text-2xl md:text-3xl font-['Orbitron'] font-bold text-yellow-300 mb-2 animate-pulse">
      Initializing Cosmic Explorer
    </h2>
    <div class="text-indigo-200 font-mono text-sm md:text-base flex justify-center space-x-1">
      <span class="animate-bounce" style="animation-delay: 0.1s">.</span>
      <span class="animate-bounce" style="animation-delay: 0.2s">.</span>
      <span class="animate-bounce" style="animation-delay: 0.3s">.</span>
    </div>
  </div>

  <!-- Subtle starfield effect -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-1/4 left-1/4 w-1 h-1 bg-white rounded-full animate-twinkle" style="animation-delay: 0.5s"></div>
    <div class="absolute top-1/3 right-1/5 w-1 h-1 bg-white rounded-full animate-twinkle" style="animation-delay: 1s"></div>
    <div class="absolute bottom-1/4 left-2/5 w-1 h-1 bg-white rounded-full animate-twinkle" style="animation-delay: 1.5s"></div>
    <div class="absolute bottom-1/3 right-1/4 w-1 h-1 bg-white rounded-full animate-twinkle" style="animation-delay: 0.8s"></div>
  </div>
</div>
    <!-- Planet Information Panel -->
    <div id="planetInfo" class="hidden fixed md:absolute top-4 md:top-auto bottom-0 md:bottom-4 right-0 md:right-4 z-50 w-full md:w-80 mx-2 md:mx-0 mb-2 md:mb-0 mt-4 md:mt-0 p-4 md:p-5 rounded-t-xl md:rounded-xl backdrop-blur-md bg-gradient-to-br from-slate-900/90 to-indigo-900/80 border border-indigo-400/20 shadow-2xl shadow-indigo-500/10">
      <div class="flex justify-between items-start mb-3 md:mb-4">
        <h2 id="planetName" class="text-xl md:text-2xl font-bold font-mono text-yellow-300 tracking-wide"></h2>
        <div id="planetIcon" class="text-2xl md:text-3xl"></div>
      </div>

      <div id="planetDetails" class="text-white grid grid-cols-1 gap-2 text-sm mb-3 md:mb-4">
        <!-- Dynamic content will be inserted here -->
      </div>


      <div class="flex justify-end">
        <button id="closePlanetInfo" class="flex items-center gap-1 px-3 py-1 rounded-full bg-slate-800/70 hover:bg-slate-700/90 border border-slate-600 transition-all duration-200 hover:scale-105 hover:shadow-md hover:shadow-indigo-500/20 text-xs md:text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
          </svg>
          Close
        </button>
      </div>
    </div>
    <button id="toggleGravityBtn" class="fixed bottom-4 right-4 z-50 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded">
      Toggle Gravity Fields
    </button>
    <!-- <button id="toggleViewBtn" class="fixed bottom-4 left-4 z-50 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded">View Galaxy</button> -->

    <canvas id="solarCanvas"></canvas>

    <script type="module" src="/src/main.js"></script>
    <script>
      // This will be called from main.js when a planet is selected
      window.showPlanetInfo = function(planetData) {
        const infoPanel = document.getElementById('planetInfo');
        const planetName = document.getElementById('planetName');
        const planetIcon = document.getElementById('planetIcon');
        const planetDetails = document.getElementById('planetDetails');
        const planetFunFact = document.getElementById('planetFunFact');
        const featuresList = document.getElementById('featuresList');

        // Set planet name and icon
        planetName.textContent = planetData.name.toUpperCase();
        planetIcon.textContent = getPlanetIcon(planetData.name);

        // Create details HTML
        let detailsHTML = '';
        if (planetData.info.diameter) {
          detailsHTML += `
            <div class="flex justify-between border-b border-indigo-400/20 pb-2">
              <span class="text-indigo-300 font-medium">Diameter:</span>
              <span>${planetData.info.diameter}</span>
            </div>`;
        }
        if (planetData.info.mass) {
          detailsHTML += `
            <div class="flex justify-between border-b border-indigo-400/20 pb-2">
              <span class="text-indigo-300 font-medium">Mass:</span>
              <span>${planetData.info.mass}</span>
            </div>`;
        }
        if (planetData.info.distanceFromSun) {
          detailsHTML += `
            <div class="flex justify-between border-b border-indigo-400/20 pb-2">
              <span class="text-indigo-300 font-medium">Distance from Sun:</span>
              <span>${planetData.info.distanceFromSun}</span>
            </div>`;
        }
        if (planetData.info.orbitalPeriod) {
          detailsHTML += `
            <div class="flex justify-between border-b border-indigo-400/20 pb-2">
              <span class="text-indigo-300 font-medium">Orbital Period:</span>
              <span>${planetData.info.orbitalPeriod}</span>
            </div>`;
        }
        if (planetData.info.surfaceTemp) {
          detailsHTML += `
            <div class="flex justify-between border-b border-indigo-400/20 pb-2">
              <span class="text-indigo-300 font-medium">Surface Temperature:</span>
              <span>${planetData.info.surfaceTemp}</span>
            </div>`;
        }
        if (planetData.info.moons) {
          detailsHTML += `
            <div class="flex justify-between border-b border-indigo-400/20 pb-2">
              <span class="text-indigo-300 font-medium">Number of Moons:</span>
              <span>${planetData.info.moons}</span>
            </div>`;
        }

        planetDetails.innerHTML = detailsHTML;

        // Set fun fact
        planetFunFact.textContent = planetData.info.funFact || 'No fun fact available';

        // Set features
        featuresList.innerHTML = '';
        if (planetData.info.features) {
          const features = planetData.info.features.split(', ');
          features.forEach(feature => {
            const li = document.createElement('li');
            li.textContent = feature;
            featuresList.appendChild(li);
          });
        } else if (planetData.name === 'Jupiter') {
          // Special case for Jupiter
          featuresList.innerHTML = `
            <li>Great Red Spot (giant storm)</li>
            <li>Strong magnetic field</li>
            <li>318 times Earth's mass</li>
          `;
        }

        // Show the panel
        infoPanel.classList.remove('hidden');
      };

      // Helper function to get planet emoji
      function getPlanetIcon(planetName) {
        const icons = {
          mercury: '🪐',
          venus: '♀️',
          earth: '🌍',
          mars: '♂️',
          jupiter: '🪐',
          saturn: '🪐',
          uranus: '⛢',
          neptune: '♆'
        };
        return icons[planetName.toLowerCase()] || '🪐';
      }

      // Close button functionality
      document.getElementById('closePlanetInfo').addEventListener('click', function() {
        document.getElementById('planetInfo').classList.add('hidden');
        // This function should be defined in your main.js
        if (window.hidePlanetInfo) {
          window.hidePlanetInfo();
        }
         // Remove loading screen when everything is loaded

      });
      window.addEventListener('load', () => {
    const loadingScreen = document.getElementById('loadingScreen');
    loadingScreen.classList.add('fade-out');
    setTimeout(() => {
      loadingScreen.remove();
    }, 500);
  });
    </script>
</body>
</html>