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