124 lines
6.7 KiB
PHP
124 lines
6.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PDF Booklet Creator</title>
|
|
<meta name="description" content="Create print-ready booklets from PDF files.">
|
|
<meta name="keywords" content="pdf booklet, imposition, print-ready, booklet creator, pdf tools, prepress, printing, book binding, Built with Flatlogic Generator">
|
|
<meta property="og:title" content="PDF Booklet Creator">
|
|
<meta property="og:description" content="Create print-ready booklets from PDF files.">
|
|
<meta property="og:image" content="">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="bg-primary text-white text-center p-3">
|
|
<h1>PDF Booklet Creator</h1>
|
|
<p class="lead">Create print-ready booklets from your PDF files</p>
|
|
</header>
|
|
|
|
<main class="container mt-4">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
PDF Import
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="drop-area" class="border rounded p-5 text-center">
|
|
<p>Drag & drop a PDF file here or click to select</p>
|
|
<input type="file" id="file-input" class="d-none" accept=".pdf">
|
|
<button id="file-select-btn" class="btn btn-secondary">Select PDF</button>
|
|
</div>
|
|
<div id="pdf-info" class="mt-3 d-none">
|
|
<h5>PDF Information</h5>
|
|
<p><strong>Filename:</strong> <span id="pdf-filename"></span></p>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<p><strong>Page Count:</strong> <span id="pdf-page-count"></span></p>
|
|
</div>
|
|
<div class="col-6">
|
|
<p><strong>Paper Sheets Required:</strong> <span id="pdf-paper-count"></span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="recommendation-section" class="mt-3 d-none">
|
|
<h5>Booklet Size Recommendations</h5>
|
|
<table id="recommendation-table" class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Booklet Size</th>
|
|
<th>Number of Booklets</th>
|
|
<th>Last Booklet Size</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="recommendation-table-body">
|
|
<!-- Rows will be added here dynamically -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Booklet Settings
|
|
</div>
|
|
<div class="card-body">
|
|
<form>
|
|
<div class="mb-4">
|
|
<label for="booklet-size" class="form-label">Booklet Size <i class="bi bi-info-circle" title="The number of pages in each booklet (must be a multiple of 4)."></i></label>
|
|
<input type="number" class="form-control" id="booklet-size" value="16" step="4" min="4">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="first-booklet-size" class="form-label">First Booklet Pages <i class="bi bi-info-circle" title="Optional: Use a smaller page count for the first booklet."></i></label>
|
|
<input type="number" class="form-control" id="first-booklet-size">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="blank-pages-start" class="form-label">Blank Pages at Start <i class="bi bi-info-circle" title="Add blank pages to the beginning of the first booklet."></i></label>
|
|
<input type="number" class="form-control" id="blank-pages-start" value="0" min="0">
|
|
</div>
|
|
<div class="d-grid gap-2">
|
|
<button type="button" class="btn btn-primary" id="preview-btn" disabled><i class="bi bi-eye"></i> Preview</button>
|
|
<button type="button" class="btn btn-success" id="export-single-btn" disabled><i class="bi bi-file-earmark-pdf"></i> Export as Single PDF</button>
|
|
<button type="button" class="btn btn-info" id="export-zip-btn" disabled><i class="bi bi-file-earmark-zip"></i> Export as ZIP</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Imposition Preview
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="imposition-preview" class="p-3 bg-light rounded" style="min-height: 100px; font-family: monospace;">
|
|
<p class="text-muted">Click "Preview" to see the imposed page order.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="text-center mt-4 p-3 bg-light">
|
|
<p>Built with <a href="https://flatlogic.com/" target="_blank">Flatlogic</a></p>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html> |