data
21e1ffe9e2
Neue Features: - 3-Panel Dateimanager (Ordnerbaum, Dateiliste, Vorschau) - Separates Vorschau-Fenster für zweiten Monitor - Resize-Handles für flexible Panel-Größen (horizontal & vertikal) - Vorschau-Panel ausblendbar wenn externes Fenster aktiv - Natürliche Sortierung (Sonderzeichen → Zahlen → Buchstaben) - PDF-Vorschau mit Fit-to-Page - Email-Attachment Abruf erweitert Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
178 lines
8.1 KiB
HTML
178 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dateimanager - Dateiverwaltung</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<link rel="stylesheet" href="/static/css/browser.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" class="browser-app">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<a href="/" class="back-link">← Hauptseite</a>
|
|
<h1>Dateimanager</h1>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="btn-show-preview" class="btn btn-sm hidden" onclick="togglePreviewPanel()" title="Vorschau-Panel einblenden">
|
|
👁 Vorschau einblenden
|
|
</button>
|
|
<button id="btn-open-preview" class="btn btn-sm" onclick="oeffneVorschauFenster()" title="Vorschau in separatem Fenster öffnen">
|
|
🖥️ Vorschau-Fenster öffnen
|
|
</button>
|
|
<select id="theme-select" class="theme-select" onchange="wechsleTheme(this.value)">
|
|
<option value="auto">🎨 Auto</option>
|
|
<option value="dark">🌙 Dark</option>
|
|
<option value="breeze-dark">🌙 Breeze Dark</option>
|
|
<option value="breeze-light">☀️ Breeze Light</option>
|
|
</select>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Toolbar -->
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<button class="btn btn-sm" onclick="ordnerHoch()" title="Eine Ebene hoch (Backspace)">⬆️</button>
|
|
<button class="btn btn-sm" onclick="ordnerAktualisieren()" title="Aktualisieren (F5)">🔄</button>
|
|
</div>
|
|
<div class="breadcrumb-bar">
|
|
<div id="breadcrumb" class="breadcrumb"></div>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<span id="file-count" class="file-count">0 Dateien</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Browser Area: 3 Panels -->
|
|
<div class="browser-main" id="browser-main">
|
|
<!-- Panel 1: Ordner-Baum -->
|
|
<div class="pane pane-tree" id="pane-tree">
|
|
<div class="pane-header">
|
|
<span>📁 Ordner</span>
|
|
</div>
|
|
<div id="folder-tree" class="folder-tree">
|
|
<p class="empty-state">Lade Ordner...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resize Handle 1 (zwischen Baum und Liste) -->
|
|
<div id="resize-handle-1" class="resize-handle resize-handle-v"></div>
|
|
|
|
<!-- Panel 2: Dateiliste -->
|
|
<div class="pane pane-list" id="pane-list">
|
|
<div class="pane-header">
|
|
<span>📄 Dateien</span>
|
|
</div>
|
|
<div id="file-list" class="file-list">
|
|
<p class="empty-state">Keine Dateien</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resize Handle 2 (zwischen Liste und Vorschau) -->
|
|
<div id="resize-handle-2" class="resize-handle resize-handle-h"></div>
|
|
|
|
<!-- Panel 3: Vorschau -->
|
|
<div class="pane pane-preview" id="pane-preview">
|
|
<div class="pane-header">
|
|
<span>👁 Vorschau</span>
|
|
<div class="pane-toolbar">
|
|
<button id="btn-hide-preview" class="btn btn-sm hidden" onclick="togglePreviewPanel()" title="Vorschau-Panel ausblenden">
|
|
👁🗨 Ausblenden
|
|
</button>
|
|
<button id="btn-extern" class="btn btn-sm hidden" onclick="dateiExternOeffnen()" title="Extern öffnen">🔗</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datei-Info -->
|
|
<div id="file-info" class="file-info hidden">
|
|
<div class="file-info-name">
|
|
<span id="preview-filename"></span>
|
|
<span id="preview-size" class="file-size"></span>
|
|
</div>
|
|
<div class="file-actions">
|
|
<button class="btn btn-sm" onclick="dateiUmbenennen()">✏️ Umbenennen</button>
|
|
<button class="btn btn-sm" onclick="dateiVerschieben()">📦 Verschieben</button>
|
|
<button class="btn btn-sm btn-danger" onclick="dateiLoeschen()">🗑 Löschen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vorschau-Bereich -->
|
|
<div id="preview-container" class="preview-container">
|
|
<div class="preview-placeholder">
|
|
<span>Datei auswählen um Vorschau zu sehen</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Umbenennen -->
|
|
<div id="umbenennen-modal" class="modal hidden">
|
|
<div class="modal-content modal-small">
|
|
<div class="modal-header">
|
|
<h3>Datei umbenennen</h3>
|
|
<button class="modal-close" onclick="schliesseModal('umbenennen-modal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Neuer Name</label>
|
|
<input type="text" id="neuer-name" placeholder="Neuer Dateiname">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" onclick="schliesseModal('umbenennen-modal')">Abbrechen</button>
|
|
<button class="btn btn-primary" onclick="umbenennenBestaetigen()">Umbenennen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Verschieben -->
|
|
<div id="verschieben-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Datei verschieben</h3>
|
|
<button class="modal-close" onclick="schliesseModal('verschieben-modal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="modal-hint">Wähle den Zielordner für: <strong id="verschieben-datei"></strong></p>
|
|
<div class="file-browser">
|
|
<div class="file-browser-path">
|
|
<span id="verschieben-browser-path">/</span>
|
|
</div>
|
|
<ul class="file-browser-list" id="verschieben-browser-list"></ul>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" onclick="schliesseModal('verschieben-modal')">Abbrechen</button>
|
|
<button class="btn btn-primary" onclick="verschiebenBestaetigen()">Hierhin verschieben</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Löschen bestätigen -->
|
|
<div id="loeschen-modal" class="modal hidden">
|
|
<div class="modal-content modal-small">
|
|
<div class="modal-header">
|
|
<h3>Datei löschen</h3>
|
|
<button class="modal-close" onclick="schliesseModal('loeschen-modal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Soll diese Datei wirklich gelöscht werden?</p>
|
|
<p class="delete-warning"><strong id="loeschen-datei"></strong></p>
|
|
<p class="delete-hint">Diese Aktion kann nicht rückgängig gemacht werden!</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" onclick="schliesseModal('loeschen-modal')">Abbrechen</button>
|
|
<button class="btn btn-danger" onclick="loeschenBestaetigen()">Endgültig löschen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notifications -->
|
|
<div id="toast-container" class="toast-container"></div>
|
|
</div>
|
|
|
|
<script src="/static/js/browser.js"></script>
|
|
</body>
|
|
</html>
|