-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
339 lines (316 loc) · 25.3 KB
/
index.html
File metadata and controls
339 lines (316 loc) · 25.3 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>muzzard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
<script src="tailwind.js"></script>
<script src="muzzard.js" type="module" defer></script>
<body class="bg-[#585858]">
<div class="container mx-auto max-w-6xl">
<header class="bg-black text-gray-400 text-xs py-1 px-2 border-b-4 border-[#3a3a3a]">
<div class="flex justify-end items-center space-x-4">
<span>the MUZZARD network:</span>
<a href="#" data-page="home" class="text-white underline hover:text-amber-400">Home</a>
<a href="#" data-page="cracita" class="text-white underline hover:text-amber-400">Cracita</a>
<a href="#" data-page="sorbet" class="text-white underline hover:text-amber-400">Sorbet</a>
<a href="#" data-page="about" class="text-white underline hover:text-amber-400">About</a>
<a href="#" data-page="contact" class="text-white underline hover:text-amber-400">Contact</a>
<a href="#" data-page="help" class="text-white underline hover:text-amber-400">FAQ</a>
</div>
</header>
<main class="grid grid-cols-1 md:grid-cols-[200px_1fr_250px] gap-4 pt-4 px-2 md:px-0">
<aside class="text-white">
<a href="#" data-page="home"
class="block bg-black p-2 border-2 border-gray-400 font-black text-center hover:border-amber-400 transition-colors">
<div class="text-xl tracking-tighter">muzzard</div>
<div class="text-[10px] text-gray-400">it works!</div>
</a>
<div class="mt-8">
<h3 class="text-sm font-bold tracking-wider text-gray-300">TOOLS</h3>
<ul class="mt-2 space-y-2 text-xs">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-amber-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
</svg>
<a href="#" data-page="home" class="text-amber-400 underline hover:text-amber-300">
Muzzard</a>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-amber-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
<a href="#" data-page="cracita" class="text-amber-400 underline hover:text-amber-300">Cracita</a>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-amber-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
</svg>
<a href="#" data-page="sorbet" class="text-amber-400 underline hover:text-amber-300">Sorbet</a>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-amber-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
</path>
</svg>
<a href="#" data-page="help" class="text-amber-400 underline hover:text-amber-300">Supported
sites</a>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-amber-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<a href="#" data-page="about" class="text-amber-400 underline hover:text-amber-300">About
Muzzard</a>
</li>
</ul>
</div>
</aside>
<div id="page-container">
<section id="page-home" class="bg-[#fcc603] p-6 text-black font-serif border-t-4 border-black">
<h1 class="text-3xl font-extrabold text-red-800 font-sans" style="text-shadow: 1px 1px 0 #000">
muzzard</h1>
<p class="font-bold font-sans">the image downloader</p>
<p class="text-sm font-sans mb-6 text-gray-800">A Page 2 Joint</p>
<div class="space-y-4 text-sm leading-relaxed">
<p>
This is <i>muzzard</i>, an utility for downloading files in general, including images. Paste your direct
image URLs into the box below (one per line), hit the button, and let it run.
</p>
<textarea id="urls-textarea"
placeholder="e.g. https://i.imgur.com/foobar.jpeg https://i.imgur.com/example.png"
class="w-full h-48 p-2 border-2 border-black bg-[#fffde7] text-black font-mono text-xs focus:outline-none focus:ring-2 focus:ring-red-700"></textarea>
<div class="flex flex-col space-y-4">
<div class="flex flex-wrap items-center gap-4">
<button id="download-btn"
class="px-6 py-2 bg-red-800 text-white font-bold font-sans uppercase tracking-wider border-2 border-black hover:bg-red-900 disabled:bg-gray-500 disabled:cursor-not-allowed transition-colors">
Muzzard it
</button>
<button id="upload-files-btn"
class="px-6 py-2 bg-blue-800 text-white font-bold font-sans uppercase tracking-wider border-2 border-black hover:bg-blue-900 disabled:bg-gray-500 disabled:cursor-not-allowed transition-colors">
Upload files
</button>
<label class="flex items-center cursor-pointer">
<input type="checkbox" id="zip-checkbox"
class="h-4 w-4 border-2 border-black bg-[#fffde7] text-red-800 focus:ring-red-700">
<span class="ml-2 text-sm font-bold font-sans">Save as ZIP?</span>
</label>
</div>
<div>
<label for="import-textarea" class="block text-xs font-bold font-sans mb-2">Or paste links/text:</label>
<div class="flex gap-2">
<textarea id="import-textarea" rows="2" placeholder="Paste text containing links here"
class="flex-1 p-2 border-2 border-black bg-[#fffde7] text-black font-mono text-xs focus:outline-none focus:ring-2 focus:ring-red-700 resize-y"></textarea>
<button type="button" id="import-text-btn"
class="px-4 py-2 bg-yellow-700 text-white font-bold font-sans uppercase tracking-wider border-2 border-black hover:bg-yellow-800 transition-colors whitespace-nowrap">
Import
</button>
</div>
</div>
</div>
<div class="mt-4 p-2 border border-black bg-[#fffde7] text-xs font-mono h-24 overflow-y-auto">
<p class="font-bold">Status:</p>
<p id="status-box" class="whitespace-pre-wrap break-words">Paste image URLs below, one per
line.</p>
</div>
<p class="text-xs italic">
Note: muzzard works best with direct image links (e.g., https://i.imgur.com/example.jpeg). It may not
work with all sites due to CORS or hotlink protection.
</p>
</div>
</section>
<section id="page-about" class="bg-[#fcc603] p-6 text-black font-serif border-t-4 border-black hidden">
<h1 class="text-3xl font-extrabold text-red-800 font-sans" style="text-shadow: 1px 1px 0 #000">About
Muzzard</h1>
<div class="space-y-4 text-sm leading-relaxed">
<p>There's not really much to say about muzzard. This is a simple tool with one
purpose: to download files from a source quickly and without much fuss. But like any good tool,
it's got a bit of personality.</p>
<p>This site's design is a homage to Hunter S. Thompson's "Hey, Rube!" column on ESPN's
Page 2, and also to the at times eccentric web design of the 2000s.</p>
</div>
</section>
<section id="page-help" class="bg-[#fcc603] p-6 text-black font-serif border-t-4 border-black hidden">
<h1 class="text-3xl font-extrabold text-red-800 font-sans" style="text-shadow: 1px 1px 0 #000">Help
& FAQ</h1>
<p class="text-sm font-sans mb-6 text-gray-800">Knowledge for the People</p>
<div class="space-y-4 text-sm leading-relaxed">
<h2 class="text-xl font-extrabold text-red-800 font-sans mt-8 mb-2"
style="text-shadow: 1px 1px 0 #000">How to use Muzzard</h2>
<p>It's simple, by design. I think.</p>
<ol class="list-decimal list-inside space-y-2 pl-4">
<li>Find the direct URL to a file you want to download. This usually ends in .jpg, .png,
.gif, etc.</li>
<li>Paste the URL into the big text box on the homepage.</li>
<li>If you have more than one, paste each URL on a new line.</li>
<li>Check the "Download as ZIP" box if you want a single archive.</li>
<li>Click the "Muzzard It" button.</li>
<li>Your browser will prompt you to save the files or the zip archive. That's it.</li>
</ol>
<h2 class="text-xl font-extrabold text-red-800 font-sans mt-8 mb-2"
style="text-shadow: 1px 1px 0 #000">On supported sites</h2>
<p>Muzzard is built for and works best with direct image links.</p>
<p>For this reason, sites like <strong>Imgur</strong> (use the "Direct Link", not the gallery
page),
personal websites, and any other place that gives you a straight-up URL to the image itself
will work perfectly. It may not work as well with gallery pages from sites like Flickr, or
with
images embedded in social media feeds.</p>
<h2 class="text-xl font-extrabold text-red-800 font-sans mt-8 mb-2"
style="text-shadow: 1px 1px 0 #000">Why are my downloads blocked or failing?</h2>
<p>A few things could be happening here:</p>
<ul class="list-disc list-inside space-y-2 pl-4">
<li><strong>Invalid URL(s):</strong> You might have pasted a link to a webpage instead of an
image. Muzzard will try to validate this and skip bad URLs.</li>
<li><strong>CORS/hotlink protection:</strong> Some websites are nasty and don't like you
linking directly to their images from other places. This is called hotlink protection.
If a site has this enabled, Muzzard might not be able to fetch the image. There's not
much we can do about that — it's the Wild West out here.</li>
<li><strong>Browser pop-up blockers:</strong> Since Muzzard triggers multiple downloads,
it's possible your browser might think it's under attack by pop-ups. This should not
happen
on most modern browsers, but if it does, make sure you allow this site to
download multiple files if your browser asks.</li>
</ul>
<h2 class="text-xl font-extrabold text-red-800 font-sans mt-8 mb-2"
style="text-shadow: 1px 1px 0 #000">Why 'Muzzard'?</h2>
<p>Because of <a
href="https://www.thisworddoesnotexist.com/w/muzzard/eyJ3IjogIm11enphcmQiLCAiZCI6ICJhIHNtYWxsIGxpZ2h0IGhvcnNlIHdpdGggYSBzbGlnaHRseSBoaWdoZXIgcmFuZ2Ugb2YgbW92ZW1lbnQgYW5kIGEgbG9uZ2VyIGhvcml6b250YWwgYmFyIGFyb3VuZCB0aGUgaGVhZCB0aGFuIHRoZSB0YWlsLiBJdCBpcyBhIG1vcmUgY29tbW9uIGhvcnNlIG9mIGEgYnJlZWQgdXNlZCBmb3Igcm91Z2ggd29yayIsICJwIjogIm5vdW4iLCAiZSI6ICJoaXMgbXV6emFyZCBib2JibGVkIHdpdGggc3BlZWQiLCAicyI6IFsibXV6IiwgInphcmQiXX0=.WDpzCmBx-apxOnJ8HGRUyRBxHSqFsScST23WeqTMGFs="
target="_blank">this</a>.</p>
</div>
</section>
<!-- Cracita -->
<section id="page-cracita" class="bg-[#fcc603] p-6 text-black font-serif border-t-4 border-black hidden">
<h1 class="text-3xl font-extrabold text-red-800 font-sans" style="text-shadow: 1px 1px 0 #000">
Cracita</h1>
<p class="font-bold font-sans">the typographic converter</p>
<p class="text-sm font-sans mb-6 text-gray-800">For proper quotes and such.</p>
<!-- Toolbar -->
<div class="space-y-2 mb-4 p-2 border border-black bg-[#fffde7] font-sans">
<div class="flex flex-wrap items-center gap-x-6 gap-y-2">
<button id="cracita-loadBtn" title="Load a text file (Ctrl+O)" class="px-4 py-1 bg-blue-800 text-white font-bold uppercase tracking-wider border-2 border-black hover:bg-blue-900 transition-colors text-xs">Load File</button>
<button id="cracita-saveBtn" title="Save the converted text (Ctrl+S)" class="px-4 py-1 bg-green-800 text-white font-bold uppercase tracking-wider border-2 border-black hover:bg-green-900 transition-colors text-xs">Save As</button>
<button id="cracita-copyBtn" title="Copy the converted text (Ctrl+C)" class="px-4 py-1 bg-yellow-700 text-white font-bold uppercase tracking-wider border-2 border-black hover:bg-yellow-800 transition-colors text-xs">Copy Output</button>
</div>
<!-- Targeting mode toolbar -->
<div class="flex items-center gap-4 pt-2">
<label for="cracita-mode-select" class="font-bold text-sm">Mode:</label>
<select id="cracita-mode-select" class="p-1 border-2 border-black bg-white font-mono text-xs focus:outline-none focus:ring-2 focus:ring-red-700">
<option value="Normal">Normal</option>
<option value="Regex">Targeted (Regex)</option>
</select>
<div id="cracita-regex-controls" class="hidden flex-grow items-center gap-2">
<label for="cracita-regex-input" class="font-bold text-sm">Pattern:</label>
<input type="text" id="cracita-regex-input" class="w-full p-1 border-2 border-black bg-white font-mono text-xs focus:outline-none focus:ring-2 focus:ring-red-700" title="Enter a regex with capturing groups for the text to convert.">
</div>
</div>
</div>
<input type="file" id="cracita-fileInput" accept=".txt,text/plain" class="hidden">
<!-- Main content -->
<div class="grid md:grid-cols-2 gap-4">
<div>
<label for="cracita-inputText" class="font-bold font-sans text-sm">Input:</label>
<textarea id="cracita-inputText" placeholder="Input text here..." class="w-full h-96 p-2 mt-1 border-2 border-black bg-[#fffde7] text-black font-mono text-xs focus:outline-none focus:ring-2 focus:ring-red-700 resize-y"></textarea>
</div>
<div>
<label for="cracita-outputText" class="font-bold font-sans text-sm">Output:</label>
<textarea id="cracita-outputText" placeholder="Preview..." class="w-full h-96 p-2 mt-1 border-2 border-black bg-[#fffde7] text-black font-mono text-xs focus:outline-none focus:ring-2 focus:ring-red-700 resize-y"></textarea>
</div>
</div>
<!-- Status bar -->
<div class="mt-4 p-2 border border-black bg-[#fffde7] text-xs font-mono flex justify-between items-center">
<p id="cracita-statusField">Ready</p>
<p id="cracita-statsField">Words: 0 | Chars: 0</p>
</div>
</section>
<!-- Sorbet -->
<section id="page-sorbet" class="bg-[#fcc603] p-6 text-black font-serif border-t-4 border-black hidden">
<h1 class="text-3xl font-extrabold text-red-800 font-sans" style="text-shadow: 1px 1px 0 #000">Sorbet</h1>
<p class="font-bold font-sans">the high-performance text comparison tool</p>
<!-- Stats Bar -->
<div class="mt-4 mb-4 p-2 border border-black bg-[#fffde7] text-xs font-mono flex flex-wrap justify-between items-center gap-4">
<div id="sorbet-performanceStats" class="px-2 py-1 bg-gray-700 text-amber-300 rounded">Ready</div>
<div class="flex gap-4">
<div id="sorbet-addedStats" class="px-2 py-1 bg-green-800 text-green-200 rounded">0 added</div>
<div id="sorbet-removedStats" class="px-2 py-1 bg-red-800 text-red-200 rounded">0 removed</div>
</div>
</div>
<!-- Main content -->
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<label for="sorbet-text1" class="font-bold font-sans text-sm flex justify-between">Original Text <span id="sorbet-file1Info" class="text-gray-700"></span></label>
<textarea id="sorbet-text1" placeholder="Paste original text here..." class="w-full h-96 p-2 mt-1 border-2 border-black bg-[#fffde7] text-black font-mono text-xs focus:outline-none focus:ring-2 focus:ring-red-700 resize-y"></textarea>
</div>
<div>
<label for="sorbet-text2" class="font-bold font-sans text-sm flex justify-between">Modified Text <span id="sorbet-file2Info" class="text-gray-700"></span></label>
<textarea id="sorbet-text2" placeholder="Paste modified text here..." class="w-full h-96 p-2 mt-1 border-2 border-black bg-[#fffde7] text-black font-mono text-xs focus:outline-none focus:ring-2 focus:ring-red-700 resize-y"></textarea>
</div>
</div>
<!-- Diff panel -->
<div id="sorbet-diffPanel" class="hidden">
<label class="font-bold font-sans text-sm">Differences</label>
<div id="sorbet-diffViewport" class="w-full h-96 mt-1 p-2 border-2 border-black bg-[#fffde7] font-mono text-xs overflow-auto">
<div id="sorbet-diffContent"></div>
</div>
</div>
<!-- Control bar -->
<div class="mt-4 flex flex-wrap items-center gap-4">
<button id="sorbet-compareBtn" class="px-6 py-2 bg-red-800 text-white font-bold font-sans uppercase tracking-wider border-2 border-black hover:bg-red-900 disabled:opacity-50 transition-colors">Compare</button>
<button id="sorbet-swapBtn" class="px-4 py-2 bg-blue-800 text-white font-bold font-sans uppercase tracking-wider border-2 border-black hover:bg-blue-900 transition-colors">Swap</button>
<button id="sorbet-clearBtn" class="px-4 py-2 bg-gray-700 text-white font-bold font-sans uppercase tracking-wider border-2 border-black hover:bg-gray-800 transition-colors">Clear</button>
</div>
</section>
<!-- Loading overlay for sorbet -->
<div id="sorbet-loadingOverlay" class="fixed inset-0 bg-black bg-opacity-75 items-center justify-center z-50 hidden">
<div class="bg-yellow-100 p-6 border-4 border-black text-center font-sans">
<div id="sorbet-loadingText" class="text-lg font-bold mb-4">Processing...</div>
<div class="w-64 h-4 bg-gray-300 border-2 border-black">
<div id="sorbet-progressBar" class="h-full bg-red-700" style="width: 0%;"></div>
</div>
</div>
</div>
<section id="page-contact"
class="bg-[#fcc603] p-6 text-black font-serif border-t-4 border-black hidden">
<h1 class="text-3xl font-extrabold text-red-800 font-sans" style="text-shadow: 1px 1px 0 #000">
Contact us</h1>
<p class="text-sm font-sans mb-6 text-gray-800">assuming we're still here</p>
<div class="space-y-4 text-sm leading-relaxed">
<p>Got a problem? A suggestion? Don't call us; we don't have a phone, unfortunately.</p>
<p>What you can do is use this repo's <a
href="https://github.com/StrawberryMaster/muzzard/issues"
class="underline text-blue-400 hover:text-blue-300">issue tab</a>
and file a report there.</p>
</div>
</section>
</div>
<aside class="bg-black text-white p-3 text-xs">
<div class="border-b border-gray-500 pb-2 mb-2">
<span class="font-bold text-lg tracking-tighter">MUZZARD</span>
</div>
<div class="mb-4">
<a class="text-blue-400 underline hover:text-blue-300">hey, friend!</a>
</div>
<h4 class="font-bold uppercase mb-2 text-amber-400">ALSO SEE:</h4>
<ul class="space-y-3">
<li><a href="#" data-page="help" class="underline text-amber-400 hover:text-amber-300">How to use
Muzzard</a></li>
<li><a href="#" data-page="help" class="underline text-amber-400 hover:text-amber-300">Supported
sites</a></li>
<li><a href="#" data-page="help" class="underline text-amber-400 hover:text-amber-300">Why are my
downloads blocked?</a></li>
<li><a href="#" data-page="about" class="underline text-amber-400 hover:text-amber-300">About the
site</a></li>
</ul>
</aside>
</main>
</div>
</body>
</html>