Files
xsl-validator/html/index.html
T
info 12fe395ac0 Feature: Präsentationswebseite für DocuMentor
Statische Webseite zur Vorstellung der Anwendung mit:
- Hauptseite mit Features, Workflow, Technologie und Download-Bereichen
- Datenschutzerklärung (speziell für Desktop-App)
- Impressum-Vorlage
- Modernes Dark-Theme Design mit Gradient-Akzenten
- Vollständig responsiv (Desktop, Tablet, Mobile)
- Interaktive JavaScript-Features (Smooth Scrolling, Animationen)
- 8 Feature-Cards mit Hauptfunktionalitäten
- Drei-Panel PDF-Vergleich, Batch-Verarbeitung, Duplikatserkennung
- Installation und Download-Bereich für alle Plattformen

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-02 17:39:23 +01:00

311 lines
15 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DocuMentor - Professionelle XSL-Transformations-Verwaltung</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<div class="nav-brand">
<h1>DocuMentor</h1>
</div>
<ul class="nav-menu">
<li><a href="#features">Features</a></li>
<li><a href="#workflow">Workflow</a></li>
<li><a href="#technologie">Technologie</a></li>
<li><a href="#download">Download</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<h1 class="hero-title">Professionelle XSL-Transformations-Verwaltung</h1>
<p class="hero-subtitle">
DocuMentor ist Ihre leistungsstarke Desktop-Anwendung zur effizienten Verwaltung
und Validierung von XSL-Transformationen mit automatischer PDF-Generierung.
</p>
<div class="hero-buttons">
<a href="#download" class="btn btn-primary">Jetzt Herunterladen</a>
<a href="#features" class="btn btn-secondary">Mehr Erfahren</a>
</div>
</div>
<div class="hero-image">
<div class="screenshot-placeholder">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<rect width="800" height="600" fill="#1e293b" rx="8"/>
<rect x="20" y="20" width="760" height="50" fill="#334155" rx="4"/>
<circle cx="40" cy="45" r="8" fill="#ef4444"/>
<circle cx="70" cy="45" r="8" fill="#eab308"/>
<circle cx="100" cy="45" r="8" fill="#22c55e"/>
<rect x="20" y="90" width="250" height="490" fill="#334155" rx="4"/>
<rect x="290" y="90" width="490" height="150" fill="#334155" rx="4"/>
<rect x="290" y="260" width="490" height="320" fill="#334155" rx="4"/>
</svg>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features">
<div class="container">
<h2 class="section-title">Leistungsstarke Features</h2>
<p class="section-subtitle">Alles, was Sie für professionelle XSL-Transformationen benötigen</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
</svg>
</div>
<h3>Hierarchische Projektverwaltung</h3>
<p>Organisieren Sie Ihre XSL-Transformationen in einer übersichtlichen Baumstruktur mit flexiblen Workflow-Definitionen.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</div>
<h3>Asynchrone Batch-Verarbeitung</h3>
<p>Verarbeiten Sie große Mengen von XML-Dateien im Hintergrund mit Fortschrittsanzeige und optimaler Performance.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
</svg>
</div>
<h3>Intelligente Duplikatserkennung</h3>
<p>Automatische Hash-basierte Erkennung von identischen XML-Dateien verhindert Redundanzen und spart Speicherplatz.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<path d="M9 3v18M15 3v18M3 9h18M3 15h18"/>
</svg>
</div>
<h3>PDF-Vergleichsansicht</h3>
<p>Drei-Panel-Ansicht mit Referenz-, Diff- und Neu-PDF inkl. Alpha-Blending für präzise visuelle Vergleiche.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
</svg>
</div>
<h3>PostgreSQL-Integration</h3>
<p>Nahtlose Datenbankanbindung mit Polars und ConnectorX für performante SQL-Abfragen und Datenverarbeitung.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>
</div>
<h3>Konfigurierbare Toolchains</h3>
<p>Flexible Verwaltung von Saxon, Apache FOP und diff-pdf mit Versionierung und plattformübergreifender Unterstützung.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
</svg>
</div>
<h3>Drag & Drop-Unterstützung</h3>
<p>Intuitive Bedienung durch Drag-and-Drop für XML-Dateien mit automatischer Hash-Prüfung und Zuordnung.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3>Blake2b-Hash-Validierung</h3>
<p>Robuste Integritätsprüfung mit automatischer Hash-Berechnung für alle XML-Dateien im Hintergrund.</p>
</div>
</div>
</div>
</section>
<!-- Workflow Section -->
<section id="workflow" class="workflow">
<div class="container">
<h2 class="section-title">Ihr Workflow mit DocuMentor</h2>
<div class="workflow-steps">
<div class="workflow-step">
<div class="step-number">1</div>
<h3>Projekt erstellen</h3>
<p>Legen Sie ein neues Projekt an und konfigurieren Sie Ihre Transformations-Tools (Saxon, Apache FOP).</p>
</div>
<div class="workflow-arrow"></div>
<div class="workflow-step">
<div class="step-number">2</div>
<h3>Struktur aufbauen</h3>
<p>Organisieren Sie Ihre XSL-Stylesheets und XML-Dateien in der hierarchischen Baumstruktur.</p>
</div>
<div class="workflow-arrow"></div>
<div class="workflow-step">
<div class="step-number">3</div>
<h3>Transformationen ausführen</h3>
<p>Führen Sie Batch-Transformationen aus und profitieren Sie von der Worker-Pool-Performance.</p>
</div>
<div class="workflow-arrow"></div>
<div class="workflow-step">
<div class="step-number">4</div>
<h3>PDFs vergleichen</h3>
<p>Nutzen Sie die Drei-Panel-Ansicht für präzise Vergleiche zwischen Referenz und generierten PDFs.</p>
</div>
</div>
</div>
</section>
<!-- Technology Section -->
<section id="technologie" class="technology">
<div class="container">
<h2 class="section-title">Moderne Technologie</h2>
<div class="tech-grid">
<div class="tech-item">
<h3>PySide6</h3>
<p>Native Qt-basierte Benutzeroberfläche für beste Performance und plattformübergreifende Kompatibilität</p>
</div>
<div class="tech-item">
<h3>Pydantic</h3>
<p>Typsichere Konfigurationsverwaltung mit automatischer Validierung und Serialisierung</p>
</div>
<div class="tech-item">
<h3>Saxon</h3>
<p>Industrie-Standard XSLT-Prozessor für höchste Transformations-Qualität</p>
</div>
<div class="tech-item">
<h3>Apache FOP</h3>
<p>Professionelle PDF-Generierung aus XSL-FO mit umfangreichen Formatierungsoptionen</p>
</div>
<div class="tech-item">
<h3>PostgreSQL</h3>
<p>Enterprise-Datenbankintegration mit Polars für schnelle Datenverarbeitung</p>
</div>
<div class="tech-item">
<h3>Blake2b</h3>
<p>Kryptographische Hash-Funktion für sichere Integritätsprüfung und Duplikatserkennung</p>
</div>
</div>
</div>
</section>
<!-- Key Benefits Section -->
<section class="benefits">
<div class="container">
<h2 class="section-title">Ihre Vorteile</h2>
<div class="benefits-grid">
<div class="benefit-item">
<div class="benefit-number">4x</div>
<p>Schnellere XSLT-Transformationen durch Worker-Pool-Architektur</p>
</div>
<div class="benefit-item">
<div class="benefit-number">100%</div>
<p>Automatische Duplikatserkennung verhindert redundante Dateien</p>
</div>
<div class="benefit-item">
<div class="benefit-number"></div>
<p>Unbegrenzte Projektgröße durch effiziente Hash-basierte Verwaltung</p>
</div>
</div>
</div>
</section>
<!-- Download Section -->
<section id="download" class="download">
<div class="container">
<h2 class="section-title">Jetzt Starten</h2>
<p class="section-subtitle">DocuMentor ist verfügbar für Windows, macOS und Linux</p>
<div class="download-buttons">
<div class="download-card">
<h3>Linux</h3>
<p>Ubuntu, Debian, Fedora, Arch</p>
<a href="#" class="btn btn-download">Download für Linux</a>
</div>
<div class="download-card">
<h3>Windows</h3>
<p>Windows 10/11</p>
<a href="#" class="btn btn-download">Download für Windows</a>
</div>
<div class="download-card">
<h3>macOS</h3>
<p>macOS 10.15+</p>
<a href="#" class="btn btn-download">Download für macOS</a>
</div>
</div>
<div class="installation-note">
<h3>Installation</h3>
<div class="code-block">
<code>
# Installation mit uv Paketmanager<br>
uv sync<br>
<br>
# Anwendung starten<br>
uv run python src/main.py
</code>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>DocuMentor</h3>
<p>Professionelle XSL-Transformations-Verwaltung für anspruchsvolle Projekte.</p>
</div>
<div class="footer-section">
<h4>Ressourcen</h4>
<ul>
<li><a href="#">Dokumentation</a></li>
<li><a href="#">GitHub Repository</a></li>
<li><a href="#">Issue Tracker</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Community</h4>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Changelog</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Rechtliches</h4>
<ul>
<li><a href="impressum.html">Impressum</a></li>
<li><a href="datenschutz.html">Datenschutz</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 DocuMentor. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>