scopa-score-keeper/index.html at main · taterhead247/scopa-score-keeper · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scopa Score</title>
    <meta name="description" content="Effortless score tracking for the Italian card game Scopa." />
    <!--
      theme-color drives the browser chrome (address bar tint on mobile,
      taskbar accent on installed PWAs). Matches the icon's Mediterranean
      blue so the chrome blends into the splash and the app's primary.
    -->
    <meta name="theme-color" content="#2563eb" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
    <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <link href="/src/main.css" rel="stylesheet" />
    <!--
      Static loading shell (#52). Renders synchronously from this HTML so
      LCP fires at HTML parse instead of waiting for jeep-sqlite + sql.js
      to initialize (~5 s on simulated slow 4G). React mounts into #root
      and replaces this shell as soon as the DB is ready.

      Theme detection runs inline so users who pinned Dark via the
      in-app toggle don't see a cream flash. Mirrors next-themes'
      storageKey="scopa-theme" config in main.tsx.
    -->
    <script>
      (function () {
        try {
          var t = localStorage.getItem('scopa-theme');
          var dark = t === 'dark' || (t !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches);
          if (dark) document.documentElement.classList.add('dark');
        } catch (e) { /* ignore */ }
      })();
    </script>
    <!--
      Outfit served from /public/fonts/outfit/ instead of @fontsource via
      the JS bundle (#52). Inline @font-face means the woff2 fetches
      parallel-load with HTML rather than waiting for the JS chunk that
      pulls @fontsource CSS. font-display: swap lets text paint in the
      system fallback first, then re-paint in Outfit on arrival — keeps
      LCP off the font dependency chain.
    -->
    <link rel="preload" as="font" type="font/woff2" href="/fonts/outfit/outfit-latin-400-normal.woff2" crossorigin>
    <link rel="preload" as="font" type="font/woff2" href="/fonts/outfit/outfit-latin-700-normal.woff2" crossorigin>
    <style>
      @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/outfit/outfit-latin-400-normal.woff2') format('woff2'); }
      @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/outfit/outfit-latin-500-normal.woff2') format('woff2'); }
      @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/outfit/outfit-latin-600-normal.woff2') format('woff2'); }
      @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/outfit/outfit-latin-700-normal.woff2') format('woff2'); }
      html, body { margin: 0; padding: 0; }
      body {
        background: oklch(0.96 0.02 80);
        font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      }
      html.dark body { background: oklch(0.18 0.03 250); }
      #scopa-loading-shell {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        color: oklch(0.25 0.01 270);
      }
      html.dark #scopa-loading-shell { color: oklch(0.96 0.02 80); }
      #scopa-loading-shell svg { width: 112px; height: 112px; }
      #scopa-loading-shell .title {
        font-size: 2.25rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1;
        margin: 0;
      }
    </style>
</head>

<body>
    <div id="root">
      <div id="scopa-loading-shell" aria-hidden="true">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Scopa Score">
          <rect width="1024" height="1024" rx="180" fill="#2563eb"/>
          <rect x="222" y="162" width="560" height="780" rx="56" fill="#faf5eb"/>
          <circle cx="502" cy="552" r="220" fill="#d4a017"/>
          <circle cx="502" cy="552" r="195" fill="#f0c450"/>
          <polygon fill="#5e3a13" transform="translate(502 552)" points="0,-180 29.8,-72.1 127.3,-127.3 72.1,-29.8 180,0 72.1,29.8 127.3,127.3 29.8,72.1 0,180 -29.8,72.1 -127.3,127.3 -72.1,29.8 -180,0 -72.1,-29.8 -127.3,-127.3 -29.8,-72.1"/>
          <circle cx="502" cy="552" r="28" fill="#f0c450"/>
          <circle cx="502" cy="552" r="18" fill="#e85d4a"/>
        </svg>
        <h1 class="title">Scopa Score</h1>
      </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
</body>

</html>