colorfetti/index.html at main · Shilo/colorfetti · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="color-scheme" content="only light" />
    <title>Colorfetti</title>
    <meta name="description" content="Throw your pixels a palette party. Recolor images and animations." />
    <!-- The preview a chat or social app shows for a link. Those apps want whole addresses. -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Colorfetti" />
    <meta property="og:title" content="Colorfetti" />
    <meta property="og:description" content="Throw your pixels a palette party. Recolor images and animations." />
    <meta property="og:url" content="https://shilo.github.io/colorfetti/" />
    <meta property="og:image" content="https://shilo.github.io/colorfetti/pwa-512x512.png" />
    <meta property="og:image:width" content="512" />
    <meta property="og:image:height" content="512" />
    <meta property="og:image:alt" content="Colorfetti: a black C frame with five colorful confetti pieces" />
    <meta name="twitter:card" content="summary" />
    <link rel="icon" type="image/x-icon" sizes="16x16 32x32 48x48" href="/favicon.ico?v=2" data-favicon-light="/favicon.ico?v=2" data-favicon-dark="/favicon-dark.ico?v=2" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2" data-favicon-light="/favicon-32x32.png?v=2" data-favicon-dark="/favicon-dark-32x32.png?v=2" />
    <link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg?v=2" data-favicon-light="/favicon-light.svg?v=2" data-favicon-dark="/favicon-dark.svg?v=2" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0EAAA5" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
    <meta name="apple-mobile-web-app-title" content="Colorfetti" />
    <meta name="theme-color" content="#f1f2f3" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#191c20" media="(prefers-color-scheme: dark)" />
    <!-- Choose explicit artwork, including in Safari versions that ignore SVG media queries.
         Relative URLs also work at the GitHub Pages project subpath. App theme overrides
         do not determine the browser chrome preference. -->
    <script id="colorfetti-favicons">
      const faviconScheme = matchMedia('(prefers-color-scheme: dark)');
      const updateFavicons = () => {
        for (const icon of document.querySelectorAll('[data-favicon-light]')) {
          const path = faviconScheme.matches ? icon.dataset.faviconDark : icon.dataset.faviconLight;
          icon.href = new URL(path.replace(/^\//, './'), document.baseURI).href;
        }
      };
      updateFavicons();
      faviconScheme.addEventListener('change', updateFavicons);
    </script>
    <!-- Resolve the saved or system theme before any CSS paints (see App.svelte). -->
    <script id="colorfetti-theme">
      let initialTheme;
      try {
        initialTheme = JSON.parse(localStorage.getItem('colorfetti') ?? localStorage.getItem('bitify'))?.theme;
      } catch {
        // Unavailable or invalid storage still follows the system.
      }
      const resolvedTheme = initialTheme === 'light' || initialTheme === 'dark'
        ? initialTheme : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
      document.documentElement.dataset.theme = resolvedTheme;
      document.querySelector('meta[name=color-scheme]').content = `only ${resolvedTheme}`;
      for (const meta of document.querySelectorAll('meta[name=theme-color]')) {
        meta.content = resolvedTheme === 'dark' ? '#191c20' : '#f1f2f3';
      }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:[email protected]&display=swap" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>