Metro2033JsGame/Lucas-Crm/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Metro 2033</title>
  </head>
  <body>
    <h1 class="ofg">Metro 2033</h1>

    <section id="desc" class="ofg">
      <h2 class="ofg">Description</h2>
      <p>
        Welcome to our post-apocalyptic station management game. In this game, you will have to manage an underground station, housing survivors of a world devastated by an unknown disaster. Your goal is to ensure the survival of your community by managing resources, exploring dangerous tunnels in search of supplies and reinforcements, building and improving buildings to strengthen your station, and facing various crises that threaten the safety of your inhabitants.
      </p>
    </section>

    <section id="rules" class="ofg">
      <h2 class="ofg">Rules</h2>
      <ol>
        <li>Manage your resources: food, fuel, and money.</li>
        <li>
          Explore the tunnels and the surface to discover new resources and dangers.
        </li>
        <li>
          Build and upgrade buildings to produce resources and protect your station.
        </li>
        <li>
          Manage crises: monster attacks, power outages, diseases, etc.
        </li>
        <li>
          Survive as long as possible in this post-apocalyptic world!
        </li>
      </ol>
    </section>
<br>
<hr>
    <div id="game" class="game">
        <!-- liste des ressource actuel -->
        <h2>Jour n°<span id="daysInfo"></span></h2>
        <div class="main-nav">
        <ul>
          <li>Money : <span id="moneyInfo"></span></li>
          <li>Food : <span id="foodInfo"></span></li>
          <li>Water : <span id="waterInfo"></span></li>
          <li>Wood : <span id="woodInfo"></span></li>
          <li>Rock : <span id="rockInfo"></span></li>
          <li>Metal : <span id="metalInfo"></span></li>
          <li>Resident : <span id="residentInfo"></span></li>
          <li>Fuel : <span id="fuelInfo"></span></li>
          <li>Action restante : <span id="actionRemaining"></span></li>
        </ul>
        
        <div class="btnAction">
          <div class="cardBtnBuildFarm">
            <button id="btnBuildFarm">build a farm</button>
            <p>resources needed for creation:<span></span></p>
          </div>
          <div class="cardBtnBuildMine">
            <button id="btnBuildMine">build a mine</button>
            <p>resources needed for creation:<span></span></p>
          </div>
          <div class="cardBtnBuildShelter">
            <button id="btnBuildShelter">build a residence</button>
            <p>resources needed for creation:<span></span></p>
          </div>
          <div class="cardBtnBuildMine">
            <button id="openModalBtn">Merchant</button>
          </div>
        </div>
        <div class="nextDay">
          <button id="btnNextDay">Next Day</button>
        </div>
      </div>
        

      <!-- card pour les batiment -->
      <div id="mainDivCards" class="container"></div>

<!-- Bouton pour ouvrir le modal -->
<!-- Modal -->
<div id="myModal" class="modal">
  <!-- Contenu du modal -->
  <div class="modal-content">
  <span class="close">&times;</span>
  <h4 id="modalMarchandName"></h4>
  <div id="itemJs">

  </div>
    <!-- <div id="marketItem" class="item">
      <h5>Nom de l'Article 1</h5>
      <p>Description de l'Article 1</p>
      <button class="buyBtn">Acheter</button>
    </div> -->
  </div>
</div>


    </div>
    <div>
      <!-- le jeu sera la  -->
    </div>
    <script src="script.js"></script>
  </body>
</html>