index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jurassic Systems — Security Console</title>
<style>
  :root {
    --phosphor: #35ff6d;
    --phosphor-dim: #1a8f3c;
    --crt-bg: #030a05;
    --window-gray: #b8b8b0;
    --window-dark: #6e6e66;
    --window-light: #e8e8e0;
    --titlebar: #2a2a72;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    background: #000;
    font-family: "Courier New", Courier, monospace;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .crt { position: relative; width: 100%; height: 100%; background: var(--crt-bg); overflow: hidden; }
  .crt::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.25) 3px);
    pointer-events: none; z-index: 50;
  }
  .crt::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
    pointer-events: none; z-index: 51;
  }
  @keyframes flicker { 0%,100%{opacity:1} 97%{opacity:1} 98%{opacity:.92} 99%{opacity:1} }
  .crt-inner { position: absolute; inset: 0; animation: flicker 4s infinite; }
  @media (prefers-reduced-motion: reduce) { .crt-inner { animation: none; } }

  #terminal {
    position: absolute; inset: 0;
    padding: 24px 28px;
    color: var(--phosphor);
    font-size: clamp(11px, 1.6vw, 15px);
    line-height: 1.5;
    text-shadow: 0 0 6px rgba(53,255,109,0.7);
    white-space: pre-wrap;
    word-break: break-all;
    overflow: hidden;
  }
  #terminal .dim { color: var(--phosphor-dim); text-shadow: none; }
  .cursor::after { content: "█"; animation: blink 0.9s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }

  #popup {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: min(560px, 92vw);
    background: var(--window-gray);
    border: 2px solid var(--window-light);
    border-right-color: var(--window-dark);
    border-bottom-color: var(--window-dark);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
    z-index: 60;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #popup.show { transform: translate(-50%, -50%) scale(1); }
  .titlebar {
    background: var(--titlebar);
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
  }
  .titlebar .lights { display: flex; gap: 4px; }
  .titlebar .lights span { width: 10px; height: 10px; background: var(--window-gray); border: 1px solid #000; display: inline-block; }

  /* video-frame style body: white, letterboxed */
  .frame {
    background: #fff;
    border-top: 14px solid #000;
    border-bottom: 14px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
  }
  #face { width: min(220px, 44vw); height: auto; flex-shrink: 0; }
  .ahah {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(24px, 5.4vw, 40px);
    color: #111;
    letter-spacing: 1px;
    line-height: 1.05;
    user-select: none;
  }
  .ahah span { display: inline-block; }
  @keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .ahah .b1 { animation: bounce 0.7s ease-in-out infinite; }
  .ahah .b2 { animation: bounce 0.7s ease-in-out 0.12s infinite; }
  .ahah .b3 { animation: bounce 0.7s ease-in-out 0.24s infinite; }

  #headGroup { transform-origin: 110px 78px; animation: headshake 1.1s ease-in-out infinite; }
  @keyframes headshake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-7deg); }
    60% { transform: rotate(6deg); }
    85% { transform: rotate(-4deg); }
  }
  #fingerGroup { transform-origin: 176px 176px; animation: wag 0.55s ease-in-out infinite alternate; }
  @keyframes wag { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }
  @media (prefers-reduced-motion: reduce) {
    #headGroup, #fingerGroup, .ahah .b1, .ahah .b2, .ahah .b3 { animation: none; }
  }

  .override { display: flex; gap: 8px; padding: 12px 16px 16px; }
  .override input {
    flex: 1;
    font-family: "Courier New", monospace;
    font-size: 13px;
    padding: 5px 8px;
    background: #fff;
    border: 2px solid var(--window-dark);
    border-right-color: var(--window-light);
    border-bottom-color: var(--window-light);
    outline: none;
  }
  .override button {
    font-family: "Courier New", monospace;
    font-size: 13px;
    padding: 5px 14px;
    background: var(--window-gray);
    border: 2px solid var(--window-light);
    border-right-color: var(--window-dark);
    border-bottom-color: var(--window-dark);
    cursor: pointer;
  }
  .override button:active {
    border-color: var(--window-dark);
    border-right-color: var(--window-light);
    border-bottom-color: var(--window-light);
  }
  .override input:focus-visible, .override button:focus-visible {
    outline: 2px dashed var(--titlebar); outline-offset: 1px;
  }

  #restored {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 16px;
    background: var(--crt-bg);
    color: var(--phosphor);
    text-shadow: 0 0 8px rgba(53,255,109,0.8);
    z-index: 70; text-align: center; padding: 24px;
  }
  #restored h2 { font-size: clamp(18px, 3vw, 28px); letter-spacing: 2px; }
  #restored p { color: var(--phosphor-dim); font-size: 14px; }
</style>
</head>
<body>
<div class="crt">
  <div class="crt-inner">
    <div id="terminal" aria-live="off"></div>

    <div id="popup" role="alertdialog" aria-labelledby="popupTitle">
      <div class="titlebar">
        <span id="popupTitle">SECURITY.EXE</span>
        <span class="lights"><span></span><span></span></span>
      </div>
      <div class="frame">
        <svg id="face" viewBox="0 0 220 310" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <defs>
            <!-- tropical shirt pattern -->
            <pattern id="hawaii" width="26" height="26" patternUnits="userSpaceOnUse">
              <rect width="26" height="26" fill="#bcd9e8"/>
              <path d="M4 8 q3-6 6 0 q-3 3 -6 0" fill="#4c9a5f"/>
              <path d="M16 18 q3-6 6 0 q-3 3 -6 0" fill="#4c9a5f"/>
              <circle cx="20" cy="6" r="2" fill="#e0854a"/>
              <circle cx="8" cy="21" r="2" fill="#e0854a"/>
              <path d="M12 3 l2 3 l-4 0 z" fill="#d8c04e"/>
            </pattern>
          </defs>

          <!-- legs: jeans -->
          <path d="M78 232 L74 300 L102 300 L104 240 Z" fill="#4a6a94" stroke="#111" stroke-width="2.5"/>
          <path d="M142 232 L146 300 L118 300 L116 240 Z" fill="#4a6a94" stroke="#111" stroke-width="2.5"/>
          <line x1="104" y1="242" x2="116" y2="242" stroke="#111" stroke-width="2.5"/>

          <!-- left arm hanging (viewer left) -->
          <path d="M62 158 q-16 30 -10 58" fill="none" stroke="#111" stroke-width="2.5"/>
          <path d="M62 158 q-16 30 -10 58 q6 6 12 1 q-4 -28 8 -52 Z" fill="#ecc7a6" stroke="#111" stroke-width="2.5"/>
          <ellipse cx="57" cy="220" rx="8" ry="9" fill="#ecc7a6" stroke="#111" stroke-width="2.5"/>

          <!-- torso: roomy tropical shirt -->
          <path d="M64 150 Q66 132 88 126 L132 126 Q154 132 158 152 Q166 200 156 238 Q132 248 88 248 Q78 248 66 240 Q54 196 64 150 Z"
                fill="url(#hawaii)" stroke="#111" stroke-width="2.5"/>
          <!-- shirt center line + collar -->
          <line x1="110" y1="132" x2="110" y2="246" stroke="#111" stroke-width="1.6" opacity="0.5"/>
          <path d="M96 126 L110 142 L124 126" fill="#fff" stroke="#111" stroke-width="2.5"/>

          <!-- raised right arm (viewer right), sleeve + forearm -->
          <path d="M150 140 Q172 150 176 176" fill="none" stroke="#111" stroke-width="2.5"/>
          <path d="M146 132 Q174 142 182 174 L166 182 Q158 154 140 148 Z" fill="url(#hawaii)" stroke="#111" stroke-width="2.5"/>
          <g id="fingerGroup">
            <!-- forearm -->
            <path d="M170 178 Q176 150 172 128 q8 -4 12 2 q6 24 -2 50 Z" fill="#ecc7a6" stroke="#111" stroke-width="2.5"/>
            <!-- fist -->
            <ellipse cx="177" cy="122" rx="11" ry="10" fill="#ecc7a6" stroke="#111" stroke-width="2.5"/>
            <!-- index finger up -->
            <rect x="173" y="96" width="9" height="24" rx="4.5" fill="#ecc7a6" stroke="#111" stroke-width="2.5"/>
          </g>

          <g id="headGroup">
            <!-- neck -->
            <rect x="99" y="106" width="22" height="20" fill="#d67c66" stroke="#111" stroke-width="2.5"/>
            <!-- head: round, flushed -->
            <ellipse cx="110" cy="72" rx="44" ry="46" fill="#cf6f5f" stroke="#111" stroke-width="2.5"/>
            <!-- double chin -->
            <path d="M84 106 Q110 120 136 106" fill="none" stroke="#111" stroke-width="2" opacity="0.6"/>
            <!-- extra-flushed cheeks -->
            <ellipse cx="82" cy="84" rx="10" ry="7" fill="#b8503f" opacity="0.55"/>
            <ellipse cx="138" cy="84" rx="10" ry="7" fill="#b8503f" opacity="0.55"/>
            <!-- curly mop hair -->
            <path d="M66 58 Q62 24 86 18 Q94 8 110 10 Q126 8 134 18 Q158 24 154 58
                     Q150 44 140 42 Q146 34 136 30 Q138 24 126 24 Q120 18 110 20 Q100 18 94 24 Q82 24 84 30 Q74 34 80 42 Q70 44 66 58 Z"
                  fill="#4a2f1b" stroke="#111" stroke-width="2.5"/>
            <!-- sideburns -->
            <path d="M66 58 q-2 12 4 20 l4 -2 q-4 -8 -2 -16 Z" fill="#4a2f1b" stroke="#111" stroke-width="2"/>
            <path d="M154 58 q2 12 -4 20 l-4 -2 q4 -8 2 -16 Z" fill="#4a2f1b" stroke="#111" stroke-width="2"/>
            <!-- glasses: thin wire, slightly crooked like he just ran -->
            <g transform="rotate(-2 110 66)">
              <circle cx="92" cy="66" r="13" fill="rgba(215,235,250,0.75)" stroke="#333" stroke-width="2.4"/>
              <circle cx="128" cy="66" r="13" fill="rgba(215,235,250,0.75)" stroke="#333" stroke-width="2.4"/>
              <line x1="105" y1="66" x2="115" y2="66" stroke="#333" stroke-width="2.4"/>
              <line x1="79" y1="64" x2="68" y2="60" stroke="#333" stroke-width="2.4"/>
              <line x1="141" y1="64" x2="152" y2="60" stroke="#333" stroke-width="2.4"/>
            </g>
            <!-- smug closed eyes behind lenses -->
            <path d="M86 68 Q92 62 98 68" fill="none" stroke="#111" stroke-width="2.2"/>
            <path d="M122 68 Q128 62 134 68" fill="none" stroke="#111" stroke-width="2.2"/>
            <!-- nose -->
            <path d="M110 72 Q106 82 111 85" fill="none" stroke="#111" stroke-width="2.2"/>
            <!-- huge taunting grin -->
            <path d="M84 92 Q110 110 136 92 Q130 100 110 101 Q90 100 84 92 Z" fill="#fff" stroke="#111" stroke-width="2.2"/>
            <path d="M88 94 Q110 106 132 94" fill="none" stroke="#111" stroke-width="1.4" opacity="0.5"/>
          </g>
        </svg>
        <div class="ahah" aria-hidden="true">
          <span class="b1">AH</span> <span class="b2">AH</span> <span class="b3">AH!</span>
        </div>
      </div>
      <div class="override">
        <input id="magicInput" type="text" placeholder="enter magic word" aria-label="Enter magic word" autocomplete="off" spellcheck="false">
        <button id="tryBtn" type="button">Execute</button>
      </div>
    </div>

    <div id="restored">
      <h2>ACCESS GRANTED</h2>
      <p>System restored. Door locks re-engaged. Mr. DNA thanks you.<br>Hold on to your butts.</p>
    </div>
  </div>
</div>

<script>
(function () {
  var terminal = document.getElementById("terminal");
  var popup = document.getElementById("popup");
  var input = document.getElementById("magicInput");
  var btn = document.getElementById("tryBtn");
  var restored = document.getElementById("restored");
  var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  var bootLines = [
    "Jurassic Systems v2.1 — Isla Nublar node 04",
    "> access security",
    "access: PERMISSION DENIED.",
    "> access security grid",
    "access: PERMISSION DENIED.",
    "> access main security grid",
    "access: PERMISSION DENIED. ...and...."
  ];

  var spamLine = "YOU DIDN'T SAY THE MAGIC WORD!";
  var lines = [];
  var maxLines = 200;

  function render() {
    terminal.innerHTML = lines.map(function (l, i) {
      var cls = l.indexOf(">") === 0 ? "dim" : "";
      var cursor = i === lines.length - 1 ? " cursor" : "";
      return '<span class="' + cls + cursor + '">' + l + "</span>";
    }).join("\n");
  }

  function push(line) {
    lines.push(line);
    if (lines.length > maxLines) lines.splice(0, lines.length - maxLines);
    render();
  }

  var i = 0;
  function boot() {
    if (i < bootLines.length) {
      push(bootLines[i]);
      i++;
      setTimeout(boot, i <= 1 ? 700 : 450);
    } else {
      popup.classList.add("show");
      input.focus();
      startSpam();
    }
  }

  var spamTimer;
  function startSpam() {
    spamTimer = setInterval(function () {
      push(spamLine);
    }, reducedMotion ? 600 : 140);
  }

  function attempt() {
    var val = input.value.trim().toLowerCase();
    if (!val) return;
    if (val === "please") {
      clearInterval(spamTimer);
      popup.classList.remove("show");
      restored.style.display = "flex";
      push("> please");
      push("access: GRANTED. system restoring...");
    } else {
      push("> override " + val);
      push("access: PERMISSION DENIED. YOU DIDN'T SAY THE MAGIC WORD!");
      input.value = "";
      if (!reducedMotion) {
        popup.style.transition = "none";
        popup.style.transform = "translate(-50%, -50%) scale(1) rotate(-2deg)";
        setTimeout(function () {
          popup.style.transform = "translate(-50%, -50%) scale(1) rotate(2deg)";
          setTimeout(function () {
            popup.style.transition = "";
            popup.style.transform = "";
          }, 70);
        }, 70);
      }
    }
  }

  btn.addEventListener("click", attempt);
  input.addEventListener("keydown", function (e) {
    if (e.key === "Enter") attempt();
  });

  boot();
})();
</script>
</body>
</html>