fix: load stylesheets and images relative to the Pages subpath

README.md

@@ -4,3 +4,5 @@
 
 - [viguessr](https://github.com/luuvanduc1999/viguessr)
 - [geoguessr](https://github.com/bensizelove/geoguessr)
+
+Hosted on [GitHub Pages](https://tiennm99.github.io/vigeoguessr/).

game.html

@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>VIGEOGUESSR - Play Now</title>
     <link href="https://fonts.googleapis.com/css2?family=Jersey+15:wght@400&display=swap" rel="stylesheet" />
-    <link href='../assets/css/game.css' rel="stylesheet" />
+    <link href='assets/css/game.css' rel="stylesheet" />
 
-    <script src="/assets/js/game.js" type="text/javascript"></script>
+    <script src="assets/js/game.js" type="text/javascript"></script>
 
         <!-- Leaflet for maps -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
@@ -47,7 +47,7 @@
                     </div>
                     <div class="header-right">
                         <div class="connect-wallet" onclick="showDonateModal()">
-                            <div style="width: 20px; height: 20px; background-image: url('../assets/images/wallet.svg'); background-size: contain;"></div>
+                            <div style="width: 20px; height: 20px; background-image: url('assets/images/wallet.svg'); background-size: contain;"></div>
                             <span class="wallet-text">BUY ME COFFEE</span>
                         </div>
                     </div>
@@ -57,7 +57,7 @@
                 <div class="game-section">
                     <div class="score-header">
                         <button class="back-btn" onclick="goBack()">
-                            <div class="diamond-icon" style="background-image: url('../assets/images/back.svg');"></div>
+                            <div class="diamond-icon" style="background-image: url('assets/images/back.svg');"></div>
                         </button>
                     </div>
                     <div class="game-content">

index.html

@@ -4,23 +4,44 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>VIGEOGUESSR - Play Now</title>
-    <link href="https://fonts.googleapis.com/css2?family=Jersey+15:wght@400&display=swap" rel="stylesheet" />
+    <link
-    <link href='../assets/css/index.css' rel="stylesheet" />
+      href="https://fonts.googleapis.com/css2?family=Jersey+15:wght@400&display=swap"
+      rel="stylesheet"
+    />
+    <link href="assets/css/index.css" rel="stylesheet" />
     <link rel="icon" type="image/png" href="logo.png" />
     <!-- SEO Meta Tags -->
-    <meta name="description" content="VIGEOGUESSR - Play a fun city guessing game. Choose your city and guess the location of the picture as accurately as possible!" />
+    <meta
-    <meta name="keywords" content="GeoGuessr, city guessing game, Vietnam, Hanoi, Ho Chi Minh, Hai Phong, Nam Dinh..., play online" />
+      name="description"
+      content="VIGEOGUESSR - Play a fun city guessing game. Choose your city and guess the location of the picture as accurately as possible!"
+    />
+    <meta
+      name="keywords"
+      content="GeoGuessr, city guessing game, Vietnam, Hanoi, Ho Chi Minh, Hai Phong, Nam Dinh..., play online"
+    />
     <meta name="author" content="Duc Luu Van" />
     <meta property="og:title" content="VIGEOGUESSR - Play Now" />
-    <meta property="og:description" content="Choose your city and guess the location of the picture. Play VIGEOGUESSR now!" />
+    <meta
-    <meta property="og:image" content="https://vigeoguessr.miti99.com/assets/images/thumbx.png" />
+      property="og:description"
+      content="Choose your city and guess the location of the picture. Play VIGEOGUESSR now!"
+    />
+    <meta
+      property="og:image"
+      content="https://vigeoguessr.miti99.com/assets/images/thumbx.png"
+    />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://vigeoguessr.miti99.com/" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="VIGEOGUESSR - Play Now" />
-    <meta name="twitter:description" content="Choose your city and guess the location of the picture. Play VIGEOGUESSR now!" />
+    <meta
+      name="twitter:description"
+      content="Choose your city and guess the location of the picture. Play VIGEOGUESSR now!"
+    />
     <meta name="twitter:image" content="logo.png" />
-  <script type="module" src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Fcsapplic8243back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.6"></script>
+    <script
+      type="module"
+      src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Fcsapplic8243back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.6"
+    ></script>
   </head>
   <body>
     <div class="main-container">
@@ -29,18 +50,26 @@
       <div class="content-wrapper">
         <div class="gradient-overlay">
           <header class="header">
-
             <div class="header-center">
-                        <div class="logo-icon" style="background-image: url('logo.png');"></div>
+              <div
+                class="logo-icon"
+                style="background-image: url('logo.png')"
+              ></div>
               <h3 class="logo-title">VIGEOGUESSR</h3>
             </div>
             <div class="header-right">
               <div class="connect-wallet" onclick="showDonateModal()">
-                            <div style="width: 20px; height: 20px; background-image: url('../assets/images/wallet.svg'); background-size: contain;"></div>
+                <div
+                  style="
+                    width: 20px;
+                    height: 20px;
+                    background-image: url('assets/images/wallet.svg');
+                    background-size: contain;
+                  "
+                ></div>
                 <span class="wallet-text">BUY ME COFFEE</span>
               </div>
             </div>
-
           </header>
 
           <div class="game-section">
@@ -50,11 +79,31 @@
 
             <div class="play-section">
               <div class="play-title-row">
-                            <div class="diamond-icon" style="background-image: url('../assets/images/img_objects.png');"></div>
+                <div
-                            <div class="diamond-icon" style="background-image: url('../assets/images/img_objects.png');"></div>
+                  class="diamond-icon"
+                  style="
+                    background-image: url('assets/images/img_objects.png');
+                  "
+                ></div>
+                <div
+                  class="diamond-icon"
+                  style="
+                    background-image: url('assets/images/img_objects.png');
+                  "
+                ></div>
                 <h1 class="play-title">PLAY NOW</h1>
-                            <div class="diamond-icon" style="background-image: url('../assets/images/img_objects.png');"></div>
+                <div
-                            <div class="diamond-icon" style="background-image: url('../assets/images/img_objects.png');"></div>
+                  class="diamond-icon"
+                  style="
+                    background-image: url('assets/images/img_objects.png');
+                  "
+                ></div>
+                <div
+                  class="diamond-icon"
+                  style="
+                    background-image: url('assets/images/img_objects.png');
+                  "
+                ></div>
               </div>
             </div>
 
@@ -64,12 +113,14 @@
 
                 <div class="instruction-list">
                   <p class="instruction">1. Choose your city</p>
-                                <p class="instruction">2. Guess the location of the picture as accurately as possible</p>
+                  <p class="instruction">
+                    2. Guess the location of the picture as accurately as
+                    possible
+                  </p>
                 </div>
               </div>
 
               <div class="right-panel">
-                           
                 <button class="bridge-btn" onclick="startGame('HN')">
                   <div class="bridge-text">HA NOI</div>
                 </button>
@@ -88,36 +139,32 @@
                 <button class="bridge-btn" onclick="startGame('DHLA')">
                   <div class="bridge-text">DUC HOA</div>
                 </button>
-
               </div>
             </div>
           </div>
         </div>
       </div>
-        
-        
-
     </div>
 
     <script>
       function startGame(location) {
         // Redirect to the game page
-            window.location.href = 'game.html?location=' + location;
+        window.location.href = "game.html?location=" + location;
         // You can also add any additional logic here, like initializing the game state
       }
 
       function bridgeToL2() {
-            alert('Bridging to Layer 2...');
+        alert("Bridging to Layer 2...");
         // Bridge functionality would go here
       }
 
       function navigate(page) {
-            console.log('Navigating to:', page);
+        console.log("Navigating to:", page);
         // Navigation logic would go here
       }
 
       function openSocial(platform) {
-            console.log('Opening social platform:', platform);
+        console.log("Opening social platform:", platform);
         // Social media links would go here
       }
 
@@ -126,7 +173,6 @@
 
         // Show the modal
         modal.style.display = "block";
-
       }
 
       function closeDonate() {
@@ -137,37 +183,36 @@
       }
 
       // Add interactive hover effects
-        document.addEventListener('DOMContentLoaded', function() {
+      document.addEventListener("DOMContentLoaded", function () {
-            const buttons = document.querySelectorAll('button, .connect-wallet');
+        const buttons = document.querySelectorAll("button, .connect-wallet");
 
-            buttons.forEach(button => {
+        buttons.forEach((button) => {
-                button.addEventListener('mouseenter', function() {
+          button.addEventListener("mouseenter", function () {
-                    this.style.transform = 'scale(1.05)';
+            this.style.transform = "scale(1.05)";
           });
 
-                button.addEventListener('mouseleave', function() {
+          button.addEventListener("mouseleave", function () {
-                    this.style.transform = 'scale(1)';
+            this.style.transform = "scale(1)";
           });
 
-                button.addEventListener('mousedown', function() {
+          button.addEventListener("mousedown", function () {
-                    this.style.transform = 'scale(0.95)';
+            this.style.transform = "scale(0.95)";
           });
 
-                button.addEventListener('mouseup', function() {
+          button.addEventListener("mouseup", function () {
-                    this.style.transform = 'scale(1.05)';
+            this.style.transform = "scale(1.05)";
           });
         });
-                      
-
-
       });
     </script>
 
     <div id="donateModal" class="modal">
       <div class="modal-donate">
-            <div class='score-text'>DONATE HERE</div>
+        <div class="score-text">DONATE HERE</div>
-            <img class ='qr' src="QR.png" style="width:320px; height:auto;"/>
+        <img class="qr" src="QR.png" style="width: 320px; height: auto" />
-            <button onclick="closeDonate()" class='next-btn'><div class="next-text">CLOSE</div></button>
+        <button onclick="closeDonate()" class="next-btn">
+          <div class="next-text">CLOSE</div>
+        </button>
       </div>
     </div>
   </body>