|
|
<?phplocale_set_default('de_DE');$config = require_once './config.php';$START_DATE = $config['start_date'];$EVENTS = $config['events'];
if ($_SERVER['REQUEST_METHOD'] == "POST") { $n = 0; do { $file_name = $config['data_dir'] . "/" . time(); $file = fopen($file_name, "x"); } while ($file === false && ++$n < 5); if (!$file || !fwrite($file, var_export($_POST, true))) { echo "Leider konnte deine Anmeldung nicht gespeichert werden. Bitte melde dich bei luetzi-vernetzung-bb@systemli.org damit wir den Fehler beheben können!"; exit; } echo "Danke für deine Anmeldung."; if ($_POST['email']) { echo " Wir schreiben dir eine E-Mail falls der Solibus in einem von dir gewählten Zeitraum fährt."; } exit;}
$ONE_DAY = new DateInterval("P1D");
function get_days_of_week() { global $ONE_DAY; $res = []; $date = (new DateTime())->setTimestamp(strtotime("this week")); for ($n = 0; $n < 7; ++$n) { $res[] = IntlDateFormatter::formatObject($date, "ccc"); $date->add($ONE_DAY); } return $res;}
$DAYS_OF_WEEK = get_days_of_week();
function print_month($start) { global $DAYS_OF_WEEK, $ONE_DAY, $EVENTS; $month_start = (new DateTimeImmutable())->setTimestamp(strtotime("first day of this month", $start->getTimestamp())); $week_start = (new DateTimeImmutable())->setTimestamp(strtotime("this week", $month_start->getTimestamp())); $month_end = (new DateTimeImmutable())->setTimestamp(strtotime("+1 month", $month_start->getTimestamp())); $month_name = IntlDateFormatter::formatObject($month_start, "MMMM yyyy"); ?><table class=month>
<caption><h3><?= $month_name ?></h3></caption>
<tr><?php foreach ($DAYS_OF_WEEK as $day) { echo "<th>$day</th>"; }?></tr>
<?php $date = DateTime::createFromImmutable($week_start); while ($date->diff($month_end)->invert == 0) { echo "<tr>"; for ($n = 0; $n < 7; ++$n) { $invalid = $start->diff($date)->invert == 1 || $month_end->diff($date)->invert == 0; echo "<td" . ($invalid ? " class=invalid" : "") . ">"; $label = IntlDateFormatter::formatObject($date, "dd"); if ($invalid) { echo $label; } else { $id = IntlDateFormatter::formatObject($date, "yyyy-MM-dd"); echo "<input type=checkbox name=\"date_$id\" id=\"date_$id\"><label for=\"date_$id\">$label";
if (isset($EVENTS[$id])) { echo "<span class=event><span class=event-content>".htmlspecialchars($EVENTS[$id])."</span></span>"; } echo "</label>"; } echo "</td>"; $date->add($ONE_DAY); } }?>
</table><?php}
?><!DOCTYPE html>
<html lang=de><title>Soli-Bus-Fahrten nach Lützerath</title><meta name=viewport content="width=device-width, initial-scale=1"><style>body { margin: 0}footer { border-top: 0.3em dashed #722CA2;
padding: 1em 1em 0 1em; background: #f1cc37;
color: #5A4B0B;
padding: 1em 0;}main { background: #FFE98E;
padding: 1em 0;}header { border-bottom: 0.3em dashed #722CA2;
background: #f1cc37;
color: #5A4B0B;
padding: 1em 0;}h1 { margin: 0}footer > *,header > *,main > * { margin: 0 auto; max-width: 80rem; padding: 0 1rem;}.month { display: inline-block; vertical-align: top; margin-right: 2em; border-spacing: 0;}.month tbody { border-radius: 0.3em; color: #5A4B0B;
}.month tbody,.row > input,.row > select { box-shadow: .4em .5em 0 0 RGBA(114, 44, 162,0.5);}.month ::selection { background: inherit;}.month th, .month td { width: 3.5em; height: 3.5em; border: 1px solid #CBC19A;
border-width: 1px 0 0 1px; text-align: center; padding: 0; background: white; box-sizing: border-box;}.month th:first-of-type { border-top-left-radius: 0.3em;}.month th:last-of-type { border-top-right-radius: 0.3em;}.month tr > :last-of-type { border-right-width: 1px;}.month tr:last-of-type td:first-of-type { border-bottom-left-radius: 0.3em;}.month tr:last-of-type td:last-of-type { border-bottom-right-radius: 0.3em;}.month tr:last-of-type td { border-bottom-width: 1px;}
.month input[type=checkbox] { appearance: none; position: absolute}.month label { display: block; line-height: 3.5em;}.month :focus + label { border: 1px solid #722CA2;
margin: -1px;}:checked + label:not(.unselecting),.selecting { background: #f1cc37;
}.invalid { color: #CBC19A;
}@media only screen and (max-width: 55em) { .month { margin-right: 1.5vw; } .month th, .month td { width: 6vw; }}@media only screen and (max-width: 40em) { .month { margin: 0 auto; display: table; } .month th, .month td { width: 3.5em; }}.event { position: relative; top: -3.5em; right: -0.9em; line-height: initial; display: block;}.event::before { content: "★"; position: absolute; padding: 0.5em; top: -0.5em; right: 0.5em;}.event-content { visibility: hidden; position: absolute; background: white; top: 0.4em; left: 1.8em; padding: 0.4em; border: 1px solid #CBC19A;
border-radius: 0.2em; box-shadow: .2em .25em 0 0 RGBA(114, 44, 162,0.5); z-index: 1;}.month :focus + label .event-content,.month td:hover .event-content,.month td:active .event-content { visibility: initial;}
.row { display: block; margin: 1em 0;}.row > input,.row > select { padding: 0.5rem; margin-right: 1rem; width: 12rem; box-sizing: border-box; border: 1px solid #5A4B0B;
border-radius: .3em;}.row > input[type="number"] { margin-left: 8.5rem; width: 3.5rem;}.row > input[type="submit"] { background: #f1cc37;
}.row > input[type="submit"]:active { background: white;}.row :focus-visible { outline: 0.2em #722CA2 solid;
}
</style>
<header><h1>Soli-Bus-Fahrten von Berlin nach Lützerath</h1></header><main><form method=post><p>Der <a href="https://www.soli-bus.org/">Soli-Bus</a> fährt mit uns nach Lützerath, wenn genug Leute es wollen. Wir brauchen eure Hilfe, um einschätzen zu können, wann es sich lohnt, eine Busfahrt zu organisieren.Deine Angaben sind nicht verbindlich! Sie helfen uns nur, zu planen, und euch (falls ihr das wollt) zu kontaktieren.</p><p>Zur groben Einordnung: Eine Fahrt dauert rund 9 Stunden und kostet pro Person mindestens 20€ (an Betriebskosten). Der Bus fährt üblicherweise einige Tage später auch zurück. Wir können euch ggf. in einigen Städten (Potsdam, Magdeburg, Braunschweig und Hannover) auf dem Weg einsammeln oder größere Gruppen sogar vorher aus Leipzig abholen.</p>
<h2>Termine</h2><p>Bitte markier alle Tage im Kalender, an denen du mit dem Soli-Bus nach Lützerath fahren könntest (also nur die Hinfahrt). </p><div id=months><?php
$start = (new DateTimeImmutable())->setTimestamp(mktime(0, 0, 0, $START_DATE[1], $START_DATE[2], $START_DATE[0]));print_month($start);$month_end = (new DateTimeImmutable())->setTimestamp(strtotime("first day of next month", $start->getTimestamp()));print_month($month_end);$month_end = (new DateTimeImmutable())->setTimestamp(strtotime("first day of next month", $month_end->getTimestamp()));print_month($month_end);
?>
</div><script>(function() { "use strict"
const months = document.getElementById('months') let selecting = null // { origin, className, range }
let is_select = false
months.addEventListener("pointerdown", event => { selecting = null is_select = false for (const elem of document.querySelectorAll(".selecting, .unselecting")) { elem.className = "" }
if (event.buttons !== 1) return let target = event.target if (target.nodeType == 3) target = target.parentNode if (target.tagName !== "LABEL") return
event.preventDefault()
const className = target.className = document.getElementById(target.htmlFor).checked ? "unselecting" : "selecting" selecting = { origin: target, className, range: [ target ] } })
months.addEventListener('pointermove', event => { if (selecting === null) return event.preventDefault() is_select = true
const range = document.createRange() range.selectNode(selecting.origin) if (range.comparePoint(event.target, 0) > 0) range.setEndAfter(event.target) else range.setStartBefore(event.target)
const treeWalker = document.createTreeWalker( range.commonAncestorContainer, NodeFilter.SHOW_ELEMENT, { acceptNode: (node) => node.nodeName.toLowerCase() === 'label' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP } )
const new_range = [] let currentNode while (currentNode = treeWalker.nextNode()) { if (range.intersectsNode(currentNode)) { new_range.push(currentNode) const idx = selecting.range.indexOf(currentNode) if (idx !== -1) selecting.range.splice(idx, 1) else currentNode.className = selecting.className } } for (const elem of selecting.range) { elem.className = "" } selecting.range = new_range })
document.addEventListener('pointercancel', event => { if (selecting === null) return for (const elem of selecting.range) { elem.className = "" } selecting = null is_select = false })
document.addEventListener('pointerup', event => { if (selecting === null) return event.preventDefault() for (const elem of selecting.range) { if (is_select) document.getElementById(elem.htmlFor).checked = selecting.className == "selecting" elem.className = "" } selecting = null }) months.addEventListener('click', event => { if (is_select) { event.preventDefault() is_select = false } })})()</script><h3>Tag X</h3><label><input type=checkbox name=tagx>Ich möchte im Fall eines Räumungsversuchs mit dem Solibus nach Lützerath fahren.</label><h2>Kontaktmöglichkeiten</h2><p>Alle Angaben sind freiwillig. Sie werden nur gespeichert, um euch zu kontaktieren, falls ein Bus im von euch gewählten Zeitraum fährt.</p><label class=row><input name=name placeholder=Feldmaus>Dein Name (gerne ein Waldname oder anderes Pseudonym)</label><label class=row><input name=email type=email placeholder=feldmaus@posteo.de>Deine E-Mail-Adresse</label><h2>Allgemeines</h2><label class=row><input name=count type=number value=1>Wie viele seid ihr?</label><label class=row><select name=city><option>Berlin</option><option>Potsdam</option><option>Magdeburg<option>Braunschweig<option>Hannover<option>Leipzig</select>Deine Stadt</label><p class=row><input type=submit value=Abschicken></form></main><footer><p>Ein Angebot der Berlin-Lützerath-Vernetzung, erreichbar über luetzi-vernetzung-bb [at] systemli.org.</p></footer>
|
