th-website/public/computer/OsWebseite.vue

<script setup lang="js">
import { nextTick, onMounted, onUnmounted, ref } from "vue";

const code = ref("");
const loggedIn = ref(false);
const error = ref("");
const inputRef = ref(null);

function cleanCode(event) {
  code.value = event.target.value.replace(/\D/g, "").slice(0, 4);
  error.value = "";
}

function login() {
  if (code.value === "1337") {
    loggedIn.value = true;
    error.value = "";
    return;
  }

  code.value = "";
  error.value = "ACCESS DENIED";
  nextTick(() => inputRef.value?.focus());
}

function logout() {
  loggedIn.value = false;
  code.value = "";
  error.value = "";
  nextTick(() => inputRef.value?.focus());
}

function leaveComputer() {
  if (window.parent === window) return;

  window.parent.postMessage({ type: "leave-computer" }, window.location.origin);
}

function onKeydown(event) {
  if (event.key === "Escape") leaveComputer();
}

onMounted(() => {
  window.addEventListener("keydown", onKeydown);
  document.documentElement.addEventListener("mouseleave", leaveComputer);
  inputRef.value?.focus();
});

onUnmounted(() => {
  window.removeEventListener("keydown", onKeydown);
  document.documentElement.removeEventListener("mouseleave", leaveComputer);
});
</script>

<template>
  <main class="page">
    <header>
      <b>FEDERAL RECORDS SYSTEM</b>
      <span>SECURE SERVER 04</span>
    </header>

    <section v-if="!loggedIn" class="login-box">
      <h1>Restricted Access</h1>
      <p>This system is for authorized personnel only.</p>

      <form @submit.prevent="login">
        <label for="code">Access Code:</label>
        <input
          id="code"
          ref="inputRef"
          :value="code"
          type="password"
          inputmode="numeric"
          maxlength="4"
          autocomplete="off"
          @input="cleanCode"
        />
        <button type="submit">LOGIN</button>
      </form>

      <p v-if="error" class="error" role="alert">{{ error }}</p>
      <p class="help">Press ESC to leave terminal.</p>
    </section>

    <section v-else class="records">
      <nav>
        <b>RECORD DATABASE</b>
        <button type="button" @click="logout">LOG OUT</button>
      </nav>

      <h1>Case File 04-1337</h1>

      <table>
        <tbody>
          <tr>
            <th>Status</th>
            <td>OPEN</td>
          </tr>
          <tr>
            <th>Classification</th>
            <td>RESTRICTED</td>
          </tr>
          <tr>
            <th>Subject</th>
            <td>UNKNOWN</td>
          </tr>
          <tr>
            <th>Last activity</th>
            <td>03:17 / SECTOR 12</td>
          </tr>
        </tbody>
      </table>

      <div class="note">
        <b>REPORT</b>
        <p>
          An unidentified signal was recorded near the archive terminal.
          Investigation remains active. No further action authorized.
        </p>
      </div>

      <footer>FICTIONAL ARCHIVE SYSTEM // LOCAL TERMINAL</footer>
    </section>
  </main>
</template>

<style scoped>
:global(*) {
  box-sizing: border-box;
}

:global(html),
:global(body),
:global(#app) {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

:global(body) {
  font-family: Verdana, Arial, sans-serif;
}

.page {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  color: #b7c2b9;
  background: #000;
  font-size: clamp(12px, 1.4vw, 16px);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 22px;
  border-bottom: 1px solid #526056;
  color: #d4ddd6;
  background: #111;
  font-family: "Courier New", monospace;
}

header span {
  color: #718076;
  font-size: 0.75em;
}

.login-box {
  width: min(430px, calc(100% - 36px));
  margin: clamp(40px, 14vh, 110px) auto 0;
  padding: 22px;
  border: 1px solid #58635b;
  background: #080a08;
}

h1 {
  margin: 0 0 18px;
  color: #d6ddd7;
  font:
    bold 1.25em "Courier New",
    monospace;
}

p {
  line-height: 1.5;
}

form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

label {
  white-space: nowrap;
}

input,
button {
  border: 1px solid #5c685e;
  border-radius: 0;
  font: inherit;
}

input {
  min-width: 0;
  padding: 7px;
  outline: none;
  color: #9ee6ad;
  background: #000;
}

input:focus {
  border-color: #9ee6ad;
}

button {
  padding: 7px 12px;
  color: #d1d8d2;
  background: #242924;
  cursor: pointer;
}

button:hover,
button:focus-visible {
  color: #fff;
  background: #343b35;
}

.error {
  margin: 15px 0 0;
  color: #d76b62;
  font-family: "Courier New", monospace;
}

.help {
  margin: 22px 0 0;
  color: #667068;
  font-size: 0.75em;
}

.records {
  width: min(760px, calc(100% - 36px));
  height: calc(100dvh - 82px);
  margin: 18px auto 0;
  overflow: hidden;
  border: 1px solid #4d574f;
  background: #060706;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid #4d574f;
  color: #9ee6ad;
  background: #121512;
  font-family: "Courier New", monospace;
}

nav button {
  padding: 4px 9px;
  font-size: 0.75em;
}

.records > h1,
.records > table,
.records > .note {
  margin-right: 20px;
  margin-left: 20px;
}

.records > h1 {
  margin-top: 20px;
}

table {
  width: calc(100% - 40px);
  border-collapse: collapse;
}

th,
td {
  padding: 8px 10px;
  border: 1px solid #3e473f;
  text-align: left;
}

th {
  width: 34%;
  color: #78847a;
  background: #0c0f0c;
  font-weight: normal;
}

td {
  color: #a7d9b0;
  font-family: "Courier New", monospace;
}

.note {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid #3e473f;
}

.note b {
  color: #78847a;
  font-size: 0.8em;
}

.note p {
  margin: 8px 0 0;
}

footer {
  margin: 22px 20px 0;
  color: #566058;
  font:
    0.7em "Courier New",
    monospace;
  text-align: right;
}

@media (max-width: 500px), (max-height: 500px) {
  header {
    height: 44px;
    padding: 0 12px;
  }

  .login-box {
    margin-top: 24px;
    padding: 16px;
  }

  form {
    grid-template-columns: 1fr auto;
  }

  form label {
    grid-column: 1 / -1;
  }

  .records {
    height: calc(100dvh - 58px);
    margin-top: 7px;
  }

  .records > h1 {
    margin-top: 12px;
    margin-bottom: 10px;
  }

  th,
  td {
    padding: 5px 7px;
  }

  .note {
    margin-top: 10px;
    padding: 8px;
  }

  footer {
    display: none;
  }
}
</style>