m/onepager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
84b28d64f56f9b9b76afa91c11992868057b295c
onepager/sites/orakil.de/index.html
m 84b28d64f5 feat: AI/KI disclosure footer — shared/ai-disclosure.js + all 54 sites 
Self-injecting script following impressum.js pattern:
- data-tone attribute: playful | serious | minimal | none
- Reads document.documentElement.lang for KI (de) vs AI (en)
- MutationObserver on lang attr for i18n toggle compat
- All tones link to msbls.de/ki
- Injected into all 54 custom sites with data-tone="playful"
- Template infra: base.html includes script, render.sh reads disclosure.tone
- disclosure.tone added to 3 example site.yaml files

Implements m/onepager#2
2026-04-01 13:26:04 +02:00

449 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OraKIl — Frag das Orakel</title>
<meta name="description" content="Das Orakel weiß. Frag.">
<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>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #0a0a0e;
--bg-deep: #06060a;
--gold: #c9a84c;
--gold-dim: #8a7535;
--gold-glow: rgba(201, 168, 76, 0.15);
--gold-subtle: rgba(201, 168, 76, 0.06);
--violet: #6b4c9a;
--violet-glow: rgba(107, 76, 154, 0.2);
--violet-mist: rgba(107, 76, 154, 0.08);
--text: #d4cbb8;
--text-dim: #7a7060;
--text-muted: #3d3830;
}
html { scroll-behavior: smooth; }
body {
font-family: 'JetBrains Mono', monospace;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
min-height: 100vh;
}
/* Noise overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
}
/* Mystical fog */
.fog {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
.fog::before,
.fog::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(100px);
animation: fogDrift 12s ease-in-out infinite;
}
.fog::before {
width: 600px; height: 400px;
top: 10%; left: 30%;
background: var(--violet-glow);
animation-delay: 0s;
}
.fog::after {
width: 500px; height: 500px;
bottom: 10%; right: 20%;
background: var(--gold-glow);
animation-delay: -6s;
animation-duration: 15s;
}
@keyframes fogDrift {
0%, 100% { opacity: 0.4; transform: translate(0, 0) scale(1); }
33% { opacity: 0.7; transform: translate(30px, -20px) scale(1.1); }
66% { opacity: 0.5; transform: translate(-20px, 15px) scale(0.95); }
}
/* Hero */
.oracle {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
z-index: 1;
padding: 40px 24px;
}
.oracle-title {
font-family: 'Cinzel', serif;
font-size: clamp(4rem, 12vw, 8rem);
font-weight: 800;
color: var(--gold);
letter-spacing: 0.08em;
line-height: 1;
margin-bottom: 24px;
text-shadow:
0 0 40px var(--gold-glow),
0 0 80px rgba(201, 168, 76, 0.08);
animation: fadeIn 2s ease forwards, glow 6s ease-in-out infinite 2s;
opacity: 0;
}
.oracle-title span {
color: var(--text-dim);
font-weight: 400;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes glow {
0%, 100% { text-shadow: 0 0 40px var(--gold-glow), 0 0 80px rgba(201, 168, 76, 0.08); }
50% { text-shadow: 0 0 60px rgba(201, 168, 76, 0.3), 0 0 120px rgba(201, 168, 76, 0.12); }
}
.oracle-subtitle {
font-family: 'Cinzel', serif;
font-size: clamp(1rem, 3vw, 1.4rem);
color: var(--text-dim);
font-weight: 400;
letter-spacing: 0.2em;
margin-bottom: 80px;
animation: fadeIn 2s ease 0.5s forwards;
opacity: 0;
}
/* Input field */
.question-container {
width: 100%;
max-width: 620px;
position: relative;
animation: fadeIn 1.5s ease 1s forwards;
opacity: 0;
}
.question-field {
width: 100%;
padding: 20px 28px;
background: rgba(201, 168, 76, 0.03);
border: 1px solid var(--text-muted);
border-radius: 4px;
color: var(--text);
font-family: 'JetBrains Mono', monospace;
font-size: 1rem;
outline: none;
transition: all 0.4s ease;
letter-spacing: 0.02em;
}
.question-field::placeholder {
color: var(--text-muted);
font-style: italic;
}
.question-field:focus {
border-color: var(--gold-dim);
background: rgba(201, 168, 76, 0.05);
box-shadow:
0 0 30px var(--gold-glow),
0 0 60px rgba(107, 76, 154, 0.08),
inset 0 0 20px rgba(201, 168, 76, 0.03);
}
.question-ornament {
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
font-family: 'Cinzel', serif;
font-size: 0.7rem;
color: var(--text-muted);
letter-spacing: 0.4em;
white-space: nowrap;
}
/* Hint text */
.hint {
margin-top: 48px;
font-family: 'Cinzel', serif;
font-size: clamp(0.8rem, 2vw, 1rem);
color: var(--text-muted);
font-style: italic;
letter-spacing: 0.04em;
line-height: 1.7;
text-align: center;
animation: fadeIn 2s ease 1.8s forwards;
opacity: 0;
transition: opacity 0.6s ease;
}
/* 8-ball answer */
.answer-container {
margin-top: 48px;
min-height: 80px;
width: 100%;
max-width: 620px;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 1.5s ease 1.8s forwards;
opacity: 0;
}
.answer-text {
font-family: 'Cinzel', serif;
font-size: clamp(1rem, 2.5vw, 1.3rem);
color: var(--gold);
font-style: italic;
letter-spacing: 0.04em;
line-height: 1.7;
max-width: 620px;
text-align: center;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.answer-text.visible {
opacity: 1;
transform: translateY(0);
}
.answer-text.fading {
opacity: 0;
transform: translateY(-10px);
}
/* Shake animation for the orb */
@keyframes shake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-4px) rotate(-1deg); }
30% { transform: translateX(3px) rotate(1deg); }
45% { transform: translateX(-2px); }
60% { transform: translateX(2px); }
75% { transform: translateX(-1px); }
}
.oracle-title.shaking {
animation: shake 0.6s ease;
}
/* Decorative elements */
.ornament-top,
.ornament-bottom {
position: fixed;
left: 50%;
transform: translateX(-50%);
font-family: 'Cinzel', serif;
color: var(--text-muted);
letter-spacing: 0.6em;
font-size: 0.6rem;
z-index: 1;
opacity: 0.5;
}
.ornament-top { top: 24px; }
.ornament-bottom { bottom: 24px; }
/* Vertical lines */
.line-left,
.line-right {
position: fixed;
top: 0;
bottom: 0;
width: 1px;
z-index: 1;
opacity: 0.15;
}
.line-left {
left: 48px;
background: linear-gradient(180deg, transparent, var(--gold), var(--violet), transparent);
}
.line-right {
right: 48px;
background: linear-gradient(180deg, transparent, var(--violet), var(--gold), transparent);
}
/* Cursor blink on field */
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Responsive */
@media (max-width: 640px) {
.line-left, .line-right { display: none; }
.question-field { padding: 16px 20px; font-size: 0.9rem; }
.ornament-top, .ornament-bottom { font-size: 0.5rem; letter-spacing: 0.4em; }
}
/* i18n toggle placement at bottom */
.footer-toggle {
position: fixed;
bottom: 48px;
right: 70px;
z-index: 10;
text-align: center;
}
@media (max-width: 640px) {
.footer-toggle { right: 16px; bottom: 36px; }
}
</style>
</head>
<body>
<div class="fog"></div>
<div class="line-left"></div>
<div class="line-right"></div>
<div class="ornament-top">&#x2726; &#x2726; &#x2726;</div>
<section class="oracle">
<h1 class="oracle-title">OraKIl</h1>
<p class="oracle-subtitle" data-de="Das Orakel weiß. Frag." data-en="The oracle knows. Ask.">Das Orakel wei&szlig;. Frag.</p>
<div class="question-container">
<input type="text" class="question-field" placeholder="Stelle deine Frage..." autocomplete="off" data-de-placeholder="Stelle deine Frage..." data-en-placeholder="Ask your question...">
<div class="question-ornament">&#x2014; ORACVLVM &#x2014;</div>
</div>
<p class="hint" data-de="Die Antwort war immer in dir. Die KI hat sie dir nur gezeigt." data-en="The answer was always within you. The AI just showed it to you.">Die Antwort war immer in dir. Die KI hat sie dir nur gezeigt.</p>
<div class="answer-container">
<p class="answer-text"></p>
</div>
</section>
<div class="ornament-bottom">&#x2726; &#x2726; &#x2726;</div>
<div class="footer-toggle">
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);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="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
<script>
(function() {
var hint = document.querySelector('.hint');
// 8-ball answers
var answers = [
'Die Sterne deuten in deine Richtung.',
'Was du suchst, sucht auch dich.',
'Der Weg ist bereits beschritten. Du hast es nur noch nicht bemerkt.',
'Nicht jetzt. Aber bald.',
'Das Orakel sieht Veraenderung. Ob du bereit bist, liegt bei dir.',
'Ja. Aber nicht so, wie du denkst.',
'Die Antwort kommt, wenn du aufhoerst zu fragen.',
'Es war nie eine Frage des Ob. Nur des Wann.',
'Was vergangen ist, traegt die Antwort bereits in sich.',
'Du weisst es laengst. Du traust dich nur nicht, es auszusprechen.',
'Der Mond steht guenstig. Handel entsprechend.',
'Lass los, was dich haelt. Der Rest fuegt sich.',
'Drei Tage. Dann wird es klarer.',
'Nein. Nicht auf diesem Weg.',
'Die Sterne schweigen. Das ist Antwort genug.',
'Vertraue dem, was sich richtig anfuehlt. Nicht dem, was logisch klingt.',
'Es gibt einen Weg. Er fuehrt nicht zurueck.',
'Was du fuerchtest, hat weniger Macht, als du glaubst.',
'Geduld. Die Zeit arbeitet fuer dich.',
'Das Orakel sieht zwei Wege. Beide fuehren ans Ziel.',
'Jemand denkt gerade an dich. Das ist kein Zufall.',
'Warte bis zum naechsten Neumond. Dann handle.',
'Die Antwort liegt naeher, als du denkst.',
'Ja. Ohne Einschraenkung.',
'Das Schicksal hat bereits entschieden. Du wirst es bald erfahren.',
'Sieh genauer hin. Du uebersiehst etwas Wichtiges.',
'Was du gibst, kommt dreifach zurueck.',
'Nicht alles, was glaenzt, ist fuer dich bestimmt.',
'Der richtige Moment ist jetzt.',
'Das Orakel raet zur Vorsicht. Mehr nicht.',
];
var field = document.querySelector('.question-field');
var answerEl = document.querySelector('.answer-text');
var title = document.querySelector('.oracle-title');
var lastAnswer = -1;
function getRandomAnswer() {
var idx;
do {
idx = Math.floor(Math.random() * answers.length);
} while (idx === lastAnswer && answers.length > 1);
lastAnswer = idx;
return answers[idx];
}
function showAnswer() {
if (!field.value.trim()) return;
// Shake the title
title.classList.remove('shaking');
void title.offsetWidth;
title.classList.add('shaking');
// Hide hint
hint.style.opacity = '0';
// Fade out old answer
answerEl.classList.remove('visible');
answerEl.classList.add('fading');
setTimeout(function() {
answerEl.textContent = getRandomAnswer();
answerEl.classList.remove('fading');
// Trigger reflow for transition
void answerEl.offsetWidth;
answerEl.classList.add('visible');
}, 400);
// Clear and refocus
field.value = '';
field.placeholder = 'Frag erneut...';
}
field.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
showAnswer();
}
});
})();
</script>
<script src="/shared/ai-disclosure.js" data-tone="playful"></script>
<script src="/shared/i18n.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink