feat: initial mono-repo with 30 vanity domain sites
Scaffold complete repo structure: - 28 static sites extracted from running containers on mlake - 2 dynamic sites (dasbes.de, dumusst.com) marked for separate handling - Template system with 6 templates (person-dark/light, product-dark, editorial, fun, minimal) - Shared CSS (variables, responsive, animations, noise overlay) - nginx config generator with multi-domain alias support - Build script with Docker-based nginx validation - add-site.sh helper for scaffolding new domains - Dockerfile for single nginx:alpine container Sites: clemensplassmann.de, danosi.de, deinesei.de, derkaiseristnackt.de, elefantenhor.de, fragina.de, frenchkis.de, ichbinaufbali.de, ichbinaufbarley.de, insain.de, julietensity.de, kainco.de (+keinco.de), kainstress.de, keinefreun.de, knzlmgmt.de, kopffrai.de, legalais.de, machesdocheinfach.de, mai-otto.de (+otto.flexsiebels.de, ottomatisch.de, ichbinotto.de), martinsiebels.de, matthiasbreier.de, osterai.de, paragraphenraiter.de, schulfrai.de, smartin3.de, sorgenfrai.de, vonschraitter.de, wartebitte.de Refs: otto#341
This commit is contained in:
mAi
899
sites/elefantenhor.de/index.html
Normal file
899
sites/elefantenhor.de/index.html
Normal file
@@ -0,0 +1,899 @@
|
||||
<!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">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">
|
||||
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>
|
||||
Stampede-Warnung aktiv
|
||||
<span class="blink-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STAMPEDE WARNINGS -->
|
||||
<section class="stampede-section">
|
||||
<h2 class="section-title shake-target">Aktuelle Stampede-Warnungen</h2>
|
||||
<div class="warnings-grid">
|
||||
<div class="warning-card level-critical wobble-target">
|
||||
<span class="warning-level">Kritisch</span>
|
||||
<span class="warning-emoji">💥</span>
|
||||
<h3>Sektor 7 — Wohnzimmer</h3>
|
||||
<p>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">Hoch</span>
|
||||
<span class="warning-emoji">🌍</span>
|
||||
<h3>Seismische Aktivität</h3>
|
||||
<p>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">Mittel</span>
|
||||
<span class="warning-emoji">🥜</span>
|
||||
<h3>Erdnuss-Vorräte kritisch</h3>
|
||||
<p>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">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">Herdenmesser</h2>
|
||||
<div class="meter-container">
|
||||
<div class="meter-label">
|
||||
<span>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>Elefanten</span>
|
||||
</div>
|
||||
<p class="meter-subtitle">Aktuelle Herdenstärke im Einzugsgebiet</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FACTS -->
|
||||
<section class="facts-section">
|
||||
<h2 class="section-title wobble-target">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">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">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">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">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">Die Spuren führen immer hierher.</p>
|
||||
</section>
|
||||
|
||||
<!-- RUMBLE COUNTER -->
|
||||
<section class="counter-section">
|
||||
<div class="section-title">Erschütterungen seit Seitenaufruf</div>
|
||||
<div class="rumble-counter shake-heavy-target" id="rumble-count">0</div>
|
||||
<p class="rumble-counter-label">und es werden mehr.</p>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p class="footer-text shake-target">Hier war mal eine Webseite. Dann kam die Horde.</p>
|
||||
<div class="footer-elephants wobble-target">🐘 🐘 🐘 🐘 🐘</div>
|
||||
<p class="footer-copy">© 2026 ElefantenHor.de — Alle Rechte zertrampelt.</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user