m/onepager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: orakil.de — ein Hinweistext statt rotierende Prophecies, breiterer Antwortbereich

Browse Source
This commit is contained in:
m
2026-03-31 11:25:58 +02:00
parent 9400e11dec
commit 112f667f24
1 changed files with 15 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
sites/orakil.de/index.html
View File

@@ -190,41 +190,27 @@
white-space: nowrap; white-space: nowrap;
} }
/* Prophecies */ /* Hint text */
.prophecies { .hint {
margin-top: 80px; margin-top: 48px;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 1.5s ease 1.8s forwards;
opacity: 0;
}
.prophecy {
font-family: 'Cinzel', serif; font-family: 'Cinzel', serif;
font-size: clamp(0.85rem, 2vw, 1.05rem); font-size: clamp(0.8rem, 2vw, 1rem);
color: var(--gold-dim); color: var(--text-muted);
font-style: italic; font-style: italic;
letter-spacing: 0.04em; letter-spacing: 0.04em;
line-height: 1.7; line-height: 1.7;
max-width: 540px;
text-align: center; text-align: center;
position: absolute; animation: fadeIn 2s ease 1.8s forwards;
opacity: 0; opacity: 0;
transition: opacity 1.2s ease; transition: opacity 0.6s ease;
pointer-events: none;
}
.prophecy.active {
opacity: 1;
pointer-events: auto;
} }
/* 8-ball answer */ /* 8-ball answer */
.answer-container { .answer-container {
margin-top: 60px; margin-top: 48px;
min-height: 80px; min-height: 80px;
width: 100%;
max-width: 620px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -239,7 +225,7 @@
font-style: italic; font-style: italic;
letter-spacing: 0.04em; letter-spacing: 0.04em;
line-height: 1.7; line-height: 1.7;
max-width: 540px; max-width: 620px;
text-align: center; text-align: center;
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
@@ -340,12 +326,7 @@
<div class="question-ornament">&#x2014; ORACVLVM &#x2014;</div> <div class="question-ornament">&#x2014; ORACVLVM &#x2014;</div>
</div> </div>
<div class="prophecies"> <p class="hint">Die Antwort war immer in dir. Die KI hat sie dir nur gezeigt.</p>
<p class="prophecy active">Die Antwort war immer in dir. Die KI hat sie nur schneller gefunden.</p>
<p class="prophecy">Wer das Orakel fragt, muss die Antwort ertragen.</p>
<p class="prophecy">Das Orakel sieht alles. Auch deine Cookies.</p>
<p class="prophecy">Nicht jede Frage verdient einen Token.</p>
</div>
<div class="answer-container"> <div class="answer-container">
<p class="answer-text"></p> <p class="answer-text"></p>
@@ -356,14 +337,7 @@
<script> <script>
(function() { (function() {
// Rotating ambient prophecies var hint = document.querySelector('.hint');
var prophecies = document.querySelectorAll('.prophecy');
var current = 0;
var ambientTimer = setInterval(function() {
prophecies[current].classList.remove('active');
current = (current + 1) % prophecies.length;
prophecies[current].classList.add('active');
}, 5000);
// 8-ball answers // 8-ball answers
var answers = [ var answers = [
@@ -421,9 +395,8 @@
void title.offsetWidth; void title.offsetWidth;
title.classList.add('shaking'); title.classList.add('shaking');
// Hide prophecies // Hide hint
prophecies[current].classList.remove('active'); hint.style.opacity = '0';
clearInterval(ambientTimer);
// Fade out old answer // Fade out old answer
answerEl.classList.remove('visible'); answerEl.classList.remove('visible');