memory-match-game/index.html at master · Coding-Christian/memory-match-game · 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
<!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" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="assets/script.js"></script>
    <link rel="stylesheet" href="assets/style.css" />
    <link rel="icon" href="./assets/images/favicon.png">
    <title>JoJo's Bizarre Memory Match!</title>
  </head>
  <body>
    <header class="title flex-center">
      <h1>JoJo's Bizarre Memory Matching Game</h1>
    </header>
    <div class="game-content">
      <aside class="stats-area flex-center">
        <h2 class="stat-head flex-center">Session Statstics</h2>
        <hr>
        <div class="stat-container">
          <h3 class="stat flex-center" title="Total number of games palyed this session">Games Played:</h3>
          <div id="gamesPlayed" class="stat flex-center"></div>
        </div>
        <hr>
        <div class="stat-container">
          <h3 class="stat flex-center" title="Total number of matches attempted this game">Match Attempts:</h3>
          <div id="matchAttempts" class="stat flex-center"></div>
        </div>
        <hr>
        <div class="stat-container">
          <h3 class="stat flex-center" title="Percentage of total match attempts that were successful">Accuracy:</h3>
          <div id="accuracy" class="stat flex-center"></div>
        </div>
        </aside>
      <main class="game-area flex-center"></main>
      <div class="gameover-modal hidden flex-center">
        <h1 class="congratulations">
          Yare yare daze. The Joestar bloodline lives on thanks to your efforts!
        </h1>
        <div class="reset-button flex-center" title="Resets cards, matches and accuracy">Play Again</div>
      </div>
      <div class="start-modal flex-center">
        <h2 class="rules">Help the Stardust Crusaders join forces to defeat DIO.
          Match two of the same character to clear those cards.
          Match all cards to win. Who's soul will you wager next, JoJo?
        </h2>
        <div class="start-button flex-center" title="Play">Play</div>
      </div>
    </div>
    <div class="controls">
      <div class="readability-button" title="Change between the custom font and a basic sans-serif font"></div>
      <div class="mute-button" title="mute and unmute audio"></div>
    </div>

  </body>
</html>