Files
bentopdf/src/pages/form-creator.html
T
abdullahalam123 b279c05281 feat: Add subdirectory hosting support and fix asset path resolution
- Update README with comprehensive subdirectory hosting instructions and BASE_URL configuration guide
- Convert absolute asset paths to relative paths in index.html for proper subdirectory deployment
- Update all worker script imports to use relative paths instead of absolute paths
- Fix favicon and image references to work correctly when hosted in nested directories
- Normalize whitespace and formatting across worker files for consistency
- Update vite.config.ts to properly handle BASE_URL configuration for subdirectory deployments
- Ensure all tool pages and logic files maintain compatibility with subdirectory hosting
- Enable BentoPDF to be deployed at any URL path (e.g., example.com/tools/bentopdf/) without breaking asset loading
2025-12-04 23:53:00 +05:30

432 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<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="../../images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="../../index.html">BentoPDF</a>
</span>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="../../index.html" 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="../../index.html" 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="../../index.html" 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="../../index.html" 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 class="flex items-center gap-2 ml-2 border-l border-gray-600 pl-2">
<span class="text-sm text-gray-400">Go to:</span>
<input type="number" id="gotoPageInput" min="1"
class="w-16 bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
<button id="gotoPageBtn"
class="bg-indigo-600 hover:bg-indigo-500 text-white px-2 py-1 rounded text-sm transition-colors">Go</button>
</div>
<div class="flex items-center gap-2 ml-2 border-l border-gray-600 pl-2">
<input type="checkbox" id="enableGridCheckbox" checked class="mr-1">
<label for="enableGridCheckbox" class="text-sm text-gray-400">Grid:</label>
<input type="number" id="gridVInput" min="2" max="14" value="2" placeholder="V"
class="w-12 bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
<span class="text-gray-400">x</span>
<input type="number" id="gridHInput" min="2" max="14" value="2" placeholder="H"
class="w-12 bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
<button id="toggleGridBtn"
class="bg-gray-600 hover:bg-gray-500 text-white p-1 rounded transition-colors"
title="Toggle Grid">
<i data-lucide="grid-3x3" class="w-4 h-4"></i>
</button>
</div>
</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="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="../../images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">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-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="../../about.html" class="hover:text-indigo-400">About Us</a>
</li>
<li>
<a href="../../faq.html" class="hover:text-indigo-400">FAQ</a>
</li>
<li>
<a href="../../contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="../../licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li>
<a href="../../terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li>
<li>
<a href="../../privacy.html" class="hover:text-indigo-400">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/AP2Y97juZT" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</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="../js/utils/simple-mode-footer.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>