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-Transformationen unter Kontrolle</ title >
2026-03-03 21:19:54 +01:00
< link rel = "stylesheet" href = "fonts/fonts_v2.css" >
2026-03-03 20:47:56 +01:00
< style >
*, * :: before , * :: after {
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
}
: root {
--black : #000000 ;
--white : #ffffff ;
--off-white : #f0f0f0 ;
--neon-red : #ff0033 ;
--neon-red-dim : #cc0029 ;
--gray-dark : #1a1a1a ;
--gray-mid : #333333 ;
--gray-light : #888888 ;
--border-thick : 4 px ;
--border-thin : 2 px ;
--font-mono : 'Space Mono' , 'Courier New' , monospace ;
}
html {
scroll-behavior : auto ;
}
body {
font-family : var ( -- font - mono );
background : var ( -- white );
color : var ( -- black );
line-height : 1.6 ;
overflow-x : hidden ;
}
/* ========== BRUTALIST RESETS ========== */
:: selection {
background : var ( -- neon - red );
color : var ( -- white );
}
a {
color : var ( -- neon - red );
text-decoration : none ;
border-bottom : var ( -- border - thin ) solid var ( -- neon - red );
}
a : hover {
background : var ( -- neon - red );
color : var ( -- white );
}
/* ========== GRID OVERLAY ========== */
body :: before {
content : '' ;
position : fixed ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
background-image :
linear-gradient ( 90 deg , rgba ( 0 , 0 , 0 , 0.03 ) 1 px , transparent 1 px ),
linear-gradient ( 0 deg , rgba ( 0 , 0 , 0 , 0.03 ) 1 px , transparent 1 px );
background-size : 60 px 60 px ;
pointer-events : none ;
z-index : 0 ;
}
/* ========== NAVIGATION ========== */
nav {
position : fixed ;
top : 0 ;
left : 0 ;
width : 100 % ;
z-index : 1000 ;
background : var ( -- black );
color : var ( -- white );
border-bottom : var ( -- border - thick ) solid var ( -- neon - red );
padding : 0 ;
}
nav . nav-inner {
display : flex ;
align-items : stretch ;
justify-content : space-between ;
max-width : 1400 px ;
margin : 0 auto ;
}
nav . nav-brand {
font-weight : 700 ;
font-size : 1.1 rem ;
text-transform : uppercase ;
letter-spacing : 3 px ;
padding : 14 px 24 px ;
border-right : var ( -- border - thin ) solid var ( -- gray - mid );
color : var ( -- white );
border-bottom : none ;
display : flex ;
align-items : center ;
gap : 8 px ;
}
nav . nav-brand span {
color : var ( -- neon - red );
}
nav . nav-links {
display : flex ;
list-style : none ;
align-items : stretch ;
}
nav . nav-links li {
border-left : var ( -- border - thin ) solid var ( -- gray - mid );
}
nav . nav-links a {
display : flex ;
align-items : center ;
padding : 14 px 20 px ;
color : var ( -- white );
text-transform : uppercase ;
font-size : 0.7 rem ;
letter-spacing : 2 px ;
border-bottom : none ;
transition : none ;
}
nav . nav-links a : hover {
background : var ( -- neon - red );
color : var ( -- white );
}
/* ========== HERO ========== */
. hero {
position : relative ;
min-height : 100 vh ;
display : flex ;
flex-direction : column ;
justify-content : center ;
padding : 120 px 40 px 80 px ;
background : var ( -- black );
color : var ( -- white );
border-bottom : var ( -- border - thick ) solid var ( -- neon - red );
overflow : hidden ;
}
. hero :: before {
content : 'XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF' ;
position : absolute ;
top : 0 ;
left : 0 ;
width : 200 % ;
height : 100 % ;
font-size : 1.2 rem ;
color : rgba ( 255 , 255 , 255 , 0.03 );
word-break : break-all ;
line-height : 2 ;
letter-spacing : 8 px ;
pointer-events : none ;
z-index : 0 ;
}
. hero-content {
position : relative ;
z-index : 1 ;
max-width : 1400 px ;
margin : 0 auto ;
width : 100 % ;
}
. hero-label {
display : inline-block ;
font-size : 0.7 rem ;
text-transform : uppercase ;
letter-spacing : 4 px ;
border : var ( -- border - thin ) solid var ( -- neon - red );
padding : 6 px 16 px ;
margin-bottom : 40 px ;
color : var ( -- neon - red );
}
. hero h1 {
font-family : var ( -- font - mono );
font-size : clamp ( 3 rem , 10 vw , 8 rem );
font-weight : 700 ;
text-transform : uppercase ;
line-height : 0.95 ;
letter-spacing : -3 px ;
margin-bottom : 40 px ;
}
. hero h1 . red {
color : var ( -- neon - red );
display : block ;
}
. hero-tagline {
font-size : 1.1 rem ;
max-width : 700 px ;
line-height : 1.8 ;
color : var ( -- gray - light );
border-left : var ( -- border - thick ) solid var ( -- neon - red );
padding-left : 24 px ;
margin-bottom : 50 px ;
}
. hero-stats {
display : flex ;
gap : 0 ;
border : var ( -- border - thick ) solid var ( -- white );
width : fit-content ;
}
. hero-stat {
padding : 20 px 32 px ;
border-right : var ( -- border - thin ) solid var ( -- gray - mid );
text-align : center ;
}
. hero-stat : last-child {
border-right : none ;
}
. hero-stat . number {
font-size : 2 rem ;
font-weight : 700 ;
color : var ( -- neon - red );
display : block ;
}
. hero-stat . label {
font-size : 0.6 rem ;
text-transform : uppercase ;
letter-spacing : 2 px ;
color : var ( -- gray - light );
}
/* ========== SECTION BASE ========== */
section {
position : relative ;
z-index : 1 ;
padding : 100 px 40 px ;
}
. section-inner {
max-width : 1400 px ;
margin : 0 auto ;
}
. section-header {
margin-bottom : 60 px ;
}
. section-number {
font-size : 0.7 rem ;
text-transform : uppercase ;
letter-spacing : 4 px ;
color : var ( -- neon - red );
margin-bottom : 12 px ;
display : block ;
}
. section-title {
font-size : clamp ( 2 rem , 5 vw , 3.5 rem );
font-weight : 700 ;
text-transform : uppercase ;
letter-spacing : -1 px ;
line-height : 1.1 ;
}
. section-title . muted {
color : var ( -- gray - light );
}
. section-divider {
width : 100 % ;
height : var ( -- border - thick );
background : var ( -- black );
margin-top : 20 px ;
}
/* ========== FEATURES ========== */
. features {
background : var ( -- white );
border-bottom : var ( -- border - thick ) solid var ( -- black );
}
. features-grid {
display : grid ;
grid-template-columns : repeat ( 3 , 1 fr );
border : var ( -- border - thick ) solid var ( -- black );
}
. feature-card {
padding : 40 px 32 px ;
border-right : var ( -- border - thin ) solid var ( -- black );
border-bottom : var ( -- border - thin ) solid var ( -- black );
position : relative ;
transition : none ;
}
. feature-card : nth-child ( 3n ) {
border-right : none ;
}
. feature-card : nth-child ( n + 4 ) {
border-bottom : none ;
}
. feature-card : hover {
background : var ( -- black );
color : var ( -- white );
}
. feature-card : hover . feature-icon {
color : var ( -- neon - red );
}
. feature-card : hover . feature-num {
color : var ( -- neon - red );
}
. feature-icon {
font-size : 2.5 rem ;
margin-bottom : 16 px ;
display : block ;
filter : grayscale ( 0 );
}
. feature-num {
font-size : 0.65 rem ;
text-transform : uppercase ;
letter-spacing : 3 px ;
color : var ( -- gray - light );
margin-bottom : 12 px ;
display : block ;
}
. feature-card h3 {
font-size : 1.1 rem ;
text-transform : uppercase ;
letter-spacing : 1 px ;
margin-bottom : 12 px ;
font-weight : 700 ;
}
. feature-card p {
font-size : 0.8 rem ;
line-height : 1.7 ;
color : var ( -- gray - light );
}
. feature-card : hover p {
color : var ( -- gray - light );
}
/* ========== WORKFLOW ========== */
. workflow {
background : var ( -- black );
color : var ( -- white );
border-bottom : var ( -- border - thick ) solid var ( -- neon - red );
}
. workflow . section-title {
color : var ( -- white );
}
. workflow . section-divider {
background : var ( -- white );
}
. workflow-steps {
display : grid ;
grid-template-columns : repeat ( 4 , 1 fr );
gap : 0 ;
border : var ( -- border - thick ) solid var ( -- white );
}
. workflow-step {
padding : 40 px 28 px ;
border-right : var ( -- border - thin ) solid var ( -- gray - mid );
position : relative ;
}
. workflow-step : last-child {
border-right : none ;
}
. step-num {
font-size : 4 rem ;
font-weight : 700 ;
color : var ( -- neon - red );
line-height : 1 ;
margin-bottom : 20 px ;
display : block ;
}
. workflow-step h3 {
font-size : 1 rem ;
text-transform : uppercase ;
letter-spacing : 1 px ;
margin-bottom : 12 px ;
font-weight : 700 ;
}
. workflow-step p {
font-size : 0.78 rem ;
line-height : 1.7 ;
color : var ( -- gray - light );
}
. workflow-step . arrow {
position : absolute ;
right : -14 px ;
top : 50 % ;
transform : translateY ( -50 % );
font-size : 1.5 rem ;
color : var ( -- neon - red );
z-index : 2 ;
}
/* ========== DEMO / SCREENSHOT ========== */
. demo {
background : var ( -- off - white );
border-bottom : var ( -- border - thick ) solid var ( -- black );
}
. demo-mockup {
border : var ( -- border - thick ) solid var ( -- black );
background : var ( -- white );
position : relative ;
}
. demo-titlebar {
background : var ( -- black );
color : var ( -- white );
padding : 10 px 20 px ;
display : flex ;
align-items : center ;
justify-content : space-between ;
font-size : 0.75 rem ;
text-transform : uppercase ;
letter-spacing : 2 px ;
}
. demo-dots {
display : flex ;
gap : 8 px ;
}
. demo-dot {
width : 12 px ;
height : 12 px ;
border : var ( -- border - thin ) solid var ( -- white );
}
. demo-dot . red {
background : var ( -- neon - red );
border-color : var ( -- neon - red );
}
. demo-body {
display : grid ;
grid-template-columns : 260 px 1 fr ;
min-height : 500 px ;
}
. demo-sidebar {
border-right : var ( -- border - thick ) solid var ( -- black );
padding : 20 px ;
font-size : 0.72 rem ;
background : var ( -- off - white );
}
. demo-tree-item {
padding : 6 px 0 ;
padding-left : 0 ;
border-bottom : 1 px solid #ddd ;
}
. demo-tree-item . indent-1 { padding-left : 16 px ; }
. demo-tree-item . indent-2 { padding-left : 32 px ; }
. demo-tree-item . indent-3 { padding-left : 48 px ; }
. demo-tree-item . icon {
margin-right : 6 px ;
}
. demo-tree-item . active {
background : var ( -- neon - red );
color : var ( -- white );
padding : 6 px 8 px ;
margin : 0 -20 px ;
padding-left : 52 px ;
}
. demo-main {
display : grid ;
grid-template-columns : repeat ( 3 , 1 fr );
}
. demo-panel {
border-right : var ( -- border - thin ) solid var ( -- black );
position : relative ;
display : flex ;
flex-direction : column ;
}
. demo-panel : last-child {
border-right : none ;
}
. demo-panel-header {
padding : 10 px 16 px ;
font-size : 0.65 rem ;
text-transform : uppercase ;
letter-spacing : 2 px ;
border-bottom : var ( -- border - thin ) solid var ( -- black );
background : var ( -- off - white );
font-weight : 700 ;
}
. demo-panel-body {
flex : 1 ;
display : flex ;
align-items : center ;
justify-content : center ;
padding : 30 px ;
position : relative ;
min-height : 400 px ;
}
. demo-pdf-placeholder {
width : 100 % ;
height : 100 % ;
position : absolute ;
top : 0 ;
left : 0 ;
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
font-size : 0.7 rem ;
color : var ( -- gray - light );
text-transform : uppercase ;
letter-spacing : 2 px ;
}
. demo-pdf-placeholder . pdf-icon {
font-size : 3 rem ;
margin-bottom : 12 px ;
opacity : 0.4 ;
}
. demo-panel . diff . demo-panel-header {
background : var ( -- neon - red );
color : var ( -- white );
}
. demo-panel . diff . demo-pdf-placeholder {
background : repeating-linear-gradient (
45 deg ,
transparent ,
transparent 10 px ,
rgba ( 255 , 0 , 51 , 0.04 ) 10 px ,
rgba ( 255 , 0 , 51 , 0.04 ) 20 px
);
}
. demo-statusbar {
background : var ( -- black );
color : var ( -- gray - light );
padding : 8 px 20 px ;
font-size : 0.65 rem ;
display : flex ;
justify-content : space-between ;
text-transform : uppercase ;
letter-spacing : 1 px ;
}
. demo-statusbar . status-ok {
color : #00ff66 ;
}
/* ========== TECH STACK ========== */
. tech {
background : var ( -- white );
border-bottom : var ( -- border - thick ) solid var ( -- black );
}
. tech-grid {
display : grid ;
grid-template-columns : repeat ( 4 , 1 fr );
border : var ( -- border - thick ) solid var ( -- black );
}
. tech-item {
padding : 32 px 24 px ;
border-right : var ( -- border - thin ) solid var ( -- black );
border-bottom : var ( -- border - thin ) solid var ( -- black );
text-align : center ;
}
. tech-item : nth-child ( 4n ) {
border-right : none ;
}
. tech-item : nth-child ( n + 5 ) {
border-bottom : none ;
}
. tech-item : hover {
background : var ( -- black );
color : var ( -- white );
}
. tech-item . tech-icon {
font-size : 2 rem ;
margin-bottom : 10 px ;
display : block ;
}
. tech-item h4 {
font-size : 0.85 rem ;
text-transform : uppercase ;
letter-spacing : 2 px ;
font-weight : 700 ;
margin-bottom : 6 px ;
}
. tech-item p {
font-size : 0.68 rem ;
color : var ( -- gray - light );
letter-spacing : 1 px ;
}
. tech-item : hover p {
color : var ( -- gray - light );
}
/* ========== DOWNLOAD ========== */
. download {
background : var ( -- black );
color : var ( -- white );
border-bottom : var ( -- border - thick ) solid var ( -- neon - red );
}
. download . section-title {
color : var ( -- white );
}
. download . section-divider {
background : var ( -- white );
}
. download-content {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 0 ;
border : var ( -- border - thick ) solid var ( -- white );
}
. download-info {
padding : 48 px 40 px ;
border-right : var ( -- border - thick ) solid var ( -- white );
}
. download-info h3 {
font-size : 1.2 rem ;
text-transform : uppercase ;
letter-spacing : 1 px ;
margin-bottom : 20 px ;
font-weight : 700 ;
}
. download-info p {
font-size : 0.82 rem ;
line-height : 1.8 ;
color : var ( -- gray - light );
margin-bottom : 24 px ;
}
. download-info ul {
list-style : none ;
margin-bottom : 32 px ;
}
. download-info ul li {
padding : 8 px 0 ;
font-size : 0.78 rem ;
border-bottom : 1 px solid var ( -- gray - mid );
display : flex ;
align-items : center ;
gap : 10 px ;
}
. download-info ul li . check {
color : var ( -- neon - red );
font-weight : 700 ;
}
. download-code {
padding : 48 px 40 px ;
display : flex ;
flex-direction : column ;
justify-content : center ;
}
. code-block {
background : var ( -- gray - dark );
border : var ( -- border - thin ) solid var ( -- gray - mid );
padding : 0 ;
margin-bottom : 20 px ;
}
. code-block-header {
padding : 10 px 16 px ;
font-size : 0.6 rem ;
text-transform : uppercase ;
letter-spacing : 2 px ;
color : var ( -- gray - light );
border-bottom : var ( -- border - thin ) solid var ( -- gray - mid );
}
. code-block pre {
padding : 20 px ;
font-family : var ( -- font - mono );
font-size : 0.82 rem ;
line-height : 1.8 ;
overflow-x : auto ;
color : var ( -- off - white );
}
. code-block pre . comment {
color : var ( -- gray - light );
}
. code-block pre . cmd {
color : var ( -- neon - red );
}
. btn-brutal {
display : inline-block ;
padding : 16 px 32 px ;
background : var ( -- neon - red );
color : var ( -- white );
font-family : var ( -- font - mono );
font-size : 0.8 rem ;
font-weight : 700 ;
text-transform : uppercase ;
letter-spacing : 3 px ;
border : var ( -- border - thick ) solid var ( -- white );
cursor : pointer ;
border-bottom : var ( -- border - thick ) solid var ( -- white );
text-align : center ;
}
. btn-brutal : hover {
background : var ( -- white );
color : var ( -- black );
}
/* ========== FOOTER ========== */
footer {
background : var ( -- black );
color : var ( -- white );
padding : 0 ;
}
. footer-inner {
max-width : 1400 px ;
margin : 0 auto ;
display : grid ;
grid-template-columns : 1 fr 1 fr 1 fr ;
border-top : var ( -- border - thick ) solid var ( -- neon - red );
}
. footer-col {
padding : 40 px 32 px ;
border-right : var ( -- border - thin ) solid var ( -- gray - mid );
}
. footer-col : last-child {
border-right : none ;
}
. footer-col h4 {
font-size : 0.75 rem ;
text-transform : uppercase ;
letter-spacing : 3 px ;
margin-bottom : 20 px ;
color : var ( -- neon - red );
font-weight : 700 ;
}
. footer-col p ,
. footer-col li {
font-size : 0.72 rem ;
line-height : 2 ;
color : var ( -- gray - light );
}
. footer-col ul {
list-style : none ;
}
. footer-col a {
color : var ( -- gray - light );
border-bottom : 1 px solid var ( -- gray - mid );
}
. footer-col a : hover {
color : var ( -- white );
background : var ( -- neon - red );
}
. footer-bottom {
border-top : var ( -- border - thin ) solid var ( -- gray - mid );
padding : 20 px 40 px ;
font-size : 0.65 rem ;
text-transform : uppercase ;
letter-spacing : 2 px ;
color : var ( -- gray - light );
display : flex ;
justify-content : space-between ;
max-width : 1400 px ;
margin : 0 auto ;
}
/* ========== MARQUEE ========== */
. marquee-bar {
background : var ( -- neon - red );
color : var ( -- white );
padding : 10 px 0 ;
overflow : hidden ;
white-space : nowrap ;
font-size : 0.7 rem ;
text-transform : uppercase ;
letter-spacing : 4 px ;
font-weight : 700 ;
border-bottom : var ( -- border - thick ) solid var ( -- black );
}
. marquee-content {
display : inline-block ;
animation : marquee 20 s linear infinite ;
}
@ keyframes marquee {
0 % { transform : translateX ( 0 ); }
100 % { transform : translateX ( -50 % ); }
}
/* ========== GLITCH EFFECT ========== */
. glitch {
position : relative ;
}
. glitch : hover :: before ,
. glitch : hover :: after {
content : attr ( data - text );
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
}
. glitch : hover :: before {
color : var ( -- neon - red );
z-index : -1 ;
animation : glitch-1 0.3 s steps ( 2 ) infinite ;
}
. glitch : hover :: after {
color : cyan ;
z-index : -2 ;
animation : glitch-2 0.3 s steps ( 2 ) infinite ;
}
@ keyframes glitch-1 {
0 % { clip-path : inset ( 20 % 0 60 % 0 ); transform : translate ( -3 px , 0 ); }
50 % { clip-path : inset ( 50 % 0 20 % 0 ); transform : translate ( 3 px , 0 ); }
100 % { clip-path : inset ( 10 % 0 70 % 0 ); transform : translate ( -2 px , 0 ); }
}
@ keyframes glitch-2 {
0 % { clip-path : inset ( 60 % 0 10 % 0 ); transform : translate ( 3 px , 0 ); }
50 % { clip-path : inset ( 20 % 0 50 % 0 ); transform : translate ( -3 px , 0 ); }
100 % { clip-path : inset ( 70 % 0 5 % 0 ); transform : translate ( 2 px , 0 ); }
}
/* ========== RESPONSIVE ========== */
@ media ( max-width : 1024px ) {
. features-grid {
grid-template-columns : repeat ( 2 , 1 fr );
}
. feature-card : nth-child ( 3n ) {
border-right : var ( -- border - thin ) solid var ( -- black );
}
. feature-card : nth-child ( 2n ) {
border-right : none ;
}
. feature-card : nth-child ( n + 4 ) {
border-bottom : var ( -- border - thin ) solid var ( -- black );
}
. feature-card : nth-child ( n + 5 ) {
border-bottom : none ;
}
. workflow-steps {
grid-template-columns : repeat ( 2 , 1 fr );
}
. workflow-step : nth-child ( 2 ) . arrow {
display : none ;
}
. workflow-step {
border-bottom : var ( -- border - thin ) solid var ( -- gray - mid );
}
. tech-grid {
grid-template-columns : repeat ( 2 , 1 fr );
}
. download-content {
grid-template-columns : 1 fr ;
}
. download-info {
border-right : none ;
border-bottom : var ( -- border - thick ) solid var ( -- white );
}
. demo-body {
grid-template-columns : 1 fr ;
}
. demo-sidebar {
border-right : none ;
border-bottom : var ( -- border - thick ) solid var ( -- black );
}
. demo-main {
grid-template-columns : 1 fr ;
}
. demo-panel {
border-right : none ;
border-bottom : var ( -- border - thin ) solid var ( -- black );
}
. demo-panel-body {
min-height : 200 px ;
}
}
@ media ( max-width : 768px ) {
section {
padding : 60 px 20 px ;
}
. hero {
padding : 100 px 20 px 60 px ;
}
nav . nav-links {
display : none ;
}
. features-grid {
grid-template-columns : 1 fr ;
}
. feature-card {
border-right : none !important ;
border-bottom : var ( -- border - thin ) solid var ( -- black ) !important ;
}
. feature-card : last-child {
border-bottom : none !important ;
}
. workflow-steps {
grid-template-columns : 1 fr ;
}
. workflow-step {
border-right : none ;
}
. workflow-step . arrow {
display : none ;
}
. tech-grid {
grid-template-columns : 1 fr ;
}
. tech-item {
border-right : none !important ;
}
. footer-inner {
grid-template-columns : 1 fr ;
}
. footer-col {
border-right : none ;
border-bottom : var ( -- border - thin ) solid var ( -- gray - mid );
}
. hero-stats {
flex-direction : column ;
}
. hero-stat {
border-right : none ;
border-bottom : var ( -- border - thin ) solid var ( -- gray - mid );
}
. hero-stat : last-child {
border-bottom : none ;
}
}
/* ========== BLINK CURSOR ========== */
. cursor {
display : inline-block ;
width : 3 px ;
height : 1 em ;
background : var ( -- neon - red );
margin-left : 4 px ;
vertical-align : text - bottom ;
animation : blink 0.7 s step-end infinite ;
}
@ keyframes blink {
0 %, 100 % { opacity : 1 ; }
50 % { opacity : 0 ; }
}
/* ========== SCROLL REVEAL ========== */
. reveal {
opacity : 0 ;
transform : translateY ( 30 px );
}
. reveal . visible {
opacity : 1 ;
transform : translateY ( 0 );
transition : opacity 0.1 s step-end , transform 0.1 s step-end ;
}
</ style >
</ head >
< body >
<!-- NAVIGATION -->
< nav >
< div class = "nav-inner" >
< a href = "#hero" class = "nav-brand" >< span > ■ </ span > DocuMentor</ a >
< ul class = "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 = "#tech" > Tech-Stack</ a ></ li >
< li >< a href = "#download" > Download</ a ></ li >
</ ul >
</ div >
</ nav >
<!-- HERO -->
< section class = "hero" id = "hero" >
< div class = "hero-content" >
< span class = "hero-label" > Desktop-Anwendung // PySide6 // Open Source</ span >
< h1 >
< span class = "glitch" data-text = "DOCU" > DOCU</ span >< span class = "red glitch" data-text = "MENTOR" > MENTOR</ span >
</ h1 >
< p class = "hero-tagline" >
XSL-Transformationen unter Kontrolle. Validieren. Vergleichen. Verifizieren.
Die Toolchain für Entwickler, die PDF-Dokumente aus XSL/XML erzeugen
und Änderungen lückenlos nachverfolgen muessen.< span class = "cursor" ></ span >
</ p >
< div class = "hero-stats" >
< div class = "hero-stat" >
< span class = "number" > 100+</ span >
< span class = "label" > XSL-Dateien</ span >
</ div >
< div class = "hero-stat" >
< span class = "number" > 3</ span >
< span class = "label" > PDF-Panels</ span >
</ div >
< div class = "hero-stat" >
< span class = "number" > BLAKE2B</ span >
< span class = "label" > Hash-Tracking</ span >
</ div >
< div class = "hero-stat" >
< span class = "number" > ∞ </ span >
< span class = "label" > Transformationen</ span >
</ div >
</ div >
</ div >
</ section >
<!-- MARQUEE -->
< div class = "marquee-bar" >
< div class = "marquee-content" >
SAXON • APACHE FOP • DIFF-PDF • POSTGRESQL • PYSIDE6 • BLAKE2B • XSL • XML • PDF •
SAXON • APACHE FOP • DIFF-PDF • POSTGRESQL • PYSIDE6 • BLAKE2B • XSL • XML • PDF •
SAXON • APACHE FOP • DIFF-PDF • POSTGRESQL • PYSIDE6 • BLAKE2B • XSL • XML • PDF •
SAXON • APACHE FOP • DIFF-PDF • POSTGRESQL • PYSIDE6 • BLAKE2B • XSL • XML • PDF •
</ div >
</ div >
<!-- FEATURES -->
< section class = "features" id = "features" >
< div class = "section-inner" >
< div class = "section-header reveal" >
< span class = "section-number" > 01 // Features</ span >
< h2 class = "section-title" > Was DocuMentor < span class = "muted" > leistet</ span ></ h2 >
< div class = "section-divider" ></ div >
</ div >
< div class = "features-grid reveal" >
< div class = "feature-card" >
< span class = "feature-icon" > ☰ </ span >
< span class = "feature-num" > Feature 01</ span >
< h3 > Baumstruktur</ h3 >
< p > Hierarchische Organisation von XSL-Transformationen. TreeNode, XslFile und XmlFile bilden eine übersichtliche Projektstruktur. Import- und Include-Abhängigkeiten auf einen Blick.</ p >
</ div >
< div class = "feature-card" >
< span class = "feature-icon" > ▦ </ span >
< span class = "feature-num" > Feature 02</ span >
< h3 > PDF-Diff</ h3 >
< p > Drei-Panel-Ansicht: Referenz, Diff und Neu. Visueller Vergleich mit Alpha-Blending. Änderungen in PDF-Dokumenten sofort erkennen — Pixel für Pixel.</ p >
</ div >
< div class = "feature-card" >
< span class = "feature-icon" > #_</ span >
< span class = "feature-num" > Feature 03</ span >
< h3 > Hash-Tracking</ h3 >
< p > BLAKE2B-Hashing zur Änderungsverfolgung von XML-Dateien. Automatische Berechnung beim Laden. 64-Zeichen-Hexdigest in project.yaml persistiert.</ p >
</ div >
< div class = "feature-card" >
< span class = "feature-icon" > ⇄ </ span >
< span class = "feature-num" > Feature 04</ span >
< h3 > Async-Verarbeitung</ h3 >
< p > Hintergrund-Threads für Hash-Berechnungen und Datenbank-Abfragen. Die UI bleibt reaktionsfähig — auch bei 100+ Dateien. Abbrechen-Dialog inklusive.</ p >
</ div >
< div class = "feature-card" >
< span class = "feature-icon" > ⎓ </ span >
< span class = "feature-num" > Feature 05</ span >
< h3 > PostgreSQL</ h3 >
< p > Datenbankintegration mit Polars und ConnectorX. SSL-Unterstützung. SQL-Abfragen direkt aus der Anwendung. Ergebnisse als DataFrames.</ p >
</ div >
< div class = "feature-card" >
< span class = "feature-icon" > ⚙ </ span >
< span class = "feature-num" > Feature 06</ span >
< h3 > Toolchain-Konfig</ h3 >
< p > Zentrale Verwaltung: Java VM, Saxon JAR, Apache FOP, diff-pdf. ID-basierte Referenzierung. Projekte koennen verschiedene Tool-Versionen verwenden.</ p >
</ div >
</ div >
</ div >
</ section >
<!-- WORKFLOW -->
< section class = "workflow" id = "workflow" >
< div class = "section-inner" >
< div class = "section-header reveal" >
< span class = "section-number" > 02 // Workflow</ span >
< h2 class = "section-title" > Vier Schritte < span style = "color:var(--neon-red);" > zum Ergebnis</ span ></ h2 >
< div class = "section-divider" ></ div >
</ div >
< div class = "workflow-steps reveal" >
< div class = "workflow-step" >
< span class = "step-num" > 01</ span >
< h3 > XSL bearbeiten</ h3 >
< p > Änderungen an den XSL-Dateien durchführen. Import- und Include-Verknüpfungen beachten — eine Änderung kann viele Dokumente betreffen.</ p >
< span class = "arrow" > ▶ </ span >
</ div >
< div class = "workflow-step" >
< span class = "step-num" > 02</ span >
< h3 > Transformation starten</ h3 >
< p > Saxon führt die XSLT-Transformation durch. Apache FOP erzeugt die PDF-Ausgabe. Alles konfigurierbar über die Toolchain.</ p >
< span class = "arrow" > ▶ </ span >
</ div >
< div class = "workflow-step" >
< span class = "step-num" > 03</ span >
< h3 > PDF-Diff begutachten</ h3 >
< p > Die Drei-Panel-Ansicht zeigt Referenz, Differenz und neues Dokument. diff-pdf markiert alle Änderungen visuell.</ p >
< span class = "arrow" > ▶ </ span >
</ div >
< div class = "workflow-step" >
< span class = "step-num" > 04</ span >
< h3 > Ergebnis verifizieren</ h3 >
< p > Wurden die richtigen PDFs geändert? Entsprechen die Änderungen den Erwartungen? Bei Bedarf: zurück zu Schritt 1.</ p >
</ div >
</ div >
</ div >
</ section >
<!-- DEMO / SCREENSHOT -->
< section class = "demo" id = "demo" >
< div class = "section-inner" >
< div class = "section-header reveal" >
< span class = "section-number" > 03 // Oberfläche</ span >
< h2 class = "section-title" > Die Anwendung < span class = "muted" > im Einsatz</ span ></ h2 >
< div class = "section-divider" ></ div >
</ div >
< div class = "demo-mockup reveal" >
< div class = "demo-titlebar" >
< div class = "demo-dots" >
< div class = "demo-dot red" ></ div >
< div class = "demo-dot" ></ div >
< div class = "demo-dot" ></ div >
</ div >
< span > DocuMentor v1.0 — Projekt: Pruefungsdokumente</ span >
< span style = "color:var(--gray-light);" > ■ PySide6</ span >
</ div >
< div class = "demo-body" >
< div class = "demo-sidebar" >
< div class = "demo-tree-item" >< span class = "icon" > ▼ </ span > < strong > Urkunden</ strong ></ div >
< div class = "demo-tree-item indent-1" >< span class = "icon" > ▼ </ span > bachelor_urkunde.xsl</ div >
< div class = "demo-tree-item indent-2" >< span class = "icon" > ● </ span > student_01.xml</ div >
< div class = "demo-tree-item indent-2 active" >< span class = "icon" > ● </ span > student_02.xml</ div >
< div class = "demo-tree-item indent-2" >< span class = "icon" > ● </ span > student_03.xml</ div >
< div class = "demo-tree-item indent-1" >< span class = "icon" > ▶ </ span > master_urkunde.xsl</ div >
< div class = "demo-tree-item" >< span class = "icon" > ▼ </ span > < strong > Zeugnisse</ strong ></ div >
< div class = "demo-tree-item indent-1" >< span class = "icon" > ▶ </ span > zeugnis_ba.xsl</ div >
< div class = "demo-tree-item indent-1" >< span class = "icon" > ▶ </ span > zeugnis_ma.xsl</ div >
< div class = "demo-tree-item" >< span class = "icon" > ▶ </ span > < strong > Bescheide</ strong ></ div >
</ div >
< div class = "demo-main" >
< div class = "demo-panel" >
< div class = "demo-panel-header" > Referenz-PDF</ div >
< div class = "demo-panel-body" >
< div class = "demo-pdf-placeholder" >
< span class = "pdf-icon" > ◼ </ span >
Referenz
</ div >
</ div >
</ div >
< div class = "demo-panel diff" >
< div class = "demo-panel-header" > ■ Diff-Ansicht</ div >
< div class = "demo-panel-body" >
< div class = "demo-pdf-placeholder" >
< span class = "pdf-icon" > ◼ </ span >
Differenz
</ div >
</ div >
</ div >
< div class = "demo-panel" >
< div class = "demo-panel-header" > Neues PDF</ div >
< div class = "demo-panel-body" >
< div class = "demo-pdf-placeholder" >
< span class = "pdf-icon" > ◼ </ span >
Neu generiert
</ div >
</ div >
</ div >
</ div >
</ div >
< div class = "demo-statusbar" >
< span > student_02.xml — BLAKE2B: < span style = "color:var(--neon-red);" > a3f7c9...</ span ></ span >
< span class = "status-ok" > ■ Transformation abgeschlossen</ span >
</ div >
</ div >
</ div >
</ section >
<!-- TECH STACK -->
< section class = "tech" id = "tech" >
< div class = "section-inner" >
< div class = "section-header reveal" >
< span class = "section-number" > 04 // Tech-Stack</ span >
< h2 class = "section-title" > Gebaut mit < span class = "muted" > roher Kraft</ span ></ h2 >
< div class = "section-divider" ></ div >
</ div >
< div class = "tech-grid reveal" >
< div class = "tech-item" >
< span class = "tech-icon" > ◆ </ span >
< h4 > Python</ h4 >
< p > Kern-Sprache</ p >
</ div >
< div class = "tech-item" >
< span class = "tech-icon" > ▣ </ span >
< h4 > PySide6</ h4 >
< p > Qt-GUI-Framework</ p >
</ div >
< div class = "tech-item" >
< span class = "tech-icon" > ♦ </ span >
< h4 > Saxon</ h4 >
< p > XSLT-Prozessor</ p >
</ div >
< div class = "tech-item" >
< span class = "tech-icon" > ▮ </ span >
< h4 > Apache FOP</ h4 >
< p > PDF-Erzeugung</ p >
</ div >
< div class = "tech-item" >
< span class = "tech-icon" > ▬ </ span >
< h4 > diff-pdf</ h4 >
< p > PDF-Vergleich</ p >
</ div >
< div class = "tech-item" >
< span class = "tech-icon" > ⎓ </ span >
< h4 > PostgreSQL</ h4 >
< p > Datenbank</ p >
</ div >
< div class = "tech-item" >
< span class = "tech-icon" > ☷ </ span >
< h4 > Polars</ h4 >
< p > DataFrames</ p >
</ div >
< div class = "tech-item" >
< span class = "tech-icon" > ⚙ </ span >
< h4 > Pydantic</ h4 >
< p > Konfiguration</ p >
</ div >
</ div >
</ div >
</ section >
<!-- DOWNLOAD -->
< section class = "download" id = "download" >
< div class = "section-inner" >
< div class = "section-header reveal" >
< span class = "section-number" > 05 // Loslegen</ span >
< h2 class = "section-title" > Jetzt < span style = "color:var(--neon-red);" > installieren</ span ></ h2 >
< div class = "section-divider" ></ div >
</ div >
< div class = "download-content reveal" >
< div class = "download-info" >
< h3 > Voraussetzungen</ h3 >
< p > DocuMentor läuft auf Linux, Windows und macOS. Die Konfiguration wird plattformspezifisch gespeichert.</ p >
< ul >
< li >< span class = "check" > [x]</ span > Python 3.13+</ li >
< li >< span class = "check" > [x]</ span > Java VM (für Saxon)</ li >
< li >< span class = "check" > [x]</ span > Saxon HE/PE/EE JAR</ li >
< li >< span class = "check" > [x]</ span > Apache FOP</ li >
< li >< span class = "check" > [x]</ span > diff-pdf</ li >
< li >< span class = "check" > [x]</ span > PostgreSQL (optional)</ li >
</ ul >
< a href = "#" class = "btn-brutal" > Dokumentation</ a >
</ div >
< div class = "download-code" >
< div class = "code-block" >
< div class = "code-block-header" > Terminal</ div >
< pre >< span class = "comment" > # Repository klonen</ span >
< span class = "cmd" > $</ span > git clone https://github.com/user/xsl-validator.git
< span class = "cmd" > $</ span > cd xsl-validator
< span class = "comment" > # Abhängigkeiten installieren</ span >
< span class = "cmd" > $</ span > uv sync
< span class = "comment" > # Anwendung starten</ span >
< span class = "cmd" > $</ span > uv run python src/main.py</ pre >
</ div >
< div class = "code-block" >
< div class = "code-block-header" > Linting</ div >
< pre >< span class = "cmd" > $</ span > uv run ruff check
< span class = "cmd" > $</ span > uv run ruff format</ pre >
</ div >
</ div >
</ div >
</ div >
</ section >
<!-- FOOTER -->
< footer >
< div class = "footer-inner" >
< div class = "footer-col" >
< h4 > DocuMentor</ h4 >
< p > Desktop-Anwendung zur Verwaltung und Validierung von XSL-Transformationen. Entwickelt für die kontinuierliche Weiterentwicklung von PDF-Dokumenten in Flexnow.</ p >
</ div >
< div class = "footer-col" >
< h4 > Links</ h4 >
< ul >
< li >< a href = "#features" > Features</ a ></ li >
< li >< a href = "#workflow" > Workflow</ a ></ li >
< li >< a href = "#demo" > Oberfläche</ a ></ li >
< li >< a href = "#tech" > Tech-Stack</ a ></ li >
< li >< a href = "#download" > Download</ a ></ li >
</ ul >
</ div >
< div class = "footer-col" >
< h4 > Tech</ h4 >
< ul >
< li > PySide6 / Qt</ li >
< li > Saxon XSLT</ li >
< li > Apache FOP</ li >
< li > diff-pdf</ li >
< li > PostgreSQL / Polars</ li >
</ ul >
</ div >
</ div >
< div class = "footer-bottom" >
< span > © 2026 DocuMentor</ span >
< span > Gebaut mit roher Kraft.</ span >
</ div >
</ footer >
< script >
// Brutalist scroll reveal — abrupt, no easing
document . addEventListener ( 'DOMContentLoaded' , () => {
const reveals = document . querySelectorAll ( '.reveal' );
const observer = new IntersectionObserver (( entries ) => {
entries . forEach ( entry => {
if ( entry . isIntersecting ) {
entry . target . classList . add ( 'visible' );
observer . unobserve ( entry . target );
}
});
}, {
threshold : 0.15
});
reveals . forEach ( el => observer . observe ( el ));
});
// Nav active state
document . addEventListener ( 'scroll' , () => {
const sections = document . querySelectorAll ( 'section[id]' );
const links = document . querySelectorAll ( '.nav-links a' );
let current = '' ;
sections . forEach ( section => {
const top = section . offsetTop - 80 ;
if ( window . scrollY >= top ) {
current = section . getAttribute ( 'id' );
}
});
links . forEach ( link => {
link . style . background = '' ;
link . style . color = '' ;
if ( link . getAttribute ( 'href' ) === '#' + current ) {
link . style . background = 'var(--neon-red)' ;
link . style . color = 'var(--white)' ;
}
});
});
</ script >
</ body >
</ html >
