From 12fe395ac0b53bcad48370588e76e5aa593384a6 Mon Sep 17 00:00:00 2001 From: Vitali Graf Date: Fri, 2 Jan 2026 17:39:23 +0100 Subject: [PATCH] =?UTF-8?q?Feature:=20Pr=C3=A4sentationswebseite=20f=C3=BC?= =?UTF-8?q?r=20DocuMentor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- html/datenschutz.html | 290 ++++++++++++++++++++++ html/impressum.html | 299 +++++++++++++++++++++++ html/index.html | 310 ++++++++++++++++++++++++ html/script.js | 275 +++++++++++++++++++++ html/styles.css | 542 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 1716 insertions(+) create mode 100644 html/datenschutz.html create mode 100644 html/impressum.html create mode 100644 html/index.html create mode 100644 html/script.js create mode 100644 html/styles.css diff --git a/html/datenschutz.html b/html/datenschutz.html new file mode 100644 index 0000000..73b44f9 --- /dev/null +++ b/html/datenschutz.html @@ -0,0 +1,290 @@ + + + + + + Datenschutzerklärung - DocuMentor + + + + + + + + +
+
+
+ ← Zurück zur Startseite + +

Datenschutzerklärung

+

Stand: Januar 2025

+ +

1. Datenschutz auf einen Blick

+ +

Allgemeine Hinweise

+

+ Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen + Daten passiert, wenn Sie DocuMentor nutzen. Personenbezogene Daten sind alle Daten, mit denen + Sie persönlich identifiziert werden können. +

+ +

DocuMentor als Desktop-Anwendung

+

+ DocuMentor ist eine Desktop-Anwendung, die lokal auf Ihrem Computer ausgeführt wird. Die + Anwendung sammelt, speichert oder überträgt keine personenbezogenen Daten an externe Server. +

+ +

2. Datenerfassung durch die Anwendung

+ +

Welche Daten werden erfasst?

+

+ DocuMentor speichert ausschließlich lokal auf Ihrem Computer: +

+
    +
  • Anwendungskonfigurationen (Tool-Pfade, Einstellungen)
    • +
  • Projektdaten (XSL-Transformations-Workflows, XML-Dateien)
    • +
  • Datei-Hashwerte (Blake2b) zur Duplikatserkennung
    • +
  • Datenbankverbindungsinformationen (falls konfiguriert)
    • +
+ +

Wo werden diese Daten gespeichert?

+

+ Alle Daten werden lokal in folgenden Verzeichnissen gespeichert: +

+
    +
  • Linux: ~/.config/DocuMentor/
    • +
  • Windows: %APPDATA%\DocuMentor\
    • +
  • macOS: ~/Library/Application Support/DocuMentor/
    • +
+

+ Zusätzlich werden projektspezifische Daten in dem von Ihnen gewählten Projektverzeichnis + als project.yaml gespeichert. +

+ +

Keine Datenübertragung

+

+ DocuMentor überträgt keine Daten an externe Server oder Dritte. Die Anwendung funktioniert + vollständig offline. Eine Internetverbindung ist weder für die Installation noch für die + Nutzung erforderlich. +

+ +

3. Datenerfassung auf dieser Webseite

+ +

Server-Log-Dateien

+

+ Der Provider dieser Webseite erhebt und speichert automatisch Informationen in sogenannten + Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind: +

+
    +
  • Browsertyp und Browserversion
    • +
  • Verwendetes Betriebssystem
    • +
  • Referrer URL
    • +
  • Hostname des zugreifenden Rechners
    • +
  • Uhrzeit der Serveranfrage
    • +
  • IP-Adresse
    • +
+

+ Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen. + Die Erfassung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. + Der Webseitenbetreiber hat ein berechtigtes Interesse an der technisch fehlerfreien + Darstellung und der Optimierung seiner Webseite. +

+ +

Keine Cookies

+

+ Diese Webseite verwendet keine Cookies. Es werden keine Tracking- oder Analytics-Dienste + eingesetzt. +

+ +

4. Datenbankverbindungen

+ +

PostgreSQL-Integration

+

+ DocuMentor bietet die Möglichkeit, sich mit PostgreSQL-Datenbanken zu verbinden. Die + Verbindungsinformationen (Server, Port, Benutzername, Passwort) werden ausschließlich + lokal in der Anwendungskonfiguration gespeichert. +

+

+ Die Verbindung zur Datenbank erfolgt direkt von Ihrem Computer aus. DocuMentor fungiert + nicht als Vermittler und speichert keine Datenbankabfragen oder -ergebnisse außerhalb + Ihres lokalen Systems. +

+ +

5. Ihre Rechte

+ +

Recht auf Auskunft, Löschung und Berichtigung

+

+ Da alle Daten ausschließlich lokal auf Ihrem Computer gespeichert werden, haben Sie + jederzeit volle Kontrolle über diese Daten: +

+
    +
  • Auskunft: Sie können jederzeit in die Konfigurationsdateien einsehen
    • +
  • Löschung: Sie können die Anwendung und alle Konfigurationsdateien jederzeit löschen
    • +
  • Berichtigung: Sie können alle gespeicherten Einstellungen jederzeit ändern
    • +
+ +

Widerruf Ihrer Einwilligung zur Datenverarbeitung

+

+ Viele Datenverarbeitungsvorgänge sind nur mit Ihrer ausdrücklichen Einwilligung möglich. + Sie können eine bereits erteilte Einwilligung jederzeit widerrufen, indem Sie die + Anwendung deinstallieren und die Konfigurationsdateien löschen. +

+ +

6. Open Source

+

+ DocuMentor ist eine Open-Source-Software. Der Quellcode ist öffentlich einsehbar, sodass + Sie jederzeit überprüfen können, wie Ihre Daten verarbeitet werden. +

+ +

7. Kontakt

+

+ Bei Fragen zum Datenschutz oder zur Datenverarbeitung in DocuMentor können Sie sich + jederzeit an uns wenden. Die Kontaktdaten finden Sie im Impressum. +

+ +

8. Änderungen dieser Datenschutzerklärung

+

+ Wir behalten uns vor, diese Datenschutzerklärung anzupassen, damit sie stets den aktuellen + rechtlichen Anforderungen entspricht oder um Änderungen unserer Leistungen in der + Datenschutzerklärung umzusetzen. Für Ihren erneuten Besuch gilt dann die neue + Datenschutzerklärung. +

+ +
+

+ Diese Datenschutzerklärung wurde erstellt für die Desktop-Anwendung DocuMentor + und die zugehörige Webseite. +

+
+
+
+
+ + +
+
+
+
+

DocuMentor

+

Professionelle XSL-Transformations-Verwaltung für anspruchsvolle Projekte.

+
+
+

Rechtliches

+ +
+
+

Ressourcen

+ +
+
+
+

© 2025 DocuMentor. Alle Rechte vorbehalten.

+
+
+
+ + + + diff --git a/html/impressum.html b/html/impressum.html new file mode 100644 index 0000000..f32235e --- /dev/null +++ b/html/impressum.html @@ -0,0 +1,299 @@ + + + + + + Impressum - DocuMentor + + + + + + + + +
+
+
+ ← Zurück zur Startseite + +

Impressum

+ +
+ Hinweis: Dies ist ein Platzhalter-Impressum. Bitte ersetzen Sie die folgenden + Informationen mit Ihren tatsächlichen Angaben gemäß den gesetzlichen Anforderungen. +
+ +

Angaben gemäß § 5 TMG

+ +
+

[Ihr Name / Firmenname]

+

[Straße und Hausnummer]

+

[PLZ] [Ort]

+

[Land]

+
+ +

Kontakt

+ +
+

Telefon: [Ihre Telefonnummer]

+

E-Mail: [Ihre E-Mail-Adresse]

+

Webseite: [Ihre Webseite]

+
+ +

Umsatzsteuer-ID

+

+ Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:
+ [Ihre USt-IdNr.] (falls zutreffend) +

+ +

Wirtschafts-ID

+

+ [Ihre Wirtschafts-ID] (falls zutreffend) +

+ +

Verantwortlich für den Inhalt

+

+ Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV: +

+
+

[Name des Verantwortlichen]

+

[Adresse]

+
+ +

EU-Streitschlichtung

+

+ Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: + + https://ec.europa.eu/consumers/odr/ + +

+

+ Unsere E-Mail-Adresse finden Sie oben im Impressum. +

+ +

Verbraucherstreitbeilegung / Universalschlichtungsstelle

+

+ Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer + Verbraucherschlichtungsstelle teilzunehmen. +

+ +

Haftung für Inhalte

+

+ Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach + den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter + jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen + oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. +

+

+ Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den + allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst + ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden + von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen. +

+ +

Haftung für Links

+

+ Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen + Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. + Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der + Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf + mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung + nicht erkennbar. +

+

+ Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete + Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen + werden wir derartige Links umgehend entfernen. +

+ +

Urheberrecht

+

+ Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen + dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art + der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen + Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind + nur für den privaten, nicht kommerziellen Gebrauch gestattet. +

+

+ Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die + Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche + gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, + bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen + werden wir derartige Inhalte umgehend entfernen. +

+ +

Open Source Software

+

+ DocuMentor ist eine Open-Source-Software. Der Quellcode ist unter einer Open-Source-Lizenz + verfügbar. Details zur Lizenzierung finden Sie im GitHub-Repository der Anwendung. +

+ +

Verwendete Technologien

+

+ DocuMentor verwendet folgende Technologien und Bibliotheken: +

+
    +
  • PySide6 (Qt für Python)
    • +
  • Pydantic (Datenvalidierung)
    • +
  • Saxon (XSLT-Prozessor)
    • +
  • Apache FOP (PDF-Generierung)
    • +
  • PostgreSQL (Datenbank, optional)
    • +
  • Polars (Datenverarbeitung)
    • +
+

+ Für diese Technologien gelten die jeweiligen Lizenzbedingungen der Urheber. +

+ +
+

+ Quelle: Erstellt für DocuMentor
+ Stand: Januar 2025 +

+
+
+
+
+ + +
+
+
+
+

DocuMentor

+

Professionelle XSL-Transformations-Verwaltung für anspruchsvolle Projekte.

+
+
+

Rechtliches

+ +
+
+

Ressourcen

+ +
+
+
+

© 2025 DocuMentor. Alle Rechte vorbehalten.

+
+
+
+ + + + diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..4a9e886 --- /dev/null +++ b/html/index.html @@ -0,0 +1,310 @@ + + + + + + DocuMentor - Professionelle XSL-Transformations-Verwaltung + + + + + + + +
+
+
+

Professionelle XSL-Transformations-Verwaltung

+

+ DocuMentor ist Ihre leistungsstarke Desktop-Anwendung zur effizienten Verwaltung + und Validierung von XSL-Transformationen mit automatischer PDF-Generierung. +

+
+ Jetzt Herunterladen + Mehr Erfahren +
+
+
+
+ + + + + + + + + + +
+
+
+
+ + +
+
+

Leistungsstarke Features

+

Alles, was Sie für professionelle XSL-Transformationen benötigen

+ +
+
+
+ + + +
+

Hierarchische Projektverwaltung

+

Organisieren Sie Ihre XSL-Transformationen in einer übersichtlichen Baumstruktur mit flexiblen Workflow-Definitionen.

+
+ +
+
+ + + +
+

Asynchrone Batch-Verarbeitung

+

Verarbeiten Sie große Mengen von XML-Dateien im Hintergrund mit Fortschrittsanzeige und optimaler Performance.

+
+ +
+
+ + + +
+

Intelligente Duplikatserkennung

+

Automatische Hash-basierte Erkennung von identischen XML-Dateien verhindert Redundanzen und spart Speicherplatz.

+
+ +
+
+ + + + +
+

PDF-Vergleichsansicht

+

Drei-Panel-Ansicht mit Referenz-, Diff- und Neu-PDF inkl. Alpha-Blending für präzise visuelle Vergleiche.

+
+ +
+
+ + + +
+

PostgreSQL-Integration

+

Nahtlose Datenbankanbindung mit Polars und ConnectorX für performante SQL-Abfragen und Datenverarbeitung.

+
+ +
+
+ + + +
+

Konfigurierbare Toolchains

+

Flexible Verwaltung von Saxon, Apache FOP und diff-pdf mit Versionierung und plattformübergreifender Unterstützung.

+
+ +
+
+ + + +
+

Drag & Drop-Unterstützung

+

Intuitive Bedienung durch Drag-and-Drop für XML-Dateien mit automatischer Hash-Prüfung und Zuordnung.

+
+ +
+
+ + + +
+

Blake2b-Hash-Validierung

+

Robuste Integritätsprüfung mit automatischer Hash-Berechnung für alle XML-Dateien im Hintergrund.

+
+
+
+
+ + +
+
+

Ihr Workflow mit DocuMentor

+
+
+
1
+

Projekt erstellen

+

Legen Sie ein neues Projekt an und konfigurieren Sie Ihre Transformations-Tools (Saxon, Apache FOP).

+
+
→
+
+
2
+

Struktur aufbauen

+

Organisieren Sie Ihre XSL-Stylesheets und XML-Dateien in der hierarchischen Baumstruktur.

+
+
→
+
+
3
+

Transformationen ausführen

+

Führen Sie Batch-Transformationen aus und profitieren Sie von der Worker-Pool-Performance.

+
+
→
+
+
4
+

PDFs vergleichen

+

Nutzen Sie die Drei-Panel-Ansicht für präzise Vergleiche zwischen Referenz und generierten PDFs.

+
+
+
+
+ + +
+
+

Moderne Technologie

+
+
+

PySide6

+

Native Qt-basierte Benutzeroberfläche für beste Performance und plattformübergreifende Kompatibilität

+
+
+

Pydantic

+

Typsichere Konfigurationsverwaltung mit automatischer Validierung und Serialisierung

+
+
+

Saxon

+

Industrie-Standard XSLT-Prozessor für höchste Transformations-Qualität

+
+
+

Apache FOP

+

Professionelle PDF-Generierung aus XSL-FO mit umfangreichen Formatierungsoptionen

+
+
+

PostgreSQL

+

Enterprise-Datenbankintegration mit Polars für schnelle Datenverarbeitung

+
+
+

Blake2b

+

Kryptographische Hash-Funktion für sichere Integritätsprüfung und Duplikatserkennung

+
+
+
+
+ + +
+
+

Ihre Vorteile

+
+
+
4x
+

Schnellere XSLT-Transformationen durch Worker-Pool-Architektur

+
+
+
100%
+

Automatische Duplikatserkennung verhindert redundante Dateien

+
+
+
∞
+

Unbegrenzte Projektgröße durch effiziente Hash-basierte Verwaltung

+
+
+
+
+ + +
+
+

Jetzt Starten

+

DocuMentor ist verfügbar für Windows, macOS und Linux

+
+
+

Linux

+

Ubuntu, Debian, Fedora, Arch

+ Download für Linux +
+
+

Windows

+

Windows 10/11

+ Download für Windows +
+
+

macOS

+

macOS 10.15+

+ Download für macOS +
+
+
+

Installation

+
+ +# Installation mit uv Paketmanager
+uv sync
+
+# Anwendung starten
+uv run python src/main.py + +
+
+
+
+ + + + + + + diff --git a/html/script.js b/html/script.js new file mode 100644 index 0000000..4706860 --- /dev/null +++ b/html/script.js @@ -0,0 +1,275 @@ +// Smooth Scrolling für Navigation +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + const navHeight = document.querySelector('.navbar').offsetHeight; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight; + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); +}); + +// Intersection Observer für Fade-In Animationen +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } + }); +}, observerOptions); + +// Füge Fade-In Klassen zu Elementen hinzu +document.addEventListener('DOMContentLoaded', () => { + const animatedElements = document.querySelectorAll( + '.feature-card, .workflow-step, .tech-item, .benefit-item, .download-card' + ); + + animatedElements.forEach((el, index) => { + el.classList.add('fade-in'); + el.style.transitionDelay = `${index * 0.1}s`; + observer.observe(el); + }); +}); + +// Navbar Scroll-Effekt +let lastScroll = 0; +const navbar = document.querySelector('.navbar'); + +window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + if (currentScroll <= 0) { + navbar.style.boxShadow = 'none'; + } else { + navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.3)'; + } + + lastScroll = currentScroll; +}); + +// Feature-Card Parallax-Effekt +document.querySelectorAll('.feature-card').forEach(card => { + card.addEventListener('mousemove', (e) => { + const rect = card.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + const centerX = rect.width / 2; + const centerY = rect.height / 2; + + const deltaX = (x - centerX) / centerX; + const deltaY = (y - centerY) / centerY; + + card.style.transform = `perspective(1000px) rotateY(${deltaX * 5}deg) rotateX(${-deltaY * 5}deg) translateY(-5px)`; + }); + + card.addEventListener('mouseleave', () => { + card.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(0)'; + }); +}); + +// Download-Button Analytics (Placeholder) +document.querySelectorAll('.btn-download').forEach(button => { + button.addEventListener('click', (e) => { + e.preventDefault(); + const platform = e.target.closest('.download-card').querySelector('h3').textContent; + console.log(`Download initiated for: ${platform}`); + + // Hier könnte eine echte Download-Logik oder Analytics-Tracking erfolgen + alert(`Download für ${platform} würde hier starten.\nBitte konfigurieren Sie die Download-Links in der index.html.`); + }); +}); + +// Mobile Navigation Toggle (für zukünftige Erweiterung) +const createMobileMenu = () => { + const navMenu = document.querySelector('.nav-menu'); + const navbar = document.querySelector('.navbar .container'); + + // Erstelle Hamburger-Button nur auf mobilen Geräten + if (window.innerWidth <= 768) { + const existingToggle = document.querySelector('.nav-toggle'); + if (existingToggle) return; + + const toggle = document.createElement('button'); + toggle.className = 'nav-toggle'; + toggle.innerHTML = '☰'; + toggle.style.cssText = ` + background: none; + border: none; + color: var(--text-primary); + font-size: 1.5rem; + cursor: pointer; + padding: 0.5rem; + `; + + toggle.addEventListener('click', () => { + navMenu.style.display = navMenu.style.display === 'flex' ? 'none' : 'flex'; + if (navMenu.style.display === 'flex') { + navMenu.style.cssText = ` + display: flex; + flex-direction: column; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--surface); + padding: 1rem; + border-top: 1px solid var(--surface-light); + `; + } + }); + + navbar.appendChild(toggle); + } +}; + +// Responsive Handling +window.addEventListener('resize', createMobileMenu); +createMobileMenu(); + +// Particle Background Animation (optional, dezent) +const createParticles = () => { + const hero = document.querySelector('.hero'); + const particlesContainer = document.createElement('div'); + particlesContainer.className = 'particles'; + particlesContainer.style.cssText = ` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + opacity: 0.3; + `; + + for (let i = 0; i < 20; i++) { + const particle = document.createElement('div'); + particle.style.cssText = ` + position: absolute; + width: 4px; + height: 4px; + background: var(--primary-color); + border-radius: 50%; + left: ${Math.random() * 100}%; + top: ${Math.random() * 100}%; + animation: float-particle ${5 + Math.random() * 10}s infinite ease-in-out; + animation-delay: ${Math.random() * 5}s; + `; + particlesContainer.appendChild(particle); + } + + // Füge Animation hinzu + if (!document.querySelector('#particle-animation')) { + const style = document.createElement('style'); + style.id = 'particle-animation'; + style.textContent = ` + @keyframes float-particle { + 0%, 100% { + transform: translate(0, 0); + } + 25% { + transform: translate(20px, -20px); + } + 50% { + transform: translate(-20px, -40px); + } + 75% { + transform: translate(20px, -60px); + } + } + `; + document.head.appendChild(style); + } + + hero.style.position = 'relative'; + hero.insertBefore(particlesContainer, hero.firstChild); +}; + +// Initialisiere Partikel nur auf Desktop +if (window.innerWidth > 768) { + createParticles(); +} + +// Counter Animation für Benefits +const animateCounters = () => { + const counters = document.querySelectorAll('.benefit-number'); + + counters.forEach(counter => { + const target = counter.textContent; + + // Prüfe ob es eine Zahl ist + if (!isNaN(parseInt(target))) { + const targetNum = parseInt(target); + const duration = 2000; + const increment = targetNum / (duration / 16); + let current = 0; + + const updateCounter = () => { + current += increment; + if (current < targetNum) { + counter.textContent = Math.floor(current) + 'x'; + requestAnimationFrame(updateCounter); + } else { + counter.textContent = target; + } + }; + + // Starte Animation wenn Element sichtbar wird + const counterObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + updateCounter(); + counterObserver.unobserve(entry.target); + } + }); + }); + + counterObserver.observe(counter); + } + }); +}; + +animateCounters(); + +// Easter Egg: Konami Code +let konamiCode = []; +const konamiSequence = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']; + +document.addEventListener('keydown', (e) => { + konamiCode.push(e.key); + konamiCode = konamiCode.slice(-10); + + if (konamiCode.join(',') === konamiSequence.join(',')) { + document.body.style.animation = 'rainbow 2s infinite'; + + if (!document.querySelector('#rainbow-animation')) { + const style = document.createElement('style'); + style.id = 'rainbow-animation'; + style.textContent = ` + @keyframes rainbow { + 0% { filter: hue-rotate(0deg); } + 100% { filter: hue-rotate(360deg); } + } + `; + document.head.appendChild(style); + } + + setTimeout(() => { + document.body.style.animation = ''; + }, 5000); + } +}); + +console.log('%c🚀 DocuMentor', 'font-size: 24px; font-weight: bold; background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; color: transparent;'); +console.log('%cProfessionelle XSL-Transformations-Verwaltung', 'font-size: 14px; color: #94a3b8;'); diff --git a/html/styles.css b/html/styles.css new file mode 100644 index 0000000..eaabbc5 --- /dev/null +++ b/html/styles.css @@ -0,0 +1,542 @@ +/* Reset und Basis-Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: #3b82f6; + --primary-dark: #2563eb; + --secondary-color: #8b5cf6; + --background: #0f172a; + --surface: #1e293b; + --surface-light: #334155; + --text-primary: #f1f5f9; + --text-secondary: #cbd5e1; + --text-muted: #94a3b8; + --accent: #06b6d4; + --success: #22c55e; + --warning: #eab308; + --error: #ef4444; + --gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: var(--background); + color: var(--text-primary); + line-height: 1.6; + overflow-x: hidden; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +/* Navigation */ +.navbar { + background-color: rgba(15, 23, 42, 0.95); + backdrop-filter: blur(10px); + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + border-bottom: 1px solid var(--surface-light); +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; +} + +.nav-brand h1 { + font-size: 1.5rem; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.nav-menu { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-menu a { + color: var(--text-secondary); + text-decoration: none; + font-weight: 500; + transition: color 0.3s; +} + +.nav-menu a:hover { + color: var(--primary-color); +} + +/* Hero Section */ +.hero { + margin-top: 80px; + padding: 6rem 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); +} + +.hero .container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.hero-title { + font-size: 3.5rem; + font-weight: 700; + line-height: 1.2; + margin-bottom: 1.5rem; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-subtitle { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 2rem; + line-height: 1.8; +} + +.hero-buttons { + display: flex; + gap: 1rem; +} + +.btn { + padding: 0.875rem 2rem; + border-radius: 0.5rem; + text-decoration: none; + font-weight: 600; + transition: all 0.3s; + display: inline-block; + cursor: pointer; +} + +.btn-primary { + background: var(--gradient); + color: white; + border: none; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); +} + +.btn-secondary { + background: transparent; + color: var(--text-primary); + border: 2px solid var(--primary-color); +} + +.btn-secondary:hover { + background: var(--primary-color); + transform: translateY(-2px); +} + +.screenshot-placeholder { + width: 100%; + border-radius: 1rem; + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); + overflow: hidden; + animation: float 6s ease-in-out infinite; +} + +@keyframes float { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-20px); } +} + +/* Features Section */ +.features { + padding: 6rem 0; + background-color: var(--background); +} + +.section-title { + font-size: 2.5rem; + text-align: center; + margin-bottom: 1rem; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.section-subtitle { + text-align: center; + color: var(--text-secondary); + font-size: 1.125rem; + margin-bottom: 4rem; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.feature-card { + background: var(--surface); + padding: 2rem; + border-radius: 1rem; + border: 1px solid var(--surface-light); + transition: all 0.3s; +} + +.feature-card:hover { + transform: translateY(-5px); + border-color: var(--primary-color); + box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2); +} + +.feature-icon { + width: 3rem; + height: 3rem; + margin-bottom: 1.5rem; + color: var(--primary-color); +} + +.feature-icon svg { + width: 100%; + height: 100%; +} + +.feature-card h3 { + font-size: 1.25rem; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.feature-card p { + color: var(--text-secondary); + line-height: 1.7; +} + +/* Workflow Section */ +.workflow { + padding: 6rem 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%); +} + +.workflow-steps { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + margin-top: 3rem; +} + +.workflow-step { + flex: 1; + background: var(--surface); + padding: 2rem; + border-radius: 1rem; + text-align: center; + border: 1px solid var(--surface-light); + transition: all 0.3s; +} + +.workflow-step:hover { + transform: translateY(-5px); + border-color: var(--primary-color); +} + +.step-number { + width: 3rem; + height: 3rem; + background: var(--gradient); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + font-size: 1.5rem; + font-weight: 700; +} + +.workflow-arrow { + font-size: 2rem; + color: var(--primary-color); + flex-shrink: 0; +} + +.workflow-step h3 { + margin-bottom: 1rem; + font-size: 1.25rem; +} + +.workflow-step p { + color: var(--text-secondary); +} + +/* Technology Section */ +.technology { + padding: 6rem 0; + background-color: var(--background); +} + +.tech-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.tech-item { + background: var(--surface); + padding: 2rem; + border-radius: 1rem; + border-left: 4px solid var(--primary-color); + transition: all 0.3s; +} + +.tech-item:hover { + border-left-color: var(--secondary-color); + transform: translateX(5px); +} + +.tech-item h3 { + color: var(--primary-color); + margin-bottom: 0.75rem; + font-size: 1.25rem; +} + +.tech-item p { + color: var(--text-secondary); +} + +/* Benefits Section */ +.benefits { + padding: 6rem 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); +} + +.benefits-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.benefit-item { + text-align: center; + padding: 2rem; +} + +.benefit-number { + font-size: 4rem; + font-weight: 700; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 1rem; +} + +.benefit-item p { + font-size: 1.125rem; + color: var(--text-secondary); +} + +/* Download Section */ +.download { + padding: 6rem 0; + background-color: var(--background); +} + +.download-buttons { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin: 3rem 0; +} + +.download-card { + background: var(--surface); + padding: 2rem; + border-radius: 1rem; + text-align: center; + border: 1px solid var(--surface-light); + transition: all 0.3s; +} + +.download-card:hover { + border-color: var(--primary-color); + transform: translateY(-5px); +} + +.download-card h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; +} + +.download-card p { + color: var(--text-muted); + margin-bottom: 1.5rem; +} + +.btn-download { + background: var(--gradient); + color: white; + border: none; + width: 100%; +} + +.btn-download:hover { + transform: translateY(-2px); + box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); +} + +.installation-note { + background: var(--surface); + padding: 2rem; + border-radius: 1rem; + margin-top: 3rem; + border: 1px solid var(--surface-light); +} + +.installation-note h3 { + margin-bottom: 1.5rem; + color: var(--primary-color); +} + +.code-block { + background: var(--background); + padding: 1.5rem; + border-radius: 0.5rem; + border: 1px solid var(--surface-light); + overflow-x: auto; +} + +.code-block code { + color: var(--accent); + font-family: 'Courier New', monospace; + font-size: 0.875rem; + line-height: 1.8; +} + +/* Footer */ +.footer { + background-color: var(--surface); + padding: 4rem 0 2rem; + border-top: 1px solid var(--surface-light); +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 3rem; + margin-bottom: 3rem; +} + +.footer-section h3 { + margin-bottom: 1rem; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.footer-section h4 { + margin-bottom: 1rem; + color: var(--text-primary); +} + +.footer-section p { + color: var(--text-secondary); +} + +.footer-section ul { + list-style: none; +} + +.footer-section ul li { + margin-bottom: 0.5rem; +} + +.footer-section ul li a { + color: var(--text-secondary); + text-decoration: none; + transition: color 0.3s; +} + +.footer-section ul li a:hover { + color: var(--primary-color); +} + +.footer-bottom { + text-align: center; + padding-top: 2rem; + border-top: 1px solid var(--surface-light); + color: var(--text-muted); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .hero .container { + grid-template-columns: 1fr; + gap: 2rem; + } + + .hero-title { + font-size: 2.5rem; + } + + .workflow-steps { + flex-direction: column; + } + + .workflow-arrow { + transform: rotate(90deg); + } + + .nav-menu { + display: none; + } + + .features-grid { + grid-template-columns: 1fr; + } + + .download-buttons { + grid-template-columns: 1fr; + } +} + +/* Scroll Animations */ +.fade-in { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.6s, transform 0.6s; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +} + +/* Smooth Scrolling */ +html { + scroll-behavior: smooth; +} + +/* Selection */ +::selection { + background-color: var(--primary-color); + color: white; +}