Total about page redesign. Other random improvements to the home page.

1 files changed, 278 insertions, 431 deletions

diff --git a/about_l.html b/about_l.html
index 06cf56f..3a06058 100644
--- a/about_l.html
+++ b/about_l.html
@@ -1,433 +1,280 @@
 <div class="TText">
-<h3>Properties:</h3>
-<p>
-	<ul>
-		<li>software developer (a.k.a. bug generator)
-			<ul>
-				<li>writes leaky C/C++ code</li>
-				<li>whose OpenGL code never works on machines other than mine</li>
-				<li>mixes legacy and cutting-edge features of JavaScript in a single library</li>
-				<li>builds never-bootable Android ROMs</li>
-			</ul>
-		</li>
-		<li>hardware terminator (as always)</li>
-			<ul>
-				<li>server of this site use to be a self-built machine</li>
-				<li>many failed attempts to repair my gadgets (a few of them did succeed though)</li>
-				<li>now trying to collect vintage hardware (to mess around with)</li>
-				<li>tried to build a 'computer' out of redstone in Minecraft (does not look like it will be finished anytime soon)</li>
-			</ul>
-		<li>former competitive programmer</li>
-			<ul>
-				<li>Nightmare Of mIne 2014</li>
-				<li>All ICPC regional attempts failed spectacularly</li>
-			</ul>
-		<li>music producer (sometimes)</li>
-		<li>no MBTI category provided because the model is flawed</li>
-		<li>16PF results hidden somewhere in the page, from A to Q4 with scores ranging from 0 to 4</li>
-		<!--2.4, 3.1, 2.9, 3, 1.5, 1.4, 0.4, 2.1, 1.4, 3, 2.8, 1.4, 3.2, 3.3, 3, 1.1-->
-		<li>heart disease confirmed (so be peaceful, please)</li>
-		<li>likes to live on the edge (uses Gentoo and Debian sid)</li>
-		<li>simple &amp; stupid (have a look at the design of this site)</li>
-		<li>dreamer, freedom seeker and more...</li>
-	</ul>
-</p>
-<p>
-	<s>Religious</s> beliefs: Free software, K.I.S.S., Linux (or GNU/Linux if you so prefer), LF for line breaks, UTF-8, <s>FSF</s>.
-</p>
-<p>
-	Chris Xiong is a not-so-young-any-more coder from a small city of China.
-	Now aged more than 20, this hacker is still just writing code for fun. Crazy follower
-	of &quot;Free Software&quot; (but not FSF's ideology in particular).
-	Develops free software alone but seldom feels lonely. Sincere friends
-	are always cherished.
-</p>
-<p>
-	This site was written from scratch in XHTML without using any kind of framework whatsoever.
-	Later it was migrated to HTML5 (still not using 3rd-party frameworks).
-	Poorly-written C++ and Python code powers the backend.
-	History of this site is available <a href="./History">here</a> and more <a href="https://cgit.chrisoft.org/web.git/">here</a>.
-
-</p>
-<h3>Contact me (if you so desire)!</h3>
-<p style="text-indent:0;">
-	<!--Mastodon: <a href="https://c.im/@chirs241097">chirs241097@c.im</a><br> Archived.
-	Twitter: <a href="https://twitter.com/chirs241097">(sorry I blocked the entire website but in case you still want to visit that cesspool)</a><br>-->
-	E-Mail: <code style="font-weight:bold;" class="TText">chris&#64;pineapple.cat</code><br>
-	Alternative E-Mail: <code style="font-weight:bold;text-decoration:underline dotted;" class="TText" title="Paste this into a POSIX-compliant shell. Sorry Windows users.">echo '49:CDac`_hfo8>2:=]4@>' | tr '\!-~' 'P-~\!-O'</code><br>
-	Matrix: @chirs241097:matrix.org<br>
-	Discord: (Please get in touch with me using one of the other methods listed here first)<br>
-	<a href="/pubkey.txt">GPG key</a><br>
-	<!--Tox:<br> Removed due to longterm inactivity
-	<img id="ti" src="toxid.png" alt="FA05874036F00DB86A512B076C354D804BD1BC7BBEC0832823D115ADD2CAF5645D4C420DE23F" width="120" height="120">
-	<br>-->
-</p>
-    <span class="TText">If you're brave...</span><br>
-	<a class="TText" onclick="this.remove();document.getElementById('evil').style.display=null;">...Show me more!</a>
-	<table id="evil" class="TText" style="width:75%;margin:auto;display:none;border-collapse:collapse;">
-		<style>td{border:1px solid #ccc;}</style>
-		<tr>
-			<td style="width:40%">Gender</td>
-			<td><b>null</b></td>
-		</tr>
-		<!--<tr>
-			<td>Blood type</td>
-			<td>A+ (why is this even here? emergency personnel won't ever find this...)</td>
-		</tr>-->
-		<tr>
-			<td>Birth</td>
-			<td>1997-10-24 17:36</td>
-		</tr>
-		<tr>
-			<td>Ancestry</td>
-			<td>重慶&nbsp;涪陵&nbsp;&nbsp;Chongqing Fuling</td>
-		</tr>
-		<tr>
-			<td>Occupation</td>
-			<td>(pre-candidacy) PhD student in CS somewhere<br>"Free" free software developer</td>
-		</tr>
-		<tr>
-			<td>Personality</td>
-			<td>In a word: weird. You can find out more in my blog posts.</td>
-		</tr>
-		<tr>
-			<td>Favourite motto</td>
-			<td>「多行不義必自斃」<br>Unjust is doomed to destruction</td>
-		</tr>
-		<tr>
-			<td>Skills</td>
-			<td>
-				<details>
-				<summary>Messing around</summary>
-					C++ (63 out of 100)<br>
-					C (65 out of 100)<br>
-					Pascal (64 out of 100, declining, though)<br>
-					Rust (60 out of 100)<br>
-					Scheme and other LISP-like stuff (55 out of 100)<br>
-					Standard ML and OCaml (52 out of 100)<br>
-					HTML and XML (59 out of 100)<br>
-					CSS (58 out of 100)<br>
-					JavaScript (61 out of 100)<br>
-					Java (53 out of 100)<br>
-					PHP (36 out of 100)<br>
-					Python (61 out of 100)<br>
-					Shell scripting (60 out of 100)<br>
-					C# (28 out of 100)<br>
-					"Modern" OpenGL (58 out of 100, GL 3.0+, GLES, WebGL)<br>
-					"Legacy" OpenGL (65 out of 100, GL 1.x~2.x)<br>
-					"Legacy" DirectX (60 out of 100, DX 7, 8 and 9)<br>
-					Vulkan (Copy-pasting tutorial out of 100)
-				</details>
-				<details>
-				<summary>Messing around</summary>
-					Competitive programming (56 out of 100) <br>
-					Software engineering (26 out of 100) (wtf is this bs?) <br>
-					Reverse engineering (40 out of 100) <br>
-					Starting side projects and never finishing them (101 out of 100) <br>
-					Minecraft modding (33 out of 100)
-				</details>
-				<details>
-				<summary>Messing around</summary>
-					Linux (62 out of 100) (Daily usage/server maintenance and troubleshooting only. Kernel hacking not (really) included.)<br>
-					Windows (55 out of 100) (Even lesser than above)<br>
-					macOS (33 out of 100) (Worst OS, ever!)
-				</details>
-				<details>
-				<summary>Messing around</summary>
-					Piano (45 out of 100, declining)<br>
-					Cakewalk SONAR (65 out of 100)<br>
-					Cubase (36 out of 100)<br>
-					Collecting hardware synth that I'll never master (95 out of 100)
-				</details>
-				<details>
-				<summary>Messing around</summary>
-					GIMP (63 out of 100, image processing only)<br>
-					Inkscape (61 out of 100, simple patterns only)<br>
-					Kdenlive (58 out of 100, simple projects only)<br>
-					Blender (47 out of 100, never learned hotkeys)<br>
-					Photoshop (40 out of 100, declining)<br>
-					Flash (nvm, it's dead now!)
-				</details>
-				<details>
-				<summary>Messing around</summary>
-					Chinese (3 out of 100, simplified and traditional)<br>
-					English (4 out of 100)<br>
-					Latin (3 out of 100, classical Latin)<br>
-					French (1 out of 100)<br>
-					Japanese (N/A out of 100)
-				</details>
-				<details>
-				<summary>Messing around</summary>
-					Repairing <s>disassembling</s> (mostly electric) gadgets. (65 out of 100)
-				</details>
-			</td>
-		</tr>
-		<tr>
-			<td>Current Devices (plus previous devices in HTML comment blocks)</td>
-			<td>
-				<details>
-				<summary>Homelab "Harena"</summary><ul>
-					<li>2×Intel Xeon Platinum 8260L</li>
-					<li>8×32GB DDR4-2666 Samsung ECC RAM</li>
-					<li>Supermicro X11DPH-T</li>
-					<li>NVIDIA RTX A4000 (PNY)</li>
-					<li>AMD RX 7900 XTX (Yeston)</li>
-					<li>Intel Arc A770 16GB (ASRock)</li>
-					<li>Samsung 980 Pro (2TB)</li>
-					<li>Samsung 990 Pro (2TB)</li>
-					<li>Gentoo GNU/Linux ~amd64</li>
-					<li>Windows 11 Pro x64 (virtualized)</li>
-				</ul></details>
-				<details>
-				<summary>DIY ITX tower "Alice" (former server of this site)</summary><ul>
-					<li>Intel Core i7-2960XM (4.5 GHz max turbo, 96W PL2, 72W PL1)</li>
-					<li>2×8GB DDR3L-1600 Samsung RAM</li>
-					<li>Supermicro X9SCV-QV4</li>
-					<li>Intel HD Graphics 3000</li>
-					<li><s>NVIDIA RTX 2080 FE</s> (repurposed as eGPU)</li>
-					<li>Crucial M4-CT256M4SSD2 (256GB)</li>
-					<li>Hitachi HTS725032A9A364 (320GB)</li>
-					<li>HGST HTS721010A9E630 (1TB)</li>
-					<li>Debian GNU/Linux sid (unstable) amd64</li>
-				</ul></details>
-				<details>
-				<summary>Semi-retro tower "Concordia"</summary><ul>
-					<li>Intel Core 2 Extreme QX9650 (running at 3.6 GHz)</li>
-					<li>4×4GB DDR3-1600 Kingston RAM</li>
-					<li>Gigabyte GA-EP43T-USB3 rev 1.0</li>
-					<li>NVIDIA GTX 960 (ZOTAC), OR</li>
-					<li>AMD RX 550 4GB LP (Yeston)</li>
-					<li>Crucial M4-CT128M4SSD2 (128GB)</li>
-					<li>Segate Barracuda 7200.12 (500GB)</li>
-					<li>Debian GNU/Linux stable amd64</li>
-					<li>Windows 7 Ultimate x64</li>
-					<li>Windows XP Professional x64 Edition</li>
-				</ul></details>
-				<!-- SECOND FAMILY PC, DISASSEMBLED FOR PARTS
-				<details>
-				<summary>Lenovo ideacenter K300 (unnamed)</summary><ul>
-					<li>Intel Core 2 Duo Q8300</li>
-					<li>4×2GB DDR3-1066 RAM</li>
-					<li>NVIDIA GT 320</li>
-					<li>Crucial M4-CT128M4SSD2 (128GB)</li>
-					<li>Segate Barracuda 7200.12 (500GB)</li>
-					<li>Windows 7 Ultimate x64</li>
-				</ul></details>-->
-				<!-- FIRST FAMILY PC, SOLD FOR SCRAP
-				<details>
-				<summary>LEGEND (now Lenovo) 1+1 "天麟" (unnamed)</summary><ul>
-					<li>Intel Pentium 4 2.4 GHz Northwood (Non-HT)</li>
-					<li>512 MB RAM</li>
-					<li>NVIDIA GeForce4 MX440</li>
-					<li>80GB Segate HDD</li>
-					<li>Windows XP Home</li>
-				</ul></details>-->
-				<details>
-				<summary>Framework Laptop (11th gen Intel) "Freddy"</summary><ul>
-					<li>4th batch</li>
-					<li>Intel Core i7-1185G7</li>
-					<li>64GB DDR4-3200 Crucial RAM</li>
-					<li>Intel Iris Xe Graphics</li>
-					<li>NVIDIA RTX 2080 FE (eGPU)</li>
-					<li>Matte 2256×1504 LCD (retrofit)</li>
-					<li>1TB Samsung 970 Pro</li>
-					<li>Gentoo GNU/Linux ~amd64</li>
-					<li>Windows 11 Insider Pro x64</li>
-				</ul></details>
-				<details>
-				<summary>Lenovo ThinkPad X1 Yoga 1st Gen. 20FQ "Terry"</summary><ul>
-					<li>Intel Core i7-6600U</li>
-					<li>16GB DDR3L-1866 Samsung RAM</li>
-					<li>Intel HD Graphics 520</li>
-					<li>WQHD OLED Panel (retrofit)</li>
-					<li>512GB Samsung NVMe SSD</li>
-					<li>Gentoo GNU/Linux ~amd64</li>
-				</ul></details>
-				<details>
-				<summary>Steam Deck "Shannon"</summary><ul>
-					<li>I have no idea why I got this</li>
-					<li>Custom AMD Zen2 APU</li>
-					<li>16 GB LPDDR5</li>
-					<li>AMD RDNA2 Integrated</li>
-					<li>256GB PCIe 3.0 x4 NVMe SSD</li>
-					<li>Arch Linux amd64</li>
-				</ul></details>
-				<details>
-				<summary>IBM ThinkPad X60 Tablet 6363-C7U "Tegan"</summary><ul>
-					<li>Intel Core 2 Duo L7400</li>
-					<li>4GB DDR2-667 Samsung RAM</li>
-					<li>Intel GMA 950</li>
-					<li>240GB Sandisk SSD</li>
-					<li>Debian sid amd64</li>
-					<li>Windows 7 Ultimate x64</li>
-				</ul></details>
-				<details>
-				<summary>IBM ThinkPad T43 2686-DGU "Terrenum"</summary><ul>
-					<li>Intel Pentium M 750</li>
-					<li>2GB DDR2-667 Samsung RAM (running at 533 MT/s)</li>
-					<li>ATI Mobility Radeon X300</li>
-					<li>60GB Hitachi PATA HDD (SATA Mod in process)</li>
-					<li>Debian sid i386</li>
-					<li>Windows XP Professional SP3</li>
-				</ul></details>
-				<details>
-				<summary>Apple PowerBook G4 A1138 "Marian"</summary><ul>
-					<li>PowerPC 7447A</li>
-					<li>2GB DDR2-667 Samsung RAM (running at 533 MT/s)</li>
-					<li>ATI Mobility Radeon 9700</li>
-					<li>100GB Hitachi PATA HDD</li>
-					<li>OpenBSD 7.5 macppc</li>
-					<li>Mac OS X 10.5.8</li>
-				</ul></details>
-				<!-- FIRST PRIVATE LAPTOP, DISASSEMBLED FOR PARTS, REINCARNATED AS "ALICE"
-				<details>
-				<summary>Lenovo IdeaPad Y570 (unnamed)</summary><ul>
-					<li>Intel Core i7-2670QM -> i7-2960XM</li>
-					<li>2×8GB DDR3L-1600 Samsung RAM</li>
-					<li>NVIDIA GT 555M (GF108, 1GB GDDR5)</li>
-					<li>Crucial M4-CT256M4SSD2 (256GB)</li>
-				</ul></details>-->
-				<!-- PARENTS' WORK LAPTOP, NO LONGER IN POSSESSION
-				<details>
-				<summary>IBM ThinkPad R52 (unnamed, unknown type number)</summary><ul>
-					<li>Intel Pentium M 725A</li>
-					<li>768MB RAM</li>
-					<li>ATI Mobility Radeon X300</li>
-					<li>40GB Hitachi PATA HDD</li>
-					<li>Windows XP Professional SP3</li>
-				</ul></details>-->
-				<!-- PARENTS' WORK LAPTOP, NO DISK
-				<details>
-				<summary>ASUS A8M (unnamed)</summary><ul>
-					<li>AMD Mobile Sempron 3200+</li>
-					<li>3GB RAM</li>
-					<li>NVIDIA GeForce Go 6100 (integrated)</li>
-				</ul></details>-->
-				<details>
-				<summary>Raspberry Pi 2 "Regan" (NIU)</summary><ul>
-					<li>8GB MicroSD Card</li>
-					<li>rev 1.1</li>
-					<li>Raspbian testing (buster)</li>
-				</ul></details>
-				<details>
-				<summary>Raspberry Pi 3B+ "Raven" (NIU)</summary><ul>
-					<li>Broken MicroSD card slot</li>
-					<li>Arch Linux ARM (aarch64) on USB</li>
-				</ul></details>
-				<details>
-				<summary>Raspberry Pi 4B "Royce"</summary><ul>
-					<li>4GB RAM, rev 1.1</li>
-					<li>32GB MicroSD Card</li>
-					<li>Custom FrankenDebian (aarch64)</li>
-				</ul></details>
-				<details>
-				<summary>Raspberry Pi 4B "Rubrica"</summary><ul>
-					<li>8GB RAM, rev 1.5</li>
-					<li>64GB MicroSD Card</li>
-					<li>Arch Linux ARM</li>
-				</ul></details>
-				<details>
-				<summary>Raspberry Pi Zero WH "Rhodes"</summary><ul>
-					<li>32GB MicroSD Card</li>
-					<li>Raspbian testing</li>
-				</ul></details>
-				<details>
-				<summary>Raspberry Pi Zero 2 "Rhea"</summary><ul>
-					<li>64GB MicroSD Card</li>
-					<li>Arch Linux ARM</li>
-				</ul></details>
-				<details>
-				<summary>Sony XPERIA 1 II</summary><ul>
-					<li>256GB Internal Storage</li>
-					<li>Custom built LineageOS 20</li>
-				</ul></details>
-				<!-- NOW IN PARENTS' POSSESSION
-				<details>
-				<summary>Xiao Mi MIX 3</summary><ul>
-					<li>256GB Internal Storage</li>
-					<li>Custom built crDroid 7.9</li>
-				</ul></details>
-				-->
-				<!-- BACKUP PHONE FOR PARENTS
-				<details>
-				<summary>Samsung Galaxy Note 4</summary><ul>
-					<li>SM-N9100</li>
-					<li>16GB Internal Storage</li>
-					<li>Custom built LineageOS 16.0</li>
-				</ul></details>
-				-->
-				<!-- NO LONGER IN POSSESSION
-				<details>
-				<summary>Samsung Galaxy S III</summary><ul>
-					<li>GT-I9300</li>
-					<li>16GB Internal Storage</li>
-					<li>LineageOS 14.1</li>
-				</ul></details>-->
-				<!-- NO LONGER IN POSSESSION
-				<details>
-				<summary>Samsung Galaxy Tab 2 7.0</summary><ul>
-					<li>GT-P3100</li>
-					<li>8GB Internal Storage</li>
-					<li>LineageOS 13.0</li>
-				</ul></details>-->
-				<!-- SMASHED SCREEN
-				<details>
-				<summary>Xiaomi MAX</summary><ul>
-					<li>Standard edition (msm8956)</li>
-					<li>32GB Internal Storage</li>
-					<li>Stock MIUI Beta ROM</li>
-				</ul></details>-->
-				<!-- NO LONGER IN POSSESSION
-				<details>
-				<summary>BlackBerry Curve 8900</summary><ul>
-				</ul></details>-->
-				<!-- NO LONGER IN POSSESSION
-				<details>
-				<summary>NOKIA 500</summary><ul>
-				</ul></details>-->
-				<!-- NO LONGER IN POSSESSION
-				<details>
-				<summary>NOKIA C5-03</summary><ul>
-				</ul></details>-->
-				<details>
-				<summary>iPod classic 120GB (Modded)</summary><ul>
-					<li>Rev. 3 logic board</li>
-					<li>128GB SSD</li>
-					<li>Rockbox</li>
-				</ul></details>
-			</td>
-		</tr>
-		<tr>
-			<td>Wishlist</td>
-			<td>
-				<s>Something something threadripper, or epyc</s><br>
-				<s>All kinds of vintage tech gadgets</s>
-			</td>
-		</tr>
-		<tr>
-			<td colspan="2">
-				PFAQs:
-				<p style="text-indent:0;">
-				Q1: Why is it "chirs241097" instead of "chris241097" in your usernames?<br>
-				A1: That was an old typo...
-				<br>
-				However according to the Haskell tutorial found at haskell.org,
-				<code>"chirs" == sort "chris"</code>
-				and is her twin nemesis. That would be a very playful joke.
-				<br>
-				Why use 'her' here? Simply because my textbook on Operating System Concepts
-				does so.
-				</p>
-				<p style="text-indent:0;">
-				Q2: Why do the pages on your site look <i>so</i> ugly?<br>
-				A2: The reason is simple but "irrefutable": I simply <i>like</i> this style.
-				</p>
-				<p style="text-indent:0;">
-				Q3: What the hell is the favicon of your site?<br>
-				A3: Well, it's something I cobbled together in a minute, half of which was me
-				picking the color :).
-				</p>
-			</td>
-		</tr>
-	</table>
+<h3><ruby>linguae<rp>(</rp><rt>languages</rt><rp>)</rp></ruby></h3>
+<div class="ubx-container">
+<div class="ubx"><div class="ubx-ll">ipa-0</div>
+<div class="ubx-lr">This user does not understand the International Phonetic Alphabet.</div></div>
+
+<div class="ubx"><div class="ubx-ll">en-0</div>
+<div class="ubx-lr">This user does not understand English (or understands it with considerable difficulty).</div></div>
+
+<div class="ubx"><div class="ubx-ll">fr-0</div>
+<div class="ubx-lr"><span title="French-language text" lang="fr-fr">Cet utilisateur ne comprend pas le français ou seulement avec des difficultés notables.</span></div></div>
+
+<div class="ubx"><div class="ubx-ll">zh-0</div>
+<div class="ubx-lr"><span title="Chinese-language text" lang="zh-hk">此用戶無法理解中文，或難以理解中文。</span></div></div>
+
+<div class="ubx"><div class="ubx-ll">la-0</div>
+<div class="ubx-lr"><span title="Latin-language text" lang="la">HIC·&#8203;VSOR·&#8203;LINGVAM·&#8203;LATINAM·&#8203;NON·&#8203;INTELLEGIT·&#8203;AVT·&#8203;EAM·&#8203;INTELLEGIT·&#8203;AEGRE.</span></div></div>
+
+<div class="ubx"><div class="ubx-ll" style="font-family:serif;font-weight:500;font-size:14px;"><div><span title="Chinese-language text" lang="zh-hk">漢字</span><br><s title="Chinese-language text" lang="zh-cn">汉字</s></div></div>
+<div class="ubx-lr"><span title="Chinese-language text" lang="zh-hk">此用戶反對運動式的漢字簡化。</span></div></div>
+
+<div class="ubx"><div class="ubx-ll" style="font-size:24px;">⸮</div>
+<div class="ubx-lr">This about page contains sarcasm.</div></div>
+</div>
+<hr>
+<h3><ruby>res meae<rp>(</rp><rt>facts about me</rt><rp>)</rp></ruby></h3>
+<div class="ubx-container">
+<div class="ubx"><div class="ubx-ll">cs.PL</div>
+<div class="ubx-lr">This user is a computer scientist wannabe.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/icpc.svg" class="hf" alt="Logo of the International Collegiate Programming Contest"></div>
+<div class="ubx-lr">This user was into competitive programming once upon a time.</div></div>
+
+<script>
+function ubxLocalTimeInit() {
+	const ZONE = "America/New_York";
+	//https://stackoverflow.com/a/63199512
+	const getTimezoneOffset = (timeZone, date = new Date()) => {
+		const tz = date.toLocaleString("en", {timeZone, timeStyle: "long"}).split(" ").slice(-1)[0];
+		const dateString = date.toString();
+		const offset = Date.parse(`${dateString} UTC`) - Date.parse(`${dateString} ${tz}`);
+		return offset;
+	}
+	window.utcoffset = getTimezoneOffset(ZONE);
+	const formatLocalTimeISO = (d, offset) => {
+		const s = d.toISOString();
+		const ssub = s.substring(s, s.length - 5);
+		if (offset == 0) {
+			return ssub + 'Z';
+		} else {
+			let offsetmin = Math.floor(Math.abs(offset) / 60000);
+			const offsethr = Math.floor(offsetmin / 60);
+			offsetmin %= 60;
+			return ssub + (offset > 0 ? '+' : '-') + offsethr.toString().padStart(2, '0') + ':' + offsetmin.toString().padStart(2, '0');
+		}
+	}
+	const updatetime = () => {
+		const dsre = /([0-9\-]*)(T)([0-9:.]*)(Z|[+-−][0-9:.]*)/;
+		let d = new Date(Date.now() + window.utcoffset);
+		if (d.getUTCSeconds() == 0 && d.getUTCMinutes() == 0) {
+			window.utcoffset = getTimezoneOffset(ZONE);
+			d = new Date(Date.now() + window.utcoffset);
+		}
+		const offsethrstr = "UTC" + (window.utcoffset > 0 ? '+' : '-') + Math.floor(Math.abs(window.utcoffset) / 3600000);
+		document.getElementById("ubx-tz").innerHTML = offsethrstr;
+		const m = formatLocalTimeISO(d, window.utcoffset).match(dsre);
+		document.getElementById("ubx-localtime-time").innerHTML = `${m[1]}<span class="datet">${m[2]}</span>${m[3]}<span class="datetz">${m[4]}</span>`;
+	}
+	document.getElementById("ubx-localtime").innerHTML = `This user's localtime is <br><span id="ubx-localtime-time"></span>.`;
+	document.getElementById("ubx-localtime").title = ZONE;
+	updatetime();
+	window.setInterval(updatetime, 1000);
+}
+document.addEventListener("DOMContentLoaded", ubxLocalTimeInit);
+</script>
+<div class="ubx"><div class="ubx-ll" style="white-space:unset;font-size:12px;" id="ubx-tz">UTC-4 UTC-5</div>
+<div class="ubx-lr" id="ubx-localtime">The zoneinfo entry for this user's localtime is America/New_York.</div></div>
+
+<div class="ubx"><div class="ubx-ll" style="white-space:unset;"><span style="transform:scale(.85,1);" title="Fear of the number four">TETRA-PHOBIA</span></div>
+<div class="ubx-lr">This user is of Chinese ancestry.</div></div>
+
+<div class="ubx"><div class="ubx-ll" lang="orv" title="Old East Slavic text meaning &quot;word&quot;">слово</div>
+<div class="ubx-lr">This user allegedly has partial Slavic ancestry.</div></div>
+
+<div class="ubx"><div class="ubx-ll">1997</div>
+<div class="ubx-lr">This user is a "Zillennial".</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1fac0.svg" width="32" alt="Anatomical heart emoji"></div>
+<div class="ubx-lr">This user has a heart condition.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><span class="crossed-out" title="3D model of oleic acid with a red X on it"><img src="/ubx-rsc/Oleic-acid-3D-vdW-sc.webp" class="hf" alt="3D model of cis-9-Octadecenoic acid"></span></div>
+<div class="ubx-lr">This user is <i>not</i> cis.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><div style="width:100%;height:100%;background:linear-gradient(to bottom,#000 25%, #a3a3a3 25% 50%, #fff 50% 75%,#800080 75%);" title="Asexuality pride flag"></div></div>
+<div class="ubx-lr">This user is ace.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/userbox_love_no.svg" class="v90" alt="Userbox with heart"></div>
+<div class="ubx-lr">This about page is littered with <a rel="external" target="_blank" href="https://en.wikipedia.org/wiki/Wikipedia:Userboxes">Userboxes</a> as seen on Wikipedia. <a href="/ubx-rsc/attributions.txt">Click me for image attributions</a>.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f452.svg" width="32" alt="Woman's hat emoji"></div>
+<div class="ubx-lr">This user is not the late Queen of the United Kingdom, but still likes hats.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f4ad.svg" width="32" alt="Thought balloon emoji"></div>
+<div class="ubx-lr">多行不義必自斃。<br>Unjust is doomed to destruction.</div></div>
+</div>
+<hr>
+<h3><ruby>programmatura<rp>(</rp><rt>software</rt><rp>)</rp></ruby></h3>
+<div class="ubx-container"><div class="ubx"><div class="ubx-ll">FOSS</div>
+<div class="ubx-lr">This user prefers free software and has made <a href="#contribproj">contributions to multiple FOSS projects</a>.</div></div>
+
+<div class="ubx"><div class="ubx-ll ubx-emojislot">&#9000;&#xFE0F;</div>
+<div class="ubx-lr">This user can type at 90 WPM.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Gentoo_Linux_logo_matte.svg" class="v80" alt="Gentoo Linux Logo"></div>
+<div class="ubx-lr">This user uses Gentoo Linux.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Openlogo-debianV2.svg" class="v80" alt="Debian GNU/Linux Logo"></div>
+<div class="ubx-lr">This user runs Debian GNU/Linux on servers.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Arch_Linux__Crystal__icon.svg" class="v80" alt="Arch Linux Logo"></div>
+<div class="ubx-lr">This user also uses Arch Linux, by the way.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Klickety_Cuffs.webp" class="hf" alt="A butchered Windows Logo with handcuffs"></div>
+<div class="ubx-lr">This user runs Microsoft Windows under duress.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Userbox_Classic_Mac_OS.webp" class="v90" alt="A not very accurate rendation of the old Apple Inc Logo"></div>
+<div class="ubx-lr">This user dreads macOS and all post-2015 Apple products.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Vimlogo.svg" class="v80" alt="Vim Logo"></div>
+<div class="ubx-lr">This user uses Vim.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/fvwm-block-logo.webp" class="vf" alt="FVWM Logo"></div>
+<div class="ubx-lr">This user uses FVWM.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/firefox.svg" class="v80" alt="Firefox Logo"></div>
+<div class="ubx-lr">This website is tested on Firefox and Chromium.</div>
+<div class="ubx-ll"><img src="/ubx-rsc/chromium.svg" class="v80" alt="Chromium Logo"></div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/lynx.webp" style="image-rendering:pixelated;" class="v80" alt="Lynx Logo created by Brandi Weed based on a character by Conrad Wong"></div>
+<div class="ubx-lr">This website is readable with <a rel="external" target="_blank" href="https://lynx.invisible-island.net/lynx.html">Lynx</a> and the like.</div></div>
+</div>
+<hr>
+<h3><ruby>apparatus<rp>(</rp><rt>hardware</rt><rp>)</rp></ruby></h3>
+<div class="ubx-container">
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/IBM_TrackPoint_cr.webp" class="vf" alt="The TrackPoint on the keyboard of a ThinkPad"></div>
+<div class="ubx-lr">This user owns multiple ThinkPad laptops.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Framework_Computer_emblem.svg" class="v80" alt="Framework Computer Logo in a circle"></div>
+<div class="ubx-lr">This user has a laptop made by Framework Computer Inc.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Userbox_Classic_Mac_OS.webp" class="v90" alt="A not very accurate rendation of the old Apple Inc Logo"></div>
+<div class="ubx-lr">This user has a PowerBook G4 but doesn't really use it any more.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/IPod_wheel.svg" class="v90" alt="Click wheel on an iPod Classic"></div>
+<div class="ubx-lr">This user has an iPod.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Raspberry_Pi_Logo.svg" class="v80" alt="Raspberry Pi Logo"></div>
+<div class="ubx-lr">This user owns more than a dozen Raspberry Pi boards.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Server.svg" class="hf" alt="Icon of a generic server"></div>
+<div class="ubx-lr">This user has a homelab.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f3ba.svg" width="32" alt="Trumpet emoji"></div>
+<div class="ubx-lr">This user has a bunch of hardware synthesizers and doesn't know what to do with them.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Circle-icons-tools.svg" class="h80" alt="Icon containing a wrench and a screwdriver"></div>
+<div class="ubx-lr">This user has performed component-level repairs on electronics and supports the right to repair. </div></div>
+</div>
+<hr>
+<h3><ruby>ioci<rp>(</rp><rt>amusements</rt><rp>)</rp></ruby></h3>
+<div class="ubx-container">
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/Grass_Block_JE7_BE6.webp" class="v80" alt="Grass block from Minecraft"></div>
+<div class="ubx-lr">This user <i>might be</i> somewhat addicted to Minecraft.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u262f.svg" width="32" alt="Yin yang emoji"></div>
+<div class="ubx-lr">This user was an avid player of shooting games from the Touhou Project.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f62d.svg" width="32" alt="Loudly crying face emoji"></div>
+<div class="ubx-lr">... but stopped playing because of massive skill issues.</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f3b6.svg" width="32" alt="Multiple musical notes emoji"></div>
+<div class="ubx-lr">This user is a music producer (sometimes).</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f3b9.svg" width="32" alt="Musical keyboard emoji"></div>
+<div class="ubx-lr">This user plays the piano (rarely).</div></div>
+
+<div class="ubx"><div class="ubx-ll">&#8212;</div>
+<div class="ubx-lr"><i style="color:var(--link-active-fg);">This space is for rent.</i></div></div>
+</div>
+<hr>
+<h3><ruby>linguae programmationis<rp>(</rp><rt>programming languages</rt><rp>)</rp></ruby></h3>
+<div class="ubx-container">
+<div class="ubx"><div class="ubx-ll">ASM-0</div>
+<div class="ubx-lr">This user does not understand assembly (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll"><span style="transform:scale(.75,1);">BASIC-0</span></div>
+<div class="ubx-lr">This user does not understand BASIC (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll">C-0</div>
+<div class="ubx-lr">This user does not understand C (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll">C++-0</div>
+<div class="ubx-lr">This user does not understand C++ (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll">hs-0</div>
+<div class="ubx-lr">This user does not understand Haskell (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll"><span style="transform:scale(.9,1);">Java-0</span></div>
+<div class="ubx-lr">This user does not understand Java (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll">js-0</div>
+<div class="ubx-lr">This user does not understand JavaScript (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll">ml-0</div>
+<div class="ubx-lr">This user does not understand ML (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll">lua-0</div>
+<div class="ubx-lr">This user does not understand Lua (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll"><span style="transform:scale(.9,1);">lisp-0</span></div>
+<div class="ubx-lr">This user does not understand Lisp (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll">pas-0</div>
+<div class="ubx-lr">This user does not understand Pascal (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll">php-0</div>
+<div class="ubx-lr">This user does not understand PHP (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll">py-0</div>
+<div class="ubx-lr">This user does not understand Python (or does not want to program in it).</div></div>
+
+<div class="ubx"><div class="ubx-ll">rs-0</div>
+<div class="ubx-lr">This user does not understand Rust (or does not want to program in it).</div></div>
+</div>
+<hr>
+<h3><ruby>conexiones<rp>(</rp><rt>contact</rt><rp>)</rp></ruby></h3>
+<div class="ubx-container">
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f4ec.svg" width="32" alt="Open mailbox with raised flag emoji"></div>
+<div class="ubx-lr">Send your complaints to <code style="font-weight:bold;text-decoration:underline dotted;font-size:12px;" class="TText" title="Do not use this address if your e-mail provider does not use a reliable DNS.">chris&#64;pineapple.cat</code></div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f4ed.svg" width="32" alt="Open mailbox with lowered flag emoji"></div>
+<div class="ubx-lr">Or to this alternative address if you can decipher it: <code style="font-weight:bold;text-decoration:underline dotted;word-break:break-all;" class="TText" title="Paste this into a POSIX-compliant shell. Sorry Windows users.">echo '49:CDac`_hfo8>2:=]4@>' | tr '\!-~' 'P-~\!-O'</code></div></div>
+
+<div class="ubx"><div class="ubx-ll">[ m ]</div>
+<div class="ubx-lr">This user is on Matrix <br> @chirs241097:matrix.org</div></div>
+
+<div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f511.svg" width="24" alt="Key emoji"></div>
+<div class="ubx-lr"><a href="/pubkey.txt">My GPG public key</a>, if you want to use it.</div></div>
+</div>
+<hr>
+<h3><ruby>frequenter allatae quaestiunculae<rp>(</rp><rt>frequently asked questions</rt><rp>)</rp></ruby></h3>
+
+<div class="qablock">
+Q1: Why is it "chirs241097" instead of "chris241097" in your usernames?<br>
+A1: That was an old typo...
+<br>
+However according to the Haskell tutorial found at haskell.org,
+<code class="TText" style="background:rgba(128,128,128,0.4);border:1px rgba(128,128,128,0.4) solid;">"chirs" == sort "chris"</code>
+and is her twin nemesis. So that was an unintended, but appreciated side-effect.
+</br>
+Why did I use "her" here? I wish I had an answer for you!
+</div>
+
+<div class="qablock">
+Q2: Why do the pages on your site look <i>so</i> ugly?<br>
+A2: The reason is simple but "irrefutable": I simply <i>like</i> this style.
+</div>
+
+<div class="qablock">
+Q3: What the hell is the favicon of your site?<br>
+A3: Well, it's something I cobbled together in a minute, half of which was me
+picking the color :).
+</div>
+
+<div class="qablock">
+Q4: Who's that character down there?<br>
+A4: <a rel="external" target="_blank" href="https://en.touhouwiki.net/wiki/Koishi_Komeiji">Komeiji Koishi</a>, manipulator of the unconscious mind.
+<br>
+The illustration is created by <a rel="external" target="_blank" href="https://www.pixiv.net/users/654238">ana</a> and you may <a rel="external" target="_blank" href="https://www.pixiv.net/artworks/7768871">find the original here</a>.
 </div>