ethiele/AI-Vortrag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add full deck, config tool, and updated design docs

Browse Source 
Adds the complete "KI verstehen" presentation (36 slides), the
Präsentations-Konfigurator (config.html + slides-manifest.js) for
curating which slides to show, and updates DESIGN.md/PATTERNS.md/
deck-template.html to reflect the new house font (General Sans) and
newly established patterns (chapter dividers, term tooltips, the
mitmach game, ambient sound, and the slide configurator).
This commit is contained in:
Erik Thiele
2026-07-25 16:29:28 +02:00
parent a0641c6fbf
commit 2633ca0e0d
9 changed files with 4570 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
font-vorschau.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Font-Vorschau · Headline-Alternativen</title>
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=clash-display@700,600&f[]=general-sans@700,600&f[]=switzer@700,600&f[]=cabinet-grotesk@700,800&display=swap">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0A0A0F; color: #F5F5F2; font-family: sans-serif; padding: 60px 80px; }
.row { border-bottom: 1px solid #23232E; padding: 48px 0; }
.row:last-child { border-bottom: none; }
.label {
font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: 0.2em;
text-transform: uppercase; color: #E4002B; margin-bottom: 16px;
display: flex; align-items: center; gap: 14px;
}
.label .tag { color: rgba(245,245,242,0.35); text-transform: none; letter-spacing: 0; }
.sample {
font-weight: 700; font-size: 92px; line-height: 0.96; letter-spacing: -0.035em;
max-width: 1300px;
}
.sample .accent { color: #E4002B; }
.sample-small {
font-weight: 600; font-size: 40px; letter-spacing: -0.02em; margin-top: 20px;
color: rgba(245,245,242,0.6);
}
h1 { font-family: 'JetBrains Mono', monospace; font-size: 20px; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(245,245,242,0.5); margin-bottom: 50px; }
</style>
</head>
<body>
<h1>Headline-Schrift · Vorschau in Deck-Größe (92px / 40px)</h1>
<div class="row">
<div class="label">Aktuell <span class="tag">Clash Display · 700</span></div>
<div class="sample" style="font-family: 'Clash Display', sans-serif;">MCP ist USB-C<br>für <span class="accent">KI-Anwendungen.</span></div>
<div class="sample-small" style="font-family: 'Clash Display', sans-serif;">Karten-Titel · Zahlen · Buttons</div>
</div>
<div class="row">
<div class="label">Option 1 <span class="tag">General Sans · 700 (Empfohlen)</span></div>
<div class="sample" style="font-family: 'General Sans', sans-serif;">MCP ist USB-C<br>für <span class="accent">KI-Anwendungen.</span></div>
<div class="sample-small" style="font-family: 'General Sans', sans-serif;">Karten-Titel · Zahlen · Buttons</div>
</div>
<div class="row">
<div class="label">Option 2 <span class="tag">Switzer · 700</span></div>
<div class="sample" style="font-family: 'Switzer', sans-serif;">MCP ist USB-C<br>für <span class="accent">KI-Anwendungen.</span></div>
<div class="sample-small" style="font-family: 'Switzer', sans-serif;">Karten-Titel · Zahlen · Buttons</div>
</div>
<div class="row">
<div class="label">Option 3 <span class="tag">Cabinet Grotesk · 700</span></div>
<div class="sample" style="font-family: 'Cabinet Grotesk', sans-serif;">MCP ist USB-C<br>für <span class="accent">KI-Anwendungen.</span></div>
<div class="sample-small" style="font-family: 'Cabinet Grotesk', sans-serif;">Karten-Titel · Zahlen · Buttons</div>
</div>
</body>
</html>