From d65b022b33b500a65bbd835fe395a7da93db0f00 Mon Sep 17 00:00:00 2001
From: randogoth <kflux@posteo.de>
Date: Sun, 26 Oct 2025 17:58:16 +0200
Subject: [PATCH] centered and oclor

---
 scripts/dos-httpd | 90 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 79 insertions(+), 11 deletions(-)
diff --git a/scripts/dos-httpd b/scripts/dos-httpd
index 4434322..1205fc7 100644
--- a/scripts/dos-httpd
+++ b/scripts/dos-httpd
@@ -58,50 +58,67 @@ HTML_PAGE = """<!DOCTYPE html>
     }
     #workspace {
       flex: 1 1 auto;
+      position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 32px 24px 40px;
       box-sizing: border-box;
     }
-    #terminal {
+    #terminal-wrapper {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      transform-origin: center center;
+    }
+    #terminal-frame {
       display: inline-flex;
       background: #000;
       border: 1px solid #2b2b2b;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
       padding: 12px;
-      width: auto;
-      height: auto;
       box-sizing: content-box;
     }
+    #terminal {
+      display: inline-block;
+    }
     #terminal .xterm {
-      width: auto !important;
-      height: auto !important;
+      width: 100% !important;
+      height: 100% !important;
     }
     #terminal .xterm-viewport {
       background-color: #000 !important;
       overflow: hidden !important;
-      width: auto !important;
+      width: 100% !important;
     }
     #terminal .xterm-rows,
     #terminal .xterm-scroll-area {
-      width: auto !important;
-      height: auto !important;
+      width: 100% !important;
+      height: 100% !important;
     }
     #terminal .xterm-screen {
-      width: auto !important;
-      height: auto !important;
+      width: 100% !important;
+      height: 100% !important;
     }
     #terminal .xterm .xterm-helper-textarea {
       width: 0 !important;
       height: 0 !important;
     }
+    #terminal .xterm .xterm-bg-0,
+    #terminal .xterm .xterm-bg-8 {
+      background-color: rgb(14 14 14) !important;
+    }
   </style>
 </head>
 <body>
   <header>SvarBox DOS Console</header>
   <main id="workspace">
-    <div id="terminal"></div>
+    <div id="terminal-wrapper">
+      <div id="terminal-frame">
+        <div id="terminal"></div>
+      </div>
+    </div>
   </main>
 
   <script type="module">
@@ -127,6 +144,45 @@ HTML_PAGE = """<!DOCTYPE html>
     const socket = new WebSocket(`${wsProtocol}://${window.location.host}/ws`);
     const textDecoder = new TextDecoder("utf-8", { fatal: false });
 
+    const wrapper = document.getElementById("terminal-wrapper");
+    const frame = document.getElementById("terminal-frame");
+
+    let nativeWidth = 0;
+    let nativeHeight = 0;
+    let hasMeasurements = false;
+
+    function measureNativeSize() {
+      const previousTransform = wrapper.style.transform;
+      wrapper.style.transform = "translate(-50%, -50%) scale(1)";
+      const rect = frame.getBoundingClientRect();
+      wrapper.style.transform = previousTransform;
+
+      if (rect.width > 0 && rect.height > 0) {
+        nativeWidth = rect.width;
+        nativeHeight = rect.height;
+        hasMeasurements = true;
+        return true;
+      }
+      return false;
+    }
+
+    function ensureMeasurements() {
+      if (hasMeasurements) {
+        return true;
+      }
+      return measureNativeSize();
+    }
+
+    function applyScale() {
+      if (!ensureMeasurements()) {
+        return;
+      }
+      const maxWidth = window.innerWidth * 0.8;
+      const maxHeight = window.innerHeight * 0.8;
+      const scale = Math.min(maxWidth / nativeWidth, maxHeight / nativeHeight);
+      wrapper.style.transform = `translate(-50%, -50%) scale(${scale})`;
+    }
+
     function decodeBase64ToString(b64) {
       const binary = atob(b64);
       const bytes = new Uint8Array(binary.length);
@@ -139,8 +195,20 @@ HTML_PAGE = """<!DOCTYPE html>
     socket.addEventListener("open", () => {
       socket.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
       term.focus();
+      applyScale();
     });
 
+    term.onRender(() => {
+      applyScale();
+    });
+
+    if (document.fonts && document.fonts.ready && typeof document.fonts.ready.then === "function") {
+      document.fonts.ready.then(() => applyScale()).catch(() => applyScale());
+    } else {
+      window.addEventListener("load", () => applyScale(), { once: true });
+    }
+    window.addEventListener("resize", () => applyScale());
+
     socket.addEventListener("message", (event) => {
       try {
         const payload = JSON.parse(event.data);
