luminar/index.html at main · brandonlukas/luminar · 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
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>luminar</title>
</head>

<body>
  <div id="app">
    <header class="topbar">
      <div class="topbar__brand">luminar</div>
      <div class="topbar__loader">
        <button class="topbar__filepicker" type="button" id="file-picker-btn">Load CSV</button>
        <input type="file" id="file-input" accept=".csv,.txt" style="display:none" />
        <span class="topbar__hint">or drag &amp; drop</span>
      </div>
    </header>
    <aside class="sidebar" id="sidebar"></aside>
    <div class="viewport" id="viewport">
      <div class="empty-state" id="empty-state">
        <p class="empty-state__title">Drop a vector field CSV here</p>
        <p class="empty-state__sub">or click "Load CSV" above</p>
        <p class="empty-state__hint">Expected columns: x, y, dx, dy</p>
      </div>
    </div>
    <aside class="export-panel" id="export-panel"></aside>
    <footer class="statusbar">
      <div class="statusbar__left">
        <span class="statusbar__fps" id="status-fps">-- fps</span>
        <span class="statusbar__sep">&middot;</span>
        <span class="statusbar__particles" id="status-particles">0 particles</span>
      </div>
      <div class="statusbar__center">
        <span class="statusbar__field" id="status-field">No field loaded</span>
      </div>
      <div class="statusbar__right">
        <button class="statusbar__btn" id="btn-playpause" type="button">Pause</button>
        <button class="statusbar__btn" id="btn-aspect" type="button">16:9</button>
      </div>
    </footer>
  </div>
  <div class="drop-overlay" id="drop-overlay" style="display:none">Drop CSV to load vector field</div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>