| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Bank Extractor Backend</title> |
| <link rel="stylesheet" href="/static/styles.css" /> |
| </head> |
| <body> |
| <main class="app-shell"> |
| <section class="workspace"> |
| <header class="topbar"> |
| <div> |
| <h1>Bank Extractor Backend</h1> |
| <p>API backend with live job counters and latest AI Mode browser screenshot.</p> |
| </div> |
| <a class="ghost-link" href="/api/info" target="_blank" rel="noreferrer">API</a> |
| </header> |
|
|
| <form id="uploadForm" class="upload-panel"> |
| <label class="file-drop" for="pdfInput"> |
| <input id="pdfInput" name="pdf" type="file" accept="application/pdf" required /> |
| <span id="fileName">Choose a PDF</span> |
| </label> |
|
|
| <div class="control-grid single"> |
| <label> |
| <span>PDF password</span> |
| <input |
| id="pdfPassword" |
| name="pwd" |
| type="password" |
| autocomplete="off" |
| placeholder="Leave blank if not protected" |
| /> |
| </label> |
| </div> |
|
|
| <button id="startButton" type="submit">Start Job</button> |
| </form> |
|
|
| <section class="status-panel" aria-live="polite"> |
| <div class="status-head"> |
| <strong id="statusText">Ready</strong> |
| <span id="batchText">0 / 0 waves</span> |
| </div> |
| <div class="progress-track"> |
| <div id="progressBar" class="progress-bar"></div> |
| </div> |
| <p id="jobIdText" class="job-id">No job started</p> |
| <div class="counter-grid"> |
| <span id="pageCounter">0 / 0 pages</span> |
| <span id="tabCounter">0 active tabs</span> |
| </div> |
| <p id="messageText">Upload a PDF to begin.</p> |
| <div class="download-actions"> |
| <a id="downloadLink" class="download-link" hidden>Download JSON</a> |
| <a id="downloadCsvLink" class="download-link" hidden>Download CSV</a> |
| </div> |
| </section> |
|
|
| <section class="preview-panel"> |
| <div class="preview-head"> |
| <h2>Browser View</h2> |
| <span id="browserViewStatus">Waiting</span> |
| </div> |
| <div class="browser-view tall"> |
| <img id="browserViewImage" alt="Latest AI Mode browser view" hidden /> |
| <p id="browserViewEmpty" class="empty">Latest AI Mode tab screenshot appears here.</p> |
| </div> |
| </section> |
|
|
| <section class="preview-panel"> |
| <div class="preview-head"> |
| <h2>Rows</h2> |
| <span id="rowCount">No rows yet</span> |
| </div> |
| <div class="table-wrap"> |
| <table> |
| <thead> |
| <tr> |
| <th>Date</th> |
| <th>Description</th> |
| <th>Type</th> |
| <th>Amount</th> |
| <th>Closing</th> |
| </tr> |
| </thead> |
| <tbody id="previewBody"> |
| <tr> |
| <td colspan="5" class="empty">Extraction preview appears here after completion.</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
| </section> |
| </main> |
| <script src="/static/app.js"></script> |
| </body> |
| </html> |
|
|
