d9dec33ecc
New "Accounts" tab for managing hoster credentials separately from upload settings. Accounts can be added, edited, and deleted via modal dialogs. Login credentials are automatically verified on save, showing status (Bereit/Fehler) in the account list. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
252 lines
10 KiB
HTML
252 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';">
|
|
<title>Multi-Hoster-Upload</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<nav class="tab-bar">
|
|
<button class="tab active" data-view="upload">Upload</button>
|
|
<button class="tab" data-view="accounts">Accounts</button>
|
|
<button class="tab" data-view="settings">Einstellungen</button>
|
|
<button class="tab" data-view="history">Verlauf</button>
|
|
<span class="version-label" id="versionLabel"></span>
|
|
</nav>
|
|
|
|
<div id="updateBanner" class="update-banner" style="display:none">
|
|
<span id="updateMessage"></span>
|
|
<button class="btn btn-sm btn-primary" id="installUpdateBtn">Update installieren</button>
|
|
<button class="btn btn-sm btn-secondary" id="dismissUpdateBtn">×</button>
|
|
</div>
|
|
|
|
<!-- Upload View -->
|
|
<div id="upload-view" class="view active">
|
|
<!-- Toolbar -->
|
|
<div class="upload-toolbar">
|
|
<div class="toolbar-left">
|
|
<button class="btn btn-xs btn-secondary" id="chooseHostersBtn">Ziele waehlen</button>
|
|
<span class="hoster-summary" id="hosterSummary">Keine Upload-Ziele ausgewaehlt</span>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<div class="health-check-inline">
|
|
<button class="btn btn-xs btn-secondary" id="runHealthCheckBtn" title="Hoster Check">Check</button>
|
|
<label class="auto-check-label" title="Auto-Check vor Upload">
|
|
<input type="checkbox" id="autoHealthCheckToggle" checked>
|
|
<span>Auto</span>
|
|
</label>
|
|
</div>
|
|
<button class="btn btn-xs btn-primary" id="addFilesBtn">+ Dateien</button>
|
|
<button class="btn btn-xs btn-success" id="startUploadBtn" disabled>Upload starten</button>
|
|
<button class="btn btn-xs btn-danger" id="cancelUploadBtn" style="display:none">Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Health check results (collapsible) -->
|
|
<div class="health-check-results" id="healthCheckResults"></div>
|
|
|
|
<div class="upload-workspace">
|
|
<!-- Drop zone (shown when no files) -->
|
|
<div class="drop-zone" id="dropZone">
|
|
<div class="drop-icon">📁</div>
|
|
<p>Dateien hierher ziehen oder klicken</p>
|
|
</div>
|
|
|
|
<!-- Queue Table -->
|
|
<div class="queue-shell" id="queueShell" style="display:none">
|
|
<div class="queue-container" id="queueContainer">
|
|
<table class="queue-table" id="queueTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-filename sortable" data-sort="filename">File name</th>
|
|
<th class="col-size sortable" data-sort="size">Uploaded / Size</th>
|
|
<th class="col-host sortable" data-sort="host">Host</th>
|
|
<th class="col-status sortable" data-sort="status">Status</th>
|
|
<th class="col-elapsed">Elapsed</th>
|
|
<th class="col-remaining">Remain.</th>
|
|
<th class="col-speed sortable" data-sort="speed">Speed</th>
|
|
<th class="col-progress">Progress</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="queueBody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Action bar below queue -->
|
|
<div class="queue-actions" id="queueActions" style="display:none">
|
|
<button class="btn btn-xs btn-primary" id="copyAllLinksBtn">Alle Links kopieren</button>
|
|
<button class="btn btn-xs btn-secondary" id="retryFailedBtn" style="display:none">Fehlgeschlagene erneut</button>
|
|
</div>
|
|
|
|
<div class="recent-files-panel" id="recentFilesPanel">
|
|
<div class="recent-files-header">
|
|
<h3>Files</h3>
|
|
<span class="recent-files-hint">Zuletzt erzeugte Upload-Links</span>
|
|
</div>
|
|
<div class="recent-files-table-wrap">
|
|
<table class="recent-files-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-date">Date</th>
|
|
<th class="col-filename">Filename</th>
|
|
<th class="col-host">Host</th>
|
|
<th class="col-link">Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="recentFilesBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accounts View -->
|
|
<div id="accounts-view" class="view">
|
|
<div class="accounts-container">
|
|
<div class="accounts-header">
|
|
<div>
|
|
<h2>Accounts</h2>
|
|
<p class="settings-hint">Hoster-Zugangsdaten verwalten</p>
|
|
</div>
|
|
<button class="btn btn-primary" id="addAccountBtn">+ Account hinzufuegen</button>
|
|
</div>
|
|
<div class="accounts-list" id="accountsList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Modal -->
|
|
<div class="modal-overlay" id="accountModal" style="display:none">
|
|
<div class="modal-card">
|
|
<div class="modal-header">
|
|
<div>
|
|
<h3 id="accountModalTitle">Account hinzufuegen</h3>
|
|
<p id="accountModalSubtitle">Waehle einen Hoster und gib deine Zugangsdaten ein.</p>
|
|
</div>
|
|
<button class="icon-btn" id="closeAccountModalBtn" aria-label="Schliessen">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="settings-row" id="accountHosterRow">
|
|
<label>Hoster</label>
|
|
<select class="key-input" id="accountHosterSelect" style="max-width:300px"></select>
|
|
</div>
|
|
<div id="accountCredsFields"></div>
|
|
<div class="account-modal-status" id="accountModalStatus"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" id="cancelAccountModalBtn">Abbrechen</button>
|
|
<button class="btn btn-primary" id="saveAccountBtn">Anlegen & Pruefen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirm Modal -->
|
|
<div class="modal-overlay" id="deleteAccountModal" style="display:none">
|
|
<div class="modal-card" style="width:min(400px,100%)">
|
|
<div class="modal-header">
|
|
<div><h3>Account loeschen?</h3></div>
|
|
<button class="icon-btn" id="closeDeleteModalBtn" aria-label="Schliessen">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="deleteAccountMessage">Account wirklich loeschen?</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" id="cancelDeleteBtn">Abbrechen</button>
|
|
<button class="btn btn-danger" id="confirmDeleteBtn">Loeschen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings View -->
|
|
<div id="settings-view" class="view">
|
|
<div class="settings-container">
|
|
<h2>Upload Einstellungen</h2>
|
|
<p class="settings-hint">Upload-Einstellungen pro Hoster. Zugangsdaten werden im Accounts-Tab verwaltet.</p>
|
|
<div class="settings-hosters" id="settingsHosters"></div>
|
|
<button class="btn btn-primary" id="saveSettingsBtn">Alles Speichern</button>
|
|
<span class="save-feedback" id="saveFeedback"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History View -->
|
|
<div id="history-view" class="view">
|
|
<div class="history-container">
|
|
<div class="history-header">
|
|
<h2>Upload Verlauf</h2>
|
|
<button class="btn btn-secondary" id="clearHistoryBtn">Verlauf loeschen</button>
|
|
</div>
|
|
<div id="historyContainer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Context Menu -->
|
|
<div class="context-menu" id="contextMenu" style="display:none">
|
|
<div class="ctx-item" data-action="copy-links">Links kopieren</div>
|
|
<div class="ctx-item" data-action="retry-selected">Erneut versuchen</div>
|
|
<div class="ctx-item" data-action="delete-selected">Entfernen</div>
|
|
<div class="ctx-separator"></div>
|
|
<div class="ctx-item" data-action="copy-all-links">Alle Links kopieren</div>
|
|
<div class="ctx-separator"></div>
|
|
<div class="ctx-item ctx-submenu" data-action="shutdown">
|
|
Shutdown nach Finish
|
|
<div class="ctx-submenu-items">
|
|
<div class="ctx-item" data-action="shutdown-nothing">Nichts</div>
|
|
<div class="ctx-item" data-action="shutdown-sleep">Ruhezustand</div>
|
|
<div class="ctx-item" data-action="shutdown-shutdown">Herunterfahren</div>
|
|
<div class="ctx-item" data-action="shutdown-restart">Neustart</div>
|
|
</div>
|
|
</div>
|
|
<div class="ctx-item" data-action="always-on-top">Immer im Vordergrund</div>
|
|
</div>
|
|
|
|
<!-- Statusbar -->
|
|
<div class="statusbar" id="statusbar">
|
|
<span class="sb-state" id="sbState">Bereit</span>
|
|
<span class="sb-separator">|</span>
|
|
<span class="sb-speed" id="sbSpeed">0 kB/s</span>
|
|
<span class="sb-separator">|</span>
|
|
<span class="sb-total" id="sbTotal">0 B</span>
|
|
<span class="sb-separator">|</span>
|
|
<span class="sb-elapsed" id="sbElapsed">00:00:00</span>
|
|
</div>
|
|
|
|
<!-- Copy toast -->
|
|
<div class="copy-toast" id="copyToast"></div>
|
|
|
|
<!-- Shutdown countdown -->
|
|
<div class="shutdown-overlay" id="shutdownOverlay" style="display:none">
|
|
<div class="shutdown-box">
|
|
<p id="shutdownMessage">System wird heruntergefahren in <span id="shutdownSeconds">60</span>s...</p>
|
|
<button class="btn btn-danger" id="cancelShutdownBtn">Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="hosterModal" style="display:none">
|
|
<div class="modal-card">
|
|
<div class="modal-header">
|
|
<div>
|
|
<h3>Upload-Ziele auswaehlen</h3>
|
|
<p>Dateien wurden hinzugefuegt. Waehle jetzt die Hoster fuer den Upload.</p>
|
|
</div>
|
|
<button class="icon-btn" id="closeHosterModalBtn" aria-label="Schliessen">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-actions-inline">
|
|
<button class="btn btn-xs btn-secondary" id="selectAllHostersBtn">Alle</button>
|
|
<button class="btn btn-xs btn-secondary" id="clearHostersBtn">Keine</button>
|
|
</div>
|
|
<div class="hoster-modal-list" id="hosterModalList"></div>
|
|
<p class="modal-hint" id="hosterModalHint"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" id="cancelHosterModalBtn">Abbrechen</button>
|
|
<button class="btn btn-primary" id="confirmHosterModalBtn">Uebernehmen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|