Initial commit
Dieser Commit ist enthalten in:
Claude Project Manager
11
.claude/settings.local.json
Normale Datei
11
.claude/settings.local.json
Normale Datei
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(mkdir:*)",
|
||||||
|
"Bash(npm install)",
|
||||||
|
"Bash(npm run build-win:*)",
|
||||||
|
"Bash(chmod:*)"
|
||||||
|
],
|
||||||
|
"deny": []
|
||||||
|
}
|
||||||
|
}
|
||||||
5
.gitignore
vendored
Normale Datei
5
.gitignore
vendored
Normale Datei
@ -0,0 +1,5 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
*.log
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
89
CLAUDE_PROJECT_README.md
Normale Datei
89
CLAUDE_PROJECT_README.md
Normale Datei
@ -0,0 +1,89 @@
|
|||||||
|
# Toolbox-Metadaten-Crawler
|
||||||
|
|
||||||
|
*This README was automatically generated by Claude Project Manager*
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
- **Path**: `C:/Users/hendr/Desktop/IntelSight/Projektablage/Toolbox-Metadaten-Crawler`
|
||||||
|
- **Files**: 88 files
|
||||||
|
- **Size**: 275.2 MB
|
||||||
|
- **Last Modified**: 2025-07-10 19:19
|
||||||
|
|
||||||
|
## Technology Stack
|
||||||
|
|
||||||
|
### Languages
|
||||||
|
- Batch
|
||||||
|
- JavaScript
|
||||||
|
- Python
|
||||||
|
|
||||||
|
### Frameworks & Libraries
|
||||||
|
- React
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
app.js
|
||||||
|
build.bat
|
||||||
|
CLAUDE_PROJECT_README.md
|
||||||
|
gitea_push_debug.txt
|
||||||
|
index.html
|
||||||
|
main.js
|
||||||
|
main.py
|
||||||
|
package-lock.json
|
||||||
|
package.json
|
||||||
|
assets
|
||||||
|
dist/
|
||||||
|
├── builder-debug.yml
|
||||||
|
├── builder-effective-config.yaml
|
||||||
|
└── win-unpacked/
|
||||||
|
├── chrome_100_percent.pak
|
||||||
|
├── chrome_200_percent.pak
|
||||||
|
├── d3dcompiler_47.dll
|
||||||
|
├── ffmpeg.dll
|
||||||
|
├── icudtl.dat
|
||||||
|
├── libEGL.dll
|
||||||
|
├── libGLESv2.dll
|
||||||
|
├── LICENSE.electron.txt
|
||||||
|
├── LICENSES.chromium.html
|
||||||
|
├── Metadaten-Crawler.exe
|
||||||
|
├── locales/
|
||||||
|
│ ├── af.pak
|
||||||
|
│ ├── am.pak
|
||||||
|
│ ├── ar.pak
|
||||||
|
│ ├── bg.pak
|
||||||
|
│ ├── bn.pak
|
||||||
|
│ ├── ca.pak
|
||||||
|
│ ├── cs.pak
|
||||||
|
│ ├── da.pak
|
||||||
|
│ ├── de.pak
|
||||||
|
│ └── el.pak
|
||||||
|
└── resources/
|
||||||
|
└── app.asar
|
||||||
|
```
|
||||||
|
|
||||||
|
## Key Files
|
||||||
|
|
||||||
|
- `package.json`
|
||||||
|
- `README.md`
|
||||||
|
- `requirements.txt`
|
||||||
|
|
||||||
|
## Claude Integration
|
||||||
|
|
||||||
|
This project is managed with Claude Project Manager. To work with this project:
|
||||||
|
|
||||||
|
1. Open Claude Project Manager
|
||||||
|
2. Click on this project's tile
|
||||||
|
3. Claude will open in the project directory
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
*Add your project-specific notes here*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Development Log
|
||||||
|
|
||||||
|
- README generated on 2025-07-08 13:51:49
|
||||||
|
- README updated on 2025-07-08 20:45:50
|
||||||
|
- README updated on 2025-07-10 16:11:59
|
||||||
|
- README updated on 2025-07-10 19:34:36
|
||||||
57
README.md
Normale Datei
57
README.md
Normale Datei
@ -0,0 +1,57 @@
|
|||||||
|
# Metadaten-Crawler (MC)
|
||||||
|
|
||||||
|
Ein professionelles Desktop-Tool zur Extraktion von Metadaten aus Bild- und Videodateien.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Drag & Drop Unterstützung für Dateien
|
||||||
|
- Extraktion von EXIF-, IPTC- und XMP-Metadaten
|
||||||
|
- Unterstützung für Bild- und Videoformate
|
||||||
|
- Dark/Light Mode mit professionellem Design
|
||||||
|
- Native Desktop-Anwendung für Windows
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
### Voraussetzungen
|
||||||
|
- Node.js (v16 oder höher)
|
||||||
|
- npm
|
||||||
|
|
||||||
|
### Entwicklung
|
||||||
|
```bash
|
||||||
|
# Abhängigkeiten installieren
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Anwendung starten
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build
|
||||||
|
```bash
|
||||||
|
# Windows Executable erstellen
|
||||||
|
npm run build-win
|
||||||
|
```
|
||||||
|
|
||||||
|
Die ausführbare Datei finden Sie im `dist` Verzeichnis.
|
||||||
|
|
||||||
|
## Unterstützte Formate
|
||||||
|
|
||||||
|
### Bilder
|
||||||
|
- JPEG/JPG
|
||||||
|
- PNG
|
||||||
|
- GIF
|
||||||
|
- BMP
|
||||||
|
- WEBP
|
||||||
|
|
||||||
|
### Videos
|
||||||
|
- MP4
|
||||||
|
- AVI
|
||||||
|
- MOV
|
||||||
|
- MKV
|
||||||
|
|
||||||
|
## Design
|
||||||
|
|
||||||
|
Die Anwendung folgt dem IntelSight Corporate Design System mit:
|
||||||
|
- Dark Mode als Standard
|
||||||
|
- Professionellen Farbpaletten
|
||||||
|
- Poppins Font für UI-Elemente
|
||||||
|
- Minimalistischem, modernen Design
|
||||||
914
app.js
Normale Datei
914
app.js
Normale Datei
@ -0,0 +1,914 @@
|
|||||||
|
// === METADATEN-CRAWLER JAVASCRIPT ===
|
||||||
|
|
||||||
|
// DOM Elements
|
||||||
|
const fileDropZone = document.getElementById('fileDropZone');
|
||||||
|
const fileInput = document.getElementById('fileInput');
|
||||||
|
const loading = document.getElementById('loading');
|
||||||
|
const metadataContainer = document.getElementById('metadataContainer');
|
||||||
|
const fileInfo = document.getElementById('fileInfo');
|
||||||
|
const imagePreview = document.getElementById('imagePreview');
|
||||||
|
const metadataContent = document.getElementById('metadataContent');
|
||||||
|
|
||||||
|
// Prevent default drag behaviors
|
||||||
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||||
|
fileDropZone.addEventListener(eventName, preventDefaults, false);
|
||||||
|
document.body.addEventListener(eventName, preventDefaults, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
function preventDefaults(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Highlight drop zone when item is dragged over it
|
||||||
|
['dragenter', 'dragover'].forEach(eventName => {
|
||||||
|
fileDropZone.addEventListener(eventName, highlight, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
['dragleave', 'drop'].forEach(eventName => {
|
||||||
|
fileDropZone.addEventListener(eventName, unhighlight, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
function highlight(e) {
|
||||||
|
fileDropZone.classList.add('drag-over');
|
||||||
|
}
|
||||||
|
|
||||||
|
function unhighlight(e) {
|
||||||
|
fileDropZone.classList.remove('drag-over');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle dropped files
|
||||||
|
fileDropZone.addEventListener('drop', handleFileDrop, false);
|
||||||
|
|
||||||
|
function handleFileDrop(e) {
|
||||||
|
const dt = e.dataTransfer;
|
||||||
|
const files = dt.files;
|
||||||
|
if (files.length > 0) {
|
||||||
|
handleFile(files[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle file selection via click
|
||||||
|
fileDropZone.addEventListener('click', () => fileInput.click());
|
||||||
|
fileInput.addEventListener('change', (e) => {
|
||||||
|
if (e.target.files.length > 0) {
|
||||||
|
handleFile(e.target.files[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Main file handler
|
||||||
|
async function handleFile(file) {
|
||||||
|
// Show loading
|
||||||
|
loading.classList.add('active');
|
||||||
|
metadataContainer.classList.remove('active');
|
||||||
|
|
||||||
|
// Display basic file info
|
||||||
|
const basicInfo = {
|
||||||
|
name: file.name,
|
||||||
|
size: formatFileSize(file.size),
|
||||||
|
type: file.type,
|
||||||
|
lastModified: new Date(file.lastModified).toLocaleString('de-DE')
|
||||||
|
};
|
||||||
|
|
||||||
|
// Check if it's an image or video
|
||||||
|
if (file.type.startsWith('image/')) {
|
||||||
|
await processImage(file, basicInfo);
|
||||||
|
} else if (file.type.startsWith('video/')) {
|
||||||
|
await processVideo(file, basicInfo);
|
||||||
|
} else {
|
||||||
|
alert('Bitte wählen Sie eine Bild- oder Videodatei aus.');
|
||||||
|
loading.classList.remove('active');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Process image files
|
||||||
|
async function processImage(file, basicInfo) {
|
||||||
|
try {
|
||||||
|
// Read file as ArrayBuffer for ExifReader
|
||||||
|
const arrayBuffer = await file.arrayBuffer();
|
||||||
|
|
||||||
|
// Extract EXIF data
|
||||||
|
let exifData = {};
|
||||||
|
try {
|
||||||
|
const tags = ExifReader.load(arrayBuffer);
|
||||||
|
exifData = tags;
|
||||||
|
} catch (error) {
|
||||||
|
console.log('Keine EXIF-Daten gefunden oder Fehler beim Lesen:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create object URL for preview
|
||||||
|
const objectUrl = URL.createObjectURL(file);
|
||||||
|
|
||||||
|
// Get image dimensions
|
||||||
|
const img = new Image();
|
||||||
|
img.onload = function() {
|
||||||
|
basicInfo.width = this.width + ' px';
|
||||||
|
basicInfo.height = this.height + ' px';
|
||||||
|
basicInfo.aspect = (this.width / this.height).toFixed(2);
|
||||||
|
|
||||||
|
displayImageMetadata(basicInfo, exifData, objectUrl);
|
||||||
|
URL.revokeObjectURL(objectUrl);
|
||||||
|
};
|
||||||
|
img.src = objectUrl;
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Verarbeiten der Bilddatei:', error);
|
||||||
|
alert('Fehler beim Lesen der Metadaten.');
|
||||||
|
loading.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Process video files
|
||||||
|
async function processVideo(file, basicInfo) {
|
||||||
|
try {
|
||||||
|
// Create video element to extract basic metadata
|
||||||
|
const video = document.createElement('video');
|
||||||
|
const objectUrl = URL.createObjectURL(file);
|
||||||
|
|
||||||
|
video.preload = 'metadata';
|
||||||
|
video.onloadedmetadata = function() {
|
||||||
|
basicInfo.duration = formatDuration(video.duration);
|
||||||
|
basicInfo.width = video.videoWidth + ' px';
|
||||||
|
basicInfo.height = video.videoHeight + ' px';
|
||||||
|
basicInfo.aspect = (video.videoWidth / video.videoHeight).toFixed(2);
|
||||||
|
|
||||||
|
displayVideoMetadata(basicInfo, objectUrl);
|
||||||
|
URL.revokeObjectURL(objectUrl);
|
||||||
|
};
|
||||||
|
|
||||||
|
video.src = objectUrl;
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Verarbeiten der Videodatei:', error);
|
||||||
|
alert('Fehler beim Lesen der Video-Metadaten.');
|
||||||
|
loading.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Display image metadata
|
||||||
|
function displayImageMetadata(basicInfo, exifData, previewUrl) {
|
||||||
|
// Store data for report generation
|
||||||
|
currentFileData = basicInfo;
|
||||||
|
currentPreviewUrl = previewUrl;
|
||||||
|
currentMetadata = {};
|
||||||
|
// Update file info
|
||||||
|
fileInfo.innerHTML = `
|
||||||
|
<h3>${basicInfo.name}</h3>
|
||||||
|
<div class="basic-info">
|
||||||
|
<span class="label">Größe:</span><span>${basicInfo.size}</span>
|
||||||
|
<span class="label">Typ:</span><span>${basicInfo.type}</span>
|
||||||
|
<span class="label">Zuletzt geändert:</span><span>${basicInfo.lastModified}</span>
|
||||||
|
<span class="label">Auflösung:</span><span>${basicInfo.width} × ${basicInfo.height}</span>
|
||||||
|
<span class="label">Seitenverhältnis:</span><span>${basicInfo.aspect}:1</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Show preview
|
||||||
|
imagePreview.innerHTML = `<img src="${previewUrl}" alt="Vorschau">`;
|
||||||
|
|
||||||
|
// Organize metadata into sections
|
||||||
|
const sections = {
|
||||||
|
exif: {
|
||||||
|
title: 'EXIF-Daten',
|
||||||
|
data: {},
|
||||||
|
icon: '📷'
|
||||||
|
},
|
||||||
|
camera: {
|
||||||
|
title: 'Kamera-Informationen',
|
||||||
|
data: {},
|
||||||
|
icon: '📸'
|
||||||
|
},
|
||||||
|
location: {
|
||||||
|
title: 'Standort-Informationen',
|
||||||
|
data: {},
|
||||||
|
icon: '📍'
|
||||||
|
},
|
||||||
|
technical: {
|
||||||
|
title: 'Technische Details',
|
||||||
|
data: {},
|
||||||
|
icon: '⚙️'
|
||||||
|
},
|
||||||
|
other: {
|
||||||
|
title: 'Weitere Metadaten',
|
||||||
|
data: {},
|
||||||
|
icon: '📋'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Process EXIF data and categorize
|
||||||
|
if (exifData) {
|
||||||
|
for (const [key, value] of Object.entries(exifData)) {
|
||||||
|
if (value && value.description !== undefined) {
|
||||||
|
const desc = value.description;
|
||||||
|
|
||||||
|
// Categorize metadata
|
||||||
|
if (key.includes('Make') || key.includes('Model') || key.includes('Lens')) {
|
||||||
|
sections.camera.data[key] = desc;
|
||||||
|
} else if (key.includes('GPS')) {
|
||||||
|
sections.location.data[key] = desc;
|
||||||
|
} else if (key.includes('DateTime') || key.includes('Date')) {
|
||||||
|
sections.exif.data[key] = desc;
|
||||||
|
} else if (key.includes('ISO') || key.includes('Exposure') || key.includes('Aperture') ||
|
||||||
|
key.includes('FocalLength') || key.includes('Flash')) {
|
||||||
|
sections.technical.data[key] = desc;
|
||||||
|
} else {
|
||||||
|
sections.other.data[key] = desc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build metadata display
|
||||||
|
let metadataHTML = '';
|
||||||
|
|
||||||
|
for (const [sectionKey, section] of Object.entries(sections)) {
|
||||||
|
if (Object.keys(section.data).length > 0) {
|
||||||
|
metadataHTML += createMetadataSection(section.title, section.data, section.icon);
|
||||||
|
// Store for report
|
||||||
|
currentMetadata[section.title] = section.data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (metadataHTML === '') {
|
||||||
|
metadataHTML = '<div class="no-metadata">Keine zusätzlichen Metadaten gefunden.</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
metadataContent.innerHTML = metadataHTML;
|
||||||
|
|
||||||
|
// Add click handlers for collapsible sections
|
||||||
|
addSectionToggleHandlers();
|
||||||
|
|
||||||
|
// Hide loading and show metadata
|
||||||
|
loading.classList.remove('active');
|
||||||
|
metadataContainer.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Display video metadata
|
||||||
|
function displayVideoMetadata(basicInfo, previewUrl) {
|
||||||
|
// Store data for report generation
|
||||||
|
currentFileData = basicInfo;
|
||||||
|
currentPreviewUrl = previewUrl;
|
||||||
|
currentMetadata = {};
|
||||||
|
// Update file info
|
||||||
|
fileInfo.innerHTML = `
|
||||||
|
<h3>${basicInfo.name}</h3>
|
||||||
|
<div class="basic-info">
|
||||||
|
<span class="label">Größe:</span><span>${basicInfo.size}</span>
|
||||||
|
<span class="label">Typ:</span><span>${basicInfo.type}</span>
|
||||||
|
<span class="label">Zuletzt geändert:</span><span>${basicInfo.lastModified}</span>
|
||||||
|
<span class="label">Dauer:</span><span>${basicInfo.duration}</span>
|
||||||
|
<span class="label">Auflösung:</span><span>${basicInfo.width} × ${basicInfo.height}</span>
|
||||||
|
<span class="label">Seitenverhältnis:</span><span>${basicInfo.aspect}:1</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Show video preview (poster frame)
|
||||||
|
imagePreview.innerHTML = `
|
||||||
|
<video controls style="max-width: 300px; max-height: 300px; border-radius: 8px;">
|
||||||
|
<source src="${previewUrl}" type="${basicInfo.type}">
|
||||||
|
Ihr Browser unterstützt das Video-Tag nicht.
|
||||||
|
</video>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// For videos, we have limited metadata access from browser
|
||||||
|
const videoMetadata = {
|
||||||
|
'Format': basicInfo.type,
|
||||||
|
'Dauer': basicInfo.duration,
|
||||||
|
'Auflösung': `${basicInfo.width} × ${basicInfo.height}`,
|
||||||
|
'Seitenverhältnis': `${basicInfo.aspect}:1`,
|
||||||
|
'Dateigröße': basicInfo.size
|
||||||
|
};
|
||||||
|
|
||||||
|
let metadataHTML = createMetadataSection('Video-Informationen', videoMetadata, '🎬', 'video');
|
||||||
|
metadataHTML += '<div class="no-metadata">Erweiterte Video-Metadaten können im Browser nur begrenzt ausgelesen werden.</div>';
|
||||||
|
|
||||||
|
// Store for report
|
||||||
|
currentMetadata['Video-Informationen'] = videoMetadata;
|
||||||
|
|
||||||
|
metadataContent.innerHTML = metadataHTML;
|
||||||
|
|
||||||
|
// Add click handlers for collapsible sections
|
||||||
|
addSectionToggleHandlers();
|
||||||
|
|
||||||
|
// Hide loading and show metadata
|
||||||
|
loading.classList.remove('active');
|
||||||
|
metadataContainer.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create metadata section HTML
|
||||||
|
function createMetadataSection(title, data, icon = '📋', cssClass = '') {
|
||||||
|
let html = `
|
||||||
|
<div class="metadata-section ${cssClass}">
|
||||||
|
<div class="metadata-section-header ${cssClass}">
|
||||||
|
<span>${icon} ${title}</span>
|
||||||
|
<span class="toggle-icon">▼</span>
|
||||||
|
</div>
|
||||||
|
<div class="metadata-content">
|
||||||
|
<table class="metadata-table">
|
||||||
|
`;
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries(data)) {
|
||||||
|
const formattedKey = formatMetadataKey(key);
|
||||||
|
const formattedValue = formatMetadataValue(key, value);
|
||||||
|
html += `
|
||||||
|
<tr>
|
||||||
|
<td>${formattedKey}</td>
|
||||||
|
<td>${formattedValue}</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
html += `
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Device model mapping for cameras
|
||||||
|
const deviceModelMapping = {
|
||||||
|
// Apple iPhone models
|
||||||
|
'iPhone 15 Pro Max': 'Apple iPhone 15 Pro Max',
|
||||||
|
'iPhone 15 Pro': 'Apple iPhone 15 Pro',
|
||||||
|
'iPhone 15 Plus': 'Apple iPhone 15 Plus',
|
||||||
|
'iPhone 15': 'Apple iPhone 15',
|
||||||
|
'iPhone 14 Pro Max': 'Apple iPhone 14 Pro Max',
|
||||||
|
'iPhone 14 Pro': 'Apple iPhone 14 Pro',
|
||||||
|
'iPhone 14 Plus': 'Apple iPhone 14 Plus',
|
||||||
|
'iPhone 14': 'Apple iPhone 14',
|
||||||
|
'iPhone 13 Pro Max': 'Apple iPhone 13 Pro Max',
|
||||||
|
'iPhone 13 Pro': 'Apple iPhone 13 Pro',
|
||||||
|
'iPhone 13': 'Apple iPhone 13',
|
||||||
|
'iPhone 13 mini': 'Apple iPhone 13 mini',
|
||||||
|
'iPhone 12 Pro Max': 'Apple iPhone 12 Pro Max',
|
||||||
|
'iPhone 12 Pro': 'Apple iPhone 12 Pro',
|
||||||
|
'iPhone 12': 'Apple iPhone 12',
|
||||||
|
'iPhone 12 mini': 'Apple iPhone 12 mini',
|
||||||
|
'iPhone SE (3rd generation)': 'Apple iPhone SE (2022)',
|
||||||
|
'iPhone SE (2nd generation)': 'Apple iPhone SE (2020)',
|
||||||
|
'iPhone 11 Pro Max': 'Apple iPhone 11 Pro Max',
|
||||||
|
'iPhone 11 Pro': 'Apple iPhone 11 Pro',
|
||||||
|
'iPhone 11': 'Apple iPhone 11',
|
||||||
|
'iPhone XS Max': 'Apple iPhone XS Max',
|
||||||
|
'iPhone XS': 'Apple iPhone XS',
|
||||||
|
'iPhone XR': 'Apple iPhone XR',
|
||||||
|
'iPhone X': 'Apple iPhone X',
|
||||||
|
'iPhone 8 Plus': 'Apple iPhone 8 Plus',
|
||||||
|
'iPhone 8': 'Apple iPhone 8',
|
||||||
|
'iPhone 7 Plus': 'Apple iPhone 7 Plus',
|
||||||
|
'iPhone 7': 'Apple iPhone 7',
|
||||||
|
'iPhone 6s Plus': 'Apple iPhone 6s Plus',
|
||||||
|
'iPhone 6s': 'Apple iPhone 6s',
|
||||||
|
'iPhone 6 Plus': 'Apple iPhone 6 Plus',
|
||||||
|
'iPhone 6': 'Apple iPhone 6',
|
||||||
|
|
||||||
|
// Apple iPad models
|
||||||
|
'iPad Pro (12.9-inch) (6th generation)': 'Apple iPad Pro 12.9" (2022)',
|
||||||
|
'iPad Pro (11-inch) (4th generation)': 'Apple iPad Pro 11" (2022)',
|
||||||
|
'iPad Air (5th generation)': 'Apple iPad Air (2022)',
|
||||||
|
'iPad (10th generation)': 'Apple iPad (2022)',
|
||||||
|
'iPad mini (6th generation)': 'Apple iPad mini (2021)',
|
||||||
|
|
||||||
|
// Samsung Galaxy models
|
||||||
|
'SM-S928B': 'Samsung Galaxy S24 Ultra',
|
||||||
|
'SM-S926B': 'Samsung Galaxy S24+',
|
||||||
|
'SM-S921B': 'Samsung Galaxy S24',
|
||||||
|
'SM-S918B': 'Samsung Galaxy S23 Ultra',
|
||||||
|
'SM-S916B': 'Samsung Galaxy S23+',
|
||||||
|
'SM-S911B': 'Samsung Galaxy S23',
|
||||||
|
'SM-S908B': 'Samsung Galaxy S22 Ultra',
|
||||||
|
'SM-S906B': 'Samsung Galaxy S22+',
|
||||||
|
'SM-S901B': 'Samsung Galaxy S22',
|
||||||
|
'SM-G998B': 'Samsung Galaxy S21 Ultra',
|
||||||
|
'SM-G996B': 'Samsung Galaxy S21+',
|
||||||
|
'SM-G991B': 'Samsung Galaxy S21',
|
||||||
|
'SM-G988B': 'Samsung Galaxy S20 Ultra',
|
||||||
|
'SM-G986B': 'Samsung Galaxy S20+',
|
||||||
|
'SM-G981B': 'Samsung Galaxy S20',
|
||||||
|
'SM-A546B': 'Samsung Galaxy A54',
|
||||||
|
'SM-A346B': 'Samsung Galaxy A34',
|
||||||
|
'SM-A536B': 'Samsung Galaxy A53',
|
||||||
|
'SM-A336B': 'Samsung Galaxy A33',
|
||||||
|
'SM-A526B': 'Samsung Galaxy A52',
|
||||||
|
'SM-A326B': 'Samsung Galaxy A32',
|
||||||
|
|
||||||
|
// Google Pixel models
|
||||||
|
'Pixel 8 Pro': 'Google Pixel 8 Pro',
|
||||||
|
'Pixel 8': 'Google Pixel 8',
|
||||||
|
'Pixel 7a': 'Google Pixel 7a',
|
||||||
|
'Pixel 7 Pro': 'Google Pixel 7 Pro',
|
||||||
|
'Pixel 7': 'Google Pixel 7',
|
||||||
|
'Pixel 6a': 'Google Pixel 6a',
|
||||||
|
'Pixel 6 Pro': 'Google Pixel 6 Pro',
|
||||||
|
'Pixel 6': 'Google Pixel 6',
|
||||||
|
'Pixel 5a': 'Google Pixel 5a',
|
||||||
|
'Pixel 5': 'Google Pixel 5',
|
||||||
|
'Pixel 4a': 'Google Pixel 4a',
|
||||||
|
'Pixel 4 XL': 'Google Pixel 4 XL',
|
||||||
|
'Pixel 4': 'Google Pixel 4',
|
||||||
|
|
||||||
|
// Xiaomi models
|
||||||
|
'Mi 13 Ultra': 'Xiaomi Mi 13 Ultra',
|
||||||
|
'Mi 13 Pro': 'Xiaomi Mi 13 Pro',
|
||||||
|
'Mi 13': 'Xiaomi Mi 13',
|
||||||
|
'Mi 12 Ultra': 'Xiaomi Mi 12 Ultra',
|
||||||
|
'Mi 12 Pro': 'Xiaomi Mi 12 Pro',
|
||||||
|
'Mi 12': 'Xiaomi Mi 12',
|
||||||
|
'Mi 11 Ultra': 'Xiaomi Mi 11 Ultra',
|
||||||
|
'Mi 11 Pro': 'Xiaomi Mi 11 Pro',
|
||||||
|
'Mi 11': 'Xiaomi Mi 11',
|
||||||
|
'Redmi Note 13 Pro+': 'Xiaomi Redmi Note 13 Pro+',
|
||||||
|
'Redmi Note 13 Pro': 'Xiaomi Redmi Note 13 Pro',
|
||||||
|
'Redmi Note 12 Pro+': 'Xiaomi Redmi Note 12 Pro+',
|
||||||
|
'Redmi Note 12 Pro': 'Xiaomi Redmi Note 12 Pro',
|
||||||
|
'POCO X6 Pro': 'Xiaomi POCO X6 Pro',
|
||||||
|
'POCO F5': 'Xiaomi POCO F5',
|
||||||
|
|
||||||
|
// OnePlus models
|
||||||
|
'LE2125': 'OnePlus 9 Pro',
|
||||||
|
'LE2123': 'OnePlus 9',
|
||||||
|
'IN2023': 'OnePlus 8 Pro',
|
||||||
|
'IN2013': 'OnePlus 8',
|
||||||
|
'HD1913': 'OnePlus 7T Pro',
|
||||||
|
'HD1903': 'OnePlus 7T',
|
||||||
|
'GM1913': 'OnePlus 7 Pro',
|
||||||
|
'GM1903': 'OnePlus 7',
|
||||||
|
'CPH2423': 'OnePlus 11',
|
||||||
|
'CPH2449': 'OnePlus 11R',
|
||||||
|
'CPH2411': 'OnePlus 10 Pro',
|
||||||
|
'CPH2413': 'OnePlus 10T',
|
||||||
|
|
||||||
|
// Huawei models (newer models might not have Google services)
|
||||||
|
'VOG-L29': 'Huawei P30 Pro',
|
||||||
|
'ELE-L29': 'Huawei P30',
|
||||||
|
'CLT-L29': 'Huawei P20 Pro',
|
||||||
|
'EML-L29': 'Huawei P20',
|
||||||
|
'LYA-L29': 'Huawei Mate 20 Pro',
|
||||||
|
'HMA-L29': 'Huawei Mate 20',
|
||||||
|
'NOH-NX9': 'Huawei Mate 60 Pro',
|
||||||
|
'BRA-NX9': 'Huawei Mate 60',
|
||||||
|
|
||||||
|
// Sony models
|
||||||
|
'XQ-DQ54': 'Sony Xperia 1 V',
|
||||||
|
'XQ-CQ54': 'Sony Xperia 5 V',
|
||||||
|
'XQ-BQ52': 'Sony Xperia 1 IV',
|
||||||
|
'XQ-AS52': 'Sony Xperia 5 IV',
|
||||||
|
'XQ-BC52': 'Sony Xperia 1 III',
|
||||||
|
'XQ-AS62': 'Sony Xperia 5 III',
|
||||||
|
|
||||||
|
// OPPO models
|
||||||
|
'CPH2437': 'OPPO Find X6 Pro',
|
||||||
|
'CPH2305': 'OPPO Find X5 Pro',
|
||||||
|
'CPH2173': 'OPPO Find X3 Pro',
|
||||||
|
'CPH2487': 'OPPO Reno 11 Pro',
|
||||||
|
'CPH2481': 'OPPO Reno 10 Pro+',
|
||||||
|
|
||||||
|
// Vivo models
|
||||||
|
'V2302': 'Vivo X100 Pro',
|
||||||
|
'V2250': 'Vivo X90 Pro',
|
||||||
|
'V2145': 'Vivo X80 Pro',
|
||||||
|
'V2183A': 'Vivo X70 Pro+',
|
||||||
|
|
||||||
|
// Realme models
|
||||||
|
'RMX3771': 'Realme GT 5',
|
||||||
|
'RMX3708': 'Realme GT 3',
|
||||||
|
'RMX3300': 'Realme GT 2 Pro',
|
||||||
|
'RMX3360': 'Realme GT Neo 3',
|
||||||
|
|
||||||
|
// Nothing models
|
||||||
|
'A063': 'Nothing Phone (2)',
|
||||||
|
'A013': 'Nothing Phone (1)',
|
||||||
|
|
||||||
|
// ASUS models
|
||||||
|
'ASUS_AI2302': 'ASUS Zenfone 10',
|
||||||
|
'ASUS_AI2202': 'ASUS Zenfone 9',
|
||||||
|
'ASUS_I006D': 'ASUS ROG Phone 7',
|
||||||
|
'ASUS_I005D': 'ASUS ROG Phone 6'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to get device name from model
|
||||||
|
function getDeviceFromModel(model) {
|
||||||
|
if (!model) return null;
|
||||||
|
|
||||||
|
// Direct match
|
||||||
|
if (deviceModelMapping[model]) {
|
||||||
|
return deviceModelMapping[model];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Try to match partial model names
|
||||||
|
for (const [key, value] of Object.entries(deviceModelMapping)) {
|
||||||
|
if (model.includes(key) || key.includes(model)) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if it's a generic Apple device
|
||||||
|
if (model.includes('iPhone') || model.includes('iPad')) {
|
||||||
|
return model; // Return as is, it's already descriptive
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format metadata keys for display
|
||||||
|
function formatMetadataKey(key) {
|
||||||
|
// Remove common prefixes and format
|
||||||
|
key = key.replace(/^(EXIF|GPS|IPTC|XMP)/, '');
|
||||||
|
|
||||||
|
// Add spaces before capital letters
|
||||||
|
key = key.replace(/([A-Z])/g, ' $1').trim();
|
||||||
|
|
||||||
|
// Special formatting for known keys
|
||||||
|
const keyMap = {
|
||||||
|
'Make': 'Kamera-Hersteller',
|
||||||
|
'Model': 'Kamera-Modell',
|
||||||
|
'DateTime Original': 'Aufnahmedatum',
|
||||||
|
'Exposure Time': 'Belichtungszeit',
|
||||||
|
'F Number': 'Blende',
|
||||||
|
'ISO Speed Ratings': 'ISO-Wert',
|
||||||
|
'Focal Length': 'Brennweite',
|
||||||
|
'Flash': 'Blitz',
|
||||||
|
'GPS Latitude': 'Breitengrad',
|
||||||
|
'GPS Longitude': 'Längengrad',
|
||||||
|
'GPS Altitude': 'Höhe',
|
||||||
|
'Lens Model': 'Objektiv',
|
||||||
|
'White Balance': 'Weißabgleich',
|
||||||
|
'Exposure Mode': 'Belichtungsmodus',
|
||||||
|
'Color Space': 'Farbraum'
|
||||||
|
};
|
||||||
|
|
||||||
|
return keyMap[key.trim()] || key;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format metadata values for display
|
||||||
|
function formatMetadataValue(key, value) {
|
||||||
|
// Handle camera model with device mapping
|
||||||
|
if (key.includes('Model') && !key.includes('Lens')) {
|
||||||
|
const device = getDeviceFromModel(value);
|
||||||
|
if (device && device !== value) {
|
||||||
|
return `${value} (${device})`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format GPS coordinates
|
||||||
|
if (key.includes('GPS') && (key.includes('Latitude') || key.includes('Longitude'))) {
|
||||||
|
if (typeof value === 'number') {
|
||||||
|
return value.toFixed(6) + '°';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format altitude
|
||||||
|
if (key.includes('Altitude') && typeof value === 'number') {
|
||||||
|
return value.toFixed(2) + ' m';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format focal length
|
||||||
|
if (key.includes('FocalLength') && typeof value === 'number') {
|
||||||
|
return value + ' mm';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format dates
|
||||||
|
if (key.includes('Date') && value.includes(':')) {
|
||||||
|
try {
|
||||||
|
const date = new Date(value.replace(/^(\d{4}):(\d{2}):(\d{2})/, '$1-$2-$3'));
|
||||||
|
if (!isNaN(date)) {
|
||||||
|
return date.toLocaleString('de-DE');
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add toggle handlers for collapsible sections
|
||||||
|
function addSectionToggleHandlers() {
|
||||||
|
const headers = document.querySelectorAll('.metadata-section-header');
|
||||||
|
headers.forEach(header => {
|
||||||
|
header.addEventListener('click', function() {
|
||||||
|
const section = this.parentElement;
|
||||||
|
section.classList.toggle('collapsed');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear metadata and reset
|
||||||
|
function clearMetadata() {
|
||||||
|
metadataContainer.classList.remove('active');
|
||||||
|
fileInput.value = '';
|
||||||
|
imagePreview.innerHTML = '';
|
||||||
|
metadataContent.innerHTML = '';
|
||||||
|
|
||||||
|
// Clear stored data
|
||||||
|
currentFileData = null;
|
||||||
|
currentMetadata = null;
|
||||||
|
currentPreviewUrl = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utility functions
|
||||||
|
function formatFileSize(bytes) {
|
||||||
|
if (bytes === 0) return '0 Bytes';
|
||||||
|
const k = 1024;
|
||||||
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDuration(seconds) {
|
||||||
|
const h = Math.floor(seconds / 3600);
|
||||||
|
const m = Math.floor((seconds % 3600) / 60);
|
||||||
|
const s = Math.floor(seconds % 60);
|
||||||
|
|
||||||
|
if (h > 0) {
|
||||||
|
return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
return `${m}:${s.toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store current file data for report generation
|
||||||
|
let currentFileData = null;
|
||||||
|
let currentMetadata = null;
|
||||||
|
let currentPreviewUrl = null;
|
||||||
|
|
||||||
|
// Generate PDF report
|
||||||
|
async function generateReport() {
|
||||||
|
if (!currentFileData) {
|
||||||
|
alert('Keine Datei zum Erstellen eines Berichts vorhanden.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Create loading indicator
|
||||||
|
const originalText = document.getElementById('reportBtn').textContent;
|
||||||
|
document.getElementById('reportBtn').textContent = 'Bericht wird erstellt...';
|
||||||
|
document.getElementById('reportBtn').disabled = true;
|
||||||
|
|
||||||
|
// Import jsPDF and AutoTable dynamically
|
||||||
|
const jsPDFScript = document.createElement('script');
|
||||||
|
jsPDFScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
|
||||||
|
document.head.appendChild(jsPDFScript);
|
||||||
|
|
||||||
|
jsPDFScript.onload = async () => {
|
||||||
|
// Load AutoTable plugin
|
||||||
|
const autoTableScript = document.createElement('script');
|
||||||
|
autoTableScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.1/jspdf.plugin.autotable.min.js';
|
||||||
|
document.head.appendChild(autoTableScript);
|
||||||
|
|
||||||
|
autoTableScript.onload = async () => {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF();
|
||||||
|
|
||||||
|
// Set fonts
|
||||||
|
doc.setFont('helvetica');
|
||||||
|
|
||||||
|
// Add header
|
||||||
|
doc.setFontSize(20);
|
||||||
|
doc.setTextColor(35, 45, 83); // Primary color
|
||||||
|
doc.text('Metadaten-Bericht', 105, 20, { align: 'center' });
|
||||||
|
|
||||||
|
// Add generation date
|
||||||
|
doc.setFontSize(10);
|
||||||
|
doc.setTextColor(100);
|
||||||
|
const now = new Date();
|
||||||
|
doc.text(`Erstellt am: ${now.toLocaleString('de-DE')}`, 105, 30, { align: 'center' });
|
||||||
|
|
||||||
|
// Add file info section
|
||||||
|
let yPosition = 50;
|
||||||
|
doc.setFontSize(14);
|
||||||
|
doc.setTextColor(35, 45, 83);
|
||||||
|
doc.text('Datei-Informationen', 20, yPosition);
|
||||||
|
|
||||||
|
yPosition += 5;
|
||||||
|
|
||||||
|
// Basic file info table data
|
||||||
|
const fileInfoData = [
|
||||||
|
['Dateiname', currentFileData.name],
|
||||||
|
['Größe', currentFileData.size],
|
||||||
|
['Typ', currentFileData.type],
|
||||||
|
['Zuletzt geändert', currentFileData.lastModified]
|
||||||
|
];
|
||||||
|
|
||||||
|
if (currentFileData.width) {
|
||||||
|
fileInfoData.push(['Auflösung', `${currentFileData.width} × ${currentFileData.height}`]);
|
||||||
|
fileInfoData.push(['Seitenverhältnis', `${currentFileData.aspect}:1`]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentFileData.duration) {
|
||||||
|
fileInfoData.push(['Dauer', currentFileData.duration]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create table for file info
|
||||||
|
doc.autoTable({
|
||||||
|
startY: yPosition,
|
||||||
|
head: [],
|
||||||
|
body: fileInfoData,
|
||||||
|
theme: 'grid',
|
||||||
|
styles: {
|
||||||
|
fontSize: 10,
|
||||||
|
cellPadding: 5
|
||||||
|
},
|
||||||
|
columnStyles: {
|
||||||
|
0: {
|
||||||
|
fontStyle: 'bold',
|
||||||
|
fillColor: [245, 245, 245],
|
||||||
|
textColor: [35, 45, 83],
|
||||||
|
cellWidth: 50
|
||||||
|
}
|
||||||
|
},
|
||||||
|
margin: { left: 20, right: 20 }
|
||||||
|
});
|
||||||
|
|
||||||
|
yPosition = doc.lastAutoTable.finalY + 10;
|
||||||
|
|
||||||
|
// Add thumbnail if it's an image
|
||||||
|
if (currentPreviewUrl && currentFileData.type.startsWith('image/')) {
|
||||||
|
try {
|
||||||
|
// Check if we have enough space on current page
|
||||||
|
const remainingSpace = doc.internal.pageSize.getHeight() - yPosition - 40;
|
||||||
|
if (remainingSpace < 100) { // If less than 100 units remaining, start new page
|
||||||
|
doc.addPage();
|
||||||
|
yPosition = 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
yPosition += 10;
|
||||||
|
doc.setFontSize(14);
|
||||||
|
doc.setTextColor(35, 45, 83);
|
||||||
|
|
||||||
|
// Center the "Vorschau" text
|
||||||
|
const pageWidth = doc.internal.pageSize.getWidth();
|
||||||
|
doc.text('Vorschau', pageWidth / 2, yPosition, { align: 'center' });
|
||||||
|
yPosition += 10;
|
||||||
|
|
||||||
|
// Get image element
|
||||||
|
const img = document.querySelector('.image-preview img');
|
||||||
|
if (img) {
|
||||||
|
// Convert image to base64 with high quality
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Use higher resolution for better quality
|
||||||
|
const maxWidth = 800;
|
||||||
|
const maxHeight = 800;
|
||||||
|
|
||||||
|
let width = img.naturalWidth;
|
||||||
|
let height = img.naturalHeight;
|
||||||
|
|
||||||
|
// Calculate aspect ratio
|
||||||
|
const ratio = Math.min(maxWidth / width, maxHeight / height);
|
||||||
|
if (ratio < 1) {
|
||||||
|
width = width * ratio;
|
||||||
|
height = height * ratio;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
|
||||||
|
// Enable image smoothing for better quality
|
||||||
|
ctx.imageSmoothingEnabled = true;
|
||||||
|
ctx.imageSmoothingQuality = 'high';
|
||||||
|
ctx.drawImage(img, 0, 0, width, height);
|
||||||
|
|
||||||
|
// Use higher quality JPEG compression
|
||||||
|
const dataUrl = canvas.toDataURL('image/jpeg', 0.95);
|
||||||
|
|
||||||
|
// Calculate display size to fit on page
|
||||||
|
const pageWidth = doc.internal.pageSize.getWidth();
|
||||||
|
const pageHeight = doc.internal.pageSize.getHeight();
|
||||||
|
const maxDisplayWidth = pageWidth - 40; // 20px margin on each side
|
||||||
|
const maxDisplayHeight = pageHeight - yPosition - 40; // Leave space for footer
|
||||||
|
|
||||||
|
// Start with desired width
|
||||||
|
let displayWidth = 80; // Smaller default size
|
||||||
|
let displayHeight = (height / width) * displayWidth;
|
||||||
|
|
||||||
|
// Check if it fits vertically, if not scale down
|
||||||
|
if (displayHeight > maxDisplayHeight) {
|
||||||
|
displayHeight = maxDisplayHeight;
|
||||||
|
displayWidth = (width / height) * displayHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if it fits horizontally, if not scale down
|
||||||
|
if (displayWidth > maxDisplayWidth) {
|
||||||
|
displayWidth = maxDisplayWidth;
|
||||||
|
displayHeight = (height / width) * displayWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Center the image horizontally
|
||||||
|
const xPosition = (pageWidth - displayWidth) / 2;
|
||||||
|
|
||||||
|
doc.addImage(dataUrl, 'JPEG', xPosition, yPosition, displayWidth, displayHeight);
|
||||||
|
yPosition += displayHeight + 10;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Hinzufügen des Thumbnails:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add metadata sections
|
||||||
|
if (currentMetadata && Object.keys(currentMetadata).length > 0) {
|
||||||
|
// Check if we need a new page
|
||||||
|
if (yPosition > 200) {
|
||||||
|
doc.addPage();
|
||||||
|
yPosition = 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.entries(currentMetadata).forEach(([section, data]) => {
|
||||||
|
if (Object.keys(data).length > 0) {
|
||||||
|
// Check if we need a new page
|
||||||
|
if (yPosition > 240) {
|
||||||
|
doc.addPage();
|
||||||
|
yPosition = 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Section header
|
||||||
|
doc.setFontSize(12);
|
||||||
|
doc.setTextColor(35, 45, 83);
|
||||||
|
doc.text(section, 20, yPosition);
|
||||||
|
yPosition += 5;
|
||||||
|
|
||||||
|
// Convert data to table format
|
||||||
|
const tableData = Object.entries(data).map(([key, value]) => {
|
||||||
|
// Format the key
|
||||||
|
const formattedKey = formatMetadataKey(key);
|
||||||
|
// Ensure value is string and not too long
|
||||||
|
const displayValue = String(value).length > 100 ? String(value).substring(0, 100) + '...' : String(value);
|
||||||
|
return [formattedKey, displayValue];
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create table for this section
|
||||||
|
doc.autoTable({
|
||||||
|
startY: yPosition,
|
||||||
|
head: [],
|
||||||
|
body: tableData,
|
||||||
|
theme: 'grid',
|
||||||
|
styles: {
|
||||||
|
fontSize: 9,
|
||||||
|
cellPadding: 3
|
||||||
|
},
|
||||||
|
columnStyles: {
|
||||||
|
0: {
|
||||||
|
fontStyle: 'bold',
|
||||||
|
fillColor: [245, 245, 245],
|
||||||
|
textColor: [35, 45, 83],
|
||||||
|
cellWidth: 60
|
||||||
|
},
|
||||||
|
1: {
|
||||||
|
cellWidth: 'auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
margin: { left: 20, right: 20 },
|
||||||
|
didDrawPage: function(data) {
|
||||||
|
// Header on new pages
|
||||||
|
if (data.pageNumber > 1) {
|
||||||
|
doc.setFontSize(12);
|
||||||
|
doc.setTextColor(35, 45, 83);
|
||||||
|
doc.text(section + ' (Fortsetzung)', 20, 15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
yPosition = doc.lastAutoTable.finalY + 10;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add footer
|
||||||
|
const pageCount = doc.internal.getNumberOfPages();
|
||||||
|
for (let i = 1; i <= pageCount; i++) {
|
||||||
|
doc.setPage(i);
|
||||||
|
doc.setFontSize(8);
|
||||||
|
doc.setTextColor(150);
|
||||||
|
doc.text(`Seite ${i} von ${pageCount}`, 105, 285, { align: 'center' });
|
||||||
|
doc.text('Metadaten-Crawler © 2025 IntelSight', 105, 290, { align: 'center' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save the PDF
|
||||||
|
doc.save(`Metadaten-Bericht_${currentFileData.name.replace(/\.[^/.]+$/, '')}_${now.getTime()}.pdf`);
|
||||||
|
|
||||||
|
// Restore button
|
||||||
|
document.getElementById('reportBtn').textContent = originalText;
|
||||||
|
document.getElementById('reportBtn').disabled = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
autoTableScript.onerror = () => {
|
||||||
|
alert('Fehler beim Laden der PDF-Tabellen-Bibliothek.');
|
||||||
|
document.getElementById('reportBtn').textContent = originalText;
|
||||||
|
document.getElementById('reportBtn').disabled = false;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
jsPDFScript.onerror = () => {
|
||||||
|
alert('Fehler beim Laden der PDF-Bibliothek.');
|
||||||
|
document.getElementById('reportBtn').textContent = originalText;
|
||||||
|
document.getElementById('reportBtn').disabled = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Erstellen des Berichts:', error);
|
||||||
|
alert('Fehler beim Erstellen des PDF-Berichts.');
|
||||||
|
document.getElementById('reportBtn').textContent = 'Bericht erstellen';
|
||||||
|
document.getElementById('reportBtn').disabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
11
build.bat
Normale Datei
11
build.bat
Normale Datei
@ -0,0 +1,11 @@
|
|||||||
|
@echo off
|
||||||
|
echo Building Metadaten-Crawler...
|
||||||
|
echo.
|
||||||
|
echo Installing dependencies...
|
||||||
|
call npm install
|
||||||
|
echo.
|
||||||
|
echo Creating Windows executable...
|
||||||
|
call npm run build-win
|
||||||
|
echo.
|
||||||
|
echo Build complete! Check the dist folder for the executable.
|
||||||
|
pause
|
||||||
22
gitea_push_debug.txt
Normale Datei
22
gitea_push_debug.txt
Normale Datei
@ -0,0 +1,22 @@
|
|||||||
|
Push Debug Info - 2025-07-10 19:11:49.841754
|
||||||
|
Repository: Metadaten-Crawler
|
||||||
|
Owner: IntelSight
|
||||||
|
Path: C:\Users\hendr\Desktop\IntelSight\Projektablage\Metadaten-Crawler
|
||||||
|
Current branch: master
|
||||||
|
Git remotes:
|
||||||
|
origin https://IntelSight_Admin:3b4a6ba1ade3f34640f3c85d2333b4a3a0627471@gitea-undso.intelsight.de/IntelSight/Metadaten-Crawler.git (fetch)
|
||||||
|
origin https://IntelSight_Admin:3b4a6ba1ade3f34640f3c85d2333b4a3a0627471@gitea-undso.intelsight.de/IntelSight/Metadaten-Crawler.git (push)
|
||||||
|
Git status before push:
|
||||||
|
Clean
|
||||||
|
Push command: git push --set-upstream origin master:main -v
|
||||||
|
Push result: Success
|
||||||
|
Push stdout:
|
||||||
|
branch 'master' set up to track 'origin/main'.
|
||||||
|
Push stderr:
|
||||||
|
POST git-receive-pack (52750 bytes)
|
||||||
|
remote: . Processing 1 references
|
||||||
|
remote: Processed 1 references in total
|
||||||
|
Pushing to https://gitea-undso.intelsight.de/IntelSight/Metadaten-Crawler.git
|
||||||
|
To https://gitea-undso.intelsight.de/IntelSight/Metadaten-Crawler.git
|
||||||
|
* [new branch] master -> main
|
||||||
|
updating local tracking ref 'refs/remotes/origin/main'
|
||||||
103
index.html
Normale Datei
103
index.html
Normale Datei
@ -0,0 +1,103 @@
|
|||||||
|
<!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>
|
||||||
131
main.js
Normale Datei
131
main.js
Normale Datei
@ -0,0 +1,131 @@
|
|||||||
|
const { app, BrowserWindow, Menu, ipcMain, nativeTheme } = require('electron');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
let mainWindow;
|
||||||
|
let isDarkMode = true;
|
||||||
|
|
||||||
|
function createWindow() {
|
||||||
|
mainWindow = new BrowserWindow({
|
||||||
|
width: 1400,
|
||||||
|
height: 900,
|
||||||
|
minWidth: 1000,
|
||||||
|
minHeight: 700,
|
||||||
|
webPreferences: {
|
||||||
|
nodeIntegration: false,
|
||||||
|
contextIsolation: true,
|
||||||
|
preload: path.join(__dirname, 'preload.js')
|
||||||
|
},
|
||||||
|
icon: path.join(__dirname, 'assets', 'icon.png'),
|
||||||
|
backgroundColor: '#000000',
|
||||||
|
resizable: true,
|
||||||
|
frame: false
|
||||||
|
});
|
||||||
|
|
||||||
|
mainWindow.loadFile('index.html');
|
||||||
|
|
||||||
|
const menu = Menu.buildFromTemplate([
|
||||||
|
{
|
||||||
|
label: 'Datei',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'Neue Datei analysieren',
|
||||||
|
accelerator: 'CmdOrCtrl+N',
|
||||||
|
click: () => mainWindow.webContents.send('new-file')
|
||||||
|
},
|
||||||
|
{ type: 'separator' },
|
||||||
|
{
|
||||||
|
label: 'Beenden',
|
||||||
|
accelerator: 'CmdOrCtrl+Q',
|
||||||
|
click: () => app.quit()
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Ansicht',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'Dark Mode',
|
||||||
|
type: 'checkbox',
|
||||||
|
checked: isDarkMode,
|
||||||
|
click: (menuItem) => {
|
||||||
|
isDarkMode = menuItem.checked;
|
||||||
|
mainWindow.webContents.send('toggle-theme', isDarkMode);
|
||||||
|
nativeTheme.themeSource = isDarkMode ? 'dark' : 'light';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ type: 'separator' },
|
||||||
|
{
|
||||||
|
label: 'Vollbild',
|
||||||
|
accelerator: 'F11',
|
||||||
|
click: () => {
|
||||||
|
mainWindow.setFullScreen(!mainWindow.isFullScreen());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Entwicklertools',
|
||||||
|
accelerator: 'F12',
|
||||||
|
click: () => mainWindow.webContents.toggleDevTools()
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Hilfe',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'Über Metadaten-Crawler',
|
||||||
|
click: () => {
|
||||||
|
const { dialog } = require('electron');
|
||||||
|
dialog.showMessageBox(mainWindow, {
|
||||||
|
type: 'info',
|
||||||
|
title: 'Über Metadaten-Crawler',
|
||||||
|
message: 'Metadaten-Crawler (MC)',
|
||||||
|
detail: 'Version 1.0.0\n\nEin professionelles Tool zur Extraktion von Metadaten aus Bild- und Videodateien.\n\n© 2025 IntelSight',
|
||||||
|
buttons: ['OK']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
Menu.setApplicationMenu(menu);
|
||||||
|
|
||||||
|
mainWindow.on('closed', () => {
|
||||||
|
mainWindow = null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
app.whenReady().then(() => {
|
||||||
|
createWindow();
|
||||||
|
|
||||||
|
app.on('activate', () => {
|
||||||
|
if (BrowserWindow.getAllWindows().length === 0) {
|
||||||
|
createWindow();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.on('window-all-closed', () => {
|
||||||
|
if (process.platform !== 'darwin') {
|
||||||
|
app.quit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// IPC handlers
|
||||||
|
ipcMain.handle('get-theme', () => isDarkMode);
|
||||||
|
|
||||||
|
ipcMain.on('minimize-window', () => {
|
||||||
|
mainWindow.minimize();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.on('maximize-window', () => {
|
||||||
|
if (mainWindow.isMaximized()) {
|
||||||
|
mainWindow.unmaximize();
|
||||||
|
} else {
|
||||||
|
mainWindow.maximize();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.on('close-window', () => {
|
||||||
|
mainWindow.close();
|
||||||
|
});
|
||||||
202
main.py
Normale Datei
202
main.py
Normale Datei
@ -0,0 +1,202 @@
|
|||||||
|
#!/usr/bin/env python3
|
||||||
|
"""
|
||||||
|
Metadaten-Crawler Launcher
|
||||||
|
==========================
|
||||||
|
Startet die Metadaten-Crawler Electron-Anwendung.
|
||||||
|
"""
|
||||||
|
|
||||||
|
import os
|
||||||
|
import sys
|
||||||
|
import subprocess
|
||||||
|
import platform
|
||||||
|
from pathlib import Path
|
||||||
|
|
||||||
|
|
||||||
|
class MetadatenCrawlerLauncher:
|
||||||
|
def __init__(self):
|
||||||
|
self.app_dir = Path(__file__).parent.absolute()
|
||||||
|
self.system = platform.system()
|
||||||
|
|
||||||
|
def check_node_installed(self):
|
||||||
|
"""Prüft ob Node.js installiert ist"""
|
||||||
|
try:
|
||||||
|
result = subprocess.run(['node', '--version'],
|
||||||
|
capture_output=True,
|
||||||
|
text=True)
|
||||||
|
if result.returncode == 0:
|
||||||
|
print(f"✓ Node.js gefunden: {result.stdout.strip()}")
|
||||||
|
return True
|
||||||
|
except FileNotFoundError:
|
||||||
|
pass
|
||||||
|
|
||||||
|
print("✗ Node.js ist nicht installiert!")
|
||||||
|
print(" Bitte installieren Sie Node.js von: https://nodejs.org/")
|
||||||
|
return False
|
||||||
|
|
||||||
|
def check_dependencies(self):
|
||||||
|
"""Prüft ob npm Pakete installiert sind"""
|
||||||
|
node_modules = self.app_dir / 'node_modules'
|
||||||
|
if not node_modules.exists():
|
||||||
|
print("⚠ Dependencies nicht gefunden. Installiere npm Pakete...")
|
||||||
|
return self.install_dependencies()
|
||||||
|
print("✓ Dependencies gefunden")
|
||||||
|
return True
|
||||||
|
|
||||||
|
def install_dependencies(self):
|
||||||
|
"""Installiert npm Dependencies"""
|
||||||
|
try:
|
||||||
|
print(" Führe 'npm install' aus...")
|
||||||
|
result = subprocess.run(['npm', 'install'],
|
||||||
|
cwd=self.app_dir,
|
||||||
|
capture_output=True,
|
||||||
|
text=True)
|
||||||
|
if result.returncode == 0:
|
||||||
|
print("✓ Dependencies erfolgreich installiert")
|
||||||
|
return True
|
||||||
|
else:
|
||||||
|
print(f"✗ Fehler bei der Installation: {result.stderr}")
|
||||||
|
return False
|
||||||
|
except Exception as e:
|
||||||
|
print(f"✗ Fehler: {str(e)}")
|
||||||
|
return False
|
||||||
|
|
||||||
|
def check_executable(self):
|
||||||
|
"""Prüft ob eine ausführbare Datei existiert"""
|
||||||
|
if self.system == "Windows":
|
||||||
|
exe_path = self.app_dir / 'dist' / 'Metadaten-Crawler.exe'
|
||||||
|
if exe_path.exists():
|
||||||
|
return str(exe_path)
|
||||||
|
elif self.system == "Darwin": # macOS
|
||||||
|
app_path = self.app_dir / 'dist' / 'Metadaten-Crawler.app'
|
||||||
|
if app_path.exists():
|
||||||
|
return str(app_path)
|
||||||
|
elif self.system == "Linux":
|
||||||
|
app_path = self.app_dir / 'dist' / 'Metadaten-Crawler'
|
||||||
|
if app_path.exists():
|
||||||
|
return str(app_path)
|
||||||
|
return None
|
||||||
|
|
||||||
|
def start_development(self):
|
||||||
|
"""Startet die Anwendung im Entwicklungsmodus"""
|
||||||
|
print("\n🚀 Starte Metadaten-Crawler im Entwicklungsmodus...")
|
||||||
|
try:
|
||||||
|
subprocess.run(['npm', 'start'], cwd=self.app_dir)
|
||||||
|
except KeyboardInterrupt:
|
||||||
|
print("\n\nAnwendung beendet.")
|
||||||
|
except Exception as e:
|
||||||
|
print(f"✗ Fehler beim Starten: {str(e)}")
|
||||||
|
return False
|
||||||
|
return True
|
||||||
|
|
||||||
|
def start_executable(self, exe_path):
|
||||||
|
"""Startet die kompilierte Anwendung"""
|
||||||
|
print(f"\n🚀 Starte Metadaten-Crawler von: {exe_path}")
|
||||||
|
try:
|
||||||
|
if self.system == "Windows":
|
||||||
|
subprocess.run([exe_path])
|
||||||
|
elif self.system == "Darwin":
|
||||||
|
subprocess.run(['open', exe_path])
|
||||||
|
else:
|
||||||
|
subprocess.run([exe_path])
|
||||||
|
except Exception as e:
|
||||||
|
print(f"✗ Fehler beim Starten: {str(e)}")
|
||||||
|
return False
|
||||||
|
return True
|
||||||
|
|
||||||
|
def build_application(self):
|
||||||
|
"""Baut die Anwendung"""
|
||||||
|
print("\n🔨 Baue Metadaten-Crawler...")
|
||||||
|
try:
|
||||||
|
if self.system == "Windows":
|
||||||
|
cmd = ['npm', 'run', 'build-win']
|
||||||
|
elif self.system == "Darwin":
|
||||||
|
cmd = ['npm', 'run', 'build-mac']
|
||||||
|
else:
|
||||||
|
cmd = ['npm', 'run', 'build-linux']
|
||||||
|
|
||||||
|
result = subprocess.run(cmd, cwd=self.app_dir)
|
||||||
|
if result.returncode == 0:
|
||||||
|
print("✓ Build erfolgreich abgeschlossen")
|
||||||
|
return True
|
||||||
|
else:
|
||||||
|
print("✗ Build fehlgeschlagen")
|
||||||
|
return False
|
||||||
|
except Exception as e:
|
||||||
|
print(f"✗ Fehler beim Build: {str(e)}")
|
||||||
|
return False
|
||||||
|
|
||||||
|
def run(self):
|
||||||
|
"""Hauptmethode zum Starten der Anwendung"""
|
||||||
|
print("=" * 50)
|
||||||
|
print(" Metadaten-Crawler Launcher")
|
||||||
|
print("=" * 50)
|
||||||
|
print(f"System: {self.system}")
|
||||||
|
print(f"Arbeitsverzeichnis: {self.app_dir}")
|
||||||
|
print()
|
||||||
|
|
||||||
|
# Prüfe Node.js
|
||||||
|
if not self.check_node_installed():
|
||||||
|
return False
|
||||||
|
|
||||||
|
# Prüfe Dependencies
|
||||||
|
if not self.check_dependencies():
|
||||||
|
return False
|
||||||
|
|
||||||
|
# Prüfe ob ausführbare Datei existiert
|
||||||
|
exe_path = self.check_executable()
|
||||||
|
|
||||||
|
if len(sys.argv) > 1:
|
||||||
|
# Command line arguments
|
||||||
|
if sys.argv[1] == '--dev':
|
||||||
|
return self.start_development()
|
||||||
|
elif sys.argv[1] == '--build':
|
||||||
|
return self.build_application()
|
||||||
|
elif sys.argv[1] == '--exe' and exe_path:
|
||||||
|
return self.start_executable(exe_path)
|
||||||
|
|
||||||
|
# Interaktives Menü
|
||||||
|
print("\nWas möchten Sie tun?")
|
||||||
|
print("1. Entwicklungsmodus starten (npm start)")
|
||||||
|
if exe_path:
|
||||||
|
print("2. Kompilierte Anwendung starten")
|
||||||
|
print("3. Anwendung neu bauen")
|
||||||
|
else:
|
||||||
|
print("2. Anwendung bauen (erstellt .exe)")
|
||||||
|
print("0. Beenden")
|
||||||
|
|
||||||
|
while True:
|
||||||
|
try:
|
||||||
|
choice = input("\nIhre Wahl: ").strip()
|
||||||
|
|
||||||
|
if choice == '0':
|
||||||
|
print("Auf Wiedersehen!")
|
||||||
|
return True
|
||||||
|
elif choice == '1':
|
||||||
|
return self.start_development()
|
||||||
|
elif choice == '2':
|
||||||
|
if exe_path:
|
||||||
|
return self.start_executable(exe_path)
|
||||||
|
else:
|
||||||
|
if self.build_application():
|
||||||
|
exe_path = self.check_executable()
|
||||||
|
if exe_path:
|
||||||
|
print("\n✓ Build erfolgreich! Möchten Sie die Anwendung starten? (j/n)")
|
||||||
|
if input().lower() == 'j':
|
||||||
|
return self.start_executable(exe_path)
|
||||||
|
elif choice == '3' and exe_path:
|
||||||
|
return self.build_application()
|
||||||
|
else:
|
||||||
|
print("Ungültige Eingabe. Bitte erneut versuchen.")
|
||||||
|
except KeyboardInterrupt:
|
||||||
|
print("\n\nProgramm beendet.")
|
||||||
|
return True
|
||||||
|
|
||||||
|
|
||||||
|
def main():
|
||||||
|
"""Hauptfunktion"""
|
||||||
|
launcher = MetadatenCrawlerLauncher()
|
||||||
|
launcher.run()
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
main()
|
||||||
4326
package-lock.json
generiert
Normale Datei
4326
package-lock.json
generiert
Normale Datei
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
39
package.json
Normale Datei
39
package.json
Normale Datei
@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"name": "metadaten-crawler",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Metadaten-Crawler (MC) - Professional metadata extraction tool",
|
||||||
|
"main": "main.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "electron .",
|
||||||
|
"build-win": "electron-builder --win",
|
||||||
|
"build": "electron-builder",
|
||||||
|
"dist": "electron-builder"
|
||||||
|
},
|
||||||
|
"keywords": ["metadata", "exif", "crawler"],
|
||||||
|
"author": "IntelSight",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"jspdf": "^2.5.1",
|
||||||
|
"html2canvas": "^1.4.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"electron": "^28.0.0",
|
||||||
|
"electron-builder": "^24.6.4"
|
||||||
|
},
|
||||||
|
"build": {
|
||||||
|
"appId": "com.intelsight.metadatencrawler",
|
||||||
|
"productName": "Metadaten-Crawler",
|
||||||
|
"directories": {
|
||||||
|
"output": "dist"
|
||||||
|
},
|
||||||
|
"win": {
|
||||||
|
"target": "nsis",
|
||||||
|
"icon": "assets/icon.ico"
|
||||||
|
},
|
||||||
|
"nsis": {
|
||||||
|
"oneClick": false,
|
||||||
|
"perMachine": true,
|
||||||
|
"allowToChangeInstallationDirectory": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
10
preload.js
Normale Datei
10
preload.js
Normale Datei
@ -0,0 +1,10 @@
|
|||||||
|
const { contextBridge, ipcRenderer } = require('electron');
|
||||||
|
|
||||||
|
contextBridge.exposeInMainWorld('electronAPI', {
|
||||||
|
onNewFile: (callback) => ipcRenderer.on('new-file', callback),
|
||||||
|
onToggleTheme: (callback) => ipcRenderer.on('toggle-theme', callback),
|
||||||
|
getTheme: () => ipcRenderer.invoke('get-theme'),
|
||||||
|
minimizeWindow: () => ipcRenderer.send('minimize-window'),
|
||||||
|
maximizeWindow: () => ipcRenderer.send('maximize-window'),
|
||||||
|
closeWindow: () => ipcRenderer.send('close-window')
|
||||||
|
});
|
||||||
79
renderer.js
Normale Datei
79
renderer.js
Normale Datei
@ -0,0 +1,79 @@
|
|||||||
|
// Theme management
|
||||||
|
let isDarkMode = true;
|
||||||
|
|
||||||
|
// Initialize theme
|
||||||
|
async function initializeTheme() {
|
||||||
|
if (window.electronAPI) {
|
||||||
|
isDarkMode = await window.electronAPI.getTheme();
|
||||||
|
applyTheme(isDarkMode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply theme
|
||||||
|
function applyTheme(darkMode) {
|
||||||
|
isDarkMode = darkMode;
|
||||||
|
if (darkMode) {
|
||||||
|
document.body.classList.remove('light-mode');
|
||||||
|
document.getElementById('darkTheme').checked = true;
|
||||||
|
} else {
|
||||||
|
document.body.classList.add('light-mode');
|
||||||
|
document.getElementById('lightTheme').checked = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Window controls
|
||||||
|
document.getElementById('minimizeBtn').addEventListener('click', () => {
|
||||||
|
if (window.electronAPI) window.electronAPI.minimizeWindow();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('maximizeBtn').addEventListener('click', () => {
|
||||||
|
if (window.electronAPI) window.electronAPI.maximizeWindow();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('closeBtn').addEventListener('click', () => {
|
||||||
|
if (window.electronAPI) window.electronAPI.closeWindow();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Settings dialog
|
||||||
|
const settingsDialog = document.getElementById('settingsDialog');
|
||||||
|
const settingsBtn = document.getElementById('settingsBtn');
|
||||||
|
const settingsCloseBtn = document.getElementById('settingsCloseBtn');
|
||||||
|
|
||||||
|
settingsBtn.addEventListener('click', () => {
|
||||||
|
settingsDialog.classList.add('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
settingsCloseBtn.addEventListener('click', () => {
|
||||||
|
settingsDialog.classList.remove('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
settingsDialog.addEventListener('click', (e) => {
|
||||||
|
if (e.target === settingsDialog) {
|
||||||
|
settingsDialog.classList.remove('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Theme radio buttons
|
||||||
|
document.getElementById('darkTheme').addEventListener('change', () => {
|
||||||
|
applyTheme(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('lightTheme').addEventListener('change', () => {
|
||||||
|
applyTheme(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listen for theme changes from menu
|
||||||
|
if (window.electronAPI) {
|
||||||
|
window.electronAPI.onToggleTheme((event, darkMode) => {
|
||||||
|
applyTheme(darkMode);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.electronAPI.onNewFile(() => {
|
||||||
|
clearMetadata();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize on load
|
||||||
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initializeTheme();
|
||||||
|
});
|
||||||
2
requirements.txt
Normale Datei
2
requirements.txt
Normale Datei
@ -0,0 +1,2 @@
|
|||||||
|
# Keine Python-Dependencies erforderlich
|
||||||
|
# Die main.py nutzt nur Standard-Python-Module
|
||||||
620
styles.css
Normale Datei
620
styles.css
Normale Datei
@ -0,0 +1,620 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary: #232D53;
|
||||||
|
--accent: #00D4FF;
|
||||||
|
--accent-hover: #00B8E6;
|
||||||
|
--background: #000000;
|
||||||
|
--secondary-bg: #1A1F3A;
|
||||||
|
--secondary-bg-hover: #232D53;
|
||||||
|
--text-primary: #FFFFFF;
|
||||||
|
--text-secondary: rgba(255, 255, 255, 0.7);
|
||||||
|
--text-tertiary: rgba(255, 255, 255, 0.6);
|
||||||
|
--error: #FF4444;
|
||||||
|
--success: #4CAF50;
|
||||||
|
--warning: #FFC107;
|
||||||
|
--info: #2196F3;
|
||||||
|
--sidebar-bg: #0A0A0A;
|
||||||
|
--border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
--input-focus: #2A3560;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.light-mode {
|
||||||
|
--primary: #3182CE;
|
||||||
|
--accent: #3182CE;
|
||||||
|
--accent-hover: #2563EB;
|
||||||
|
--background: #FFFFFF;
|
||||||
|
--secondary-bg: #F8FAFC;
|
||||||
|
--secondary-bg-hover: #E1E8F0;
|
||||||
|
--text-primary: #1A202C;
|
||||||
|
--text-secondary: #4A5568;
|
||||||
|
--text-tertiary: #718096;
|
||||||
|
--error: #E53E3E;
|
||||||
|
--success: #38A169;
|
||||||
|
--warning: #D69E2E;
|
||||||
|
--info: #3182CE;
|
||||||
|
--sidebar-bg: #F7FAFC;
|
||||||
|
--border-color: #E1E8F0;
|
||||||
|
--input-focus: #EBF8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* App Header */
|
||||||
|
.app-header {
|
||||||
|
background-color: var(--secondary-bg);
|
||||||
|
border-bottom: 2px solid var(--accent);
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 20px 0;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header-content {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 32px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.file-drop-zone {
|
||||||
|
min-height: 280px;
|
||||||
|
background-color: var(--secondary-bg);
|
||||||
|
border: 3px dashed var(--primary);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 60px 40px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
margin-top: 30px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
background-color: var(--secondary-bg-hover);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone.drag-over {
|
||||||
|
background-color: var(--secondary-bg-hover);
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone p {
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone .file-icon {
|
||||||
|
font-size: 64px;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.3));
|
||||||
|
}
|
||||||
|
|
||||||
|
.supported-formats {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-container {
|
||||||
|
background-color: var(--secondary-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 32px;
|
||||||
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||||
|
display: none;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-container.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
background-color: var(--primary);
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info h3 {
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info .basic-info {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info .label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-section:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 0 1px var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-section-header {
|
||||||
|
background-color: var(--primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: 16px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-section-header:hover {
|
||||||
|
background-color: var(--secondary-bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-section-header.video {
|
||||||
|
background-color: var(--info);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-icon {
|
||||||
|
transition: transform 0.3s;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-section.collapsed .toggle-icon {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-content {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: rgba(26, 31, 58, 0.3);
|
||||||
|
max-height: 500px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.light-mode .metadata-content {
|
||||||
|
background-color: rgba(248, 250, 252, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-section.collapsed .metadata-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-table td {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-table tr:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-table td:first-child {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
width: 40%;
|
||||||
|
background-color: rgba(35, 45, 83, 0.2);
|
||||||
|
font-size: 13px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.light-mode .metadata-table td:first-child {
|
||||||
|
background-color: rgba(49, 130, 206, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-table td:last-child {
|
||||||
|
word-break: break-word;
|
||||||
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview img {
|
||||||
|
max-width: 400px;
|
||||||
|
max-height: 400px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
display: none;
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
border: 4px solid var(--secondary-bg);
|
||||||
|
border-top: 4px solid var(--accent);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-btn {
|
||||||
|
background-color: var(--accent);
|
||||||
|
color: var(--background);
|
||||||
|
border: none;
|
||||||
|
padding: 12px 32px;
|
||||||
|
border-radius: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 24px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-btn:hover {
|
||||||
|
background-color: var(--accent-hover);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 212, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-metadata {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
padding: 40px;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--secondary-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--accent);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Title Bar */
|
||||||
|
.title-bar {
|
||||||
|
height: 40px;
|
||||||
|
background: linear-gradient(90deg, #00D4FF 0%, #232D53 100%);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-app-region: drag;
|
||||||
|
z-index: 1000;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.light-mode .title-bar {
|
||||||
|
background: linear-gradient(90deg, #3182CE 0%, #2563EB 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bar-content {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bar-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-btn {
|
||||||
|
background-color: var(--secondary-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--accent);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-btn:hover {
|
||||||
|
background-color: var(--secondary-bg-hover);
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-control {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #FFFFFF;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
width: 46px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-control:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-control.close:hover {
|
||||||
|
background-color: var(--error);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Settings Dialog */
|
||||||
|
.settings-dialog {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
z-index: 2000;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-dialog.show {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-content {
|
||||||
|
background-color: var(--secondary-bg);
|
||||||
|
border-radius: 16px;
|
||||||
|
width: 500px;
|
||||||
|
max-width: 90%;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||||
|
overflow: hidden;
|
||||||
|
animation: slideIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
transform: translateY(-20px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-header {
|
||||||
|
background-color: var(--primary);
|
||||||
|
padding: 20px 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-close {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-close:hover {
|
||||||
|
background-color: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-body {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section h3 {
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-selector {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-option {
|
||||||
|
flex: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-option input[type="radio"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
background-color: var(--background);
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-option input[type="radio"]:checked + .theme-label {
|
||||||
|
border-color: var(--accent);
|
||||||
|
background-color: var(--secondary-bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-label:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust container for spacing */
|
||||||
|
.container {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Action Buttons */
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-btn {
|
||||||
|
background-color: var(--info);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 32px;
|
||||||
|
border-radius: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-btn:hover {
|
||||||
|
background-color: #1976D2;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 16px rgba(33, 150, 243, 0.3);
|
||||||
|
}
|
||||||
In neuem Issue referenzieren
Einen Benutzer sperren