-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (72 loc) · 3.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unfortunate</title>
<script src="build/v86_all.js"></script>
<link rel="stylesheet" href="v86.css">
<script>
"use strict";
window.onload = function()
{
var emulator = window.emulator = new V86Starter({
wasm_path: "build/v86.wasm",
memory_size: 256 * 1024 * 1024,
vga_memory_size: 8 * 1024 * 1024,
screen_container: document.getElementById("screen_container"),
serial_container_xtermjs: document.getElementById("terminal"),
bios: {
url: "bios/seabios.bin",
},
vga_bios: {
url: "bios/vgabios.bin",
},
cdrom: {
url: "unfortunate.iso",
},
autostart: true,
disable_speaker: true,
disable_keyboard: true,
});
};
</script>
<!-- Fathom - beautiful, simple website analytics -->
<script src="https://cdn.usefathom.com/script.js" data-site="RFPXICWX" defer></script>
<!-- / Fathom -->
</head>
<body>
<h1>Well, this is unfortunate</h1>
<p>Welcome to my cursed browser terminal demo of the fortune files I have created.</p>
<p><a href="https://github.com/mrled/fortunate">Read more about my fortune databases</a>.</p>
<h2>Serial console</h2>
<p>Wait for the virtual machine to boot (it may take a few seconds), and then use this serial terminal to interact with it.</p>
<p>It may take a moment to load this terminal...</p>
<div id="terminal"></div>
<div id="video-console-section" style="display:none">
<h2>Video console</h2>
<p>You cannot type here, but use this to watch the boot process</p>
<!--The video console.
Note that the video console does not support true color,
so we hide it and just use the serial port ("terminal", above).
Uncomment this to show boot messages
-->
<div id="screen_container">
<div style="white-space: pre; font: 14px monospace; line-height: 14px"></div>
<canvas style="display: none"></canvas>
</div>
<br style="clear: both">
</div>
<h2>What is this?</h2>
<p>This is a demo that I (<a href="https://me.micahrl.com">Micah</a>) am using to let you play with some <a href="https://github.com/mrled/fortunate">fortune databases</a> I made. It boots a real Linux kernel inside your browser! What. Technology, man.</p>
<p>See the <a href="https://github.com/mrled/unfortunate">source code and build instructions</a> for this site.</p>
<p>This is really booting a Linux kernel in Javascript, thanks to the incredible (and incredibly cursed) <a href="https://github.com/copy/v86">v86 project</a>. You can play with other operating systems and more over <a href="https://copy.sh/v86/">on its website</a>.</p>
<p>The Linux image I am using was built from the very helpful <a href="https://github.com/humphd/browser-vm">browser-vm project</a>, and you should check out the <a href="https://humphd.github.io/browser-shell/">really cool demo</a>.</p>
<h2>Can this be embedded in a web page?</h2>
<p>You're god damned right it can. On this site is also published a little <code><a href="iframe.html">iframe.html</a></code>. Here's how I use it to embed the emulator inside <a href="https://me.micahrl.com/projects/fortunate">my fortunes project home page</a>.</p>
<code><pre>
<iframe
src="https://unfortunate.micahrl.com/iframe.html"
title="How Unfortunate"
style="width: 1000px; height: 500px;"
></iframe>
</pre></code>
</body>