Simon/PDF-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new file: app.py

Browse Source 
new file:   templates/base.html
This commit is contained in:
SimolZimol
2025-10-12 22:05:53 +02:00
parent 9c70ae1645
commit b6ed71346e
4 changed files with 707 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
templates/base.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}PDF Editor{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{{ url_for('index') }}">
<i class="fas fa-file-pdf me-2"></i>PDF Editor
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index') }}">
<i class="fas fa-home me-1"></i>Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('images_to_pdf_page') }}">
<i class="fas fa-images me-1"></i>Bilder zu PDF
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('pdf_tools_page') }}">
<i class="fas fa-tools me-1"></i>PDF Tools
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="container mt-3">
{% for category, message in messages %}
<div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<!-- Main Content -->
<main class="container mt-4">
{% block content %}{% endblock %}
</main>
<!-- Footer -->
<footer class="bg-light mt-5 py-4">
<div class="container text-center">
<p class="mb-0 text-muted">
<i class="fas fa-file-pdf me-2"></i>PDF Editor Web App
<span class="mx-2">|</span>
Lokaler Flask Server
</p>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% block scripts %}{% endblock %}
</body>
</html>

171
templates/images_to_pdf.html Normal file
View File

@@ -0,0 +1,171 @@
{% extends "base.html" %}
{% block title %}Bilder zu PDF - PDF Editor{% endblock %}
{% block content %}
<div class="row">
<div class="col-12">
<div class="page-header mb-4">
<h2>
<i class="fas fa-images me-2"></i>Bilder zu PDF konvertieren
</h2>
<p class="text-muted">
Laden Sie mehrere Bilder hoch und konvertieren Sie diese in eine PDF-Datei.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Upload Area -->
<div class="col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-upload me-2"></i>Bilder hochladen
</h5>
</div>
<div class="card-body">
<!-- File Upload Area -->
<div id="upload-area" class="upload-area border-dashed p-4 text-center">
<div class="upload-content">
<i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
<h5>Bilder hier hinziehen oder klicken zum Auswählen</h5>
<p class="text-muted mb-3">
Unterstützte Formate: JPG, PNG, GIF, BMP, TIFF<br>
Maximale Dateigröße: 16 MB pro Datei
</p>
<input type="file" id="file-input" multiple accept="image/*" class="d-none">
<button type="button" class="btn btn-primary" onclick="document.getElementById('file-input').click()">
<i class="fas fa-folder-open me-2"></i>Dateien auswählen
</button>
</div>
</div>
<!-- Progress Bar -->
<div id="upload-progress" class="mt-3" style="display: none;">
<div class="d-flex justify-content-between align-items-center mb-2">
<small class="text-muted">Upload läuft...</small>
<small id="progress-text" class="text-muted">0%</small>
</div>
<div class="progress">
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>
</div>
<!-- File List -->
<div id="file-list" class="mt-4" style="display: none;">
<h6>Hochgeladene Dateien:</h6>
<div id="files-container" class="list-group sortable-list">
<!-- Files will be added here dynamically -->
</div>
<div class="mt-3 d-flex gap-2">
<button id="convert-btn" class="btn btn-success" disabled>
<i class="fas fa-file-pdf me-2"></i>Zu PDF konvertieren
</button>
<button id="clear-btn" class="btn btn-outline-secondary">
<i class="fas fa-trash me-2"></i>Alle entfernen
</button>
</div>
</div>
<!-- Result Area -->
<div id="result-area" class="mt-4" style="display: none;">
<div class="alert alert-success">
<div class="d-flex align-items-center">
<i class="fas fa-check-circle fa-2x me-3"></i>
<div class="flex-grow-1">
<h6 class="mb-1">PDF erfolgreich erstellt!</h6>
<p class="mb-0">Ihre Bilder wurden erfolgreich in eine PDF-Datei konvertiert.</p>
</div>
<a id="download-link" href="#" class="btn btn-success">
<i class="fas fa-download me-2"></i>PDF herunterladen
</a>
</div>
</div>
</div>
<!-- Error Area -->
<div id="error-area" class="mt-4" style="display: none;">
<div class="alert alert-danger">
<h6><i class="fas fa-exclamation-triangle me-2"></i>Fehler</h6>
<p id="error-message" class="mb-0"></p>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h6 class="mb-0">
<i class="fas fa-cog me-2"></i>Einstellungen
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">Seitenformat:</label>
<select id="page-format" class="form-select">
<option value="A4">A4 (210 × 297 mm)</option>
<option value="Letter">Letter (216 × 279 mm)</option>
<option value="A3">A3 (297 × 420 mm)</option>
<option value="A5">A5 (148 × 210 mm)</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Bildanpassung:</label>
<select id="image-fit" class="form-select">
<option value="fit">An Seite anpassen</option>
<option value="fill">Seite füllen</option>
<option value="center">Zentrieren</option>
</select>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="maintain-aspect-ratio" checked>
<label class="form-check-label">
Seitenverhältnis beibehalten
</label>
</div>
</div>
</div>
<!-- Tips -->
<div class="card mt-3">
<div class="card-header">
<h6 class="mb-0">
<i class="fas fa-lightbulb me-2"></i>Tipps
</h6>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-2">
<i class="fas fa-sort me-2 text-muted"></i>
<small>Ziehen Sie Dateien in der Liste, um die Reihenfolge zu ändern</small>
</li>
<li class="mb-2">
<i class="fas fa-images me-2 text-muted"></i>
<small>Hochauflösende Bilder ergeben bessere PDF-Qualität</small>
</li>
<li class="mb-2">
<i class="fas fa-file-pdf me-2 text-muted"></i>
<small>Jedes Bild wird auf eine separate PDF-Seite platziert</small>
</li>
<li>
<i class="fas fa-shield-alt me-2 text-muted"></i>
<small>Alle Dateien werden lokal verarbeitet - maximale Sicherheit</small>
</li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/images-to-pdf.js') }}"></script>
{% endblock %}

154
templates/index.html Normal file
View File

@@ -0,0 +1,154 @@
{% extends "base.html" %}
{% block title %}PDF Editor - Home{% endblock %}
{% block content %}
<div class="row">
<div class="col-12">
<!-- Hero Section -->
<div class="jumbotron bg-gradient text-white rounded p-5 mb-5">
<h1 class="display-4">
<i class="fas fa-file-pdf me-3"></i>PDF Editor Web App
</h1>
<p class="lead">
Ihre lokale Lösung für PDF-Bearbeitung: Bilder zu PDF konvertieren,
PDFs zusammenführen, Seiten extrahieren und vieles mehr.
</p>
<hr class="my-4">
<p>Einfach zu bedienen, vollständig lokal und sicher.</p>
</div>
</div>
</div>
<div class="row g-4">
<!-- Bilder zu PDF -->
<div class="col-md-6">
<div class="card h-100 feature-card">
<div class="card-body text-center">
<div class="icon-wrapper mb-3">
<i class="fas fa-images fa-3x text-primary"></i>
</div>
<h5 class="card-title">Bilder zu PDF</h5>
<p class="card-text">
Wählen Sie mehrere Bilder aus und konvertieren Sie diese
in eine einzige PDF-Datei. Unterstützt JPG, PNG, GIF und mehr.
</p>
<div class="features-list mb-3">
<small class="text-muted">
<i class="fas fa-check me-2"></i>Drag & Drop Support<br>
<i class="fas fa-check me-2"></i>Automatische Größenanpassung<br>
<i class="fas fa-check me-2"></i>Reihenfolge sortierbar
</small>
</div>
</div>
<div class="card-footer">
<a href="{{ url_for('images_to_pdf_page') }}" class="btn btn-primary w-100">
<i class="fas fa-arrow-right me-2"></i>Jetzt starten
</a>
</div>
</div>
</div>
<!-- PDF Tools -->
<div class="col-md-6">
<div class="card h-100 feature-card">
<div class="card-body text-center">
<div class="icon-wrapper mb-3">
<i class="fas fa-tools fa-3x text-success"></i>
</div>
<h5 class="card-title">PDF Tools</h5>
<p class="card-text">
Erweiterte PDF-Bearbeitungswerkzeuge für alle Ihre Anforderungen.
Zusammenführen, teilen und konvertieren.
</p>
<div class="features-list mb-3">
<small class="text-muted">
<i class="fas fa-check me-2"></i>PDFs zusammenführen<br>
<i class="fas fa-check me-2"></i>PDF zu Bildern<br>
<i class="fas fa-check me-2"></i>Seiten extrahieren
</small>
</div>
</div>
<div class="card-footer">
<a href="{{ url_for('pdf_tools_page') }}" class="btn btn-success w-100">
<i class="fas fa-arrow-right me-2"></i>Tools öffnen
</a>
</div>
</div>
</div>
</div>
<!-- Info Section -->
<div class="row mt-5">
<div class="col-12">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title">
<i class="fas fa-info-circle me-2"></i>Wie es funktioniert
</h5>
<div class="row">
<div class="col-md-4 text-center">
<div class="step-icon mb-3">
<i class="fas fa-upload fa-2x text-primary"></i>
</div>
<h6>1. Dateien hochladen</h6>
<p class="small text-muted">
Ziehen Sie Ihre Dateien einfach in den Upload-Bereich
oder klicken Sie zum Auswählen.
</p>
</div>
<div class="col-md-4 text-center">
<div class="step-icon mb-3">
<i class="fas fa-cogs fa-2x text-warning"></i>
</div>
<h6>2. Bearbeiten</h6>
<p class="small text-muted">
Sortieren Sie die Reihenfolge, wählen Sie Optionen
und starten Sie die Verarbeitung.
</p>
</div>
<div class="col-md-4 text-center">
<div class="step-icon mb-3">
<i class="fas fa-download fa-2x text-success"></i>
</div>
<h6>3. Herunterladen</h6>
<p class="small text-muted">
Laden Sie Ihre fertige PDF-Datei oder
das Ergebnis direkt herunter.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Features -->
<div class="row mt-5">
<div class="col-12">
<h3 class="text-center mb-4">Warum PDF Editor wählen?</h3>
<div class="row g-3">
<div class="col-md-3 text-center">
<i class="fas fa-shield-alt fa-2x text-primary mb-2"></i>
<h6>100% Lokal</h6>
<small class="text-muted">Ihre Dateien verlassen nie Ihren Computer</small>
</div>
<div class="col-md-3 text-center">
<i class="fas fa-bolt fa-2x text-warning mb-2"></i>
<h6>Schnell</h6>
<small class="text-muted">Keine Upload-Wartezeiten, sofortige Verarbeitung</small>
</div>
<div class="col-md-3 text-center">
<i class="fas fa-mobile-alt fa-2x text-success mb-2"></i>
<h6>Responsiv</h6>
<small class="text-muted">Funktioniert auf Desktop, Tablet und Handy</small>
</div>
<div class="col-md-3 text-center">
<i class="fas fa-code fa-2x text-info mb-2"></i>
<h6>Open Source</h6>
<small class="text-muted">Transparenter Code, den Sie verstehen können</small>
</div>
</div>
</div>
</div>
{% endblock %}