-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
126 lines (114 loc) · 4.3 KB
/
index.html
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html lang="en">
<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>Argon App</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://api.argon.gl" />
<link rel="preconnect" href="https://rts.argon.gl" />
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet">
<link href="https://emoji-css.afeld.me/emoji.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script>
if (window.isStandalone) {
document.body.style = "background-color: transparent !important;"
}
</script>
<style>
button.separate-window {
display: none !important;
}
:root {
/* Color System */
--editor-text-default: hsl(240 10% 3.9%);
--editor-text-gray: hsl(240 3.8% 46.1%);
--editor-text-brown: hsl(25 95% 53%);
--editor-text-orange: hsl(24 95% 53%);
--editor-text-yellow: hsl(48 96% 53%);
--editor-text-green: hsl(142 71% 45%);
--editor-text-blue: hsl(221 83% 53%);
--editor-text-purple: hsl(269 97% 85%);
--editor-text-pink: hsl(336 80% 58%);
--editor-text-red: hsl(0 84% 60%);
/* Background Colors */
--editor-bg-default: hsl(0 0% 100%);
--editor-bg-subtle: hsl(0 0% 98%);
--editor-bg-muted: hsl(240 5% 96%);
/* Highlight Colors */
--editor-highlight-default: hsl(0 0% 98%);
--editor-highlight-gray: hsl(240 5% 96%);
--editor-highlight-brown: hsl(43 96% 96%);
--editor-highlight-orange: hsl(33 100% 96%);
--editor-highlight-yellow: hsl(54 100% 96%);
--editor-highlight-green: hsl(142 71% 96%);
--editor-highlight-blue: hsl(217 91% 96%);
--editor-highlight-purple: hsl(269 97% 96%);
--editor-highlight-pink: hsl(336 80% 96%);
--editor-highlight-red: hsl(0 84% 96%);
/* Border Colors */
--editor-border-default: hsl(240 5% 88%);
--editor-border-strong: hsl(240 5% 65%);
/* Spacing System */
--editor-spacing-1: 0.25rem;
--editor-spacing-2: 0.5rem;
--editor-spacing-3: 0.75rem;
--editor-spacing-4: 1rem;
--editor-spacing-6: 1.5rem;
--editor-spacing-8: 2rem;
--editor-spacing-12: 3rem;
--editor-spacing-16: 4rem;
/* Typography */
--editor-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--editor-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--editor-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
/* Animation */
--editor-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--editor-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--editor-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
/* Shadows */
--editor-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--editor-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--editor-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
/* Dark Mode Custom Properties */
.dark {
--editor-text-default: hsl(0 0% 98%);
--editor-text-gray: hsl(240 5% 64.9%);
--editor-text-brown: hsl(25 95% 53%);
--editor-text-orange: hsl(24 95% 53%);
--editor-text-yellow: hsl(48 96% 53%);
--editor-text-green: hsl(142 71% 45%);
--editor-text-blue: hsl(221 83% 53%);
--editor-text-purple: hsl(269 97% 85%);
--editor-text-pink: hsl(336 80% 58%);
--editor-text-red: hsl(0 84% 60%);
--editor-bg-default: hsl(240 10% 3.9%);
--editor-bg-subtle: hsl(240 3.7% 15.9%);
--editor-bg-muted: hsl(240 5% 26%);
--editor-highlight-default: hsl(240 3.7% 15.9%);
--editor-highlight-gray: hsl(240 5% 26%);
--editor-highlight-brown: hsl(43 96% 10%);
--editor-highlight-orange: hsl(33 100% 10%);
--editor-highlight-yellow: hsl(54 100% 10%);
--editor-highlight-green: hsl(142 71% 10%);
--editor-highlight-blue: hsl(217 91% 10%);
--editor-highlight-purple: hsl(269 97% 10%);
--editor-highlight-pink: hsl(336 80% 10%);
--editor-highlight-red: hsl(0 84% 10%);
--editor-border-default: hsl(240 5% 26%);
--editor-border-strong: hsl(240 5% 64.9%);
}
.disabled {
cursor: not-allowed;
}
</style>
</body>
</html>