multiarch-docker-images/automatic-pdf-renamer/web/index.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Automatic PDF Renamer</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <div class="app-shell">
      <aside class="sidebar">
        <div class="brand">
          <h1>PDF Renamer</h1>
        </div>
        <nav class="nav">
          <a class="active" href="/">Documents</a>
          <a href="/config.html">Config</a>
          <a href="/maintenance.html">Maintenance</a>
        </nav>
      </aside>

      <main class="main-panel">
        <header class="toolbar">
          <div>
            <p class="eyebrow">Dashboard</p>
            <h2>Document list</h2>
          </div>
          <div class="toolbar-actions">
            <button id="refresh-btn" class="primary-btn">Refresh</button>
          </div>
        </header>

        <section class="summary-cards" id="summary-cards"></section>

        <section class="filters-card">
          <div class="field-group">
            <label for="search-filter">Global search</label>
            <input id="search-filter" type="text" placeholder="Search metadata and document content..." />
          </div>
        </section>

        <section class="table-card">
          <div class="list-tools">
            <details id="column-picker"><summary>Choose columns</summary><div id="column-options" class="column-options"></div></details>
            <button id="select-filtered-btn" class="secondary-btn" type="button">Select all filtered</button>
            <button id="clear-selection-btn" class="secondary-btn" type="button">Clear selection</button>
            <span id="selection-count" role="status">0 selected</span>
            <button id="bulk-edit-btn" class="primary-btn" type="button" disabled>Bulk edit</button>
          </div>
          <form id="bulk-edit-form" class="bulk-edit-form" hidden>
            <h3>Bulk edit selected documents</h3>
            <p id="bulk-scope"></p>
            <p class="config-description">Only fields you change below will be updated. Other metadata remains unchanged.</p>
            <div class="bulk-edit-grid">
              <div class="field-group"><label for="bulk-template">Template</label><select id="bulk-template"><option value="">Keep unchanged</option></select></div>
              <div class="field-group"><label for="bulk-period-format">Period format</label><select id="bulk-period-format"><option value="">Keep unchanged</option></select></div>
              <div class="field-group"><label for="bulk-company">Company</label><select id="bulk-company"><option value="">Keep unchanged</option></select></div>
              <div class="field-group"><label for="bulk-type">Document type</label><select id="bulk-type"><option value="">Keep unchanged</option></select></div>
              <div class="field-group"><label for="bulk-emission-date">Emission date</label><input id="bulk-emission-date" type="date" /></div>
            </div>
            <div class="additional-data">
              <div class="additional-header"><h4>Additional fields</h4><button id="bulk-add-field" class="secondary-btn" type="button">Add field</button></div>
              <p class="field-hint">Choose a field and a value, or choose “Clear field” to remove it from selected documents.</p>
              <div id="bulk-additional-fields" class="additional-field-list"></div>
            </div>
            <div class="edit-form-actions">
              <button class="primary-btn" type="submit">Review and apply changes</button>
              <button id="cancel-bulk-edit" class="secondary-btn" type="button">Cancel</button>
              <p id="bulk-result" role="status" aria-live="polite"></p>
            </div>
          </form>
          <table class="documents-table">
            <thead id="documents-head"></thead>
            <tbody id="documents-body">
              <tr><td colspan="8" class="empty-state">Loading documents...</td></tr>
            </tbody>
          </table>
        </section>
        <div class="list-footer">
          <p id="list-status" class="action-status" role="status" aria-live="polite">Loading documents...</p>
          <button id="load-more-btn" class="secondary-btn" type="button" hidden>Load 25 more</button>
          <div id="load-sentinel" aria-hidden="true"></div>
        </div>
      </main>
    </div>

    <script src="/app.js"></script>
  </body>
</html>