candycanearter07/comicsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds a stupid lil midi player to the layout

Browse Source
This commit is contained in:
etherware-novice 2024-08-05 16:05:51 -05:00
parent de04059367
commit f3d046a922
No known key found for this signature in database
GPG Key ID: 5DB73B4D57B9D701
3 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
_includes/mplayer.html Normal file
View File

@ -0,0 +1,19 @@
<div id="player">
<span id="player-text"></span>
<a href="javascript:void(0)" onClick="stopPlayer()">stop</a>
<a href="javascript:void(0)" onClick="MIDIjs.play('/assets/mid/canyon.mid')">play</a>
</div>
<script>
var duration = 0;
function updatePlayerStatus(msg) {
document.getElementById("player-text").innerHTML = msg;
}
function stopPlayer() {
MIDIjs.stop();
document.getElementById("player-text").innerHTML = "";
}
MIDIjs.message_callback = updatePlayerStatus;
</script>

2
_layouts/default.html
View File

@ -8,6 +8,7 @@ navbar: topnav
<title>{{ page.title }}</title> <title>{{ page.title }}</title>
<link rel="stylesheet" href="/assets/css/styles.css"> <link rel="stylesheet" href="/assets/css/styles.css">
<link rel="stylesheet" href="https://webcomicring.org/js/comicring.css"> <link rel="stylesheet" href="https://webcomicring.org/js/comicring.css">
<script type='text/javascript' src='//midijs.net/lib/midi.js'></script>
</head> </head>
<body> <body>
<img src="/assets/images/crt1.png" class="overlay"> <img src="/assets/images/crt1.png" class="overlay">
@ -17,6 +18,7 @@ navbar: topnav
<script data-goatcounter="https://slimepondcount.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> <script data-goatcounter="https://slimepondcount.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
{% include background.html %} {% include background.html %}
{% include mplayer.html %}
<div class="vcol"> <div class="vcol">
<div class="columns"> <div class="columns">
<div class="left-sidebar"> <div class="left-sidebar">

21
_sass/main.scss
View File

@ -75,3 +75,24 @@ img {
background-color: white; background-color: white;
justify-content: center; justify-content: center;
} }
#player {
display: flex;
justify-content: flex-end;
position: fixed;
bottom: 15vh; left: 4vw;
padding: 10px;
gap: 10px;
width: 25vw;
background-color: black;
color: white;
transform: rotate(3deg);
z-index: 5;
}
#player * {
color: white;
text-decoration: none;
}