Content commit

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2024-04-14 10:50:34 +01:00
parent f59d24d4ae
commit 318637019e
87 changed files with 2835 additions and 92 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Simple Solar System</title>
+  <style>
+    body {
+      margin: 0;
+    }
+
+    canvas {
+      display: block;
+    }
+
+    img {
+      border-radius: 10px;
+      width: 100%;
+    }
+
+    .control-item {
+      margin-bottom: 5px;
+      color: #fff;
+      background-color: #222;
+      border: none;
+      outline: none;
+    }
+
+    #controls {
+      background-color: #222;
+      padding: 10px;
+      border-radius: 5px;
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      z-index: 100;
+      font-family: Arial, sans-serif;
+      font-size: 14px;
+    }
+
+    #speedControls {
+      display: flex;
+      padding: 5px;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    #infoWindow {
+      display: none;
+      position: fixed;
+      overflow: scroll;
+      top: 10px;
+      bottom: 10px;
+      right: 10px;
+      width: 300px;
+      height: auto;
+      max-width: 100%;
+      background-color: #222;
+      border-radius: 5px;
+      color: #fff;
+      padding: 10px;
+      z-index: 100;
+      font-family: Arial, sans-serif;
+      font-size: 14px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="controls">
+    <div id="speedControls">
+      <label for="speedSlider" class="control-item">Simulation Speed:</label>
+      <input type="range" id="speedSlider" class="control-item" min="0" max="100" step="0.1" value="1" />
+      <span id="speedValue" class="control-item">1x</span>
+    </div>
+    <select id="dropdown" class="control-item">
+      <option value="">Select an object to focus on</option>
+    </select>
+  </div>
+  <audio id="backgroundMusic" preload="auto" playsinline></audio>
+  <script type="module" src="js/main.js"></script>
+  <div id="infoWindow">
+    <h1 id="infoTitle">Title</h1>
+    <p id="infoContent">Content</p>
+    <button onclick="document.getElementById('infoWindow').style.display='none'">
+      Close
+    </button>
+  </div>
+</body>
+
+</html>