You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

323 lines
8.6 KiB

2 years ago
2 years ago
2 years ago
  1. <?php
  2. locale_set_default('de_DE');
  3. $config = require_once './config.php';
  4. $START_DATE = $config['start_date'];
  5. $EVENTS = $config['events'];
  6. if ($_SERVER['REQUEST_METHOD'] == "POST") {
  7. $n = 0;
  8. do {
  9. $file_name = $config['data_dir'] . "/" . time();
  10. $file = fopen($file_name, "x");
  11. } while ($file === false && ++$n < 5);
  12. if (!$file || !fwrite($file, var_export($_POST, true))) {
  13. echo "Leider konnte deine Anmeldung nicht gespeichert werden. Bitte melde dich bei luetzi-vernetzung-bb@systemli.org damit wir den Fehler beheben können!";
  14. exit;
  15. }
  16. echo "Danke für deine Anmeldung.";
  17. if ($_POST['email']) {
  18. echo " Wir schreiben dir eine E-Mail falls der Solibus in einem von dir gewählten Zeitraum fährt.";
  19. }
  20. exit;
  21. }
  22. $ONE_DAY = new DateInterval("P1D");
  23. function get_days_of_week() {
  24. global $ONE_DAY;
  25. $res = [];
  26. $date = (new DateTime())->setTimestamp(strtotime("this week"));
  27. for ($n = 0; $n < 7; ++$n) {
  28. $res[] = IntlDateFormatter::formatObject($date, "ccc");
  29. $date->add($ONE_DAY);
  30. }
  31. return $res;
  32. }
  33. $DAYS_OF_WEEK = get_days_of_week();
  34. function print_month($start) {
  35. global $DAYS_OF_WEEK, $ONE_DAY, $EVENTS;
  36. $month_start = (new DateTimeImmutable())->setTimestamp(strtotime("first day of this month", $start->getTimestamp()));
  37. $week_start = (new DateTimeImmutable())->setTimestamp(strtotime("this week", $month_start->getTimestamp()));
  38. $month_end = (new DateTimeImmutable())->setTimestamp(strtotime("+1 month", $month_start->getTimestamp()));
  39. $month_name = IntlDateFormatter::formatObject($month_start, "MMMM yyyy");
  40. ?><table class=month>
  41. <caption><h3><?= $month_name ?></caption>
  42. <tr><?php foreach ($DAYS_OF_WEEK as $day) { echo "<th>$day</th>"; }?></tr>
  43. <?php
  44. $date = DateTime::createFromImmutable($week_start);
  45. while ($date->diff($month_end)->invert == 0) {
  46. echo "<tr>";
  47. for ($n = 0; $n < 7; ++$n) {
  48. $invalid = $start->diff($date)->invert == 1 || $month_end->diff($date)->invert == 0;
  49. echo "<td" . ($invalid ? " class=invalid" : "") . ">";
  50. $label = IntlDateFormatter::formatObject($date, "dd");
  51. if ($invalid) {
  52. echo $label;
  53. } else {
  54. $id = IntlDateFormatter::formatObject($date, "yyyy-MM-dd");
  55. echo "<input type=checkbox name=\"date_$id\" id=\"date_$id\"><label for=\"date_$id\">$label";
  56. if (isset($EVENTS[$id])) {
  57. echo "<div class=event><div class=event-content>".htmlspecialchars($EVENTS[$id])."</div></div>";
  58. }
  59. echo "</label>";
  60. }
  61. echo "</td>";
  62. $date->add($ONE_DAY);
  63. }
  64. }
  65. ?>
  66. </table><?php
  67. }
  68. ?><!DOCTYPE html>
  69. <meta name="viewport" content="width=device-width, initial-scale=1">
  70. <style>
  71. body {
  72. margin: 0
  73. }
  74. footer {
  75. border-top: 0.3em dashed #722CA2;
  76. padding: 1em 1em 0 1em;
  77. background: #f1cc37;
  78. color: #5A4B0B;
  79. padding: 1em 0;
  80. }
  81. main {
  82. background: #FFE98E;
  83. padding: 1em 0;
  84. }
  85. header {
  86. border-bottom: 0.3em dashed #722CA2;
  87. background: #f1cc37;
  88. color: #5A4B0B;
  89. padding: 1em 0;
  90. }
  91. h1 {
  92. margin: 0
  93. }
  94. footer > *,
  95. header > *,
  96. main > * {
  97. margin: 0 auto;
  98. max-width: 80rem;
  99. padding: 0 1rem;
  100. }
  101. .month {
  102. display: inline-block;
  103. vertical-align: top;
  104. margin-right: 2em;
  105. border-spacing: 0;
  106. }
  107. .month tbody {
  108. border-radius: 0.3em;
  109. color: #5A4B0B;
  110. }
  111. .month tbody,
  112. .row > input,
  113. .row > select {
  114. box-shadow: .4em .5em 0 0 RGBA(114, 44, 162,0.5);
  115. }
  116. .month ::selection {
  117. background: inherit;
  118. }
  119. .month th, .month td {
  120. width: 3.5em;
  121. height: 3.5em;
  122. border: 1px solid #CBC19A;
  123. border-width: 1px 0 0 1px;
  124. text-align: center;
  125. padding: 0;
  126. background: white;
  127. box-sizing: border-box;
  128. }
  129. .month th:first-of-type {
  130. border-top-left-radius: 0.3em;
  131. }
  132. .month th:last-of-type {
  133. border-top-right-radius: 0.3em;
  134. }
  135. .month tr > :last-of-type {
  136. border-right-width: 1px;
  137. }
  138. .month tr:last-of-type td:first-of-type {
  139. border-bottom-left-radius: 0.3em;
  140. }
  141. .month tr:last-of-type td:last-of-type {
  142. border-bottom-right-radius: 0.3em;
  143. }
  144. .month tr:last-of-type td {
  145. border-bottom-width: 1px;
  146. }
  147. .month input[type=checkbox] {
  148. appearance: none;
  149. position: absolute
  150. }
  151. .month label {
  152. display: block;
  153. line-height: 3.5em;
  154. }
  155. .month :focus + label {
  156. border: 1px solid #722CA2;
  157. margin: -1px;
  158. }
  159. :checked + label {
  160. background: #f1cc37;
  161. }
  162. .invalid {
  163. color: #CBC19A;
  164. }
  165. @media only screen and (max-width: 55em) {
  166. .month {
  167. margin-right: 1.5vw;
  168. }
  169. .month th, .month td {
  170. width: 6vw;
  171. }
  172. }
  173. @media only screen and (max-width: 40em) {
  174. .month {
  175. margin: 0 auto;
  176. display: table;
  177. }
  178. .month th, .month td {
  179. width: 3.5em;
  180. }
  181. }
  182. .event {
  183. position: relative;
  184. top: -3.5em;
  185. right: -0.9em;
  186. line-height: initial;
  187. }
  188. .event::before {
  189. content: "";
  190. position: absolute;
  191. padding: 0.5em;
  192. top: -0.5em;
  193. right: 0.5em;
  194. }
  195. .event-content {
  196. visibility: hidden;
  197. position: absolute;
  198. background: white;
  199. top: 0.4em;
  200. left: 1.8em;
  201. padding: 0.4em;
  202. border: 1px solid #CBC19A;
  203. border-radius: 0.2em;
  204. box-shadow: .2em .25em 0 0 RGBA(114, 44, 162,0.5);
  205. z-index: 1;
  206. }
  207. .month :focus + label .event-content,
  208. .month td:hover .event-content,
  209. .month td:active .event-content {
  210. visibility: initial;
  211. }
  212. .row {
  213. display: block;
  214. margin: 1em 0;
  215. }
  216. .row > input,
  217. .row > select {
  218. padding: 0.5rem;
  219. margin-right: 1rem;
  220. width: 12rem;
  221. box-sizing: border-box;
  222. border: 1px solid #5A4B0B;
  223. border-radius: .3em;
  224. }
  225. .row > input[type="number"] {
  226. margin-left: 8.5rem;
  227. width: 3.5rem;
  228. }
  229. .row > input[type="submit"] {
  230. background: #f1cc37;
  231. }
  232. .row > input[type="submit"]:active {
  233. background: white;
  234. }
  235. .row :focus-visible {
  236. outline: 0.2em #722CA2 solid;
  237. }
  238. </style>
  239. <script>
  240. let checking = null
  241. addEventListener("selectstart", (event) => {
  242. let target = event.target
  243. if (target.nodeType == 3) target = target.parentNode
  244. if (target.tagName == "LABEL") {
  245. const checkbox = document.getElementById(target.htmlFor)
  246. checking = !checkbox.checked
  247. checkbox.checked = checking
  248. } else checking = null
  249. });
  250. document.addEventListener('selectionchange', () => {
  251. if (checking !== null) {
  252. const range = document.getSelection().getRangeAt(0)
  253. const treeWalker = document.createTreeWalker(
  254. range.commonAncestorContainer,
  255. NodeFilter.SHOW_ELEMENT,
  256. { acceptNode: (node) => node.nodeName.toLowerCase() === 'input' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP }
  257. )
  258. while (currentNode = treeWalker.nextNode()) {
  259. if (range.intersectsNode(currentNode)) currentNode.checked = checking;
  260. }
  261. }
  262. });
  263. document.addEventListener('pointerup', () => {
  264. if (checking !== null) {
  265. checking = null
  266. document.getSelection().empty()
  267. }
  268. })
  269. </script>
  270. <header>
  271. <h1>Soli-Bus-Fahrten von Berlin nach Lützerath</h1>
  272. </header>
  273. <main>
  274. <form method=post>
  275. <p>
  276. 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.
  277. </p>
  278. <p>
  279. Zur groben Einordnung: Eine Fahrt dauert rund 9 Stunden und kostet pro Person 20 (an Betriebskosten). Der Bus fährt üblicherweise einige Tage später auch zurück. Wir können euch ggf. in einigen Städten auf dem Weg einsammeln oder sogar vorher aus Leipzig abholen.
  280. </p>
  281. <h2>Termine</h2>
  282. <p>Bitte markier alle Tage im Kalender, an denen du mit dem Soli-Bus nach Lützerath fahren oder dort sein wollen würdest. </p>
  283. <?php
  284. $start = (new DateTimeImmutable())->setTimestamp(mktime(0, 0, 0, $START_DATE[1], $START_DATE[2], $START_DATE[0]));
  285. print_month($start);
  286. $month_end = (new DateTimeImmutable())->setTimestamp(strtotime("first day of next month", $start->getTimestamp()));
  287. print_month($month_end);
  288. $month_end = (new DateTimeImmutable())->setTimestamp(strtotime("first day of next month", $month_end->getTimestamp()));
  289. print_month($month_end);
  290. ?>
  291. <h3>Tag X</h3>
  292. <label><input type=checkbox name=tagx>Ich möchte im Fall eines Räumungsversuchs mit dem Solibus nach Lützerath fahren.</label>
  293. <h2>Kontaktmöglichkeiten</h2>
  294. <p>
  295. Alle Angaben sind freiwillig. Sie werden nur gespeichert, um euch zu kontaktieren, falls ein Bus im von euch gewählten Zeitraum fährt.
  296. </p>
  297. <label class=row><input name=name placeholder=Feldmaus>Dein Name (gerne ein Waldname oder anderes Pseudonym)</label>
  298. <label class=row><input name=email type=email placeholder=feldmaus@posteo.de>Deine E-Mail-Adresse</label>
  299. <h2>Allgemeines</h2>
  300. <label class=row><input name=count type=number value=1>Wie viele seid ihr?</label>
  301. <label class=row><select name=city><option>Berlin</option><option>Potsdam</option><option>Magdeburg<option>Braunschweig<option>Hannover<option>Leipzig</select>Deine Stadt</label>
  302. <p class=row><input type=submit value=Abschicken>
  303. </form>
  304. </main>
  305. <footer>
  306. <p>
  307. Ein Angebot der Berlin-Lützerath-Vernetzung, erreichbar über luetzi-vernetzung-bb [at] systemli.org.
  308. </p>
  309. </footer>