DOGFATHER UNIVERSE: erste lauffähige Website + Bewerbungs-Postfach + Hosting-Vorbereitung
This commit is contained in:
+156
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" data-theme="spicymedia">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<title>Postfach — DOGFATHER UNIVERSE</title>
|
||||
<meta name="description" content="Internes Bewerbungs-Postfach — nur mit Code zugänglich." />
|
||||
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||
<meta property="og:title" content="Postfach — DOGFATHER UNIVERSE" />
|
||||
<meta property="og:description" content="Internes Bewerbungs-Postfach — nur mit Code zugänglich." />
|
||||
<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
|
||||
<meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/postfach.html" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Postfach — DOGFATHER UNIVERSE" />
|
||||
<meta name="twitter:description" content="Internes Bewerbungs-Postfach — nur mit Code zugänglich." />
|
||||
<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
|
||||
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
|
||||
<link rel="stylesheet" href="assets/css/theme-hasidog.css" />
|
||||
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="site-header"></div>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<span class="eyebrow">🔒 Intern</span>
|
||||
<h1>Bewerbungs-Postfach</h1>
|
||||
<p class="lead worlds">Nur für Dogfather & ausgewählte Personen mit Code.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container" style="max-width:520px;">
|
||||
<form id="code-gate" class="app-form" novalidate>
|
||||
<div class="field">
|
||||
<label for="code-input">Zugangscode</label>
|
||||
<input id="code-input" name="code" type="password" autocomplete="off" required />
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Postfach öffnen</button>
|
||||
<div class="form-status" id="gate-status"></div>
|
||||
</form>
|
||||
|
||||
<div class="todo-note" id="not-configured-note">
|
||||
<strong>Noch nicht aktiv:</strong> Dieses Postfach ist erst nutzbar, sobald der
|
||||
Cloudflare-Worker deployed und die Worker-URL in dieser Datei
|
||||
(<code>API_BASE_URL</code>, ganz unten im Script) sowie in
|
||||
<code>assets/js/forms.js</code> eingetragen ist. Anleitung:
|
||||
<code>cloudflare-worker/README.md</code>.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-tight" id="inbox-section" style="display:none;">
|
||||
<div class="container">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.4rem;">
|
||||
<h2 style="margin:0;">Eingegangene Bewerbungen</h2>
|
||||
<button class="btn btn-outline" id="refresh-btn" type="button">Aktualisieren</button>
|
||||
</div>
|
||||
<div id="inbox-list" class="grid grid-2"></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
<script src="assets/js/main.js"></script>
|
||||
<script>
|
||||
// TODO: nach dem Deploy des Cloudflare Workers hier die Worker-URL ohne
|
||||
// abschließenden Slash eintragen (identisch zu assets/js/forms.js).
|
||||
const API_BASE_URL = "";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const form = document.getElementById("code-gate");
|
||||
const status = document.getElementById("gate-status");
|
||||
const inboxSection = document.getElementById("inbox-section");
|
||||
const inboxList = document.getElementById("inbox-list");
|
||||
const refreshBtn = document.getElementById("refresh-btn");
|
||||
const notConfigured = document.getElementById("not-configured-note");
|
||||
|
||||
if (!API_BASE_URL) {
|
||||
notConfigured.style.display = "block";
|
||||
} else {
|
||||
notConfigured.style.display = "none";
|
||||
}
|
||||
|
||||
let lastCode = "";
|
||||
|
||||
function renderInbox(bewerbungen) {
|
||||
if (!bewerbungen.length) {
|
||||
inboxList.innerHTML = `<p class="muted">Noch keine Bewerbungen eingegangen.</p>`;
|
||||
return;
|
||||
}
|
||||
inboxList.innerHTML = bewerbungen
|
||||
.map((b) => {
|
||||
const fields = Object.entries(b.data)
|
||||
.map(([k, v]) => `<p class="small"><strong>${k}:</strong> ${v}</p>`)
|
||||
.join("");
|
||||
const date = new Date(b.timestamp).toLocaleString("de-DE");
|
||||
return `
|
||||
<div class="card">
|
||||
<span class="tag">${b.type}</span>
|
||||
<p class="small muted" style="margin-bottom:.6rem;">${date}</p>
|
||||
${fields}
|
||||
</div>`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
async function loadInbox(code) {
|
||||
status.className = "form-status show";
|
||||
status.textContent = "Lade Postfach …";
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/postfach`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ code }),
|
||||
});
|
||||
const json = await res.json();
|
||||
if (!res.ok || !json.ok) {
|
||||
status.textContent = "Falscher Code oder Postfach nicht erreichbar.";
|
||||
status.className = "form-status show error";
|
||||
inboxSection.style.display = "none";
|
||||
return;
|
||||
}
|
||||
status.className = "form-status";
|
||||
inboxSection.style.display = "block";
|
||||
renderInbox(json.bewerbungen);
|
||||
} catch {
|
||||
status.textContent = "Postfach gerade nicht erreichbar. Bitte später erneut versuchen.";
|
||||
status.className = "form-status show error";
|
||||
}
|
||||
}
|
||||
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
if (!API_BASE_URL) {
|
||||
status.textContent = "Postfach ist noch nicht eingerichtet (siehe Hinweis unten).";
|
||||
status.className = "form-status show error";
|
||||
return;
|
||||
}
|
||||
lastCode = document.getElementById("code-input").value;
|
||||
loadInbox(lastCode);
|
||||
});
|
||||
|
||||
refreshBtn.addEventListener("click", () => {
|
||||
if (lastCode) loadInbox(lastCode);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user