feat(freakifraiday): both KI and AI in wordmark + event when-line

m's input: 'KI groß, AI groß - und das ist ne Veranstaltung für uns bei HL,
letzter Freitag im Monat, 17 Uhr, Ende offen.'

frea<KI>fr<AI>day. — both wordplay segments now highlighted in magenta.
Added event-when pill: 'Letzter Freitag im Monat · 17 Uhr · Open End'.
Page stays public-safe (no HL branding on a personally-owned domain);
HL-internal context is implicit, only visible to insiders.
This commit is contained in:
mAi
2026-05-07 19:36:55 +02:00
parent e48a77bba0
commit 315161531a

View File

@@ -3,14 +3,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>freakifrAIday.</title>
<title>freaKIfrAIday.</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪩</text></svg>">
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #0a0510; --text: #f5e6f0; --text-dim: #c2a8b8; --text-muted: #8a7282;
--accent: #ff2d78; --accent-glow: rgba(255, 45, 120, 0.2);
--accent: #ff2d78; --accent-glow: rgba(255, 45, 120, 0.25);
}
body {
font-family: 'Space Grotesk', -apple-system, sans-serif;
@@ -40,13 +40,20 @@
}
.subtitle {
font-size: 1.2rem; color: var(--text-dim); font-weight: 300;
line-height: 1.7; max-width: 520px; margin: 0 auto 16px;
line-height: 1.7; max-width: 520px; margin: 0 auto 32px;
}
.tagline {
font-size: 0.95rem; color: var(--text-muted); font-weight: 400;
letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 48px;
.when {
font-size: 0.95rem; color: var(--text); font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
padding: 14px 24px;
border: 1px solid rgba(255, 45, 120, 0.3);
border-radius: 999px;
display: inline-block;
background: rgba(255, 45, 120, 0.05);
box-shadow: 0 0 24px rgba(255, 45, 120, 0.08) inset;
}
.footer { margin-top: 56px; font-size: 0.72rem; color: var(--text-muted); }
.when .sep { color: var(--accent); margin: 0 10px; }
.footer { margin-top: 64px; font-size: 0.72rem; color: var(--text-muted); }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
@@ -67,10 +74,10 @@
<body>
<div class="container">
<div class="icon">🪩</div>
<h1>freaki<span class='accent'>frAI</span>day.</h1>
<h1>frea<span class='accent'>KI</span>fr<span class='accent'>AI</span>day.</h1>
<div class="divider"></div>
<p class="subtitle" data-de="Endlich frAI. Endlich Wochenende." data-en="Finally frAI. Finally weekend.">Endlich frAI. Endlich Wochenende.</p>
<p class="tagline" data-de="freitag · freak · ai" data-en="friday · freak · ai">freitag · freak · ai</p>
<p class="when" data-de="Letzter Freitag im Monat<span class='sep'>·</span>17 Uhr<span class='sep'>·</span>Open End" data-en="Last Friday of the month<span class='sep'>·</span>5pm<span class='sep'>·</span>Open end">Letzter Freitag im Monat<span class="sep">·</span>17 Uhr<span class="sep">·</span>Open End</p>
<p class="footer">freakifraiday.de</p>
<p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
</div>