258 lines
11 KiB
HTML
258 lines
11 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>
|
|
|
|
<div id="upload-view" class="view active">
|
|
<div class="upload-toolbar">
|
|
<div class="toolbar-left">
|
|
<button class="btn btn-xs btn-secondary" id="chooseHostersBtn">Ziele auswählen</button>
|
|
<span class="hoster-summary" id="hosterSummary">Keine Upload-Ziele ausgewählt</span>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<button class="btn btn-xs btn-primary" id="addFilesBtn">+ Dateien</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-workspace">
|
|
<div class="drop-zone" id="dropZone">
|
|
<div class="drop-icon">📁</div>
|
|
<p>Dateien hierher ziehen oder klicken</p>
|
|
</div>
|
|
|
|
<div class="queue-shell" id="queueShell" style="display:none">
|
|
<div class="queue-command-bar" id="queueCommandBar">
|
|
<button class="btn btn-xs btn-success" id="startUploadBtn" disabled>Start Uploading</button>
|
|
<button class="btn btn-xs btn-secondary" id="reuploadSelectedBtn">Reupload selected file</button>
|
|
<button class="btn btn-xs btn-secondary" id="abortSelectedBtn">Abort selected file</button>
|
|
<button class="btn btn-xs btn-secondary" id="finishStopBtn">Finish Uploads in Progress and Stop</button>
|
|
<button class="btn btn-xs btn-danger" id="abortAllBtn">Abort all Downloads</button>
|
|
<button class="btn btn-xs btn-secondary" id="moveTopBtn">Move to the top</button>
|
|
<button class="btn btn-xs btn-secondary" id="moveUpBtn">Move up</button>
|
|
<button class="btn btn-xs btn-secondary" id="moveDownBtn">Move down</button>
|
|
<button class="btn btn-xs btn-secondary" id="moveBottomBtn">Move to the bottom</button>
|
|
</div>
|
|
|
|
<div class="queue-container" id="queueContainer">
|
|
<table class="queue-table" id="queueTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-filename sortable" data-sort="filename">Dateiname</th>
|
|
<th class="col-size sortable" data-sort="size">Hochgeladen / Größe</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">Zeit</th>
|
|
<th class="col-remaining">Rest</th>
|
|
<th class="col-speed sortable" data-sort="speed">Speed</th>
|
|
<th class="col-progress">Fortschritt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="queueBody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<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">Datum</th>
|
|
<th class="col-filename">Dateiname</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>
|
|
|
|
<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 und prüfen</p>
|
|
</div>
|
|
<div class="accounts-header-actions">
|
|
<button class="btn btn-secondary" id="accountsRunHealthCheckBtn">Accounts prüfen</button>
|
|
<label class="auto-check-label accounts-auto-check" title="Automatischer Check vor dem Upload">
|
|
<input type="checkbox" id="autoHealthCheckToggle" checked>
|
|
<span>Auto-Check vor Upload</span>
|
|
</label>
|
|
<button class="btn btn-primary" id="addAccountBtn">+ Account hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
<div class="health-check-results account-health-results" id="healthCheckResults"></div>
|
|
<div class="accounts-list" id="accountsList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="accountModal" style="display:none">
|
|
<div class="modal-card">
|
|
<div class="modal-header">
|
|
<div>
|
|
<h3 id="accountModalTitle">Account hinzufügen</h3>
|
|
<p id="accountModalSubtitle">Wähle einen Hoster und gib deine Zugangsdaten ein.</p>
|
|
</div>
|
|
<button class="icon-btn" id="closeAccountModalBtn" aria-label="Schließen">×</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 & prüfen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 löschen?</h3></div>
|
|
<button class="icon-btn" id="closeDeleteModalBtn" aria-label="Schließen">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="deleteAccountMessage">Account wirklich löschen?</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" id="cancelDeleteBtn">Abbrechen</button>
|
|
<button class="btn btn-danger" id="confirmDeleteBtn">Löschen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="settings-view" class="view">
|
|
<div class="settings-container">
|
|
<h2>Upload-Einstellungen</h2>
|
|
<p class="settings-hint">Hoster-Einstellungen erscheinen erst, sobald ein Account hinterlegt ist. Änderungen werden automatisch gespeichert.</p>
|
|
<div class="settings-hosters" id="settingsHosters"></div>
|
|
<div class="settings-save-row">
|
|
<span class="save-feedback" id="saveFeedback">Änderungen werden automatisch gespeichert.</span>
|
|
<button class="btn btn-secondary" id="saveSettingsBtn">Jetzt speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 löschen</button>
|
|
</div>
|
|
<div id="historyContainer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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-eta" id="sbEta">ETA --:--</span>
|
|
<span class="sb-separator">|</span>
|
|
<span class="sb-connections" id="sbConnections">Aktive Verbindungen 0</span>
|
|
<span class="sb-separator">|</span>
|
|
<span class="sb-queue-count" id="sbQueueCount">Gesamt 0</span>
|
|
<span class="sb-separator">|</span>
|
|
<span class="sb-remaining-count" id="sbRemainingCount">Remaining 0</span>
|
|
<span class="sb-separator">|</span>
|
|
<span class="sb-progress-count" id="sbInProgressCount">In Progress 0</span>
|
|
<span class="sb-separator">|</span>
|
|
<span class="sb-error-count" id="sbErrorCount">Error 0</span>
|
|
</div>
|
|
|
|
<div class="copy-toast" id="copyToast"></div>
|
|
|
|
<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 auswählen</h3>
|
|
<p>Dateien wurden hinzugefügt. Wähle jetzt die Hoster für den Upload.</p>
|
|
</div>
|
|
<button class="icon-btn" id="closeHosterModalBtn" aria-label="Schließen">×</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">Übernehmen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|