Upload files to "/"

2026-07-26 15:47:29 +05:30
commit a8ae3d0e80
3 changed files with 390 additions and 0 deletions
@@ -0,0 +1,150 @@
+body {
+  font-family: sans-serif;
+  text-align: center;
+  background: #2a2a2a;
+  padding: 20px;
+}
+
+h1 {
+  color: #fff;
+}
+
+.controls {
+  margin-bottom: 30px;
+}
+
+.controls label {
+  color: #fff;
+  margin-right: 10px;
+  font-size: 16px;
+}
+
+.controls select {
+  padding: 8px 12px;
+  font-size: 14px;
+  border-radius: 5px;
+  border: none;
+  background: #fff;
+  color: #333;
+  cursor: pointer;
+}
+
+.piano {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  margin-top: 50px;
+  background: #111;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
+}
+
+.key {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 14px;
+  cursor: pointer;
+  border: 1px solid #222;
+  border-radius: 5px;
+  user-select: none;
+  transition: all 0.05s;
+  position: relative;
+  min-height: 1em;
+}
+
+/* Sharp keys may show Carnatic swara labels if they correspond to the chosen scale */
+.key.sharp.sa-root {
+  color: #fff;
+  font-size: 14px;
+}
+
+.key.has-label .key-label {
+  position: relative;
+  display: inline-flex;
+}
+
+.key.has-label .key-label sub {
+  font-size: 0.65em;
+  display: inline-block;
+  vertical-align: text-bottom;
+  line-height: 1;
+  position: relative;
+  top: 0.18em;
+}
+
+.key.lower.has-label .key-label::after,
+.key.upper.has-label .key-label::after {
+  position: absolute;
+  content: '•';
+  font-size: 12px;
+  color: currentColor;
+  pointer-events: none;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.key.black.has-label .key-label::after {
+  color: #777;
+}
+
+.key.lower.has-label .key-label::after {
+  top: 100%;
+  margin-top: -2px;
+}
+
+.key.upper.has-label .key-label::after {
+  bottom: 100%;
+  margin-bottom: -5px;
+}
+
+/* White keys */
+.key.white {
+  width: 60px;
+  height: 250px;
+  background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
+  color: #333;
+  margin: 0 -1px;
+  padding-bottom: 15px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 -1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.key.white:active {
+  background: linear-gradient(135deg, #e0e0e0 0%, #d5d5d5 100%);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(0, 0, 0, 0.2);
+  transform: translateY(2px);
+}
+
+/* Black keys */
+.key.black {
+  width: 40px;
+  height: 160px;
+  background: linear-gradient(135deg, #222 0%, #111 100%);
+  color: #fff;
+  position: relative;
+  z-index: 10;
+  margin: 0 -20px;
+  padding-top: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.1);
+  align-self: flex-start;
+}
+
+.key.black:active {
+  background: linear-gradient(135deg, #111 0%, #000 100%);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.05);
+  transform: translateY(2px);
+}
+
+.key.sa-root.white {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 -1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.key.sa-root.black {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.1);
+}
+
+.key.sa-root:not(.sharp) {
+  color: #d84315;
+  font-weight: 700;
+}