grid-uikit/index.html at main · intechstudio/grid-uikit · 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
<!doctype html>
<html lang="en" style="color-scheme: dark; transition: color-scheme 0.3s">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte + TS</title>
    <style>
      #fontSizeValue {
        display: inline-block;
        width: 3.5ch;
        text-align: right;
      }
      #controls {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div id="controls">
      <input type="checkbox" id="darkModeToggle" checked />
      <label for="darkModeToggle">Toggle Dark Mode</label>
      <input type="checkbox" id="disableButtonsToggle" />
      <label for="disableButtonsToggle">Disable Buttons</label>
      <label for="fontSizeSlider"
        >Font Size: <span id="fontSizeValue">12</span>px</label
      >
      <input
        type="range"
        id="fontSizeSlider"
        min="8"
        max="36"
        step="0.1"
        value="12"
      />
    </div>
    <div id="app"></div>
    <script>
      const toggle = document.getElementById("darkModeToggle");
      toggle.addEventListener("change", (e) => {
        document.documentElement.setAttribute(
          "color-scheme",
          toggle.checked ? "dark" : "light",
        );
      });

      const disableToggle = document.getElementById("disableButtonsToggle");
      disableToggle.addEventListener("change", (e) => {
        if (window.setButtonsDisabled) {
          window.setButtonsDisabled(disableToggle.checked);
        }
      });

      const fontSizeSlider = document.getElementById("fontSizeSlider");
      const fontSizeValue = document.getElementById("fontSizeValue");

      fontSizeSlider.addEventListener("input", (e) => {
        const size = fontSizeSlider.value;
        document.body.style.fontSize = size + "px";
        fontSizeValue.textContent = parseFloat(size).toFixed(1);
      });
    </script>
    <script type="module" src="src/main.ts"></script>
  </body>
</html>