200 lines
12 KiB
PHP
200 lines
12 KiB
PHP
<?php
|
|
require __DIR__ . '/includes/auth.php';
|
|
require __DIR__ . '/includes/functions.php';
|
|
$pdo = require __DIR__ . '/includes/db.php';
|
|
|
|
$stmt = $pdo->query("SELECT * FROM eintraege ORDER BY
|
|
(entry_date IS NULL), entry_date DESC, created_at DESC");
|
|
$eintraege = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Geburtsverein Ernsthausen</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=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800&family=Libre+Franklin:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
.cover{
|
|
background:radial-gradient(120% 140% at 50% -10%, var(--cover) 0%, var(--cover-2) 65%);
|
|
color:var(--paper); padding:88px 24px 64px; position:relative; overflow:hidden;
|
|
}
|
|
.cover-inner{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
|
|
.cover h1{font-size:clamp(34px,5vw,54px); line-height:1.08; color:var(--paper); margin-bottom:18px;}
|
|
.cover h1 em{color:var(--gold); font-style:normal;}
|
|
.cover p.lede{font-size:17.5px; color:rgba(239,238,224,0.78); max-width:46ch;}
|
|
.cover .meta{margin-top:28px; display:flex; gap:28px; flex-wrap:wrap;}
|
|
.cover .meta div{font-family:'Space Mono', monospace; font-size:13px; color:rgba(239,238,224,0.6);}
|
|
.cover .meta b{display:block; font-family:'Fraunces', serif; font-size:22px; color:var(--gold); font-weight:600;}
|
|
.tree-wrap{position:relative; display:flex; justify-content:center;}
|
|
.tree-wrap svg{width:100%; max-width:320px; height:auto;}
|
|
.leaf{transform-origin:center; opacity:0; animation:sprout .6s ease-out forwards;}
|
|
.branch{stroke-dasharray:200; stroke-dashoffset:200; animation:draw 1.1s ease-out forwards;}
|
|
@keyframes draw{to{stroke-dashoffset:0;}}
|
|
@keyframes sprout{to{opacity:1; transform:scale(1);} from{opacity:0; transform:scale(0);}}
|
|
@media (prefers-reduced-motion:reduce){.leaf,.branch{animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important;}}
|
|
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
|
|
.about-grid p{margin:0 0 16px; color:var(--ink-soft);}
|
|
.about-grid .highlight{background:var(--paper-2); border:1px solid var(--line); border-radius:2px; padding:24px; font-family:'Fraunces', serif; font-size:19px; font-weight:600; color:var(--ink); line-height:1.4;}
|
|
.about-grid .highlight span{display:block; font-family:'Space Mono', monospace; font-weight:400; font-size:12.5px; color:var(--sage-deep); margin-top:10px; text-transform:uppercase; letter-spacing:.1em;}
|
|
.satzung-link{display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-weight:600; text-decoration:none; color:var(--ink); border-bottom:1.5px solid var(--gold); padding-bottom:2px; font-size:15px;}
|
|
.satzung-link:hover{color:var(--sage-deep); border-color:var(--sage-deep);}
|
|
.tradition{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
|
|
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
|
|
.step{background:var(--paper); border:1px solid var(--line); padding:26px 22px; border-radius:2px;}
|
|
.step .num{font-family:'Space Mono', monospace; color:var(--gold); font-size:13px; letter-spacing:.1em;}
|
|
.step h3{font-size:19px; margin:10px 0 8px;}
|
|
.step p{margin:0; color:var(--ink-soft); font-size:15px;}
|
|
.board-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
|
|
.card{border:1px solid var(--line); background:var(--paper); padding:22px 18px; position:relative; border-radius:2px; transition:transform .18s ease, box-shadow .18s ease;}
|
|
.card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(35,48,31,0.08);}
|
|
.card .leaf-ico{width:20px; height:20px; margin-bottom:14px; color:var(--sage-deep);}
|
|
.card .role{font-family:'Space Mono', monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--sage-deep); margin-bottom:6px;}
|
|
.card .name{font-family:'Fraunces', serif; font-weight:600; font-size:18px; margin-bottom:4px;}
|
|
.card .contact{font-size:13px; color:var(--ink-soft); word-break:break-word;}
|
|
.card .contact a{color:var(--ink-soft); text-decoration:underline; text-decoration-color:var(--line);}
|
|
.photo-cta{background:var(--cover); color:var(--paper); border-radius:4px; padding:44px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
|
|
.photo-cta h2{color:var(--paper); font-size:26px; margin-bottom:8px;}
|
|
.photo-cta p{margin:0; color:rgba(239,238,224,0.72); max-width:42ch;}
|
|
@media (max-width:860px){.cover-inner{grid-template-columns:1fr;} .tree-wrap{order:-1; margin-bottom:8px;} .about-grid{grid-template-columns:1fr;} .steps{grid-template-columns:1fr;} .board-grid{grid-template-columns:1fr 1fr;}}
|
|
@media (max-width:520px){.board-grid{grid-template-columns:1fr;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<?php include __DIR__ . '/includes/nav.php'; ?>
|
|
|
|
<section class="cover" style="padding-top:88px;">
|
|
<div class="cover-inner">
|
|
<div>
|
|
<p class="kicker on-dark">Ernsthausen · seit 1976</p>
|
|
<h1>Für jedes neue Kind<br>ein <em>Bäumchen</em> im Dorf.</h1>
|
|
<p class="lede">Der Geburtsverein Ernsthausen pflegt eine einfache Tradition: Kommt bei einem Mitglied ein Kind zur Welt, stellen wir gemeinsam ein Bäumchen auf und feiern die Ankunft des neuen Erdenbürgers.</p>
|
|
<div class="meta">
|
|
<div><b>1976</b>Gründungsjahr</div>
|
|
<div><b>Ernsthausen</b>Zuhause des Vereins</div>
|
|
<div><b>nicht e. V.</b>Vereinsform</div>
|
|
</div>
|
|
</div>
|
|
<div class="tree-wrap">
|
|
<svg viewBox="0 0 240 300">
|
|
<line x1="120" y1="290" x2="120" y2="150" stroke="#c9a05c" stroke-width="6" stroke-linecap="round"/>
|
|
<path class="branch" d="M120 210 C 90 190, 70 175, 48 150" fill="none" stroke="#c9a05c" stroke-width="4" stroke-linecap="round" style="animation-delay:.1s"/>
|
|
<path class="branch" d="M120 190 C 150 170, 168 155, 190 132" fill="none" stroke="#c9a05c" stroke-width="4" stroke-linecap="round" style="animation-delay:.25s"/>
|
|
<path class="branch" d="M120 165 C 100 130, 95 105, 80 70" fill="none" stroke="#c9a05c" stroke-width="4" stroke-linecap="round" style="animation-delay:.4s"/>
|
|
<path class="branch" d="M120 165 C 140 130, 148 100, 158 62" fill="none" stroke="#c9a05c" stroke-width="4" stroke-linecap="round" style="animation-delay:.55s"/>
|
|
<path class="branch" d="M120 155 C 118 120, 118 90, 120 55" fill="none" stroke="#c9a05c" stroke-width="4" stroke-linecap="round" style="animation-delay:.7s"/>
|
|
<g fill="#7e9471">
|
|
<circle class="leaf" cx="48" cy="150" r="11" style="animation-delay:.9s"/>
|
|
<circle class="leaf" cx="190" cy="132" r="12" style="animation-delay:1s"/>
|
|
<circle class="leaf" cx="80" cy="70" r="13" style="animation-delay:1.1s"/>
|
|
<circle class="leaf" cx="158" cy="62" r="12" style="animation-delay:1.2s"/>
|
|
<circle class="leaf" cx="120" cy="55" r="14" style="animation-delay:1.3s"/>
|
|
<circle class="leaf" cx="66" cy="112" r="9" style="animation-delay:1.4s"/>
|
|
<circle class="leaf" cx="172" cy="98" r="9" style="animation-delay:1.5s"/>
|
|
<circle class="leaf" cx="100" cy="88" r="8" style="animation-delay:1.6s"/>
|
|
<circle class="leaf" cx="140" cy="90" r="8" style="animation-delay:1.7s"/>
|
|
</g>
|
|
<ellipse cx="120" cy="292" rx="46" ry="7" fill="#0000001a"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="ueber-uns">
|
|
<div class="section-head">
|
|
<p class="kicker">Wer wir sind</p>
|
|
<h2>Über uns</h2>
|
|
</div>
|
|
<div class="about-grid">
|
|
<div>
|
|
<p>Der Geburtsverein wurde am <strong>25. Dezember 1976</strong> von einer Teilgruppe der Ernsthäuser freiwilligen Feuerwehr gegründet — als nicht eingetragener Verein, aus der Nachbarschaft heraus und für sie gedacht.</p>
|
|
<p>Sinn und Zweck ist es, eine einfache Tradition zu pflegen: Wenn bei einem Mitglied ein Kind geboren wird, stellt der Verein ein „Bäumchen" auf und feiert in schlichtem Rahmen die Ankunft des neuen Erdenbürgers.</p>
|
|
<a class="satzung-link" href="GeburtsvereinSatzung.pdf" target="_blank" rel="noopener">Satzung des Vereins lesen (PDF) →</a>
|
|
</div>
|
|
<div class="highlight">
|
|
„Ein Bäumchen für jedes Kind, gefeiert in einfachem Rahmen — so, wie es die Gemeinschaft in Ernsthausen seit über 45 Jahren hält."
|
|
<span>Vereinszweck laut Satzung</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tradition" class="tradition">
|
|
<div class="section-head">
|
|
<p class="kicker">Wie es abläuft</p>
|
|
<h2>Die Tradition</h2>
|
|
</div>
|
|
<div class="steps">
|
|
<div class="step"><div class="num">01</div><h3>Ein Kind wird geboren</h3><p>Kommt bei einem Mitglied des Vereins ein Kind zur Welt, wird das im Dorf bekannt gemacht.</p></div>
|
|
<div class="step"><div class="num">02</div><h3>Das Bäumchen wird gestellt</h3><p>Gemeinsam stellt der Verein ein Bäumchen auf — sichtbares Zeichen für den neuen Erdenbürger.</p></div>
|
|
<div class="step"><div class="num">03</div><h3>Gefeiert wird in einfachem Rahmen</h3><p>Zum Stellen und späteren Abbauen des Baumes trifft sich die Gemeinschaft zu kleinen Feiern.</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="vorstand">
|
|
<div class="section-head">
|
|
<p class="kicker">Die Organe des Vereins</p>
|
|
<h2>Vorstand</h2>
|
|
</div>
|
|
<div class="board-grid">
|
|
<div class="card">
|
|
<svg class="leaf-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 21c-5-1-8-5-8-10 5 0 9 3 10 8 1-6 5-10 10-10-1 6-5 10-11 12z"/></svg>
|
|
<div class="role">Präsident</div><div class="name">Andreas Kopp</div>
|
|
<div class="contact"><a href="mailto:EKT.Kopp@web.de">EKT.Kopp@web.de</a></div>
|
|
</div>
|
|
<div class="card">
|
|
<svg class="leaf-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 21c-5-1-8-5-8-10 5 0 9 3 10 8 1-6 5-10 10-10-1 6-5 10-11 12z"/></svg>
|
|
<div class="role">Ehrenpräsident & Stellvertreter</div><div class="name">Armin Kopp</div>
|
|
</div>
|
|
<div class="card">
|
|
<svg class="leaf-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 21c-5-1-8-5-8-10 5 0 9 3 10 8 1-6 5-10 10-10-1 6-5 10-11 12z"/></svg>
|
|
<div class="role">Schriftführer</div><div class="name">Horst Schmidt</div>
|
|
</div>
|
|
<div class="card">
|
|
<svg class="leaf-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 21c-5-1-8-5-8-10 5 0 9 3 10 8 1-6 5-10 10-10-1 6-5 10-11 12z"/></svg>
|
|
<div class="role">Kassierer</div><div class="name">Frank Weber</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="aktuelles">
|
|
<div class="section-head">
|
|
<p class="kicker">Termine & Neuigkeiten</p>
|
|
<h2>Aktuelles</h2>
|
|
</div>
|
|
<div class="log">
|
|
<?php if (empty($eintraege)): ?>
|
|
<p class="log-empty">Aktuell sind keine Termine oder Neuigkeiten eingetragen.</p>
|
|
<?php else: foreach ($eintraege as $eintrag): ?>
|
|
<div class="log-entry">
|
|
<div class="date"><?= e(format_datum($eintrag['entry_date']) ?? '—') ?></div>
|
|
<div>
|
|
<span class="tag"><?= $eintrag['type'] === 'termin' ? 'Termin' : 'Neuigkeit' ?></span>
|
|
<h3><?= e($eintrag['title']) ?></h3>
|
|
<p><?= e($eintrag['body']) ?></p>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; endif; ?>
|
|
</div>
|
|
<?php if (!is_logged_in()): ?>
|
|
<p class="note" style="margin-top:24px; font-size:13.5px; color:var(--ink-soft);">Du bist Mitglied und möchtest selbst einen Termin eintragen? <a href="login.php" style="color:var(--sage-deep); font-weight:600;">Hier anmelden.</a></p>
|
|
<?php endif; ?>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="photo-cta">
|
|
<div>
|
|
<h2>Historisches Fotoalbum</h2>
|
|
<p>Bilder vergangener Baumfeste und Vereinsjahre — ein Blick zurück auf die Geschichte des Geburtsvereins.</p>
|
|
</div>
|
|
<a class="btn" href="foto/foto.htm" target="_blank" rel="noopener">Album ansehen →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<?php include __DIR__ . '/includes/footer.php'; ?>
|
|
</body>
|
|
</html>
|