-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
204 lines (201 loc) · 9.82 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#fff" />
<meta
name="description"
content="Copy typographic spaces, math notations,
punctuations, dingbats, and other miscellaneous symbols & signs to your clipboard"
/>
<link
rel="shortcut icon"
href="./dist/assets/logo/icon.svg"
type="image/png"
/>
<link
rel="apple-touch-icon"
href="./dist/assets/logo/maskable_icon_x192.png"
type="image/png"
/>
<link rel="manifest" href="./dist/manifest.json" />
<title>GLYPHS</title>
<link rel="stylesheet" href="./dist/style.css" />
</head>
<body class="t-name">
<main class="grid" columns="4">
<h1 class="single-line logo">Glyphs</h1>
<div class="search-bar h-2 flex-h center" span="2">
<svg
class="search-icon"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
style="margin-top: 1px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.5001 13.793L10.7241 10.0169C11.6314 8.92758 12.0839 7.53039 11.9873 6.11596C11.8908 4.70154 11.2526 3.37879 10.2057 2.42289C9.15867 1.46699 7.78347 0.951523 6.36612 0.983731C4.94877 1.01594 3.5984 1.59334 2.59593 2.59581C1.59345 3.59829 1.01605 4.94866 0.983845 6.36601C0.951637 7.78336 1.4671 9.15856 2.423 10.2055C3.37891 11.2525 4.70165 11.8907 6.11608 11.9872C7.5305 12.0838 8.9277 11.6313 10.017 10.724L13.7931 14.5L14.5001 13.793ZM2.00012 6.5C2.00012 5.60999 2.26404 4.73996 2.75851 3.99994C3.25297 3.25992 3.95578 2.68314 4.77804 2.34255C5.60031 2.00195 6.50511 1.91284 7.37802 2.08647C8.25094 2.2601 9.05276 2.68869 9.6821 3.31802C10.3114 3.94736 10.74 4.74918 10.9137 5.6221C11.0873 6.49501 10.9982 7.39981 10.6576 8.22208C10.317 9.04435 9.74021 9.74715 9.00018 10.2416C8.26016 10.7361 7.39013 11 6.50012 11C5.30705 10.9987 4.16323 10.5241 3.3196 9.68052C2.47597 8.8369 2.00144 7.69307 2.00012 6.5V6.5Z"
/>
</svg>
<input
type="search"
span="6"
tabindex="1"
placeholder="Search by glyphs or unicode"
/>
<svg
class="close-icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
onclick="$(`[type='search']`).value=''"
>
<path
d="M15 5.875L14.125 5L10 9.125L5.875 5L5 5.875L9.125 10L5 14.125L5.875 15L10 10.875L14.125 15L15 14.125L10.875 10L15 5.875Z"
/>
</svg>
</div>
<div class="flex-h center icons">
<a id="min-search" class="flex center plain" href="javascript:void(0)">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.1251 17.2411L13.4051 12.521C14.5393 11.1594 15.1049 9.41288 14.9842 7.64485C14.8635 5.87682 14.0658 4.22339 12.7571 3.02851C11.4483 1.83363 9.72934 1.1893 7.95765 1.22956C6.18597 1.26982 4.498 1.99157 3.24491 3.24467C1.99182 4.49776 1.27007 6.18572 1.22981 7.95741C1.18955 9.72909 1.83388 11.4481 3.02875 12.7568C4.22363 14.0655 5.87707 14.8632 7.6451 14.9839C9.41312 15.1046 11.1596 14.539 12.5213 13.4048L17.2413 18.1249L18.1251 17.2411ZM2.50015 8.1249C2.50015 7.01238 2.83005 5.92485 3.44813 4.99982C4.06621 4.07479 4.94472 3.35382 5.97255 2.92808C7.00039 2.50234 8.13139 2.39094 9.22253 2.60799C10.3137 2.82503 11.316 3.36076 12.1026 4.14743C12.8893 4.9341 13.425 5.93638 13.6421 7.02752C13.8591 8.11866 13.7477 9.24966 13.322 10.2775C12.8962 11.3053 12.1753 12.1838 11.2502 12.8019C10.3252 13.42 9.23767 13.7499 8.12515 13.7499C6.63381 13.7482 5.20403 13.1551 4.1495 12.1006C3.09497 11.046 2.5018 9.61624 2.50015 8.1249V8.1249Z"
fill="var(--foregroundColor)"
/>
</svg>
</a>
<a
id="darkMode-toggle"
class="flex center plain"
tabindex="2"
href="javascript:void(0)"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.75 1.5H11.25V3.75H12.75V1.5Z"
fill="var(--foregroundColor)"
/>
<path
d="M22.5 11.25H20.25V12.75H22.5V11.25Z"
fill="var(--foregroundColor)"
/>
<path
d="M12.75 20.25H11.25V22.5H12.75V20.25Z"
fill="var(--foregroundColor)"
/>
<path
d="M3.75 11.25H1.5V12.75H3.75V11.25Z"
fill="var(--foregroundColor)"
/>
<path
d="M5.14806 4.102L4.0874 5.16266L5.67839 6.75365L6.73905 5.69299L5.14806 4.102Z"
fill="var(--foregroundColor)"
/>
<path
d="M18.841 4.09466L17.25 5.68565L18.3107 6.74631L19.9017 5.15532L18.841 4.09466Z"
fill="var(--foregroundColor)"
/>
<path
d="M18.3131 17.2517L17.2524 18.3123L18.8434 19.9033L19.9041 18.8427L18.3131 17.2517Z"
fill="var(--foregroundColor)"
/>
<path
d="M4.10254 18.8475L5.69254 17.25L6.75004 18.315L5.16004 19.905L4.10254 18.8475Z"
fill="var(--foregroundColor)"
/>
<path
d="M12 6C10.8133 6 9.65328 6.35189 8.66658 7.01118C7.67989 7.67047 6.91085 8.60754 6.45673 9.7039C6.0026 10.8003 5.88378 12.0067 6.11529 13.1705C6.3468 14.3344 6.91825 15.4035 7.75736 16.2426C8.59648 17.0818 9.66557 17.6532 10.8295 17.8847C11.9933 18.1162 13.1997 17.9974 14.2961 17.5433C15.3925 17.0892 16.3295 16.3201 16.9888 15.3334C17.6481 14.3467 18 13.1867 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6ZM12 16.5C10.8065 16.5 9.66194 16.0259 8.81802 15.182C7.97411 14.3381 7.5 13.1935 7.5 12C7.5 10.8065 7.97411 9.66193 8.81802 8.81802C9.66194 7.97411 10.8065 7.5 12 7.5V16.5Z"
fill="var(--foregroundColor)"
/>
</svg>
</a>
<a
class="github flex center plain"
tabindex="3"
href="https://github.com/imohanvadivel/Glyphs"
target="_blank"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.9996 1.50002C9.5068 1.50035 7.09544 2.38755 5.19686 4.00291C3.29828 5.61827 2.03634 7.85641 1.63677 10.317C1.2372 12.7775 1.72607 15.3 3.01593 17.4331C4.30579 19.5662 6.3125 21.1709 8.67709 21.96C9.20209 22.0575 9.42709 21.735 9.42709 21.4575C9.42709 21.18 9.42709 20.55 9.42709 19.6725C6.50959 20.3025 5.89459 18.2625 5.89459 18.2625C5.68943 17.6196 5.25763 17.0732 4.67959 16.725C3.72709 16.08 4.75459 16.0875 4.75459 16.0875C5.08729 16.1345 5.40485 16.2569 5.68302 16.4454C5.96119 16.6339 6.1926 16.8834 6.35959 17.175C6.65009 17.6961 7.13564 18.0804 7.70946 18.2436C8.28328 18.4067 8.89841 18.3353 9.41959 18.045C9.46193 17.5129 9.69654 17.0143 10.0796 16.6425C7.75459 16.3725 5.30209 15.4725 5.30209 11.4525C5.28508 10.4084 5.67201 9.39814 6.38209 8.63252C6.06068 7.72816 6.09826 6.735 6.48709 5.85752C6.48709 5.85752 7.36459 5.57252 9.37459 6.93002C11.0932 6.46123 12.906 6.46123 14.6246 6.93002C16.6271 5.57252 17.5046 5.85752 17.5046 5.85752C17.8934 6.735 17.931 7.72816 17.6096 8.63252C18.3197 9.39814 18.7066 10.4084 18.6896 11.4525C18.6896 15.4875 16.2371 16.3725 13.8971 16.635C14.1478 16.8891 14.341 17.1939 14.464 17.529C14.5869 17.8641 14.6365 18.2216 14.6096 18.5775C14.6096 19.98 14.6096 21.1125 14.6096 21.4575C14.6096 21.8025 14.7971 22.065 15.3596 21.96C17.7273 21.1699 19.7361 19.5622 21.0257 17.4251C22.3154 15.2881 22.8016 12.7615 22.3971 10.2984C21.9926 7.83535 20.7239 5.59695 18.8185 3.98459C16.9131 2.37224 14.4956 1.49139 11.9996 1.50002V1.50002Z"
fill="var(--foregroundColor)"
/>
</svg>
</a>
</div>
<div span="row" aria-hidden="true"> </div>
<div span="2" class="desc" flow-cols="2">
<p>
Glyphs is a one-stop place for typographic spaces, math notations,
punctuations, dingbats, and other miscellaneous symbols. <br />
<b>[click]</b> to copy a glyph,<br />
<b>[shift + click]</b> to copy their Unicode.
</p>
<p>
<b>Note:</b> Not all typefaces are packed with all the glyphs, and
rendering may vary based on the typeface. Check with your type
specimen if it's not working for you.
</p>
</div>
<div span="4-4" class="flex-v text-right opt">
<a tabindex="4" target="_blank" id="sh-uni" class="single-line"
>Show Unicode (u)</a
>
<a
href="javascript:void(0)"
tabindex="5"
id="sh-name"
class="single-line"
>Hide Name (n)</a
>
</div>
<div span="row" aria-hidden="true" class="h-2"> </div>
</main>
<div class="toast">
<div class="msg"></div>
</div>
<div class="debug-grid grid" columns="4">
<div style="min-width: 99px"> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
<script src="./dist/script.js"></script>
<script>
if (navigator.serviceWorker) {
navigator.serviceWorker.register("./sw.js");
}
</script>
<link
rel="stylesheet"
href="https://unpkg.com/grilles@1.0.5/grille.debug.css"
/>
<script src="https://unpkg.com/grilles@1.0.5/debug.js"></script>
</html>