index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./dist/main.css" />
    <script src="./dist/main.js"></script>
    <link rel="icon" type="image/x-icon" href="icons8-bank-safe-96.png" />
    <a href="https://github.com/Almoe099/Detonator-Dash"
      ><img id="git" src="icons8-github-128.png"
    /></a>
    <a href="https://www.linkedin.com/in/almutasim-mohamed-17464b2b2/"
      ><img id="linkedIn" src="icons8-linkedin-128.png"
    /></a>
    <title>DETONATOR DASH</title>
  </head>

  <body>
    <div class="h1Container">
    <h1>DETONATOR DASH</h1>
  </div>
    <div class="container">
      <div id="score"></div>
      <div id="vaultCount"></div>
      <div id="lifeCount"></div>
    </div>
    
    <div id="boardContainer">
      <div id="board"></div>
    </div>
    <div id="buttonContainer">
      <button id="open">Introductions</button>
      <button id="resetGame"></button>
    </div>
    <div class="modalContainer" id="modalContainer">
      <div class="modal">
        <h2>Denotator Dash: Explosive Grid Adventure</h2>
        <p>
          Welcome to Denotator Dash, a thrilling grid-based game where you collect coins, unlock vaults, and avoid bombs to achieve the highest score. 
          Navigate through a grid filled with coins, keys, and power-ups. 
          Click strategically to reveal tiles and earn points. Look out for diamonds near keys, worth $25 each, and keys themselves, worth $50. 
          Blue tiles hint at nearby keys, while red tiles warn of bombs. As you progress, face larger grids and more challenges.
           Discover hidden power-ups to enhance your gameplay. Challenge yourself through levels of increasing difficulty, keeping track of lives and score. 
           To play, click the screen to reveal hidden tiles and aim for a high score!
        </p>
        

        <button id="close">Close Introductions</button>
      </div>
    </div>
    <div id="gameOverModal" class="gameOver">
      <div class="results">
        <span class="exit" id="closeModal">&times;</span>
        <p id="context"></p>
      </div>
    </div>
  </body>
</html>