-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (135 loc) · 8.7 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>chars.to</title>
<link id="favicon" rel="icon" href="code-2-idle.svg">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=source-code-pro:400|quicksand:400" rel="stylesheet" />
</head>
<body class="flex flex-col min-h-screen overflow-x-hidden relative">
<header class="bg-white border-b border-gray-300 flex flex-wrap pt-2 text-gray-800 sm:pt-0 dark:border-zinc-600 dark:bg-[#1e1e1e]">
<div class="flex flex-1 font-semibold gap-x-5 items-center text-center tracking-wide pl-2 w-full sm:p-4 dark:text-gray-200">
<a href="/">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-2"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
</a>
<input
class="bg-transparent font-normal outline-none tracking-wider w-full dark:placeholder-gray-300/70 dark:text-white"
id="name"
placeholder="Unnamed chars">
</div>
<nav class="flex gap-x-3 items-center justify-between p-2 w-full sm:px-6 sm:w-auto dark:text-gray-300/70 lg:gap-x-6">
<div class="flex items-center gap-x-3 sm:order-2 lg:gap-x-6">
<a id="save">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-save"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
</a>
<a id="clear">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
</a>
<a id="cog">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
</a>
<a id="dark-mode">
<svg
id="auto-icon"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-contrast"><circle cx="12" cy="12" r="10"/><path d="M12 18a6 6 0 0 0 0-12v12z"/></svg>
<svg
class="hidden"
id="moon-icon"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
<svg
class="hidden"
id="sun-icon"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
</a>
<a href="https://github.com/scottbedard/chars.to">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
</a>
</div>
<div class="select sm:order-1">
<select id="language">
<option value="auto" selected>plain text</option>
<option disabled>—</option>
<option value="c">c</option>
<option value="clojure">clojure</option>
<option value="coffeescript">coffeescript</option>
<option value="cpp">c++</option>
<option value="csharp">c#</option>
<option value="css">css</option>
<option value="dart">dart</option>
<option value="dockerfile">dockerfile</option>
<option value="elixir">elixir</option>
<option value="fsharp">f#</option>
<option value="go">go</option>
<option value="graphql">graphql</option>
<option value="handlebars">handlebars</option>
<option value="html">html</option>
<option value="java">java</option>
<option value="javascript">javascript</option>
<option value="json">json</option>
<option value="julia">julia</option>
<option value="kotlin">kotlin</option>
<option value="less">less</option>
<option value="lisp">lisp</option>
<option value="lua">lua</option>
<option value="objective-c">objective-c</option>
<option value="pascal">pascal</option>
<option value="perl">perl</option>
<option value="php">php</option>
<option value="powershell">powershell</option>
<option value="pug">pug</option>
<option value="python">python</option>
<option value="r">r</option>
<option value="razor">razor</option>
<option value="ruby">ruby</option>
<option value="rust">rust</option>
<option value="scala">scala</option>
<option value="scss">scss</option>
<option value="shell">shell</option>
<option value="sql">sql</option>
<option value="swift">swift</option>
<option value="twig">twig</option>
<option value="typescript">typescript</option>
<option value="xml">xml</option>
<option value="yaml">yaml</option>
</select>
</div>
</nav>
</header>
<main class="flex flex-col flex-1">
<div class="flex-1" id="monaco"></div>
</main>
<dialog id="settings">
<form method="dialog">
<div>
<label for="settings-line-numbers">Line numbers</label>
<input id="settings-line-numbers" type="checkbox" />
</div>
<div>
<label for="settings-minimap">Minimap</label>
<input id="settings-minimap" type="checkbox" />
</div>
<div>
<label for="settings-scroll-beyond-last-line">Scroll beyond last line</label>
<input id="settings-scroll-beyond-last-line" type="checkbox" />
</div>
<div>
<label for="settings-font-size">Font size</label>
<input id="settings-font-size" min="6" max="32" step="1" type="range" />
</div>
<div>
<label for="settings-line-height">Line height</label>
<input id="settings-line-height" min="6" max="64" step="1" type="range" />
</div>
<div>
<label>Restore default</label>
<button class="hover:text-red-500" id="settings-reset" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="aspect-square w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-ccw"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
</button>
</div>
</form>
</dialog>
<script type="module" src="/src/main.ts"></script>
</body>
</html>