Files
bentopdf/src/pages/form-creator.html

337 lines
19 KiB
HTML
Raw Normal View History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create PDF Form - BentoPDF</title>
<link rel="icon" type="image/png" href="../../images/favicon.svg" />
<link href="../../src/css/styles.css" rel="stylesheet" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="../../public/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/contact.html" class="nav-link">Contact</a>
<a href="/" class="nav-link">All Tools</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/about.html" class="mobile-nav-link">About</a>
<a href="/contact.html" class="mobile-nav-link">Contact</a>
<a href="/" class="mobile-nav-link">All Tools</a>
</div>
</div>
</nav>
<input type="file" id="pdfUploadInput" accept="application/pdf" class="hidden" />
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
<!-- Upload Area (shown initially) -->
<div id="upload-area"
class="bg-gray-800 rounded-xl shadow-xl p-6 max-w-5xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools-upload"
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">Back to Tools</span>
</button>
<h1 class="text-2xl font-bold text-white mb-2">Create PDF Form</h1>
<p class="text-gray-400 mb-6">
Upload an existing PDF or create a blank PDF to start adding form fields.
</p>
<div class="relative flex flex-col items-center justify-center w-full h-44 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-700 hover:bg-gray-600 transition-colors duration-300"
id="dropZone">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-300">
<span class="font-semibold">Click to select a PDF</span> or drag and drop
</p>
<p class="text-xs text-gray-500">Single PDF file</p>
<p class="text-xs text-gray-500">Your files never leave your device.</p>
</div>
<input type="file" id="pdfFileInput" accept="application/pdf"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" />
</div>
<div id="fileList" class="mt-4 hidden text-sm text-gray-200"></div>
<!-- OR Separator -->
<div class="relative my-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-4 bg-gray-800 text-gray-400 font-medium">OR</span>
</div>
</div>
<div>
<button id="blankPdfBtn"
class="w-full bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-lg flex items-center justify-center gap-3 transition-colors">
<i data-lucide="file-plus" class="w-5 h-5"></i>
<span class="font-semibold">Create Blank PDF</span>
</button>
<div id="pageSizeSelector" class="mt-4 hidden">
<label class="block text-sm font-semibold text-gray-300 mb-2">Page Size:</label>
<select id="pageSizeSelect"
class="w-full bg-gray-600 border border-gray-500 text-white rounded px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
<option value="letter">Letter (8.5" × 11")</option>
<option value="a4">A4 (210mm × 297mm)</option>
<option value="a5">A5 (148mm × 210mm)</option>
<option value="legal">Legal (8.5" × 14")</option>
<option value="tabloid">Tabloid (11" × 17")</option>
<option value="a3">A3 (297mm × 420mm)</option>
<option value="custom">Custom</option>
</select>
<div id="customDimensionsInput" class="mt-3 hidden space-y-2">
<div class="flex gap-2">
<div class="flex-1">
<label class="block text-xs text-gray-400 mb-1">Width (pts)</label>
<input type="number" id="customWidth" placeholder="612" min="72" max="14400"
class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div class="flex-1">
<label class="block text-xs text-gray-400 mb-1">Height (pts)</label>
<input type="number" id="customHeight" placeholder="792" min="72" max="14400"
class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
<p class="text-xs text-gray-500 italic">1 inch = 72 points</p>
</div>
<button id="confirmBlankBtn"
class="w-full mt-3 bg-indigo-600 hover:bg-indigo-500 text-white p-2 rounded transition-colors">
Start Creating
</button>
</div>
</div>
</div>
<!-- Tool Container (hidden initially) -->
<div id="tool-container"
class="bg-gray-800 rounded-xl shadow-xl p-6 w-full text-gray-200 border border-gray-700 hidden">
<button id="back-to-tools-creator"
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">Back to Tools</span>
</button>
<h1 class="text-2xl font-bold text-white mb-2">Create PDF Form</h1>
<p class="text-gray-400 mb-6">
Drag and drop fields onto the canvas to create a fillable PDF form. Customize field properties and
download your form.
</p>
<!-- Main Form Creator Area -->
<div class="flex flex-col lg:flex-row gap-6">
<!-- Sidebar with Properties -->
<aside class="lg:w-64 flex-shrink-0 order-2 lg:order-1">
<!-- Properties Section -->
<div class="bg-gray-700 rounded-lg p-4">
<h2 class="font-semibold text-gray-200 mb-3 flex items-center gap-2">
<i data-lucide="settings" class="w-4 h-4"></i>
Properties
</h2>
<div id="propertiesPanel" class="space-y-3">
<p class="text-gray-500 text-sm">Select a field to edit properties</p>
</div>
</div>
<!-- Field Count -->
<div class="mt-4 bg-gray-700 rounded-lg p-3 text-center">
<p class="text-sm text-gray-400">
<span id="fieldCount" class="text-indigo-400 font-bold text-lg">0</span> field(s)
</p>
<p class="text-xs text-gray-500 mt-1">Press Delete to remove selected field</p>
</div>
</aside>
<!-- Canvas Area -->
<main class="flex-1 order-1 lg:order-2 min-w-0">
<!-- Page Management Toolbar -->
<div class="bg-gray-700 rounded-lg p-3 mb-4 flex flex-wrap gap-2 justify-between items-center">
<div class="flex items-center gap-2">
<button id="prevPageBtn"
class="bg-gray-600 hover:bg-gray-500 text-white p-2 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
disabled>
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</button>
<span id="pageIndicator" class="text-sm text-gray-300 px-2">Page 1 of 1</span>
<button id="nextPageBtn"
class="bg-gray-600 hover:bg-gray-500 text-white p-2 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
disabled>
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</button>
</div>
<div class="flex items-center gap-2">
<button id="resetBtn"
class="bg-gray-600 hover:bg-gray-500 text-white p-2 px-3 rounded flex items-center gap-2 transition-colors">
<i data-lucide="rotate-ccw" class="w-4 h-4"></i>
<span class="text-sm">Reset</span>
</button>
<button id="addPageBtn"
class="bg-indigo-600 hover:bg-indigo-500 text-white p-2 px-3 rounded flex items-center gap-2 transition-colors">
<i data-lucide="file-plus" class="w-4 h-4"></i>
<span class="text-sm">Add Page</span>
</button>
</div>
</div>
<!-- Top Toolbar -->
<div class="bg-gray-700 rounded-lg p-2 mb-4">
<div class="flex flex-wrap gap-2 justify-center items-center max-w-full overflow-hidden">
<div class="text-gray-400 text-sm font-semibold mr-2 flex items-center gap-1">
<i data-lucide="wrench" class="w-4 h-4"></i> Fields:
</div>
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
draggable="true" data-type="text" title="Text Field">
<i data-lucide="type" class="w-4 h-4"></i>
<span class="text-xs">Text</span>
</div>
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
draggable="true" data-type="checkbox" title="Checkbox">
<i data-lucide="check-square" class="w-4 h-4"></i>
<span class="text-xs">Checkbox</span>
</div>
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
draggable="true" data-type="radio" title="Radio Button">
<i data-lucide="circle-dot" class="w-4 h-4"></i>
<span class="text-xs">Radio</span>
</div>
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
draggable="true" data-type="dropdown" title="Dropdown">
<i data-lucide="chevron-down-square" class="w-4 h-4"></i>
<span class="text-xs">Dropdown</span>
</div>
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
draggable="true" data-type="optionlist" title="Option List">
<i data-lucide="list" class="w-4 h-4"></i>
<span class="text-xs">List</span>
</div>
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
draggable="true" data-type="button" title="Button">
<i data-lucide="square-mouse-pointer" class="w-4 h-4"></i>
<span class="text-xs">Button</span>
</div>
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
draggable="true" data-type="signature" title="Signature">
<i data-lucide="pen-tool" class="w-4 h-4"></i>
<span class="text-xs">Signature</span>
</div>
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
draggable="true" data-type="date" title="Date Field">
<i data-lucide="calendar" class="w-4 h-4"></i>
<span class="text-xs">Date</span>
</div>
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
draggable="true" data-type="image" title="Image Field">
<i data-lucide="image" class="w-4 h-4"></i>
<span class="text-xs">Image</span>
</div>
</div>
</div>
<div class="bg-gray-700 rounded-lg p-4 mb-4 overflow-auto w-full">
<div class="flex justify-center">
<div id="pdfCanvasWrapper" class="shadow-2xl relative" style="border: 1px solid #374151;">
<div id="pdfCanvas" class="bg-white relative">
<!-- Fields will be added here dynamically -->
</div>
</div>
</div>
</div>
<!-- Download Button -->
<button id="downloadBtn" class="btn-gradient w-full flex items-center justify-center gap-2 py-3">
<span>Download PDF Form</span>
</button>
</main>
</div>
</div>
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="flex items-center gap-3 mb-2">
<img src="../../public/images/favicon.svg" alt="BentoPDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2025 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-1">
Version <span id="app-version"></span>
</p>
</div>
</footer>
<!-- Custom Modal -->
<div id="errorModal" class="hidden fixed inset-0 z-[9999] flex items-center justify-center bg-black bg-opacity-75">
<div class="bg-gray-800 rounded-lg shadow-2xl max-w-md w-full mx-4 border border-gray-700">
<div class="p-6">
<h3 id="errorModalTitle" class="text-xl font-bold text-white mb-3">Error</h3>
<p id="errorModalMessage" class="text-gray-300 mb-6">An error occurred.</p>
<button id="errorModalClose"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition-colors">
Close
</button>
</div>
</div>
</div>
</div>
<script type="module" src="../js/utils/lucide-init.ts"></script>
<script type="module" src="../js/utils/full-width.ts"></script>
<script type="module" src="../version.ts"></script>
<script type="module" src="../js/logic/form-creator.ts"></script>
<script type="module" src="../js/mobileMenu.ts"></script>
</body>
</html>