claudepot-app/index.html at main · xiaolai/claudepot-app · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Claudepot</title>

    <!-- Warm the two font weights the shell paints with during the first
         second; the other two (SemiBold, Bold) load on-demand once the
         UI actually uses them. The matching @font-face rules are inline
         below so the preload connects at HTML-parse time — keeping them
         in tokens.css delayed the declarations until the module graph
         finished compiling, leaving the preloaded fonts "unused" during
         the window.load threshold and WebKit would warn. -->
    <link rel="preload" as="font" type="font/woff2"
          href="/fonts/JetBrainsMonoNerdFontMono-Regular.woff2" crossorigin />
    <link rel="preload" as="font" type="font/woff2"
          href="/fonts/JetBrainsMonoNerdFontMono-Medium.woff2" crossorigin />

    <!-- First-paint skeleton + font-face declarations. Lives inline (no
         external CSS fetch) so the webview paints the shell background
         the instant the HTML lands instead of showing white for the
         multi-second module-graph cold compile on dev + JS-bundle parse
         on release. Theme matches tokens.css; replaced the moment React
         mounts. -->
    <style>
      @font-face {
        font-family: 'JetBrainsMonoNF';
        src: url('/fonts/JetBrainsMonoNerdFontMono-Regular.woff2') format('woff2');
        font-weight: 400; font-style: normal; font-display: swap;
      }
      @font-face {
        font-family: 'JetBrainsMonoNF';
        src: url('/fonts/JetBrainsMonoNerdFontMono-Medium.woff2') format('woff2');
        font-weight: 500; font-style: normal; font-display: swap;
      }
      @font-face {
        font-family: 'JetBrainsMonoNF';
        src: url('/fonts/JetBrainsMonoNerdFontMono-SemiBold.woff2') format('woff2');
        font-weight: 600; font-style: normal; font-display: swap;
      }
      @font-face {
        font-family: 'JetBrainsMonoNF';
        src: url('/fonts/JetBrainsMonoNerdFontMono-Bold.woff2') format('woff2');
        font-weight: 700; font-style: normal; font-display: swap;
      }
      html, body { height: 100%; margin: 0; }
      body {
        background: oklch(99% 0.003 60);
        color: oklch(22% 0.008 60);
        font-family: 'JetBrainsMonoNF', 'JetBrains Mono', ui-monospace, Menlo, monospace;
        font-size: 13px;
      }
      @media (prefers-color-scheme: dark) {
        body { background: oklch(16% 0.006 60); color: oklch(92% 0.006 60); }
      }
      html[data-theme="dark"] body {
        background: oklch(16% 0.006 60); color: oklch(92% 0.006 60);
      }
      html[data-theme="light"] body {
        background: oklch(99% 0.003 60); color: oklch(22% 0.008 60);
      }
      #cp-boot {
        position: fixed; inset: 0;
        display: flex; align-items: center; justify-content: center;
        flex-direction: column; gap: 10px;
        color: oklch(65% 0.006 60);
        letter-spacing: 0.08em; text-transform: uppercase;
        font-size: 10px;
      }
      #cp-boot .dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: oklch(68% 0.13 45);
        animation: cp-pulse 1.2s ease-in-out infinite;
      }
      @keyframes cp-pulse {
        0%, 100% { opacity: 0.25; transform: scale(0.9); }
        50%      { opacity: 1;    transform: scale(1.1); }
      }
      @media (prefers-reduced-motion: reduce) {
        #cp-boot .dot { animation: none; opacity: 0.7; }
      }
    </style>

    <!-- Apply the persisted theme before React mounts so the skeleton
         matches the user's choice (prevents a light → dark flash). -->
    <script>
      (function () {
        try {
          var t = localStorage.getItem('cp-theme');
          if (t === 'light' || t === 'dark') {
            document.documentElement.dataset.theme = t;
          }
        } catch (_) {}
      })();
    </script>
  </head>

  <body>
    <div id="root">
      <div id="cp-boot">
        <span class="dot"></span>
        <span>claudepot</span>
      </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>