Merge branch 'stage' into hardware-request-form-field

.drone.yml

@@ -28,7 +28,7 @@ steps:
     - SITE=coderdojo
     tags: coderdojo-${DRONE_BRANCH}
 
-- name: deploy angestoepselt staging
+- name: deploy angestoepselt stage
   image: plugins/webhook
   settings:
     urls:
@@ -37,7 +37,7 @@ steps:
     - build angestoepselt site
   when:
     branch:
-    - captcha
+    - stage
 
 - name: deploy live build
   image: plugins/webhook
@@ -75,4 +75,6 @@ steps:
 trigger:
   branch:
   - main
-  - captcha
+  - stage
+  event:
+  - push

README.md

@@ -37,7 +37,7 @@ npm run build:styles
 SITE=angestoepselt npm run dev:site
 ```
 
-Go to <https://localhost:8080/>, which will update live when content changes
+Go to <http://localhost:8080/>, which will update live when content changes
 (the initial build may take some time to render out the different image sizes).
 If you make style changes, make sure to recompile the CSS files with the second
 of the above commands. Alternatively, run `npm run dev:styles` in an additional

cgi-bin/form.py

@@ -61,18 +61,24 @@ match os.environ.get("REQUEST_METHOD", "").upper():
 	case "GET":
 		# For GET requests, serve the form that the user requested. The CSRF
 		# token will be added here as well.
-		print("Status: 200")
+
-		print("Content-Type: text/html")
+		form_disabled = request_uri.startswith("/computer-beantragen/privat")
+
+		print(f"Status: {200 if not form_disabled else 503}")
+		print(f"Content-Type: text/html")
 		print(f"Set-Cookie: __Host-csrftoken={signed_csrf_token}; path=/; Secure; SameSite=Strict; HttpOnly")
 		print("")
 
 		with open(f"{SITE_DIRECTORY}/{request_uri.strip('/')}/index.html", "r") as template:
 			for line in template.readlines():
-				# This is a very rudimentary check to ensure that we actually
+				if (
-				# place the token *inside* the form. It assumes that there is
+					not form_disabled
-				# a) only one form on the site and
+					# This is a very rudimentary check to ensure that we
-				# b) the <form> tag doesn't end on the same line.
+					# actually place the token *inside* the form. It requires
-				if re.match(r"<!--\s*form\s*-->", line, re.IGNORECASE) is not None:
+					# adding a <!-- FORM --> comment somewhere in the form that
+					# will be replaced with the hidden fields and hCaptcha.
+					and re.match(r"<!--\s*form\s*-->", line, re.IGNORECASE) is not None
+				):
 					print(f'<input type="hidden" name="csrftoken" value="{csrf_token}" />')
 
 					print(f'<label class="form-input">')
@@ -147,12 +153,8 @@ if not hmac.compare_digest(csrf_token, given_csrf_token):
 
 
 # If the honeypot field was not empty, back off.
-if (
+if get_form_value(HONEYPOT_FIELD_NAME, ""):
-	get_form_value(HONEYPOT_FIELD_NAME, "")
+	fail("200 OK", f"Invalid value for field: {HONEYPOT_FIELD_NAME}")
-	or get_form_value(CAPTCHA_FIELD_NAME,
-					  "").lower().strip() != CAPTCHA_FIELD_VALUE
-):
-	fail("200 OK", f"Invalid value for field: {CAPTCHA_FIELD_NAME}")
 
 if not (hcaptcha_token := get_form_value("h-captcha-response", "")):
 	fail("200 OK", "Empty hCaptcha token")
@@ -168,7 +170,7 @@ if not isinstance(hcaptcha_data, Mapping) or not hcaptcha_data.get("success", Fa
 # form (see the match block below).
 contact_name = get_form_value("contactname")
 contact_email = get_form_value("contactemail")
-message = get_form_value("message")
+message = get_form_value("message", "[Keine Nachricht hinterlassen]")
 attachment: Optional[tuple[str, bytes]] = None
 
 ticket_details = collections.OrderedDict()
@@ -202,6 +204,7 @@ match request_uri:
 		ticket_details["Anzahl Drucker"] = get_form_value("printercount", 0, int)
 
 	case "/computer-beantragen/privat":
+		fail("503 Service Unavailable", "Form disabled")
 		form_name = "Computerantrag (privat)"
 		form_group = "csw-Anfragen"
 		ticket_details["Gewünschte Hardware"] = get_form_value("hardware", default="Unbekannt")
@@ -224,6 +227,16 @@ match request_uri:
 		form_group = "csw-Hardwarespenden"
 		ticket_details["Gerätedetails"] = get_form_value("device")
 
+	# This is only available on the CoderDojo site and will be blocked on the
+	# server side in other cases.
+	case "/anmelden":
+		form_name = "CoderDojo-Anmeldung"
+		form_group = "CoderDojo"
+		ticket_details["Anmelde-Typ"] = get_form_value("mode")
+		ticket_details["Teilnehmenden-Name"] = get_form_value("participantname", "-")
+		ticket_details["Telefonnummer"] = get_form_value("contactphone", "-")
+		ticket_details["Fotos?"] = get_form_value("photos")
+
 	case _:
 		# This case should never actually happen because lighttpd filters out
 		# requests accordingly.

sites/angestoepselt/computer-beantragen/index.md

@@ -4,7 +4,7 @@ useForms: true
 eleventyNavigation:
   key: Computer beantragen
   order: 50
-callout: "Hinweis: Wir bekommen gerade sehr viele Anfragen und können daher keine neuen Laptops ausgeben! Desktop-PCs sind weiterhin verfügbar."
+callout: "Hinweis: Wir sind zurzeit ausgelastet und können leider temporär keine neuen Anfragen annehmen."
 ---
 
 # Computer beantragen
@@ -37,7 +37,7 @@ in drei Schritten ab:
 Alle Personen, die einen der folgenden Nachweise vorlegen können:
 
 - eine Arbeitslosengeldbescheinigung (ALG I)
-- Bescheinigung über ALG II (Hartz IV)
+- Bescheinigung über Bürgergeld (früher ALG II / Hartz IV)
 - ein Bewilligungsbescheid (für Geflüchtete)
 - Bescheinigungen vom Sozialamt, von der Schuldnerberatung oder vom Jobcenter
 - Bescheinigung eines anerkannten Trägers (z. B. Caritas, Diakonie, Jugendhilfeeinrichtungen)

sites/angestoepselt/computer-beantragen/privat.md

@@ -1,12 +1,18 @@
 ---
 layout: layouts/page.njk
 useForms: true
-callout: "Hinweis: Wir bekommen gerade sehr viele Anfragen und können daher keine neuen Laptops ausgeben! Desktop-PCs sind weiterhin verfügbar."
+callout: "Hinweis: Wir sind zurzeit ausgelastet und können leider temporär keine neuen Anfragen annehmen."
 ---
 
 # Privat einen Computer beantragen
 
-<form method="post" action="/computer-beantragen/privat" enctype="multipart/form-data">
+> Wir bekommen gerade zu viele Anfragen, um neue entgegenzunehmen.
+> Bitte schaue in ein paar Wochen wieder auf unserer Homepage vorbei.
+> 
+> Danke für dein Verständnis!
+
+<form class="blanked-out-form" method="post" action="/computer-beantragen/privat" enctype="multipart/form-data">
+<fieldset disabled="disabled">
 
 Auf dieser Seite kannst du einen Antrag einreichen, um einen Computer von uns zu
 erhalten. Bitte teile uns zunächst deine Kontaktdaten mit.
@@ -109,4 +115,5 @@ installiert. Es gibt ein Programm zum Schreiben
   <input type="submit" value="Abschicken" />
 </div>
 
+</fieldset>
 </form>

sites/angestoepselt/datenschutzhinweis.md

@@ -61,7 +61,7 @@ werden von der Sparkasse Mainfranken automatisch erfasst und sind anschließend
 
 ### 2.3 Die Nutzung unserer Kontaktadresse
 
-Bei Fragen jeglicher Art bieten wir Ihnen die Möglichkeit, mit uns über die E-Mail-Adresse »info@angestoepselt.de« Kontakt aufzunehmen. Dabei ist die Angabe einer gültigen E-Mail-Adresse erforderlich, damit wir wissen, von wem die Anfrage stammt und um diese zu beantworten zu können. Weitere Angaben können freiwillig getätigt werden.
+Bei Fragen jeglicher Art bieten wir Ihnen die Möglichkeit, mit uns über die E-Mail-Adresse [info@angestoepselt.de](mailto:info@angestoepselt.de) Kontakt aufzunehmen. Dabei ist die Angabe einer gültigen E-Mail-Adresse erforderlich, damit wir wissen, von wem die Anfrage stammt und um diese zu beantworten zu können. Weitere Angaben können freiwillig getätigt werden.
 
 Die Datenverarbeitung zum Zwecke der Kontaktaufnahme mit uns erfolgt nach Art.6 Abs.1 S.1 lit.a DSGVO auf Grundlage Ihrer freiwillig erteilten Einwilligung.
 

sites/angestoepselt/hardware-spenden/index.md

@@ -44,6 +44,12 @@ _Für Fachleute_: das Gerät sollte mindestens folgenden Spezifikationen erfüll
 - Festplatte: mindestens SATA 250 GB
 - Grafikprozessor (sofern vorhanden): ab PCI-E
 
+</dd>
+<dt>Festplatten</dt>
+<dd>
+
+Wir nehmen SSD-Festplatten in allen Größen an. HDD-Festplatten nehmen wir ab einer Größe von 1 Terabyte an. Alle gespendeten Festplatten werden von uns gelöscht, siehe Informationen weiter unten. 
+
 </dd>
 <dt>Bildschirme</dt>
 <dd>

sites/angestoepselt/httpd.conf

@@ -11,7 +11,7 @@ server.document-root = "@site@"
 index-file.names = ( "index.html" )
 
 setenv.set-response-header += (
-	"Content-Security-Policy" => "default-src 'self'; script-src 'self' 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com; frame-src 'self' https://hcaptcha.com https://*.hcaptcha.com; style-src 'self' https://hcaptcha.com https://*.hcaptcha.com; connect-src 'self' https://hcaptcha.com https://*.hcaptcha.com; frame-ancestors 'none'",
+	"Content-Security-Policy" => "default-src 'self'; script-src 'self' 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com; frame-src 'self' https://hcaptcha.com https://*.hcaptcha.com; style-src 'self' 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com; connect-src 'self' https://hcaptcha.com https://*.hcaptcha.com; frame-ancestors 'none'",
 )
 
 url.redirect = (
@@ -39,7 +39,7 @@ $HTTP["request-method"] =~ "GET|POST" {
 		"^/spenden" => "/cgi-bin/form.py",
 		"^/mitmachen" => "/cgi-bin/form.py",
 		"^/computer-beantragen/organisation" => "/cgi-bin/form.py",
-		"^/computer-beantragen/privat" => "/cgi-bin/form.py",
+		#"^/computer-beantragen/privat" => "/cgi-bin/form.py",
 		"^/hardware-spenden/organisation" => "/cgi-bin/form.py",
 		# Note the actual POST endpoint is /hardware-spenden/privat/laptop, but the
 		# form is served from /hardware-spenden/privat.

sites/angestoepselt/index.md

@@ -24,7 +24,7 @@ Wir schaffen Zugang in die digitale Welt
   <a href="/computer-beantragen">
     <div>
       <h3>Computer bekommen</h3>
-      <em class="inline-callout">Aktuell keine Laptops | Desktop-PCs verfügbar</em>
+      <em class="inline-callout">Aktuell nicht verfügbar</em>
     </div>
     <svg class="action-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219 175">
       <linearGradient id="emphasis-gradient-sun" class="emphasis-gradient">

sites/angestoepselt/kontakt/index.md

@@ -18,7 +18,7 @@ Schön, dass du dich für unsere Arbeit interessierst! Bitte wähle unten eine
 Kategorie aus, um direkt zum entsprechenden Kontaktformular zu gelangen. So
 können wir deine Anfrage besser zuordnen. Du erreichst uns natürlich auch
 postalisch oder per E-Mail bei den unten angegebenen Adressen – oder ganz
-klassisch in Person bei uns [im Verein](#so-kommst-du-zu-uns) (bitte beachte aber die aktuell gültigen Corona-Auflagen).
+klassisch in Person bei uns [im Verein](#so-kommst-du-zu-uns).
 
 - [Ich möchte einen (oder mehrere) _Computer beantragen_](/computer-beantragen)
 - [Ich möchte _Hardware spenden_](/hardware-spenden)
@@ -62,7 +62,7 @@ Fragen haben, freuen wir uns natürlich trotzdem hier auf deine Nachricht.
 
 ## So kommst du zu uns
 
-Du findest uns in der _Zeller Straße 29/31 in 97082 Würzburg_. Wenn du einen Computer willst, stelle bitte zuerst einen [Antrag](/computer-beantragen/privat). Sobald wir einen Computer für dich haben, schreiben wir dir eine E-Mail. Dann kannst du zur Abholung vorbeikommen.
+Du findest uns in der _Zeller Straße 29/31 in 97082 Würzburg_ ([Kartenansicht](https://www.openstreetmap.org/node/6620016025)). Wenn du einen Computer willst, stelle bitte zuerst einen [Antrag](/computer-beantragen/privat). Sobald wir einen Computer für dich haben, schreiben wir dir eine E-Mail. Dann kannst du zur Abholung vorbeikommen.
 
 ### Zu Fuß oder mit den öffentlichen Verkehrsmitteln
 

sites/angestoepselt/mitmachen/beitreten.md

@@ -1,11 +1,22 @@
 ---
 layout: layouts/page.njk
 useForms: true
+callout: "Diese Seite befindet sich im Aufbau; das Formular ist noch nicht funktionstüchtig."
 ---
 
-# Vereinsmitglied werden
+<style>
+#mode-o:not(:checked) ~ #mode-f:not(:checked) ~ [data-payment],
+#mode-o:not(:checked) ~ #mode-f:not(:checked) ~ * [data-payment] {
+  display: none;
+}
 
-_Hinweis: diese Seite befindet sich im Aufbau; das Formular ist noch nicht funktionstüchtig._
+#mode-f:not(:checked) ~ [data-payment=custom],
+#mode-f:not(:checked) ~ * [data-payment=custom] {
+  display: none;
+}
+</style>
+
+# Vereinsmitglied werden
 
 Schön, dich bei uns begrüßen zu dürfen!
 Du kannst direkt hier einen Mitgliedsantrag stellen.
@@ -75,6 +86,35 @@ Wie möchtest du dem Verein beitreten?
 	<label for="mode-f">Ich möchte als Fördermitglied beitreten.</label>
 </div>
 
+Bitte
+<span role="none" data-payment="custom">wähle einen jährlichen Beitrag für deine Fördermitgliedschaft und</span>
+fülle das [Lastschriftmandat](/assets/Lastschriftmandat.pdf) aus (entweder ausgedruckt oder digital unterschrieben):
+{data-payment}
+
+<label class="form-input" data-payment="custom">
+  <span>Jährlicher Förderbeitrag:</span>
+  <input type="number" name="supportamount" min="60" placeholder="&gt; 60€" />
+</label>
+<label class="form-input" data-payment>
+  <span>SEPA-Lastschriftmandat:</span>
+  <input type="file" name="document" />
+</label>
+
+Noch kurz ein paar Hinweise zum Datenschutz:
+
+- Wir sammeln und speichern personenbezogene Daten von dir und anderen Mitgliedern, um das Vereinsleben aufrechtzuerhalten. Dabei geht es hauptsächlich um das, was du uns in diesem Formular mitgeteilt hast, aber auch z.B. um Daten zum Einloggen in unsere Netzwerksysteme.
+- Wir verkaufen diese Daten nicht.
+- Der Verein veröffentlicht hin und wieder in Zeitungen, Online-Portalen (z.B. Mastodon) oder anderen Medien Bilder und / oder Namen von Mitgliederinnen oder Mitgliedern. Dabei geht es stets um Vereinsangelegenheiten (wie in unserer [Satzung](/ueber-uns/satzung) beschrieben). Durch deine Mitgliedschaft stimmst du dem zu.
+- Im Rahmen geltender Gesetze hast du jederzeit das Recht darauf, deine von uns gespeicherten Daten anzusehen, zu berichtigen oder löschen zu lassen.
+
+Die komplette Datenschutzerklärung für Mitglieder findest du [hier](/assets/Datenschutzerklärung_Mitgliedschaft.pdf).
+
+<label class="form-checkbox">
+  <input type="checkbox" name="hints" required>
+  <div></div>
+  <span>Ich habe die obigen Hinweise gelesen und bin mit der beschriebenen Speicherung und Verarbeitung meiner Daten einverstanden.</span>
+</label>
+
 Das war's!
 Wir werden uns, nachdem du den Antrag abgeschickt hast, bei dir melden.
 

sites/angestoepselt/mitmachen/index.md

@@ -69,7 +69,7 @@ Gruppeneinladung.
 
 Wenn du schon so begeistert bist, kannst du auch gerne direkt hier ein Mitglied im Verein werden:
 
-- [Zum _Mitgliedsantrag_](/assets/Antrag_Mitgliedschaft.pdf)
+- [Zum _Mitgliedsantrag_](/mitmachen/beitreten)
 
 {.form-choices}
 

sites/angestoepselt/neuigkeiten/2021-10-20-neue-homepage.md

@@ -8,18 +8,17 @@ layout: post
 ---
 
 Lange hat's gedauert – jetzt endlich freuen wir uns, unser neues
-Vereins-"Branding" präsentieren zu können. Das zu gehört:
+Vereins-"Branding" präsentieren zu können. Dazu zu gehört:
 
 - Ein eigens entworfenes Logo samt Schriftzug
 - Diese neue Homepage
 - Diverse Flyer
 - Marketing-Kram wie Tassen
 
-Zum einen möchten mir damit unserem Verein ein neues, modernes Auftreten
+Zum einen möchten wir damit unserem Verein ein neues, modernes Auftreten 
-verpassen. Im Hintergrund sind auch ein paar technische Veränderungen passiert,
+verpassen. Des Weiteren sind im Hintergrund auch ein paar technische 
-die letztendlich darauf hinauslaufen, dass wir in Zukunft Anfragen besser
+Veränderungen erfolgt. Dadurch können wir in Zukunft Anfragen besser sammeln, 
-sammeln, strukturieren und abarbeiten können. Gleichzeitig wollen wir es allen
+strukturieren und abarbeiten. Gleichzeitig versuchen wir es allen BesucherInnen 
-BesucherInnen möglichst einfach machen, mit uns in Kontakt zu treten. Das baut
+der Homepage möglichst einfach zu machen, mit uns in Kontakt zu treten. Weniger 
-Hürden ab und dient letztendlich auch dazu, mehr Menschen mit unseren Projekten
+Hürden tragen letztendlich auch dazu bei, unsere Projekte an mehr Menschen zu 
-zu versorgen. Wir sind überzeugt davon, dass das eine gute Sache ist und freuen
+bringen. Dass das eine gute Sache ist, davon sind wir überzeugt!
-uns auf Rückmeldungen!

sites/angestoepselt/neuigkeiten/2023-03-01-blattgruen.md

@@ -0,0 +1,16 @@
+---
+title: Das Magazin BlattGrün berichtet über uns in der aktuellen Ausgabe
+date: 2023-03-01
+source: BlattGrün
+blurb:
+  'Verein Angestöpselt bereitet alte Computer auf.'
+layout: post
+---
+
+Das Magazin [BlattGrün](https://blatt-atelier.de/){target="\_blank" rel="noopener noreferrer"} berichtet über unsere ehrenamtliche Arbeit in der aktuellen Ausgabe. 
+Den Beitrag könnt ihr unten nachlesen. 
+
+
+> [![BlattGrün Magazin 2023/2](/assets/magazine/2023_03_01_blattgruen.PNG)](https://blatt-atelier.de/wp-content/uploads/2023/03/Blattgruen-02-23-screen-1.pdf){target="\_blank" rel="noopener noreferrer"}
+
+Die komplette Ausgabe findet ihr [hier](https://blatt-atelier.de/wp-content/uploads/2023/03/Blattgruen-02-23-screen-1.pdf){target="\_blank" rel="noopener noreferrer"}

sites/angestoepselt/spenden.md

@@ -49,11 +49,6 @@ Angestöpselt e.V. ist vom Finanzamt Würzburg als mildtätiger Verein nach §&n
 - Beträge bis 300 Euro: Bitte beachte, dass bis zu einer Höhe von 300 Euro ein vereinfachter Nachweis (Kontoauszug) für das Finanzamt ausreichend ist. Auf Wunsch stellen wir dir natürlich trotzdem eine Spendenbescheinigung aus. Gib dafür bitte Name, Vorname und Adresse in der Betreffzeile deiner Überweisung an.
 - Beträge über 300 Euro: Wir schicken dir in jedem Fall eine Spendenbescheinigung zu. Solltest du keine Bescheinigung erhalten, nimm bitte mit uns [Kontakt](/kontakt/#andere-anliegen)
 
-## Amazon Smile
-
-Du kannst uns auch _ohne Mehrkosten_ über unseren [Amazon Smile](https://smile.amazon.de/ch/257-107-11154)-Link unterstützen.
-Dabei geht ein kleiner Prozentsatz deiner Bestellungen an uns, ohne dass es für dich mehr kostet.
-
 ## Fördermitgliedschaft
 
 Wir brauchen Monat für Monat Geld. Du möchtest Monat für Monat Gutes tun? Yeah, it's a match.

sites/angestoepselt/ueber-uns/index.md

@@ -26,14 +26,14 @@ Damit alle Menschen die gleichen Chancen haben, verschenken wir Computer.
 ### Was wir tun
 
 - Wir sammeln und reparieren Computer. Diese verschenken wir dann.
-- Wir helfen Menschen besser mit Computern und dem Internet umzugehen.
+- Wir helfen Menschen, besser mit Computern und dem Internet umzugehen.
 - Wir verwenden kostenlose und freie Computerprogramme.
 - Wir organisieren Kurse und Techniktreffen.
 - Wir erklären Menschen Technik.
 
 ## Andere Projekte
 
-Wir sind nicht der einzige Verein, der solche Projekte verfolgt. In ganz Deutschland sind Projekte mit verwanden Zielen vertreten:
+Wir sind nicht der einzige Verein, der solche Projekte verfolgt. In ganz Deutschland sind Projekte mit verwandten Zielen vertreten:
 
 [Unsere Partner](partner){.cta-link}
 
@@ -83,9 +83,9 @@ Angestöpselt e.V. gewinnt den Deutschen Engagementpreis. Arbeitssuchende, Flüc
 
 ### CoderDojo
 
-Mit dem [CoderDojo](/coderdojo) haben wir unser zweites großes Projekt im Verein
+Mit dem [CoderDojo](/#coderdojo) haben wir unser zweites großes Projekt im Verein
 aufgenommen. Seitdem haben wir etliche kostenlose Veranstaltungen zusammen mit
-Ehrenamtlichen angeboten. Dabei können Kinder und Jugendliche sich vielen
+Ehrenamtlichen angeboten. Dabei können sich Kinder und Jugendliche vielen
 Themen bequem und spielerisch nähern, zum Beispiel Programmieren,
 Kryptografie oder Videoproduktion.
 

sites/angestoepselt/ueber-uns/satzung.md

@@ -7,11 +7,9 @@ eleventyNavigation:
   order: 20
 ---
 
-# Satzung
+# Aktuelle Satzung von Angestöpselt
 
-## Aktuelle Satzung von angestöpselt e.V.
+Satzung des Vereins „Angestöpselt e. V. – Verein für Digitalkompetenz“
-
-Satzung des Vereins „angestöpselt e.V. – Verein für Digitalkompetenz“
 
 ## § 1 Name, Sitz, Vereinsjahr
 

sites/coderdojo/anmelden.md

@@ -4,6 +4,7 @@ useForms: true
 eleventyNavigation:
   key: Anmelden
   order: 20
+callout: "Diese Veranstaltung ist ausgebucht."
 ---
 
 <style>
@@ -26,20 +27,32 @@ Hier findest du schon mal die Details zur kommenden Veranstaltung:
 > **Gastgeberin**:&emsp;[iWelt GmbH + Co. KG.](https://www.iwelt.de/){target="_blank" rel="noopener noreferrer"}  
 > **Ort**:&emsp;[Mainparkring 4](https://www.openstreetmap.org/way/208973341){target="_blank" rel="noopener noreferrer"}, 97246 Eibelstadt  
 > **Start**:&emsp;9:00 Uhr (gerne ab 8:30 eintreffen)  
-> **Ende**:&emsp;gegen 15:00 Uhr
+> **Mittagspause**:&emsp;etwa 12:00 Uhr  
+> **Vorstellung der Projekte**:&emsp;15:30 Uhr (Erwachsene sind eingeladen!)  
+> **Ende**:&emsp;gegen 16:00 Uhr  
+> **Maximalkapazität**:&emsp;40 Teilnehmende
 
-<form method="post" action="/anmelden">
+Diese Veranstaltung ist leider schon ausgebucht.
+Abonniere unseren [Newsletter](https://mailing.angestoepselt.de/subscription/form), um über neue CoderDojos zu erfahren.
+
+<form class="blanked-out-form" method="post" action="/anmelden">
+<fieldset disabled="disabled">
+
+<input type="hidden" name="veranstaltung" value="11. März 2023" />
 
 Zunächst müssen wir ein paar Formalitäten klären.
 Wen möchtest du anmelden?
 
-<input type="radio" id="mode-self" class="radio-input" name="mode" required value="self" />
+<input type="radio" id="mode-self" class="radio-input" name="mode" required value="Selbstanmeldung" />
 <div class="form-input">
-	<label for="mode-self">Ich bin über 14 Jahre alt und möchte mich selbst anmelden.</label>
+	<label for="mode-self">Ich bin mindestens 14 Jahre alt und möchte mich selbst anmelden.</label>
 </div>
-<input type="radio" id="mode-child" class="radio-input" name="mode" required value="child" />
+<input type="radio" id="mode-child" class="radio-input" name="mode" required value="Stellvertretend" />
 <div class="form-input">
-	<label for="mode-child">Ich bin Erziehungsberechtigte&ThinSpace;/&ThinSpace;-r und möchte mein Kind anmelden.</label>
+	<label for="mode-child">
+		Ich bin Erziehungsberechtigte&ThinSpace;/&ThinSpace;-r und möchte mein Kind anmelden.
+		Ich bleibe während der Veranstaltung anwesend.
+	</label>
 </div>
 
 Bitte verrate uns deinen Namen<span data-mode="child"> und den deines Kindes</span>:
@@ -51,7 +64,7 @@ Bitte verrate uns deinen Namen<span data-mode="child"> und den deines Kindes</sp
 
 <label class="form-input" data-mode="child">
   <span>Name des Kindes:</span>
-  <input type="text" name="participantname" required />
+  <input type="text" name="participantname" />
 </label>
 
 Optional kannst du uns jetzt noch eine Telefonnummer für Notfälle hinterlassen.
@@ -70,14 +83,14 @@ Bitte gebe außerdem eine E-Mail-Adresse an, an die wir Informationen zur Verans
 Während der Veranstaltungen werden möglicherweise Fotos gemacht und von uns online auf unserer [Homepage](/rueckblick){target="_blank"} (aber nicht in sozialen Netzwerken) zur Verfügung gestellt.
 Bist du damit einverstanden?
 
-<input type="radio" id="photos-yes" class="radio-input" name="photos" required value="yes" />
+<input type="radio" id="photos-yes" class="radio-input" name="photos" required value="Ja" />
 <div class="form-input">
 	<label for="photos-yes">
 		Ja<span data-mode="self">, es dürfen Fotos von mir gemacht werden</span><span data-mode="child">, mein Kind darf fotografiert werden</span>.
 		Die Fotos werden möglicherweise online in einer Galerie gezeigt.
 	</label>
 </div>
-<input type="radio" id="photos-no" class="radio-input" name="photos" required value="no" />
+<input type="radio" id="photos-no" class="radio-input" name="photos" required value="Nein" />
 <div class="form-input">
 	<label for="photos-no">
 		Nein<span data-mode="self">, ich möchte nicht fotografiert werden</span><span data-mode="child">, mein Kind soll bei den Fotos ausgelassen werden</span>.
@@ -97,4 +110,5 @@ Solltest du noch Fragen haben oder uns anderweitig etwas mitteilen wollen, kanns
   <input type="submit" value="Anmeldung abschicken" />
 </div>
 
+</fieldset>
 </form>

sites/coderdojo/httpd.conf

@@ -11,18 +11,18 @@ server.document-root = "@site@"
 index-file.names = ( "index.html" )
 
 setenv.set-response-header += (
-	"Content-Security-Policy" => "default-src 'self'; image-src 'self' https://photos.gutwe.in; script-src 'self' 'eval' 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com; frame-src 'self' https://hcaptcha.com https://*.hcaptcha.com; style-src 'self' https://hcaptcha.com https://*.hcaptcha.com; connect-src 'self' https://hcaptcha.com https://*.hcaptcha.com; frame-ancestors 'none'",
+	"Content-Security-Policy" => "default-src 'self' https://photos.gutwe.in; image-src 'self' https://photos.gutwe.in; script-src 'self' 'eval' 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com; frame-src 'self' https://hcaptcha.com https://*.hcaptcha.com; style-src 'self' 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com; connect-src 'self' https://hcaptcha.com https://*.hcaptcha.com; frame-ancestors 'none'",
 )
 
 #
 # CGI / form handling
 #
 
-$HTTP["request-method"] =~ "GET|POST" {
+#$HTTP["request-method"] =~ "GET|POST" {
-	url.rewrite = (
+#	url.rewrite = (
-		"^/anmelden" => "/cgi-bin/form.py",
+#		"^/anmelden" => "/cgi-bin/form.py",
-	)
+#	)
-}
+#}
 
 $HTTP["url"] =~ "^/cgi-bin/" {
 	alias.url += ( "/cgi-bin" => "@cgibin@" )

sites/coderdojo/index.md

@@ -23,19 +23,17 @@ Kostenlose Programmier- und Techniktreffen für Kinder und Jugendliche im Raum W
 
   <a href="/anmelden">
     <h3>Jetzt anmelden</h3>
-    <em class="inline-callout">Sa. 11.03.23 @ iWelt, Eibelstadt</em>
+    <em class="inline-callout">Ausgebucht</em>
   </a>
 
-  <a href="https://forum.coderdojo-wue.de/" target="_blank">
+  <a href="https://mailing.angestoepselt.de/subscription/form" target="_blank">
-    <h3>Forum</h3>
-  </a>
-
-  <a href="https://seu2.cleverreach.com/f/148340-147129" target="_blank">
     <h3>Newsletter</h3>
+    <span>Bleibe über neue Veranstaltungen informiert.</span>
   </a>
 
   <a href="mailto:kontakt@angestoepselt.de">
-    <h3>Mentor werden</h3>
+    <h3>Kontakt</h3>
+    <span>Wir suchen immer interessierte Kursleitende!</span>
   </a>
 </section>
 
@@ -43,8 +41,8 @@ Kostenlose Programmier- und Techniktreffen für Kinder und Jugendliche im Raum W
 
 ## Was ist ein CoderDojo?
 
-CoderDojo ist eine weltweite Bewegung für kostenlose Programmiertreffen für junge Menschen, die von ehrenamtlichen Helfern unterstützt wird.
+CoderDojo ist eine weltweite Bewegung für kostenlose Programmiertreffen für junge Menschen, die von Ehrenamtlichen unterstützt wird.
-Dort können sich Teilnehmer - egal ob mit Vorkenntnissen oder ohne - mit der digitalen Welt befassen.
+Dort können sich Teilnehmende - egal ob mit Vorkenntnissen oder ohne - mit der digitalen Welt befassen.
 
 ### Was kann ich dort machen?
 

sites/coderdojo/kontakt/fehler.md

@@ -0,0 +1,15 @@
+---
+layout: layouts/page.njk
+---
+
+# Da passt was nicht…
+
+**Entschuldigung**  — 
+Leider konnten wir dein Formular nicht verarbeiten.
+Stelle bitte sicher, dass du alle Felder korrekt ausgefüllt hast.
+
+Außerdem darf dein Browser Cookies nicht blockieren.
+Das kann auch durch einen Werbeblocker passieren – eventuell musst du für unsere Seite eine Ausnahme hinterlegen.
+Wir verwenden Cookies nur für die Sicherheit unserer Formulare und binden weder Werbung noch Tracking-Dienste ein.
+
+Wenn das alles nicht hilft, schreibe uns bitte an [kontakt@coderdojo-wue.de](mailto:kontakt@coderdojo-wue.de).

sites/coderdojo/kontakt/fertig.md

@@ -0,0 +1,34 @@
+---
+layout: layouts/page.njk
+extraStylesheets: ['finish']
+---
+
+# Es hat geklappt!
+
+<svg class="finish-hero" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214.46961 61.600083">
+  <linearGradient id="finish-hero-stroke-gradient" class="stroke-gradient" gradientUnits="userSpaceOnUse">
+    <stop offset="0%" />
+    <stop offset="25%" />
+    <stop offset="50%" />
+    <stop offset="100%" />
+  </linearGradient>
+  <path
+    class="cable"
+    d="M0 30.29a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h111.46a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5z"
+    stroke="url(#finish-hero-stroke-gradient)"
+  />
+  <path
+    class="contacts"
+    d="M204.96 27.13h9.51m-9.51-7.32h9.51m-9.51 14.63h9.51m-9.51 7.32h9.51"
+    stroke="url(#finish-hero-stroke-gradient)"
+  />
+  <path
+    class="plug"
+    d="M127.92 38.69h6.32a1 1 0 0 1 .94 1v11.45a1.07 1.07 0 0 0 .28.73l8.07 8.93a.93.93 0 0 0 .67.3h31.19a2.38 2.38 0 0 0 1.14-.28l4.14-3.61a.86.86 0 0 1 1.1.25l1.58 3.3a.91.91 0 0 0 .71.34h11.17a.92.92 0 0 0 .82-.52l3.89-7.46a2.3 2.3 0 0 0 .28-1.12l.11-44.47a1.07 1.07 0 0 0-.2-.63l-4.18-6a.92.92 0 0 0-.75-.4h-51a.93.93 0 0 0-.67.3l-8.07 8.93a1.07 1.07 0 0 0-.28.73V21.6a1 1 0 0 1-.94 1h-6.32m53.22 16.41a3.43 3.43 0 0 1-.86 2.27l-1.35 1.51a3.41 3.41 0 0 1-2.54 1.14h-19a3.45 3.45 0 0 1-2.54-1.1l-1.35-1.49a3.39 3.39 0 0 1-.87-2.27V21.92a3.39 3.39 0 0 1 .87-2.27l1.35-1.51A3.45 3.45 0 0 1 157.4 17h19a3.41 3.41 0 0 1 2.54 1.14l1.35 1.51a3.43 3.43 0 0 1 .86 2.27z"
+    fill="url(#finish-hero-stroke-gradient)"
+    stroke="url(#finish-hero-stroke-gradient)"
+  />
+</svg>
+
+**Vielen Dank**&emsp;&mdash;&emsp;
+Wir haben deine Anfrage erhalten.

sites/coderdojo/rueckblick.md

@@ -9,9 +9,9 @@ contentClass: expand
 
 # Unsere bisherigen Veranstaltungen
 
-Seit dem ersten sehr erfolgreichen CoderDojo in Würzburg am 25.03.2017 an der FHWS, gibt es sie auch in Würzburg in regelmäßigen Abständen.
+Seit dem ersten sehr erfolgreichen CoderDojo in Würzburg in 2017 gibt es sie auch in Würzburg in regelmäßigen Abständen.
 Das Projekt steht unter der Schirmherrschaft von [Angestöpselt](https://www.angestoepselt.de/), einem gemeinnützigen Verein, der es sich zum Ziel gemacht hat, den Zugang zur digitalen Welt für alle zu ermöglichen, oder zumindest zu erleichtern.
-Über das Schwesterprojekt Computerspende können Bedürftige Rechner und Peripherie, die wir von Spendern erhalten, gratis beantragen.
+Über das Schwesterprojekt Computerspende können Bedürftige Rechner und Peripherie, die wir als Spende erhalten, gratis beantragen.
 
 Nach und nach knüpfen wir immer mehr Kontakte zu Unternehmen in Würzburg, die mitmachen wollen und ein CoderDojo anbieten möchten.
 Inzwischen sind wir in fast jeder Ecke in und um Würzburg vertreten und können CoderDojos in einem Intervall von etwa 2 Monaten anbieten.
@@ -24,8 +24,6 @@ Inzwischen sind wir in fast jeder Ecke in und um Würzburg vertreten und können
 Wir sind zurück aus der Corona-Pause!
 Die [iWelt](https://www.iwelt.de/){target="_blank" rel="noopener noreferrer"} heißt uns wieder in Eibelstadt willkommen.
 
-> [Jetzt anmelden!](/anmelden)
-
 {% endtimeline %}
 {% timeline "13" %}
 
@@ -124,7 +122,7 @@ Das erste Mal sind wir beim [ZDI Mainfranken](https://www.zdi-mainfranken.de/ind
 
 ### Winter 2018 <time datetime="2018-12-01">1. Dezember 2018</time>
 
-Zum dritten Mal sind wir mit Unterstützung der Studierenden im Masterstudiengang Informationssysteme an der FHWS in Würzburg.
+Zum dritten Mal sind wir mit Unterstützung der Studierenden im Masterstudiengang Informationssysteme an der THWS in Würzburg.
 
 [
   ![Eine Gruppe aus Teilnehmenden und Mentoren arbeitet an der Programmierung von Mikrocontrollern.](https://photos.gutwe.in/uploads/small/510f3489037b83eeb265bf7ac078f14c.jpg)
@@ -163,7 +161,7 @@ Das erste CoderDojo bei der [iWelt](https://www.iwelt.de/){target="_blank" rel="
 
 ### Winter 2017 <time datetime="2017-12-02">2. Dezember 2017</time>
 
-Das zweite CoderDojo in Würzburg, wieder bei der FHWS.
+Das zweite CoderDojo in Würzburg, wieder bei der THWS.
 
 [
   ![Ein Mentor erklärt Teilnehmenden an einer Leinwand die Programmiersprache Scratch.](https://photos.gutwe.in/uploads/medium/c1f0beec7e583342c86d19fb600afc93.jpg)
@@ -176,7 +174,7 @@ Das zweite CoderDojo in Würzburg, wieder bei der FHWS.
 
 ### Frühjahr 2017 <time datetime="2017-03-25">25. März 2017</time>
 
-Erstes CoderDojo in Würzburg &ndash; wir sind zu Gast in den Räumlichkeiten der FHWS.
+Erstes CoderDojo in Würzburg &ndash; wir sind zu Gast in den Räumlichkeiten der THWS.
 
 [
   ![Die Veranstaltung ist mit knapp 30 Personen im Raum gut besucht.](https://photos.gutwe.in/uploads/medium/a81901204551f6d60430542457f99415.jpg)

styles/components/_actions.scss

@@ -55,6 +55,16 @@
 			height: 10rem;
 		}
 
+		> span {
+			color: colors.$gray-600;
+		}
+
+		> span,
+		> em {
+			margin-top: layout.$small-gap;
+			margin-bottom: layout.$small-gap;
+		}
+
 		&:hover {
 			background-color: colors.$gray-100;
 			transform: translateY(-0.5rem);
@@ -94,6 +104,10 @@
 			&:not(:first-of-type) {
 				grid-column: span 2;
 			}
+
+			&:nth-child(4):last-child {
+				grid-column: 3 / span 4;
+			}
 		}
 	}
 }

styles/components/_form-elements.scss

@@ -181,3 +181,39 @@
 		flex-basis: 60%;
 	}
 }
+
+.blanked-out-form {
+	position: relative;
+	padding: layout.$large-gap 0;
+	pointer-events: none;
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		opacity: 0.6;
+		background-image: repeating-linear-gradient(
+			-45deg,
+			transparent 0rem,
+			transparent 2rem,
+			colors.$gray-100 2.2rem,
+			colors.$gray-100 2.4rem,
+			colors.$yellow-300 2.4rem,
+			colors.$yellow-300 2.8rem,
+			colors.$yellow-500 3rem,
+			colors.$yellow-300 3.2rem,
+			colors.$yellow-300 3.6rem,
+			colors.$gray-100 3.6rem,
+			colors.$gray-100 3.8rem
+		);
+		mask-image: linear-gradient(
+			transparent 0%,
+			black #{layout.$large-gap},
+			black calc(100% - #{layout.$large-gap}),
+			transparent 100%
+		);
+	}
+}

styles/finish.scss

@@ -10,6 +10,41 @@
 @use 'lib/motion';
 
 .finish-hero {
+	--dark-idle-color: #{colors.$gray-900};
+	--light-idle-color: #{colors.$gray-600};
+	--idle-color-1: #{colors.$teal-600};
+	--idle-color-2: #{colors.$yellow-600};
+	--idle-color-3: #{colors.$blue-800};
+	--gradient-color-1: var(--dark-idle-color);
+	--gradient-color-2: var(--dark-idle-color);
+	--gradient-color-3: #{colors.$blue-500};
+	--gradient-color-4: #{colors.$teal-500};
+	--gradient-color-5: #{colors.$yellow-500};
+	--gradient-color-6: #{colors.$teal-500};
+	--gradient-color-7: #{colors.$gray-300};
+	--gradient-color-8: #{colors.$yellow-500};
+	--gradient-color-9: #{colors.$blue-500};
+	--gradient-color-10: #{colors.$gray-300};
+	--gradient-color-11: var(--dark-idle-color);
+	--gradient-color-12: var(--dark-idle-color);
+	--gradient-color-13: var(--dark-idle-color);
+
+	@include colors.coderdojo-theme {
+		--dark-idle-color: #{colors.$brown-800};
+		--light-idle-color: #{colors.$brown-500};
+		--idle-color-1: #{colors.$green-500};
+		--idle-color-2: #{colors.$orange-500};
+		--idle-color-3: #{colors.$yellow-500};
+		--gradient-color-3: #{colors.$orange-500};
+		--gradient-color-4: #{colors.$orange-400};
+		--gradient-color-5: #{colors.$yellow-500};
+		--gradient-color-6: #{colors.$green-500};
+		--gradient-color-7: #{colors.$green-300};
+		--gradient-color-8: #{colors.$orange-400};
+		--gradient-color-9: #{colors.$orange-500};
+		--gradient-color-10: #{colors.$green-500};
+	}
+
 	@keyframes finish-hero {
 		0% {
 			stroke-width: 3px;
@@ -37,20 +72,14 @@
 	animation: motion.$prominent 0s 1 normal both running finish-hero;
 
 	> .stroke-gradient {
-		$idle-color: colors.$gray-900;
-		$colors: [ $idle-color $idle-color $idle-color colors.$blue-500
-			colors.$teal-500 colors.$yellow-500 colors.$teal-500 colors.$gray-300
-			colors.$yellow-500 colors.$blue-500 colors.$gray-300 $idle-color
-			$idle-color $idle-color ];
-
 		@for $i from 1 through 4 {
 			> stop:nth-of-type(#{$i}) {
 				@keyframes finish-stroke-gradient-#{$i} {
 					0% {
-						stop-color: $idle-color;
+						stop-color: var(--dark-idle-color);
 					}
 					15% {
-						stop-color: $idle-color;
+						stop-color: var(--dark-idle-color);
 					}
 					// This is some magic that chooses the correct colors for each
 					// stop - don't change it unless you know what you are doing! In
@@ -63,16 +92,16 @@
 					// In order to achieve the 'moving' effect, we make sure that the
 					// first and last three colors match the ones we are given at 15% and
 					// 70% (before and after the core animation).
-					@for $j from 1 to list.length($colors) - 3 {
+					@for $j from 1 to 10 {
 						#{15% + $j * 5%} {
-							stop-color: list.nth($colors, 4 + $j - $i);
+							stop-color: var(--gradient-color-#{4 + $j - $i});
 						}
 					}
 					70% {
-						stop-color: $idle-color;
+						stop-color: var(--dark-idle-color);
 					}
 					100% {
-						stop-color: $idle-color;
+						stop-color: var(--dark-idle-color);
 					}
 				}
 
@@ -123,27 +152,27 @@
 		}
 		@keyframes finish-hero-plug-transition {
 			0% {
-				fill: colors.$gray-900;
+				fill: var(--dark-idle-color);
 			}
 			100% {
-				fill: colors.$gray-600;
+				fill: var(--light-idle-color);
 			}
 		}
 		@keyframes finish-hero-plug-idle {
 			0% {
-				fill: colors.$gray-600;
+				fill: var(--light-idle-color);
 			}
 			25% {
-				fill: colors.$teal-600;
+				fill: var(--idle-color-1);
 			}
 			50% {
-				fill: colors.$yellow-600;
+				fill: var(--idle-color-2);
 			}
 			75% {
-				fill: colors.$blue-800;
+				fill: var(--idle-color-3);
 			}
 			100% {
-				fill: colors.$gray-600;
+				fill: var(--light-idle-color);
 			}
 		}