source-atomfall/index.html at main · stateloop-connected/source-atomfall · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <title>ATOMFALL — Wasteland Prototype</title>
    <style>
      :root { color-scheme: dark; }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { width: 100%; height: 100%; overflow: hidden; background: #05060a; }
      body { font-family: "Courier New", ui-monospace, monospace; }
      #app { position: fixed; inset: 0; }
      canvas { display: block; width: 100%; height: 100%; }

      /* ---- boot / loading terminal ---- */
      #boot {
        position: fixed; inset: 0; z-index: 9000;
        background: #04070b;
        color: #4dff9a;
        display: flex; flex-direction: column; justify-content: center;
        padding: 6vh 8vw;
        font-size: clamp(11px, 1.15vw, 16px);
        line-height: 1.55;
        letter-spacing: 0.06em;
        text-shadow: 0 0 6px rgba(77,255,154,0.55), 0 0 22px rgba(77,255,154,0.2);
        transition: opacity 900ms ease;
      }
      #boot.hidden { opacity: 0; pointer-events: none; }
      #boot::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: repeating-linear-gradient(
          to bottom,
          rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
          rgba(0,0,0,0.32) 3px, rgba(0,0,0,0.32) 4px
        );
        mix-blend-mode: multiply;
      }
      #boot-log { white-space: pre-wrap; max-width: 90ch; }
      #boot-bar {
        margin-top: 2.4em; height: 14px; width: min(60ch, 100%);
        border: 1px solid #2f8f5c; padding: 2px; position: relative;
      }
      #boot-bar > i {
        display: block; height: 100%; width: 0%;
        background: linear-gradient(90deg, #1d7a48, #4dff9a);
        box-shadow: 0 0 12px rgba(77,255,154,0.7);
        transition: width 220ms ease;
      }
      #boot-hint { margin-top: 1.6em; opacity: 0.75; }
      .blink { animation: blink 1.05s steps(2, start) infinite; }
      @keyframes blink { to { visibility: hidden; } }

      #crash {
        position: fixed; inset: 0; z-index: 9999; display: none;
        background: #120404; color: #ff8b6b; padding: 8vh 8vw;
        font-size: 13px; white-space: pre-wrap; overflow: auto;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>

    <div id="boot">
      <div id="boot-log">VALCORP DYNAMICS (TM) TERMLINK PROTOCOL</div>
      <div id="boot-bar"><i></i></div>
      <div id="boot-hint">&gt;<span class="blink">_</span></div>
    </div>

    <pre id="crash"></pre>

    <script type="module">
      const crash = document.getElementById('crash');
      const show = (label, err) => {
        crash.style.display = 'block';
        crash.textContent += `\n[${label}] ${err && (err.stack || err.message || err)}\n`;
      };
      window.addEventListener('error', (e) => show('ERROR', e.error || e.message));
      window.addEventListener('unhandledrejection', (e) => show('PROMISE', e.reason));
    </script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>