103 Zeilen
4.1 KiB
HTML
103 Zeilen
4.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>Metadaten-Crawler</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="title-bar">
|
||
<div class="title-bar-content">
|
||
<div class="app-title">
|
||
<span class="title-text">Metadaten-Crawler</span>
|
||
</div>
|
||
<div class="title-bar-actions">
|
||
<button class="window-control minimize" id="minimizeBtn">−</button>
|
||
<button class="window-control maximize" id="maximizeBtn">□</button>
|
||
<button class="window-control close" id="closeBtn">×</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings Dialog -->
|
||
<div class="settings-dialog" id="settingsDialog">
|
||
<div class="settings-content">
|
||
<div class="settings-header">
|
||
<h2>Einstellungen</h2>
|
||
<button class="settings-close" id="settingsCloseBtn">×</button>
|
||
</div>
|
||
<div class="settings-body">
|
||
<div class="settings-section">
|
||
<h3>Erscheinungsbild</h3>
|
||
<div class="theme-selector">
|
||
<label class="theme-option">
|
||
<input type="radio" name="theme" value="dark" id="darkTheme" checked>
|
||
<span class="theme-label">
|
||
<span class="theme-icon">🌙</span>
|
||
<span>Dark Mode</span>
|
||
</span>
|
||
</label>
|
||
<label class="theme-option">
|
||
<input type="radio" name="theme" value="light" id="lightTheme">
|
||
<span class="theme-label">
|
||
<span class="theme-icon">☀️</span>
|
||
<span>Light Mode</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-header">
|
||
<div class="app-header-content">
|
||
<h1>Metadaten-Crawler</h1>
|
||
<button class="settings-btn" id="settingsBtn" title="Einstellungen">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="3"></circle>
|
||
<path d="M12 1v6m0 6v6m9-9h-6m-6 0H3m16.83-4.24l-4.24 4.24m-7.18 0L4.17 4.76m16.66 14.48l-4.24-4.24m-7.18 0L4.17 19.24"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
|
||
<!-- File Drop Zone -->
|
||
<div class="file-drop-zone" id="fileDropZone">
|
||
<div class="file-icon">📁</div>
|
||
<p>Datei hier ablegen</p>
|
||
<p>oder <strong>klicken</strong> zum Durchsuchen</p>
|
||
<div class="supported-formats">
|
||
Unterstützte Formate: JPEG, PNG, GIF, BMP, WEBP, MP4, AVI, MOV, MKV
|
||
</div>
|
||
<input type="file" id="fileInput" accept="image/*,video/*" style="display: none;">
|
||
</div>
|
||
|
||
<!-- Loading Spinner -->
|
||
<div class="loading" id="loading">
|
||
<div class="spinner"></div>
|
||
<p>Metadaten werden ausgelesen...</p>
|
||
</div>
|
||
|
||
<!-- Metadata Display -->
|
||
<div class="metadata-container" id="metadataContainer">
|
||
<div class="file-info" id="fileInfo"></div>
|
||
<div class="image-preview" id="imagePreview"></div>
|
||
<div id="metadataContent"></div>
|
||
<div class="action-buttons">
|
||
<button class="clear-btn" onclick="clearMetadata()">Neue Datei analysieren</button>
|
||
<button class="report-btn" id="reportBtn" onclick="generateReport()">Bericht erstellen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ExifReader library -->
|
||
<script src="https://cdn.jsdelivr.net/npm/exifreader@4.13.0/dist/exif-reader.min.js"></script>
|
||
|
||
<script src="app.js"></script>
|
||
<script src="renderer.js"></script>
|
||
</body>
|
||
</html> |