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.

322 lines
8.6 KiB

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