Skip to content

Commit b9de632

Browse files
aayush105aayush105
authored
Merge pull request #970 from pranavpanmand/add-piano-feature
Enhanced Piano UI with Key Click Animations and Gradient Theme (Fixes #961)
2 parents d9e051d + d14778d commit b9de632

File tree

2 files changed

+346
-57
lines changed

2 files changed

+346
-57
lines changed

‎Piano/index.html‎

Lines changed: 95 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
54
<meta charset="UTF-8">
6-
<title>Piano</title>
5+
<title>Animated Piano</title>
76
<meta name="viewport" content="width=device-width, initial-scale=1.0">
87
<link rel="stylesheet" href="piano.css">
98
<link rel="icon" href="piano-logo.png">
@@ -12,35 +11,105 @@
1211
<body>
1312
<div id="piano">
1413
<div class="head">
15-
<h1 class="title"><img class="logo" src="piano-logo.png" alt="logo">Piano</h1>
14+
<h1 class="title">
15+
<svg class="logo" viewBox="0 0 24 24" width="35" height="35" fill="white">
16+
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 11.5h.25V19h-4.5v-4.5H10c.55 0 1-.45 1-1V5h2v8.5c0 .55.45 1 1 1zM5 5h2v8.5c0 .55.45 1 1 1h.25V19H5V5zm14 14h-3.25v-4.5H16c.55 0 1-.45 1-1V5h2v14z"/>
17+
</svg>
18+
Piano
19+
</h1>
1620
</div>
1721

1822
<div class="keys">
19-
<div class="key"></div>
20-
<div class="key black-key"></div>
21-
<div class="key black-key"></div>
22-
<div class="key"></div>
23-
<div class="key black-key"></div>
24-
<div class="key black-key"></div>
25-
<div class="key black-key"></div>
23+
<!-- First Octave -->
24+
<div class="key">
25+
<div class="key-effect"></div>
26+
<div class="note-symbol">♪</div>
27+
</div>
28+
<div class="key black-key">
29+
<div class="key-effect"></div>
30+
<div class="note-symbol">♪</div>
31+
</div>
32+
<div class="key black-key">
33+
<div class="key-effect"></div>
34+
<div class="note-symbol">♪</div>
35+
</div>
36+
<div class="key">
37+
<div class="key-effect"></div>
38+
<div class="note-symbol">♪</div>
39+
</div>
40+
<div class="key black-key">
41+
<div class="key-effect"></div>
42+
<div class="note-symbol">♪</div>
43+
</div>
44+
<div class="key black-key">
45+
<div class="key-effect"></div>
46+
<div class="note-symbol">♪</div>
47+
</div>
48+
<div class="key black-key">
49+
<div class="key-effect"></div>
50+
<div class="note-symbol">♪</div>
51+
</div>
2652

27-
<div class="key"></div>
28-
<div class="key black-key"></div>
29-
<div class="key black-key"></div>
30-
<div class="key"></div>
31-
<div class="key black-key"></div>
32-
<div class="key black-key"></div>
33-
<div class="key black-key"></div>
53+
<!-- Second Octave -->
54+
<div class="key">
55+
<div class="key-effect"></div>
56+
<div class="note-symbol">♪</div>
57+
</div>
58+
<div class="key black-key">
59+
<div class="key-effect"></div>
60+
<div class="note-symbol">♪</div>
61+
</div>
62+
<div class="key black-key">
63+
<div class="key-effect"></div>
64+
<div class="note-symbol">♪</div>
65+
</div>
66+
<div class="key">
67+
<div class="key-effect"></div>
68+
<div class="note-symbol">♪</div>
69+
</div>
70+
<div class="key black-key">
71+
<div class="key-effect"></div>
72+
<div class="note-symbol">♪</div>
73+
</div>
74+
<div class="key black-key">
75+
<div class="key-effect"></div>
76+
<div class="note-symbol">♪</div>
77+
</div>
78+
<div class="key black-key">
79+
<div class="key-effect"></div>
80+
<div class="note-symbol">♪</div>
81+
</div>
3482

35-
<div class="key"></div>
36-
<div class="key black-key"></div>
37-
<div class="key black-key"></div>
38-
<div class="key"></div>
39-
<div class="key black-key"></div>
40-
<div class="key black-key"></div>
41-
<div class="key black-key"></div>
83+
<!-- Third Octave -->
84+
<div class="key">
85+
<div class="key-effect"></div>
86+
<div class="note-symbol">♪</div>
87+
</div>
88+
<div class="key black-key">
89+
<div class="key-effect"></div>
90+
<div class="note-symbol">♪</div>
91+
</div>
92+
<div class="key black-key">
93+
<div class="key-effect"></div>
94+
<div class="note-symbol">♪</div>
95+
</div>
96+
<div class="key">
97+
<div class="key-effect"></div>
98+
<div class="note-symbol">♪</div>
99+
</div>
100+
<div class="key black-key">
101+
<div class="key-effect"></div>
102+
<div class="note-symbol">♪</div>
103+
</div>
104+
<div class="key black-key">
105+
<div class="key-effect"></div>
106+
<div class="note-symbol">♪</div>
107+
</div>
108+
<div class="key black-key">
109+
<div class="key-effect"></div>
110+
<div class="note-symbol">♪</div>
111+
</div>
42112
</div>
43113
</div>
44-
45114
</body>
46-
</html>
115+
</html>

0 commit comments

Comments
 (0)