Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PDF Form Wizard Pro</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container py-5"> | |
| <div class="text-center mb-5"> | |
| <h1 class="display-4">PDF Form Wizard Pro ♂️</h1> | |
| <p class="lead">Magically fill PDF forms with CSV data</p> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="card mb-4"> | |
| <div class="card-header bg-primary text-white"> | |
| <h5>Step 1: Upload Template PDF</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div class="mb-3"> | |
| <label for="templateUpload" class="form-label">Select PDF Template</label> | |
| <input class="form-control" type="file" id="templateUpload" accept=".pdf" required> | |
| <div class="mt-3"> | |
| <label for="localPath" class="form-label">Or Enter Local Path:</label> | |
| <input class="form-control" type="text" id="localPath" placeholder="G:\path\to\file.pdf"> | |
| </div> | |
| </div> | |
| <button id="uploadTemplateBtn" class="btn btn-primary" type="button">Process PDF</button> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header bg-primary text-white"> | |
| <h5>PDF Actions</h5> | |
| </div> | |
| <div class="card-body"> | |
| <button id="scanPdfBtn" class="btn btn-primary mb-3">Scan PDF</button> | |
| <button id="previewPdfBtn" class="btn btn-primary">Preview PDF</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="card mb-4"> | |
| <div class="card-header bg-info text-white"> | |
| <h5>Invoice Details</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div id="invoiceDetails" class="mb-4"> | |
| <h6>Invoice Fields:</h6> | |
| <ul id="invoiceFieldsList" class="list-group"> | |
| <li class="list-group-item">Invoice Date: <span id="invoiceDate"></span></li> | |
| <li class="list-group-item">Treatment Reason: <span id="treatmentReason"></span></li> | |
| <li class="list-group-item">Invoice Number: <span id="invoiceNumber"></span></li> | |
| </ul> | |
| </div> | |
| <div id="pdfPreview" class="mb-4"> | |
| <h6>PDF Preview:</h6> | |
| <iframe id="pdfViewer" style="width:100%; height:300px; border:1px solid #ddd;"></iframe> | |
| </div> | |
| <div id="newFieldsSection"> | |
| <h6>Add New Fields:</h6> | |
| <div class="mb-3"> | |
| <input type="text" id="newFieldName" class="form-control mb-2" placeholder="Field Name"> | |
| <input type="text" id="newFieldValue" class="form-control mb-2" placeholder="Field Value"> | |
| <button id="addFieldBtn" class="btn btn-sm btn-primary">Add Field</button> | |
| </div> | |
| <div id="newFieldsList" class="list-group"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header bg-warning text-dark"> | |
| <h5>Step 3: Generate PDFs</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div class="mb-3"> | |
| <label class="form-label">Select Rows to Process</label> | |
| <select class="form-select" id="rowSelection" multiple></select> | |
| </div> | |
| <button id="generatePdfBtn" class="btn btn-warning">Generate PDFs</button> | |
| <div id="downloadSection" class="mt-3 d-none"> | |
| <a id="downloadLink" class="btn btn-success" download>Download Generated PDF</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |