Upload 20 files

index.html

@@ -231,30 +231,34 @@
 
   <!-- Control Panel -->
   <div id="control-panel">
-    <h3>Controls</h3>
-    <div class="control-group">
-      <label for="speed-slider">Simulation Speed</label>
-      <input type="range" id="speed-slider" min="1" max="100" step="1" value="10">
-    </div>
-    <div class="control-group">
-      <label for="view-select">Point of View</label>
-      <select id="view-select">
-        <option value="sun">Sun (Center)</option>
-        <option value="mercury">Mercury</option>
-        <option value="venus">Venus</option>
-        <option value="earth">Earth</option>
-        <option value="mars">Mars</option>
-        <option value="jupiter">Jupiter</option>
-        <option value="saturn">Saturn</option>
-        <option value="uranus">Uranus</option>
-        <option value="neptune">Neptune</option>
-        <option value="pluto">Pluto</option>
-      </select>
-    </div>
-    <div class="control-group">
-      <button id="pause-button">Pause</button>
-      <button id="reset-button">Reset Camera</button>
-      <button id="distance-toggle">Realistic Distances</button>
+    <h3 onclick="toggleControls()" style="cursor: pointer; user-select: none;">
+      Controls <span id="toggle-icon">▼</span>
+    </h3>
+    <div id="controls-content" style="display: none;">
+      <div class="control-group">
+        <label for="speed-slider">Simulation Speed</label>
+        <input type="range" id="speed-slider" min="1" max="100" step="1" value="10">
+      </div>
+      <div class="control-group">
+        <label for="view-select">Point of View</label>
+        <select id="view-select">
+          <option value="sun">Sun (Center)</option>
+          <option value="mercury">Mercury</option>
+          <option value="venus">Venus</option>
+          <option value="earth">Earth</option>
+          <option value="mars">Mars</option>
+          <option value="jupiter">Jupiter</option>
+          <option value="saturn">Saturn</option>
+          <option value="uranus">Uranus</option>
+          <option value="neptune">Neptune</option>
+          <option value="pluto">Pluto</option>
+        </select>
+      </div>
+      <div class="control-group">
+        <button id="pause-button">Pause</button>
+        <button id="reset-button">Reset Camera</button>
+        <button id="distance-toggle">Realistic Distances</button>
+      </div>
     </div>
   </div>
 
@@ -280,6 +284,21 @@
     </div>
   </div>
 
+  <!-- Toggle Controls Script -->
+  <script>
+    function toggleControls() {
+      const content = document.getElementById('controls-content');
+      const icon = document.getElementById('toggle-icon');
+      if (content.style.display === 'none') {
+        content.style.display = 'block';
+        icon.textContent = '▲';
+      } else {
+        content.style.display = 'none';
+        icon.textContent = '▼';
+      }
+    }
+  </script>
+
   <!-- Main Application Script -->
 </body>
 </html>