Merge pull request #25 from temporaerhaus/feat_eroeffnung

Eröffnungspost und Mitgliedsformular
temporaerhaus · Sep 3, 2023 · 8b5200f · 8b5200f
2 parents 64c5370 + 31e66db
commit 8b5200f
Show file tree

Hide file tree

Showing 11 changed files with 459 additions and 14 deletions.
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -1,5 +1,7 @@
 /* --------------------- GENERAL ---------------------- */
 
+.info,
+.success,
 .warning,
 .danger {
 	padding: 10px;
@@ -13,19 +15,35 @@
 	border-color: #f5c6cb;
 }
 
+.info {
+	color: rgb(33, 150, 243);
+	background-color: rgba(33, 150, 243, 0.12);
+	border-color: rgba(33, 150, 243, 0.12);
+}
+
+.success {
+	color: rgb(76, 175, 80);
+	background-color: rgba(76, 175, 80, 0.12);
+	border-color: rgba(76, 175, 80, 0.12);
+}
+
 .warning {
 	color: #664d03;
 	background-color: #fff3cd;
 	border-color: #ffecb5;
 }
 
+.info h3,
+.success h3,
 .warning h3,
 .danger h3 {
 	margin: 0;
 	display: inline-block;
 	font-size: 1.2em;
 }
 
+.info p:last-child,
+.success p:last-child,
 .warning p:last-child,
 .danger p:last-child {
 	margin-bottom: 0;
@@ -192,7 +210,7 @@ li.active a, li.active a:hover {
   right: 0;
   bottom: 0;
   left: 0;
-  background: #333;
+  background: #000;
 }
 
 .fullwidth-bg img {
@@ -201,7 +219,7 @@ li.active a, li.active a:hover {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  opacity:  0.85;
+  opacity:  0.55;
 }
 
 .fullwidth-content {
@@ -255,7 +273,7 @@ li.active a, li.active a:hover {
 
 .floating-space-state {
   order: -1;
-  background: rgba(255,255,255,.6);
+  background: rgba(255,255,255,.75);
   padding: 1.5em;
   margin-bottom: 2.5em;
   color: #000;

diff --git a/content/pages/umzug/index.de.md b/content/pages/umzug/index.de.md
@@ -1,8 +1,7 @@
 ---
-title: Das Temporärhaus zieht um
+title: Das Temporärhaus ist zurück!
 type: page
 slug: umzug
-sticky: true
 featured_image: /wp-content/uploads/2022/09/umzug.jpg
 ---
 

diff --git a/content/pages/verein/index.de.md b/content/pages/verein/index.de.md
@@ -21,13 +21,235 @@ Weiter ermöglichen die Mitgliedsbeiträge die Beschaffung von interessanten Din
 Für alle Dinge rund um den Verein erreichst du uns am besten unter _vorstand (at) temporaerhaus.de_.
 
 ### Mitgliedschaft im Verein
-Du willst Mitglied im Verein werden? Dann schicke uns einfach eine Mail an `vorstand (at) temporaerhaus.de` mit deinem Namen, E-Mail, Postadresse (brauchen wir für die Beitragsquittung) sowie einer kurzen Beschreibung warum du beitreten willst bzw. wie du bisher bei uns aktiv warst.
+Du warst schon ein paar mal im Haus, dir gefällt es dort und du willst nun Mitglied im Verein werden?
+Dann schicke uns einfach eine Mail an `vorstand (at) temporaerhaus.de` mit deinem Namen, E-Mail, Postadresse (brauchen wir für die Beitragsquittung) sowie einer kurzen Beschreibung warum du beitreten willst bzw. wie du bisher bei uns aktiv warst.
 
 In der Regel beträgt der Mitgliedsbeitrag 10 € im Monat, kann aber nach Rücksprache angepasst werden.
 
 ### Fördermitgliedschaft
-Wir freuen uns sehr über deine Unterstützung als Fördermitglied im Verein. Um Fördermitglied zu werden, schicke uns einfach eine Mail an `vorstand (at) temporaerhaus.de` mit deinem Namen, E-Mail Adresse, Postadresse (brauchen wir für deine jährliche Spendenbescheinigung) und deinem gewünschten monatlichen Förderbeitrag.
+Wir freuen uns sehr über deine Unterstützung als Fördermitglied im Verein. Um Fördermitglied zu werden, kannst du das Antragsformular unten nutzen oder uns einfach eine Mail an `vorstand (at) temporaerhaus.de` schicken, mit deinem Namen, E-Mail Adresse, Postadresse (brauchen wir für deine jährliche Spendenbescheinigung) und deinem gewünschten monatlichen Förderbeitrag.
 
-Wir empfehlen für Fördermitglieder einen monatlichen Mindestbeitrag von 10€ für natürliche Personen und 50€ pro Monat oder mehr für juristische Personen wie Firmen oder Organisationen.
+Wir empfehlen für Fördermitglieder*innen einen monatlichen Mindestbeitrag von 10€ für natürliche Personen und 50€ pro Monat oder mehr für juristische Personen wie Firmen oder Organisationen.
 
 Vielen Dank!
+
+### Antragsformular
+
+<form style="display: flex; flex-wrap: wrap;" method="POST" action="https://temporaerhaus.de/member-application.php" id="applicationForm">
+<div style="display: none; flex-grow: 0; flex-shrink: 1; flex-basis: 230px;">
+  <ol>
+    <li><a href="#step1">Persönliche Angaben</a></li>
+    <li><a href="#step2">Mitgliedsbeitrag</a></li>
+    <li><a href="#step3">Zahlungsweise</a></li>
+    <li><a href="#step4">Anschrift</a></li>
+    <li><a href="#step5">Datenschutzerklärung</a></li>
+  </ol>
+</div>
+
+<div style="flex-grow: 1; flex-shrink: 1; flex-basis: 280px;">
+<div id="step1" style="scroll-padding-top: 2em;">
+<p>
+<label for="firstname">Vorname:</label>
+<input type="text" id="firstname" name="firstname">
+</p>
+<p>
+<label for="lastname">Nachname:</label>
+<input type="text" id="lastname" name="lastname">
+</p>
+<p>
+<label for="email">E-Mail Adresse:</label>
+<input type="text" id="email" name="email">
+</p>
+</div>
+
+<div id="step2" style="scroll-padding-top: 2em;">
+<p>
+<label for="type">Art der Mitgliedschaft:</label>
+<select id="type" name="type">
+    <option>Fördermitglied</option>
+    <option>Aktives Mitglied</option>
+</select>
+</p>
+<p>
+<label for="amount">Monatlicher Förderbeitrag:</label>
+<input type="number" id="amount" name="amount">
+</p>
+</div>
+
+<div id="step3" style="scroll-padding-top: 2em;">
+<p>
+<label for="interval">Zahlungsintervall:</label>
+<select id="interval" name="interval">
+    <option>jährlich</option>
+    <option>halbjährig</option>
+    <option>monatlich</option>
+</select>
+</p>
+<p>
+<label for="iban">IBAN:</label>
+<input type="text" id="iban" name="iban">
+</p>
+<p>
+<label for="bic">BIC:</label>
+<input type="text" id="bic" name="bic">
+</p>
+<p>
+<label for="consent">
+<input type="checkbox" id="consent" name="consent">
+Ich erteile hiermit die Erlaubnis zum Einzug per SEPA-Lastschrift von meinem oben angegebenen Konto.
+</label>
+</p>
+</div>
+
+<div id="step4" style="scroll-padding-top: 2em;">
+<p>
+<label for="address">Straße und Hausnummer:</label>
+<input type="text" id="address" name="address">
+</p>
+<p>
+<label for="suffix">Addresszusatz:</label>
+<input type="text" id="suffix" name="suffix">
+</p>
+<p>
+<label for="city">Stadt:</label>
+<input type="text" id="city" name="city">
+</p>
+<p>
+<label for="zip">Postleitzahl:</label>
+<input type="text" id="zip" name="zip">
+</p>
+<p>
+<label for="country">Land:</label>
+<input type="text" id="country" name="country" value="Deutschland">
+</p>
+</div>
+
+<div id="step5" style="scroll-padding-top: 2em;">
+<p>
+<label for="mailconsent">
+<input type="checkbox" id="mailconsent" name="mailconsent">
+Ich willige in die Übersendung von Informationen über die Arbeit des temporärhaus per E-Mail und Post ein.
+Es gelten die Bestimmungen unserer <a href="/datenschutzerklaerung" target="_blank">Datenschutzerklärung</a>.
+</label>
+</p>
+<p>
+<label for="message">Nachricht:</label>
+<textarea id="message" name="message"></textarea>
+<small class="info" style="padding-block: 0.25em;"><b>ℹ</b> Hier kannst du uns noch weitere Informationen zu deiner Mitgliedschaft übermitteln.</small>
+</p>
+</div>
+
+<div style="display: none; align-items: center; justify-content: space-between;">
+<button id="prevStep">◀ Zurück</button>
+<button id="nextStep">▶ Weiter</button>
+</div>
+
+<button type="submit">✉ Antrag Versenden</button>
+</div>
+</form>
+
+<script type="text/javascript">
+(() => {
+    const form = document.getElementById('applicationForm');
+    const nextStep = document.getElementById('nextStep');
+    const prevStep = document.getElementById('prevStep');
+    nextStep.parentNode.style.display = 'flex';
+    document.querySelector('button[type="submit"]').remove();
+    form.children[0].style.display = 'block';
+
+    window.addEventListener('hashchange', () => {
+        const hash = location.hash.startsWith('#step') ? location.hash : '#step1';
+        const a = document.querySelector(`a[href="${hash}"]`);
+        const e = document.querySelector(hash);
+        if (!a || !e) {
+            return;
+        }
+        a.closest('ol').querySelectorAll('li').forEach(e => {
+            e.style.fontWeight = 'normal';
+            e.style.color = '#666';
+            e.children[0].style.color = '#666';
+        });
+        a.parentNode.style.fontWeight = 'bold';
+        a.parentNode.style.color = 'black';
+        a.style.color = 'black';
+
+        e.parentNode.querySelectorAll('div[id]').forEach(e => {
+            e.style.display = 'none';
+        });
+        e.style.display = 'block';
+
+        prevStep.disabled = (hash === '#step1');
+        nextStep.innerText = (hash === '#step5') ? '✉ Antrag Versenden' : '▶ Weiter';
+    });
+
+    const changeStep = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const hash = location.hash.startsWith('#step') ? location.hash : '#step1';
+        const target = (Number(hash.slice(5)) || 0) + (e.target.id === 'nextStep' ? 1 : -1);
+        if (target === 6) {
+            form.dispatchEvent(new Event('submit'));
+            return;
+        }
+
+        location.hash = `#step${target}`;
+        window.dispatchEvent(new Event('hashchange'));
+    };
+    nextStep.addEventListener('click', changeStep);
+    prevStep.addEventListener('click', changeStep);
+
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        form.querySelectorAll('p').forEach(e => e.classList.remove('danger'));
+        nextStep.disabled = true;
+        prevStep.disabled = true;
+
+        let response = document.getElementById('formResponse')
+        if (!response) {
+            response = document.createElement('div');
+            response.id = 'formResponse';
+            form.insertAdjacentElement('beforebegin', response);
+        }
+
+        response.className = 'info';
+        response.innerHTML = '<h3>⏳ Einen Moment, dein Antrag wird gespeichert.</h3>';
+
+        const data = new URLSearchParams(new FormData(form));
+        const res = await fetch(form.action, { method: 'post', body: data });
+        nextStep.disabled = false;
+        prevStep.disabled = false;
+
+        if (res.status === 200) {
+            // show success and clear form?
+            form.reset();
+            location.hash = '#step1';
+            window.dispatchEvent(new Event('hashchange'));
+            response.className = 'success';
+            response.innerHTML = await res.text();
+        } else {
+            const body = await res.json();
+            response.className = 'danger';
+            response.innerHTML = '<h3>💻 Computer sagt "Nein" :(</h3><p>Bitte überprüfe die hervorgehobenen Formularfelder noch einmal.</p>';
+
+            let step = 'step5';
+            for (const field of Object.keys(body)) {
+                const e = document.getElementById(field);
+                e?.closest?.('p')?.classList?.add?.('danger');
+                const id = e?.closest?.('div[id]')?.id;
+                if (id < step) {
+                    step = id;
+                }
+            }
+            if (location.hash !== `#${step}`) {
+                location.hash = `#${step}`;
+                window.dispatchEvent(new Event('hashchange'));
+            }
+        }
+    });
+
+    window.dispatchEvent(new Event('hashchange'));
+})();
+</script>
diff --git a/content/posts/2023-09-01-kulturnacht-2023.de.md b/content/posts/2023-09-01-kulturnacht-2023.de.md
@@ -0,0 +1,46 @@
+---
+sticky: true
+title: Das temporärhaus ist zurück!
+author: Community
+date: 2023-08-28T10:41:53.842Z
+draft: false
+categories:
+  - news
+tags:
+  - umbau
+  - einzug
+  - kulturnacht
+featured_image: /wp-content/uploads/2023/09/wohnzimmer.jpg
+---
+
+Die letzten Jahre waren sehr turbulent. Pandemie, [Rechtsstreit](/urteil-im-markenrechtsstreit/), [Suche nach einem neuen Haus](/das-verschw%C3%B6rhaus-ist-ausgezogen-die-r%C3%A4ume-am-weinhof-sind-nun-leer/) und [Umbenennung von Verein und Community zu temporärhaus](/stellungnahme-und-ausblick-zum-urteil-im-markenrechtsstreit/) haben uns alle in Atem gehalten. Doch jetzt ist es endlich soweit: Wir öffnen am Samstag, 16.09., zur Kulturnacht zum ersten Mal die Türen unseres neuen Hauses in Neu-Ulm, das wir gemeinsam mit dem [Haus der Nachhaltigkeit](https://www.h-d-n.org) (HdN) seit Mai herrichten und nun endlich zusammen bespielen werden! 🥳
+
+Ein paar erste Eindrücke aus der Umbauphase haben wir bereits auf Social Media und unserer [Webseite](/der-umbau-geht-voran--und-du-kannst-uns-helfen/) angeteasert. Jetzt, wo der Umbau größtenteils abgeschlossen ist, wirkt alles nochmal bunter, größer und schöner! 🤩
+
+<div style="text-align: center;">
+<img src="/wp-content/uploads/2023/09/eroeffnung.gif" alt="Bild von unserem Matelight, welches Abwechselnd '16.09.2023' und 'Eroeffnung' anzeigt.">
+</div>
+
+Natürlich haben wir wieder, wie auch die letzten Jahre, ein spannendes Programm für die [Kulturnacht vorbereitet](https://www.kulturnacht-ulm.de/web/kulturnacht/besucher/programm/programmdetail.php?id=2084).
+Wir haben von 19:00 bis 01:00 Uhr geöffnet und zeigen euch digitale Kunst und anderen Krempel in den weitläufigen Räumlichkeiten. Dank gemeinsamer Bespielung mit dem HdN wird es diesmal sogar auch Live-Musik geben!
+Freut euch auf das Folgende, von uns bereitgestellte Programm:
+
+ * Siebdruck: bringt hierfür gerne Textilien mit, die ihr besiebdruckt haben möchtet :)
+ * Ausstellungen zum aktuellen AI-Hype
+ * Retro-Koop-Gaming
+ * Führungen durch die neuen Räume
+
+Zusätzlich dazu wird es vom HdN eigenes Programm geben. Der Blick auf die Neu-Ulmer Seite der Donau lohnt sich also!
+Finden kannst du uns in der fußläufig gut erreichbaren [Augsburgerstr. 23-25](https://www.openstreetmap.org/node/10889781438) in Neu-Ulm.
+
+<iframe width="100%" height="250" src="https://www.openstreetmap.org/export/embed.html?bbox=10.000559868549248%2C48.395623074583305%2C10.003529073928734%2C48.39714575728419&amp;layer=mapnik&amp;marker=48.39638442163035%2C10.00204447123906" style="border: 1px solid black"></iframe>
+
+**Du hast an der Kulturnacht leider keine Zeit?**<br>
+Kein Problem! Direkt nach der Kulturnacht bieten wir einige unserer bekannten Formate wieder regelmäßig an, beginnend mit dem Maker-Monday am 18.09.2023.
+Alle weiteren Termine findest du in Kürze wieder wie gewohnt in unserem [Kalender 📅](/termine-und-oeffnungszeiten/).
+
+
+Wir freuen uns auf dich!<br>
+Deine temporärhaus-Community
+
+*PS: Wir haben jetzt auch endlich mal das mit dieser 'Digitalisierung' hinbekommen und es gibt ab sofort [ein Formular](/verein/), um Fördermitglied im temporärhaus e.V. zu werden* 😉
diff --git a/layouts/partials/index-fullwidth.html b/layouts/partials/index-fullwidth.html
@@ -20,7 +20,8 @@ <h2 class="entry-title"><a href="{{ .Permalink }}" rel="bookmark">{{ .Title | de
 
   <section class="full-alert">
     <div class="site-inner">
-       <strong>Anderer Name?! Warum wir jetzt vorübergehend Temporärhaus heißen: <a href="/stellungnahme-und-ausblick-zum-urteil-im-markenrechtsstreit/">hier nachlesen</a>.</strong>
+       <strong>🎉 Besuche uns bei der <a href="https://www.kulturnacht-ulm.de/web/kulturnacht/besucher/programm/programmdetail.php?id=2084" target="_blank" rel="noopener noreferrer">Kulturnacht</a> am 16.09., zur Eröffnung unseres neuen Hauses 🎉</strong><br>
+       Weitere Infos <a href="/kulturnacht-2023/">hier nachlesen</a>.</strong>
     </div>
   </section>
 {{ end }}
diff --git a/layouts/partials/site-full-alert.html b/layouts/partials/site-full-alert.html
@@ -1,7 +1,7 @@
 {{- if not .IsHome -}}
 <section class="full-alert full-alert-spacing">
     <div class="site-inner">
-       <strong>Anderer Name?! Warum wir jetzt vorübergehend Temporärhaus heißen: <a href="/stellungnahme-und-ausblick-zum-urteil-im-markenrechtsstreit">hier nachlesen</a>.</strong>
+       <strong>Anderer Name?! Warum wir jetzt vorübergehend temporärhaus heißen: <a href="/stellungnahme-und-ausblick-zum-urteil-im-markenrechtsstreit">hier nachlesen</a>.</strong>
     </div>
 </section>
 {{- end -}}