info
c837802fe7
Update index.html to reflect the latest release version 1.7.0, including MSI and ZIP download links with corrected release tag format.
2044 lines
73 KiB
HTML
2044 lines
73 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DocuMentor — XSL-Transformationen sicher im Griff</title>
|
|
<link rel="stylesheet" href="fonts/fonts.css">
|
|
<style>
|
|
/* ============================================================
|
|
RESET & BASE
|
|
============================================================ */
|
|
*, *::before, *::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--concrete-dark: #1a1a1a;
|
|
--concrete-mid: #2a2a2a;
|
|
--concrete-light: #3a3a3a;
|
|
--concrete-surface: #444444;
|
|
--warning-yellow: #f0c030;
|
|
--warning-yellow-dim: #e8b800;
|
|
--safety-orange: #e05020;
|
|
--steel-text: #b0b0b0;
|
|
--steel-bright: #d0d0d0;
|
|
--white: #f0efe8;
|
|
--grid-line: rgba(240, 192, 48, 0.07);
|
|
--grid-dot: rgba(240, 192, 48, 0.12);
|
|
--blueprint-line: rgba(240, 192, 48, 0.15);
|
|
--led-green: #30e060;
|
|
--led-red: #e03030;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Barlow', sans-serif;
|
|
background-color: var(--concrete-dark);
|
|
color: var(--steel-text);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
/* Concrete texture via noise-like gradient */
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(255,255,255,0.008) 2px,
|
|
rgba(255,255,255,0.008) 4px
|
|
),
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(255,255,255,0.005) 2px,
|
|
rgba(255,255,255,0.005) 4px
|
|
);
|
|
}
|
|
|
|
/* ============================================================
|
|
GLOBAL GRID OVERLAY
|
|
============================================================ */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
background-image:
|
|
radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* ============================================================
|
|
UTILITY CLASSES
|
|
============================================================ */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
section {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ============================================================
|
|
STENCIL SECTION LABELS
|
|
============================================================ */
|
|
.section-label {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.3em;
|
|
text-transform: uppercase;
|
|
color: var(--warning-yellow-dim);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.section-label::before {
|
|
content: attr(data-num);
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.65rem;
|
|
color: var(--concrete-surface);
|
|
border: 1px dashed var(--concrete-surface);
|
|
padding: 0.15rem 0.4rem;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 2.5rem;
|
|
color: var(--white);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
line-height: 1.1;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-family: 'Barlow', sans-serif;
|
|
font-weight: 300;
|
|
font-size: 1.1rem;
|
|
color: var(--steel-text);
|
|
max-width: 700px;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
HAZARD STRIPE
|
|
============================================================ */
|
|
.hazard-stripe {
|
|
height: 6px;
|
|
background: repeating-linear-gradient(
|
|
-45deg,
|
|
var(--warning-yellow),
|
|
var(--warning-yellow) 8px,
|
|
var(--concrete-dark) 8px,
|
|
var(--concrete-dark) 16px
|
|
);
|
|
width: 100%;
|
|
}
|
|
|
|
.hazard-stripe-thin {
|
|
height: 3px;
|
|
background: repeating-linear-gradient(
|
|
-45deg,
|
|
var(--warning-yellow-dim),
|
|
var(--warning-yellow-dim) 5px,
|
|
var(--concrete-mid) 5px,
|
|
var(--concrete-mid) 10px
|
|
);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* ============================================================
|
|
CORNER BRACKETS (for cards and panels)
|
|
============================================================ */
|
|
.corner-brackets {
|
|
position: relative;
|
|
}
|
|
|
|
.corner-brackets::before,
|
|
.corner-brackets::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.corner-brackets::before {
|
|
top: -1px;
|
|
left: -1px;
|
|
border-top: 2px solid var(--warning-yellow-dim);
|
|
border-left: 2px solid var(--warning-yellow-dim);
|
|
}
|
|
|
|
.corner-brackets::after {
|
|
bottom: -1px;
|
|
right: -1px;
|
|
border-bottom: 2px solid var(--warning-yellow-dim);
|
|
border-right: 2px solid var(--warning-yellow-dim);
|
|
}
|
|
|
|
/* ============================================================
|
|
RIVET DECORATIONS
|
|
============================================================ */
|
|
.riveted {
|
|
position: relative;
|
|
}
|
|
|
|
.riveted .rivet {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 35% 35%, #555, #2a2a2a 60%, #1a1a1a);
|
|
box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.riveted .rivet-tl { top: 10px; left: 10px; }
|
|
.riveted .rivet-tr { top: 10px; right: 10px; }
|
|
.riveted .rivet-bl { bottom: 10px; left: 10px; }
|
|
.riveted .rivet-br { bottom: 10px; right: 10px; }
|
|
|
|
/* ============================================================
|
|
LED INDICATOR
|
|
============================================================ */
|
|
.led {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 4px currentColor;
|
|
}
|
|
|
|
.led-green {
|
|
background-color: var(--led-green);
|
|
color: var(--led-green);
|
|
}
|
|
|
|
.led-yellow {
|
|
background-color: var(--warning-yellow);
|
|
color: var(--warning-yellow);
|
|
}
|
|
|
|
.led-orange {
|
|
background-color: var(--safety-orange);
|
|
color: var(--safety-orange);
|
|
}
|
|
|
|
/* ============================================================
|
|
SCROLL REVEAL
|
|
============================================================ */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.6s linear, transform 0.6s linear;
|
|
}
|
|
|
|
.reveal.from-left {
|
|
transform: translateX(-40px);
|
|
}
|
|
|
|
.reveal.from-right {
|
|
transform: translateX(40px);
|
|
}
|
|
|
|
.reveal.from-bottom {
|
|
transform: translateY(40px);
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
/* Staggered delays for children */
|
|
.reveal-delay-1 { transition-delay: 0.1s; }
|
|
.reveal-delay-2 { transition-delay: 0.2s; }
|
|
.reveal-delay-3 { transition-delay: 0.3s; }
|
|
.reveal-delay-4 { transition-delay: 0.4s; }
|
|
.reveal-delay-5 { transition-delay: 0.5s; }
|
|
.reveal-delay-6 { transition-delay: 0.6s; }
|
|
|
|
/* ============================================================
|
|
NAVBAR
|
|
============================================================ */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
background: rgba(26, 26, 26, 0.92);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid rgba(240, 192, 48, 0.12);
|
|
}
|
|
|
|
.navbar-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 2rem;
|
|
height: 56px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.navbar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navbar-brand-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 2px solid var(--warning-yellow);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
color: var(--warning-yellow);
|
|
}
|
|
|
|
.navbar-brand-text {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
color: var(--white);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.navbar-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.navbar-links a {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.75rem;
|
|
color: var(--steel-text);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
padding: 0.25rem 0;
|
|
border-bottom: 1px solid transparent;
|
|
transition: color 0.2s linear, border-color 0.2s linear;
|
|
}
|
|
|
|
.navbar-links a:hover {
|
|
color: var(--warning-yellow);
|
|
border-bottom-color: var(--warning-yellow);
|
|
}
|
|
|
|
.navbar-mobile-toggle {
|
|
display: none;
|
|
background: none;
|
|
border: 1px solid var(--concrete-surface);
|
|
color: var(--steel-text);
|
|
padding: 0.4rem 0.6rem;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* ============================================================
|
|
HERO SECTION
|
|
============================================================ */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 56px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
linear-gradient(135deg, var(--concrete-dark) 0%, var(--concrete-mid) 50%, var(--concrete-dark) 100%);
|
|
}
|
|
|
|
/* Blueprint grid background for hero */
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(var(--grid-line) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
|
|
background-size: 80px 80px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Crosshair in hero */
|
|
.hero::after {
|
|
content: '+';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 12rem;
|
|
color: rgba(240, 192, 48, 0.03);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hero-panel {
|
|
background: rgba(26, 26, 26, 0.85);
|
|
border: 1px solid rgba(240, 192, 48, 0.2);
|
|
padding: 3rem 3.5rem;
|
|
position: relative;
|
|
max-width: 750px;
|
|
}
|
|
|
|
.hero-system-tag {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.7rem;
|
|
color: var(--concrete-surface);
|
|
letter-spacing: 0.2em;
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.hero-system-tag .led {
|
|
animation: led-blink 2s infinite;
|
|
}
|
|
|
|
@keyframes led-blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 4.5rem;
|
|
color: var(--white);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
line-height: 1;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.hero-title span {
|
|
color: var(--warning-yellow);
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-family: 'Barlow Condensed', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 1.5rem;
|
|
color: var(--steel-bright);
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.hero-desc {
|
|
font-family: 'Barlow', sans-serif;
|
|
font-weight: 300;
|
|
font-size: 1rem;
|
|
color: var(--steel-text);
|
|
margin-bottom: 2rem;
|
|
max-width: 550px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* BUTTONS */
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
padding: 0.85rem 2rem;
|
|
background: var(--warning-yellow);
|
|
color: var(--concrete-dark);
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
position: relative;
|
|
transition: background 0.15s linear, transform 0.1s linear, box-shadow 0.15s linear;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--warning-yellow-dim);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 16px rgba(240, 192, 48, 0.25);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(1px);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
padding: 0.85rem 2rem;
|
|
background: transparent;
|
|
color: var(--steel-bright);
|
|
border: 1px solid var(--concrete-surface);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: border-color 0.15s linear, color 0.15s linear, transform 0.1s linear;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
border-color: var(--warning-yellow-dim);
|
|
color: var(--warning-yellow);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-secondary:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Hero measurement marks */
|
|
.hero-measure {
|
|
position: absolute;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.55rem;
|
|
color: rgba(240, 192, 48, 0.2);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.hero-measure-top {
|
|
top: -20px;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.hero-measure-top::before {
|
|
content: '';
|
|
display: block;
|
|
width: 200px;
|
|
height: 1px;
|
|
background: rgba(240, 192, 48, 0.15);
|
|
}
|
|
|
|
.hero-measure-right {
|
|
top: 0;
|
|
right: -30px;
|
|
writing-mode: vertical-rl;
|
|
}
|
|
|
|
/* ============================================================
|
|
FEATURES SECTION
|
|
============================================================ */
|
|
.features {
|
|
padding: 6rem 0;
|
|
background: var(--concrete-mid);
|
|
position: relative;
|
|
}
|
|
|
|
.features::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
|
|
background-size: 30px 30px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--concrete-dark);
|
|
border: 1px dashed rgba(240, 192, 48, 0.15);
|
|
padding: 2rem 1.5rem;
|
|
position: relative;
|
|
transition: border-color 0.2s linear, box-shadow 0.2s linear;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
border-color: rgba(240, 192, 48, 0.4);
|
|
box-shadow: 0 0 20px rgba(240, 192, 48, 0.05);
|
|
}
|
|
|
|
.feature-card:hover .feature-icon {
|
|
border-color: var(--warning-yellow);
|
|
color: var(--warning-yellow);
|
|
}
|
|
|
|
.feature-number {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.6rem;
|
|
color: var(--concrete-surface);
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 10px;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border: 1px solid var(--concrete-surface);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.25rem;
|
|
font-size: 1.3rem;
|
|
color: var(--steel-text);
|
|
transition: border-color 0.2s linear, color 0.2s linear;
|
|
}
|
|
|
|
.feature-name {
|
|
font-family: 'Barlow Condensed', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 1.15rem;
|
|
color: var(--steel-bright);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.feature-desc {
|
|
font-family: 'Barlow', sans-serif;
|
|
font-weight: 300;
|
|
font-size: 0.9rem;
|
|
color: var(--steel-text);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ============================================================
|
|
WORKFLOW SECTION
|
|
============================================================ */
|
|
.workflow {
|
|
padding: 6rem 0;
|
|
background: var(--concrete-dark);
|
|
position: relative;
|
|
}
|
|
|
|
.workflow-steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 0;
|
|
position: relative;
|
|
}
|
|
|
|
/* Connecting line */
|
|
.workflow-steps::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 36px;
|
|
left: 10%;
|
|
right: 10%;
|
|
height: 2px;
|
|
background: repeating-linear-gradient(
|
|
90deg,
|
|
var(--warning-yellow-dim) 0,
|
|
var(--warning-yellow-dim) 8px,
|
|
transparent 8px,
|
|
transparent 16px
|
|
);
|
|
opacity: 0.3;
|
|
z-index: 0;
|
|
}
|
|
|
|
.workflow-step {
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.step-number {
|
|
width: 72px;
|
|
height: 72px;
|
|
margin: 0 auto 1.5rem;
|
|
background: var(--concrete-mid);
|
|
border: 2px solid var(--concrete-surface);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1.8rem;
|
|
color: var(--steel-text);
|
|
position: relative;
|
|
transition: border-color 0.3s linear, color 0.3s linear;
|
|
}
|
|
|
|
.workflow-step:hover .step-number {
|
|
border-color: var(--warning-yellow);
|
|
color: var(--warning-yellow);
|
|
}
|
|
|
|
.step-number::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 2px;
|
|
height: 12px;
|
|
background: var(--concrete-surface);
|
|
}
|
|
|
|
.step-title {
|
|
font-family: 'Barlow Condensed', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 1.05rem;
|
|
color: var(--steel-bright);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.step-desc {
|
|
font-family: 'Barlow', sans-serif;
|
|
font-weight: 300;
|
|
font-size: 0.85rem;
|
|
color: var(--steel-text);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ============================================================
|
|
SCREENSHOT / DEMO SECTION
|
|
============================================================ */
|
|
.demo {
|
|
padding: 6rem 0;
|
|
background: var(--concrete-mid);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.demo-frame {
|
|
background: var(--concrete-dark);
|
|
border: 1px solid rgba(240, 192, 48, 0.15);
|
|
padding: 0;
|
|
position: relative;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.demo-titlebar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.6rem 1rem;
|
|
background: rgba(42, 42, 42, 0.9);
|
|
border-bottom: 1px solid rgba(240, 192, 48, 0.1);
|
|
}
|
|
|
|
.demo-titlebar-dots {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.demo-titlebar-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.demo-titlebar-dot.red { background: #e03030; }
|
|
.demo-titlebar-dot.yellow { background: var(--warning-yellow); }
|
|
.demo-titlebar-dot.green { background: var(--led-green); }
|
|
|
|
.demo-titlebar-text {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.7rem;
|
|
color: var(--concrete-surface);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.demo-content {
|
|
display: flex;
|
|
min-height: 420px;
|
|
}
|
|
|
|
/* Sidebar mockup */
|
|
.demo-sidebar {
|
|
width: 240px;
|
|
border-right: 1px solid rgba(240, 192, 48, 0.08);
|
|
padding: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.demo-sidebar-label {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.6rem;
|
|
color: var(--concrete-surface);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.2em;
|
|
margin-bottom: 0.75rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px dashed rgba(240, 192, 48, 0.1);
|
|
}
|
|
|
|
.tree-item {
|
|
padding: 0.3rem 0;
|
|
padding-left: 0;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.72rem;
|
|
color: var(--steel-text);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.tree-item.level-1 { padding-left: 1rem; }
|
|
.tree-item.level-2 { padding-left: 2rem; }
|
|
|
|
.tree-icon {
|
|
color: var(--warning-yellow-dim);
|
|
font-size: 0.65rem;
|
|
width: 14px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tree-item.active {
|
|
color: var(--warning-yellow);
|
|
background: rgba(240, 192, 48, 0.05);
|
|
margin: 0 -0.5rem;
|
|
padding-left: 2.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
/* Main panels mockup */
|
|
.demo-panels {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.demo-panel {
|
|
border-right: 1px solid rgba(240, 192, 48, 0.06);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.demo-panel:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.demo-panel-header {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.6rem;
|
|
color: var(--concrete-surface);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid rgba(240, 192, 48, 0.06);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.demo-panel-body {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Simulated PDF pages */
|
|
.mock-pdf {
|
|
width: 70%;
|
|
height: 80%;
|
|
background: #f5f5f0;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
|
|
padding: 12%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.mock-pdf-line {
|
|
height: 3px;
|
|
background: #c0c0c0;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.mock-pdf-line.short { width: 60%; }
|
|
.mock-pdf-line.medium { width: 80%; }
|
|
.mock-pdf-line.long { width: 95%; }
|
|
.mock-pdf-line.gap { height: 8px; background: transparent; }
|
|
|
|
.mock-pdf-line.diff-add {
|
|
background: rgba(48, 224, 96, 0.4);
|
|
}
|
|
|
|
.mock-pdf-line.diff-remove {
|
|
background: rgba(224, 48, 48, 0.3);
|
|
}
|
|
|
|
.mock-pdf-line.diff-change {
|
|
background: rgba(240, 192, 48, 0.4);
|
|
}
|
|
|
|
/* Middle diff panel overlay */
|
|
.demo-panel.diff .mock-pdf {
|
|
background: #f0ece0;
|
|
}
|
|
|
|
/* ============================================================
|
|
TECH STACK SECTION
|
|
============================================================ */
|
|
.techstack {
|
|
padding: 6rem 0;
|
|
background: var(--concrete-dark);
|
|
position: relative;
|
|
}
|
|
|
|
.tech-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tech-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.7rem 1.2rem;
|
|
background: var(--concrete-mid);
|
|
border: 1px solid rgba(240, 192, 48, 0.1);
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.8rem;
|
|
color: var(--steel-text);
|
|
letter-spacing: 0.05em;
|
|
transition: border-color 0.2s linear, color 0.2s linear, transform 0.15s linear;
|
|
cursor: default;
|
|
position: relative;
|
|
}
|
|
|
|
.tech-badge:hover {
|
|
border-color: var(--warning-yellow-dim);
|
|
color: var(--warning-yellow);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.tech-badge .led {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tech-category {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.2em;
|
|
color: var(--concrete-surface);
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tech-category::before,
|
|
.tech-category::after {
|
|
content: '';
|
|
height: 1px;
|
|
width: 40px;
|
|
background: var(--concrete-surface);
|
|
}
|
|
|
|
/* ============================================================
|
|
DOWNLOAD / GETTING STARTED
|
|
============================================================ */
|
|
.download {
|
|
padding: 6rem 0;
|
|
background: var(--concrete-mid);
|
|
position: relative;
|
|
}
|
|
|
|
.download-panel {
|
|
background: var(--concrete-dark);
|
|
border: 1px solid rgba(240, 192, 48, 0.15);
|
|
padding: 3rem;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.install-steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.install-step {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.install-step-num {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
color: var(--concrete-surface);
|
|
width: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
border-right: 2px solid var(--concrete-surface);
|
|
padding-right: 0.75rem;
|
|
}
|
|
|
|
.install-step-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.install-step-label {
|
|
font-family: 'Barlow Condensed', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 0.85rem;
|
|
color: var(--steel-text);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.code-block {
|
|
background: rgba(26, 26, 26, 0.8);
|
|
border: 1px solid rgba(240, 192, 48, 0.08);
|
|
padding: 0.75rem 1rem;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.85rem;
|
|
color: var(--warning-yellow);
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.code-block .prompt {
|
|
color: var(--concrete-surface);
|
|
user-select: none;
|
|
}
|
|
|
|
.code-block:hover {
|
|
border-color: rgba(240, 192, 48, 0.25);
|
|
}
|
|
|
|
.download-binaries {
|
|
margin-top: 2.5rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px dashed rgba(240, 192, 48, 0.15);
|
|
}
|
|
|
|
.download-binaries-label {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.65rem;
|
|
color: var(--concrete-surface);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.2em;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.download-binaries-label::before {
|
|
content: '';
|
|
display: block;
|
|
width: 30px;
|
|
height: 1px;
|
|
background: var(--concrete-surface);
|
|
}
|
|
|
|
.download-cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.download-card {
|
|
background: rgba(42, 42, 42, 0.6);
|
|
border: 1px solid rgba(240, 192, 48, 0.12);
|
|
padding: 1.25rem 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
position: relative;
|
|
transition: border-color 0.2s linear, box-shadow 0.2s linear;
|
|
}
|
|
|
|
.download-card:hover {
|
|
border-color: rgba(240, 192, 48, 0.35);
|
|
box-shadow: 0 0 16px rgba(240, 192, 48, 0.06);
|
|
}
|
|
|
|
.download-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.download-card-format {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
color: var(--steel-bright);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.download-card-badge {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.6rem;
|
|
color: var(--warning-yellow-dim);
|
|
border: 1px solid var(--warning-yellow-dim);
|
|
padding: 0.15rem 0.5rem;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.download-card-desc {
|
|
font-family: 'Barlow', sans-serif;
|
|
font-weight: 300;
|
|
font-size: 0.85rem;
|
|
color: var(--steel-text);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.download-card-meta {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.65rem;
|
|
color: var(--concrete-surface);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.btn-download {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
padding: 0.65rem 1.5rem;
|
|
background: transparent;
|
|
color: var(--warning-yellow);
|
|
border: 1px solid var(--warning-yellow-dim);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: background 0.15s linear, color 0.15s linear, transform 0.1s linear;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.btn-download:hover {
|
|
background: var(--warning-yellow);
|
|
color: var(--concrete-dark);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-download:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.download-or-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin: 2rem 0 0.5rem;
|
|
}
|
|
|
|
.download-or-divider::before,
|
|
.download-or-divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: rgba(240, 192, 48, 0.1);
|
|
}
|
|
|
|
.download-or-divider span {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.65rem;
|
|
color: var(--concrete-surface);
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.requirements-note {
|
|
margin-top: 2rem;
|
|
padding: 1rem 1.25rem;
|
|
border-left: 3px solid var(--safety-orange);
|
|
background: rgba(224, 80, 32, 0.05);
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.75rem;
|
|
color: var(--steel-text);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.requirements-note strong {
|
|
color: var(--safety-orange);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ============================================================
|
|
FOOTER
|
|
============================================================ */
|
|
.footer {
|
|
padding: 3rem 0 2rem;
|
|
background: var(--concrete-dark);
|
|
border-top: 1px solid rgba(240, 192, 48, 0.08);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.footer-inner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.footer-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.footer-brand-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 1.5px solid var(--warning-yellow-dim);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.7rem;
|
|
color: var(--warning-yellow-dim);
|
|
}
|
|
|
|
.footer-brand-text {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 0.85rem;
|
|
color: var(--steel-text);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.footer-meta {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.65rem;
|
|
color: var(--concrete-surface);
|
|
letter-spacing: 0.1em;
|
|
text-align: right;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-links a {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.7rem;
|
|
color: var(--steel-text);
|
|
text-decoration: none;
|
|
letter-spacing: 0.1em;
|
|
transition: color 0.2s linear;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--warning-yellow);
|
|
}
|
|
|
|
/* ============================================================
|
|
DIVIDER
|
|
============================================================ */
|
|
.section-divider {
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(240, 192, 48, 0.2) 20%,
|
|
rgba(240, 192, 48, 0.2) 80%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
/* ============================================================
|
|
RESPONSIVE
|
|
============================================================ */
|
|
@media (max-width: 1024px) {
|
|
.features-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.workflow-steps {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2rem;
|
|
}
|
|
|
|
.workflow-steps::before {
|
|
display: none;
|
|
}
|
|
|
|
.demo-content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.demo-sidebar {
|
|
width: 100%;
|
|
border-right: none;
|
|
border-bottom: 1px solid rgba(240, 192, 48, 0.08);
|
|
max-height: 180px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.demo-panels {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
min-height: 300px;
|
|
}
|
|
|
|
section {
|
|
padding-top: 4rem;
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.features, .workflow, .demo, .techstack, .download {
|
|
padding: 4rem 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.navbar-links {
|
|
display: none;
|
|
position: absolute;
|
|
top: 56px;
|
|
left: 0;
|
|
width: 100%;
|
|
background: rgba(26, 26, 26, 0.97);
|
|
flex-direction: column;
|
|
padding: 1rem 2rem;
|
|
gap: 0.75rem;
|
|
border-bottom: 1px solid rgba(240, 192, 48, 0.12);
|
|
}
|
|
|
|
.navbar-links.open {
|
|
display: flex;
|
|
}
|
|
|
|
.navbar-mobile-toggle {
|
|
display: block;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 2.8rem;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.hero-panel {
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.hero-measure {
|
|
display: none;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.workflow-steps {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.demo-panels {
|
|
grid-template-columns: 1fr;
|
|
min-height: auto;
|
|
}
|
|
|
|
.demo-panel {
|
|
border-right: none;
|
|
border-bottom: 1px solid rgba(240, 192, 48, 0.06);
|
|
min-height: 200px;
|
|
}
|
|
|
|
.download-panel {
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.footer-inner {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-links {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.footer-meta {
|
|
text-align: center;
|
|
}
|
|
|
|
.features, .workflow, .demo, .techstack, .download {
|
|
padding: 3rem 0;
|
|
}
|
|
|
|
.section-subtitle {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.code-block {
|
|
font-size: 0.75rem;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.download-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.hero-panel {
|
|
padding: 1.5rem 1.25rem;
|
|
}
|
|
|
|
.hero-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn-primary, .btn-secondary {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.download-panel {
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
|
|
.install-step {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.install-step-num {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--concrete-surface);
|
|
padding-right: 0;
|
|
padding-bottom: 0.5rem;
|
|
width: auto;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.tech-badge {
|
|
font-size: 0.7rem;
|
|
padding: 0.5rem 0.8rem;
|
|
}
|
|
|
|
.features, .workflow, .demo, .techstack, .download {
|
|
padding: 2.5rem 0;
|
|
}
|
|
|
|
.navbar-inner {
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ============================================================
|
|
NAVBAR
|
|
============================================================ -->
|
|
<nav class="navbar">
|
|
<div class="navbar-inner">
|
|
<a href="#hero" class="navbar-brand">
|
|
<div class="navbar-brand-icon">D</div>
|
|
<span class="navbar-brand-text">DocuMentor</span>
|
|
</a>
|
|
<button class="navbar-mobile-toggle" id="navToggle">MENU</button>
|
|
<ul class="navbar-links" id="navLinks">
|
|
<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">Technik</a></li>
|
|
<li><a href="#download">Download</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ============================================================
|
|
HERO
|
|
============================================================ -->
|
|
<section class="hero" id="hero">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<div class="hero-panel corner-brackets riveted reveal">
|
|
<span class="rivet rivet-tl"></span>
|
|
<span class="rivet rivet-tr"></span>
|
|
<span class="rivet rivet-bl"></span>
|
|
<span class="rivet rivet-br"></span>
|
|
<div class="hero-measure hero-measure-top">750px</div>
|
|
<div class="hero-measure hero-measure-right">CTRL-PANEL-01</div>
|
|
<div class="hero-system-tag">
|
|
<span class="led led-green"></span>
|
|
SYSTEM AKTIV — XSL TRANSFORMATIONS-KONTROLLE v2.0
|
|
</div>
|
|
<h1 class="hero-title">Docu<span>Mentor</span></h1>
|
|
<p class="hero-tagline">XSL-Transformationen sicher im Griff</p>
|
|
<p class="hero-desc">
|
|
Desktop-Anwendung zur Verwaltung und Validierung von XSL-Transformationen.
|
|
Erkennen Sie jede Auswirkung Ihrer XSL-Änderungen — bevor es zu spät ist.
|
|
PDF-Generierung, Vergleich und Qualitätssicherung in einem Werkzeug.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a href="#download" class="btn-primary">
|
|
▼ Installation starten
|
|
</a>
|
|
<a href="#features" class="btn-secondary">
|
|
▶ Features erkunden
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="hazard-stripe"></div>
|
|
|
|
<!-- ============================================================
|
|
FEATURES
|
|
============================================================ -->
|
|
<section class="features" id="features">
|
|
<div class="container">
|
|
<div class="section-label reveal" data-num="SEC-01">Features</div>
|
|
<h2 class="section-title reveal">Kontrollraum-<br>Funktionen</h2>
|
|
<p class="section-subtitle reveal">Sechs Kernmodule für die lückenlose Überwachung Ihrer XSL-Transformationen und PDF-Ergebnisse.</p>
|
|
|
|
<div class="features-grid">
|
|
<!-- Feature 1 -->
|
|
<div class="feature-card corner-brackets reveal from-bottom reveal-delay-1">
|
|
<span class="feature-number">F-001</span>
|
|
<div class="feature-icon">☰</div>
|
|
<div class="feature-name">Hierarchische Baumstruktur</div>
|
|
<p class="feature-desc">Organisieren Sie Ihre XSL- und XML-Dateien in einer intuitiven Baumstruktur mit TreeNodes. Drag-and-Drop, Kontextmenüs und Vererbungsdarstellung inklusive.</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="feature-card corner-brackets reveal from-bottom reveal-delay-2">
|
|
<span class="feature-number">F-002</span>
|
|
<div class="feature-icon">▩</div>
|
|
<div class="feature-name">PDF-Diff-Vergleich</div>
|
|
<p class="feature-desc">Drei-Panel-Ansicht mit Referenz-, Diff- und Neu-Darstellung. Alpha-Blending, Zoom und Pan für präzise visuelle Qualitätskontrolle.</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="feature-card corner-brackets reveal from-bottom reveal-delay-3">
|
|
<span class="feature-number">F-003</span>
|
|
<div class="feature-icon">#</div>
|
|
<div class="feature-name">Änderungsverfolgung</div>
|
|
<p class="feature-desc">Blake2b-Hashing für jede XML-Datei. Automatische Berechnung im Hintergrund erkennt sofort, welche Dateien sich verändert haben.</p>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="feature-card corner-brackets reveal from-bottom reveal-delay-4">
|
|
<span class="feature-number">F-004</span>
|
|
<div class="feature-icon">⇄</div>
|
|
<div class="feature-name">Asynchrone Verarbeitung</div>
|
|
<p class="feature-desc">Hintergrund-Threads für Hash-Berechnungen und Datenbankabfragen. Die Benutzeroberfläche bleibt stets reaktionsfähig.</p>
|
|
</div>
|
|
|
|
<!-- Feature 5 -->
|
|
<div class="feature-card corner-brackets reveal from-bottom reveal-delay-5">
|
|
<span class="feature-number">F-005</span>
|
|
<div class="feature-icon">⎓</div>
|
|
<div class="feature-name">PostgreSQL-Integration</div>
|
|
<p class="feature-desc">Direkte Datenbankanbindung mit SSL-Unterstützung. SQL-Abfragen via ConnectorX und Polars DataFrames für schnelle Datenverarbeitung.</p>
|
|
</div>
|
|
|
|
<!-- Feature 6 -->
|
|
<div class="feature-card corner-brackets reveal from-bottom reveal-delay-6">
|
|
<span class="feature-number">F-006</span>
|
|
<div class="feature-icon">⚙</div>
|
|
<div class="feature-name">Toolchain-Konfiguration</div>
|
|
<p class="feature-desc">Flexible Verwaltung von Saxon, Apache FOP und diff-pdf. Mehrere Versionen parallel konfigurierbar mit ID-basiertem Referenzsystem.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="section-divider"></div>
|
|
|
|
<!-- ============================================================
|
|
WORKFLOW
|
|
============================================================ -->
|
|
<section class="workflow" id="workflow">
|
|
<div class="container">
|
|
<div class="section-label reveal" data-num="SEC-02">Workflow</div>
|
|
<h2 class="section-title reveal">Arbeitsablauf</h2>
|
|
<p class="section-subtitle reveal">Vier Schritte von der XSL-Änderung bis zur verifizierten PDF — wiederholbar und zuverlässig.</p>
|
|
|
|
<div class="workflow-steps">
|
|
<div class="workflow-step reveal from-left reveal-delay-1">
|
|
<div class="step-number">01</div>
|
|
<div class="step-title">XSL-Dateien bearbeiten</div>
|
|
<p class="step-desc">Führen Sie die benötigten Änderungen an Ihren XSL-Stylesheets durch. DocuMentor Überwacht die Abhängigkeiten.</p>
|
|
</div>
|
|
<div class="workflow-step reveal from-left reveal-delay-2">
|
|
<div class="step-number">02</div>
|
|
<div class="step-title">Transformation starten</div>
|
|
<p class="step-desc">Starten Sie die Transformation direkt aus DocuMentor. Saxon und Apache FOP werden automatisch orchestriert.</p>
|
|
</div>
|
|
<div class="workflow-step reveal from-right reveal-delay-3">
|
|
<div class="step-number">03</div>
|
|
<div class="step-title">PDF-Diff begutachten</div>
|
|
<p class="step-desc">Vergleichen Sie Referenz- und neue PDF in der Drei-Panel-Ansicht. Abweichungen werden sofort sichtbar.</p>
|
|
</div>
|
|
<div class="workflow-step reveal from-right reveal-delay-4">
|
|
<div class="step-number">04</div>
|
|
<div class="step-title">Ergebnis verifizieren</div>
|
|
<p class="step-desc">Prüfen Sie, ob nur die erwarteten PDF-Dateien geändert wurden und das Ergebnis korrekt ist.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="hazard-stripe-thin"></div>
|
|
|
|
<!-- ============================================================
|
|
DEMO / SCREENSHOT
|
|
============================================================ -->
|
|
<section class="demo" id="demo">
|
|
<div class="container">
|
|
<div class="section-label reveal" data-num="SEC-03">Interface</div>
|
|
<h2 class="section-title reveal">Kontrollstation</h2>
|
|
<p class="section-subtitle reveal">Überblick über die Anwendungsoberfläche — Baumstruktur links, PDF-Vergleich rechts.</p>
|
|
|
|
<div class="demo-frame reveal from-bottom">
|
|
<div class="demo-titlebar">
|
|
<div class="demo-titlebar-dots">
|
|
<span class="demo-titlebar-dot red"></span>
|
|
<span class="demo-titlebar-dot yellow"></span>
|
|
<span class="demo-titlebar-dot green"></span>
|
|
</div>
|
|
<span class="demo-titlebar-text">DocuMentor — Projekt: Flexnow Urkunden 2026</span>
|
|
<span style="margin-left:auto;" class="demo-titlebar-text"><span class="led led-green"></span> BEREIT</span>
|
|
</div>
|
|
<div class="demo-content">
|
|
<!-- Sidebar -->
|
|
<div class="demo-sidebar">
|
|
<div class="demo-sidebar-label">Projektbaum</div>
|
|
<div class="tree-item">
|
|
<span class="tree-icon">▼</span> Urkunden
|
|
</div>
|
|
<div class="tree-item level-1">
|
|
<span class="tree-icon">▼</span> Bachelor
|
|
</div>
|
|
<div class="tree-item level-2">
|
|
<span class="tree-icon">▶</span> urkunde_ba.xsl
|
|
</div>
|
|
<div class="tree-item level-2 active">
|
|
<span class="tree-icon">▶</span> testdaten_ba.xml
|
|
</div>
|
|
<div class="tree-item level-1">
|
|
<span class="tree-icon">▼</span> Master
|
|
</div>
|
|
<div class="tree-item level-2">
|
|
<span class="tree-icon">▶</span> urkunde_ma.xsl
|
|
</div>
|
|
<div class="tree-item level-2">
|
|
<span class="tree-icon">▶</span> testdaten_ma.xml
|
|
</div>
|
|
<div class="tree-item">
|
|
<span class="tree-icon">▼</span> Zeugnisse
|
|
</div>
|
|
<div class="tree-item level-1">
|
|
<span class="tree-icon">▶</span> zeugnis_base.xsl
|
|
</div>
|
|
<div class="tree-item level-1">
|
|
<span class="tree-icon">▶</span> layout_common.xsl
|
|
</div>
|
|
</div>
|
|
<!-- Panels -->
|
|
<div class="demo-panels">
|
|
<div class="demo-panel">
|
|
<div class="demo-panel-header"><span class="led led-green"></span> Referenz-PDF</div>
|
|
<div class="demo-panel-body">
|
|
<div class="mock-pdf">
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line medium"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line gap"></div>
|
|
<div class="mock-pdf-line short"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line medium"></div>
|
|
<div class="mock-pdf-line gap"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line short"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line medium"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="demo-panel diff">
|
|
<div class="demo-panel-header"><span class="led led-yellow"></span> Diff-Ansicht</div>
|
|
<div class="demo-panel-body">
|
|
<div class="mock-pdf">
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line medium diff-change"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line gap"></div>
|
|
<div class="mock-pdf-line short diff-remove"></div>
|
|
<div class="mock-pdf-line long diff-add"></div>
|
|
<div class="mock-pdf-line medium"></div>
|
|
<div class="mock-pdf-line gap"></div>
|
|
<div class="mock-pdf-line long diff-change"></div>
|
|
<div class="mock-pdf-line short"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line medium diff-add"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="demo-panel">
|
|
<div class="demo-panel-header"><span class="led led-orange"></span> Neue PDF</div>
|
|
<div class="demo-panel-body">
|
|
<div class="mock-pdf">
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line gap"></div>
|
|
<div class="mock-pdf-line medium"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line medium"></div>
|
|
<div class="mock-pdf-line gap"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line short"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
<div class="mock-pdf-line long"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="section-divider"></div>
|
|
|
|
<!-- ============================================================
|
|
TECH STACK
|
|
============================================================ -->
|
|
<section class="techstack" id="techstack">
|
|
<div class="container">
|
|
<div class="section-label reveal" data-num="SEC-04">Technologie</div>
|
|
<h2 class="section-title reveal">Tech-Stack</h2>
|
|
<p class="section-subtitle reveal">Bewährte Industriekomponenten für maximale Zuverlässigkeit.</p>
|
|
|
|
<div class="tech-grid reveal from-bottom">
|
|
<!-- <div class="tech-category">Kern</div>
|
|
<div class="tech-badge"><span class="led led-green"></span> Python 3</div>
|
|
<div class="tech-badge"><span class="led led-green"></span> PySide6 / Qt</div>
|
|
<div class="tech-badge"><span class="led led-green"></span> Pydantic</div> -->
|
|
|
|
<!-- <div class="tech-category">Transformation</div> -->
|
|
<div class="tech-badge"><span class="led led-yellow"></span> Saxon XSLT</div>
|
|
<div class="tech-badge"><span class="led led-yellow"></span> Apache FOP</div>
|
|
<div class="tech-badge"><span class="led led-yellow"></span> diff-pdf</div>
|
|
|
|
<!-- <div class="tech-category">Daten</div>
|
|
<div class="tech-badge"><span class="led led-orange"></span> PostgreSQL</div>
|
|
<div class="tech-badge"><span class="led led-orange"></span> Polars</div>
|
|
<div class="tech-badge"><span class="led led-orange"></span> ConnectorX</div>
|
|
|
|
<div class="tech-category">Werkzeuge</div>
|
|
<div class="tech-badge"><span class="led led-green"></span> blake2b</div>
|
|
<div class="tech-badge"><span class="led led-green"></span> PyInstaller</div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="hazard-stripe"></div>
|
|
|
|
<!-- ============================================================
|
|
DOWNLOAD / GETTING STARTED
|
|
============================================================ -->
|
|
<section class="download" id="download">
|
|
<div class="container">
|
|
<div class="section-label reveal" data-num="SEC-05">Installation</div>
|
|
<h2 class="section-title reveal">Inbetriebnahme</h2>
|
|
<p class="section-subtitle reveal">Windows-Pakete für den sofortigen Einsatz — oder drei Befehle aus dem Quellcode.</p>
|
|
|
|
<div class="download-panel corner-brackets riveted reveal from-bottom">
|
|
<span class="rivet rivet-tl"></span>
|
|
<span class="rivet rivet-tr"></span>
|
|
<span class="rivet rivet-bl"></span>
|
|
<span class="rivet rivet-br"></span>
|
|
|
|
<!-- 1. Windows Binaries -->
|
|
<div class="download-binaries" style="margin-top: 0; padding-top: 0; border-top: none;">
|
|
<div class="download-binaries-label">Windows — Vorkompilierte Pakete</div>
|
|
<div class="download-cards">
|
|
<div class="download-card corner-brackets">
|
|
<div class="download-card-header">
|
|
<span class="download-card-format">▾ MSI-Installer</span>
|
|
<span class="download-card-badge">EMPFOHLEN</span>
|
|
</div>
|
|
<p class="download-card-desc">Windows-Installer mit automatischer Einrichtung. Erstellt Startmenü-Einträge und ermöglicht saubere Deinstallation über die Systemsteuerung.</p>
|
|
<span class="download-card-meta">DocuMentor-1.7.0.msi — ca. 255 MB</span>
|
|
<a href="https://code.vitaligraf.de/info/xsl-validator/releases/download/v1.7.0/DocuMentor-1.7.0.msi" class="btn-download">▼ MSI herunterladen</a>
|
|
</div>
|
|
<div class="download-card corner-brackets">
|
|
<div class="download-card-header">
|
|
<span class="download-card-format">▾ ZIP-Archiv</span>
|
|
<span class="download-card-badge">PORTABEL</span>
|
|
</div>
|
|
<p class="download-card-desc">Portable Version ohne Installation. Entpacken und direkt starten — ideal für eingeschränkte Umgebungen ohne Administratorrechte.</p>
|
|
<span class="download-card-meta">DocuMentor-1.7.0.zip — ca. 315 MB</span>
|
|
<a href="https://code.vitaligraf.de/info/xsl-validator/releases/download/v1.7.0/DocuMentor-1.7.0.zip" class="btn-download">▼ ZIP herunterladen</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Hinweis Windows -->
|
|
<div class="requirements-note">
|
|
<strong>HINWEIS:</strong> Die Windows-Pakete enthalten alle Abhängigkeiten inklusive Python-Runtime. Lediglich eine <strong>Java Runtime</strong> (für Saxon und Apache FOP) muss separat installiert werden. Für die volle Performance der Pool-Worker wird ein <strong>Java JDK</strong> (statt nur JRE) empfohlen.
|
|
</div>
|
|
|
|
<!-- 3. Quellcode -->
|
|
<div class="download-or-divider"><span>oder aus Quellcode</span></div>
|
|
|
|
<div class="install-steps">
|
|
<div class="install-step">
|
|
<div class="install-step-num">01</div>
|
|
<div class="install-step-content">
|
|
<div class="install-step-label">Repository klonen</div>
|
|
<div class="code-block"><span class="prompt">$ </span>git clone https://code.vitaligraf.de/info/xsl-validator.git</div>
|
|
</div>
|
|
</div>
|
|
<div class="install-step">
|
|
<div class="install-step-num">02</div>
|
|
<div class="install-step-content">
|
|
<div class="install-step-label">Abhängigkeiten installieren</div>
|
|
<div class="code-block"><span class="prompt">$ </span>uv sync</div>
|
|
</div>
|
|
</div>
|
|
<div class="install-step">
|
|
<div class="install-step-num">03</div>
|
|
<div class="install-step-content">
|
|
<div class="install-step-label">Anwendung starten</div>
|
|
<div class="code-block"><span class="prompt">$ </span>uv run python src/main.py</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. Hinweis Quellcode -->
|
|
<div class="requirements-note">
|
|
<strong>HINWEIS:</strong> Erfordert Python 3.13+, Java Runtime (für Saxon und Apache FOP) und den Paketmanager <strong>uv</strong>. Für die volle Performance der Pool-Worker wird ein <strong>Java JDK</strong> (statt nur JRE) empfohlen.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="hazard-stripe-thin"></div>
|
|
|
|
<!-- ============================================================
|
|
FOOTER
|
|
============================================================ -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<div class="footer-brand">
|
|
<div class="footer-brand-icon">D</div>
|
|
<span class="footer-brand-text">DocuMentor</span>
|
|
</div>
|
|
<ul class="footer-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#workflow">Workflow</a></li>
|
|
<li><a href="#techstack">Technik</a></li>
|
|
<li><a href="#download">Download</a></li>
|
|
<li><a href="impressum.html">Impressum</a></li>
|
|
<li><a href="datenschutz.html">Datenschutz</a></li>
|
|
</ul>
|
|
<div class="footer-meta">
|
|
SYSTEM // DOCUMENTOR // BUILD 1.6.3<br>
|
|
PySide6 Desktop-Anwendung // Open Source
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ============================================================
|
|
JAVASCRIPT
|
|
============================================================ -->
|
|
<script>
|
|
// ============================================================
|
|
// Mobile Navigation Toggle
|
|
// ============================================================
|
|
(function() {
|
|
const toggle = document.getElementById('navToggle');
|
|
const links = document.getElementById('navLinks');
|
|
if (toggle && links) {
|
|
toggle.addEventListener('click', function() {
|
|
links.classList.toggle('open');
|
|
toggle.textContent = links.classList.contains('open') ? 'CLOSE' : 'MENU';
|
|
});
|
|
// Close on link click
|
|
links.querySelectorAll('a').forEach(function(a) {
|
|
a.addEventListener('click', function() {
|
|
links.classList.remove('open');
|
|
toggle.textContent = 'MENU';
|
|
});
|
|
});
|
|
}
|
|
})();
|
|
|
|
// ============================================================
|
|
// Scroll Reveal (mechanical, linear)
|
|
// ============================================================
|
|
(function() {
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
const observer = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.12,
|
|
rootMargin: '0px 0px -40px 0px'
|
|
});
|
|
|
|
reveals.forEach(function(el) {
|
|
observer.observe(el);
|
|
});
|
|
})();
|
|
|
|
// ============================================================
|
|
// Navbar background on scroll
|
|
// ============================================================
|
|
(function() {
|
|
const navbar = document.querySelector('.navbar');
|
|
let ticking = false;
|
|
window.addEventListener('scroll', function() {
|
|
if (!ticking) {
|
|
requestAnimationFrame(function() {
|
|
if (window.scrollY > 80) {
|
|
navbar.style.borderBottomColor = 'rgba(240, 192, 48, 0.25)';
|
|
} else {
|
|
navbar.style.borderBottomColor = 'rgba(240, 192, 48, 0.12)';
|
|
}
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
});
|
|
})();
|
|
|
|
// ============================================================
|
|
// Smooth scroll for anchor links
|
|
// ============================================================
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
var target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
var offset = 56; // navbar height
|
|
var top = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
|
window.scrollTo({ top: top, behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|