84b28d64f5
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
906 lines
33 KiB
HTML
906 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ElefantenHor.de — Die Horde kommt.</title>
|
|
<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=Passion+One:wght@400;700;900&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--earth-dark: #2C1810;
|
|
--earth-brown: #5C3D2E;
|
|
--earth-warm: #8B6914;
|
|
--dust: #D4A853;
|
|
--dust-light: #E8D5A3;
|
|
--savanna: #7A8B3C;
|
|
--savanna-dark: #4A5C1C;
|
|
--cream: #F5ECD7;
|
|
--danger-red: #C0392B;
|
|
--danger-orange: #E67E22;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--cream);
|
|
color: var(--earth-dark);
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* === SHAKE ANIMATIONS === */
|
|
@keyframes shake {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
5% { transform: translate(-3px, 2px) rotate(-0.5deg); }
|
|
10% { transform: translate(4px, -1px) rotate(0.8deg); }
|
|
15% { transform: translate(-5px, 3px) rotate(-1deg); }
|
|
20% { transform: translate(6px, -2px) rotate(1.2deg); }
|
|
25% { transform: translate(-4px, 4px) rotate(-0.8deg); }
|
|
30% { transform: translate(5px, -3px) rotate(1deg); }
|
|
35% { transform: translate(-6px, 2px) rotate(-1.2deg); }
|
|
40% { transform: translate(3px, -4px) rotate(0.6deg); }
|
|
45% { transform: translate(-2px, 3px) rotate(-0.4deg); }
|
|
50% { transform: translate(4px, -1px) rotate(0.8deg); }
|
|
55% { transform: translate(-5px, 2px) rotate(-1deg); }
|
|
60% { transform: translate(6px, -3px) rotate(1.2deg); }
|
|
65% { transform: translate(-3px, 4px) rotate(-0.6deg); }
|
|
70% { transform: translate(5px, -2px) rotate(1deg); }
|
|
75% { transform: translate(-4px, 1px) rotate(-0.8deg); }
|
|
80% { transform: translate(3px, -3px) rotate(0.5deg); }
|
|
85% { transform: translate(-2px, 2px) rotate(-0.3deg); }
|
|
90% { transform: translate(1px, -1px) rotate(0.2deg); }
|
|
95% { transform: translate(-1px, 1px) rotate(-0.1deg); }
|
|
}
|
|
|
|
@keyframes shake-heavy {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
5% { transform: translate(-8px, 5px) rotate(-1.5deg); }
|
|
10% { transform: translate(10px, -3px) rotate(2deg); }
|
|
15% { transform: translate(-12px, 7px) rotate(-2.5deg); }
|
|
20% { transform: translate(14px, -5px) rotate(3deg); }
|
|
25% { transform: translate(-10px, 8px) rotate(-2deg); }
|
|
30% { transform: translate(12px, -6px) rotate(2.5deg); }
|
|
35% { transform: translate(-8px, 4px) rotate(-1.5deg); }
|
|
40% { transform: translate(6px, -3px) rotate(1deg); }
|
|
45% { transform: translate(-4px, 2px) rotate(-0.8deg); }
|
|
50% { transform: translate(3px, -1px) rotate(0.5deg); }
|
|
60% { transform: translate(-2px, 1px) rotate(-0.3deg); }
|
|
70% { transform: translate(1px, -1px) rotate(0.2deg); }
|
|
80% { transform: translate(-1px, 0px) rotate(-0.1deg); }
|
|
90% { transform: translate(0px, 0px) rotate(0deg); }
|
|
}
|
|
|
|
@keyframes wobble {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
15% { transform: rotate(-5deg); }
|
|
30% { transform: rotate(4deg); }
|
|
45% { transform: rotate(-3deg); }
|
|
60% { transform: rotate(2deg); }
|
|
75% { transform: rotate(-1deg); }
|
|
90% { transform: rotate(0.5deg); }
|
|
}
|
|
|
|
@keyframes dust-rise {
|
|
0% { opacity: 0; transform: translateY(0) scale(1); }
|
|
20% { opacity: 0.6; }
|
|
100% { opacity: 0; transform: translateY(-80px) scale(2.5); }
|
|
}
|
|
|
|
@keyframes crack-spread {
|
|
0% { width: 0; opacity: 0; }
|
|
30% { opacity: 1; }
|
|
100% { width: 100%; opacity: 0; }
|
|
}
|
|
|
|
@keyframes pulse-danger {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
@keyframes footprint-appear {
|
|
0% { opacity: 0; transform: scale(0.5); }
|
|
50% { opacity: 0.3; transform: scale(1.1); }
|
|
100% { opacity: 0.15; transform: scale(1); }
|
|
}
|
|
|
|
@keyframes meter-fill {
|
|
0% { width: 20%; }
|
|
50% { width: 95%; }
|
|
100% { width: 20%; }
|
|
}
|
|
|
|
.shaking .shake-target {
|
|
animation: shake 2s ease-in-out;
|
|
}
|
|
|
|
.shaking .shake-heavy-target {
|
|
animation: shake-heavy 2.5s ease-in-out;
|
|
}
|
|
|
|
.shaking .wobble-target {
|
|
animation: wobble 1.8s ease-in-out;
|
|
}
|
|
|
|
.shaking .dust-particle {
|
|
animation: dust-rise 2s ease-out forwards;
|
|
}
|
|
|
|
.shaking .crack-line {
|
|
animation: crack-spread 2.5s ease-out forwards;
|
|
}
|
|
|
|
.shaking .danger-pulse {
|
|
animation: pulse-danger 0.3s ease-in-out 6;
|
|
}
|
|
|
|
/* === LAYOUT === */
|
|
.page-wrapper {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
/* === HERO === */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
position: relative;
|
|
background:
|
|
radial-gradient(ellipse at 30% 80%, rgba(122, 139, 60, 0.15) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 70% 20%, rgba(212, 168, 83, 0.2) 0%, transparent 50%),
|
|
linear-gradient(180deg, var(--cream) 0%, #EDE0C0 60%, #D4C4A0 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120px;
|
|
background: linear-gradient(0deg, var(--earth-brown) 0%, transparent 100%);
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.elephant-hero {
|
|
font-size: clamp(6rem, 15vw, 12rem);
|
|
line-height: 1;
|
|
margin-bottom: 1rem;
|
|
filter: drop-shadow(0 8px 24px rgba(44, 24, 16, 0.3));
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.title-main {
|
|
font-family: 'Passion One', sans-serif;
|
|
font-weight: 900;
|
|
font-size: clamp(3rem, 10vw, 8rem);
|
|
line-height: 0.95;
|
|
letter-spacing: -0.02em;
|
|
color: var(--earth-dark);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.title-main .de {
|
|
color: var(--savanna);
|
|
}
|
|
|
|
.title-main .dot {
|
|
color: var(--danger-red);
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.tagline {
|
|
font-family: 'Passion One', sans-serif;
|
|
font-weight: 400;
|
|
font-size: clamp(1.2rem, 3vw, 2rem);
|
|
color: var(--earth-brown);
|
|
margin-top: 1rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.scroll-hint {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
font-size: 0.85rem;
|
|
color: var(--earth-brown);
|
|
opacity: 0.6;
|
|
letter-spacing: 0.1em;
|
|
z-index: 2;
|
|
}
|
|
|
|
.scroll-hint span {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
/* Dust particles container */
|
|
.dust-container {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 200px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dust-particle {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--dust);
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
}
|
|
|
|
.dust-particle:nth-child(1) { left: 10%; animation-delay: 0.1s; }
|
|
.dust-particle:nth-child(2) { left: 25%; animation-delay: 0.3s; width: 12px; height: 12px; }
|
|
.dust-particle:nth-child(3) { left: 40%; animation-delay: 0.0s; width: 6px; height: 6px; }
|
|
.dust-particle:nth-child(4) { left: 55%; animation-delay: 0.2s; }
|
|
.dust-particle:nth-child(5) { left: 70%; animation-delay: 0.15s; width: 10px; height: 10px; }
|
|
.dust-particle:nth-child(6) { left: 85%; animation-delay: 0.35s; width: 5px; height: 5px; }
|
|
.dust-particle:nth-child(7) { left: 15%; animation-delay: 0.25s; width: 7px; height: 7px; }
|
|
.dust-particle:nth-child(8) { left: 60%; animation-delay: 0.05s; width: 9px; height: 9px; }
|
|
|
|
/* Crack lines */
|
|
.crack-container {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
.crack-line {
|
|
position: absolute;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--earth-brown), transparent);
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.crack-line:nth-child(1) { left: 5%; top: 0; }
|
|
.crack-line:nth-child(2) { left: 30%; top: 10px; animation-delay: 0.3s; }
|
|
.crack-line:nth-child(3) { left: 60%; top: -5px; animation-delay: 0.15s; }
|
|
|
|
/* === WARNING BAR === */
|
|
.warning-bar {
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
var(--danger-orange),
|
|
var(--danger-orange) 20px,
|
|
var(--earth-dark) 20px,
|
|
var(--earth-dark) 40px
|
|
);
|
|
padding: 1rem 2rem;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.warning-bar-inner {
|
|
background: var(--earth-dark);
|
|
color: var(--danger-orange);
|
|
font-family: 'Passion One', sans-serif;
|
|
font-size: clamp(1rem, 2.5vw, 1.4rem);
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
padding: 0.8rem 2rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.warning-bar-inner .blink-dot {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--danger-red);
|
|
border-radius: 50%;
|
|
margin: 0 0.8rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* === SECTIONS === */
|
|
section {
|
|
padding: 4rem 2rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Passion One', sans-serif;
|
|
font-weight: 700;
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
color: var(--earth-dark);
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* === STAMPEDE WARNINGS === */
|
|
.stampede-section {
|
|
background: linear-gradient(180deg, #EDE0C0 0%, var(--cream) 100%);
|
|
}
|
|
|
|
.warnings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.warning-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
box-shadow: 0 4px 20px rgba(44, 24, 16, 0.08);
|
|
border-left: 5px solid var(--danger-red);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.warning-card:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.warning-card.level-critical { border-left-color: var(--danger-red); }
|
|
.warning-card.level-high { border-left-color: var(--danger-orange); }
|
|
.warning-card.level-medium { border-left-color: var(--dust); }
|
|
|
|
.warning-level {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 0.25rem 0.6rem;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.level-critical .warning-level { background: #FDEDEC; color: var(--danger-red); }
|
|
.level-high .warning-level { background: #FDF2E9; color: var(--danger-orange); }
|
|
.level-medium .warning-level { background: #FEF9E7; color: var(--earth-warm); }
|
|
|
|
.warning-card h3 {
|
|
font-family: 'Passion One', sans-serif;
|
|
font-size: 1.4rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--earth-dark);
|
|
}
|
|
|
|
.warning-card p {
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
color: var(--earth-brown);
|
|
}
|
|
|
|
.warning-card .warning-emoji {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
font-size: 1.8rem;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
/* === HERD METER === */
|
|
.meter-section {
|
|
background: var(--earth-dark);
|
|
color: var(--cream);
|
|
text-align: center;
|
|
}
|
|
|
|
.meter-section .section-title {
|
|
color: var(--dust);
|
|
}
|
|
|
|
.meter-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.meter-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--dust-light);
|
|
}
|
|
|
|
.meter-bar {
|
|
height: 32px;
|
|
background: var(--earth-brown);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border: 2px solid var(--dust);
|
|
}
|
|
|
|
.meter-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--savanna), var(--danger-orange), var(--danger-red));
|
|
border-radius: 14px;
|
|
width: 20%;
|
|
transition: width 0.5s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.shaking .meter-fill {
|
|
animation: meter-fill 2.5s ease-in-out;
|
|
}
|
|
|
|
.meter-value {
|
|
font-family: 'Passion One', sans-serif;
|
|
font-size: 4rem;
|
|
color: var(--danger-orange);
|
|
margin-top: 1.5rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.meter-value span {
|
|
font-size: 1.5rem;
|
|
color: var(--dust-light);
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.meter-subtitle {
|
|
font-size: 0.9rem;
|
|
color: var(--dust-light);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* === FACTS === */
|
|
.facts-section {
|
|
background: linear-gradient(180deg, var(--cream) 0%, #EDE0C0 100%);
|
|
}
|
|
|
|
.facts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 1.5rem;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.fact-card {
|
|
text-align: center;
|
|
padding: 2rem 1.5rem;
|
|
background: white;
|
|
border-radius: 16px;
|
|
box-shadow: 0 2px 12px rgba(44, 24, 16, 0.06);
|
|
}
|
|
|
|
.fact-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.fact-number {
|
|
font-family: 'Passion One', sans-serif;
|
|
font-size: 2.8rem;
|
|
color: var(--earth-dark);
|
|
line-height: 1;
|
|
}
|
|
|
|
.fact-unit {
|
|
font-family: 'Passion One', sans-serif;
|
|
font-size: 1.2rem;
|
|
color: var(--savanna);
|
|
}
|
|
|
|
.fact-desc {
|
|
font-size: 0.85rem;
|
|
color: var(--earth-brown);
|
|
margin-top: 0.5rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* === FOOTPRINTS === */
|
|
.footprints-section {
|
|
background: var(--earth-brown);
|
|
padding: 3rem 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.footprint {
|
|
position: absolute;
|
|
font-size: 2rem;
|
|
opacity: 0;
|
|
transform: rotate(var(--rot));
|
|
}
|
|
|
|
.shaking .footprint {
|
|
animation: footprint-appear 2s ease-out forwards;
|
|
}
|
|
|
|
.footprint:nth-child(1) { left: 5%; top: 20%; --rot: -15deg; animation-delay: 0s; }
|
|
.footprint:nth-child(2) { left: 15%; top: 60%; --rot: -10deg; animation-delay: 0.15s; }
|
|
.footprint:nth-child(3) { left: 28%; top: 30%; --rot: -20deg; animation-delay: 0.3s; }
|
|
.footprint:nth-child(4) { left: 38%; top: 70%; --rot: -5deg; animation-delay: 0.45s; }
|
|
.footprint:nth-child(5) { left: 50%; top: 25%; --rot: -18deg; animation-delay: 0.6s; }
|
|
.footprint:nth-child(6) { left: 62%; top: 65%; --rot: -12deg; animation-delay: 0.75s; }
|
|
.footprint:nth-child(7) { left: 75%; top: 35%; --rot: -8deg; animation-delay: 0.9s; }
|
|
.footprint:nth-child(8) { left: 85%; top: 55%; --rot: -22deg; animation-delay: 1.05s; }
|
|
|
|
.footprints-text {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
color: var(--dust-light);
|
|
font-family: 'Passion One', sans-serif;
|
|
font-size: clamp(1.2rem, 3vw, 1.8rem);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* === RUMBLE COUNTER === */
|
|
.counter-section {
|
|
background: var(--cream);
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
}
|
|
|
|
.rumble-counter {
|
|
font-family: 'Passion One', sans-serif;
|
|
font-size: clamp(3rem, 8vw, 6rem);
|
|
color: var(--earth-dark);
|
|
line-height: 1;
|
|
}
|
|
|
|
.rumble-counter-label {
|
|
font-size: 1rem;
|
|
color: var(--earth-brown);
|
|
margin-top: 0.5rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* === FOOTER === */
|
|
footer {
|
|
background: var(--earth-dark);
|
|
color: var(--dust-light);
|
|
text-align: center;
|
|
padding: 3rem 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.footer-text {
|
|
font-family: 'Passion One', sans-serif;
|
|
font-size: clamp(1rem, 2.5vw, 1.4rem);
|
|
letter-spacing: 0.05em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.footer-elephants {
|
|
font-size: 1.5rem;
|
|
margin-top: 1rem;
|
|
letter-spacing: 0.5rem;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.footer-copy {
|
|
font-size: 0.75rem;
|
|
margin-top: 1.5rem;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* === MOBILE === */
|
|
@media (max-width: 600px) {
|
|
.warnings-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.facts-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
section {
|
|
padding: 3rem 1.2rem;
|
|
}
|
|
}
|
|
|
|
/* === SEISMOGRAPH === */
|
|
.seismo-section {
|
|
background: #1a1008;
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.seismo-section .section-title {
|
|
color: var(--savanna);
|
|
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
|
}
|
|
|
|
.seismograph {
|
|
max-width: 700px;
|
|
margin: 1.5rem auto 0;
|
|
height: 100px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.seismo-line {
|
|
stroke: var(--savanna);
|
|
stroke-width: 2;
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.seismo-line-active {
|
|
stroke: var(--danger-red);
|
|
stroke-width: 3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper" id="page">
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="elephant-hero shake-heavy-target">🐘</div>
|
|
<h1 class="title-main wobble-target">
|
|
ElefantenHor<span class="dot">.</span><span class="de">de</span>
|
|
</h1>
|
|
<p class="tagline shake-target" data-de="Wenn der Boden bebt." data-en="When the ground shakes.">Wenn der Boden bebt.</p>
|
|
|
|
<div class="dust-container">
|
|
<div class="dust-particle"></div>
|
|
<div class="dust-particle"></div>
|
|
<div class="dust-particle"></div>
|
|
<div class="dust-particle"></div>
|
|
<div class="dust-particle"></div>
|
|
<div class="dust-particle"></div>
|
|
<div class="dust-particle"></div>
|
|
<div class="dust-particle"></div>
|
|
</div>
|
|
|
|
<div class="crack-container">
|
|
<div class="crack-line"></div>
|
|
<div class="crack-line"></div>
|
|
<div class="crack-line"></div>
|
|
</div>
|
|
|
|
<div class="scroll-hint shake-target" data-de="BODEN BEOBACHTEN" data-en="WATCH THE GROUND">
|
|
BODEN BEOBACHTEN
|
|
<span>▾</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- WARNING BAR -->
|
|
<div class="warning-bar">
|
|
<div class="warning-bar-inner shake-target danger-pulse">
|
|
<span class="blink-dot"></span>
|
|
<span data-de="Stampede-Warnung aktiv" data-en="Stampede warning active">Stampede-Warnung aktiv</span>
|
|
<span class="blink-dot"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STAMPEDE WARNINGS -->
|
|
<section class="stampede-section">
|
|
<h2 class="section-title shake-target" data-de="Aktuelle Stampede-Warnungen" data-en="Current Stampede Warnings">Aktuelle Stampede-Warnungen</h2>
|
|
<div class="warnings-grid">
|
|
<div class="warning-card level-critical wobble-target">
|
|
<span class="warning-level" data-de="Kritisch" data-en="Critical">Kritisch</span>
|
|
<span class="warning-emoji">💥</span>
|
|
<h3 data-de="Sektor 7 — Wohnzimmer" data-en="Sector 7 — Living Room">Sektor 7 — Wohnzimmer</h3>
|
|
<p data-de="Herde von 43 Elefanten im Anmarsch. Geschätzte Ankunft: jetzt. Vasen sichern. Sofa aufgeben." data-en="Herd of 43 elephants approaching. Estimated arrival: now. Secure vases. Abandon sofa.">Herde von 43 Elefanten im Anmarsch. Geschätzte Ankunft: jetzt. Vasen sichern. Sofa aufgeben.</p>
|
|
</div>
|
|
<div class="warning-card level-high shake-target">
|
|
<span class="warning-level" data-de="Hoch" data-en="High">Hoch</span>
|
|
<span class="warning-emoji">🌍</span>
|
|
<h3 data-de="Seismische Aktivität" data-en="Seismic Activity">Seismische Aktivität</h3>
|
|
<p data-de="Richter-Skala zeigt 4.2 an. Ursache: kein Erdbeben, nur Dienstags-Stampede. Alles normal." data-en="Richter scale reads 4.2. Cause: not an earthquake, just Tuesday stampede. All normal.">Richter-Skala zeigt 4.2 an. Ursache: kein Erdbeben, nur Dienstags-Stampede. Alles normal.</p>
|
|
</div>
|
|
<div class="warning-card level-medium wobble-target">
|
|
<span class="warning-level" data-de="Mittel" data-en="Medium">Mittel</span>
|
|
<span class="warning-emoji">🥜</span>
|
|
<h3 data-de="Erdnuss-Vorräte kritisch" data-en="Peanut Supplies Critical">Erdnuss-Vorräte kritisch</h3>
|
|
<p data-de="Lagerbestand unter 2 Tonnen gefallen. Notfall-Lieferung aus Tansania unterwegs. ETA: 3 Stunden." data-en="Stock dropped below 2 tonnes. Emergency delivery from Tanzania en route. ETA: 3 hours.">Lagerbestand unter 2 Tonnen gefallen. Notfall-Lieferung aus Tansania unterwegs. ETA: 3 Stunden.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SEISMOGRAPH -->
|
|
<section class="seismo-section">
|
|
<h2 class="section-title shake-target" data-de="Live-Seismograph" data-en="Live Seismograph">Live-Seismograph</h2>
|
|
<div class="seismograph">
|
|
<svg id="seismo-svg" width="100%" height="100" viewBox="0 0 700 100" preserveAspectRatio="none">
|
|
<path id="seismo-path" class="seismo-line" d="M0,50 L700,50"/>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- HERD METER -->
|
|
<section class="meter-section">
|
|
<h2 class="section-title shake-target" data-de="Herdenmesser" data-en="Herd Meter">Herdenmesser</h2>
|
|
<div class="meter-container">
|
|
<div class="meter-label">
|
|
<span data-de="Ruhig" data-en="Calm">Ruhig</span>
|
|
<span>Stampede</span>
|
|
</div>
|
|
<div class="meter-bar shake-target">
|
|
<div class="meter-fill" id="meter-fill"></div>
|
|
</div>
|
|
<div class="meter-value" id="meter-value">
|
|
23 <span data-de="Elefanten" data-en="Elephants">Elefanten</span>
|
|
</div>
|
|
<p class="meter-subtitle" data-de="Aktuelle Herdenstärke im Einzugsgebiet" data-en="Current herd strength in the catchment area">Aktuelle Herdenstärke im Einzugsgebiet</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FACTS -->
|
|
<section class="facts-section">
|
|
<h2 class="section-title wobble-target" data-de="Unnützes Elefantenwissen" data-en="Useless Elephant Facts">Unnützes Elefantenwissen</h2>
|
|
<div class="facts-grid">
|
|
<div class="fact-card shake-target">
|
|
<div class="fact-icon">🦶</div>
|
|
<div class="fact-number">6.000</div>
|
|
<div class="fact-unit">kg</div>
|
|
<p class="fact-desc" data-de="wiegt ein ausgewachsener Bulle. Dein Boden so: 💀" data-en="is what a full-grown bull weighs. Your floor: 💀">wiegt ein ausgewachsener Bulle. Dein Boden so: 💀</p>
|
|
</div>
|
|
<div class="fact-card wobble-target">
|
|
<div class="fact-icon">👂</div>
|
|
<div class="fact-number">32</div>
|
|
<div class="fact-unit">km</div>
|
|
<p class="fact-desc" data-de="weit hören Elefanten Infraschall. Du hörst sie erst bei 32 Metern." data-en="is how far elephants hear infrasound. You hear them at 32 metres.">weit hören Elefanten Infraschall. Du hörst sie erst bei 32 Metern.</p>
|
|
</div>
|
|
<div class="fact-card shake-target">
|
|
<div class="fact-icon">💨</div>
|
|
<div class="fact-number">40</div>
|
|
<div class="fact-unit">km/h</div>
|
|
<p class="fact-desc" data-de="Spitze bei Stampede. Du schaffst 15. Viel Glück." data-en="top speed in stampede. You manage 15. Good luck.">Spitze bei Stampede. Du schaffst 15. Viel Glück.</p>
|
|
</div>
|
|
<div class="fact-card wobble-target">
|
|
<div class="fact-icon">🧠</div>
|
|
<div class="fact-number">5</div>
|
|
<div class="fact-unit">kg</div>
|
|
<p class="fact-desc" data-de="Gehirn. Größtes aller Landtiere. Vergisst nie. Nie." data-en="Brain. Largest of all land animals. Never forgets. Never.">Gehirn. Größtes aller Landtiere. Vergisst nie. Nie.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTPRINTS -->
|
|
<section class="footprints-section">
|
|
<div class="footprint">🐾</div>
|
|
<div class="footprint">🐾</div>
|
|
<div class="footprint">🐾</div>
|
|
<div class="footprint">🐾</div>
|
|
<div class="footprint">🐾</div>
|
|
<div class="footprint">🐾</div>
|
|
<div class="footprint">🐾</div>
|
|
<div class="footprint">🐾</div>
|
|
<p class="footprints-text" data-de="Die Spuren führen immer hierher." data-en="The tracks always lead here.">Die Spuren führen immer hierher.</p>
|
|
</section>
|
|
|
|
<!-- RUMBLE COUNTER -->
|
|
<section class="counter-section">
|
|
<div class="section-title" data-de="Erschütterungen seit Seitenaufruf" data-en="Tremors since page load">Erschütterungen seit Seitenaufruf</div>
|
|
<div class="rumble-counter shake-heavy-target" id="rumble-count">0</div>
|
|
<p class="rumble-counter-label" data-de="und es werden mehr." data-en="and there will be more.">und es werden mehr.</p>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<p class="footer-text shake-target" data-de="Hier war mal eine Webseite. Dann kam die Horde." data-en="There used to be a website here. Then came the horde.">Hier war mal eine Webseite. Dann kam die Horde.</p>
|
|
<div class="footer-elephants wobble-target">🐘 🐘 🐘 🐘 🐘</div>
|
|
<p class="footer-copy" data-de="© 2026 ElefantenHor.de — Alle Rechte zertrampelt." data-en="© 2026 ElefantenHor.de — All rights trampled.">© 2026 ElefantenHor.de — Alle Rechte zertrampelt.</p>
|
|
<div style="text-align:center;margin-top:16px;">
|
|
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--dust-light,#E8D5A3);color:var(--dust-light,#E8D5A3);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.7;">EN</button>
|
|
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--dust-light,#E8D5A3);font-size:0.6rem;opacity:0.4;">Maschinell übersetzt</small>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// Stampede controller
|
|
const page = document.getElementById('page');
|
|
const rumbleCountEl = document.getElementById('rumble-count');
|
|
const meterFill = document.getElementById('meter-fill');
|
|
const meterValue = document.getElementById('meter-value');
|
|
let rumbleCount = 0;
|
|
let seismoActive = false;
|
|
|
|
function triggerStampede() {
|
|
rumbleCount++;
|
|
rumbleCountEl.textContent = rumbleCount;
|
|
|
|
// Random herd size during stampede
|
|
const herdSize = Math.floor(Math.random() * 80) + 15;
|
|
meterValue.innerHTML = herdSize + ' <span>Elefanten</span>';
|
|
|
|
page.classList.add('shaking');
|
|
seismoActive = true;
|
|
|
|
// Remove after animation completes
|
|
setTimeout(() => {
|
|
page.classList.remove('shaking');
|
|
seismoActive = false;
|
|
// Reset meter value after calm
|
|
setTimeout(() => {
|
|
const calmSize = Math.floor(Math.random() * 15) + 5;
|
|
meterValue.innerHTML = calmSize + ' <span>Elefanten</span>';
|
|
}, 500);
|
|
}, 2500);
|
|
}
|
|
|
|
// First stampede after 3 seconds, then every 8-12 seconds
|
|
setTimeout(triggerStampede, 3000);
|
|
setInterval(() => {
|
|
triggerStampede();
|
|
}, 8000 + Math.random() * 4000);
|
|
|
|
// Fix: re-randomize the interval
|
|
function scheduleNext() {
|
|
const delay = 8000 + Math.random() * 4000;
|
|
setTimeout(() => {
|
|
triggerStampede();
|
|
scheduleNext();
|
|
}, delay);
|
|
}
|
|
|
|
// Seismograph
|
|
const seismoPath = document.getElementById('seismo-path');
|
|
const seismoSvg = document.getElementById('seismo-svg');
|
|
let seismoData = new Array(70).fill(50);
|
|
|
|
function updateSeismograph() {
|
|
// Shift data left
|
|
seismoData.shift();
|
|
|
|
// Add new point
|
|
if (seismoActive) {
|
|
seismoData.push(50 + (Math.random() - 0.5) * 80);
|
|
seismoPath.classList.add('seismo-line-active');
|
|
} else {
|
|
seismoData.push(50 + (Math.random() - 0.5) * 4);
|
|
seismoPath.classList.remove('seismo-line-active');
|
|
}
|
|
|
|
// Build path
|
|
let d = 'M';
|
|
seismoData.forEach((y, i) => {
|
|
const x = (i / (seismoData.length - 1)) * 700;
|
|
d += (i === 0 ? '' : ' L') + x.toFixed(1) + ',' + y.toFixed(1);
|
|
});
|
|
seismoPath.setAttribute('d', d);
|
|
|
|
requestAnimationFrame(updateSeismograph);
|
|
}
|
|
|
|
requestAnimationFrame(updateSeismograph);
|
|
|
|
// Warning bar blink dots
|
|
const blinkDots = document.querySelectorAll('.blink-dot');
|
|
setInterval(() => {
|
|
blinkDots.forEach(dot => {
|
|
dot.style.opacity = dot.style.opacity === '0' ? '1' : '0';
|
|
});
|
|
}, 800);
|
|
</script>
|
|
<script src="/shared/ai-disclosure.js" data-tone="playful"></script>
|
|
<script src="/shared/i18n.js"></script>
|
|
</body>
|
|
</html>
|