.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-	"html.customData": ["./node_modules/mdui/html-data.en.json"],
-	"css.customData": ["./node_modules/mdui/css-data.en.json"]
-}

bun.lock

@@ -4,11 +4,7 @@
     "": {
       "name": "ipv4.army",
       "dependencies": {
-        "@fontsource/roboto": "^5.2.5",
-        "@fontsource/roboto-mono": "^5.2.5",
-        "@mdui/icons": "^1.0.3",
         "@speed-highlight/core": "latest",
-        "mdui": "^2.1.4",
         "reconnecting-websocket": "latest",
         "tsx-dom": "latest",
       },
@@ -40,54 +36,16 @@
 
     "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.0.0-beta.4", "", { "os": "win32", "cpu": "x64" }, "sha512-2eGsMOwtm8mvicKMkegV2DW2EH0vQPF0Skt9n4enoFk8ABFtoxherTG8Us1fwlBrk9tA7gcshrdUilu35BmZdA=="],
 
-    "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
-
-    "@fontsource/roboto": ["@fontsource/roboto@5.2.5", "", {}, "sha512-70r2UZ0raqLn5W+sPeKhqlf8wGvUXFWlofaDlcbt/S3d06+17gXKr3VNqDODB0I1ASme3dGT5OJj9NABt7OTZQ=="],
-
-    "@fontsource/roboto-mono": ["@fontsource/roboto-mono@5.2.5", "", {}, "sha512-P1wrUBMFWfr+tuUIY10MzdRTBcl9f011CbZV1fXqcCk40Xmtn91l1V1daVuQ+JPctYEVYazabvaK+sUEThgnyw=="],
-
-    "@lit-labs/ssr-dom-shim": ["@lit-labs/ssr-dom-shim@1.3.0", "", {}, "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ=="],
-
-    "@lit/localize": ["@lit/localize@0.12.2", "", { "dependencies": { "lit": "^3.2.0" } }, "sha512-Qv9kvgJKDq/JVSwXOxuWvQnnOBysHA99ti9im9a4fImCmx+fto+XXcUYQbjZHqiueEEc4V20PcRDPO+1g/6seQ=="],
-
-    "@lit/reactive-element": ["@lit/reactive-element@2.1.0", "", { "dependencies": { "@lit-labs/ssr-dom-shim": "^1.2.0" } }, "sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA=="],
-
-    "@material/material-color-utilities": ["@material/material-color-utilities@0.3.0", "", {}, "sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g=="],
-
-    "@mdui/icons": ["@mdui/icons@1.0.3", "", { "dependencies": { "@mdui/shared": "^1.0.8", "lit": "^3.3.0", "tslib": "^2.8.1" } }, "sha512-Jq9juUqIJMBvIRSTr0qBKiqnlbY5pVUzUP20EHSN8dT7GcqN7bq0AL8MASL5DxKs09kgcERq+z5bHJOkz/VDlA=="],
-
-    "@mdui/jq": ["@mdui/jq@3.0.3", "", { "dependencies": { "ssr-window": "^5.0.0", "tslib": "^2.8.1" } }, "sha512-nI8QK9UPHhiIbECrC1aMdLXNxP6WgUtC9XwRPs/e56FtwduePyxPyloXmgU8VYw85i6TtYdgClHS9tW8JweNZA=="],
-
-    "@mdui/shared": ["@mdui/shared@1.0.8", "", { "dependencies": { "@lit/reactive-element": "^2.1.0", "@mdui/jq": "^3.0.3", "lit": "^3.3.0", "ssr-window": "^5.0.0", "tslib": "^2.8.1" } }, "sha512-YY863fjHBuk8KtiO4uLDm1YyIVdGrWv4xUxfv8jP32WqIQBkSTbV7HN8jnKXXIej0NFP7pU89yGr4GJYzVszPg=="],
-
     "@speed-highlight/core": ["@speed-highlight/core@1.2.7", "", {}, "sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g=="],
 
     "@types/bun": ["@types/bun@1.2.12", "", { "dependencies": { "bun-types": "1.2.12" } }, "sha512-lY/GQTXDGsolT/TiH72p1tuyUORuRrdV7VwOTOjDOt8uTBJQOJc5zz3ufwwDl0VBaoxotSk4LdP0hhjLJ6ypIQ=="],
 
     "@types/node": ["@types/node@22.14.1", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw=="],
 
-    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
-
     "bun-types": ["bun-types@1.2.12", "", { "dependencies": { "@types/node": "*" } }, "sha512-tvWMx5vPqbRXgE8WUZI94iS1xAYs8bkqESR9cxBB1Wi+urvfTrF1uzuDgBHFAdO0+d2lmsbG3HmeKMvUyj6pWA=="],
 
-    "classcat": ["classcat@5.0.5", "", {}, "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="],
-
-    "is-promise": ["is-promise@4.0.0", "", {}, "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="],
-
-    "lit": ["lit@3.3.0", "", { "dependencies": { "@lit/reactive-element": "^2.1.0", "lit-element": "^4.2.0", "lit-html": "^3.3.0" } }, "sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw=="],
-
-    "lit-element": ["lit-element@4.2.0", "", { "dependencies": { "@lit-labs/ssr-dom-shim": "^1.2.0", "@lit/reactive-element": "^2.1.0", "lit-html": "^3.3.0" } }, "sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q=="],
-
-    "lit-html": ["lit-html@3.3.0", "", { "dependencies": { "@types/trusted-types": "^2.0.2" } }, "sha512-RHoswrFAxY2d8Cf2mm4OZ1DgzCoBKUKSPvA1fhtSELxUERq2aQQ2h05pO9j81gS1o7RIRJ+CePLogfyahwmynw=="],
-
-    "mdui": ["mdui@2.1.4", "", { "dependencies": { "@floating-ui/utils": "^0.2.9", "@lit/localize": "^0.12.2", "@lit/reactive-element": "^2.1.0", "@material/material-color-utilities": "^0.3.0", "@mdui/jq": "^3.0.3", "@mdui/shared": "^1.0.8", "classcat": "^5.0.5", "is-promise": "^4.0.0", "lit": "^3.3.0", "ssr-window": "^5.0.0", "tslib": "^2.8.1" } }, "sha512-QtK5xia5HXtVO7yH30QjwvvNruw5JdrJL1MEc1k6S/ZfsbHOj6BxxdYjrdv2HiN5ikkGqt5CIbZdFyq6shaZyw=="],
-
     "reconnecting-websocket": ["reconnecting-websocket@4.4.0", "", {}, "sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng=="],
 
-    "ssr-window": ["ssr-window@5.0.0", "", {}, "sha512-3Iqawoo0DkAaUEScd80SYq3I5clEFDVy//DdzjHXACj/hqcKzsnMzRZ1yHRj+r5dW3UeXNs30ofnhP6YSWg5iA=="],
-
-    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
     "tsx-dom": ["tsx-dom@3.1.0", "", { "dependencies": { "tsx-dom-types": "2.1.0" } }, "sha512-PGN7iL6zNC4Jj7bA1groSIz5mFB3Rr+SeoywZk2g4+c9uV8wwzCf+5tFQ8SyZxQIBHech3ueB0KxV3OFieqhOA=="],
 
     "tsx-dom-types": ["tsx-dom-types@2.1.0", "", {}, "sha512-pZaMTrMRNom+D1b82K+1cWVMuogXrD/ANI42UYxilw27tF+tDCgj7GrD1XLmCxbHPDO2zxfmFuaz04KIEfWydQ=="],

package.json

@@ -17,11 +17,7 @@
 	"private": true,
 	"type": "module",
 	"dependencies": {
-		"@fontsource/roboto": "^5.2.5",
-		"@fontsource/roboto-mono": "^5.2.5",
-		"@mdui/icons": "^1.0.3",
 		"@speed-highlight/core": "latest",
-		"mdui": "^2.1.4",
 		"reconnecting-websocket": "latest",
 		"tsx-dom": "latest"
 	}

src/front/App.css

@@ -0,0 +1,61 @@
+.scanlines {
+	overflow: hidden;
+}
+
+.scanlines:before,
+.scanlines:after {
+	display: inherit;
+	pointer-events: none;
+	content: "";
+	position: absolute;
+}
+
+.scanlines:before {
+	width: 100%;
+	height: 2px;
+	z-index: 2147483649;
+	background: rgba(0, 0, 0, 0.3);
+	opacity: 0.75;
+	animation: scanline 6s linear infinite;
+}
+
+.scanlines:after {
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 2147483648;
+	background: linear-gradient(
+		to bottom,
+		transparent 50%,
+		rgba(0, 0, 0, 0.3) 51%
+	);
+	background-size: 100% 6px;
+	animation: scanlines 2s steps(30) infinite;
+}
+
+/* ANIMATE UNIQUE SCANLINE */
+@keyframes scanline {
+	0% {
+		transform: translate3d(0, 200000%, 0);
+	}
+}
+
+@keyframes scanlines {
+	0% {
+		background-position: 0 50%;
+	}
+}
+
+span.shj-syn-str:nth-child(2) {
+	color: var(--status-color, rgba(150, 150, 150, 0.1));
+}
+
+.shj-numbers {
+	padding: 0px;
+}
+
+.shj-lang-json {
+	padding: 0px;
+	background-color: transparent;
+}

src/front/App.tsx

@@ -1,19 +1,27 @@
-import "mdui/components/layout";
-import "mdui/components/layout-main";
-
-import NavigationBar from "./components/NavigationBar";
-import TopAppBar from "./components/TopAppBar";
-
-import About from "./components/pages/About";
+import Hyperate from "./components/Hyperate";
+import Lanyard from "./components/Lanyard";
 
 export default () => {
 	return (
-		<mdui-layout full-height>
-			<TopAppBar />
-			<mdui-layout-main>
-				<About />
-			</mdui-layout-main>
-			<NavigationBar />
-		</mdui-layout>
+		<div class="app terminal">
+			<p>[seth@ipv4 ~]$ cat ./about.txt</p>
+			<p>
+				A Dedicated Backend Developer,
+				<br />
+				with a passion for high-fidelity audio,
+				<br />
+				gaming, and web development.
+			</p>
+
+			<p>[seth@ipv4 ~]$ cat /tmp/discord-ipc</p>
+			<p>
+				<Lanyard />
+			</p>
+
+			<p>[seth@ipv4 ~]$ cat /tmp/heartrate</p>
+			<p>
+				<Hyperate />
+			</p>
+		</div>
 	);
 };

src/front/Socket.ts

@@ -8,9 +8,6 @@ class Socket extends EventTarget {
 
 		this._socket = new WebSocket(url);
 		this._socket.onmessage = (event) => {
-			if (event.data === "ping") return;
-			if (event.data === "pong") return;
-
 			const { type, data } = JSON.parse(event.data);
 
 			switch (type) {
@@ -23,7 +20,7 @@ class Socket extends EventTarget {
 					break;
 				}
 				case "echo": {
-					//console.log("Echo: ", data);
+					console.log("Echo: ", data);
 					break;
 				}
 				default: {
@@ -39,7 +36,7 @@ class Socket extends EventTarget {
 
 		setInterval(() => {
 			this._socket.send("ping");
-		}, 10 * 1000);
+		}, 30 * 1000);
 	}
 
 	emitLanyard(lanyard: LanyardData) {

src/front/components/Hyperate/index.tsx

@@ -1,28 +1,19 @@
 import { createRef } from "tsx-dom";
 
-import socket from "../../utilities/socket";
+import socket from "../../Socket";
 
 export default () => {
 	const paragraph = createRef<HTMLParagraphElement>();
 
 	socket.addEventListener("hyperate", (event: Event) => {
 		const heartRate = (event as CustomEvent).detail;
-
-		if (heartRate === 0) {
-			document.body.style.setProperty("--hyperate-display", "none");
-		} else {
-			document.body.style.removeProperty("--hyperate-display");
-		}
-
-		document.body.style.setProperty("--bpm", heartRate.toString());
-
 		if (paragraph.current) {
-			paragraph.current.innerText = `❤️ ${heartRate} BPM`;
+			paragraph.current.innerText = `${heartRate} BPM`;
 		}
 	});
 	return (
 		<div>
-			<p class="heartbeat" ref={paragraph}>❤️ 0 BPM</p>
+			<p ref={paragraph}>0 BPM</p>
 		</div>
 	);
 };

src/front/components/Lanyard/index.tsx

@@ -1,14 +1,19 @@
 import { highlightElement } from "@speed-highlight/core";
-import { artist } from "../../utilities/artist";
 import { createRef } from "tsx-dom";
-import socket from "../../utilities/socket";
+import socket from "../../Socket";
 
-const colorMap = {
-	online: "#00ff00",
-	idle: "#ffff00",
-	dnd: "#ff0000",
-	offline: "",
-	streaming: "#ff00ff",
+const statusTypes = {
+	online: "0, 150, 0",
+	idle: "150, 150, 0",
+	dnd: "150, 0, 0",
+	offline: "150, 150, 150",
+};
+
+const gradientTypes = {
+	online: "0, 150, 0",
+	idle: "150, 150, 0",
+	dnd: "150, 0, 0",
+	offline: "150, 150, 150",
 };
 
 const activityTypes: Record<number, string> = {
@@ -26,23 +31,12 @@ export default () => {
 	socket.addEventListener("lanyard", (event: Event) => {
 		const lanyard = (event as CustomEvent<LanyardData>).detail;
 
-		const streamingActivity = lanyard.activities.find((act) => act.type === 1);
-		if (streamingActivity) {
-			artist(colorMap.streaming);
-		} else {
-			artist(colorMap[lanyard.discord_status]);
-		}
-
-		if (lanyard.activities.length === 0) {
-			document.body.style.setProperty("--lanyard-display", "none");
-		} else {
-			document.body.style.removeProperty("--lanyard-display");
-		}
-
+		document.body.style = `--status-color: rgb(${statusTypes[lanyard.discord_status]}); --gradient-color: rgba(${gradientTypes[lanyard.discord_status]}, 0.1);`;
 
 		if (container.current) {
 			container.current.textContent = JSON.stringify(
 				{
+					status: lanyard.discord_status,
 					activities: [
 						...new Set(
 							lanyard.activities.map((act) => {
@@ -66,8 +60,8 @@ export default () => {
 	});
 
 	return (
-		<code class="shj-lang-json" ref={container}>
+		<div class="shj-lang-json" ref={container}>
 			{"{}"}
-		</code>
+		</div>
 	);
 };

src/front/components/NavigationBar/index.tsx

@@ -1,20 +0,0 @@
-import "mdui/components/navigation-bar";
-import "mdui/components/navigation-bar-item";
-import "mdui/components/button-icon";
-
-import "@mdui/icons/person--outlined";
-import "@mdui/icons/person--rounded";
-
-import "@mdui/icons/more-vert--rounded";
-
-export default () => {
-    return (
-        <mdui-navigation-bar value="about">
-            <mdui-navigation-bar-item value="about">
-                <mdui-icon-person--outlined slot="icon" />
-                <mdui-icon-person--rounded slot="active-icon" />
-                About
-            </mdui-navigation-bar-item>
-        </mdui-navigation-bar>
-    );
-};

src/front/components/TopAppBar/index.tsx

@@ -1,12 +0,0 @@
-import "mdui/components/top-app-bar";
-import "mdui/components/top-app-bar-title";
-import "mdui/components/button-icon";
-
-export default () => {
-    return (
-        // @ts-ignore // variant is not in the types for some reason?
-        <mdui-top-app-bar variant="center-aligned" scroll-behavior="elevate">
-            <mdui-top-app-bar-title>IPv4.ARMY</mdui-top-app-bar-title>
-        </mdui-top-app-bar>
-    );
-};

src/front/components/pages/About/index.tsx

@@ -1,99 +0,0 @@
-import 'mdui/components/card';
-import 'mdui/components/avatar';
-
-import 'mdui/components/segmented-button-group';
-import 'mdui/components/segmented-button';
-
-import { getColorFromImage } from 'mdui/functions/getColorFromImage';
-import { artist } from '../../../utilities/artist';
-import Lanyard from '../../Lanyard';
-import Hyperate from '../../Hyperate';
-
-const Abyssinian = new Image();
-Abyssinian.src = "/public/Abyssinian/default.png";
-Abyssinian.onload = async () => {
-    const profilePicture = document.getElementById("profilePicture") as HTMLElement;
-
-    artist(await getColorFromImage(Abyssinian), profilePicture);
-
-    profilePicture.setAttribute("src", Abyssinian.src);
-    profilePicture.innerText = "";
-};
-
-export default () => {
-    return (
-        <div style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            flexDirection: "column",
-            height: "100%",
-        }}>
-            <mdui-card variant="filled" style={{
-                width: "90%",
-                padding: ".5rem",
-                // center the contents
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column",
-
-                textAlign: "center",
-            }}>
-                <mdui-avatar style={{
-                    width: "5rem",
-                    height: "inherit",
-                    border: "2px solid rgb(var(--status-color))",
-                }} id="profilePicture">S</mdui-avatar>
-                <h1>Seth</h1>
-                {/* make important text bold */}
-                <p>
-                    A <strong>Dedicated</strong> Backend Developer, with many <strong>passions</strong>.
-                    <br />
-                    <br />
-                    <mdui-segmented-button-group full-width>
-                        <mdui-segmented-button>high-fidelity audio</mdui-segmented-button>
-                        <mdui-segmented-button>gaming</mdui-segmented-button>
-                        <mdui-segmented-button>development</mdui-segmented-button>
-                    </mdui-segmented-button-group>
-                </p>
-            </mdui-card>
-
-            <br style={{
-                display: "var(--lanyard-display)",
-            }} />
-
-            <mdui-card variant="filled" style={{
-                width: "90%",
-                padding: ".5rem",
-                // center the contents
-                display: "var(--lanyard-display, flex)",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column",
-
-                //textAlign: "center",
-            }}>
-                <Lanyard />
-            </mdui-card>
-
-            <br style={{
-                display: "var(--hyperate-display)",
-            }} />
-
-            <mdui-card variant="filled" style={{
-                width: "90%",
-                padding: ".5rem",
-                // center the contents
-                display: "var(--hyperate-display, flex)",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column",
-
-                //textAlign: "center",
-            }}>
-                <Hyperate />
-            </mdui-card>
-        </div >
-    );
-};

src/front/index.css

@@ -1,204 +1,44 @@
-@import "../../node_modules/@fontsource/roboto/latin-400.css";
-@import "../../node_modules/@fontsource/roboto-mono/latin-400.css";
-
-@import "../../node_modules/mdui/mdui.css";
-
-:not(:defined) {
-	visibility: hidden;
-}
+@import "../../node_modules/@speed-highlight/core/dist/themes/dark.css";
+@import "./App.css";
 
 html,
-body {
-	height: 100vh;
-}
-
+head,
 body {
 	margin: 0;
 	padding: 0;
-	font-family: "Roboto", sans-serif;
+	font: 2vh monospace;
+	height: 100vh;
+	width: 100vw;
 }
 
-[class*="shj-lang-"] {
-	white-space: pre;
-	color: #112;
-	text-shadow: none;
-	box-sizing: border-box;
-	background: #dedede;
-	border-radius: 10px;
-	max-width: min(100%, 100vw);
-	margin: 10px 0;
-	padding: 30px 20px;
-	font:
-		18px / 24px "Roboto Mono",
-		monospace;
-	box-shadow: 0 0 5px #0001;
-}
-
-.shj-inline {
-	border-radius: 5px;
-	margin: 0;
-	padding: 2px 5px;
-	display: inline-block;
-}
-
-[class*="shj-lang-"]::selection {
-	background: #bdf5;
-}
-
-[class*="shj-lang-"] ::selection {
-	background: #bdf5;
-}
-
-[class*="shj-lang-"]>div {
+body {
+	color: #dedede;
+	text-shadow: 0 0 5px #c8c8c8;
+	background: radial-gradient(
+		at bottom right,
+		var(--gradient-color, rgba(150, 150, 150, 0.1)) 0%,
+		rgba(0, 0, 0, 1) 100%
+	);
 	display: flex;
-	overflow: auto;
+	height: 100vh;
+	width: 100vw;
+	overflow: hidden;
 }
 
-[class*="shj-lang-"]>div :last-child {
-	outline: none;
-	flex: 1;
+p {
+	margin: 0;
+	padding: 0;
+	line-height: 1.4em;
 }
 
-.shj-numbers {
-	counter-reset: line;
-	padding-left: 5px;
-}
-
-.shj-numbers div {
-	padding-right: 5px;
-}
-
-.shj-numbers div:before {
-	color: #999;
-	content: counter(line);
-	opacity: 0.5;
-	text-align: right;
-	counter-increment: line;
-	margin-right: 5px;
-	display: block;
-}
-
-.shj-syn-cmnt {
-	font-style: italic;
-}
-
-.shj-syn-err,
-.shj-syn-kwd {
-	color: #e16;
-}
-
-.shj-syn-num,
-.shj-syn-class {
-	color: #f60;
-}
-
-.shj-syn-insert,
-.shj-syn-str {
-	color: #7d8;
-}
-
-.shj-syn-bool {
-	color: #3bf;
-}
-
-.shj-syn-type,
-.shj-syn-oper {
-	color: #5af;
-}
-
-.shj-syn-section,
-.shj-syn-func {
-	color: #84f;
-}
-
-.shj-syn-deleted,
-.shj-syn-var {
-	color: #f44;
-}
-
-.shj-oneline {
-	padding: 12px 10px;
-}
-
-.shj-lang-http.shj-oneline .shj-syn-kwd {
-	color: #fff;
-	background: #25f;
-	border-radius: 5px;
-	padding: 5px 7px;
-}
-
-[class*="shj-lang-"] {
-	color: #f8f8f2;
-	background: var(--mdui-color-secondary-container);
-}
-
-[class*="shj-lang-"]:before {
-	color: #6f9aff;
-}
-
-.shj-syn-deleted,
-.shj-syn-err,
-.shj-syn-var {
-	color: #ff5261;
-}
-
-.shj-syn-section,
-.shj-syn-kwd {
-	color: #ff7cc6;
-}
-
-.shj-syn-class {
-	color: #eab07c;
-}
-
-.shj-numbers,
-.shj-syn-cmnt {
-	color: #7d828b;
-}
-
-.shj-syn-insert,
-.shj-syn-type,
-.shj-syn-func,
-.shj-syn-bool {
-	color: #71d58a;
-}
-
-.shj-syn-num {
-	color: #b581fd;
-}
-
-.shj-syn-oper {
-	color: #80c6ff;
-}
-
-.shj-syn-str {
-	color: #4dacfa;
-}
-
-.heartbeat {
-	display: inline-block;
-	animation: pulse calc(60s / var(--bpm)) infinite ease-in-out;
-	transform-origin: center;
-}
-
-@keyframes pulse {
-	0% {
-		transform: scale(1);
-	}
-
-	25% {
-		transform: scale(1.1);
-	}
-
-	50% {
-		transform: scale(1);
-	}
-
-	75% {
-		transform: scale(1.1);
-	}
-
-	100% {
-		transform: scale(1);
-	}
+.terminal {
+	white-space: pre-wrap;
+	font-family: monospace;
+	width: 100vw;
+	height: 100vh;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+	gap: 0.4em;
 }