feat: add terminal emulator HTML structure

2026-08-25 21:06:22 +03:30
parent 9b615f4fe3
commit 84d79f2aa1
1 changed files with 59 additions and 0 deletions
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="/public/assets/css/css-reset.css">
+  <link rel="stylesheet" href="/public/assets/css/style.css">
+  <link rel="icon" type="image/x-png" href="/public/assets/pics/logo.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1" />
+  <link rel="stylesheet" href="/public/assets/fontawesome/css/all.min.css">
+  <audio id="bg-music" loop autoplay>
+  <source src="/public/assets/audios/05 Bee Gees - Stayin  Alive (From  Saturday Night Fever  Sou.mp3" type="audio/mpeg">
+  Your browser does not support the audio element.
+</audio>
+
+<script>
+  const music = document.getElementById('bg-music');
+  music.volume = 0.2;
+  music.play().catch(() => console.log("User interaction required to play audio."));
+</script>
+  <title>Gentoo - QEMU/KVM</title>
+</head>
+
+<body>
+  <main id="main">
+    <div id="bars">
+      <div id="bar-1">Gentoo - QEMU/KVM</div>
+      <div id="bar-2"></div>
+      <div id="bar-3"></div>
+      <div id="bar-4"></div>
+      <div id="bar-5"></div>
+    </div>
+    <br>
+    <div id="terminal">
+      <div>
+        <span id="prompt">[<span id="pre-user"></span>@<span id="pre-host"></span>~]$ </span>
+      </div>
+      <a id="write-lines"></a>
+    </div>
+    <div id="input-line">
+      <div>
+        <p id="password-input" style="display: none;">Password: <input id="password-field" autocomplete="off"
+            type="password" /></p>
+        <p id="input-hidden">
+          <span id="prompt">[<span id="user"></span>@<span id="host"></span>~]$
+          </span>
+          <input id="user-input" type="text" enterkeyhint="Enter" spellcheck="false" autocapitalize="none"
+            autocomplete="off" />
+        </p>
+      </div>
+      <br>
+    </div>
+  </main>
+</body>
+
+<script type="module" src="./src/styles.ts"></script>
+<script type="module" src="./src/main.ts"></script>
+
+</html>