Skip to content

Instantly share code, notes, and snippets.

@farmaker47

farmaker47/html_custom_notes.html

Created August 22, 2020 07:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save farmaker47/8e3b6a5af795f32459d35d2198f07d1c to your computer and use it in GitHub Desktop.
Save farmaker47/8e3b6a5af795f32459d35d2198f07d1c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html_custom_notes.html
<body>
<style>
.demo-card-wide.mdl-card {
width: 100%;
}
#freq {
width: 50px;
}
#note {
width: 35px;
}
#conf {
width: 40px;
}
#container {
width: 200px;
height: 240px;
position: relative;
z-index: 400;
}
.scroll {
transition: transform 8.5s linear, opacity 0.5s ease-out, fill 0.2s linear;
}
.scrolling {
transform: translate(-600px, 0);
}
.correct {
opacity: 0;
}
.too-slow {
transform: translate(-600px, 2000px);
}
.new-item:after {
background-color: #fff;
border-radius: 50%;
position: absolute;
content:"\1D160";
font-size: 44px;
}
.new-item {
width: 0px;
height: 0px;
background-color: #fff;
border-radius: 50%;
position: absolute;
}
.new-item-sharp:after {
background-color: #fff;
border-radius: 50%;
position: absolute;
content:"\266F\1D160";
font-size: 44px;
}
.new-item-sharp {
width: 0px;
height: 0px;
background-color: #fff;
border-radius: 50%;
position: absolute;
}
</style>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col"></div>
<div class="mdl-cell mdl-cell--4-col-phone mdl-cell--6-col-desktop">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<style>
h2 {text-align: center;}
</style>
<h2 class="mdl-card__title-text" id="music_sheet" onclick="myMove()">Musical Sheet</h2>
</div>
<div class="mdl-card__title">
<style>
h2 {text-align: center;}
</style>
<h2 class="mdl-card__title-text" id="music_sheet_sharp" onclick="myMoveSharp()"></h2>
</div>
<div id="container">
<div id="notes" style="width: 800px;"><svg width="800" height="500" viewBox="0 0 800 500" style="width: 800px; height: 500px;"><path stroke-width="1" fill="none" stroke="#999999" stroke-dasharray="none" d="M10 50L20010 50"></path><path stroke-width="1" fill="none" stroke="#999999" stroke-dasharray="none" d="M10 60L20010 60"></path><path stroke-width="1" fill="none" stroke="#999999" stroke-dasharray="none" d="M10 70L20010 70"></path><path stroke-width="1" fill="none" stroke="#999999" stroke-dasharray="none" d="M10 80L20010 80"></path><path stroke-width="1" fill="none" stroke="#999999" stroke-dasharray="none" d="M10 90L20010 90"></path><rect stroke-width="0.3" fill="black" stroke="black" stroke-dasharray="none" x="10" y="49.5" width="1" height="41"></rect><rect stroke-width="0.3" fill="black" stroke="black" stroke-dasharray="none" x="20010" y="49.5" width="1" height="41"></rect><path stroke-width="0.3" fill="black" stroke="none" stroke-dasharray="none" d="M15 81M28.280256 90.199872C29.116608 90.199872,30.079680000000003 90.12384,30.814656 89.971776C31.194816000000003 89.89574400000001,31.270848 89.8704,31.346880000000002 90.301248C31.777728 92.759616,32.335296 95.927616,32.335296 97.651008C32.335296 103.04928000000001,28.685760000000002 103.708224,26.53152 103.708224C24.554688 103.708224,23.61696 103.12531200000001,23.61696 102.643776C23.61696 102.390336,23.946432 102.28896,24.782784 102.010176C25.923264000000003 101.680704,27.215808000000003 100.71763200000001,27.215808000000003 98.588736C27.215808000000003 96.58656,25.948608 94.863168,23.718336 94.863168C21.285312 94.863168,19.81536 96.814656,19.81536 99.070272C19.81536 101.42726400000001,21.234624 105.026112,26.759616 105.026112C29.19264 105.026112,33.931968 103.910976,33.931968 97.72704C33.931968 95.62348800000001,33.27302400000001 92.176704,32.892864 89.89574400000001C32.816832000000005 89.464896,32.842176 89.515584,33.349056000000004 89.287488C37.04928 87.817536,39.482304 84.725568,39.482304 80.594496C39.482304 75.9312,36.060864 71.800128,30.687936 71.800128C29.750208 71.800128,29.750208 71.800128,29.623488000000002 71.141184L28.711104 65.844288C28.660416 65.41344,28.711104 65.388096,28.9392 65.16C32.892864 61.485119999999995,35.883456 56.847167999999996,35.883456 51.246144C35.883456 48.078143999999995,34.996415999999996 44.935488,33.50112 42.755903999999994C32.943552 41.944896,32.005824000000004 40.931135999999995,31.60032 40.931135999999995C31.09344 40.931135999999995,29.95296 41.868863999999995,29.243328 42.679871999999996C26.53152 45.670463999999996,25.64448 50.232383999999996,25.64448 54.033984C25.64448 56.137536,25.923264000000003 58.519872,26.176704 60.015168C26.252736 60.446016,26.278080000000003 60.522048,25.847231999999998 60.902208C20.57568 65.236032,15 70.456896,15 77.832C15 84.168,19.333824 90.199872,28.280256 90.199872M17.91456 80.265024C17.91456 78.110784,18.29472 75.221568,21.310656 71.800128C23.515584 69.367104,25.188288 67.998528,26.886336 66.629952C27.266496 66.325824,27.342528 66.37651199999999,27.41856 66.756672L28.17888 71.445312C28.280256 72.1296,28.280256 72.10425599999999,27.621312000000003 72.307008C24.427968 73.3968,22.324416 76.286016,22.324416 79.403328C22.324416 82.672704,24.047808 85.004352,26.53152 85.866048C26.835648 85.967424,27.266496 86.0688,27.519936 86.0688C27.798720000000003 86.0688,27.950784 85.891392,27.950784 85.663296C27.950784 85.409856,27.672 85.30848,27.41856 85.207104C25.872576000000002 84.54816,24.782784 82.976832,24.782784 81.304128C24.782784 79.200576,26.202048 77.654592,28.43232 77.020992C29.015232 76.868928,29.091264000000002 76.919616,29.167296 77.32512L30.992064 88.19769600000001C31.068096 88.6032,31.017408 88.6032,30.485184000000004 88.704576C29.902272000000004 88.805952,29.167296 88.881984,28.43232 88.881984C22.045632 88.881984,17.91456 85.33382399999999,17.91456 80.265024M32.157888 46.582848C33.349056000000004 46.582848,34.337472000000005 47.571264,34.337472000000005 49.57344C34.337472000000005 53.628479999999996,30.865344 56.923199999999994,28.001472 59.432255999999995C27.748032000000002 59.660352,27.595968 59.609663999999995,27.519936 59.128128C27.367872 58.1904,27.29184 56.948544,27.29184 55.78272C27.29184 50.08032,29.927616 46.582848,32.157888 46.582848M31.09344 76.742208C34.058688000000004 76.995648,36.49171200000001 79.47936,36.49171200000001 82.672704C36.49171200000001 84.979008,35.097792 86.82912,33.070272 87.868224C32.639424000000005 88.070976,32.563392 88.070976,32.48736 87.640128L30.687936 77.249088C30.611904000000003 76.792896,30.662592000000004 76.69152,31.09344 76.742208"></path><path stroke-width="1" fill="none" stroke="#999999" stroke-dasharray="none" d="M10 140L20010 140"></path><path stroke-width="1" fill="none" stroke="#999999" stroke-dasharray="none" d="M10 150L20010 150"></path><path stroke-width="1" fill="none" stroke="#999999" stroke-dasharray="none" d="M10 160L20010 160"></path><path stroke-width="1" fill="none" stroke="#999999" stroke-dasharray="none" d="M10 170L20010 170"></path><path stroke-width="1" fill="none" stroke="#999999" stroke-dasharray="none" d="M10 180L20010 180"></path><rect stroke-width="0.3" fill="black" stroke="black" stroke-dasharray="none" x="10" y="139.5" width="1" height="41"></rect><rect stroke-width="0.3" fill="black" stroke="black" stroke-dasharray="none" x="20010" y="139.5" width="1" height="41"></rect><path stroke-width="0.3" fill="black" stroke="none" stroke-dasharray="none" d="M15 149.5M15.27648 170.55856C15.43776 170.55856,15.62208 170.51248,15.82944 170.39728C23.985599999999998 166.41136,32.625600000000006 160.51312000000001,32.625600000000006 150.4216C32.625600000000006 144.6616,29.10048 140.81392,23.36352 140.81392C17.58048 140.81392,15 145.03024,15 148.20976C15 150.85936,16.3824 153.14032,19.07808 153.14032C21.17472 153.14032,22.6032 151.6888,22.6032 149.63824C22.6032 147.51856,21.03648 146.18224,19.42368 146.18224C18.52512 146.18224,18.17952 146.41264,17.7648 146.41264C17.32704 146.41264,17.21184 146.1592,17.21184 145.8136C17.21184 144.50032,19.21632 142.05808,22.6032 142.05808C26.10528 142.05808,27.648960000000002 145.51408,27.648960000000002 150.72112C27.648960000000002 159.9832,23.064 165.1672,15.32256 169.56784C15.02304 169.72912,14.83872 169.91344,14.83872 170.16688C14.83872 170.37424,14.97696 170.55856,15.27648 170.55856M35.87424 147.17296C36.888000000000005 147.17296,37.6944 146.3896,37.6944 145.3528C37.6944 144.316,36.888000000000005 143.53264,35.87424 143.53264C34.83744 143.53264,34.05408 144.316,34.05408 145.3528C34.05408 146.3896,34.83744 147.17296,35.87424 147.17296M35.89728 155.44432C36.93408 155.44432,37.6944 154.684,37.6944 153.6472C37.6944 152.6104,36.93408 151.85008,35.89728 151.85008C34.883520000000004 151.85008,34.10016 152.6104,34.10016 153.6472C34.10016 154.684,34.883520000000004 155.44432,35.89728 155.44432"></path></svg></div></div>
// Javascript function for sharp note
<script>
function myMoveSharp(position) {
// we create an element
var body = document.getElementsByTagName('body')[0],
newdiv = document.createElement('div'); //create a div
newdiv.className = 'new-item-sharp';
// add it to the DOM
body.appendChild(newdiv);
newdiv.style.right = 5;
newdiv.style.bottom = position;
var pos2 = 360;
var id2 = setInterval(frame2, 10);
function frame2() {
pos2 = pos2 - 1;
newdiv.style.left = pos2;
if(pos2 == 80){
clearInterval(id2);
var id3 = setInterval(frame3, 20);
}
}
var pos3 = position;
function frame3() {
pos3 = pos3 - 10;
newdiv.style.bottom = pos3;
if(pos3 == 40){
newdiv.remove()
clearInterval(id3);
}
}
}
</script>
// Javascript function for plain note
<script>
function myMove(position) {
// we create an element
var body = document.getElementsByTagName('body')[0],
newdiv = document.createElement('div');
newdiv.className = 'new-item';
// add it to the DOM
body.appendChild(newdiv);
newdiv.style.right = 5;
newdiv.style.bottom = position;
// Try one
var pos2 = 360;
var id2 = setInterval(frame2, 10);
function frame2() {
pos2 = pos2 - 1;
newdiv.style.left = pos2;
if(pos2 == 80){
clearInterval(id2);
var id3 = setInterval(frame3, 20);
}
}
var pos3 = position;
function frame3() {
pos3 = pos3 - 10;
newdiv.style.bottom = pos3;
if(pos3 == 40){
newdiv.remove()
clearInterval(id3);
}
}
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment