diff options
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 414 |
1 files changed, 414 insertions, 0 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..701132b --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,414 @@ +<!-- +/** + * @license AGPL-3.0-OR-LATER + * @copyright 2024 memdmp + * + * Copyright (C) 2024 memdmp + * + * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. + */ + --> +<script lang="ts"> + import logo from "./boot-logo.png"; + import "./anim.css"; + import { architecture, hostname, tty, versions } from "./distro-info"; + import { login, ttyLines, type RenderBlock, type TTYText } from "./shared"; + import { onDestroy, onMount } from "svelte"; + + const initTagLine = `line flex flex-row flex-wrap gap-3 justify-between`; + + const fsckFileCount = Math.floor(Math.random() * 32768 + 6732); + const fsckTotalCount = Math.round( + (fsckFileCount / 6732) * 753664 + Math.random() * 10000, + ); + const blocksTotal = Math.floor(Math.random() * 8000000 + 4000000); + const blocksCount = Math.floor(Math.random() * 600000 + 200000); + + const lanLeastSignificantIPPart = Math.floor(Math.random() * 253 + 2); + + let isScripted = false; + onMount(() => (isScripted = true)); + onDestroy(() => (isScripted = false)); +</script> + +<svelte:head> + <title>mem.estrogen.zone</title> +</svelte:head> + +{#snippet tagLeft(colour: string)} + <span class="text-[{colour}]">*</span> +{/snippet} +{#snippet okTagLeft()} + {@render tagLeft("#51f051")} +{/snippet} +{#snippet tagRight(innerText: string, innerColour: string)} + <span class="text-[#5f5fff]">[</span> + <span class="text-[{innerColour}]">{innerText}</span> + <span class="text-[#5f5fff]">]</span> +{/snippet} +{#snippet okTagRight()} + {@render tagRight("ok", "#51f051")} +{/snippet} +{#snippet okLine(text: string, classes?: string, rightClass?: string)} + <div class="{initTagLine}{classes ? ' ' + classes : ''}"> + <div class="left"> + {@render okTagLeft()} + {text} + </div> + <div class="right{rightClass ? ' ' + rightClass : ''}"> + {@render okTagRight()} + </div> + </div> +{/snippet} +{#snippet ttyTextInnerRenderer(section: RenderBlock)} + <span + class="ttytext-block {section.colour + ? ` text-[${section.colour}]` + : ''}{section.bg ? ` bg-[${section.bg}]` : ''} {section.weight + ? ` ${['', 'font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black'][section.weight / 100]}` + : ''}{typeof section.italic === 'undefined' + ? '' + : section.italic + ? ' italic' + : ' not-italic'}{typeof section.underlined === 'undefined' + ? '' + : section.underlined + ? ` underline` + : ' no-underline'} inline" + >{#if section.raw}{@html section.value}{:else}{#each section.value + .split("\n") + .map( (l, i, a) => (i === a.length - 1 ? [0, l] : [1, l]), ) as [nl, l]}{l}{#if nl}<br + />{/if}{/each}{/if}</span + > +{/snippet} +{#snippet ttyTextMiddleRenderer( + section: RenderBlock, + line: TTYText & { kind: "text" }, +)} + {#if section.url} + {#if typeof section.url === "string"} + {#if section.url.startsWith("newtab:")} + <a + href={section.url.substring(7)} + target="_blank" + rel="noopener noreferrer" + class="no-underline text-inherit" + download={section.dl}>{@render ttyTextInnerRenderer(section)}</a + > + {:else if section.url.startsWith("currenttab:")} + <a + href={section.url.substring(11)} + class="no-underline text-inherit" + download={section.dl}>{@render ttyTextInnerRenderer(section)}</a + > + {:else} + ERR: Unknown Link Format + {/if} + {:else} + <span + on:click={() => + typeof section.url !== "function" ? void 0 : section.url(line)} + on:keypress={() => + typeof section.url !== "function" ? void 0 : section.url(line)} + role="link" + tabindex="0">{@render ttyTextInnerRenderer(section)}</span + > + {/if} + {:else} + {@render ttyTextInnerRenderer(section)} + {/if} +{/snippet} +{#snippet ttyText(line: TTYText)} + {#if line.kind === "text"} + {#if (line.renderrestriction ?? "everywhere") === "everywhere" || line.renderrestriction === "noscript" || (line.renderrestriction === "js-only" && isScripted)} + {#if line.renderrestriction === "noscript"} + <noscript class="inline-block max-w-[100%] {line.classes.join(' ')}" + >{#each line.value as v}{@render ttyTextMiddleRenderer( + v, + line, + )}{/each}</noscript + > + {:else} + <span class="inline-block max-w-[100%] {line.classes.join(' ')}" + >{#each line.value as v}{@render ttyTextMiddleRenderer( + v, + line, + )}{/each}</span + > + {/if} + {/if} + {/if} +{/snippet} + +<div class="hidden"> + {#each ["inline-block", "block", "flex", "inline-flex", "max-w-full", "font-thin", "font-extralight", "font-light", "font-normal", "font-medium", "font-semibold", "font-bold", "font-extrabold", "font-black"] as c} + <span class={c}></span> + {/each} +</div> + +<div class="fixed top-0 left-0 w-screen h-screen font-mono" id="app"> + <div + id="bios" + class="flex flex-col items-center justify-between relative font-bios text-lg" + > + <div class="top flex items-center justify-center flex-col"> + <div class="inner text-[#999999]"> + <p class="leading-4 mt-8 -mb-8 max-w-[36rem]"> + <span class="bdsdxe-load" + >BdsDxe: loading Boot0002 "UEFI Misc Device" from PciRoot + (0x0)/Pci(0x2,0x4)/Pci(0x0,0x0)</span + ><br /> + <span class="bdsdxe-start" + >BdsDxe: starting Boot0002 "UEFI Misc Device" from PciRoot + (0x0)/Pci(0x2,0x4)/Pci(0x0,0x0)</span + > + </p> + </div> + </div> + <div class="middle"> + <img + src={logo} + alt="Bootloader Logo" + class="w-32 h-32 flex items-center justify-center" + /> + </div> + <div + class="bottom flex flex-col items-stretch justify-center text-center gap-0.5 w-full pb-4" + > + <div class="start-text">Start boot option</div> + <div + class="bar h-4" + style={`background-image: url("data:image/svg+xml,${encodeURIComponent(`<svg width="32" height="32" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> + <rect x="1" y="1" width="30" height="30" fill="white" stroke="black" stroke-width="2"/> +</svg> +`)}");background-size:contain;`} + ></div> + </div> + </div> + <div id="grub" class="font-grub text-sm"> + <div + class="relative p-4 flex items-stretch justify-stretch flex-col w-screen h-screen" + > + <p class="title text-[#a2a2a2] mb-4 h-4 text-center"> + GNU GRUB version 2.12 + </p> + <div + class="outer-border border-2 border-[#a8a8a8] border-solid h-full px-1 py-2 flex flex-col items-stretch" + > + <div class="entry bg-[#a8a8a8] text-[#000] text-left"> + *Alpine Linux {versions.alpine.number}, with {versions.kernel + .humanReadable} + </div> + <div class="entry text-[#a8a8a8] text-left"> + UEFI Firmware Setup + </div> + </div> + <p class="footer text-[#a2a2a2] my-4 text-left pl-2"> + <span class="block pl-6"> + Use the ↑ and ↓ keys to select which entry is highlighted.<br /> + Press enter to boot the selected OS, `e' to edit the commands before booting + or `c' for a command-line.<br /> + </span> + The highlighted entry will be executed automatically in + <span class="grub-2s inline-block">2</span><span + class="grub-1s inline-block">1</span + >s. + </p> + </div> + </div> + <div id="grub-term" class="font-grub text-sm text-left text-[#a2a2a2]"> + <p class="p-8"> + Booting `Alpine Linux {versions.alpine.number}, with {versions + .kernel.humanReadable}'<br /><br /><span class="load-kernel" + >Loading {versions.kernel.humanReadable} ...</span + ><br /><span class="load-ramdisk">Loading initial ramdisk ...</span> + </p> + </div> + <!-- + flex col reverse and mb auto are hacks for it to auto scroll to bottom(!) + flex col reverse only works due to nested inner (which would be at bottom of screen, if it wasnt for mb-auto div above it) + --> + <div id="openrc" class="overflow-y-auto flex flex-col-reverse"> + <div class="mb-auto"></div> + <div class="font-mono leading-4 text-[#b9b9b9] flex flex-col p-4"> + <div class="line"> + <span class="text-[#51f051]">OpenRC</span> + <span class="text-[#4bdfdf]">{versions.openrc}</span> + is starting up Linux + <span class="text-[#5f5fff]">{versions.kernel.id} ({architecture})</span + > + </div> + <div class="line">​</div> + {@render okLine("/proc/ is already mounted")} + {@render okLine("Mounting /run ...")} + {@render okLine("/run/openrc: creating directory")} + {@render okLine("/run/lock: creating directory", "openrc-boot-step-1")} + {@render okLine("/run/lock: correcting owner", "openrc-boot-step-1")} + {@render okLine("Caching service dependencies ...", "openrc-boot-step-1")} + {@render okLine("Remounting devtmpfs on /dev ...", "openrc-boot-step-2")} + {@render okLine("Mounting /dev/mqueue ...", "openrc-boot-step-3")} + {@render okLine("Mounting security filesystem ...", "openrc-boot-step-4")} + {@render okLine("Mounting debug filesystem ...", "openrc-boot-step-5")} + {@render okLine( + "Mounting persistent storage (pstore) filesystem ...", + "openrc-boot-step-5", + )} + {@render okLine("Mounting efivarfs filesystem ...", "openrc-boot-step-5")} + {@render okLine("Starting busybox mdev ...", "openrc-boot-step-6")} + {@render okLine("Scanning hardware for mdev ...", "openrc-boot-step-6")} + {@render okLine("Loading hardware drivers ...", "openrc-boot-step-7")} + {@render okLine("Loading modules ...", "openrc-boot-step-8")} + {@render okLine( + "Setting system clock using the hardware clock [UTC] ...", + "openrc-boot-step-9", + )} + {@render okLine("Checking local filesystems ...", "openrc-boot-step-10")} + <div class="line openrc-boot-step-11"> + /dev/mapper/bepis: clean, {fsckFileCount}/{fsckTotalCount} files, {blocksCount}/{blocksTotal} + blocks + </div> + {@render okLine( + "Remounting root filesystem read/write ...", + "openrc-boot-step-12", + )} + {@render okLine("Remounting filesystems ...", "openrc-boot-step-13")} + {@render okLine("Activating swap devices ...", "openrc-boot-step-14")} + {@render okLine("Mounting local filesystems ...", "openrc-boot-step-15")} + {@render okLine( + "Configuring kernel parameters ...", + "openrc-boot-step-16", + )} + {@render okLine("Creating user login records ...", "openrc-boot-step-17")} + {@render okLine("Setting hostname ...", "openrc-boot-step-18")} + {@render okLine("Setting keymap ...", "openrc-boot-step-19")} + {@render okLine("Starting networking ...", "openrc-boot-step-20")} + {@render okLine("\xa0\xa0lo ...", "openrc-boot-step-21")} + {@render okLine("\xa0\xa0eth0 ...", "openrc-boot-step-22")} + <div class="line openrc-boot-step-22">udhcpd: started</div> + <div class="line openrc-boot-step-23">udhcpd: broadcasting discover</div> + <!-- TODO: configurable subnet uwu --> + <div class="line openrc-boot-step-24"> + udhcpd: broadcasting select for 192.168.1.{lanLeastSignificantIPPart}, + server 192.168.1.1 + </div> + <div class="line openrc-boot-step-25"> + udhcpd: lease of 192.168.1.{lanLeastSignificantIPPart} obtained from 192.168.1.1, + lease time 3600 + </div> + {@render okLine( + "Seeding random number generator ...", + "openrc-boot-step-26", + )} + {@render okLine( + "Seeding 256 bits without crediting", + "openrc-boot-step-26", + )} + {@render okLine( + "Saving 256 bits of creditable seed for next boot", + "openrc-boot-step-26", + )} + {@render okLine("Starting logbookd ...", "openrc-boot-step-27")} + {@render okLine("Starting busybox acpid ...", "openrc-boot-step-28")} + {@render okLine("Starting busybox crond ...", "openrc-boot-step-29")} + {@render okLine("Starting busybox ntpd ...", "openrc-boot-step-29")} + <div class="line openrc-boot-step-30">​</div> + <div class="line openrc-boot-step-30"> + Welcome to Alpine Linux {versions.alpine + .number}{#if versions.alpine.isEdge} (edge){/if} + </div> + <div class="line openrc-boot-step-30"> + Kernel {versions.kernel.humanReadable} on an {architecture} (/dev/{tty}) + </div> + <div class="line openrc-boot-step-30">​</div> + <div class="line openrc-boot-step-30"> + {hostname} login: <span class="openrc-username" + >{#each login.username + .split("") + .map((v, i) => [v, i] as const) as [char, idx]}<span + class="openrc-username-char openrc-username-char-{idx} inline-block" + >{char}</span + >{/each}</span + ><span class="openrc-hide-at-login-prompt-username-done" + ><span class="openrc-username-anim" + ><code class="hidden-after-anim">_</code></span + ></span + ><span class="openrc-pw-line" + ><br /> + Password: <span class="openrc-password-anim" + ><code class="hidden-after-anim">_</code></span + ></span + > + </div> + <!-- TODO: Animate login and launching a tui here (for js enjoyers) or a minimal terminal after clearing the screen, and a no js screen alongside a plaintext version of the thing (for schizo noscript lovers) --> + <div class="hidden-after-anim"> + <span class="openrc-hide-at-last-boot-step inline-block"> + <pre class="flashing-cursor">_</pre> + </span> + </div> + <div class="line ttylines-openrc font-mono text-[#070505] flex flex-col"> + {#each ttyLines.filter(((maxidx) => (_, i) => i < (maxidx === -1 ? Infinity : maxidx))(ttyLines.findIndex((v) => v.kind === "clear"))) as line} + {@render ttyText(line)} + {/each} + </div> + </div> + </div> + {#if ttyLines.find((v) => v.kind === "clear")} + {#each ttyLines + .map((v, i) => [v, i] as const) + .filter(([v]) => v.kind === "clear") + .map((v, i, a) => [v[1], a[i + 1]?.[1], i]) as [idx, nextIdx, clearIdx]} + <div + id="tty-{clearIdx}" + class="overflow-y-auto max-h-screen flex flex-col-reverse" + > + <div class="mb-auto"></div> + <div class="font-mono leading-4 text-[#070505] flex flex-col p-4"> + {#each ttyLines.filter((_, i) => i >= idx && i < (nextIdx ?? Infinity)) as line} + {@render ttyText(line)} + {/each} + </div> + </div> + {/each} + {/if} +</div> + +<style> + @keyframes flashing-cursor { + 0% { + opacity: 0; + } + 49% { + opacity: 0; + } + 50% { + opacity: 1; + } + 99% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + .flashing-cursor { + animation-name: flashing-cursor; + animation-duration: 0.4s; + animation-iteration-count: infinite; + animation-timing-function: linear; + } + .hidden-after-anim { + margin-top: -99999vh; + margin-bottom: 99999vh; + margin-left: -99999vw; + margin-right: 99999vw; + transform: scaleX(0); + opacity: 0; + } + .ttytext-block { + white-space-collapse: preserve-spaces; + } +</style> |