TheoryOfNekomata
/
react-musical-keyboard

<!DOCTYPE html>
<html lang="en-PH">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,shrink-to-fit=no">
  <title>Demo | React Musical Keyboard</title>
  <meta name="description" content="@theoryofnekomata/react-musical-keyboard">
  <style>
    :root {
      --color-channel-0: #f55;
      --color-channel-1: #ff0;
      --color-channel-2: #0a0;
      --color-channel-3: #05a;
      --color-channel-4: #a0f;
      --color-channel-5: #a00;
      --color-channel-6: #a50;
      --color-channel-7: #fa0;
      --color-channel-8: #0f0;
      --color-channel-9: #0aa;
      --color-channel-10: #0ff;
      --color-channel-11: #f0a;
      --color-channel-12: #aa0;
      --color-channel-13: #550;
      --color-channel-14: #50a;
      --color-channel-15: #f5f;
    }

    html {
      width: 100%;
      height: 100%;
      color: white;
      background-color: black;
      font-family: system-ui, sans-serif;
    }

    body {
      margin: 0;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-areas:
        'channel instrument instrument'
        'background background background'
        'keyboard keyboard keyboard';
      grid-template-columns: 5rem auto auto;
      grid-template-rows: 3rem auto 15rem;
    }

    #channel {
      grid-area: channel;
      -webkit-appearance: none;
      border: 0;
      outline: 0;
      background-color: transparent;
      color: inherit;
      font: inherit;
      padding: 0 1rem;
    }

    #instrument {
      grid-area: instrument;
      -webkit-appearance: none;
      border: 0;
      outline: 0;
      background-color: transparent;
      color: inherit;
      font: inherit;
      padding: 0 1rem;
    }

    #keyboard {
      grid-area: keyboard;
      width: 100%;
      position: relative;
      overflow-x: auto;
      color: black;
      background-color: white;
      cursor: pointer;
    }

    #keyboard-scroll {
      width: 750%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
    }

    @media (min-width: 1080px) {
      body {
        grid-template-rows: 5rem auto 5rem;
      }

      #keyboard-scroll {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <script src="index.tsx"></script>
</body>
</html>