a scrappy gimbal that insults you in shakespearean english
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <link rel="icon" type="image/gif" href="/goose.gif" />
6 <style>
7 :root {
8 /* Light mode colors */
9 --text-color: #1a1a1a;
10 --text-color-secondary: #666;
11 --text-color-hover: #333;
12 --bg-color: #fff;
13 --bg-color-secondary: #f5f5f5;
14 --bg-color-hover: #f0f0f0;
15 --bg-color-active: #e5e5e5;
16 --border-color: #ddd;
17 }
18
19 @media (prefers-color-scheme: dark) {
20 :root {
21 --text-color: #e0e0e0;
22 --text-color-secondary: #999;
23 --text-color-hover: #fff;
24 --bg-color: #121212;
25 --bg-color-secondary: #1e1e1e;
26 --bg-color-hover: #2a2a2a;
27 --bg-color-active: #333;
28 --border-color: #444;
29 }
30 }
31
32 * {
33 margin: 0;
34 padding: 0;
35 box-sizing: border-box;
36 }
37
38 body {
39 font-family: system-ui, sans-serif;
40 line-height: 1.5;
41 color: var(--text-color);
42 background-color: var(--bg-color);
43 }
44
45 input {
46 padding: 8px 12px;
47 border: 1px solid var(--border-color);
48 border-radius: 4px;
49 width: 100%;
50 background: var(--bg-color-secondary);
51 color: var(--text-color);
52 font: inherit;
53 }
54
55 button {
56 font: inherit;
57 border: none;
58 background: none;
59 cursor: pointer;
60 color: var(--text-color-secondary);
61 }
62
63 button:hover {
64 background: var(--bg-color-hover);
65 }
66 </style>
67 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
68 <title>Myrus Control Board</title>
69 <meta name="description" content="The coolest gimbal you have ever seen!" />
70 </head>
71 <body>
72 <div id="app"></div>
73 <script type="module" src="/src/index.ts"></script>
74 </body>
75</html>