100 lines
2.8 KiB
HTML
100 lines
2.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: monospace;
|
|||
|
|
background: black;
|
|||
|
|
/*color: #00ff00;*/
|
|||
|
|
font-size: 300%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
margin: -2em 0 1em;
|
|||
|
|
color: transparent;
|
|||
|
|
text-align: left;
|
|||
|
|
font-size: 75%;
|
|||
|
|
white-space: pre;
|
|||
|
|
text-indent: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
h1:after {
|
|||
|
|
text-indent: 0;
|
|||
|
|
display: block;
|
|||
|
|
color: #00cc00;
|
|||
|
|
content: " _ _ ____ ____ ____ __ ___ ____ ____\a( \\/ )( __)/ ___)/ ___) / _\\ / __)( __)/ ___)\a/ \\/ \\ ) _) \\___ \\\\___ \\/ \\( (_ \\ ) _) \\___ \\\a\\_)(_/(____)(____/(____/\\_/\\_/ \\___/(____)(____/";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mpd-status { margin-bottom: 0.2em; }
|
|||
|
|
.mpd-status:before { content: " ▶ "; }
|
|||
|
|
</style>
|
|||
|
|
<title>Messages from the world to kelder</title>
|
|||
|
|
<meta http-equiv="refresh" content="5" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
{% if mpd_status["state"] == "play" %}
|
|||
|
|
{% if mpd_song["artist"] and mpd_song["title"] %}
|
|||
|
|
<div class="mpd-status"><span class="artist">{{ mpd_song["artist"] }}</span><span class="between artist-title"> – </span><span class="title">{{ mpd_song["title"] }}</span></div>
|
|||
|
|
{% elif mpd_song["title"] %}
|
|||
|
|
<div class="mpd-status"><span class="title">{{ mpd_song["title"] }}</span></div>
|
|||
|
|
{% elif mpd_song["artist"] %}
|
|||
|
|
<div class="mpd-status"><span class="artist">{{ mpd_song["artist"] }}</span></div>
|
|||
|
|
{% else %}
|
|||
|
|
<div class="mpd-status">Unknown music, fix your metadata!</div>
|
|||
|
|
{% endif %}
|
|||
|
|
{% endif %}
|
|||
|
|
|
|||
|
|
<h1>Messages</h1>
|
|||
|
|
|
|||
|
|
<script src="/static/libv86.js"></script>
|
|||
|
|
<script>
|
|||
|
|
"use strict";
|
|||
|
|
|
|||
|
|
window.onload = function()
|
|||
|
|
{
|
|||
|
|
var emulator = window.emulator = new V86Starter({
|
|||
|
|
wasm_path: "/static/v86.wasm",
|
|||
|
|
memory_size: 32 * 1024 * 1024,
|
|||
|
|
vga_memory_size: 2 * 1024 * 1024,
|
|||
|
|
screen_container: document.getElementById("screen_container"),
|
|||
|
|
bios: {
|
|||
|
|
url: "/static/seabios.bin",
|
|||
|
|
},
|
|||
|
|
vga_bios: {
|
|||
|
|
url: "/static/vgabios.bin",
|
|||
|
|
},
|
|||
|
|
// TODO can't this be in `bios` directly?
|
|||
|
|
fda: {
|
|||
|
|
url: "/static/messageos.bin",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// TODO do this with an event listener instead of a timeout
|
|||
|
|
setTimeout(() => {
|
|||
|
|
for (const m of {{ messages|tojson }}) {
|
|||
|
|
let messageString = m.msg;
|
|||
|
|
|
|||
|
|
if (m.sender != "somebody") {
|
|||
|
|
messageString = `<${m.sender}> ${messageString}`;
|
|||
|
|
}
|
|||
|
|
let c;
|
|||
|
|
console.log(messageString);
|
|||
|
|
for (c of messageString) {
|
|||
|
|
console.log(c);
|
|||
|
|
window.emulator.keyboard_adapter.simulate_char(c);
|
|||
|
|
}
|
|||
|
|
window.emulator.keyboard_adapter.simulate_char('\n');
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<div id="screen_container">
|
|||
|
|
<div style="white-space: pre; font: 14px monospace; line-height: 15px"></div>
|
|||
|
|
<canvas style="display: none"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|