djoka/bentopdf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: Implement keyboard shortcuts system with UI management, add txt-to-pdf tests, and introduce a generic warning modal.

Browse Source
This commit is contained in:
abdullahalam123
2025-11-21 17:10:56 +05:30
parent 77ee986e2c
commit 5fecc701c6
15 changed files with 947 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
index.html
View File

@@ -191,8 +191,13 @@
<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'...)" />
<span class="absolute inset-y-0 right-0 flex items-center rounded-lg pr-2">
<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-1 rounded-lg"></kbd>
<button id="open-shortcuts-btn"
class="p-1 hover:bg-gray-600 rounded-md text-gray-400 hover:text-white transition-colors hidden-on-touch"
title="Keyboard Shortcuts">
<i data-lucide="settings" class="w-4 h-4"></i>
</button>
</span>
</div>
</div>
@@ -254,6 +259,94 @@
</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="keyboard" class="w-6 h-6 text-indigo-400"></i>
Keyboard Shortcuts
</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>
<div 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">
Press and hold keys to set a shortcut. Changes are <strong>auto-saved</strong>.
<br><span class="text-yellow-300">⚠️ 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>
<div class="p-6 border-t border-gray-700 flex justify-between items-center bg-gray-850 rounded-b-xl">
<div 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>
<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 class="section-divider hide-section mb-20 mt-10"></div>
<!-- COMPLIANCE SECTION START -->