71 Zeilen
2.6 KiB
HTML
71 Zeilen
2.6 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>
|
||
|
||
|
||
<div class="app-header">
|
||
<div class="app-header-content">
|
||
<h1>Metadaten-Crawler</h1>
|
||
<button class="theme-toggle-btn" id="themeToggleBtn" title="Theme umschalten">
|
||
<img src="icons/moon.svg" class="theme-icon dark-icon" alt="Dark Mode">
|
||
<img src="icons/sun.svg" class="theme-icon light-icon" alt="Light Mode">
|
||
</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> |