git » sparkle-arcade » master » tree

[master] / fairy-finder / index.html 

 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Fairy Finder</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&family=Nunito:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css" />
  <script src="game.js" defer></script>
</head>
<body>
  <div class="sparkle-background" aria-hidden="true">✨ 🌈 ⭐ 💜 🧚 ✨</div>
  <main class="wrapper">
    <header class="hero">
      <div>
        <h1>Fairy Finder</h1>
        <p class="tagline">Viviana, can you find every magical fairy in the garden? 🧚</p>
      </div>
      <div class="controls">
        <div class="stat">Fairies hiding: <span id="remaining">0</span> 🧚</div>
        <div class="stat">Flags used: <span id="flags">0</span> ✨</div>
        <div class="stat">Time: <span id="timer">00:00</span> ⏱️</div>
        <label class="difficulty">
          Level
          <select id="difficulty">
            <option value="tiny">Pixie Patch</option>
            <option value="easy">Easy Garden</option>
            <option value="bright">Starry Clearing</option>
          </select>
        </label>
        <button class="btn" id="restart">New Game</button>
      </div>
    </header>

    <section class="main-area">
      <div class="board" id="board" aria-label="Fairy Finder board" role="grid"></div>
      <aside class="instructions">
        <h2>How to play</h2>
        <p>Fairies are hiding in the garden! Tap a square to peek. Numbers show how many fairies are next door. Mark fairy spots with a flag using right-click or a long press.</p>
        <div class="collection" aria-live="polite">
          <div class="collection-header">
            <h3>Fairy satchel</h3>
            <span class="collection-count"><span id="collection-count">0</span> friends</span>
          </div>
          <p id="collection-empty" class="collection-empty">Win a round to invite the fairies you find.</p>
          <div class="collection-list" id="collection-list" role="list"></div>
        </div>
      </aside>
    </section>
  </main>

  <div class="overlay" id="overlay">
    <div class="overlay-card">
      <h2>Fairy Finder</h2>
      <p>Search gently for shy fairies. Reveal every safe patch to win!</p>
      <button class="btn btn-lg" id="overlay-btn">Play</button>
    </div>
  </div>
</body>
</html>