157 lines
5.9 KiB
HTML
157 lines
5.9 KiB
HTML
<!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>
|