CosmoRisk/index.html at main · SpaceEngineerSS/CosmoRisk · 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="dark light" />
    <title>CosmoRisk</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  </head>
  <body>
    <div class="splash" id="splash" role="status" aria-live="polite">
      <div class="splash-inner">
        <div class="splash-mark">
          <svg viewBox="0 0 64 64" aria-hidden="true"><use href="#mark" /></svg>
          <span>COSMORISK</span>
        </div>
        <div class="progress"><i id="splash-bar"></i></div>
        <div class="splash-step" id="splash-step"></div>
      </div>
    </div>

    <svg width="0" height="0" style="position: absolute" aria-hidden="true">
      <symbol id="mark" viewBox="0 0 64 64">
        <path d="M13 23V13h10M41 13h10v10M51 41v10H41M23 51H13V41" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="square" />
        <circle cx="30" cy="34" r="7.5" fill="currentColor" />
        <path d="M14.5 52.5C27 47 42 37 49 18" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="2.6 3.2" opacity=".5" />
        <circle cx="47.6" cy="21.6" r="4.2" fill="var(--accent)" />
      </symbol>
    </svg>

    <div class="app" id="app">
      <header class="top">
        <div class="brand">
          <button class="btn ghost icon only-narrow" data-act="drawer-left" data-i18n-aria="top.catalog"><i data-icon="menu"></i></button>
          <svg viewBox="0 0 64 64" aria-hidden="true"><use href="#mark" /></svg>
          <span class="brand-word">COSMORISK</span>
          <span class="brand-ver" id="brand-ver"></span>
        </div>
        <div class="clock" title="UTC">
          <span class="clock-date" id="clock-date">—</span>
          <span class="clock-time" id="clock-time">—</span>
          <span class="clock-utc">UTC</span>
        </div>
        <div class="readout">
          <span class="k" data-i18n="top.rate"></span>
          <span class="v" id="top-rate">—</span>
        </div>
        <div class="readout">
          <span class="k" data-i18n="top.objects"></span>
          <span class="v" id="top-objects">0</span>
        </div>
        <div class="readout opt">
          <span class="k" data-i18n="top.status"></span>
          <span class="status" id="top-status"></span>
        </div>
        <div class="top-spacer"></div>
        <button class="cmd-trigger" id="cmd-trigger" data-act="palette">
          <i data-icon="search"></i>
          <span data-i18n="top.command"></span>
          <kbd>Ctrl K</kbd>
        </button>
        <div class="top-actions">
          <button class="btn ghost icon" data-act="scenarios" data-i18n-title="top.scenarios" data-i18n-aria="top.scenarios"><i data-icon="folder"></i></button>
          <button class="btn ghost icon" data-act="screenshot" data-i18n-title="top.screenshot" data-i18n-aria="top.screenshot"><i data-icon="camera"></i></button>
          <button class="btn ghost icon" data-act="settings" data-i18n-title="top.settings" data-i18n-aria="top.settings"><i data-icon="sliders"></i></button>
          <button class="btn ghost icon" data-act="help" data-i18n-title="top.help" data-i18n-aria="top.help"><i data-icon="help"></i></button>
          <button class="btn ghost icon only-narrow" data-act="drawer-right" data-i18n-aria="top.inspector"><i data-icon="info"></i></button>
        </div>
      </header>

      <aside class="rail rail-left" id="rail-left" aria-label="Catalogue"></aside>

      <main class="view" id="view">
        <canvas id="canvas" tabindex="0" aria-label="3D view"></canvas>
        <div class="labels" id="labels"></div>
        <div class="hud hud-tl">
          <div class="focus-name" id="hud-focus"></div>
          <div id="hud-dist"></div>
        </div>
        <div class="view-tools" id="view-tools"></div>
        <div class="hud hud-bl">
          <div class="scalebar" id="scalebar"><span id="scalebar-label"></span><i id="scalebar-bar"></i></div>
          <div class="legend" id="legend"></div>
        </div>
        <div class="hud hud-br" id="hud-perf"></div>
        <div class="banner" id="impact-banner" hidden></div>
      </main>

      <aside class="rail rail-right" id="rail-right" aria-label="Inspector"></aside>

      <footer class="timeline" id="timeline"></footer>
    </div>

    <div class="toasts" id="toasts" aria-live="polite"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>