with a passion for high-fidelity audio,
gaming, and web development.", - ), - `${prompt} cat /tmp/discord-ipc`, - () => Lanyard(), - `${prompt} cat /tmp/heartrate`, - () => Hyperate(), - ]; - - const renderStatic = () => { - for (const line of staticLines) { - const content = typeof line === "function" ? line() : line; - container.appendChild(renderElement(content)); - } - }; - - renderStatic(); - - const lanyardInstance = Lanyard(); - const files: Record
with a passion for high-fidelity audio,
gaming, and web development.", - ), - "/tmp/discord-ipc": () => lanyardInstance, - "/tmp/heartrate": () => Hyperate(), - }; - - const history: string[] = []; - let historyIndex = -1; - - const inputBox = document.createElement("input"); - inputBox.className = "terminal-input"; - inputBox.autofocus = true; - - const inputLine = document.createElement("div"); - inputLine.className = "terminal-line"; - - const promptSpan = document.createElement("span"); - promptSpan.textContent = `${prompt} `; - - inputLine.appendChild(promptSpan); - inputLine.appendChild(inputBox); - container.appendChild(inputLine); - - const appendLine = (line: string | Node) => { - container.insertBefore(renderElement(line), inputLine); - }; - - inputBox.addEventListener("keydown", (e) => { - if (e.key === "Enter") { - const cmd = inputBox.value.trim(); - if (!cmd) return; - - history.push(cmd); - historyIndex = history.length; - - appendLine(`${prompt} ${cmd}`); - - let out: string | Node; - - if (cmd.startsWith("cat ")) { - const file = cmd.slice(4).trim(); - out = files[file]?.() ?? `cat: ${file}: No such file`; - } else if (cmd === "ls") { - out = Object.keys(files) - .filter((f) => f.startsWith("./")) - .map((f) => f.slice(2)) - .join("\n"); - } else if (cmd.startsWith("ls ")) { - const dir = cmd.slice(3).trim(); - if (dir === "/tmp") { - out = Object.keys(files) - .filter((f) => f.startsWith("/tmp/")) - .map((f) => f.slice("/tmp/".length)) - .join("\n"); - } else { - out = `ls: cannot access '${dir}': No such file or directory`; - } - } else if (cmd === "help") { - out = [ - "Available commands:", - " cat [file] View contents of a file", - " ls List files in current directory", - " ls /tmp List files in /tmp directory", - " help Show this message", - ].join("\n"); - } else { - out = `bash: ${cmd}: command not found`; - } - - appendLine(out); - inputBox.value = ""; - } else if (e.key === "ArrowUp") { - if (historyIndex > 0) { - historyIndex--; - inputBox.value = history[historyIndex] || ""; - } - e.preventDefault(); - } else if (e.key === "ArrowDown") { - if (historyIndex < history.length - 1) { - historyIndex++; - inputBox.value = history[historyIndex] || ""; - } else { - historyIndex = history.length; - inputBox.value = ""; - } - e.preventDefault(); - } - }); - - return container; + return ( +
-
);
};
diff --git a/src/front/components/Lanyard/index.module.css b/src/front/components/Lanyard/index.module.css
new file mode 100644
index 0000000..85632c2
--- /dev/null
+++ b/src/front/components/Lanyard/index.module.css
@@ -0,0 +1,110 @@
+.card {
+ width: 100%;
+}
+
+.activityCard {
+ background-color: transparent;
+ border-radius: 8px;
+ padding: 16px;
+ width: 100% !important;
+ /* Set a max width */
+}
+
+.status {
+ font-size: 14px;
+ margin-bottom: 8px;
+}
+
+.content {
+ display: flex;
+ flex-wrap: wrap;
+ /* Allow wrapping for smaller screens */
+}
+
+.bigImage {
+ position: relative;
+ width: 120px;
+ /* Set fixed width for the big image */
+ height: 120px;
+ /* Set fixed height for the big image */
+ flex-shrink: 0;
+ /* Prevent shrinking */
+}
+
+.bigImage img {
+ width: 100%;
+ height: 100%;
+ border-radius: 8px;
+ object-fit: cover;
+ /* Ensures the image covers the area without distortion */
+}
+
+.smallImage {
+ position: absolute;
+ bottom: -8px;
+ right: -8px;
+ width: 40px;
+ /* Set fixed width for the small image */
+ height: 40px;
+ /* Set fixed height for the small image */
+ overflow: hidden;
+ border-radius: 50%;
+}
+
+.smallImage img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ /* Ensures the image covers the area without distortion */
+}
+
+.textInfo {
+ margin-left: 16px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ flex-grow: 1;
+ /* Allow text info to grow */
+}
+
+.appName {
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.state,
+.details {
+ font-size: 14px;
+ color: #b9bbbe;
+}
+
+/* Media Queries for Responsiveness */
+@media (max-width: 480px) {
+ .bigImage {
+ width: 80px;
+ /* Adjust size for smaller screens */
+ height: 80px;
+ }
+
+ .smallImage {
+ width: 30px;
+ /* Adjust size for smaller screens */
+ height: 30px;
+ }
+
+ .textInfo {
+ margin-left: 8px;
+ /* Reduce margin for smaller screens */
+ }
+
+ .appName {
+ font-size: 14px;
+ /* Adjust font size */
+ }
+
+ .state,
+ .details {
+ font-size: 12px;
+ /* Adjust font size */
+ }
+}
diff --git a/src/front/components/Lanyard/index.tsx b/src/front/components/Lanyard/index.tsx
index 9b58d6a..9f2b1bd 100644
--- a/src/front/components/Lanyard/index.tsx
+++ b/src/front/components/Lanyard/index.tsx
@@ -1,20 +1,10 @@
-import { highlightElement } from "@speed-highlight/core";
import { createRef } from "tsx-dom";
-import socket from "../../Socket";
+import colors from "../../utilities/colors.module.css";
+import socket from "../../utilities/socket";
-const statusTypes = {
- online: "rgb(0, 150, 0)",
- idle: "rgb(150, 150, 0)",
- dnd: "rgb(150, 0, 0)",
- offline: "rgb(150, 150, 150)",
-};
+import "mdui/components/tooltip.js";
-const gradientTypes = {
- online: "rgba(0, 150, 0, 0.1)",
- idle: "rgba(150, 150, 0, 0.1)",
- dnd: "rgba(150, 0, 0, 0.1)",
- offline: "rgba(150, 150, 150, 0.1)",
-};
+import style from "./index.module.css"; // entirely gpt generated :sob:
const activityTypes: Record0 BPM
++ ❤️ 0 BPM +
+ {/* @ts-expect-error; variant is not in the types for some reason? */}
+
+ {" "}
+
+
+
+ ).outerHTML;
+ }
}
});
- return (
-
+
+
+ {activityTypes[activity.type]}
+ {!largeImage && ` ${activity.name}`}
+
+
+ {largeImage && (
+
+
+
+ 
+
+ {smallImage && (
+
+ )}
+
+
+ 
+
+
+ )}
+
+
+ {activity.name}
+ {activity.state}
+ {activity.details}
+ +
- {"{}"}
-
- );
+ return ;
};
diff --git a/src/front/components/NavigationBar/index.tsx b/src/front/components/NavigationBar/index.tsx
new file mode 100644
index 0000000..43f16b4
--- /dev/null
+++ b/src/front/components/NavigationBar/index.tsx
@@ -0,0 +1,18 @@
+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";
+
+export default () => {
+ return (
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+ );
+};
diff --git a/src/front/index.css b/src/front/index.css
index f52e3e0..1954a39 100644
--- a/src/front/index.css
+++ b/src/front/index.css
@@ -1,66 +1,56 @@
-@import "../../node_modules/@speed-highlight/core/dist/themes/dark.css";
-@import "./App.css";
+/*
+@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;
+}
html,
-head,
+body {
+ height: 100dvh;
+}
+
body {
margin: 0;
padding: 0;
- font: 2vh monospace;
- height: 100vh;
- width: 100vw;
+ font-family: sans-serif;
+
+ color: rgb(var(--mdui-color-on-background));
+ background-color: rgb(var(--mdui-color-background));
}
-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;
- height: 100vh;
- width: 100vw;
- overflow: hidden;
-}
-
-p {
- margin: 0;
- padding: 0;
- line-height: 1.4em;
-}
-
-.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;
-}
-
-.terminal-input {
- background: transparent;
- border: none;
- color: inherit;
- font: inherit;
- outline: none;
- display: inline-block;
- width: 100%;
-}
-
-.terminal-line {
- display: flex;
- align-items: baseline;
- flex-direction: row;
- width: 100%;
-}
-
-.terminal-line > span {
+.shj-lang-json {
white-space: pre;
+ color: #f8f8f2;
+ background: var(--mdui-color-secondary-container);
+ text-shadow: none;
+ box-sizing: border-box;
+ border-radius: 10px;
+ max-width: min(100%, 100vw);
+ margin: 10px 0;
+ padding: 30px 20px;
+ font: 18px / 24px monospace;
+ box-shadow: 0 0 5px #0001;
+}
+
+.shj-inline {
+ border-radius: 5px;
+ margin: 0;
+ padding: 2px 5px;
+ display: inline-block;
+}
+
+.shj-syn-str {
+ color: #7d8;
+}
+
+.shj-syn-var {
+ color: #ff5261;
+}
+
+.shj-syn-str {
+ color: #4dacfa;
}
diff --git a/src/front/index.html b/src/front/index.html
index b3b4c13..bb61afc 100644
--- a/src/front/index.html
+++ b/src/front/index.html
@@ -3,20 +3,22 @@
-
+
-
+ content="A Dedicated Backend Developer, with a passion for high-fidelity audio, gaming, and development.">
+
+ Seth, the dedicated backend developer, with many{" "}
+ passions.
+
+
+
+ +
+ +
+
+