Game/index.html at main · Sauravtimilsina/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
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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="BrightMinds Brain Gym mini-games." />
    <meta name="referrer" content="strict-origin-when-cross-origin" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests" />
    <title>BrightMinds Brain Gym</title>
    <link rel="icon" type="image/svg+xml" href="assets/logo.svg" />
    <link rel="apple-touch-icon" href="assets/logo.svg" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="games/ludo.css" />
  </head>
  <body>
    <div id="loading-screen" class="loading-screen" aria-label="Loading BrightMinds Brain Gym">
      <img src="assets/logo.svg" alt="BrightMinds Brain Gym" />
    </div>
    <main class="app-shell compact-shell">
      <header class="top-header">
        <div class="brand-lockup" aria-label="BrightMinds Brain Gym">
          <div class="logo-mark" aria-hidden="true"><img src="assets/logo.svg" alt="" /></div>
          <h1 id="app-title">BrightMinds Brain Gym</h1>
        </div>
      </header>

      <section class="control-bar" aria-label="Game setup">
        <label class="field">
          <span>Age</span>
          <select id="age-select">
            <option value="little">4-6</option>
            <option value="junior" selected>7-10</option>
            <option value="senior">11-16</option>
          </select>
        </label>
        <button id="audio-toggle" class="toggle-field audio-button" type="button" aria-pressed="false"><span class="audio-check">[ ]</span><span>Audio</span></button>
        <div id="audio-player" class="audio-player" aria-hidden="true"></div>
        <div class="stat-pill" aria-live="polite"><span>Stars</span><strong id="total-stars">0</strong></div>
      </section>

      <section class="game-tabs" aria-label="Choose a brain game">
        <button class="tab active" data-game="ludo" data-icon="LUDO">Ludo</button>
        <button class="tab" data-game="tugOfWar" data-icon="DIV">Tug of War</button>
        <button class="tab" data-game="memory" data-icon="M">Memory</button>
        <button class="tab" data-game="logic" data-icon="P">Pattern</button>
        <button class="tab" data-game="attention" data-icon="F">Focus</button>
        <button class="tab" data-game="math" data-icon="+">Numbers</button>
        <button class="tab" data-game="codeBreaker" data-icon="#">Code Breaker</button>
        <button class="tab" data-game="words" data-icon="W">Words</button>
        <button class="tab" data-game="science" data-icon="S">Science</button>
        <button class="tab" data-game="typing" data-icon="T">Typing</button>
        <button class="tab" data-game="colorCode" data-icon="C">Color Code</button>
        <button class="tab" data-game="storyOrder" data-icon="1">Story Order</button>
        <button class="tab" data-game="shapeLab" data-icon="DIA">Shape Lab</button>
        <button class="tab" data-game="treasurePath" data-icon="GO">Path Quest</button>
        <button class="tab" data-game="quickCount" data-icon="9">Quick Count</button>
        <button class="tab" data-game="xoGame" data-icon="XO">X O</button>
        <button class="tab" data-game="numberSort" data-icon="123">Number Sort</button>
        <button class="tab nepali" data-game="nepaliLetters" data-icon="क">क ख ग</button>
        <button class="tab nepali" data-game="nepaliWords" data-icon="ने">नेपाली शब्द</button>
        <button class="tab nepali" data-game="nepaliNumbers" data-icon="१">नेपाली अंक</button>
      </section>

      <section class="game-status" aria-label="Game progress">
        <article><span id="current-game-label">Memory</span><strong id="virtual-level">1 / 2400</strong></article>
        <article><span>Accuracy</span><strong id="accuracy-label">100%</strong></article>
      </section>

      <section class="progress-map" aria-label="Progress map"><div id="map-nodes" class="map-nodes"></div></section>

      <section class="game-stage" aria-live="polite">
        <div class="game-header">
          <div><p class="skill-label" id="skill-label">Memory</p><h2 id="game-title">Memory Match</h2></div>
          <div class="round-stats"><span id="moves-label">Moves: 0</span><span id="score-label">Score: 0</span><span id="streak-label">Streak: 0</span><span id="combo-label">Combo: x1</span></div>
        </div>
        <p class="game-instructions" id="game-instructions"></p>
        <div id="game-board" class="game-board"></div>
        <div class="actions"><button id="new-round" class="primary-button">New round</button><button id="hint-button" class="ghost-button">Hint</button></div>
        <p class="feedback" id="feedback"></p>
        <div class="reward-toast" id="reward-toast" role="status" aria-live="polite"></div>
      </section>
    </main>
    <script src="games/ludo.js"></script>
    <script src="script.js"></script>
  </body>
</html>