MrBlake
71df09a261
Runtime-Daten aus Git entfernen, WebP-Konvertierung ergänzen, Installation und Updates dokumentieren sowie den Repository-Link im Footer hinzufügen.
182 lines
9.1 KiB
PHP
182 lines
9.1 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
require_once __DIR__ . '/functions.php';
|
||
$all = load_events();
|
||
$past = array_values(array_filter($all, fn($e) => !is_upcoming($e)));
|
||
usort($past, 'by_datetime_desc');
|
||
$jsonld = render_event_jsonld_graph($past);
|
||
?>
|
||
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Vergangene Vorträge | <?= h(SITE_NAME) ?></title>
|
||
<meta name="description" content="Archiv: Bereits stattgefundene Vorträge & Lesungen der <?= h(SITE_NAME) ?> in Walschleben.">
|
||
<link rel="canonical" href="<?= h(BASE_URL) ?>/vergangene-vortraege.php">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta property="og:title" content="Vergangene Vorträge | <?= h(SITE_NAME) ?>">
|
||
<meta property="og:description" content="Archiv abgeschlossener Veranstaltungen – Themen & Referenten.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="<?= h(BASE_URL) ?>/vergangene-vortraege.php">
|
||
<meta property="og:image" content="<?= h(BASE_URL . DEFAULT_OG_IMAGE) ?>">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<script type="application/ld+json"><?= $jsonld ?></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="/assets/styles.css">
|
||
<link rel="icon" href="/assets/logo.png" sizes="32x32" type="image/png">
|
||
<style>
|
||
.poster-card{ border:1px solid #e9edf3; border-radius:1.1rem; box-shadow:0 8px 28px rgba(0,0,0,.06); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; background:#fff; }
|
||
.poster-card:hover{ transform:translateY(-2px); box-shadow:0 12px 38px rgba(0,0,0,.10); cursor:pointer; }
|
||
.poster-media{ padding:1rem 1rem 0; display:flex; justify-content:center; align-items:center; }
|
||
.poster-img{ display:block; margin:0 auto; width:auto; height:auto; max-width:100%; max-height: clamp(220px, 32vh, 420px); object-fit:contain; border-radius:.75rem; box-shadow:0 6px 18px rgba(0,0,0,.08); }
|
||
.poster-body{ text-align:center; padding:1rem 1.25rem 1.25rem; }
|
||
.poster-date{ text-transform:uppercase; letter-spacing:.06em; }
|
||
.poster-title{ font-weight:800; line-height:1.15; margin:.25rem 0 .35rem; }
|
||
.poster-sub{ color:var(--muted); }
|
||
.poster-desc{ margin:.75rem auto 0; color:#344654; max-width:46ch; }
|
||
.poster-meta{ margin-top:.9rem; gap:.5rem; justify-content:center }
|
||
.top-ribbon{ position:absolute; top:12px; left:12px; background:#9aa6b2; color:#fff; font-weight:700; padding:.28rem .55rem; border-radius:.5rem; font-size:.8rem; box-shadow:0 6px 14px rgba(0,0,0,.18); }
|
||
.modal-img{ max-height:90vh; width:auto; height:auto; object-fit:contain; display:block; margin:0 auto; }
|
||
.modal-body p{ white-space:pre-line; }
|
||
.poster-card:focus{ outline:3px solid rgba(23,137,202,.35); outline-offset:2px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom sticky-top">
|
||
<div class="container">
|
||
<a class="navbar-brand brand-logo" href="index.html">
|
||
<img src="/assets/logo.png" alt="Walschleber KulTour Logo" height="34" width="34">
|
||
<span><?= h(SITE_NAME) ?></span>
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav"><span class="navbar-toggler-icon"></span></button>
|
||
<div id="nav" class="collapse navbar-collapse">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item"><a class="nav-link" href="programm.php">Programm</a></li>
|
||
<li class="nav-item"><a class="nav-link active" href="vergangene-vortraege.php">Vergangene Vorträge</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="ueber-uns.html">Über uns</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="kontakt.html">Kontakt</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<header class="py-5 bg-light border-bottom">
|
||
<div class="container">
|
||
<h1 class="display-6 mb-2">Vergangene Vorträge</h1>
|
||
<p class="text-muted mb-0">Archiv der bisherigen Veranstaltungen.</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container my-4">
|
||
<?php if (!$past): ?>
|
||
<div class="alert alert-info">Noch keine vergangenen Einträge.</div>
|
||
<?php else: ?>
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<div class="small text-muted">Sortierung: neueste zuerst</div>
|
||
<a class="btn btn-brand btn-sm" href="programm.php">Zu den kommenden Terminen</a>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<?php foreach ($past as $e): $mid = 'past-'.h($e['id']); $detailPath = event_path($e); ?>
|
||
<div class="col-md-6 col-lg-4">
|
||
<article class="poster-card position-relative h-100"
|
||
data-bs-toggle="modal" data-bs-target="#<?= $mid ?>"
|
||
tabindex="0" role="button" aria-label="Details zu <?= h($e['title']) ?> öffnen">
|
||
|
||
<?php if (!empty($e['image'])): ?>
|
||
<div class="poster-media">
|
||
<img class="poster-img" src="<?= h($e['image']) ?>" alt="<?= h($e['title']) ?>">
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<div class="poster-body">
|
||
<span class="top-ribbon">Archiv</span>
|
||
<div class="small text-muted poster-date mb-2">
|
||
<?= date('d.m.Y', strtotime($e['date'])) ?> · <?= h($e['time'] ?: '19:30') ?>
|
||
</div>
|
||
|
||
<h2 class="h5 poster-title"><?= h($e['title']) ?></h2>
|
||
<?php if (!empty($e['speaker'])): ?>
|
||
<div class="poster-sub small mb-2">mit <?= h($e['speaker']) ?></div>
|
||
<?php endif; ?>
|
||
|
||
<?php if (!empty($e['description'])): ?>
|
||
<p class="poster-desc"><?= nl2br(h(mb_strimwidth($e['description'], 0, 240, '…'))) ?></p>
|
||
<?php endif; ?>
|
||
|
||
<div class="d-flex flex-wrap poster-meta">
|
||
<?php if (!empty($e['venue_name'])): ?>
|
||
<span class="badge text-bg-light border"><?= h($e['venue_name']) ?></span>
|
||
<?php endif; ?>
|
||
<?php if (!empty($e['tags'])): ?>
|
||
<span class="badge text-bg-light border"><?= h($e['tags']) ?></span>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<div class="mt-3 d-grid gap-2 d-sm-flex justify-content-center">
|
||
<a class="btn btn-outline-secondary btn-sm" href="<?= h($detailPath) ?>" onclick="event.stopPropagation()">Details</a>
|
||
</div>
|
||
|
||
<a href="#<?= $mid ?>" class="stretched-link" data-bs-toggle="modal" data-bs-target="#<?= $mid ?>" aria-hidden="true" tabindex="-1"></a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
<!-- Modals -->
|
||
<?php foreach ($past as $e): $mid = 'past-'.h($e['id']); ?>
|
||
<div class="modal fade" id="<?= $mid ?>" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-xl modal-dialog-centered modal-fullscreen-sm-down">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title h4 mb-0"><?= h($e['title']) ?></h2>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<?php if (!empty($e['image'])): ?>
|
||
<img src="<?= h($e['image']) ?>" alt="<?= h($e['title']) ?>" class="modal-img mb-3">
|
||
<?php endif; ?>
|
||
|
||
<p class="text-muted small mb-2">
|
||
<?= date('d.m.Y', strtotime($e['date'])) ?> · <?= h($e['time'] ?: '19:30') ?>
|
||
<?php if (!empty($e['speaker'])): ?> · mit <?= h($e['speaker']) ?><?php endif; ?>
|
||
</p>
|
||
|
||
<?php if (!empty($e['venue_name']) || !empty($e['venue_address'])): ?>
|
||
<p class="mb-2 text-center"><strong><?= h($e['venue_name']) ?></strong><?= !empty($e['venue_address']) ? ' · '.h($e['venue_address']) : '' ?></p>
|
||
<?php endif; ?>
|
||
|
||
<?php if (!empty($e['tags'])): ?>
|
||
<p class="mb-2 text-center"><span class="badge text-bg-light border"><?= h($e['tags']) ?></span></p>
|
||
<?php endif; ?>
|
||
|
||
<?php if (!empty($e['description'])): ?>
|
||
<p class="mb-0 text-center"><?= nl2br(h($e['description'])) ?></p>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
|
||
<?php endif; ?>
|
||
</main>
|
||
|
||
<footer class="py-4 border-top mt-5">
|
||
<div class="container small d-flex gap-3 flex-wrap align-items-center">
|
||
<span>© <?= date('Y') ?> <?= h(SITE_NAME) ?></span>
|
||
<span class="separator">•</span><a href="impressum.html">Impressum</a>
|
||
<span class="separator">•</span><a href="datenschutz.html">Datenschutz</a>
|
||
<span class="separator">•</span>
|
||
<a class="footer-gitea" href="https://git.mrblake.cc/MrBlake/Walschleber-Kultour-CMS" target="_blank" rel="noopener noreferrer" aria-label="Quellcode auf Gitea ansehen" title="Quellcode auf Gitea">
|
||
<img src="/assets/gitea.svg" width="18" height="18" alt="">
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
</body>
|
||
</html>
|