Musical keyboard component written in React.
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.

index.html 2.2 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!DOCTYPE html>
  2. <html lang="en-PH">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,shrink-to-fit=no">
  6. <title>Demo | React Musical Keyboard</title>
  7. <meta name="description" content="@theoryofnekomata/react-musical-keyboard">
  8. <style>
  9. :root {
  10. --color-channel-0: #f55;
  11. --color-channel-1: #ff0;
  12. --color-channel-2: #0a0;
  13. --color-channel-3: #05a;
  14. --color-channel-4: #a0f;
  15. --color-channel-5: #a00;
  16. --color-channel-6: #a50;
  17. --color-channel-7: #fa0;
  18. --color-channel-8: #0f0;
  19. --color-channel-9: #0aa;
  20. --color-channel-10: #0ff;
  21. --color-channel-11: #f0a;
  22. --color-channel-12: #aa0;
  23. --color-channel-13: #550;
  24. --color-channel-14: #50a;
  25. --color-channel-15: #f5f;
  26. }
  27. html {
  28. width: 100%;
  29. height: 100%;
  30. color: white;
  31. background-color: black;
  32. }
  33. body {
  34. margin: 0;
  35. width: 100%;
  36. height: 100%;
  37. display: grid;
  38. grid-template-areas:
  39. 'channel instrument instrument'
  40. 'background background background'
  41. 'keyboard keyboard keyboard';
  42. grid-template-columns: 5rem auto auto;
  43. grid-template-rows: 3rem auto 15rem;
  44. }
  45. #channel {
  46. grid-area: channel;
  47. -webkit-appearance: none;
  48. border: 0;
  49. outline: 0;
  50. background-color: transparent;
  51. color: inherit;
  52. font: inherit;
  53. padding: 0 1rem;
  54. }
  55. #instrument {
  56. grid-area: instrument;
  57. -webkit-appearance: none;
  58. border: 0;
  59. outline: 0;
  60. background-color: transparent;
  61. color: inherit;
  62. font: inherit;
  63. padding: 0 1rem;
  64. }
  65. #keyboard {
  66. grid-area: keyboard;
  67. width: 100%;
  68. position: relative;
  69. overflow-x: auto;
  70. color: black;
  71. background-color: white;
  72. }
  73. #keyboard-scroll {
  74. width: 750%;
  75. height: 100%;
  76. top: 0;
  77. left: 0;
  78. position: absolute;
  79. }
  80. @media (min-width: 1080px) {
  81. body {
  82. grid-template-rows: 5rem auto 5rem;
  83. }
  84. #keyboard-scroll {
  85. width: 100%;
  86. }
  87. }
  88. </style>
  89. </head>
  90. <body>
  91. <script src="index.tsx"></script>
  92. </body>
  93. </html>