forked from alam00000/bentopdf
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsimple-index.html
More file actions
524 lines (497 loc) · 19.5 KB
/
simple-index.html
File metadata and controls
524 lines (497 loc) · 19.5 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
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
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>PDF Tools</title>
<meta name="title" content="PDF Tools" />
<meta
name="description"
content="Free online PDF tools - Merge, split, compress, convert PDFs. 100% browser-based, no signup required, unlimited files."
/>
<meta name="robots" content="noindex, nofollow" />
<!-- Mobile Web App -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="apple-mobile-web-app-title" content="PDF Tools" />
<!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/images/favicon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="512x512"
href="/images/favicon-512x512.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/images/apple-touch-icon.png"
/>
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link href="src/css/styles.css" rel="stylesheet" />
</head>
<body class="antialiased">
<!-- Simple Mode Navbar -->
<nav
class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"
data-simple-nav="true"
>
<div class="container mx-auto px-4">
<div class="flex justify-start items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer">
<img
src="{{baseUrl}}{{#if brandLogo}}{{brandLogo}}{{else}}images/favicon-no-bg.svg{{/if}}"
alt="{{#if brandName}}{{brandName}}{{else}}Bento PDF{{/if}} Logo"
class="h-8 w-8"
/>
<span class="text-white font-bold text-xl ml-2">
<a href="/"
>{{#if brandName}}{{brandName}}{{else}}BentoPDF{{/if}}</a
>
</span>
</div>
</div>
</div>
</nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
<!-- Simple Mode Header -->
<div id="tools-header" class="text-center mb-12 pt-8">
<h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
<span data-i18n="simpleMode.title">PDF Tools</span>
</h1>
<p class="text-gray-400" data-i18n="simpleMode.subtitle">
Select a tool to get started
</p>
</div>
<div id="grid-view">
<div class="mb-8 max-w-lg mx-auto">
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<i data-lucide="search" class="w-5 h-5 text-gray-400"></i>
</span>
<input
type="text"
id="search-bar"
class="w-full pl-10 pr-4 py-3 bg-gray-700 text-white border border-gray-600 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
placeholder="Search for a tool (e.g., 'split', 'organize'...)"
data-i18n-placeholder="tools.searchPlaceholder"
/>
<span
class="absolute inset-y-0 right-0 flex items-center rounded-lg pr-2 gap-2"
>
<kbd
id="shortcut"
class="bg-gray-800 px-2.5 py-1.5 rounded-md text-xs font-semibold text-gray-300 border border-gray-700 shadow-sm"
></kbd>
<button
id="open-shortcuts-btn"
class="p-1 hover:bg-gray-600 rounded-md text-gray-400 hover:text-white transition-colors"
title="Keyboard Shortcuts"
>
<i data-lucide="settings" class="w-4 h-4"></i>
</button>
</span>
</div>
</div>
<div
id="tool-grid"
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 md:gap-6"
></div>
</div>
<div
id="tool-interface"
class="hidden w-full max-w-4xl mx-auto bg-gray-800 rounded-xl shadow-2xl p-6 md:p-8 border border-gray-700"
>
<button
id="back-to-grid"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold"
>
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools">
Back to Tools
</span>
</button>
<div id="tool-content"></div>
</div>
<div
id="loader-modal"
class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
>
<div
class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
>
<div class="solid-spinner"></div>
<p
id="loader-text"
class="text-white text-lg font-medium"
data-i18n="loader.processing"
>
Processing...
</p>
</div>
</div>
<div
id="alert-modal"
class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"
>
<div
class="bg-gray-800 max-w-sm w-full p-6 rounded-lg border border-gray-700 shadow-xl text-center"
>
<h3 id="alert-title" class="text-xl font-bold text-white mb-2">
Alert
</h3>
<p id="alert-message" class="text-gray-300 mb-6 whitespace-pre-line">
This is an alert message.
</p>
<button
id="alert-ok"
class="btn bg-indigo-600 text-white font-semibold py-2 px-6 rounded-lg hover:bg-indigo-700"
>
OK
</button>
</div>
</div>
<div
id="preview-modal"
class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-40 p-4"
>
<div
class="bg-white text-black rounded-lg shadow-xl w-full max-w-4xl h-[90vh] flex flex-col"
>
<div class="p-4 border-b flex justify-between items-center">
<h3 class="text-xl font-bold">Document Preview</h3>
<div class="flex gap-4">
<button
id="preview-download-btn"
class="btn bg-indigo-600 text-white font-semibold py-2 px-6 rounded-lg hover:bg-indigo-700"
>
Download as PDF
</button>
<button
id="preview-close-btn"
class="btn bg-gray-600 text-white font-semibold py-2 px-6 rounded-lg hover:bg-gray-700"
>
Close
</button>
</div>
</div>
<div id="preview-content" class="p-8 overflow-y-auto flex-grow"></div>
</div>
</div>
<!-- Shortcuts Modal -->
<div
id="shortcuts-modal"
class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"
>
<div
class="bg-gray-800 w-full max-w-2xl rounded-xl border border-gray-700 shadow-2xl flex flex-col max-h-[80vh]"
>
<div
class="p-6 border-b border-gray-700 flex justify-between items-center"
>
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="settings" class="w-6 h-6 text-indigo-400"></i>
Settings
</h3>
<button
id="close-shortcuts-modal"
class="text-gray-400 hover:text-white transition-colors"
>
<i data-lucide="x" class="w-6 h-6"></i>
</button>
</div>
<!-- Tabs -->
<div class="flex border-b border-gray-700">
<button
id="shortcuts-tab-btn"
class="flex-1 py-3 text-sm font-medium bg-indigo-600 text-white"
>
<i data-lucide="keyboard" class="inline-block w-4 h-4 mr-1"></i>
Shortcuts
</button>
<button
id="preferences-tab-btn"
class="flex-1 py-3 text-sm font-medium text-gray-300 hover:text-white"
>
<i data-lucide="sliders" class="inline-block w-4 h-4 mr-1"></i>
<span data-i18n="settings.preferences">Preferences</span>
</button>
</div>
<!-- Shortcuts Tab Content -->
<div id="shortcuts-tab-content" class="p-6 overflow-y-auto flex-grow">
<div class="flex justify-between items-center mb-6">
<div class="relative flex-grow mr-4">
<i
data-lucide="search"
class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500"
></i>
<input
type="text"
id="shortcut-search"
placeholder="Search shortcuts..."
class="w-full bg-gray-900 border border-gray-700 text-white rounded-lg pl-10 pr-4 py-2 focus:ring-indigo-500 focus:border-indigo-500"
/>
</div>
</div>
<div
class="mb-4 p-3 bg-indigo-900/20 border border-indigo-500/30 rounded-lg flex items-start gap-3"
>
<i
data-lucide="info"
class="w-5 h-5 text-indigo-400 flex-shrink-0 mt-0.5"
></i>
<p class="text-sm text-indigo-200">
<span data-i18n="settings.shortcutsInfo"
>Press and hold keys to set a shortcut. Changes are
<strong>auto-saved</strong>.</span
>
<br /><span
class="text-yellow-300"
data-i18n="settings.shortcutsWarning"
>⚠️ Avoid common browser shortcuts (Cmd/Ctrl+W, Cmd/Ctrl+T,
Cmd/Ctrl+N etc.) as they may not work reliably.</span
>
</p>
</div>
<div id="shortcuts-list" class="space-y-2">
<!-- Shortcuts will be populated here -->
</div>
</div>
<!-- Preferences Tab Content -->
<div
id="preferences-tab-content"
class="hidden p-6 overflow-y-auto flex-grow"
>
<h4
class="text-lg font-semibold text-white mb-4"
data-i18n="settings.displayPreferences"
>
Display Preferences
</h4>
<div class="space-y-4">
<div
class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700"
>
<div class="flex-1">
<label
for="full-width-toggle"
class="text-sm font-medium text-gray-200 cursor-pointer"
data-i18n="settings.fullWidthMode"
>
Full Width Mode
</label>
<p
class="text-xs text-gray-400 mt-1"
data-i18n="settings.fullWidthDescription"
>
Use the full screen width for all tools instead of a
centered container
</p>
</div>
<label
class="relative inline-flex items-center cursor-pointer ml-4"
>
<input
type="checkbox"
id="full-width-toggle"
class="sr-only peer"
/>
<div
class="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"
></div>
</label>
</div>
<div
class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700"
>
<div class="flex-1">
<label
for="compact-mode-toggle"
class="text-sm font-medium text-gray-200 cursor-pointer"
data-i18n="settings.compactMode"
>
Compact Mode
</label>
<p
class="text-xs text-gray-400 mt-1"
data-i18n="settings.compactModeDescription"
>
Display tools as a compact list instead of cards
</p>
</div>
<label
class="relative inline-flex items-center cursor-pointer ml-4"
>
<input
type="checkbox"
id="compact-mode-toggle"
class="sr-only peer"
/>
<div
class="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"
></div>
</label>
</div>
<a
href="wasm-settings.html"
class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-indigo-500/50 transition-all group"
>
<div class="flex-1">
<span
class="text-sm font-medium text-gray-200 group-hover:text-white"
>
Advanced Settings
</span>
<p class="text-xs text-gray-400 mt-1">
Configure external processing modules (PyMuPDF, Ghostscript,
CoherentPDF)
</p>
</div>
<i
data-lucide="chevron-right"
class="w-5 h-5 text-gray-500 group-hover:text-indigo-400 transition-colors"
></i>
</a>
</div>
</div>
<div
class="p-6 border-t border-gray-700 flex justify-between items-center bg-gray-850 rounded-b-xl"
>
<div id="shortcuts-tab-footer" class="flex gap-3">
<button
id="import-shortcuts-btn"
class="text-gray-400 hover:text-white text-sm font-medium flex items-center gap-1 transition-colors"
>
<i data-lucide="upload" class="w-4 h-4"></i> Import
</button>
<button
id="export-shortcuts-btn"
class="text-gray-400 hover:text-white text-sm font-medium flex items-center gap-1 transition-colors"
>
<i data-lucide="download" class="w-4 h-4"></i> Export
</button>
</div>
<div id="preferences-tab-footer" class="hidden w-full">
<p
class="text-xs text-gray-400 text-center"
data-i18n="settings.settingsAutoSaved"
>
Settings are automatically saved
</p>
</div>
<button
id="reset-shortcuts-btn"
class="text-red-400 hover:text-red-300 text-sm font-medium transition-colors"
>
Reset to Defaults
</button>
</div>
</div>
</div>
<!-- Warning Modal -->
<div
id="warning-modal"
class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4"
>
<div
class="bg-gray-800 rounded-xl border border-gray-700 shadow-2xl max-w-md w-full overflow-hidden animate-scale-in"
>
<div class="p-6">
<div class="flex items-start gap-4 mb-4">
<div
id="warning-icon"
class="w-12 h-12 flex items-center justify-center rounded-full bg-yellow-500/10 flex-shrink-0"
>
<i
data-lucide="alert-triangle"
class="w-6 h-6 text-yellow-500"
></i>
</div>
<div class="flex-1">
<h3
id="warning-title"
class="text-xl font-bold text-white mb-2"
>
Warning
</h3>
<p
id="warning-message"
class="text-gray-300 text-sm leading-relaxed"
></p>
</div>
</div>
</div>
<div class="flex gap-3 p-4 bg-gray-850 border-t border-gray-700">
<button
id="warning-cancel-btn"
class="flex-1 px-4 py-2.5 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
>
Cancel
</button>
<button
id="warning-confirm-btn"
class="flex-1 px-4 py-2.5 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg font-medium transition-colors"
>
Proceed
</button>
</div>
</div>
</div>
<div id="signature-ghost" class="hidden"></div>
<!-- Scroll to Top Button -->
<button
id="scroll-to-top-btn"
class="fixed bottom-12 right-8 bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-full shadow-lg transition-all duration-300 opacity-0 translate-y-10 invisible z-40"
aria-label="Scroll to top"
>
<i data-lucide="arrow-up" class="w-6 h-6"></i>
</button>
</div>
<!-- Simple mode footer -->
<footer
class="mt-16 border-t-2 border-gray-700 py-8"
data-simple-footer="true"
>
<div class="container mx-auto px-4">
<div class="flex items-center justify-between flex-wrap gap-4">
<div>
<div class="flex items-center mb-2">
<img
src="{{baseUrl}}{{#if brandLogo}}{{brandLogo}}{{else}}images/favicon.svg{{/if}}"
alt="{{#if brandName}}{{brandName}}{{else}}Bento PDF{{/if}} Logo"
class="h-8 w-8 mr-2"
/>
<span class="text-white font-bold text-lg"
>{{#if brandName}}{{brandName}}{{else}}BentoPDF{{/if}}</span
>
</div>
<p class="text-gray-400 text-sm">
{{#if footerText}}{{footerText}}{{else}}© 2026 BentoPDF. All
rights reserved.{{/if}}
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version-simple"></span>
</p>
</div>
<div id="simple-mode-lang-switcher" class="flex-shrink-0"></div>
</div>
</div>
</footer>
<script type="module" src="src/js/utils/lucide-init.ts"></script>
<script type="module" src="src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="src/version.ts"></script>
<script type="module" src="src/js/main.ts"></script>
<script type="module" src="src/js/sw-register.ts"></script>
</body>
</html>