index.html

<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <title>🏎️ 자동차 경주 게임</title>
    <script type="module" src="./build/index.js"></script>
    <link rel="stylesheet" href="./src/css/index.css" />
  </head>
  <body>
    <div id="app">
      <section class="d-flex justify-center mt-5">
        <form>
          <fieldset class="car-name-fieldset">
            <h1 class="text-center">🏎️ 자동차 경주 게임</h1>
            <p>
              5자 이하의 자동차 이름을 콤마로 구분하여 입력해주세요. <br />
              예시) EAST, WEST, SOUTH, NORTH
            </p>
            <div class="d-flex">
              <input
                type="text"
                class="w-100 mr-2"
                placeholder="자동차 이름"
                id="car_name_input"
              />
              <button type="button" class="btn btn-cyan" id="car_name_button">
                확인
              </button>
            </div>
          </fieldset>
          <fieldset class="game-count-fieldset">
            <p>시도할 횟수를 입력해주세요.</p>
            <div class="d-flex">
              <input
                type="number"
                class="w-100 mr-2"
                placeholder="시도 횟수"
                id="game_count_input"
              />
              <button type="button" class="btn btn-cyan" id="game_count_button">
                확인
              </button>
            </div>
          </fieldset>
        </form>
      </section>
      <section class="d-flex justify-center mt-5 racing-road-section">
        <div class="mt-4 d-flex" id="racing-road-container"></div>
      </section>
      <section class="d-flex justify-center mt-5 winner-section">
        <div>
          <h2 id="winner_label"></h2>
          <div class="d-flex justify-center">
            <button type="button" class="btn btn-cyan" id="reset_button">
              다시 시작하기
            </button>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>