-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
415 lines (397 loc) · 25.1 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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
<!DOCTYPE html>
<html lang="en" class="dark">
<head prefix="og: https://ogp.me/ns#
https://ogp.me/ns/website#">
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://myrio.now.sh/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Myrio Text</title>
<!-- CSP -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self' data: blob:; object-src 'none'; frame-src 'none'; manifest-src 'self'">
<!-- icons -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="favicon.png">
<!-- SEO basic meta tags -->
<meta name="title" content="Myrio Text">
<meta name="description"
content="Myrio Text lets you encode your text in the form of an image, and decode it back to text. It's a fun way to share secret messages with your friends.">
<meta name="keywords"
content="myrio text, text to image, image to text, encode text, decode text, secret messages, arnav, arnav-kr, arnav-kr.github.io, myrio.now.sh, myrio.vercel.app, encrypt decrypt, secret">
<meta name="robots" content="index, follow">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://myrio.now.sh/">
<meta property="og:title" content="Myrio Text">
<meta property="og:description"
content="Myrio Text lets you encode your text in the form of an image, and decode it back to text. It's a fun way to share secret messages with your friends.">
<meta property="og:image" content="https://myrio.now.sh/assets/og_banner.png">
<meta property="og:image:secure_url" content="https://myrio.now.sh/assets/og_banner.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Myrio Text" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://myrio.now.sh/">
<meta property="twitter:title" content="Myrio Text">
<meta property="twitter:description"
content="Myrio Text lets you encode your text in the form of an image, and decode it back to text. It's a fun way to share secret messages with your friends.">
<meta property="twitter:image" content="https://myrio.now.sh/assets/og_image.png">
<!-- Structured JSON Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"url": "https://myrio.now.sh/",
"name": "Myrio Text",
"alternateName": "Myrio Text",
"description": "Myrio Text lets you encode your text in the form of an image, and decode it back to text. It's a fun way to share secret messages with your friends.",
"keywords": "myrio text, text to image, image to text, encode text, decode text, secret messages, arnav, arnav-kr, arnav-kr.github.io, myrio.now.sh, myrio.vercel.app, encrypt decrypt, secret",
"image": {
"@type": "ImageObject",
"url": "https://myrio.now.sh/assets/og_banner.png",
"representativeOfPage": true,
"embeddedTextCaption": "Myrio Text"
},
"applicationCategory": [
"UtilityApplication",
"BrowserApplication"
],
"sameAs": [
"https://myrio.now.sh/",
"https://myrio.vercel.app/"
],
"author": {
"@type": "Person",
"name": "Arnav Kumar",
"alternateName": "Arnav",
"image": {
"@type": "ImageObject",
"url": "https://avatars.githubusercontent.com/u/72879799?v=4",
"width": 371,
"height": 371
},
"url": "https://github.com/arnav-kr/",
"sameAs": [
"https://github.com/arnav-kr",
"https://www.linkedin.com/in/arnav-kr/",
"https://twitter.com/arnavkr_",
"https://x.com/arnav-kr/",
"https://www.reddit.com/u/arnav-kr/",
"https://www.instagram.com/its.arnavkr/",
"https://www.facebook.com/its.arnavkr/",
"https://www.youtube.com/@ArnavOfficial"
]
},
"publisher": {
"@type": "Organization",
"name": "Myrio Text",
"url": "https://myrio.now.sh/",
"logo": {
"@type": "ImageObject",
"url": "https://myrio.now.sh/assets/logo.png",
"width": 1024,
"height": 1024
},
"sameAs": [
"https://myrio.now.sh/",
"https://myrio.vercel.app/"
]
}
}
</script>
<!-- web manifest -->
<link rel="manifest" href="manifest.webmanifest">
</head>
<body
class="group/body tab-encode flex flex-col min-h-screen dark:bg-zinc-900 dark:text-zinc-50 bg-zinc-50 text-zinc-900 zinc-50">
<header
class="select-none w-full flex justify-between items-center gap-2 xs:p-4 scale-90 sm:scale-100 p-2 sm:p-8 pb-6 lg:pb-0 xxl:justify-around">
<img src="favicon.svg" alt="Myrio Text Logo" title="Myrio Text" class="w-14 h-14">
<nav
class="relative rounded-[6px] shadow-sm dark:shadow-lg dark:bg-zinc-900 dark:text-zinc-50 text-zinc-900 ring-1 ring-zinc-200 dark:ring-zinc-700 font-semibold flex gap-3 p-1.5">
<label tabindex="0"
class="cursor-pointer rounded-[4px] py-2 pl-3 block has-[:checked]:bg-zinc-100 has-[:checked]:ring-1 has-[:checked]:ring-zinc-200 dark:has-[:checked]:ring-zinc-600 dark:has-[:checked]:bg-zinc-700 has-[:checked]:pr-3">
<input type="radio" name="mode" value="encode" class="mode hidden" id="encode-checkbox" checked>
<span>Encode</span>
</label>
<label tabindex="0"
class="cursor-pointer rounded-[4px] py-2 pr-3 block has-[:checked]:bg-zinc-100 has-[:checked]:ring-1 has-[:checked]:ring-zinc-200 dark:has-[:checked]:ring-zinc-600 dark:has-[:checked]:bg-zinc-700 has-[:checked]:pl-3">
<input type="radio" name="mode" value="decode" class="mode hidden" id="decode-checkbox">
<span>Decode</span>
</label>
</nav>
<div class="flex gap-2 items-center justify-center">
<button class="floating-button aspect-square h-12 w-12" title="Toggle Theme" id="theme-toggle">
<!-- sun -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 stroke-zic-900 dark:stroke-zinc-50 hidden dark:block">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
<!-- moon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 stroke-zinc-900 dark:stroke-zinc-50 dark:hidden">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
</button>
<a href="https://github.com/arnav-kr/MyrioText" target="_blank" rel="noopener noreferrer"
title="Myrio Text GitHub Repo"
class="flex p-3 rounded-md shadow-sm ring-1 bg-zinc-50 dark:bg-zinc-900 dark:hover:bg-zinc-800 hover:bg-zinc-100 transition duration-150 ring-zinc-200 dark:ring-zinc-800">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
class="w-7 h-7 fill-zinc-900 dark:fill-zinc-50">
<title>Myrio Text GitHub Repo</title>
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg></a>
</div>
</header>
<main
class="flex flex-grow flex-col items-center lg:flex-row lg:justify-evenly w-full py-2 px-6 min-h-[calc(100% - 128px)]">
<!-- output section -->
<section class="flex flex-col sm:flex-row gap-2 p-4 sm:justify-center items-center sm:items-start">
<!-- output canvas -->
<div
class="aspect-square p-1.5 w-full h-full flex justify-center items-center max-w-xs min-w-56 min-h-56 sm:min-w-64 sm:min-h-64 bg-zinc-50 dark:bg-zinc-800 rounded-lg shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-700 overflow-auto"
role="presentation" aria-roledescription="Encoded Image Preview">
<canvas class="max-w-full" id="render" width="16" height="16">
<span class="inline-block m-2">Huh, Your Browser Doesn't Support Canvas? 🤨</span>
</canvas>
</div>
<!-- output actions -->
<div class="output-actions flex-row sm:flex-col gap-2 pb-2 flex">
<!-- download -->
<button id="download-button" class="floating-button" title="Download Image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
<path
d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z" />
<path
d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z" />
</svg>
<span class="font-semibold text-base text-zinc-50 hidden">Download</span>
</button>
<!-- copy -->
<button id="copy-button" type="button" class="floating-button" title="Copy Image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
<path
d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" />
<path
d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" />
</svg>
<span class="font-semibold text-base text-zinc-50 hidden">Copy</span>
</button>
<!-- share -->
<button id="share-button" type="button" class="floating-button" title="Share Image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
<path
d="M13 4.5a2.5 2.5 0 1 1 .702 1.737L6.97 9.604a2.518 2.518 0 0 1 0 .792l6.733 3.367a2.5 2.5 0 1 1-.671 1.341l-6.733-3.367a2.5 2.5 0 1 1 0-3.475l6.733-3.366A2.52 2.52 0 0 1 13 4.5Z" />
</svg>
<span class="font-semibold text-base text-zinc-50 hidden">Share</span>
</button>
</div>
</section>
<!-- control section -->
<section class="w-full max-w-md p-4">
<!-- encode section -->
<section id="encode-section" class="hidden group-[.tab-encode]/body:block">
<form id="encode-form">
<!-- input text -->
<label for="text-input" class="label select-none">Enter Your Text to Encode:</label>
<textarea id="text-input" name="text-input" class="resize input" rows="6" required></textarea>
<!-- unit size -->
<label for="unit-size" class="label select-none">Unit Size:</label>
<input type="number" id="unit-size" name="unit-size" class="input" value="10" min="1" max="255" step="1"
spellcheck="false" autocomplete="off" required>
<!-- disable color channels, they are not reliable :( -->
<!-- color channels
<label for="color-channels" class="label">Color Channels:</label>
<fieldset id="color-channels" class="flex gap-2 mb-2">
<label for="red"
class="cursor-pointer badge has-[:checked]:bg-red-600 dark:has-[:checked]:bg-red-600 ring-red-500 dark:ring-red-500">
<input type="checkbox" id="red" name="red-channel" value="red" class="color-channel peer sr-only" />
<span class="text-red-500 peer-checked:text-zinc-50">Red</span>
</label>
<label for="green"
class="cursor-pointer badge has-[:checked]:bg-green-600 dark:has-[:checked]:bg-green-600 ring-green-500 dark:ring-green-500">
<input type="checkbox" id="green" name="green-channel" value="green" class="color-channel peer sr-only" />
<span class="text-green-500 peer-checked:text-zinc-50">Green</span>
</label>
<label for="blue"
class="cursor-pointer badge has-[:checked]:bg-blue-600 dark:has-[:checked]:bg-blue-600 ring-blue-500 dark:ring-blue-500">
<input type="checkbox" id="blue" name="blue-channel" value="blue" class="color-channel peer sr-only" />
<span class="text-blue-500 peer-checked:text-zinc-50">Blue</span>
</label>
<label for="alpha"
class="cursor-not-allowed badge has-[:checked]:bg-zinc-200 dark:has-[:checked]:bg-zinc-700 ring-zinc-300 dark:ring-zinc-600">
<input type="checkbox" id="alpha" name="alpha-channel" value="alpha" class="color-channel peer sr-only" checked
/>
<span class="peer-checked:text-zinc-700 dark:peer-checked:text-zinc-200">Alpha</span>
</label>
</fieldset> -->
<div class="flex flex-col ms:flex-row gap-4 py-2 peer">
<!-- live convert -->
<label for="live-convert" class="flex items-center cursor-pointer select-none">
<div
class="relative focus-within:ring-2 focus-within:ring-offset-2 ring-white ring-offset-black rounded-full">
<input type="checkbox" id="live-convert" name="live-convert" class="peer sr-only" checked />
<div class="block h-5 rounded-full dark:bg-zinc-800 bg-zinc-300 peer-checked:bg-sky-700 w-8">
</div>
<div
class="absolute w-3 h-3 transition bg-white rounded-full dot dark:bg-zinc-500 left-1 top-1 peer-checked:translate-x-full peer-checked:bg-white">
</div>
</div>
<span class="label inline-block align-middle mb-0.5 ml-2">Live Convert</span>
</label>
<!-- use encryption -->
<label for="use-encryption" class="flex items-center cursor-pointer select-none peer/use-encryption">
<div
class="relative focus-within:ring-2 focus-within:ring-offset-2 ring-white ring-offset-black rounded-full">
<input type="checkbox" id="use-encryption" name="use-encryption"
class="use-encryption-checkbox peer sr-only" />
<div class="block h-5 rounded-full dark:bg-zinc-800 bg-zinc-300 peer-checked:bg-sky-700 w-8">
</div>
<div
class="absolute w-3 h-3 transition bg-white rounded-full dot dark:bg-zinc-500 left-1 top-1 peer-checked:translate-x-full peer-checked:bg-white">
</div>
</div>
<span class="label inline-block align-middle mb-0.5 ml-2">Use Encryption</span>
</label>
</div>
<!-- <input type="checkbox" id="use-encryption"
class="peer align-middle accent-sky-700 dark:accent-sky-600 w-4 h-4 rounded-sm text-zinc-600 dark:ring-zinc-700">
<label for="use-encryption" class="label inline-block align-middle mb-0.5">Use Encryption</label> -->
<!-- encryption key input -->
<div class="hidden peer-checked:block mt-2 peer-has-[.use-encryption-checkbox:checked]:block">
<label for="key" class="label select-none">Encryption Key:</label>
<input type="text" id="key" name="key" class="input" spellcheck="false" autocomplete="off" />
</div>
<!-- encode button -->
<button id="encode-button" type="submit" class="mt-3 button" disabled>
<span class="font-semibold text-base text-zinc-50">Encode</span>
</button>
<!-- <div class="w-full text-sm font-semibold text-center my-2">OR</div>
<label for="image-file"
class="w-full bg-sky-700 py-3 px-4 flex items-center justify-center gap-2 rounded-md shadow-sm">
<span class="w-6 h-6 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="fill-zinc-50 w-6 h-6">
<path
d="M440-367v127q0 17 11.5 28.5T480-200q17 0 28.5-11.5T520-240v-127l36 36q6 6 13.5 9t15 2.5q7.5-.5 14.5-3.5t13-9q11-12 11.5-28T612-388L508-492q-6-6-13-8.5t-15-2.5q-8 0-15 2.5t-13 8.5L348-388q-12 12-11.5 28t12.5 28q12 11 28 11.5t28-11.5l35-35ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v447q0 33-23.5 56.5T720-80H240Zm280-560v-160H240v640h480v-440H560q-17 0-28.5-11.5T520-640ZM240-800v200-200 640-640Z" />
</svg>
</span>
<span class="font-semibold text-base text-zinc-50">Upload Image</span>
<input type="file" name="image-file" id="image-file" class="hidden">
</label> -->
</form>
</section>
<!-- decode section -->
<section id="decode-section" class="hidden group-[.tab-decode]/body:block">
<form id="decode-form">
<!-- decoded text -->
<div class="relative">
<textarea id="output-text" name="output-text" tabindex="-1"
class="resize input mb-6 focus:ring-1 focus:ring-zinc-300 dark:focus:ring-zinc-700" rows="6"
placeholder="Decoded text will show up here" readonly></textarea>
<button id="copy-text-button" type="button"
class="absolute right-0 top-0 p-3 border border-zinc-300 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-none rounded-bl-md rounded-tr-md dark:hover:bg-opacity-65 opacity-75 bg-zinc-50 transition duration-100 dark:bg-zinc-800 ease-[ease]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 copy-icon">
<path
d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" />
<path
d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="size-5 check-icon hidden">
<path fill-rule="evenodd"
d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- input image -->
<label for="image-file"
class="w-full cursor-pointer select-none p-3 flex items-center gap-3 rounded-lg shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-800 hover:bg-zinc-200 hover:bg-opacity-20 dark:hover:bg-zinc-800 dark:hover:bg-opacity-35 transition duration-200 ease-[ease] focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-white dark:focus-within:ring-white focus-within:ring-offset-black">
<div
class="flex items-center justify-center aspect-square h-16 rounded-md bg-zinc-300 dark:bg-zinc-800 bg-opacity-55 dark:bg-opacity-65">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="size-9 opacity-50 dark:opacity-70">
<path fill-rule="evenodd"
d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z"
clip-rule="evenodd" />
</svg>
</div>
<div class="text-zinc-800 dark:text-zinc-100">
<span class="text-base font-semibold">
<span id="file-count" class="peer"></span>
<span class="peer-empty:inline hidden">Upload Image</span>
<br>
<span class="text-sm">
<span id="file-name" class="peer overflow-truncate"></span>
<span class="peer-empty:inline hidden">Drop, Paste, or Click to Upload an Image</span>
</span>
</div>
<input type="file" name="image-file" id="image-file" class="sr-only" accept="image/png" required>
</label>
<!-- decryption key -->
<div class="hidden mt-2">
<label for="decryption-key" class="label select-none">Decryption Key:</label>
<input type="text" id="decryption-key" name="decryption-key" class="input" spellcheck="false"
autocomplete="off" />
</div>
<button id="decode-button" type="submit" class="mt-3 button" disabled>
<span class="font-semibold text-base text-zinc-50">Decode</span>
</button>
</form>
</section>
</section>
</main>
<aside class="fixed bottom-0 right-0 h-auto w-full sm:w-auto p-4 pb-6 flex flex-col gap-5 items-center sm:items-start"
id="toasts">
<!-- <div class="toast show">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 transition-none">
<path fill-rule="evenodd"
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
clip-rule="evenodd" />
</svg>
<span>A default one</span> -->
</aside>
<aside id="drag-popup"
class="fixed p-5 inset-0 top-0 left-0 grid place-items-center bg-zinc-100 dark:bg-zinc-800 hidden">
<div
class="w-full h-full box-border border-dashed border-4 border-zinc-500 dark:border-zinc-400 grid place-items-center text-lg font-bold">
Drop Image Here
</div>
</aside>
<aside class="fixed bottom-4 right-4 ">
<button type="button" id="install-button" title="Install App"
class="button group flex hidden items-center justify-center align-middle gap-2 w-auto py-3 hover:w-33 hover:h-12">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="size-5 fill-white hidden lg:block">
<path
d="M320-160v-40H160q-33 0-56.5-23.5T80-280v-480q0-33 23.5-56.5T160-840h280q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H160v480h640v-80q0-17 11.5-28.5T840-400q17 0 28.5 11.5T880-360v80q0 33-23.5 56.5T800-200H640v40q0 17-11.5 28.5T600-120H360q-17 0-28.5-11.5T320-160Zm320-393v-247q0-17 11.5-28.5T680-840q17 0 28.5 11.5T720-800v247l76-75q11-11 27.5-11.5T852-628q11 11 11 28t-11 28L708-428q-12 12-28 12t-28-12L508-572q-11-11-11.5-27.5T508-628q11-11 28-11t28 11l76 75Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="size-5 fill-white block lg:hidden">
<path
d="M280-40q-33 0-56.5-23.5T200-120v-720q0-33 23.5-56.5T280-920h240q17 0 28.5 11.5T560-880q0 17-11.5 28.5T520-840H280v40h240q17 0 28.5 11.5T560-760q0 17-11.5 28.5T520-720H280v480h400v-40q0-17 11.5-28.5T720-320q17 0 28.5 11.5T760-280v160q0 33-23.5 56.5T680-40H280Zm0-120v40h400v-40H280Zm400-392v-248q0-17 11.5-28.5T720-840q17 0 28.5 11.5T760-800v248l76-76q11-11 28-11t28 11q11 11 11 28t-11 28L748-428q-12 12-28 12t-28-12L548-572q-11-11-11-28t11-28q11-11 28-11t28 11l76 76ZM280-800v-40 40Zm0 640v40-40Z" />
</svg>
<span class="group-hover:block hidden">Install App</span>
</button>
</aside>
<footer>
<hr class="my-3 mx-8 bg-transparent border-zinc-200 dark:border-zinc-700">
<p class="text-center pb-4">Made with ❤️ by <a href="https://github.com/arnav-kr" target="_blank"
rel="noopener noreferrer" class="font-semibold text-sky-700 dark:text-sky-300 hover:underline">Arnav Kumar</a>
</p>
</footer>
<script src="/src/main.js" type="module"></script>
</body>
</html>