DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Drei getrennte Bewerbungsseiten statt einer Seite mit Reitern

Browse Source 
Wunsch: eigene Seiten fuer Agentur-Bewerbungen und Community, konkret
Modi fuer Dogfather, Scouts fuer Dogfather, und Streamer die Dogfather
als Manager suchen -- statt allem auf einer Seite mit Tabs.

Neu:
- bewerben-modi.html   -- Community/Team Dogi, babyblau, eigenes Motiv
- bewerben-scout.html  -- Agentur, rot, Scout-Motiv
- bewerben-creator.html -- Agentur, rot, "Streamer? Ich such dich als
  Creator." -- fuer Streamer, die einen Manager suchen
- bewerben-kooperation.html -- Agentur, rot, Business-Anfragen

bewerben.html ist jetzt eine kurze Uebersicht mit drei grossen Karten
(Modi/Scout/Creator) plus einem Hinweis auf die Kooperationsseite,
statt eines Tab-Systems.

Alle internen Links aktualisiert (team-modis.html, team-scouts.html,
creator.html, links.html-Text) auf die jeweils passende, direkte Seite.
Generische "Jetzt bewerben"-Knoepfe (Startseite, Werte, Manager) bleiben
bewusst auf der Uebersicht, da dort keine Rolle vorausgewaehlt ist.

forms.js vereinfacht: das Tab-/Hintergrundwechsel-System ist raus, jede
Seite traegt ihr Motiv jetzt wie jede andere Seite der Website fest im
HTML. Kein Backend-/Datenbankaenderung noetig -- "modi" war schon als
Bewerbungstyp erlaubt.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-07-31 22:57:51 +02:00
co-authored by Claude Opus 5
parent 755d0c7a0e
commit 39d97c5846
11 changed files with 344 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/forms.js
+12 -60
View File
@@ -1,20 +1,20 @@
/* =====================================================================
forms.js — Validierung + Versand für die drei Bewerbungsformulare
(Creator / Scout / Kooperation) auf bewerben.html
forms.js — Validierung + Versand für die Bewerbungsformulare
(Creator: bewerben-creator.html, Scout: bewerben-scout.html,
Modi: bewerben-modi.html, Kooperation: bewerben-kooperation.html)
Jede Bewerbungsart hat ihre eigene Seite (kein Tab-System mehr) —
Hintergrundbild und Farbwelt sitzen wie überall sonst auf der Website
fest im HTML jeder Seite selbst.
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.
1) Bewerbung wird per POST an `${API_BASE_URL}/submit` an den
Cloudflare-Worker gesendet und landet im code-geschützten Postfach
(postfach.html).
2) Schlägt der Versand fehl (z.B. offline): Fallback auf einen
vorausgefüllten "mailto:"-Link.
===================================================================== */
// 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 = "https://dogfather-universe-postfach.dogfather1608.workers.dev";
const CONTACT_EMAIL = "[email protected]"; // TODO: echte Kontakt-E-Mail eintragen
@@ -109,55 +109,7 @@ function setupForm(formId, subjectLabel) {
});
}
/* Der Kopfbereich wechselt Hintergrundbild, Welt-Farbe (Theme) und Eyebrow-
Text mit dem gewählten Reiter: Creator/Scout/Kooperation sind Spicy-Media-
Agentur (rot), Modi ist Dogfathers persönliches Team (babyblau) — genau
wie überall sonst auf der Seite (Rot = NUR Agentur). So passt Bild UND
Farbwelt immer zur gerade gewählten Bewerbung. */
const TAB_HINTERGRUENDE = {
"tab-creator": { bg: "bg-bewerben-creator", theme: "spicymedia", eyebrow: "Manager Dogfather" },
"tab-scout": { bg: "bg-bewerben", theme: "spicymedia", eyebrow: "Manager Dogfather" },
"tab-modi": { bg: "bg-dogfather", theme: "dogfather", eyebrow: "🩵 Team Dogi" },
"tab-kooperation": { bg: "bg-bewerben", theme: "spicymedia", eyebrow: "Manager Dogfather" },
};
function setzeTabHintergrund(tabId) {
const einstellung = TAB_HINTERGRUENDE[tabId];
if (!einstellung) return;
// Die Bildvariablen hängen am <body> — das Motiv trägt die ganze Seite.
document.body.style.setProperty("--page-bg", `url('/assets/img/${einstellung.bg}.jpg')`);
document.body.style.setProperty("--page-bg-mobile", `url('/assets/img/${einstellung.bg}-mobile.jpg')`);
document.documentElement.setAttribute("data-theme", einstellung.theme);
const eyebrow = document.getElementById("bewerben-eyebrow");
if (eyebrow) eyebrow.textContent = einstellung.eyebrow;
}
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");
setzeTabHintergrund(tab.dataset.tab);
});
});
// Direkt-Link auf einen Reiter, z.B. bewerben.html#modi von der Modi-
// Team-Seite aus — öffnet die Bewerbung gleich auf dem richtigen Tab.
const gewuenscht = location.hash.replace("#", "");
const linkBtn = gewuenscht && document.querySelector(`.tab-btn[data-tab="tab-${gewuenscht}"]`);
if (linkBtn) linkBtn.click();
// Beim Laden passend zum aktiven Reiter setzen (bereits aktiv ODER gerade per Hash geöffnet)
const aktiv = document.querySelector(".tab-btn.active");
if (aktiv) setzeTabHintergrund(aktiv.dataset.tab);
}
document.addEventListener("DOMContentLoaded", () => {
setupTabs();
setupForm("form-creator", "Creator");
setupForm("form-scout", "Scout");
setupForm("form-modi", "Modi");