remapp.ing/index.html at master · GRAMCTRL/remapp.ing · 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
<!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="description" content="An open source Haybox remapping tool" />
    <meta name="theme-color" content="#ebebeb" />

    <link rel="icon" type="image/x-icon" href="/icons/favicon.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />

    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />

    <link
      rel="preload"
      href="/src/assets/fonts/RedHatMono/RedHatMono-VariableFont_wght.ttf"
      as="font"
      type="font/ttf"
      crossorigin="anonymous"
    />

    <title>REMAPP.ING</title>
    <script>
      const storedTheme = localStorage.getItem('theme') ?? 'system';

      switch (storedTheme) {
        case 'system': {
          document.documentElement.classList.remove('dark', 'light');
          const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
          document.documentElement.classList.add(isDark ? 'dark' : 'light');
          break;
        }
        case 'dark': {
          document.documentElement.classList.remove('light');
          document.documentElement.classList.add('dark');
          break;
        }
        case 'light': {
          document.documentElement.classList.remove('dark');
          document.documentElement.classList.add('light');
          break;
        }
      }

      const storedHue = localStorage.getItem('hue') ?? '0';
      document.documentElement.style.setProperty('--h', +parseFloat(storedHue).toFixed(2));

      const storedSaturation = localStorage.getItem('chroma') ?? '0';
      document.documentElement.style.setProperty('--c', +parseFloat(storedSaturation).toFixed(2));
    </script>
  </head>
  <body>
    <main id="app"></main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>