wip

2025-11-22 19:58:34 -06:00 · 2025-11-22 19:58:34 -06:00 · 7b6e0bfbfa
commit 7b6e0bfbfa
parent 93a4b412b4
9 changed files with 398 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>ttyd - Dracula Themed Terminal</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css" />
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      background: url('https://wallpapercave.com/wp/wp2566511.jpg') no-repeat center center fixed;
+      background-size: cover;
+      font-family: monospace;
+    }
+
+    #terminal-container {
+      height: 100%;
+      width: 100%;
+      background-color: rgba(40, 42, 54, 0.6); /* Dracula theme w/ transparency */
+      backdrop-filter: blur(4px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+
+    .xterm {
+      font-family: "Fira Code", monospace;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <div id="terminal-container">
+    <div id="terminal"></div>
+  </div>
+
+  <!-- Load xterm.js and addons -->
+  <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit/lib/xterm-addon-fit.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-web-links/lib/xterm-addon-web-links.min.js"></script>
+
+  <script>
+    function ttyd_attach(term, socket) {
+      socket.onopen = () => {
+        term.focus();
+        term.write('\x1b[?25h'); // show cursor
+      };
+
+      socket.onerror = () => {
+        term.write('\r\n\x1b[31mConnection error.\x1b[m\r\n');
+      };
+
+      socket.onclose = () => {
+        term.write('\r\n\x1b[31mConnection closed.\x1b[m\r\n');
+      };
+
+      term.onData(data => {
+        socket.send(data);
+      });
+
+      socket.onmessage = event => {
+        term.write(event.data);
+      };
+    }
+
+    const term = new Terminal({
+      theme: {
+        background: '#282a36',
+        foreground: '#f8f8f2',
+        cursor: '#f8f8f2',
+        black: '#21222c',
+        red: '#ff5555',
+        green: '#50fa7b',
+        yellow: '#f1fa8c',
+        blue: '#bd93f9',
+        magenta: '#ff79c6',
+        cyan: '#8be9fd',
+        white: '#f8f8f2',
+        brightBlack: '#6272a4',
+        brightRed: '#ff6e6e',
+        brightGreen: '#69ff94',
+        brightYellow: '#ffffa5',
+        brightBlue: '#d6acff',
+        brightMagenta: '#ff92df',
+        brightCyan: '#a4ffff',
+        brightWhite: '#ffffff'
+      },
+      fontFamily: 'Fira Code, monospace',
+      fontSize: 14,
+      cursorBlink: true,
+    });
+
+    const fitAddon = new FitAddon.FitAddon();
+    const webLinksAddon = new WebLinksAddon.WebLinksAddon();
+    term.loadAddon(fitAddon);
+    term.loadAddon(webLinksAddon);
+
+    term.open(document.getElementById("terminal"));
+    fitAddon.fit();
+
+    const wsProto = location.protocol === "https:" ? "wss://" : "ws://";
+    const socket = new WebSocket(wsProto + location.host + "/ws");
+
+    ttyd_attach(term, socket);
+
+    window.addEventListener("resize", () => fitAddon.fit());
+  </script>
+</body>
+</html>
+