RandomGame/index.html at main · javascript3jo/RandomGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RandomGame</title>

    <!-- CSS -->
    <link rel="stylesheet" href="CSS/main.css" />

    <!-- JS -->
    <!-- <script type="module" src="JS/validate.js" defer></script> -->
    <script type="module" src="JS/app.js" defer></script>
    <!-- linear icons -->
    <link
      rel="stylesheet"
      href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"
    />
  </head>
  <link rel="icon" href="CSS/img/icons8-brain-16.png" />
  <body>
    <div id="container">
      <section class="board">
        <header class="menu">
          <div class="header-nav">
            <div class="menu-nav-turn">
              <p>
                <span class="lnr lnr-chevron-right"></span>
                <span class="game-turn">PC</span>
              </p>
            </div>

            <div class="menu-nav-point" id="timerGame">제한 시간</div>
            <a href="page1.html" class="menu-nav-home">
              <span class="lnr lnr-home"></span
            ></a>
          </div>
        </header>

        <div class="game">
          <div class="start-layout show">
            <div id="start" class="end">
              <span id="timer">3</span>
              <div>
                잠시 후 랜덤으로 보여지는 박스를 외운 후 순서대로 클릭하시면
                됩니다.
              </div>
            </div>
          </div>
          <div class="box-wrapper">
            <div class="box" data-id="0"></div>
            <div class="box" data-id="1"></div>
            <div class="box" data-id="2"></div>
            <div class="box" data-id="3"></div>
            <div class="box" data-id="4"></div>
            <div class="box" data-id="5"></div>
            <div class="box" data-id="6"></div>
            <div class="box" data-id="7"></div>
            <div class="box" data-id="8"></div>
          </div>
          <div class="stage-clear"></div>
        </div>

        <div class="modal-layout">
          <div class="modal-content">
            <div class="modal-main">
              <h1 class="modal-title">게임 종료!</h1>
              <span class="modal-output-iq">
                최종 점수 :
                <strong id="modal-score" class="get-point">0</strong>
              </span>
              <p class="modal-text">입력 순서가 틀렸어요!!</p>
            </div>
            <div class="modal-button">
              <button class="modal-restart-button btn">
                <span>재시작</span>
              </button>
              <button class="modal-close-button btn"><span>닫기</span></button>
            </div>
          </div>
        </div>
        <div class="stage-layout">
          <div class="stage-content">
            <div class="stage-main">
              <h1 class="stage-title">스테이지 클리어!</h1>
              <span class="stage-output-box">
                다음 출력될 박스의 개수 <strong>4</strong>
              </span>
              <p class="stage-timer">3 초 후 게임이 자동 시작됩니다.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>