typix/index.html at main · monkeyWie/typix · 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typix - Type To Pixels</title>
  </head>
  <body>
    <div id="root"></div>
    <div
      id="loading"
      style="
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--background);
        z-index: 9999;
        transition: opacity 0.3s;
      "
    >
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 16px;
        "
      >
        <span class="dot-bounce-loader">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </span>
        <div style="text-align: center">
          <h1
            id="loading-title"
            style="
              font-size: 1.5rem;
              font-weight: 600;
              margin: 0;
              color: var(--foreground);
              display: none;
            "
          ></h1>
        </div>
      </div>
    </div>
    <style id="loading-styles">
      :root {
        /* Light theme colors matching Tailwind config */
        --background: oklch(0.985 0 0);
        --foreground: oklch(0.141 0.005 285.823);
        --muted-foreground: oklch(0.705 0.015 286.067);
      }

      .dark {
        /* Dark theme colors matching Tailwind config */
        --background: oklch(0.141 0.005 285.823);
        --foreground: oklch(0.985 0 0);
        --muted-foreground: oklch(0.705 0.015 286.067);
      }

      .dot-bounce-loader {
        display: flex;
        gap: 0.5em;
        align-items: flex-end;
        height: 2.5em;
      }
      .dot-bounce-loader .dot {
        width: 0.8em;
        height: 0.8em;
        background: var(--foreground);
        border-radius: 50%;
        display: inline-block;
        animation: dot-bounce 1s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
      }
      .dot-bounce-loader .dot:nth-child(2) {
        animation-delay: 0.2s;
      }
      .dot-bounce-loader .dot:nth-child(3) {
        animation-delay: 0.4s;
      }
      @keyframes dot-bounce {
        0%,
        80%,
        100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-1em);
        }
      }
    </style>
    <script>
      // Theme detection and setup
      (function () {
        function getStoredTheme() {
          try {
            const uiStore = localStorage.getItem("ui-store");
            if (uiStore) {
              const parsed = JSON.parse(uiStore);
              return parsed.state?.theme || "system";
            }
          } catch (e) {
            console.warn("Failed to parse ui-store:", e);
          }
          return "system";
        }

        function getSystemTheme() {
          return window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "light";
        }

        function applyTheme(theme) {
          const resolvedTheme = theme === "system" ? getSystemTheme() : theme;
          document.documentElement.className =
            resolvedTheme === "dark" ? "dark" : "";

          // No need to manually update loading background as CSS variables handle it
        }

        // Apply initial theme
        const storedTheme = getStoredTheme();
        applyTheme(storedTheme);

        // Listen for system theme changes if using system theme
        if (storedTheme === "system") {
          const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
          mediaQuery.addEventListener("change", () => {
            applyTheme("system");
          });
        }
      })();
    </script>
    <script type="module" src="/src/app/main.tsx"></script>
  </body>
</html>