vigeoguessr/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <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 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
      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
      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: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>
  </head>
  <body>
    <div class="main-container">
      <div class="background-layer"></div>

      <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>
              <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>
                <span class="wallet-text">BUY ME COFFEE</span>
              </div>
            </div>
          </header>

          <div class="game-section">
            <div class="score-header">
              <span class="score-text">WELCOME TO VIET NAM GUESSR GAME</span>
            </div>

            <div class="play-section">
              <div class="play-title-row">
                <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
                  class="diamond-icon"
                  style="
                    background-image: url('../assets/images/img_objects.png');
                  "
                ></div>
              </div>
            </div>

            <div class="game-content">
              <div class="pano">
                <h2 class="how-title">HOW 2 PLAY</h2>

                <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>
                </div>
              </div>

              <div class="right-panel">
                <button class="bridge-btn" onclick="startGame('HN')">
                  <div class="bridge-text">HA NOI</div>
                </button>
                <button class="bridge-btn" onclick="startGame('TPHCM')">
                  <div class="bridge-text">TP. HO CHI MINH</div>
                </button>
                <button class="bridge-btn" onclick="startGame('HP')">
                  <div class="bridge-text">HAI PHONG</div>
                </button>
                <button class="bridge-btn" onclick="startGame('ND')">
                  <div class="bridge-text">NAM DINH</div>
                </button>
                <button class="bridge-btn" onclick="startGame('DL')">
                  <div class="bridge-text">DALAT</div>
                </button>
                <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;
        // You can also add any additional logic here, like initializing the game state
      }

      function bridgeToL2() {
        alert("Bridging to Layer 2...");
        // Bridge functionality would go here
      }

      function navigate(page) {
        console.log("Navigating to:", page);
        // Navigation logic would go here
      }

      function openSocial(platform) {
        console.log("Opening social platform:", platform);
        // Social media links would go here
      }

      function showDonateModal() {
        const modal = document.getElementById("donateModal");

        // Show the modal
        modal.style.display = "block";
      }

      function closeDonate() {
        const modal = document.getElementById("donateModal");
        // Hide the modal
        modal.style.display = "none";
        // Optionally, you can reset the game or perform other actions
      }

      // Add interactive hover effects
      document.addEventListener("DOMContentLoaded", function () {
        const buttons = document.querySelectorAll("button, .connect-wallet");

        buttons.forEach((button) => {
          button.addEventListener("mouseenter", function () {
            this.style.transform = "scale(1.05)";
          });

          button.addEventListener("mouseleave", function () {
            this.style.transform = "scale(1)";
          });

          button.addEventListener("mousedown", function () {
            this.style.transform = "scale(0.95)";
          });

          button.addEventListener("mouseup", function () {
            this.style.transform = "scale(1.05)";
          });
        });
      });
    </script>

    <div id="donateModal" class="modal">
      <div class="modal-donate">
        <div class="score-text">DONATE HERE</div>
        <img class="qr" src="QR.png" style="width: 320px; height: auto" />
        <button onclick="closeDonate()" class="next-btn">
          <div class="next-text">CLOSE</div>
        </button>
      </div>
    </div>
  </body>
</html>