Skip to content

Commit

Permalink
new layout for frontpage, filters, mobile-friendly table
Browse files Browse the repository at this point in the history
  • Loading branch information
@copy
copy committed Oct 18, 2024
1 parent bccf45b commit 4d8b78d
Show file tree
Hide file tree
Showing 3 changed files with 243 additions and 65 deletions.
157 changes: 103 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,64 +10,113 @@

<div>
<div id="boot_options">
<h4>Select profile</h4>
<div id="filter">
Family:
<label><input id=filter_linux type=checkbox> Linux</label>
<label><input id=filter_bsd type=checkbox> BSD</label>
<label title="Microsoft Windows"><input id=filter_windows type=checkbox> Windows</label>
<label><input id=filter_unix type=checkbox> Unix-like</label>
<label><input id=filter_dos type=checkbox> DOS</label>
<label><input id=filter_custom type=checkbox> Custom</label>
<!--<label><input type=checkbox> Hobby OS</label>-->
UI:
<label title="Graphical desktop"><input id=filter_graphical type=checkbox> Graphical</label>
<label title="Text-based or serial console only"><input id=filter_text type=checkbox> Text</label>
Medium:
<label title="Boots from floppy disk"><input id=filter_floppy type=checkbox> Floppy</label>
<label title="Boots from CD-ROM"><input id=filter_cd type=checkbox> CD</label>
<label title="Boots from hard disk"><input id=filter_hd type=checkbox> HD</label>
Size:
<label title="Fits it bootsector"><input id=filter_bootsector type=checkbox> 512 B</label>
<label><input id=filter_lt5mb type=checkbox> &lt;5 MB</label>
<label><input id=filter_gt5mb type=checkbox> &gt;5 MB</label>
Status:
<label title="Most recent release is younger than 10 years"><input id=filter_modern type=checkbox> Modern</label>
<label title="No release in 10 years"><input id=filter_historic type=checkbox> Historic</label>
License:
<label><input id=filter_opensource type=checkbox> Open-Source</label>
<label><input id=filter_proprietary type=checkbox> Proprietary</label>
Arch:
<label><input id=filter_16bit type=checkbox> 16-bit</label>
<label><input id=filter_32bit type=checkbox> 32-bit</label>
<!--<label><input type=checkbox> Microkernel</label>-->
<!--<label title="Uses a saved memory dump to skip the boot process"><input type=checkbox> skip boot process</label>-->
<!--<label title="Supports networking (in v86)"><input type=checkbox> networking</label>
<label title="Supports audio output (in v86)"><input type=checkbox> audio</label>
<label title="Supports the serial console (in v86)"><input type=checkbox> serial</label>
<label title="Supports filesharing using virtio-9p (in v86)"><input type=checkbox> 9pfs</label>-->
Lang:
<label title="Written in assembly language"><input id=filter_asm type=checkbox> ASM</label>
<label title="Written in C"><input id=filter_c type=checkbox> C</label>
<label title="Written in C++"><input id=filter_cpp type=checkbox> C++</label>
<label title="Written in other languages"><input id=filter_other_lang type=checkbox> Other</label>
<!--<label><input type=checkbox> contains: games</label>
<label><input type=checkbox> contains: demos</label>
<label><input type=checkbox> contains: compilers</label>
<label><input type=checkbox> contains: web browsers</label>-->
<div style="text-align: right; float: right"><a href="#setup">Skip to custom settings</a></div>
<br style="clear: both">
</div>
<hr>

<table id="oses">
<tr id="start_archlinux"><td><a href="?profile=archlinux">Arch Linux</a> <small>12 MB &gt;_</small></td> <td>
Complete Arch Linux with various compilers, networking and Xorg. Restored from snapshot.</td></tr>
<tr id="start_dsl"><td><a href="?profile=dsl">Damn Small Linux</a> <small>50 MB 💻</small></td> <td>
Graphical Linux with 2.4 kernel, Firefox 2.0 and more. Takes 1 minute to boot.</td></tr>
<tr id="start_buildroot"><td><a href="?profile=buildroot">Buildroot Linux</a> <small>5.0 MB &gt;_</small></td> <td>
Minimal Linux with busybox, Lua, tests, internet access, ping, telnet and curl. Exchange files through <code>/mnt/</code>.</td></tr>
<tr id="start_reactos"><td><a href="?profile=reactos">ReactOS</a> <small>18 MB 💻</small></td> <td>
Windows-compatible OS with QtWeb and Breakout. Restored from snapshot.</td></tr>
<tr id="start_windows2000"><td><a href="?profile=windows2000">Windows 2000</a> <small>22 MB 💻</small></td> <td>
Including Pinball and Internet Explorer with internet access. Additional sectors are loaded as needed.</td></tr>
<tr id="start_windows98"><td><a href="?profile=windows98">Windows 98</a> <small>9.7 MB 💻</small></td> <td>
Including Minesweeper and Internet Explorer with internet access. Additional sectors are loaded as needed.</td></tr>
<tr id="start_windows95"><td><a href="?profile=windows95">Windows 95</a> <small>4.6 MB 💻</small></td> <td>
Restored from snapshot</td></tr>
<tr id="start_windows31"><td><a href="?profile=windows31">Windows 3.1</a> <small>15 MB 💻</small></td> <td>
Takes 15 seconds to boot</td></tr>
<tr id="start_windows1"><td><a href="?profile=windows1">Windows 1.01</a> <small>0.6 MB 💻</small></td> <td>
The first version of Microsoft Windows</td></tr>
<tr id="start_msdos"><td><a href="?profile=msdos">MS-DOS 6.22</a> <small>4.4 MB &gt;_</small></td> <td>
With Enhanced Tools, QBasic, vim, games and demos.</td></tr>
<tr id="start_freedos"><td><a href="?profile=freedos">FreeDOS</a> <small>0.5 MB &gt;_</small></td> <td>
With nasm, vim, debug.com, Rogue, some games and demos.</td></tr>
<tr id="start_freebsd"><td><a href="?profile=freebsd">FreeBSD</a> <small>17 MB &gt;_</small></td> <td>
FreeBSD 12.0 base install. Restored from snapshot.</td></tr>
<tr id="start_openbsd"><td><a href="?profile=openbsd">OpenBSD</a> <small>12 MB &gt;_</small></td> <td>
OpenBSD 6.6 base install. Restored from snapshot.</td></tr>
<tr id="start_9front"><td><a href="?profile=9front">9front</a> <small>4.4 MB 💻</small></td> <td>
A Plan 9 fork.</td></tr>
<tr id="start_haiku"><td><a href="?profile=haiku">Haiku</a> <small>38 MB 💻</small></td> <td>
An open-source operating system inspired by BeOS. Restored from snapshot. Includes network support.</td></tr>
<tr id="start_serenity"><td><a href="?profile=serenity">SerenityOS</a> <small>17 MB 💻</small></td> <td>
A graphical Unix-like operating system. Restored from snapshot.</td></tr>
<tr id="start_helenos"><td><a href="?profile=helenos">HelenOS</a> <small>7.9 MB 💻</small></td> <td>
A graphical operating system based on a multiserver microkernel design</td></tr>
<tr id="start_fiwix"><td><a href="?profile=fiwix">FiwixOS</a> <small>15 MB &gt;_</small></td> <td>
A Unix-like OS written from scratch. Includes Doom.</td></tr>
<tr id="start_android"><td><a href="?profile=android">Android-x86</a> <small>42 MB 💻</small></td> <td>
An x86 port of the Android 1.6. Quite slow. Takes about 3 minutes to boot.</td></tr>
<tr id="start_oberon"><td><a href="?profile=oberon">Oberon</a> <small>1.2 MB 💻</small></td> <td>
Native Oberon 2.3.6</td></tr>
<tr id="start_kolibrios"><td><a href="?profile=kolibrios">KolibriOS</a> <small>1.4 MB 💻</small></td> <td>
Fast graphical OS written in Assembly</td></tr>
<tr id="start_qnx"><td><a href="?profile=qnx">QNX</a> <small>1.3 MB 💻</small></td> <td>
QNX 4.05 Demo disk (no networking)</td></tr>
<tr id="start_snowdrop"><td><a href="?profile=snowdrop">Snowdrop</a> <small>0.3 MB &gt;_</small></td> <td>
A homebrew operating system from scratch, written in assembly language</td></tr>
<tr id="start_solos"><td><a href="?profile=solos">Solar OS</a> <small>0.3 MB 💻</small></td> <td>
Simple graphical OS</td></tr>
<tr id="start_bootchess"><td><a href="?profile=bootchess">Bootchess</a> <small>512 B &gt;_</small></td> <td>
A tiny chess program written in the boot sector</td></tr>
<tr id="start_sectorlisp"><td><a href="?profile=sectorlisp">SectorLISP</a> <small>512 B &gt;_</small></td> <td>
A LISP interpreter that fits into the boot sector</td></tr>
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>UI</th>
<th>Family</th>
<th>Arch</th>
<th>Status</th>
<th>Source</th>
<th>Lang</th>
<th>Medium</th>
<th>Notes</th>
</tr>
</thead>
<tr id="start_archlinux"><td><a href="?profile=archlinux">Arch Linux</a> <td>15+ MB</td>
<td><span class=tui_icon></span></td> <td>Linux</td> <td>32-bit</td> <td>Modern</td> <td>Open-source</td> <td>C</td> <td>9pfs</td> <td>Xorg, Firefox, various compilers and more</td></tr>
<tr id="start_dsl"><td><a href="?profile=dsl">Damn Small Linux</a> <td>50 MB</td>
<td><span class=gui_icon></span></td> <td>Linux</td> <td>32-bit</td> <td>Historic</td> <td>Open-source</td> <td>C</td> <td>CD</td> <td>4.11.rc2 with Firefox 2.0</td></tr>
<tr id="start_buildroot"><td><a href="?profile=buildroot">Buildroot Linux</a> <td>4.9 MB</td>
<td><span class=tui_icon></span></td> <td>Linux</td> <td>32-bit</td> <td>Modern</td> <td>Open-source</td> <td>C</td> <td>bzImage</td> <td>Lua, ping, curl, telnet</td></tr>

<tr id="start_freebsd"><td><a href="?profile=freebsd">FreeBSD</a> <td>16+ MB</td>
<td><span class=tui_icon></span></td> <td>BSD</td> <td>32-bit</td> <td>Modern</td> <td>Open-source</td> <td>C</td> <td>HD</td> <td>FreeBSD 12.0</td></tr>
<tr id="start_openbsd"><td><a href="?profile=openbsd">OpenBSD</a> <td>11+ MB</td>
<td><span class=tui_icon></span></td> <td>BSD</td> <td>32-bit</td> <td>Modern</td> <td>Open-source</td> <td>C</td> <td>HD</td> <td>OpenBSD 6.6</td></tr>

<tr id="start_fiwix"><td><a href="?profile=fiwix">FiwixOS</a> <td>15+ MB</td>
<td><span class=tui_icon></span></td> <td>Unix-like</td> <td>32-bit</td> <td>Modern</td> <td>Open-source</td> <td>C</td> <td>HD</td> <td>With Doom</td></tr>
<tr id="start_serenity"><td><a href="?profile=serenity">SerenityOS</a> <td>16+ MB</td>
<td><span class=gui_icon></span></td> <td>Unix-like</td> <td>32-bit</td> <td>Modern</td> <td>Open-source</td> <td>C++</td> <td>HD</td> <td>Web browser, various games and demos</td></tr>

<tr id="start_haiku"><td><a href="?profile=haiku">Haiku</a> <td>41+ MB</td>
<td><span class=gui_icon></span></td> <td>BeOS</td> <td>32-bit</td> <td>Modern</td> <td>Open-source</td> <td>C++</td> <td>HD</td> <td>Networking (WebPositive), OCaml, 2048, NetHack</td></tr>
<tr id="start_tinyaros"><td><a href="?profile=tinyaros">Tiny Aros</a> <td>17+ MB</td>
<td><span class=gui_icon></span></td> <td>AmigaOS</td> <td>32-bit</td> <td>Modern</td> <td>Open-source</td> <td>C</td> <td>CD</td> <td>AmigaOS-like graphical OS</td></tr>

<tr id="start_reactos"><td><a href="?profile=reactos">ReactOS</a> <td>17+ MB</td>
<td><span class=gui_icon></span></td> <td>Windows-like</td> <td>32-bit</td> <td>Modern</td> <td>Open-source</td> <td>C++</td> <td>HD</td> <td>QtWeb, LBreakout2, OpenTTD, Bochs, TCC</td></tr>
<tr id="start_windows1"><td><a href="?profile=windows1">Windows 1.01</a> <td>0.7 MB</td>
<td><span class=gui_icon></span></td> <td>Windows</td> <td>16-bit</td> <td>Historic</td> <td>Proprietary</td> <td>ASM, C</td> <td>Floppy</td> <td>Reversi, Paint</td></tr>
<tr id="start_windows95"><td><a href="?profile=windows95">Windows 95</a> <td>19+ MB</td>
<td><span class=gui_icon></span></td> <td>Windows</td> <td>32-bit</td> <td>Historic</td> <td>Proprietary</td> <td>ASM, C</td> <td>HD</td> <td>Age of Empires, FASM, POV-Ray, Hover!</td></tr>
<tr id="start_windows2000"><td><a href="?profile=windows2000">Windows 2000</a> <td>23+ MB</td>
<td><span class=gui_icon></span></td> <td>Windows</td> <td>32-bit</td> <td>Historic</td> <td>Proprietary</td> <td>C++</td> <td>HD</td> <td>IE 5, Pinball</td></tr>
<tr id="start_msdos"><td><a href="?profile=msdos">MS-DOS 6.22</a> <td>2.4+ MB</td>
<td><span class=tui_icon></span></td> <td>DOS</td> <td>16-bit</td> <td>Historic</td> <td>Proprietary</td> <td>ASM</td> <td>HD</td> <td>Doom, Sim City, OCaml 1.0, Turbo C and more</td></tr>
<tr id="start_freedos"><td><a href="?profile=freedos">FreeDOS</a> <td>0.6 MB</td>
<td><span class=tui_icon></span></td> <td>DOS</td> <td>16-bit</td> <td>Modern</td> <td>Open-source</td> <td>ASM, C</td> <td>Floppy</td> <td>nasm, vim, debug.com, Rogue, various demos</td></tr>

<tr id="start_kolibrios"><td><a href="?profile=kolibrios">KolibriOS</a> <td>1.3 MB</td>
<td><span class=gui_icon></span></td> <td>Custom</td> <td>32-bit</td> <td>Modern</td> <td>Open-source</td> <td>ASM</td> <td>Floppy</td> <td>Various apps, games and demos</td></tr>
<tr id="start_qnx"><td><a href="?profile=qnx">QNX 4.05</a> <td>1.4 MB</td>
<td><span class=gui_icon></span></td> <td>Custom</td> <td>32-bit</td> <td>Historic</td> <td>Proprietary</td> <td>C</td> <td>Floppy</td> <td>1999 demo disk</td></tr>
</table>

<hr>
<h4>Setup</h4>
<h4 id="setup">Setup</h4>
<table>
<tr>
<td width="350"><label for="cdrom_image">CD image</label></td>
Expand Down
66 changes: 66 additions & 0 deletions src/browser/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1455,6 +1455,72 @@
});
}

const os_info = Array.from(document.querySelectorAll("#oses tbody tr")).map(element =>
{
const [_, size_raw, unit] = element.children[1].textContent.match(/([\d\.]+)\+? (\w+)/);
let size = +size_raw;
if(unit === "MB") size *= 1024 * 1024;
else if(unit === "KB") size *= 1024;
return {
element,
size,
graphical: element.children[2].firstChild.className === "gui_icon",
family: element.children[3].textContent.replace(/-like/, ""),
arch: element.children[4].textContent,
status: element.children[5].textContent,
source: element.children[6].textContent,
languages: new Set(element.children[7].textContent.split(", ")),
medium: element.children[8].textContent,
};
});

const filter_elements = document.querySelectorAll("#filter input");
for(const element of filter_elements)
{
element.onchange = update_filters;
}

function update_filters()
{
const filter = {};
for(const element of filter_elements)
{
filter[element.id.replace(/filter_/, "")] = element.checked;
}

const show_all = !Object.values(filter).includes(true);
for(const os of os_info)
{
const show = show_all ||
filter["graphical"] && os.graphical ||
filter["text"] && !os.graphical ||
filter["linux"] && os.family === "Linux" ||
filter["bsd"] && os.family === "BSD" ||
filter["windows"] && os.family === "Windows" ||
filter["unix"] && os.family === "Unix" ||
filter["dos"] && os.family === "DOS" ||
filter["custom"] && os.family === "Custom" ||
filter["floppy"] && os.medium === "Floppy" ||
filter["cd"] && os.medium === "CD" ||
filter["hd"] && os.medium === "HD" ||
filter["modern"] && os.status === "Modern" ||
filter["historic"] && os.status === "Historic" ||
filter["opensource"] && os.source === "Open-source" ||
filter["proprietary"] && os.source === "Proprietary" ||
filter["bootsector"] && os.size <= 512 ||
filter["lt5mb"] && os.size <= 5 * 1024 * 1024 ||
filter["gt5mb"] && os.size > 5 * 1024 * 1024 ||
filter["16bit"] && os.arch === "16-bit" ||
filter["32bit"] && os.arch === "32-bit" ||
filter["asm"] && os.languages.has("ASM") ||
filter["c"] && os.languages.has("C") ||
filter["cpp"] && os.languages.has("C++") ||
filter["other_lang"] && ["Java", "Haskell", "Rust", "Erlang", "Oberon"].some(l => os.languages.has(l));

os.element.style.display = show ? "" : "none";
}
}

function set_proxy_value(id, value)
{
const elem = $(id);
Expand Down
85 changes: 74 additions & 11 deletions v86.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ body {
a {
color: wheat;
text-decoration: none;
cursor: pointer;
}
.phone_keyboard {
width: 0;
Expand Down Expand Up @@ -106,27 +107,80 @@ h4 {
font-weight: bold;
font-size: 16px;
}
#boot_options td {
#boot_options td, #boot_options th {
padding: 1px 7px;
}
#oses small {
font-size: 80%;
color: #ccc;
padding-left: 5px;
}
#oses tr {

#oses tbody tr {
cursor: pointer;
}
#oses {
border-spacing: 0;
}
#oses tr:hover {
#oses tbody tr:hover {
background-color: #311;
}
#oses td:nth-child(1) {
white-space: pre;
vertical-align: top;
#oses td:nth-child(2) {
text-align: right;
}
#oses thead {
text-align: left;
}

/* This is the best I managed to do with my little css experience.
If you can do better, please send a PR. */
@media (max-width: 1250px) {
#oses td:nth-child(9), #oses th:nth-child(9) {
display: none;
}
}
@media (max-width: 1150px) {
#oses td:nth-child(8), #oses td:nth-child(7), #oses th:nth-child(8), #oses th:nth-child(7) {
display: none;
}
}
@media (max-width: 1050px) {
#oses td:nth-child(5), #oses td:nth-child(6), #oses th:nth-child(5), #oses th:nth-child(6) {
display: none;
}
}
@media (max-width: 850px) {
#oses td:nth-child(4), #oses th:nth-child(4) {
display: none;
}
}
@media (max-width: 750px) {
#oses th:nth-child(2), #oses th:nth-child(3), #oses th:nth-child(10) {
display: none;
}
#oses td:nth-child(1), #oses td:nth-child(2), #oses td:nth-child(3) {
display: inline;
}
#oses td:nth-child(2), td:nth-child(3) {
font-size: smaller;
}
#oses td:nth-child(10) {
display: block;
padding-bottom: 10px;
}
}

label {
user-select: none;
white-space: nowrap;
}
input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
margin: 0;
}
#filter label {
background-color: #444;
padding: 2px 4px;
border-radius: 4px;
}

#terminal {
max-width: 1024px;
}
Expand All @@ -147,6 +201,15 @@ h4 {
}
}

.gui_icon {
height: 1em;
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 50"><path d="M65.6 102.7h15.3v5.1H65.6z" style="fill:white;fill-opacity:1;stroke:none" transform="translate(-64.1 -84.7)"/><path d="M80.9 92.4H118V118H81ZM65 103.6v25.6h38V118H80.8v-14.4z" style="fill:none;stroke:white;stroke-width:2;stroke-linecap:square" transform="translate(-64.1 -84.7)"/><path d="M80.9 92.4h37.9v5.1H80.9zm8.7 21.1v-12.3l7.6 7.6-2.7 1.5 1.9 3.2-1.8 1-2-3.4z" style="fill:white;fill-opacity:1;stroke:none" transform="translate(-64.1 -84.7)"/></svg>');
}
.tui_icon {
height: 1em;
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 48"><g style="fill:white"><path d="M91 127h26v5H91z" transform="translate(-64 -85)"/><path d="M118 17h26v5h-26z" transform="rotate(45 70 -120)"/><path d="M-43 139h26v5h-26z" transform="rotate(-45 -134 35)"/></g></svg>');
}

/* the code below was copied from xterm.css */

.xterm {
Expand Down

0 comments on commit 4d8b78d

Please sign in to comment.