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

feat: orakil.de — mystisches KI-Orakel onepager

Browse Source
This commit is contained in:
m
2026-03-31 10:25:47 +02:00
parent 14cbc09464
commit 8f4c880308
2 changed files with 321 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
sites/orakil.de/index.html Normal file
View File

@@ -0,0 +1,316 @@
<!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;
}
/* Prophecies */
.prophecies {
margin-top: 80px;
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-size: clamp(0.85rem, 2vw, 1.05rem);
color: var(--gold-dim);
font-style: italic;
letter-spacing: 0.04em;
line-height: 1.7;
max-width: 540px;
text-align: center;
position: absolute;
opacity: 0;
transition: opacity 1.2s ease;
}
.prophecy.active {
opacity: 1;
position: relative;
}
/* 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; }
}
</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">Das Orakel wei&szlig;. Frag.</p>
<div class="question-container">
<input type="text" class="question-field" placeholder="Stelle deine Frage..." readonly>
<div class="question-ornament">&#x2014; ORACVLVM &#x2014;</div>
</div>
<div class="prophecies">
<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>
</section>
<div class="ornament-bottom">&#x2726; &#x2726; &#x2726;</div>
<script>
(function() {
var prophecies = document.querySelectorAll('.prophecy');
var current = 0;
setInterval(function() {
prophecies[current].classList.remove('active');
current = (current + 1) % prophecies.length;
prophecies[current].classList.add('active');
}, 5000);
})();
</script>
</body>
</html>

5
sites/orakil.de/site.yaml Normal file
View File

@@ -0,0 +1,5 @@
domain: orakil.de
template: custom
title: "OraKIl — Frag das Orakel"
description: "Das Orakel weiß. Frag."
lang: de