git » sparkle-arcade » master » tree

[master] / crystal-cloud-carousel / 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Crystal Cloud Carousel</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="sky-charms" aria-hidden="true">🌈 ✨ ☁️ 💜 ⭐ 💖</div>
  <main class="wrap">
    <header class="top">
      <div>
        <h1>Crystal Cloud Carousel</h1>
        <p class="tag">Tap sparkles in time to keep Viviana’s carousel twirling through the clouds!</p>
      </div>
      <div class="stats">
        <div>Score: <span id="score">0</span> ✨</div>
        <div>Combo: <span id="combo">0</span> 💖</div>
        <div>Time: <span id="time">45</span>s ⏱️</div>
        <button class="btn" id="new-game">New Song</button>
      </div>
    </header>

    <section class="stage">
      <div class="lanes" id="lanes" aria-label="Music lanes">
        <div class="lane" data-index="0"><span class="label">1</span></div>
        <div class="lane" data-index="1"><span class="label">2</span></div>
        <div class="lane" data-index="2"><span class="label">3</span></div>
        <div class="lane" data-index="3"><span class="label">4</span></div>
        <div class="target-line" aria-hidden="true"></div>
      </div>
      <div class="hit-buttons" id="hit-buttons">
        <button data-index="0">💗</button>
        <button data-index="1">💜</button>
        <button data-index="2">💙</button>
        <button data-index="3">💖</button>
      </div>
    </section>

    <aside class="instructions">
      <h2>How to play</h2>
      <p>Notes glide down the sky lanes. Tap the matching button when a note touches the sparkle line. Keep the beat to build your combo and spin the carousel faster!</p>
      <p>Use the number keys 1-4 or click the heart buttons. Try to finish the 45-second song with a dazzling score.</p>
    </aside>
  </main>

  <div class="overlay" id="overlay">
    <div class="card">
      <h2>Crystal Cloud Carousel</h2>
      <p>Ready to ride? Tap the sparkles with the beat to earn stars for Viviana’s sky pony.</p>
      <button class="btn btn-lg" id="start">Play Song</button>
    </div>
  </div>
</body>
</html>