assayplot/index.html at main · ksfarrell/assayplot · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <meta name="description" content="Open-source statistics and publication figures for the lab. Runs offline; your data never leaves your machine." />
    <link rel="icon" type="image/png" href="./favicon.png" />
    <link rel="apple-touch-icon" href="./app-icon.png" />
    <title>AssayPlot — statistics and figures for the lab</title>
  </head>
  <body>
    <!-- Inline so it shows before the bundle loads. main.tsx removes it. -->
    <div id="splash" role="status" aria-live="polite">
      <div class="splash-inner">
        <svg class="splash-mark" viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.6" />
          <path d="M12 12V5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
          <path d="M12 12H6.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
        </svg>
        <div class="splash-name">AssayPlot</div>
        <div class="splash-track"><div class="splash-bar"></div></div>
        <div class="splash-note" id="splash-note">Starting</div>
      </div>
    </div>
    <style>
      #splash {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F7F8F8;
        color: #23302D;
        font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        transition: opacity 220ms ease;
      }
      #splash.leaving { opacity: 0; pointer-events: none; }
      .splash-inner { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; }
      .splash-mark { width: 38px; height: 38px; color: #0C6259; }
      .splash-name { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; }
      .splash-track {
        width: 180px; height: 3px; border-radius: 2px;
        background: rgba(12, 98, 89, 0.14); overflow: hidden;
      }
      .splash-bar {
        width: 40%; height: 100%; border-radius: 2px; background: #0C6259;
        animation: splash-slide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }
      .splash-note { font-size: 0.78rem; color: #6B7A77; min-height: 1.2em; }
      @keyframes splash-slide {
        0%   { transform: translateX(-110%); }
        100% { transform: translateX(260%); }
      }
      @media (prefers-color-scheme: dark) {
        #splash { background: #111816; color: #E6ECEA; }
        .splash-mark { color: #4FA396; }
        .splash-bar { background-color: #4FA396; }
        .splash-track { background: rgba(79, 163, 150, 0.18); }
        .splash-note { color: #8A9B97; }
      }
      @media (prefers-reduced-motion: reduce) {
        .splash-bar { animation: none; width: 100%; }
      }
    </style>
    <div id="root"></div>
    <noscript>
      AssayPlot needs JavaScript. It runs entirely in your browser — nothing is
      sent to a server — but that means the page cannot work without scripting.
    </noscript>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>