new file: app.py
new file: templates/base.html
This commit is contained in:
SimolZimol
171
templates/images_to_pdf.html
Normal file
171
templates/images_to_pdf.html
Normal 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 %}
|
||||
Reference in New Issue
Block a user