From 822eb31a496d9b95f16d5a2f88dcf0ebedda3c4c Mon Sep 17 00:00:00 2001 From: Fabian Date: Fri, 18 Oct 2024 16:03:48 -0600 Subject: [PATCH] new layout for frontpage, filters, mobile-friendly table --- index.html | 157 +++++++++++++++++++++++++++++--------------- src/browser/main.js | 66 +++++++++++++++++++ v86.css | 85 ++++++++++++++++++++---- 3 files changed, 243 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index 9c50016c2a..e3e540d8ae 100644 --- a/index.html +++ b/index.html @@ -10,64 +10,113 @@
-

Select profile

+
+ Family: + + + + + + + + UI: + + + Medium: + + + + Size: + + + + Status: + + + License: + + + Arch: + + + + + + Lang: + + + + + +
Skip to custom settings
+
+
+
+ - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Arch Linux 12 MB >_ - Complete Arch Linux with various compilers, networking and Xorg. Restored from snapshot.
Damn Small Linux 50 MB 💻 - Graphical Linux with 2.4 kernel, Firefox 2.0 and more. Takes 1 minute to boot.
Buildroot Linux 5.0 MB >_ - Minimal Linux with busybox, Lua, tests, internet access, ping, telnet and curl. Exchange files through /mnt/.
ReactOS 18 MB 💻 - Windows-compatible OS with QtWeb and Breakout. Restored from snapshot.
Windows 2000 22 MB 💻 - Including Pinball and Internet Explorer with internet access. Additional sectors are loaded as needed.
Windows 98 9.7 MB 💻 - Including Minesweeper and Internet Explorer with internet access. Additional sectors are loaded as needed.
Windows 95 4.6 MB 💻 - Restored from snapshot
Windows 3.1 15 MB 💻 - Takes 15 seconds to boot
Windows 1.01 0.6 MB 💻 - The first version of Microsoft Windows
MS-DOS 6.22 4.4 MB >_ - With Enhanced Tools, QBasic, vim, games and demos.
FreeDOS 0.5 MB >_ - With nasm, vim, debug.com, Rogue, some games and demos.
FreeBSD 17 MB >_ - FreeBSD 12.0 base install. Restored from snapshot.
OpenBSD 12 MB >_ - OpenBSD 6.6 base install. Restored from snapshot.
9front 4.4 MB 💻 - A Plan 9 fork.
Haiku 38 MB 💻 - An open-source operating system inspired by BeOS. Restored from snapshot. Includes network support.
SerenityOS 17 MB 💻 - A graphical Unix-like operating system. Restored from snapshot.
HelenOS 7.9 MB 💻 - A graphical operating system based on a multiserver microkernel design
FiwixOS 15 MB >_ - A Unix-like OS written from scratch. Includes Doom.
Android-x86 42 MB 💻 - An x86 port of the Android 1.6. Quite slow. Takes about 3 minutes to boot.
Oberon 1.2 MB 💻 - Native Oberon 2.3.6
KolibriOS 1.4 MB 💻 - Fast graphical OS written in Assembly
QNX 1.3 MB 💻 - QNX 4.05 Demo disk (no networking)
Snowdrop 0.3 MB >_ - A homebrew operating system from scratch, written in assembly language
Solar OS 0.3 MB 💻 - Simple graphical OS
Bootchess 512 B >_ - A tiny chess program written in the boot sector
SectorLISP 512 B >_ - A LISP interpreter that fits into the boot sector
NameSizeUIFamilyArchStatusSourceLangMediumNotes
Arch Linux 15+ MB Linux 32-bit Modern Open-source C 9pfs Xorg, Firefox, various compilers and more
Damn Small Linux 50 MB Linux 32-bit Historic Open-source C CD 4.11.rc2 with Firefox 2.0
Buildroot Linux 4.9 MB Linux 32-bit Modern Open-source C bzImage Lua, ping, curl, telnet
FreeBSD 16+ MB BSD 32-bit Modern Open-source C HD FreeBSD 12.0
OpenBSD 11+ MB BSD 32-bit Modern Open-source C HD OpenBSD 6.6
FiwixOS 15+ MB Unix-like 32-bit Modern Open-source C HD With Doom
SerenityOS 16+ MB Unix-like 32-bit Modern Open-source C++ HD Web browser, various games and demos
Haiku 41+ MB BeOS 32-bit Modern Open-source C++ HD Networking (WebPositive), OCaml, 2048, NetHack
Tiny Aros 17+ MB AmigaOS 32-bit Modern Open-source C CD AmigaOS-like graphical OS
ReactOS 17+ MB Windows-like 32-bit Modern Open-source C++ HD QtWeb, LBreakout2, OpenTTD, Bochs, TCC
Windows 1.01 0.7 MB Windows 16-bit Historic Proprietary ASM, C Floppy Reversi, Paint
Windows 95 19+ MB Windows 32-bit Historic Proprietary ASM, C HD Age of Empires, FASM, POV-Ray, Hover!
Windows 2000 23+ MB Windows 32-bit Historic Proprietary C++ HD IE 5, Pinball
MS-DOS 6.22 2.4+ MB DOS 16-bit Historic Proprietary ASM HD Doom, Sim City, OCaml 1.0, Turbo C and more
FreeDOS 0.6 MB DOS 16-bit Modern Open-source ASM, C Floppy nasm, vim, debug.com, Rogue, various demos
KolibriOS 1.3 MB Custom 32-bit Modern Open-source ASM Floppy Various apps, games and demos
QNX 4.05 1.4 MB Custom 32-bit Historic Proprietary C Floppy 1999 demo disk
-

Setup

+

Setup

diff --git a/src/browser/main.js b/src/browser/main.js index d5109421e1..4ea1f55876 100644 --- a/src/browser/main.js +++ b/src/browser/main.js @@ -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); diff --git a/v86.css b/v86.css index d25f480c18..5088ef52e3 100644 --- a/v86.css +++ b/v86.css @@ -63,6 +63,7 @@ body { a { color: wheat; text-decoration: none; + cursor: pointer; } .phone_keyboard { width: 0; @@ -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; } @@ -147,6 +201,15 @@ h4 { } } +.gui_icon { + height: 1em; + content: url('data:image/svg+xml,'); +} +.tui_icon { + height: 1em; + content: url('data:image/svg+xml,'); +} + /* the code below was copied from xterm.css */ .xterm {