wanta/index.html at main · oomol-lab/wanta · 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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="./favicon.ico" />
    <title>%APP_NAME%</title>
    <script>
      // Resolve theme before first paint so the window shows the correct background the moment it
      // appears, avoiding a white/wrong-color flash while React/Tailwind are still loading. Reads the
      // same persisted key as ThemeProvider (%WANTA_THEME_KEY% is injected from branding at build time
      // per R1), falling back to the system theme. Any failure is ignored (worst case: light background).
      ;(function () {
        try {
          var pref = localStorage.getItem("%WANTA_THEME_KEY%")
          var dark =
            pref === "dark" ||
            ((pref === "system" || !pref) && window.matchMedia("(prefers-color-scheme: dark)").matches)
          if (dark) {
            document.documentElement.classList.add("dark")
          }
        } catch (e) {}
      })()
    </script>
    <style>
      /* Critical first-paint styles: applied before Tailwind / React load so the window is never blank
         white. Background colors mirror index.css --background (light / .dark) for a seamless handoff
         once React takes over. */
      html {
        background: oklch(1 0 0);
        color: oklch(0.241 0.01 249);
        color-scheme: light;
      }
      html.dark {
        background: oklch(0.179 0.004 286);
        color: oklch(0.949 0.003 268);
        color-scheme: dark;
      }
      /* React clears #root on mount, removing the boot placeholder below (it only covers the gap
         before the JS bundle loads). */
      #wanta-boot {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
      }
      #wanta-boot::after {
        content: "";
        width: 22px;
        height: 22px;
        border-radius: 9999px;
        border: 2px solid color-mix(in oklch, currentColor 18%, transparent);
        border-top-color: currentColor;
        animation: wanta-boot-spin 0.7s linear infinite;
        opacity: 0.55;
      }
      @keyframes wanta-boot-spin {
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div id="wanta-boot" aria-hidden="true"></div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>