83 lines
11 KiB
HTML
83 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - meow meow keyboard</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class="container">
|
|
<div class="keyandnote">
|
|
<div id="notes"></div>
|
|
<div class="keyboard" onmousemove="showCoords(event)" onmouseout="clearCoor()">
|
|
<!-- <button class="white" data-note="A2">A2</button>
|
|
<button class="black" data-note="A#2"></button>
|
|
<button class="white" data-note="B2">B2</button> -->
|
|
<button class="white" data-key="C3">C3</button>
|
|
<button class="black" data-key="C#3"></button>
|
|
<button class="white" data-key="D3">D3</button>
|
|
<button class="black" data-key="D#3"></button>
|
|
<button class="white" data-key="E3">E3</button>
|
|
<button class="white" data-key="F3">F3</button>
|
|
<button class="black" data-key="F#3"></button>
|
|
<button class="white" data-key="G3">G3</button>
|
|
<button class="black" data-key="G#3"></button>
|
|
<button class="white" data-key="A3">A3</button>
|
|
<button class="black" data-key="A#3"></button>
|
|
<button class="white" data-key="B3">B3</button>
|
|
<button class="white" data-key="C4">C4</button>
|
|
<button class="black" data-key="C#4"></button>
|
|
<button class="white" data-key="D4">D4</button>
|
|
<button class="black" data-key="D#4"></button>
|
|
<button class="white" data-key="E4">E4</button>
|
|
<button class="white" data-key="F4">F4</button>
|
|
<button class="black" data-key="F#4"></button>
|
|
<button class="white" data-key="G4">G4</button>
|
|
<button class="black" data-key="G#4"></button>
|
|
<button class="white" data-key="A4">A4</button>
|
|
<button class="black" data-key="A#4"></button>
|
|
<button class="white" data-key="B4">B4</button>
|
|
<button class="white" data-key="C5">C5</button>
|
|
<button class="black" data-key="C#5"></button>
|
|
<button class="white" data-key="D5">D5</button>
|
|
<button class="black" data-key="D#5"></button>
|
|
<button class="white" data-key="E5">E5</button>
|
|
<button class="white" data-key="F5">F5</button>
|
|
<button class="black" data-key="F#5"></button>
|
|
<button class="white" data-key="G5">G5</button>
|
|
<button class="black" data-key="G#5"></button>
|
|
<button class="white" data-key="A5">A5</button>
|
|
<button class="black" data-key="A#5"></button>
|
|
<button class="white" data-key="B5">B5</button>
|
|
<!-- <button class="white" data-key="C6">C6</button>
|
|
<button class="black" data-key="C#6"></button>
|
|
<button class="white" data-key="D6">D6</button> -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<span id="paw" class="up">
|
|
<svg id="close" width="62" height="155" viewBox="0 0 62 155" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16.8211 45.4678C22.133 56.7758 14.8026 120.174 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.6234 125.081 46.8865 68.5106 51.7735 41.8407C55.3527 22.3079 52.5172 17.3044 45.6117 16.0243C44.5493 7.80997 34.8816 7.1699 32.9693 12.1838C28.7198 6.63651 21.3894 12.1838 21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678Z" fill="#FFE66D" />
|
|
<path d="M21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678C22.133 56.7759 14.8026 120.174 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.6234 125.081 46.8865 68.5106 51.7735 41.8407C55.3527 22.3079 52.5172 17.3044 45.6117 16.0243M21.3894 16.771C21.3894 12.1838 28.7198 6.63651 32.9693 12.1838M21.3894 16.771C21.1061 19.2958 21.1981 25.0494 23.8328 27.8657M32.9693 12.1838C34.8816 7.1699 44.5493 7.80997 45.6117 16.0243M32.9693 12.1838C33.3589 14.2463 33.9043 19.6514 32.9693 24.772M45.6117 16.0243C45.8596 19.2247 45.9729 26.0735 44.443 27.8657" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M16.8211 45.4678C19.2818 50.7061 24.7796 51.0824 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C47.4453 49.1143 50.8479 48.1592 51.7735 41.8407C54.6519 22.1924 52.5172 17.3044 45.6117 16.0243C44.5493 7.80997 34.8816 7.1699 32.9693 12.1838C28.7198 6.63651 21.3894 12.1838 21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678Z" fill="#FFFCEB" />
|
|
<path d="M21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678C19.2818 50.7061 24.7796 51.0824 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C47.4453 49.1143 50.8479 48.1592 51.7735 41.8407C54.6519 22.1924 52.5172 17.3044 45.6117 16.0243M21.3894 16.771C21.3894 12.1838 28.7198 6.63651 32.9693 12.1838M21.3894 16.771C21.1061 19.2958 21.5081 22.8449 24.1429 25.6612M32.9693 12.1838C34.8816 7.1699 44.5493 7.80997 45.6117 16.0243M32.9693 12.1838C33.3589 14.2463 33.9043 17.7814 32.9693 22.902M45.6117 16.0243C45.8596 19.2247 45.9729 24.8241 44.443 26.6163" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.8789 64.5665C49.8606 64.5085 49.8424 64.4516 49.8245 64.3959C48.9048 66.5184 44.9641 71.3363 36.5592 73.6286C27.323 76.1475 33.2602 77.1902 36.1283 77.6938C36.5226 77.7631 36.8589 77.8222 37.0898 77.8735C38.7859 78.2504 46.6733 77.7906 49.8316 76.2714C49.7862 72.2899 49.796 68.3608 49.8789 64.5665ZM50.453 96.6602C47.5495 98.0283 43.3229 99.6052 38.7467 100.248C30.3622 101.426 40.5808 104.425 42.546 104.961C43.9052 105.331 47.5838 105.651 50.8934 105.316C50.738 102.504 50.5886 99.6067 50.453 96.6602ZM51.5744 116.758C46.7425 118.57 38.9895 120.343 28.5281 120.17C15.0343 119.948 32.7536 125.083 36.1266 125.954C39.7218 126.882 46.5969 127.252 52.2118 126.821C52.1108 125.193 51.9993 123.445 51.8813 121.595C51.7827 120.05 51.6797 118.434 51.5744 116.758ZM16.228 111.984C20.6373 113.202 28.8524 113.554 30.7553 113.208C31.0402 113.157 31.4552 113.097 31.9418 113.027L31.9421 113.027L31.9423 113.027C35.4829 112.519 42.8124 111.466 31.4103 108.924C23.9882 107.269 19.386 104.31 16.9517 101.975C16.7414 104.946 16.5291 107.856 16.325 110.654C16.2925 111.101 16.2601 111.544 16.228 111.984ZM17.6828 91.1044C22.4686 91.8881 29.3754 91.5642 32.7388 90.502C35.4711 89.6392 49.8245 84.5513 38.8939 84.7714C28.8401 84.9739 21.8743 82.4636 18.2844 80.3947C18.1146 83.91 17.9085 87.5077 17.6828 91.1044ZM18.6817 69.6218C21.6803 70.5551 26.1354 70.1698 27.5388 69.702C29.1306 69.1714 37.4082 66.2 30.6163 65.0326C25.2758 64.1147 20.523 61.2762 18.7161 59.903C18.7796 62.8804 18.7614 66.1539 18.6817 69.6218Z" fill="#FFD166" />
|
|
</svg>
|
|
<svg id="open" width="62" height="155" viewBox="0 0 62 155" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16.9781 45.826C20.4378 54.2718 18.0792 86.6067 16.325 110.654C15.5402 121.414 14.8763 130.514 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.7037 134.488 52.342 128.818 51.8813 121.595C50.4551 99.237 48.0798 61.9983 51.7735 41.8407C51.8164 41.6066 51.8584 41.3774 51.8994 41.1531C53.1068 40.1123 54.3167 38.8833 55.3457 37.1966C56.2304 35.7466 61.3421 26.4826 57.7887 18.8935C54.9459 12.8222 48.683 16.3638 45.7959 18.8935C46.7582 14.5037 46.4621 4.6407 40.2436 3.26879C32.2484 1.5049 29.1391 8.84901 28.4729 12.8668C23.809 7.50975 18.2568 3.26879 12.4824 8.84901C8.48022 12.7167 11.372 19.5631 14.9254 23.1344C8.04066 21.1255 5.1535 23.804 3.15469 26.0361C1.15589 28.2682 1.15591 34.7413 8.04066 40.3215C10.1112 41.9998 12.4671 43.3056 14.7364 44.5634C15.4981 44.9856 16.25 45.4024 16.9781 45.826Z" fill="#FFE66D" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M16.9781 45.826C16.25 45.4024 15.4981 44.9856 14.7364 44.5634C12.4671 43.3056 10.1112 41.9998 8.04066 40.3215C1.15591 34.7413 1.15589 28.2682 3.15469 26.0361C5.1535 23.804 8.04066 21.1255 14.9254 23.1344C11.372 19.5631 8.48022 12.7167 12.4824 8.84901C18.2568 3.26879 23.809 7.50975 28.4729 12.8668C29.1391 8.84901 32.2484 1.5049 40.2436 3.26879C46.4621 4.6407 46.7582 14.5037 45.7959 18.8935C48.683 16.3638 54.9459 12.8222 57.7887 18.8935C61.3421 26.4826 56.2304 35.7466 55.3457 37.1966C54.3167 38.8833 53.1068 40.1123 51.8994 41.1531C51.1114 46.5323 48.4022 48.7118 45.7991 50.2151C45.3445 50.4777 44.8894 50.7405 44.443 51.0245C41.4408 52.9347 31.9959 53.3013 28.3878 52.1918C27.7513 51.9962 27.0561 51.8233 26.3291 51.6425C23.3631 50.905 19.1651 48.9115 16.9781 45.826Z" fill="#FFFCEB" />
|
|
<path d="M28.4729 12.8668C23.809 7.50975 18.2568 3.26879 12.4824 8.84901C8.48022 12.7167 11.372 19.5631 14.9254 23.1344C8.04066 21.1255 5.1535 23.804 3.15469 26.0361C1.15589 28.2682 1.15591 34.7413 8.04066 40.3215C10.1112 41.9998 12.4671 43.3056 14.7364 44.5634C15.4981 44.9856 16.25 45.4024 16.9781 45.826C19.1651 48.9115 23.3631 50.905 26.3291 51.6425C27.0561 51.8233 27.7513 51.9962 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C44.8894 50.7405 45.3445 50.4777 45.7991 50.2151C48.4022 48.7118 51.1114 46.5323 51.8994 41.1531C53.1068 40.1123 54.3167 38.8833 55.3457 37.1966C56.2304 35.7466 61.3421 26.4826 57.7887 18.8935C54.9459 12.8222 48.683 16.3638 45.7959 18.8935C46.7582 14.5037 46.4621 4.6407 40.2436 3.26879C32.2484 1.5049 29.1391 8.84901 28.4729 12.8668ZM28.4729 12.8668C28.6486 13.2445 29 14.5 29 16" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.8788 64.5665C49.8606 64.5085 49.8424 64.4516 49.8245 64.3959C48.9048 66.5184 44.9641 71.3363 36.5592 73.6286C27.3229 76.1475 33.2602 77.1902 36.1283 77.6939C36.5226 77.7631 36.8589 77.8222 37.0898 77.8735C38.7859 78.2504 46.6732 77.7906 49.8316 76.2714C49.7862 72.2899 49.796 68.3608 49.8788 64.5665ZM50.453 96.6602C47.5495 98.0283 43.3229 99.6052 38.7467 100.248C30.3622 101.426 40.5808 104.425 42.546 104.961C43.9052 105.331 47.5838 105.651 50.8933 105.316C50.738 102.504 50.5886 99.6067 50.453 96.6602ZM51.5744 116.758C46.7425 118.57 38.9895 120.343 28.5281 120.17C15.0343 119.948 32.7536 125.083 36.1266 125.954C39.7218 126.882 46.5968 127.252 52.2118 126.821C52.1108 125.193 51.9993 123.445 51.8813 121.595C51.7827 120.05 51.6797 118.434 51.5744 116.758ZM16.228 111.984C20.6372 113.202 28.8524 113.554 30.7553 113.208C31.0402 113.157 31.4552 113.097 31.9418 113.027L31.9421 113.027L31.9423 113.027C35.4829 112.519 42.8124 111.466 31.4103 108.924C23.9882 107.269 19.386 104.31 16.9517 101.975C16.7414 104.946 16.5291 107.856 16.325 110.654C16.2925 111.101 16.2601 111.544 16.228 111.984ZM17.6828 91.1044C22.4686 91.8881 29.3754 91.5642 32.7388 90.502C35.4711 89.6392 49.8245 84.5513 38.8939 84.7714C28.8401 84.9739 21.8743 82.4636 18.2844 80.3947C18.1146 83.91 17.9085 87.5077 17.6828 91.1044ZM18.6817 69.6218C21.6803 70.5551 26.1354 70.1698 27.5388 69.702C29.1306 69.1714 37.4082 66.2 30.6163 65.0327C25.2758 64.1147 20.523 61.2762 18.7161 59.903C18.7796 62.8804 18.7613 66.1539 18.6817 69.6218Z" fill="#FFD166" />
|
|
</svg>
|
|
|
|
</span>
|
|
<!-- partial -->
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.62/Tone.js'></script><script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|