DOGFATHER UNIVERSE: erste lauffähige Website + Bewerbungs-Postfach + Hosting-Vorbereitung

2026-07-30 20:09:09 +02:00
commit f8e4cf82db
45 changed files with 3462 additions and 0 deletions
@@ -0,0 +1,129 @@
+/* =====================================================================
+   forms.js — Validierung + Versand für die drei Bewerbungsformulare
+   (Creator / Scout / Kooperation) auf bewerben.html
+
+   Versand-Logik:
+   1) Wenn API_BASE_URL gesetzt ist (Cloudflare-Worker-Postfach deployed,
+      siehe cloudflare-worker/README.md): Bewerbung wird per POST an
+      `${API_BASE_URL}/submit` gesendet und landet im code-geschützten
+      Postfach (postfach.html).
+   2) Solange API_BASE_URL leer ist ODER der Versand fehlschlägt (z.B.
+      offline, Worker noch nicht deployed): Fallback auf einen
+      vorausgefüllten "mailto:"-Link, wie bisher.
+   ===================================================================== */
+
+// TODO: nach dem Deploy des Cloudflare Workers hier die Worker-URL ohne
+// abschließenden Slash eintragen, z.B.
+// "https://dogfather-universe-postfach.DEIN-ACCOUNT.workers.dev"
+const API_BASE_URL = "";
+
+const CONTACT_EMAIL = "[email protected]"; // TODO: echte Kontakt-E-Mail eintragen
+
+const FORM_TYPES = {
+  "form-creator": "creator",
+  "form-scout": "scout",
+  "form-kooperation": "kooperation",
+};
+
+function validateField(field) {
+  const wrapper = field.closest(".field");
+  if (!wrapper) return true;
+  let valid = field.checkValidity();
+
+  if (valid && field.type === "email" && field.value) {
+    valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field.value);
+  }
+
+  wrapper.classList.toggle("has-error", !valid);
+  return valid;
+}
+
+function buildMailto(subjectLabel, data) {
+  const lines = [...data.entries()].map(([k, v]) => `${k}: ${v}`).join("\n");
+  return `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(
+    "Bewerbung: " + subjectLabel
+  )}&body=${encodeURIComponent(lines)}`;
+}
+
+async function submitToWorker(type, data) {
+  if (!API_BASE_URL) return false;
+  const payload = { type, data: Object.fromEntries(data.entries()) };
+  try {
+    const res = await fetch(`${API_BASE_URL}/submit`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    if (!res.ok) return false;
+    const json = await res.json();
+    return !!json.ok;
+  } catch {
+    return false; // z.B. offline oder Worker nicht erreichbar -> Fallback greift
+  }
+}
+
+function setupForm(formId, subjectLabel) {
+  const form = document.getElementById(formId);
+  if (!form) return;
+
+  const status = form.querySelector(".form-status");
+  const type = FORM_TYPES[formId];
+
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const fields = [...form.querySelectorAll("input[required], select[required], textarea[required], input[type=email]")];
+    const allValid = fields.map(validateField).every(Boolean);
+
+    if (!allValid) {
+      if (status) {
+        status.textContent = "Bitte prüfe die markierten Felder — es fehlt noch etwas.";
+        status.className = "form-status show error";
+      }
+      return;
+    }
+
+    const data = new FormData(form);
+    const submitBtn = form.querySelector('button[type="submit"]');
+    if (submitBtn) submitBtn.disabled = true;
+
+    const delivered = await submitToWorker(type, data);
+
+    if (status) {
+      if (delivered) {
+        status.innerHTML = `Danke, das sieht super aus! 🩵 Deine Bewerbung ist sicher im Postfach von Team Dogi angekommen.`;
+        status.className = "form-status show success";
+      } else {
+        const mailto = buildMailto(subjectLabel, data);
+        status.innerHTML = `Danke, das sieht super aus! 🩵 Solange noch kein automatischer Versand eingerichtet ist:
+          <a href="${mailto}" class="btn btn-outline" style="margin-top:.6rem;">E-Mail jetzt senden</a>`;
+        status.className = "form-status show success";
+      }
+    }
+    if (submitBtn) submitBtn.disabled = false;
+    form.reset();
+  });
+
+  form.querySelectorAll("input, select, textarea").forEach((field) => {
+    field.addEventListener("blur", () => validateField(field));
+  });
+}
+
+function setupTabs() {
+  const tabs = document.querySelectorAll(".tab-btn");
+  const panels = document.querySelectorAll(".tab-panel");
+  tabs.forEach((tab) => {
+    tab.addEventListener("click", () => {
+      tabs.forEach((t) => t.classList.remove("active"));
+      panels.forEach((p) => p.classList.remove("active"));
+      tab.classList.add("active");
+      document.getElementById(tab.dataset.tab).classList.add("active");
+    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  setupTabs();
+  setupForm("form-creator", "Creator");
+  setupForm("form-scout", "Scout");
+  setupForm("form-kooperation", "Kooperation");
+});