Update tube.html

SB-Designs · web-flow · commit 1534605accf8 · 2024-11-21T06:51:49.000Z
diff --git a/tube.html b/tube.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-<link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>London Underground | Trackle™</title>
-    <meta name="theme-color" content="#000f9f" /> <!-- Default theme color for light mode -->
     <link
-      rel="icon"
-      type="image/x-icon"
-      href="/logo.png"
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap"
+      rel="stylesheet"
     />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>London Underground | Trackle™</title>
+    <meta name="theme-color" content="#ee7c0e" />
+    <link rel="icon" type="image/x-icon" href="/logo.png" />
 
     <style>
       iframe {
@@ -28,24 +28,29 @@
     </style>
     <script>
       function updateThemeColor() {
-        const metaThemeColor = document.querySelector("meta[name='theme-color']");
-        const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const metaThemeColor = document.querySelector(
+          "meta[name='theme-color']"
+        );
+        const isDarkMode = window.matchMedia(
+          "(prefers-color-scheme: dark)"
+        ).matches;
 
         // Update the content based on the current theme
         if (isDarkMode) {
-          metaThemeColor.setAttribute("content", "#00004D"); // Dark blue for dark theme
+          metaThemeColor.setAttribute("content", "#BD4B00"); // Dark purple for dark theme
         } else {
-          metaThemeColor.setAttribute("content", "#000f9f"); // Light blue for light theme
+          metaThemeColor.setAttribute("content", "#ee7c0e"); // Original purple for light theme
         }
       }
 
       // Run the function to set the initial theme color
       updateThemeColor();
 
       // Listen for changes in theme preference
-      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateThemeColor);
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", updateThemeColor);
     </script>
-
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css"
@@ -68,49 +73,28 @@
   <body>
     <div class="game">
       <div class="header">
-        <div id="instructions">
-          <h1>Trackle™ - London Underground</h1>
-          <h2>How many Underground stations can you guess?</h2>
-        </div>
+        <a href="/home.html"><button class="backButton">Back</button></a>
+        <center><h1>London Underground</h1></center>
+        <button class="resetButton" onclick="app.resetGame()">Reset</button>
       </div>
 
       <div id="mapContainer">
         <div id="map"></div>
-        <div class="formContainer">
-          <div class="form">
-            <input id="guess" type="text" placeholder="Enter a station" />
-            <button class="enterButton" onclick="enterGuess()">Guess</button>
-            <button class="resetButton" onclick="app.resetGame()">
-              Reset Game
-            </button>
-            <button
-              class="websiteButton"
-              onclick="window.top.location.href='/home.html'"
-            >
-              Exit Game
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="pageOverlay">
-      <div id="scoreContainer">
-        Your score:
-        <strong><span id="score"></span> / <span id="total"></span></strong>
       </div>
-      <div class="credits">
-        <p>
-          ©️ SB Designs 2024:
 
-          <u>
-            <a
-              href="https://sbdesigns.pages.dev"
-              style="text-decoration: none; color: inherit"
-              >Website</a
-            >
-          </u>
-        </p>
+      <div class="formContainer">
+        <div class="form">
+          <input id="guess" type="text" placeholder="Enter a station" />
+        </div>
+        <br />
+        <div id="scoreContainer">
+          <strong><span id="score"></span> / <span id="total"></span></strong>
+        </div>
+        <a
+          href="https://github.com/SB-Designs/Trackle?tab=readme-ov-file#credits--licence"
+          style="text-decoration: none; color: inherit; outline: none"
+          >&#8505;</a
+        >
       </div>
     </div>
   </body>
