accessibility

app/State.php

@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DorfJetzt;
+
+class State
+{
+    public string $description;
+    public string $svg_name;
+    public string $color;
+
+    public function __construct(string $description, string $svg_name, string $color)
+    {
+        $this->description = $description;
+        $this->svg_name = $svg_name;
+        $this->color = $color;
+    }
+
+}

assets/.htaccess

@@ -0,0 +1,3 @@
+<IfModule mod_expires.c>
+ExpiresDefault "access plus 2 week"
+</IfModule>

assets/svg/ic_lock-question_48px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,1A5,5 0 0,0 7,6V8H6A2,2 0 0,0 4,10V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V10A2,2 0 0,0 18,8H17V6A5,5 0 0,0 12,1M12,2.9C13.71,2.9 15.1,4.29 15.1,6V8H8.9V6C8.9,4.29 10.29,2.9 12,2.9M12.19,10.5C13.13,10.5 13.88,10.71 14.42,11.12C14.96,11.54 15.23,12.1 15.23,12.8C15.23,13.24 15.08,13.63 14.79,14C14.5,14.36 14.12,14.64 13.66,14.85C13.4,15 13.23,15.15 13.14,15.32C13.05,15.5 13,15.72 13,16H11C11,15.5 11.1,15.16 11.29,14.92C11.5,14.68 11.84,14.4 12.36,14.08C12.62,13.94 12.83,13.76 13,13.54C13.14,13.33 13.22,13.08 13.22,12.8C13.22,12.5 13.13,12.28 12.95,12.11C12.77,11.93 12.5,11.85 12.19,11.85C11.92,11.85 11.7,11.92 11.5,12.06C11.34,12.2 11.24,12.41 11.24,12.69H9.27C9.22,12 9.5,11.4 10.05,11.04C10.59,10.68 11.3,10.5 12.19,10.5M11,17H13V19H11V17Z" /></svg>

composer.json

@@ -1,6 +1,21 @@
 {
+    "autoload": {
+        "psr-4": {
+            "DorfJetzt\\": "app/"
+        }
+    },
     "require": {
-        "johngrogg/ics-parser": "^2.1.17",
-        "twbs/bootstrap": "4.3.1"
+        "johngrogg/ics-parser": "^3",
+        "symfony/http-client": "^6.2",
+        "symfony/http-kernel": "^6.2",
+        "twig/twig": "^3.5",
+        "twig/intl-extra": "^3.5"
+    },
+    "require-dev": {
+        "vimeo/psalm": "^5.4"
+    },
+    "config": {
+        "apcu-autoloader": true,
+        "classmap-authoritative": true
     }
 }

index.php

@@ -1,257 +1,204 @@
 <?php
-require_once 'vendor/autoload.php';
+
+declare(strict_types=1);
+require __DIR__ . '/vendor/autoload.php';
+
 use ICal\ICal;
-static $DATE_FORMAT = 'd.m.Y H:i';
-static $VISITORS_FILE = 'C:\\Users\\Christopher Teutsch\\dorf_visitors.txt';
-static $DORF_IN_LOCKDOWN = false;
-static $DORF_VIRTUAL_EVENTS = true;
-static $ICAL_URL = 'https://chaosdorf.de/~derf/cccd_all.ics';
-static $ICAL_STALE_SECONDS = 60 * 15;
-static $ICAL_CACHE_FILE = 'C:\\Users\\Christopher Teutsch\\cccd_all.ics';
-//static $STATE_FILE = '/media/sg/dorf.jetzt_state';
-static $STATE_FILE = 'C:\\Users\\Christopher Teutsch\\dorf_state.txt';
-static $STATE_STALE_SECONDS = 60;
-if ($DORF_VIRTUAL_EVENTS || ! $DORF_IN_LOCKDOWN){
-    $ical = new ICal(false, array(
+use Symfony\Component\HttpClient\CachingHttpClient;
+use Symfony\Component\HttpClient\HttpClient;
+use Symfony\Component\HttpKernel\HttpCache\Store;
+use Twig\TwigFilter;
+use Twig\NodeVisitor\OptimizerNodeVisitor;
+use DorfJetzt\State;
+
+#region Configuration
+const VISITORS_FILE = '/opt/dorf.jetzt_visitors';
+const ICAL_URL = 'https://chaosdorf.de/~derf/cccd.ics';
+const HTTP_CACHE = '/tmp/dorf.jetzt/http_cache';
+const TMPL_CACHE = '/tmp/dorf.jetzt/twig_cache';
+const ROOM_STATE_URL = 'https://chaosdorf.de/raumstatus/status.png';
+const DEFAULT_TZ = 'Europe/Berlin';
+#endregion
+
+
+const INVALID_UAS = [
+	"AhrefsBot",
+	"Googlebot",
+	"Yahoo",
+	"Go-http-client/",
+	"bingbot",
+	"CheckMarkNetwork",
+	"SemrushBot",
+	"BingPreview",
+	"facebookexternalhit",
+	"hetrix.tools",
+];
+
+const HASH_TO_STATE = [
+	'bff0167ed8aba031c49122ef4046cf1b' => 'closed',
+	'd8ec899c69283bc775952a767db9d5f5' => 'maybe_open',
+	'2c2672c641425e5b2acd6ee74f39ae60' => 'open',
+	'66aece8ae27ffd3a656d42005fa3efbd' => 'private',
+	'86c75c0ad413b06ff8291673162d0b64' => 'unknown',
+	'0' => 'error',
+];
+
+function stateMap(string $state): State
+{
+	return match ($state) {
+		'closed' => new State(
+			'Das Dorf ist gerade <em>geschlossen</em>.',
+			'lock',
+			'red',
+		),
+		'maybe_open' => new State(
+			'Das Dorf ist gerade <em>vielleicht geöffnet</em>: </p><p>Der Clubraum ist offen, aber es findet keine Veranstaltung statt.</p><p>
+		Der Status kann sich also kurzfristig ändern.',
+			'done',
+			'brown',
+		),
+		'open' => new State(
+			'Das Dorf ist gerade <em>geöffnet</em>.</p><p>
+		Komm gerne vorbei.',
+			'done',
+			'green',
+		),
+		'private' => new State(
+			'Das Dorf ist gerade <em>privat</em>: </p><p>Es sind Leute da, aber der Clubraum ist nicht geöffnet.</p><p>
+		Komm gerne vorbei (aber frag lieber vorher, wie lange noch Leute da sind).',
+			'lock',
+			'fdd835',
+		),
+		'unknown' => new State(
+			'Der Status vom Dorf ist gerade <em>unbekannt</em>',
+			'lock-question',
+			'orange',
+		),
+		'error' => new State(
+			'Der Server konnte den Status vom Dorf nicht abrufen.',
+			'error',
+			'blue',
+		),
+	};
+}
+
+function hasValidUa(): bool
+{
+	if (isset($_SERVER['HTTP_USER_AGENT'])) {
+		if (in_array(true, array_map(fn ($ua) => str_contains($_SERVER['HTTP_USER_AGENT'], $ua), INVALID_UAS))) {
+			return false;
+		}
+		return true;
+	}
+	return false;
+}
+
+function dateTimeFromEvent(ICal $ical, object $event): DateTimeImmutable
+{
+	return DateTimeImmutable::createFromMutable($ical->iCalDateToDateTime($event->dtstart_array[3]));
+}
+
+/**
+ * @return array{summary: string, url: string, start: DateTimeImmutable, end: DateTimeImmutable}[]
+ */
+function prepareEvents(ICal $ical, array $events): array
+{
+	$returns = [];
+	foreach ($events as $index => $event) {
+		$start = dateTimeFromEvent($ical, $event);
+		$end = $start->add(new DateInterval($event->duration));
+		$url = strval($event->url);
+		$summary = strval($event->summary);
+		$returns[] = [
+			'summary' => $summary,
+			'url' => $url,
+			'start' => $start,
+			'end' => $end,
+		];
+	}
+	return $returns;
+}
+
+function getState(\Symfony\Contracts\HttpClient\HttpClientInterface $http): State
+{
+	try {
+		$response = $http->request('GET', ROOM_STATE_URL);
+		$hash = md5($response->getContent());
+		if (!array_key_exists($hash, HASH_TO_STATE)){
+			error_log("Encountered unknown state hash $hash");
+		}
+		return stateMap(HASH_TO_STATE[$hash]);
+	} catch (\Exception $e) {
+		return stateMap('error');
+	}
+}
+
+
+$store = new Store(HTTP_CACHE);
+$client = HttpClient::create();
+$client = new CachingHttpClient($client, $store, ['default_ttl' => 60, 'allow_revalidate' => true]);
+
+$state_obj = getState($client);
+
+
+
+$ical = new ICal(options: [
 	'defaultSpan' => 2,
-            'defaultTimeZone' => 'Europe/Berlin',
+	'defaultTimeZone' => DEFAULT_TZ,
 	'defaultWeekStart' => 'MO',
 	'filterDaysBefore' => '1',
-        ));
-    if (is_file($ICAL_CACHE_FILE)){
-        error_log('is file');
-        $mtime = filemtime($ICAL_CACHE_FILE);
-        $time_diff = time() - $mtime;
-        error_log(sprintf('%d',$time_diff));
-        if ($time_diff >= $ICAL_STALE_SECONDS){
-            $data = file_get_contents($ICAL_URL);
-            file_put_contents($ICAL_CACHE_FILE);
-            $ical->initString($data);
-        }
-        else {
-            $ical->initFile()
-        }
-        // Else get state from network every time (inefficient!)
-    } else {
-        $state = get_state('https://chaosdorf.de/raumstatus/status.png');
-    }
-    if ()
-    $ical->initUrl($ICAL_URL, $acceptLanguage = 'de');
+]);
+try {
+	$ical->initUrl(ICAL_URL, userAgent: 'dorf.jetzt', acceptLanguage: 'de');
 	$events = $ical->eventsFromInterval('2 week');
-    $first_event = $events[0];
-    $events = array_slice($events, 1);
+} catch (\Exception $e){
+	$events = [];
 }
-/**
- * @param $url
- * @return int
- */
-function get_state($url): int
+if (isset($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
+	$locale = locale_accept_from_http($_SERVER['HTTP_ACCEPT_LANGUAGE']);
+	setlocale(LC_TIME, $locale);
+}
+$visitors = file_get_contents(VISITORS_FILE);
+if (is_string($visitors)) {
+	$visitors = intval($visitors);
+} else {
+	$visitors = 0;
+}
+
+
+
+$loader = new \Twig\Loader\FilesystemLoader('templates');
+$twig = new \Twig\Environment($loader, [
+	'cache' => TMPL_CACHE,
+	'auto_reload' => true,
+	// The 'raw' optimizer sometimes eats the only 'raw' that is used
+	'optimizations' => OptimizerNodeVisitor::OPTIMIZE_ALL ^ OptimizerNodeVisitor::OPTIMIZE_RAW_FILTER,
+]);
+
+function formatEndDt(?DateTimeImmutable $end, ?DateTimeImmutable $start, string $timezone = 'Europe/Berlin'): string
 {
-    $hash = hash('crc32b', file_get_contents($url));
-    switch($hash){
-        case '1ac9394d':
-            return State::STATE_UNKNOWN;
-        case 'bf48d8e5':
-            return State::STATE_OPEN;
-        case 'beab4306':
-            return State::STATE_MAYBE_OPEN;
-        case '4e7e398a':
-            return State::STATE_CLOSED;
-        case '5503654a':
-            return State::STATE_PRIVATE;
-        default:
-            error_log('Default state called in get_state(): hash '. $hash);
-            return State::STATE_ERROR;
-    }
-}
-abstract class State{ // php doesn't have enums
-    const STATE_CLOSED = 0;
-    const STATE_OPEN = 1;
-    const STATE_MAYBE_OPEN = 2;
-    const STATE_PRIVATE = 3;
-    const STATE_UNKNOWN = 4;
-    const STATE_ERROR = -1;
-}
-class FormattingInfo{
-    function __construct($state)
-    {
-        switch($state){
-            case State::STATE_CLOSED:
-                $this->color = 'red';
-                $this->svg = 'lock';
-                $this->state_string = 'Das Dorf ist gerade <em>geschlossen</em>.';
-                $this->img_alt = 'geschlossen';
-                break;
-            case State::STATE_MAYBE_OPEN:
-                $this->color = 'brown';
-                $this->svg = 'done';
-                $this->state_string = 'Das Dorf ist gerade <em>vielleicht geöffnet</em>: </p><p>Der Clubraum ist offen, aber es findet keine Veranstaltung statt.</p><p>
-		Der Status kann sich also kurzfristig ändern.';
-                $this->img_alt = 'vielleicht geöffnet';
-                break;
-            case State::STATE_OPEN:
-                $this->color = 'green';
-                $this->svg = 'done';
-                $this->state_string = 'Das Dorf ist gerade <em>geöffnet</em>.</p><p>
-		Komm gerne vorbei.';
-                $this->img_alt = 'geöffnet';
-                break;
-            case State::STATE_PRIVATE:
-                $this->color = 'fdd835';
-                $this->svg = 'lock';
-                $this->state_string = 'Das Dorf ist gerade <em>privat</em>: </p><p>Es sind Leute da, aber der Clubraum ist nicht geöffnet.</p><p>
-		Komm gerne vorbei (aber frag lieber vorher, wie lange noch Leute da sind).';
-                $this->img_alt = 'privat';
-                break;
-            case State::STATE_UNKNOWN:
-                $this->color = 'orange';
-                $this->svg = 'warning';
-                $this->state_string = 'Der Status vom Dorf ist gerade <em>unbekannt</em>';
-                $this->img_alt = 'unbekannt';
-            case State::STATE_ERROR:
-                $this->color = 'blue';
-                $this->svg = 'error';
-                $this->state_string = 'Der Server konnte den Status vom Dorf nicht ermitteln. Sorry.';
-                $this->img_alt = 'konnte nicht abgerufen werden';
-                break;
-        }
-    }
-    public $svg;
-    public $img_alt;
-    public $state_string;
-    public $color;
-}
-if (! $DORF_IN_LOCKDOWN){
-    // Try to acquire state locally, but *only* if STATE_FILE exists
-    if (is_file($STATE_FILE)){
-        error_log('is file');
-        $mtime = filemtime($STATE_FILE);
-        $time_diff = time() - $mtime;
-        error_log(sprintf('%d',$time_diff));
-        if ($time_diff >= $STATE_STALE_SECONDS){
-            $state = get_state('https://chaosdorf.de/raumstatus/status.png');
-            $result = file_put_contents($STATE_FILE, sprintf('%d',$state));
-        }
-        else {
-            $state = sscanf(file_get_contents($STATE_FILE),'%d')[0];
-        }
-    // Else get state from network every time (inefficient!)
+	if ($end == null || $start == null) return "ERROR";
+	$tz = new DateTimeZone($timezone);
+	$daySame = $end->setTimeZone($tz)->format('d.m.Y') == $start->setTimeZone($tz)->format('d.m.Y');
+	$endIsMidnight = $end->setTimeZone($tz)->format('H:i') == '00:00' && $start->setTimeZone($tz)->format('H:i') != '00:00';
+	if ($daySame || $endIsMidnight) {
+		return $end->format('H:i');
 	} else {
-        $state = get_state('https://chaosdorf.de/raumstatus/status.png');
+		return $end->format('d.m.Y H:i');
 	}
-    $fmt = new FormattingInfo($state);
-
 }
 
-function format_event($event): string{
-	global $DATE_FORMAT, $ical;
-	$startdate_loop = $ical->iCalDateToDateTime($event->dtstart_array[3]);
-	$startdate_str = $startdate_loop->format($DATE_FORMAT);
-	$interval_loop = new DateInterval($event->duration);
-	if ($interval_loop->d != 0 || $interval_loop->h >= 24){
-		$enddate_str = $startdate_loop->add($interval_loop)->format($DATE_FORMAT);
-	}else{
-		$enddate_str = $startdate_loop->add($interval_loop)->format('H:i');
-	}
-	return $startdate_str . ' &ndash; ' . $enddate_str; 
+$twig->addFilter(new TwigFilter('end_datetime', 'formatEndDt'));
+$twig->getExtension(\Twig\Extension\CoreExtension::class)->setTimezone(DEFAULT_TZ);
+echo ($twig->render("Main.twig", [
+	'visitors' => $visitors,
+	'state_svg' => $state_obj->svg_name,
+	'state_color' => $state_obj->color,
+	'state_string' => $state_obj->description,
+	'events' => prepareEvents($ical, $events),
+]));
+/* Initialising values */
+if (hasValidUa()) {
+	$visitors++;
+	file_put_contents(VISITORS_FILE, strval($visitors));
 }
-$v = file_get_contents($VISITORS_FILE);
-?>
-<!DOCTYPE html>
-<html lang="de">
-<head>
-	<title>Was geht im Dorf.jetzt?</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-	<link rel="stylesheet" href="assets/css/bootstrap.min.css" crossorigin="anonymous">
-	<meta charset="UTF-8" />
-</head>
-<body>
-	<div class="container">
-		<nav class="navbar">	
-			<h1 class="text-center">Was geht im Dorf.jetzt?</h1><hr />
-		</nav>
-		<?php if($DORF_IN_LOCKDOWN): ?>
-		<div class="card mb-3 text-center">
-			<div class="card-body">
-				<h2 class="card-title">Das Chaosdorf ist geschlossen</h2>
-				<img src="assets/svg/ic_lock_48px.svg" style="filter:url(assets/css/filter.svg#red);height:16rem;width:auto;" />
-				<p class="card-text font-weight-normal">Das Chaosdorf ist aufgrund eines Beschlusses des Vereins geschlossen.</p>
-				<p class="card-text font-weight-normal">Das gilt <span class="font-weight-bold">bis auf Weiteres</span>.</p>
-				<p class="card-text font-weight-normal">Natürlich hört das Chaosdorfleben nicht auf, <span class="font-weight-bold">kommt uns gerne im <a href="https://wiki.chaosdorf.de/VirtualSpace">VirtualSpace</a> besuchen.</span></p>
-			</div>
-		</div>
-
-		<?php else: ?>
-		<div class="card mb-3 text-center">
-			<div class="card-body">
-				<h2 class="card-title">Türstatus</h2>
-				<img alt="<?= $fmt->img_alt ?>" src="assets/svg/ic_<?= $fmt->svg ?>_48px.svg" style="filter:url(assets/css/filter.svg#<?= $fmt->color ?>);height:16rem;width:auto;" />
-				<p class="card-text"><?= $fmt->state_string ?></p>
-					<div class="btn-wrapper">
-						<a href="https://wiki.chaosdorf.de/Raumstatus" class="btn btn-lg btn-block btn-primary">What's this?</a>
-					</div>
-			</div>
-		</div>
-		<?php endif ?>
-		<?php if($DORF_VIRTUAL_EVENTS || !$DORF_IN_LOCKDOWN): ?>
-		<div class="card mb-3 text-center">
-			<div class="card-body">
-				<h2 class="card-title">Events</h2>
-				<?php if (!empty($events)) : ?>
-				<h3 class="card-subtitle mb-2 text-muted">Nächste Veranstaltung</h3>
-				<p class="card-text">
-					<h4 class="font-weight-bold"><?= htmlspecialchars($first_event->summary, ENT_QUOTES, 'UTF-8') ?></h4>
-					<div class="font-weight-normal"><?= format_event($first_event) ?></div>
-					<div class="font-weight-normal"><a href="<?= $first_event->url ?>">Details zur Veranstaltung</a></div>
-				</p>
-				<h3 class="card-title">Danach:</h3>
-				<table class="table">
-					<tbody>
-					<?php foreach ($events as $event) : ?>
-						<tr>
-							<th scope="row"><?=format_event($event)?></th>
-							<td><?= htmlspecialchars($event->summary) ?></td>
-							<td><a href="<?= $first_event->url ?>">Details</a></td>
-						</tr>
-					<?php endforeach ?>
-					</tbody>
-				</table>
-				<a href="https://wiki.chaosdorf.de/Chaosdorf_Wiki:Current_events" class="btn btn-lg btn-block btn-primary">Event-Kalender</a>
-				<?php else: ?>
-				<h4 class="card-subtitle mb-2 text-muted">Aktuell keine Veranstaltungen.</h4>
-				<p class="card-text">
-					<span class="font-weight-normal">
-						Es stehen aktuell keine Veranstaltungen an.
-					</span>
-				</p>
-				<?php endif ?>
-			</div>
-		</div>
-		<?php endif ?>
-	</div>
-	<footer class="page-footer font-small text-center">
-    	<div>
-        Du bist Besucher #<?= $v ?>
-        </div>
-		<div>
-		<a href="https://git.iwonder.name/iwonder/dorf.jetzt">Sieh dir den Code hier an</a>
-		</div>
-		<div>
-		Melde Fehler bitte an <a href="mailto:help@dorf.jetzt">help@dorf.jetzt</a>
-		</div>
-        <div>
-        Dies ist kein offizieller Auftritt des <a href="https://chaosdorf.de">Chaos Computer Club Düsseldorf / Chaosdorf e.V.</a>.
-        </div>
-	</footer>
-    <?php
-    // These are actually not needed, see https://getbootstrap.com/docs/4.0/getting-started/introduction/#js
-	// <script src="assets/js/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
-	// <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-	// <script src="assets/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-    ?>
-</body>
-</html>
-<?php
-if(!$v) $v=0;
-$v++;
-file_put_contents($VISITORS_FILE, $v);

psalm.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<psalm
+    errorLevel="3"
+    resolveFromConfigFile="true"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xmlns="https://getpsalm.org/schema/config"
+    xsi:schemaLocation="https://getpsalm.org/schema/config vendor/vimeo/psalm/config.xsd"
+>
+    <projectFiles>
+        <file name="index.php" />
+        <directory name="app" />
+        <ignoreFiles>
+            <directory name="vendor" />
+        </ignoreFiles>
+    </projectFiles>
+</psalm>

templates/Main.twig

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <title>Was geht im Dorf.jetzt?</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
+    <link rel="preload" as="style" href="assets/css/filter.svg" />
+    <meta charset="UTF-8" />
+</head>
+
+<body>
+    <div class="container">
+        <header>
+            <h1 class="text-center">Was geht im Dorf.jetzt?</h1>
+        </header>
+        <div class="card mb-3 text-center">
+            <div class="card-body">
+                <h2 class="card-title">Türstatus</h2>
+                <figure>
+                    <img src="assets/svg/ic_{{ state_svg }}_48px.svg"
+                        style="filter:url(assets/css/filter.svg#{{ state_color }});height:16rem;width:auto;" alt="" />
+                    <figcaption>
+                        <p class="card-text">{{ state_string | raw }}</p>
+                    </figcaption>
+                </figure>
+                <div class="btn-wrapper">
+                    <a href="https://wiki.chaosdorf.de/Raumstatus" class="btn btn-lg btn-block btn-primary">Was bedeutet
+                        das?</a>
+                </div>
+            </div>
+        </div>
+        <div class="card mb-3 text-center">
+            <div class="card-body">
+                <h2 class="card-title">Events</h2>
+                {% if events|length > 0 %}
+                <h3 class="card-subtitle mb-2 text-muted">Nächste Veranstaltung</h3>
+                <p class="card-text">
+                <h4 class="font-weight-bold">{{ events[0].summary|e }}</h4>
+                <span class="font-weight-normal">{{ events[0].start|date('d.m.Y H:i', 'Europe/Berlin') }} &ndash; {{
+                    events[0].end|end_datetime(events[0].start, 'Europe/Berlin') }}</span>
+                <span class="font-weight-normal"><a href="{{ events[0].url }}">Details zur Veranstaltung</a></span>
+                </p>
+                <h3 class="card-title">Danach:</h3>
+                <table class="table">
+                    <tbody>
+                        {% for event in events %}
+                        {% if loop.index0 > 0 %}
+                        <tr>
+                            <th scope="row"> {{ event.start|date('d.m.Y H:i', 'Europe/Berlin') }} &ndash; {{
+                                event.end|end_datetime(event.start, 'Europe/Berlin') }}</th>
+                            <td>{{ event.summary|e }}</td>
+                            <td><a href="{{ event.url }}">Details</a></td>
+                        </tr>
+                        {% endif %}
+                        {% endfor %}
+                    </tbody>
+                </table>
+                <a href="https://wiki.chaosdorf.de/Chaosdorf_Wiki:Current_events"
+                    class="btn btn-lg btn-block btn-primary">Event-Kalender</a>
+                {% else %}
+                <h3 class="card-subtitle mb-2 text-muted">Aktuell keine Veranstaltungen.</h6>
+                    <p class="card-text">
+                        <span class="font-weight-normal">
+                            Es stehen aktuell keine Veranstaltungen an.
+                        </span>
+                    </p>
+                    {% endif %}
+            </div>
+        </div>
+    </div>
+    <footer class="page-footer font-small text-center">
+        <div>
+            Du bist Besucher #{{ visitors }}
+        </div>
+        <div>
+            <a href="https://git.iwonder.name/iwonder/dorf.jetzt">Sieh dir den Code hier an</a>
+        </div>
+        <div>
+            Melde Fehler bitte an <a href="mailto:help@dorf.jetzt">help@dorf.jetzt</a>
+        </div>
+        <div>
+            Dies ist kein offizieller Auftritt des <a href="https://chaosdorf.de">Chaos Computer Club Düsseldorf /
+                Chaosdorf e.V.</a>.
+        </div>
+    </footer>
+</body>
+
+</html>