monocode/index.html at main · alexfoxtm/monocode · 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
98
99
100
101
102
103
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/monocode.png" />
    <title>MonoCode</title>
    <script>
      (function () {
        try {
          var root = document.documentElement;
          var hue = localStorage.getItem("monocode.themeHue");
          var sat = localStorage.getItem("monocode.themeSaturation");
          var opacity = localStorage.getItem("monocode.sidebarOpacity");
          if (hue != null) {
            var h = Math.max(0, Math.min(360, Number(hue) || 0));
            root.style.setProperty("--theme-hue", String(h));
          }
          if (sat != null) {
            var s = Math.max(0, Math.min(100, Number(sat) || 0));
            root.style.setProperty("--theme-saturation", s + "%");
          }
          if (opacity != null) {
            var o = Math.max(0.15, Math.min(1, Number(opacity) || 0.85));
            root.style.setProperty("--sidebar-opacity", String(o));
          }
          var scheme = localStorage.getItem("monocode.colorScheme");
          if (scheme === "system") {
            scheme = window.matchMedia("(prefers-color-scheme: light)").matches
              ? "light"
              : "dark";
          }
          if (scheme === "light") {
            root.classList.add("theme-light");
          }
          var bodyGlass = localStorage.getItem("monocode.bodyGlass");
          if (bodyGlass == null || bodyGlass === "1" || bodyGlass === "true") {
            root.classList.add("glass-body");
          }
          var isMac =
            typeof navigator !== "undefined" &&
            /Mac|iPhone|iPad/.test(navigator.platform);
          if (isMac) {
            root.classList.add("is-mac");
          }
        } catch (_) {}
      })();
    </script>
    <style>
      :root {
        --theme-hue: 240;
        --theme-saturation: 0%;
        --sidebar-opacity: 0.85;
        --background-lightness: 9%;
        --color-background-base: hsl(
          var(--theme-hue) var(--theme-saturation) var(--background-lightness)
        );
      }

      html.theme-light {
        --background-lightness: 97%;
      }

      html,
      body,
      #boot-splash {
        margin: 0;
        background: var(--color-background-base);
      }

      /* Opaque cover until React paints. The logo is in HTML so it is
         visible during the Dock bounce, before the bundle runs. */
      #boot-splash {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        transition: opacity 0.16s ease;
      }

      #boot-splash.boot-splash-out {
        opacity: 0;
      }

      #boot-splash img {
        width: 72px;
        height: 72px;
        object-fit: contain;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="boot-splash" aria-hidden="true">
      <img src="/monocode.png" alt="" />
    </div>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>