Keystra/index.html at main · anoopcodehack/Keystra · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>KeyWave Piano</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet"/>
</head>
<body>

  <div class="bg-grid"></div>
  <div class="glow-orb orb1"></div>
  <div class="glow-orb orb2"></div>

  <!-- ══ HEADER ══ -->
  <header>
    <div class="logo">KEY<span>WAVE</span></div>
    <div class="header-right">
      <button id="learn-toggle" class="learn-toggle-btn">🎓 LEARN MODE</button>
      <div class="meta">
        <span id="octave-display">OCT 4</span>
        <span id="volume-label">VOL <span id="vol-val">80</span>%</span>
      </div>
    </div>
  </header>

  <!-- ══ LEARN MODE PANEL ══ -->
  <div id="learn-panel" class="learn-panel hidden">

    <div class="learn-tabs">
      <button class="learn-tab active" data-mode="song">🎵 SONG</button>
      <button class="learn-tab" data-mode="free">📖 FREE LEARN</button>
      <button class="learn-tab" data-mode="quiz">❓ QUIZ</button>
    </div>

    <!-- ── SONG MODE ── -->
    <div class="learn-section" id="section-song">
      <div class="song-select-row">
        <select id="song-select">
          <option value="twinkle">⭐ Twinkle Twinkle</option>
          <option value="happy">🎂 Happy Birthday</option>
          <option value="ode">🎼 Ode To Joy</option>
          <option value="mary">🐑 Mary Had A Little Lamb</option>
          <option value="jingle">🔔 Jingle Bells</option>
        </select>
        <button id="song-start">▶ START</button>
        <button id="song-stop" class="danger">■ STOP</button>
        <button id="song-auto">🤖 AUTO PLAY</button>
      </div>

      <div class="note-scroll-area">
        <div id="note-queue" class="note-queue"></div>
      </div>

      <div class="press-hint">
        <div class="press-block">
          <div class="press-hint-label">PRESS NOW</div>
          <div id="hint-note" class="hint-note">—</div>
        </div>
        <div class="press-block">
          <div class="press-hint-label">KEYBOARD</div>
          <div id="hint-key" class="hint-key">—</div>
        </div>
        <div class="press-block">
          <div class="press-hint-label">FINGER</div>
          <div id="hint-finger" class="hint-finger">—</div>
        </div>
      </div>

      <div class="song-progress-row">
        <span id="song-step">Step 0</span>
        <div class="progress-bar"><div id="progress-fill" class="progress-fill"></div></div>
        <span id="song-total">/ 0</span>
      </div>
    </div>

    <!-- ── FREE LEARN MODE ── -->
    <div class="learn-section hidden" id="section-free">
      <div class="free-info">
        <div class="free-card">
          <div class="free-card-label">NOTE PLAYED</div>
          <div id="free-note" class="free-big">—</div>
        </div>
        <div class="free-card">
          <div class="free-card-label">KEYBOARD KEY</div>
          <div id="free-kbdkey" class="free-big accent2">—</div>
        </div>
        <div class="free-card">
          <div class="free-card-label">FINGER HINT</div>
          <div id="free-finger" class="free-big accent3">—</div>
        </div>
        <div class="free-card">
          <div class="free-card-label">FREQUENCY</div>
          <div id="free-freq" class="free-big" style="font-size:1.3rem">— Hz</div>
        </div>
      </div>
      <div class="note-reference">
        <div class="ref-title">QUICK REFERENCE — OCTAVE 4</div>
        <div class="ref-grid">
          <div class="ref-item"><span class="ref-note">C4</span><span class="ref-key">A</span><span class="ref-fgr">👆 Index</span></div>
          <div class="ref-item"><span class="ref-note">D4</span><span class="ref-key">S</span><span class="ref-fgr">👆 Middle</span></div>
          <div class="ref-item"><span class="ref-note">E4</span><span class="ref-key">D</span><span class="ref-fgr">👆 Ring</span></div>
          <div class="ref-item"><span class="ref-note">F4</span><span class="ref-key">F</span><span class="ref-fgr">👆 Pinky</span></div>
          <div class="ref-item"><span class="ref-note">G4</span><span class="ref-key">G</span><span class="ref-fgr">👆 Thumb</span></div>
          <div class="ref-item"><span class="ref-note">A4</span><span class="ref-key">H</span><span class="ref-fgr">👆 Index</span></div>
          <div class="ref-item"><span class="ref-note">B4</span><span class="ref-key">J</span><span class="ref-fgr">👆 Middle</span></div>
          <div class="ref-item black-ref"><span class="ref-note">C#4</span><span class="ref-key">W</span><span class="ref-fgr">☝️ Index</span></div>
          <div class="ref-item black-ref"><span class="ref-note">D#4</span><span class="ref-key">E</span><span class="ref-fgr">☝️ Middle</span></div>
          <div class="ref-item black-ref"><span class="ref-note">F#4</span><span class="ref-key">T</span><span class="ref-fgr">☝️ Ring</span></div>
          <div class="ref-item black-ref"><span class="ref-note">G#4</span><span class="ref-key">Y</span><span class="ref-fgr">☝️ Pinky</span></div>
          <div class="ref-item black-ref"><span class="ref-note">A#4</span><span class="ref-key">U</span><span class="ref-fgr">☝️ Index</span></div>
        </div>
      </div>
    </div>

    <!-- ── QUIZ MODE ── -->
    <div class="learn-section hidden" id="section-quiz">
      <div class="quiz-top">
        <div class="quiz-score-block">
          <div class="qs-label">SCORE</div>
          <div id="quiz-score" class="qs-val">0</div>
        </div>
        <div class="quiz-score-block">
          <div class="qs-label">STREAK</div>
          <div id="quiz-streak" class="qs-val accent2">0🔥</div>
        </div>
        <div class="quiz-score-block">
          <div class="qs-label">BEST STREAK</div>
          <div id="quiz-best" class="qs-val accent3">0</div>
        </div>
        <div class="quiz-score-block">
          <div class="qs-label">ROUND</div>
          <div id="quiz-round" class="qs-val">-</div>
        </div>
      </div>
      <div class="quiz-challenge">
        <div id="quiz-prompt" class="quiz-prompt">Press START to begin!</div>
        <div id="quiz-sub" class="quiz-sub">Listen to the note and press the matching key on the piano below</div>
        <div id="quiz-feedback" class="quiz-feedback"></div>
      </div>
      <div class="quiz-controls">
        <button id="quiz-start">▶ START QUIZ</button>
        <button id="quiz-replay" class="secondary" disabled>🔁 REPLAY NOTE</button>
        <div class="difficulty-row">
          <label>DIFFICULTY</label>
          <div class="btn-group">
            <button class="diff-btn active" data-diff="easy">EASY</button>
            <button class="diff-btn" data-diff="medium">MED</button>
            <button class="diff-btn" data-diff="hard">HARD</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ MAIN PIANO ══ -->
  <main>
    <div class="piano-wrapper">
      <div class="piano" id="piano"></div>
    </div>

    <div class="legend">
      <div class="legend-row" id="legend-white"></div>
      <div class="legend-row black-labels" id="legend-black"></div>
    </div>

    <div class="controls">
      <div class="control-group">
        <label>OCTAVE</label>
        <div class="btn-group">
          <button id="oct-down">−</button>
          <span id="oct-val">4</span>
          <button id="oct-up">+</button>
        </div>
      </div>
      <div class="control-group">
        <label>VOLUME</label>
        <input type="range" id="volume" min="0" max="100" value="80" />
      </div>
      <div class="control-group">
        <label>WAVEFORM</label>
        <div class="btn-group wave-group">
          <button class="wave-btn active" data-wave="sine">SINE</button>
          <button class="wave-btn" data-wave="triangle">TRI</button>
          <button class="wave-btn" data-wave="square">SQR</button>
          <button class="wave-btn" data-wave="sawtooth">SAW</button>
        </div>
      </div>
      <div class="control-group">
        <label>SUSTAIN</label>
        <input type="range" id="sustain" min="0.1" max="3" step="0.1" value="1" />
      </div>
    </div>
  </main>

  <div id="note-display" class="note-display">—</div>

  <footer>
    <span>KEYBOARD SHORTCUTS ACTIVE</span>
    <span>MOUSE CLICK OR TOUCH SUPPORTED</span>
    <span id="mode-indicator">🎹 PLAY MODE</span>
  </footer>

  <script src="script.js"></script>
</body>
</html>