2026-03-03 20:47:56 +01:00
<!DOCTYPE html>
< html lang = "de" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > DocuMentor - XSL-Transformations-Toolkit< / title >
2026-03-03 21:19:54 +01:00
< link rel = "stylesheet" href = "fonts/fonts_v3.css" >
2026-03-03 20:47:56 +01:00
< style >
* , * :: before , * :: after {
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
}
: root {
--green : #00ff41 ;
--green-dim : #00cc33 ;
--green-dark : #009922 ;
--green-glow : #00ff41 80 ;
--green-faint : #00ff41 15 ;
--green-subtle : #00ff41 0 a ;
--bg : #0a0a0a ;
--bg-light : #0f0f0f ;
--bg-card : #111111 ;
--border : #00ff41 30 ;
}
html {
scroll-behavior : smooth ;
}
body {
font-family : 'VT323' , monospace ;
background : var ( - - bg ) ;
color : var ( - - green ) ;
font-size : 18 px ;
line-height : 1.6 ;
overflow-x : hidden ;
position : relative ;
}
/* CRT Scan Lines Overlay */
body :: before {
content : '' ;
position : fixed ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
pointer-events : none ;
z-index : 9999 ;
background : repeating-linear-gradient (
0 deg ,
transparent ,
transparent 2 px ,
rgba ( 0 , 0 , 0 , 0.15 ) 2 px ,
rgba ( 0 , 0 , 0 , 0.15 ) 4 px
) ;
}
/* CRT Flicker */
body :: after {
content : '' ;
position : fixed ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
pointer-events : none ;
z-index : 9998 ;
background : radial-gradient ( ellipse at center , transparent 60 % , rgba ( 0 , 0 , 0 , 0.4 ) 100 % ) ;
animation : flicker 0.08 s infinite alternate ;
}
@ keyframes flicker {
0 % { opacity : 0.97 ; }
100 % { opacity : 1 ; }
}
/* Matrix Rain Canvas */
# matrix-canvas {
position : fixed ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
z-index : -1 ;
opacity : 0.06 ;
}
/* Typing cursor blink */
@ keyframes blink-caret {
0 % , 50 % { border-color : var ( - - green ) ; }
51 % , 100 % { border-color : transparent ; }
}
@ keyframes blink {
0 % , 50 % { opacity : 1 ; }
51 % , 100 % { opacity : 0 ; }
}
@ keyframes glow-pulse {
0 % , 100 % { text-shadow : 0 0 10 px var ( - - green - glow ) , 0 0 20 px var ( - - green - glow ) ; }
50 % { text-shadow : 0 0 20 px var ( - - green - glow ) , 0 0 40 px var ( - - green - glow ) , 0 0 60 px var ( - - green - glow ) ; }
}
@ keyframes scanline-move {
0 % { top : -10 % ; }
100 % { top : 110 % ; }
}
@ keyframes type-in {
from { width : 0 ; }
to { width : 100 % ; }
}
@ keyframes fade-in-up {
from { opacity : 0 ; transform : translateY ( 30 px ) ; }
to { opacity : 1 ; transform : translateY ( 0 ) ; }
}
. cursor-blink {
display : inline-block ;
width : 12 px ;
height : 1.1 em ;
background : var ( - - green ) ;
animation : blink 1 s step-end infinite ;
vertical-align : text - bottom ;
margin-left : 2 px ;
}
/* Moving scanline */
. scanline-bar {
position : fixed ;
width : 100 % ;
height : 6 px ;
background : linear-gradient ( 180 deg , transparent , var ( - - green - faint ) , transparent ) ;
z-index : 9997 ;
pointer-events : none ;
animation : scanline-move 8 s linear infinite ;
}
/* Navigation */
nav {
position : fixed ;
top : 0 ;
left : 0 ;
right : 0 ;
z-index : 1000 ;
background : rgba ( 10 , 10 , 10 , 0.95 ) ;
border-bottom : 1 px solid var ( - - border ) ;
padding : 12 px 0 ;
backdrop-filter : blur ( 5 px ) ;
}
nav . nav-inner {
max-width : 1100 px ;
margin : 0 auto ;
padding : 0 24 px ;
display : flex ;
justify-content : space-between ;
align-items : center ;
}
nav . logo {
font-size : 22 px ;
color : var ( - - green ) ;
text-shadow : 0 0 10 px var ( - - green - glow ) ;
letter-spacing : 2 px ;
}
nav . logo span {
color : var ( - - green - dark ) ;
}
nav ul {
list-style : none ;
display : flex ;
gap : 24 px ;
}
nav ul li a {
color : var ( - - green - dim ) ;
text-decoration : none ;
font-family : 'Share Tech Mono' , monospace ;
font-size : 14 px ;
letter-spacing : 1 px ;
transition : color 0.3 s , text - shadow 0.3 s ;
text-transform : uppercase ;
}
nav ul li a : hover {
color : var ( - - green ) ;
text-shadow : 0 0 10 px var ( - - green - glow ) ;
}
. hamburger {
display : none ;
flex-direction : column ;
gap : 5 px ;
cursor : pointer ;
background : none ;
border : none ;
padding : 4 px ;
}
. hamburger span {
display : block ;
width : 24 px ;
height : 2 px ;
background : var ( - - green ) ;
}
/* Sections */
section {
max-width : 1100 px ;
margin : 0 auto ;
padding : 100 px 24 px ;
}
. section-label {
font-family : 'Share Tech Mono' , monospace ;
font-size : 13 px ;
color : var ( - - green - dark ) ;
letter-spacing : 3 px ;
text-transform : uppercase ;
margin-bottom : 8 px ;
}
. section-title {
font-size : 36 px ;
color : var ( - - green ) ;
text-shadow : 0 0 15 px var ( - - green - glow ) ;
margin-bottom : 40 px ;
line-height : 1.3 ;
}
. section-title :: before {
content : '> ' ;
color : var ( - - green - dark ) ;
}
/* ======================== */
/* HERO */
/* ======================== */
# hero {
min-height : 100 vh ;
display : flex ;
flex-direction : column ;
justify-content : center ;
padding-top : 80 px ;
position : relative ;
}
. boot-sequence {
margin-bottom : 40 px ;
}
. boot-line {
font-family : 'Share Tech Mono' , monospace ;
font-size : 14 px ;
color : var ( - - green - dark ) ;
opacity : 0 ;
transform : translateY ( 10 px ) ;
margin-bottom : 4 px ;
letter-spacing : 1 px ;
}
. boot-line . visible {
opacity : 1 ;
transform : translateY ( 0 ) ;
transition : opacity 0.3 s , transform 0.3 s ;
}
. boot-line . ok :: after {
content : ' [OK]' ;
color : var ( - - green ) ;
}
. boot-line . loading :: after {
content : ' ...' ;
animation : blink 1 s step-end infinite ;
}
. hero-title {
font-size : clamp ( 48 px , 8 vw , 90 px ) ;
line-height : 1.1 ;
color : var ( - - green ) ;
text-shadow : 0 0 30 px var ( - - green - glow ) , 0 0 60 px rgba ( 0 , 255 , 65 , 0.3 ) ;
margin-bottom : 16 px ;
animation : glow-pulse 4 s ease-in-out infinite ;
letter-spacing : 4 px ;
}
. hero-tagline {
font-size : 24 px ;
color : var ( - - green - dim ) ;
margin-bottom : 32 px ;
max-width : 700 px ;
}
. hero-tagline . typed-text {
border-right : 2 px solid var ( - - green ) ;
animation : blink - caret 1 s step-end infinite ;
padding-right : 4 px ;
}
. hero-prompt {
font-family : 'Share Tech Mono' , monospace ;
font-size : 15 px ;
color : var ( - - green - dark ) ;
margin-top : 48 px ;
}
. hero-prompt a {
color : var ( - - green ) ;
text-decoration : none ;
border-bottom : 1 px dashed var ( - - green - dark ) ;
transition : text - shadow 0.3 s ;
}
. hero-prompt a : hover {
text-shadow : 0 0 10 px var ( - - green - glow ) ;
}
/* ======================== */
/* FEATURES */
/* ======================== */
. features-grid {
display : grid ;
grid-template-columns : repeat ( auto - fit , minmax ( 320 px , 1 fr ) ) ;
gap : 24 px ;
}
. feature-card {
background : var ( - - bg - card ) ;
border : 1 px solid var ( - - border ) ;
padding : 28 px 24 px ;
position : relative ;
overflow : hidden ;
transition : border-color 0.3 s , box-shadow 0.3 s ;
}
. feature-card : hover {
border-color : var ( - - green - dim ) ;
box-shadow : 0 0 30 px var ( - - green - subtle ) , inset 0 0 30 px var ( - - green - subtle ) ;
}
. feature-card :: before {
content : '' ;
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 2 px ;
background : linear-gradient ( 90 deg , transparent , var ( - - green - dark ) , transparent ) ;
opacity : 0 ;
transition : opacity 0.3 s ;
}
. feature-card : hover :: before {
opacity : 1 ;
}
. feature-icon {
font-size : 28 px ;
margin-bottom : 12 px ;
display : block ;
color : var ( - - green ) ;
text-shadow : 0 0 10 px var ( - - green - glow ) ;
font-family : 'Share Tech Mono' , monospace ;
}
. feature-card h3 {
font-size : 22 px ;
margin-bottom : 10 px ;
color : var ( - - green ) ;
}
. feature-card h3 :: before {
content : '$ ' ;
color : var ( - - green - dark ) ;
font-size : 18 px ;
}
. feature-card p {
color : var ( - - green - dim ) ;
font-size : 16 px ;
line-height : 1.5 ;
}
/* ======================== */
/* WORKFLOW */
/* ======================== */
. workflow-steps {
display : grid ;
gap : 0 ;
position : relative ;
}
. workflow-step {
display : grid ;
grid-template-columns : 60 px 1 fr ;
gap : 20 px ;
padding : 28 px 0 ;
border-bottom : 1 px solid var ( - - border ) ;
position : relative ;
opacity : 0 ;
transform : translateX ( -20 px ) ;
transition : opacity 0.5 s , transform 0.5 s ;
}
. workflow-step . visible {
opacity : 1 ;
transform : translateX ( 0 ) ;
}
. workflow-step : last-child {
border-bottom : none ;
}
. step-number {
width : 50 px ;
height : 50 px ;
border : 2 px solid var ( - - green - dark ) ;
display : flex ;
align-items : center ;
justify-content : center ;
font-size : 24 px ;
color : var ( - - green ) ;
text-shadow : 0 0 10 px var ( - - green - glow ) ;
position : relative ;
flex-shrink : 0 ;
}
. step-number :: before {
content : '' ;
position : absolute ;
top : -2 px ;
left : -2 px ;
right : -2 px ;
bottom : -2 px ;
border : 1 px solid var ( - - green - faint ) ;
}
. step-content h3 {
font-size : 22 px ;
color : var ( - - green ) ;
margin-bottom : 6 px ;
}
. step-content p {
color : var ( - - green - dim ) ;
font-size : 16 px ;
}
. step-content . cmd {
font-family : 'Share Tech Mono' , monospace ;
font-size : 13 px ;
color : var ( - - green - dark ) ;
margin-top : 8 px ;
background : var ( - - bg ) ;
display : inline-block ;
padding : 4 px 10 px ;
border : 1 px solid var ( - - border ) ;
}
/* ======================== */
/* DEMO / TERMINAL OUTPUT */
/* ======================== */
. terminal-window {
background : var ( - - bg ) ;
border : 1 px solid var ( - - border ) ;
overflow : hidden ;
max-width : 900 px ;
margin : 0 auto ;
}
. terminal-header {
background : var ( - - bg - light ) ;
padding : 10 px 16 px ;
display : flex ;
align-items : center ;
gap : 8 px ;
border-bottom : 1 px solid var ( - - border ) ;
}
. terminal-dot {
width : 10 px ;
height : 10 px ;
border-radius : 50 % ;
border : 1 px solid var ( - - green - dark ) ;
}
. terminal-dot . r { background : #ff5f56 80 ; border-color : #ff5f56 ; }
. terminal-dot . y { background : #ffbd2e 80 ; border-color : #ffbd2e ; }
. terminal-dot . g { background : #27c93f 80 ; border-color : #27c93f ; }
. terminal-title {
font-family : 'Share Tech Mono' , monospace ;
font-size : 12 px ;
color : var ( - - green - dark ) ;
margin-left : 12 px ;
letter-spacing : 1 px ;
}
. terminal-body {
padding : 20 px 24 px ;
font-family : 'Share Tech Mono' , monospace ;
font-size : 14 px ;
line-height : 1.8 ;
min-height : 300 px ;
overflow-x : auto ;
}
. terminal-body . prompt {
color : var ( - - green ) ;
}
. terminal-body . cmd-text {
color : var ( - - green ) ;
}
. terminal-body . output {
color : var ( - - green - dim ) ;
}
. terminal-body . success {
color : var ( - - green ) ;
}
. terminal-body . warning {
color : #ffbd2e ;
}
. terminal-body . info {
color : var ( - - green - dark ) ;
}
. terminal-body . highlight {
color : var ( - - green ) ;
text-shadow : 0 0 8 px var ( - - green - glow ) ;
}
. terminal-line {
margin-bottom : 2 px ;
white-space : pre ;
}
/* ======================== */
/* TECH STACK */
/* ======================== */
. tech-grid {
display : grid ;
grid-template-columns : repeat ( auto - fit , minmax ( 200 px , 1 fr ) ) ;
gap : 16 px ;
}
. tech-item {
background : var ( - - bg - card ) ;
border : 1 px solid var ( - - border ) ;
padding : 20 px ;
text-align : center ;
transition : border-color 0.3 s , transform 0.2 s ;
}
. tech-item : hover {
border-color : var ( - - green - dim ) ;
transform : translateY ( -2 px ) ;
}
. tech-item . tech-name {
font-size : 20 px ;
color : var ( - - green ) ;
margin-bottom : 6 px ;
text-shadow : 0 0 8 px var ( - - green - glow ) ;
}
. tech-item . tech-desc {
font-family : 'Share Tech Mono' , monospace ;
font-size : 12 px ;
color : var ( - - green - dark ) ;
letter-spacing : 1 px ;
text-transform : uppercase ;
}
. tech-item . tech-icon {
font-size : 32 px ;
margin-bottom : 10 px ;
display : block ;
}
/* ======================== */
/* DOWNLOAD / INSTALL */
/* ======================== */
# download {
text-align : center ;
}
. install-block {
background : var ( - - bg - card ) ;
border : 1 px solid var ( - - border ) ;
padding : 32 px ;
max-width : 700 px ;
margin : 0 auto 32 px ;
text-align : left ;
position : relative ;
}
. install-block . install-label {
font-family : 'Share Tech Mono' , monospace ;
font-size : 12 px ;
color : var ( - - green - dark ) ;
letter-spacing : 2 px ;
text-transform : uppercase ;
margin-bottom : 16 px ;
}
. install-cmd {
font-family : 'Share Tech Mono' , monospace ;
font-size : 16 px ;
color : var ( - - green ) ;
background : var ( - - bg ) ;
padding : 16 px 20 px ;
border : 1 px solid var ( - - border ) ;
display : flex ;
align-items : center ;
justify-content : space-between ;
gap : 12 px ;
cursor : pointer ;
transition : border-color 0.3 s ;
margin-bottom : 12 px ;
flex-wrap : wrap ;
}
. install-cmd : hover {
border-color : var ( - - green - dim ) ;
}
. install-cmd . cmd-prefix {
color : var ( - - green - dark ) ;
user-select : none ;
}
. install-cmd . copy-hint {
font-size : 11 px ;
color : var ( - - green - dark ) ;
letter-spacing : 1 px ;
user-select : none ;
}
. install-note {
font-family : 'Share Tech Mono' , monospace ;
font-size : 13 px ;
color : var ( - - green - dark ) ;
margin-top : 12 px ;
}
. requirements-list {
text-align : left ;
max-width : 700 px ;
margin : 32 px auto 0 ;
font-family : 'Share Tech Mono' , monospace ;
font-size : 14 px ;
color : var ( - - green - dim ) ;
}
. requirements-list li {
list-style : none ;
padding : 6 px 0 ;
border-bottom : 1 px solid var ( - - border ) ;
}
. requirements-list li :: before {
content : '[+] ' ;
color : var ( - - green - dark ) ;
}
/* ======================== */
/* FOOTER */
/* ======================== */
footer {
border-top : 1 px solid var ( - - border ) ;
padding : 40 px 24 px ;
text-align : center ;
}
footer . footer-inner {
max-width : 1100 px ;
margin : 0 auto ;
}
. footer-ascii {
font-family : 'Share Tech Mono' , monospace ;
font-size : 11 px ;
color : var ( - - green - dark ) ;
margin-bottom : 20 px ;
line-height : 1.3 ;
white-space : pre ;
overflow-x : auto ;
}
. footer-links {
display : flex ;
justify-content : center ;
gap : 24 px ;
margin-bottom : 16 px ;
flex-wrap : wrap ;
}
. footer-links a {
font-family : 'Share Tech Mono' , monospace ;
font-size : 13 px ;
color : var ( - - green - dark ) ;
text-decoration : none ;
letter-spacing : 1 px ;
transition : color 0.3 s ;
}
. footer-links a : hover {
color : var ( - - green ) ;
}
. footer-copy {
font-family : 'Share Tech Mono' , monospace ;
font-size : 12 px ;
color : #333 ;
letter-spacing : 1 px ;
}
/* Scroll animations */
. reveal {
opacity : 0 ;
transform : translateY ( 30 px ) ;
transition : opacity 0.6 s ease , transform 0.6 s ease ;
}
. reveal . visible {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
/* Responsive */
@ media ( max-width : 768px ) {
nav ul {
display : none ;
position : absolute ;
top : 100 % ;
left : 0 ;
right : 0 ;
background : rgba ( 10 , 10 , 10 , 0.98 ) ;
flex-direction : column ;
padding : 16 px 24 px ;
border-bottom : 1 px solid var ( - - border ) ;
gap : 16 px ;
}
nav ul . open {
display : flex ;
}
. hamburger {
display : flex ;
}
. hero-title {
letter-spacing : 2 px ;
}
. features-grid {
grid-template-columns : 1 fr ;
}
. workflow-step {
grid-template-columns : 50 px 1 fr ;
gap : 14 px ;
}
. tech-grid {
grid-template-columns : repeat ( 2 , 1 fr ) ;
}
section {
padding : 60 px 16 px ;
}
. terminal-body {
font-size : 12 px ;
padding : 14 px 16 px ;
}
. footer-ascii {
font-size : 8 px ;
}
}
@ media ( max-width : 480px ) {
. tech-grid {
grid-template-columns : 1 fr ;
}
}
< / style >
< / head >
< body >
< canvas id = "matrix-canvas" > < / canvas >
< div class = "scanline-bar" > < / div >
<!-- Navigation -->
< nav >
< div class = "nav-inner" >
< div class = "logo" > < span > [< / span > DocuMentor< span > ]< / span > < / div >
< button class = "hamburger" id = "hamburger" aria-label = "Menu" >
< span > < / span > < span > < / span > < span > < / span >
< / button >
< ul id = "nav-links" >
< li > < a href = "#features" > Features< / a > < / li >
< li > < a href = "#workflow" > Workflow< / a > < / li >
< li > < a href = "#demo" > Demo< / a > < / li >
< li > < a href = "#techstack" > Tech-Stack< / a > < / li >
< li > < a href = "#download" > Download< / a > < / li >
< / ul >
< / div >
< / nav >
<!-- HERO -->
< section id = "hero" >
< div class = "boot-sequence" id = "boot-sequence" >
< div class = "boot-line ok" > BIOS POST abgeschlossen< / div >
< div class = "boot-line ok" > PySide6 Runtime v6.8 geladen< / div >
< div class = "boot-line ok" > Saxon HE 12.5 initialisiert< / div >
< div class = "boot-line ok" > Apache FOP 2.10 bereit< / div >
< div class = "boot-line ok" > PostgreSQL-Verbindung hergestellt< / div >
< div class = "boot-line ok" > XSL-Abhängigkeitsgraph aufgebaut< / div >
< div class = "boot-line ok" > blake2b Hash-Engine aktiv< / div >
< div class = "boot-line" > System bereit. Starte DocuMentor...< / div >
< / div >
< h1 class = "hero-title" > DocuMentor< / h1 >
< p class = "hero-tagline" >
< span class = "typed-text" id = "tagline" > < / span >
< / p >
< p class = "hero-prompt" >
< span style = "color:var(--green-dark)" > user@documentor:~$< / span >
< a href = "#features" > ./erkunde_features.sh< / a >
< span class = "cursor-blink" > < / span >
< / p >
< / section >
<!-- FEATURES -->
< section id = "features" >
< div class = "section-label" > // KERNFUNKTIONEN< / div >
< h2 class = "section-title" > Feature-Matrix< / h2 >
< div class = "features-grid" >
< div class = "feature-card reveal" >
< span class = "feature-icon" > [/\]< / span >
< h3 > Baumstruktur< / h3 >
< p > Hierarchische Organisation von XSL-Transformationen mit TreeNode-Architektur. Verwalte komplexe Abhängigkeitsketten über eine intuitive Baumansicht mit Drag-and-Drop.< / p >
< / div >
< div class = "feature-card reveal" >
< span class = "feature-icon" > [< > ]< / span >
< h3 > PDF-Diff< / h3 >
< p > Visueller Drei-Panel-Vergleich: Referenz, Differenz und Neu. Alpha-Blending Overlay mit Zoom- und Pan-Funktionalitaet zum pixelgenauen Abgleich von PDF-Änderungen.< / p >
< / div >
< div class = "feature-card reveal" >
< span class = "feature-icon" > [##]< / span >
< h3 > Hash-Tracking< / h3 >
< p > Automatische blake2b-Hashsummen für alle XML-Dateien. Änderungen werden zuverlässig erkannt und im project.yaml persistent gespeichert.< / p >
< / div >
< div class = "feature-card reveal" >
< span class = "feature-icon" > [~~]< / span >
< h3 > Async-Verarbeitung< / h3 >
< p > Nicht-blockierende Hintergrund-Threads für Hash-Berechnung und Datenbankabfragen. Die GUI bleibt stets responsiv - mit Abbrechen-Dialog und Timeout-Steuerung.< / p >
< / div >
< div class = "feature-card reveal" >
< span class = "feature-icon" > [db]< / span >
< h3 > PostgreSQL< / h3 >
< p > Native Datenbankintegration mit ConnectorX und Polars DataFrames. SSL-Modus-Unterstützung und asynchrone Verbindungstests inklusive.< / p >
< / div >
< div class = "feature-card reveal" >
< span class = "feature-icon" > [=>]< / span >
< h3 > Toolchain-Konfiguration< / h3 >
< p > Flexible Verwaltung von Java VM, Saxon, Apache FOP und diff-pdf. ID-basierte Referenzierung ermöglicht projektübergreifende Konfigurationsprofile.< / p >
< / div >
< / div >
< / section >
<!-- WORKFLOW -->
< section id = "workflow" >
< div class = "section-label" > // ARBEITSABLAUF< / div >
< h2 class = "section-title" > Workflow-Pipeline< / h2 >
< div class = "workflow-steps" >
< div class = "workflow-step reveal" >
< div class = "step-number" > 01< / div >
< div class = "step-content" >
< h3 > XSL-Dateien bearbeiten< / h3 >
< p > Führe die benötigten Änderungen an den XSL-Stylesheets durch. DocuMentor Überwacht den Abhängigkeitsgraphen von über 100 verknüpften Dateien via xsl:import und xsl:include.< / p >
< span class = "cmd" > vim vorlage_urkunde.xsl< / span >
< / div >
< / div >
< div class = "workflow-step reveal" >
< div class = "step-number" > 02< / div >
< div class = "step-content" >
< h3 > Transformation starten< / h3 >
< p > Starte die Saxon-Transformation direkt aus dem DocuMentor. Die gesamte Toolchain - von XSLT über FOP bis zur PDF-Generierung - wird automatisch orchestriert.< / p >
< span class = "cmd" > saxon -> fop -> pdf-output/< / span >
< / div >
< / div >
< div class = "workflow-step reveal" >
< div class = "step-number" > 03< / div >
< div class = "step-content" >
< h3 > PDF-Diff begutachten< / h3 >
< p > Vergleiche die neu generierte PDF mit der Referenzversion im Drei-Panel-Viewer. Visuelles Alpha-Blending hebt jede Änderung hervor - Schrift, Layout, Positionen.< / p >
< span class = "cmd" > diff-pdf --view referenz.pdf neu.pdf< / span >
< / div >
< / div >
< div class = "workflow-step reveal" >
< div class = "step-number" > 04< / div >
< div class = "step-content" >
< h3 > Ergebnis verifizieren< / h3 >
< p > Prüfe: Wurden nur die beabsichtigten PDF-Dateien geändert? Stimmt die Änderung mit der Erwartung überein? Bei Bedarf: zurück zu Schritt 1.< / p >
< span class = "cmd" > status: VERIFIED | RETRY< / span >
< / div >
< / div >
< / div >
< / section >
<!-- DEMO -->
< section id = "demo" >
< div class = "section-label" > // LIVE-AUSGABE< / div >
< h2 class = "section-title" > Terminal-Vorschau< / h2 >
< div class = "terminal-window reveal" >
< div class = "terminal-header" >
< div class = "terminal-dot r" > < / div >
< div class = "terminal-dot y" > < / div >
< div class = "terminal-dot g" > < / div >
< span class = "terminal-title" > documentor@workstation:~/projekte/flexnow< / span >
< / div >
< div class = "terminal-body" id = "terminal-output" >
< div class = "terminal-line" > < span class = "prompt" > user@documentor:~$< / span > < span class = "cmd-text" > documentor --projekt flexnow_urkunden< / span > < / div >
< div class = "terminal-line" > < span class = "info" > [INFO]< / span > < span class = "output" > Lade project.yaml ...< / span > < / div >
< div class = "terminal-line" > < span class = "info" > [INFO]< / span > < span class = "output" > Projektverzeichnis: /srv/flexnow/xsl-vorlagen< / span > < / div >
< div class = "terminal-line" > < span class = "info" > [INFO]< / span > < span class = "output" > Gefundene XSL-Dateien: 147< / span > < / div >
< div class = "terminal-line" > < span class = "info" > [INFO]< / span > < span class = "output" > Abhängigkeitsgraph: 23 Import-Ketten aufgeloest< / span > < / div >
< div class = "terminal-line" > < span class = "info" > [INFO]< / span > < span class = "output" > Hash-Berechnung gestartet (blake2b, async) ...< / span > < / div >
< div class = "terminal-line" > < / div >
< div class = "terminal-line" > < span class = "success" > [HASH]< / span > < span class = "output" > urkunde_basis.xml blake2b:a4f8e2..OK< / span > < / div >
< div class = "terminal-line" > < span class = "success" > [HASH]< / span > < span class = "output" > zeugnis_master.xml blake2b:7c3d91..OK< / span > < / div >
< div class = "terminal-line" > < span class = "warning" > [HASH]< / span > < span class = "output" > bescheid_v3.xml blake2b:GEÄNDERT< / span > < / div >
< div class = "terminal-line" > < span class = "success" > [HASH]< / span > < span class = "output" > notenblatt.xml blake2b:f1b8a0..OK< / span > < / div >
< div class = "terminal-line" > < / div >
< div class = "terminal-line" > < span class = "info" > [XSLT]< / span > < span class = "output" > Saxon HE 12.5 - Transformation läuft ...< / span > < / div >
< div class = "terminal-line" > < span class = "info" > [FOP ]< / span > < span class = "output" > Apache FOP 2.10 - PDF-Generierung ...< / span > < / div >
< div class = "terminal-line" > < span class = "success" > [DONE]< / span > < span class = "highlight" > 4 PDFs generiert in 3.2s< / span > < / div >
< div class = "terminal-line" > < / div >
< div class = "terminal-line" > < span class = "info" > [DIFF]< / span > < span class = "output" > Vergleiche Referenz < - > Neu ...< / span > < / div >
< div class = "terminal-line" > < span class = "success" > [DIFF]< / span > < span class = "output" > urkunde_basis.pdf IDENTISCH< / span > < / div >
< div class = "terminal-line" > < span class = "success" > [DIFF]< / span > < span class = "output" > zeugnis_master.pdf IDENTISCH< / span > < / div >
< div class = "terminal-line" > < span class = "warning" > [DIFF]< / span > < span class = "highlight" > bescheid_v3.pdf 2 Seiten geändert< / span > < / div >
< div class = "terminal-line" > < span class = "success" > [DIFF]< / span > < span class = "output" > notenblatt.pdf IDENTISCH< / span > < / div >
< div class = "terminal-line" > < / div >
< div class = "terminal-line" > < span class = "prompt" > user@documentor:~$< / span > < span class = "cursor-blink" > < / span > < / div >
< / div >
< / div >
< / section >
<!-- TECH STACK -->
< section id = "techstack" >
< div class = "section-label" > // TECHNOLOGIE< / div >
< h2 class = "section-title" > Tech-Stack< / h2 >
< div class = "tech-grid" >
< div class = "tech-item reveal" >
< span class = "tech-icon" > Py< / span >
< div class = "tech-name" > Python< / div >
< div class = "tech-desc" > Laufzeitumgebung< / div >
< / div >
< div class = "tech-item reveal" >
< span class = "tech-icon" > Qt< / span >
< div class = "tech-name" > PySide6< / div >
< div class = "tech-desc" > GUI-Framework< / div >
< / div >
< div class = "tech-item reveal" >
< span class = "tech-icon" > Sx< / span >
< div class = "tech-name" > Saxon< / div >
< div class = "tech-desc" > XSLT-Prozessor< / div >
< / div >
< div class = "tech-item reveal" >
< span class = "tech-icon" > Fp< / span >
< div class = "tech-name" > Apache FOP< / div >
< div class = "tech-desc" > PDF-Generierung< / div >
< / div >
< div class = "tech-item reveal" >
< span class = "tech-icon" > Df< / span >
< div class = "tech-name" > diff-pdf< / div >
< div class = "tech-desc" > PDF-Vergleich< / div >
< / div >
< div class = "tech-item reveal" >
< span class = "tech-icon" > Pg< / span >
< div class = "tech-name" > PostgreSQL< / div >
< div class = "tech-desc" > Datenbank< / div >
< / div >
< div class = "tech-item reveal" >
< span class = "tech-icon" > Pl< / span >
< div class = "tech-name" > Polars< / div >
< div class = "tech-desc" > DataFrames< / div >
< / div >
< div class = "tech-item reveal" >
< span class = "tech-icon" > Pd< / span >
< div class = "tech-name" > Pydantic< / div >
< div class = "tech-desc" > Konfiguration< / div >
< / div >
< / div >
< / section >
<!-- DOWNLOAD -->
< section id = "download" >
< div class = "section-label" > // INSTALLATION< / div >
< h2 class = "section-title" > Erste Schritte< / h2 >
< div class = "install-block" >
< div class = "install-label" > Repository klonen< / div >
< div class = "install-cmd" onclick = "copyCmd(this, 'git clone https://github.com/your-org/documentor.git')" >
< div > < span class = "cmd-prefix" > $ < / span > git clone https://github.com/your-org/documentor.git< / div >
< span class = "copy-hint" > [KLICK ZUM KOPIEREN]< / span >
< / div >
< div class = "install-label" style = "margin-top:20px" > Abhängigkeiten installieren< / div >
< div class = "install-cmd" onclick = "copyCmd(this, 'cd documentor && uv sync')" >
< div > < span class = "cmd-prefix" > $ < / span > cd documentor & & uv sync< / div >
< span class = "copy-hint" > [KLICK ZUM KOPIEREN]< / span >
< / div >
< div class = "install-label" style = "margin-top:20px" > Anwendung starten< / div >
< div class = "install-cmd" onclick = "copyCmd(this, 'uv run python src/main.py')" >
< div > < span class = "cmd-prefix" > $ < / span > uv run python src/main.py< / div >
< span class = "copy-hint" > [KLICK ZUM KOPIEREN]< / span >
< / div >
< p class = "install-note" > // Verwendet den uv-Paketmanager für schnelle, reproduzierbare Builds< / p >
< / div >
< ul class = "requirements-list" >
< li > Python 3.13 oder höher< / li >
< li > Java Runtime für Saxon< / li >
< li > Apache FOP 2.x< / li >
< li > diff-pdf (optional, für PDF-Vergleich)< / li >
< li > PostgreSQL-Server (optional, für Datenbankintegration)< / li >
< li > uv-Paketmanager< / li >
< / ul >
< / section >
<!-- FOOTER -->
< footer >
< div class = "footer-inner" >
< div class = "footer-ascii" >
____ __ __ _
| _ \ ___ ___ _ | \/ | ___ _ __ | |_ ___ _ __
| | | |/ _ \ / __| | | | |\/| |/ _ \ '_ \| __/ _ \| '__|
| |_| | (_) | (__| |_| | | | | __/ | | | || (_) | |
|____/ \___/ \___|\__,_|_| |_|\___|_| |_|\__\___/|_|
< / div >
< div class = "footer-links" >
< a href = "#hero" > // NACH OBEN< / a >
< a href = "https://github.com/your-org/documentor" target = "_blank" > // GITHUB< / a >
< a href = "#features" > // FEATURES< / a >
< a href = "#download" > // DOWNLOAD< / a >
< / div >
< p class = "footer-copy" > © 2026 DocuMentor | XSL-Transformations-Toolkit | Gebaut mit PySide6< / p >
< / div >
< / footer >
< script >
// ============================
// Matrix Rain
// ============================
const canvas = document . getElementById ( 'matrix-canvas' ) ;
const ctx = canvas . getContext ( '2d' ) ;
function resizeCanvas ( ) {
canvas . width = window . innerWidth ;
canvas . height = window . innerHeight ;
}
resizeCanvas ( ) ;
window . addEventListener ( 'resize' , resizeCanvas ) ;
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789<>/={}[];:\'\"!@#$%^&*()_+-~`|\\' . split ( '' ) ;
const fontSize = 14 ;
let columns = Math . floor ( canvas . width / fontSize ) ;
let drops = Array ( columns ) . fill ( 1 ) ;
function drawMatrix ( ) {
ctx . fillStyle = 'rgba(10, 10, 10, 0.05)' ;
ctx . fillRect ( 0 , 0 , canvas . width , canvas . height ) ;
ctx . fillStyle = '#00ff41' ;
ctx . font = fontSize + 'px "Share Tech Mono", monospace' ;
for ( let i = 0 ; i < drops . length ; i ++ ) {
const text = chars [ Math . floor ( Math . random ( ) * chars . length ) ] ;
ctx . fillText ( text , i * fontSize , drops [ i ] * fontSize ) ;
if ( drops [ i ] * fontSize > canvas . height && Math . random ( ) > 0.975 ) {
drops [ i ] = 0 ;
}
drops [ i ] ++ ;
}
}
setInterval ( drawMatrix , 50 ) ;
window . addEventListener ( 'resize' , ( ) => {
columns = Math . floor ( canvas . width / fontSize ) ;
drops = Array ( columns ) . fill ( 1 ) ;
} ) ;
// ============================
// Boot Sequence Animation
// ============================
const bootLines = document . querySelectorAll ( '.boot-line' ) ;
bootLines . forEach ( ( line , i ) => {
setTimeout ( ( ) => {
line . classList . add ( 'visible' ) ;
} , 300 + i * 250 ) ;
} ) ;
// ============================
// Tagline Typing Effect
// ============================
const tagline = 'XSL-Transformationen validieren. PDF-Änderungen visualisieren. Qualität sichern.' ;
const taglineEl = document . getElementById ( 'tagline' ) ;
let charIndex = 0 ;
function typeTagline ( ) {
if ( charIndex < tagline . length ) {
taglineEl . textContent = tagline . substring ( 0 , charIndex + 1 ) ;
charIndex ++ ;
setTimeout ( typeTagline , 35 ) ;
}
}
// Start typing after boot sequence
setTimeout ( typeTagline , 300 + bootLines . length * 250 + 500 ) ;
// ============================
// Scroll Reveal
// ============================
const revealElements = document . querySelectorAll ( '.reveal, .workflow-step' ) ;
const revealObserver = new IntersectionObserver ( ( entries ) => {
entries . forEach ( entry => {
if ( entry . isIntersecting ) {
entry . target . classList . add ( 'visible' ) ;
}
} ) ;
} , {
threshold : 0.15 ,
rootMargin : '0px 0px -50px 0px'
} ) ;
revealElements . forEach ( el => revealObserver . observe ( el ) ) ;
// ============================
// Mobile Nav Toggle
// ============================
document . getElementById ( 'hamburger' ) . addEventListener ( 'click' , ( ) => {
document . getElementById ( 'nav-links' ) . classList . toggle ( 'open' ) ;
} ) ;
// Close nav on link click (mobile)
document . querySelectorAll ( '#nav-links a' ) . forEach ( link => {
link . addEventListener ( 'click' , ( ) => {
document . getElementById ( 'nav-links' ) . classList . remove ( 'open' ) ;
} ) ;
} ) ;
// ============================
// Copy Command to Clipboard
// ============================
function copyCmd ( el , text ) {
navigator . clipboard . writeText ( text ) . then ( ( ) => {
const hint = el . querySelector ( '.copy-hint' ) ;
const original = hint . textContent ;
hint . textContent = '[KOPIERT!]' ;
hint . style . color = 'var(--green)' ;
setTimeout ( ( ) => {
hint . textContent = original ;
hint . style . color = '' ;
} , 2000 ) ;
} ) ;
}
< / script >
< / body >
< / html >
