Hi, I'm using whatsapp.

This commit is contained in:
nke4 committed 2026-10-18 19:47:56 +02:00
commit be01fa5299
12 files changed
+2462

No files matched your search

+59
View File
@@ -0,0 +1,59 @@
/* Admin-only additions, layered on top of style.css */
.admin-window {
max-width: 560px;
margin: 0 auto;
}
#admin-main .admin-window {
max-width: none;
}
#admin-main .window + .admin-toolbar,
#admin-main .admin-window + .admin-window {
margin-top: 26px;
}
.admin-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 6px;
}
.admin-actions {
display: flex;
gap: 10px;
margin-top: auto;
padding-top: 10px;
}
.btn-admin {
font-family: var(--font-mono);
font-weight: 700;
letter-spacing: 0.06em;
padding: 8px 16px;
font-size: 0.72rem;
cursor: pointer;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
text-transform: uppercase;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease, border-color 0.12s ease;
}
.btn-admin--approve {
border-color: var(--sky);
}
.btn-admin--approve:hover { background: var(--sky); color: var(--ink); }
.btn-admin--deny {
border-color: var(--coral);
color: var(--coral);
}
.btn-admin--deny:hover { background: var(--coral); color: var(--paper); }
.admin-card.is-busy {
opacity: 0.45;
pointer-events: none;
}
+84
View File
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mod Desk :: Merz-hater Club Friendbook</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Chakra+Petch:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="admin.css" />
</head>
<body>
<div class="scanlines" aria-hidden="true"></div>
<header class="hero">
<div class="hero__glitchbox">
<h1 class="glitch" data-text="MOD DESK">MOD DESK</h1>
</div>
<p class="hero__tagline">approve or deny incoming friend book pages (◡‿◡)</p>
</header>
<main>
<!-- ===================== LOGIN GATE ===================== -->
<section id="password-gate" class="panel window admin-window" aria-label="Admin login">
<div class="window__bar">
<span class="dot dot--blue"></span>
<span class="dot dot--pink"></span>
<span class="dot dot--white"></span>
<span class="window__title">login required</span>
</div>
<form id="password-form" class="window__body form">
<div class="field">
<label for="admin-password">Admin Password</label>
<input type="password" id="admin-password" name="password" autocomplete="current-password" required autofocus />
</div>
<p id="password-error" class="form-error" role="alert" hidden></p>
<button type="submit" class="btn-submit"><span>ENTER</span></button>
</form>
</section>
<!-- ===================== ADMIN VIEW ===================== -->
<section id="admin-main" hidden>
<div class="admin-toolbar">
<button type="button" id="logout-btn" class="btn-admin btn-admin--deny">LOG OUT</button>
</div>
<section class="panel window admin-window">
<div class="window__bar">
<span class="dot dot--blue"></span>
<span class="dot dot--pink"></span>
<span class="dot dot--white"></span>
<span class="window__title">pending review</span>
</div>
<div class="window__body">
<p id="pending-status" class="gallery-status">loading...</p>
<div id="pending-grid" class="gallery-grid"></div>
</div>
</section>
<section class="panel window admin-window">
<div class="window__bar">
<span class="dot dot--blue"></span>
<span class="dot dot--pink"></span>
<span class="dot dot--white"></span>
<span class="window__title">already approved</span>
</div>
<div class="window__body">
<p id="approved-status" class="gallery-status">loading...</p>
<div id="approved-grid" class="gallery-grid"></div>
</div>
</section>
</section>
</main>
<script src="admin.js"></script>
</body>
</html>
+204
View File
@@ -0,0 +1,204 @@
(() => {
"use strict";
const STORAGE_KEY = "friendbook_admin_pw";
const passwordGate = document.getElementById("password-gate");
const passwordForm = document.getElementById("password-form");
const passwordInput = document.getElementById("admin-password");
const passwordError = document.getElementById("password-error");
const adminMain = document.getElementById("admin-main");
const logoutBtn = document.getElementById("logout-btn");
const pendingGrid = document.getElementById("pending-grid");
const pendingStatus = document.getElementById("pending-status");
const approvedGrid = document.getElementById("approved-grid");
const approvedStatus = document.getElementById("approved-status");
// ---------------- password storage (per-tab only) ----------------
function getPassword() {
return sessionStorage.getItem(STORAGE_KEY) || "";
}
function setPassword(pw) {
sessionStorage.setItem(STORAGE_KEY, pw);
}
function clearPassword() {
sessionStorage.removeItem(STORAGE_KEY);
}
// ---------------- gate / main toggling ----------------
function showGate(errorMsg) {
adminMain.hidden = true;
passwordGate.hidden = false;
if (errorMsg) {
passwordError.textContent = errorMsg;
passwordError.hidden = false;
} else {
passwordError.hidden = true;
passwordError.textContent = "";
}
passwordInput.value = "";
passwordInput.focus();
}
function showAdmin() {
passwordGate.hidden = true;
adminMain.hidden = false;
loadEntries();
}
// ---------------- authenticated fetch helper ----------------
async function adminFetch(url, options) {
const opts = options || {};
const headers = Object.assign({}, opts.headers, { "x-admin-password": getPassword() });
const res = await fetch(url, Object.assign({}, opts, { headers }));
if (res.status === 401) {
clearPassword();
showGate("Incorrect password. Try again.");
throw new Error("unauthorized");
}
return res;
}
// ---------------- login form ----------------
passwordForm.addEventListener("submit", async (e) => {
e.preventDefault();
const pw = passwordInput.value;
setPassword(pw);
try {
const res = await fetch("/api/admin/login", {
method: "POST",
headers: { "x-admin-password": pw },
});
if (!res.ok) {
clearPassword();
showGate("Incorrect password. Try again.");
return;
}
showAdmin();
} catch (err) {
showGate("Could not reach the server. Is it running?");
}
});
logoutBtn.addEventListener("click", () => {
clearPassword();
showGate();
});
// ---------------- rendering ----------------
function escapeHtml(str) {
const div = document.createElement("div");
div.textContent = str == null ? "" : String(str);
return div.innerHTML;
}
function renderRow(label, value) {
if (!value) return "";
return `<div class="entry-card__row"><span class="k">${escapeHtml(label)}</span><span class="v">${escapeHtml(value)}</span></div>`;
}
function renderEntry(entry) {
const card = document.createElement("article");
card.className = "entry-card admin-card";
const badgesHtml = (entry.badges || [])
.map((src) => `<img src="${escapeHtml(src)}" alt="badge" loading="lazy" />`)
.join("");
card.innerHTML = `
<span class="entry-card__mood" aria-hidden="true">${escapeHtml(entry.mood || "🖤")}</span>
<h3 class="entry-card__name">${escapeHtml(entry.name)}</h3>
${renderRow("Fun fact", entry.funFact)}
${renderRow("Favourite colour", entry.favColor)}
${renderRow("Favourite music genre", entry.favGenre)}
${renderRow("Favourite agent", entry.petPeeves)}
${renderRow("On Valo", entry.merzHate)}
${renderRow("IGN", entry.socialLink)}
${badgesHtml ? `<div class="entry-card__badges">${badgesHtml}</div>` : ""}
<div class="entry-card__time">${escapeHtml(new Date(entry.createdAt).toLocaleString())}</div>
<div class="admin-actions"></div>
`;
const actions = card.querySelector(".admin-actions");
if (entry.status === "pending") {
const approveBtn = document.createElement("button");
approveBtn.type = "button";
approveBtn.className = "btn-admin btn-admin--approve";
approveBtn.textContent = "Approve";
approveBtn.addEventListener("click", () => act(entry.id, "approve", card));
const denyBtn = document.createElement("button");
denyBtn.type = "button";
denyBtn.className = "btn-admin btn-admin--deny";
denyBtn.textContent = "Deny";
denyBtn.addEventListener("click", () => act(entry.id, "deny", card));
actions.append(approveBtn, denyBtn);
} else {
const removeBtn = document.createElement("button");
removeBtn.type = "button";
removeBtn.className = "btn-admin btn-admin--deny";
removeBtn.textContent = "Remove";
removeBtn.addEventListener("click", () => act(entry.id, "deny", card));
actions.append(removeBtn);
}
return card;
}
async function act(id, action, card) {
card.classList.add("is-busy");
try {
const res = await adminFetch(`/api/admin/entries/${id}/${action}`, { method: "POST" });
const data = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(data.error || "Something went wrong.");
loadEntries();
} catch (err) {
if (err.message !== "unauthorized") {
alert(err.message);
card.classList.remove("is-busy");
}
}
}
async function loadEntries() {
pendingStatus.textContent = "loading...";
approvedStatus.textContent = "loading...";
pendingGrid.innerHTML = "";
approvedGrid.innerHTML = "";
try {
const res = await adminFetch("/api/admin/entries");
if (!res.ok) throw new Error("Could not load entries.");
const entries = await res.json();
const pending = entries.filter((e) => e.status === "pending");
const approved = entries.filter((e) => e.status === "approved");
pendingStatus.textContent = pending.length
? `${pending.length} waiting for review`
: "nothing waiting — inbox zero (◡‿◡)";
approvedStatus.textContent = approved.length
? `${approved.length} live on the site`
: "no approved pages yet";
pending.forEach((entry) => pendingGrid.appendChild(renderEntry(entry)));
approved.forEach((entry) => approvedGrid.appendChild(renderEntry(entry)));
} catch (err) {
if (err.message !== "unauthorized") {
pendingStatus.textContent = "couldn't load entries. is the server running?";
approvedStatus.textContent = "";
}
}
}
// ---------------- boot ----------------
if (getPassword()) {
showAdmin();
} else {
showGate();
}
})();
+214
View File
@@ -0,0 +1,214 @@
(() => {
"use strict";
const MOODS = ["😎", "🔥", "💀", "😭", "🥲", "✨", "😤", "🖤", "🫠", "👾"];
const MAX_BADGES = 5;
// ---------------- tabs ----------------
const tabForm = document.getElementById("tab-form");
const tabGallery = document.getElementById("tab-gallery");
const panelForm = document.getElementById("panel-form");
const panelGallery = document.getElementById("panel-gallery");
function showPanel(which) {
const showForm = which === "form";
panelForm.classList.toggle("is-hidden", !showForm);
panelGallery.classList.toggle("is-hidden", showForm);
tabForm.classList.toggle("is-active", showForm);
tabGallery.classList.toggle("is-active", !showForm);
tabForm.setAttribute("aria-selected", String(showForm));
tabGallery.setAttribute("aria-selected", String(!showForm));
if (!showForm) loadEntries();
}
tabForm.addEventListener("click", () => showPanel("form"));
tabGallery.addEventListener("click", () => showPanel("gallery"));
// ---------------- mood picker ----------------
const moodPicker = document.querySelector(".mood-picker");
const moodInput = document.getElementById("mood");
MOODS.forEach((emoji, i) => {
const btn = document.createElement("button");
btn.type = "button";
btn.className = "mood-btn";
btn.textContent = emoji;
btn.setAttribute("role", "radio");
btn.setAttribute("aria-pressed", i === MOODS.length - 1 ? "true" : "false"); // default last = 🖤
btn.setAttribute("aria-label", `Mood: ${emoji}`);
btn.addEventListener("click", () => {
moodPicker.querySelectorAll(".mood-btn").forEach((b) => b.setAttribute("aria-pressed", "false"));
btn.setAttribute("aria-pressed", "true");
moodInput.value = emoji;
});
moodPicker.appendChild(btn);
});
moodInput.value = MOODS[MOODS.length - 1];
// ---------------- badge preview ----------------
const badgeInput = document.getElementById("badges");
const badgePreview = document.getElementById("badge-preview");
const formError = document.getElementById("form-error");
const formSuccess = document.getElementById("form-success");
badgeInput.addEventListener("change", () => {
badgePreview.innerHTML = "";
const files = Array.from(badgeInput.files || []);
if (files.length > MAX_BADGES) {
showError(`Please choose at most ${MAX_BADGES} images.`);
badgeInput.value = "";
return;
}
clearError();
files.forEach((file) => {
const url = URL.createObjectURL(file);
const img = document.createElement("img");
img.src = url;
img.alt = file.name;
img.onload = () => URL.revokeObjectURL(url);
badgePreview.appendChild(img);
});
});
function showError(msg) {
clearSuccess();
formError.textContent = msg;
formError.hidden = false;
}
function clearError() {
formError.hidden = true;
formError.textContent = "";
}
function showSuccess(msg) {
clearError();
formSuccess.textContent = msg;
formSuccess.hidden = false;
}
function clearSuccess() {
formSuccess.hidden = true;
formSuccess.textContent = "";
}
// ---------------- form submit ----------------
const form = document.getElementById("entry-form");
const submitBtn = document.getElementById("submit-btn");
form.addEventListener("submit", async (e) => {
e.preventDefault();
clearError();
clearSuccess();
const name = document.getElementById("name").value.trim();
if (!name) {
showError("Your Name is required.");
document.getElementById("name").focus();
return;
}
const formData = new FormData(form);
submitBtn.disabled = true;
submitBtn.querySelector("span").textContent = "ADDING...";
try {
const res = await fetch("/api/entries", { method: "POST", body: formData });
const data = await res.json().catch(() => ({}));
if (!res.ok) {
throw new Error(data.error || "Something went wrong submitting your page.");
}
form.reset();
badgePreview.innerHTML = "";
moodPicker.querySelectorAll(".mood-btn").forEach((b, i) =>
b.setAttribute("aria-pressed", i === MOODS.length - 1 ? "true" : "false")
);
moodInput.value = MOODS[MOODS.length - 1];
showSuccess("Thanks! Your page has been submitted and is waiting for approval — check back on \u201cEveryone's pages\u201d soon 💌");
} catch (err) {
showError(err.message);
} finally {
submitBtn.disabled = false;
submitBtn.querySelector("span").textContent = "ADD MY PAGE";
}
});
// ---------------- gallery ----------------
const galleryGrid = document.getElementById("gallery-grid");
const galleryStatus = document.getElementById("gallery-status");
function escapeHtml(str) {
const div = document.createElement("div");
div.textContent = str == null ? "" : String(str);
return div.innerHTML;
}
function ordinal(n) {
const s = ["th", "st", "nd", "rd"];
const v = n % 100;
return n + (s[(v - 20) % 10] || s[v] || s[0]);
}
function formatDate(ts) {
const d = new Date(ts);
const months = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December",
];
return `${ordinal(d.getDate())} ${months[d.getMonth()]} ${d.getFullYear()}`;
}
function renderRow(label, value) {
if (!value) return "";
return `<div class="entry-card__row"><span class="k">${escapeHtml(label)}</span><span class="v">${escapeHtml(value)}</span></div>`;
}
function renderCard(entry) {
const card = document.createElement("article");
card.className = "entry-card";
const badgesHtml = (entry.badges || [])
.map((src) => `<img src="${escapeHtml(src)}" alt="badge" loading="lazy" />`)
.join("");
card.innerHTML = `
<span class="entry-card__mood" aria-hidden="true">${escapeHtml(entry.mood || "🖤")}</span>
<h3 class="entry-card__name">${escapeHtml(entry.name)}</h3>
${renderRow("Fun fact", entry.funFact)}
${renderRow("Favourite colour", entry.favColor)}
${renderRow("Favourite music genre", entry.favGenre)}
${renderRow("Favourite agent", entry.petPeeves)}
${renderRow("On Valo", entry.merzHate)}
${renderRow("IGN", entry.socialLink)}
${badgesHtml ? `<div class="entry-card__badges">${badgesHtml}</div>` : ""}
<div class="entry-card__time">${escapeHtml(formatDate(entry.createdAt))}</div>
`;
return card;
}
async function loadEntries() {
galleryStatus.textContent = "flipping through pages...";
galleryGrid.innerHTML = "";
try {
const res = await fetch("/api/entries");
if (!res.ok) throw new Error("Could not load pages.");
const entries = await res.json();
if (!entries.length) {
galleryStatus.textContent = "no pages yet — be the first to sign the book!";
return;
}
galleryStatus.textContent = `${entries.length} page${entries.length === 1 ? "" : "s"} taped in so far`;
entries.forEach((entry) => galleryGrid.appendChild(renderCard(entry)));
} catch (err) {
galleryStatus.textContent = "hmm, couldn't load the pages. is the server running?";
}
}
// initial load in the background so the gallery is ready when switched to
loadEntries();
})();
+127
View File
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Val Friendbook :: Friendbook</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Chakra+Petch:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="scanlines" aria-hidden="true"></div>
<header class="hero">
<div class="hero__glitchbox">
<h1 class="glitch" data-text="NICK'S VALO FRIENDBOOK">NICK'S VALO FRIENDBOOK</h1>
</div>
<p class="hero__tagline">a friendbook for the wonderful peeps I've played with (◡‿◡)</p>
<nav class="tabs" role="tablist" aria-label="Page sections">
<button class="tab-btn is-active" id="tab-form" role="tab" aria-selected="true" aria-controls="panel-form">
<span class="tab-btn__index">01</span> THE FRIEND BOOK
</button>
<button class="tab-btn" id="tab-gallery" role="tab" aria-selected="false" aria-controls="panel-gallery">
<span class="tab-btn__index">02</span> EVERYONE'S PAGES
</button>
</nav>
</header>
<main>
<!-- ===================== FORM PANEL ===================== -->
<section id="panel-form" class="panel window" role="tabpanel" aria-labelledby="tab-form">
<div class="window__bar">
<span class="dot dot--blue"></span>
<span class="dot dot--pink"></span>
<span class="dot dot--white"></span>
<span class="window__title">the friend book</span>
</div>
<form id="entry-form" class="window__body form" novalidate>
<div class="field">
<label for="name">Your Name <span class="req">*</span></label>
<input type="text" id="name" name="name" maxlength="60" required placeholder="who is this beautiful person?" />
</div>
<div class="field">
<label for="funFact">Tell me sth interesting about you!</label>
<textarea id="funFact" name="funFact" maxlength="500" rows="3" placeholder="My hyperfixation is..., I really hate..."></textarea>
</div>
<div class="field-row">
<div class="field">
<label for="favColor">Favourite Colour</label>
<input type="text" id="favColor" name="favColor" maxlength="40" placeholder="lilablassblau" />
</div>
<div class="field">
<label for="favGenre">Favourite Music Genre <span class="hint">(I need inspo hihi)</span></label>
<input type="text" id="favGenre" name="favGenre" maxlength="100" placeholder="metalcore / hardstyle / idk" />
</div>
</div>
<div class="field">
<label for="petPeeves">Favourite Agent</label>
<textarea id="petPeeves" name="petPeeves" maxlength="300" rows="2" placeholder="Jett, Sova, Omen, Chamber...whoever's meta rn"></textarea>
</div>
<div class="field">
<label for="merzHate">What do you enjoy most about Valo?</label>
<textarea id="merzHate" name="merzHate" maxlength="400" rows="2" placeholder="clutching 1v5s, one-tapping with Vandal, screaming at teammates..."></textarea>
</div>
<div class="field">
<label for="socialLink">IGN <span class="hint">(Riot ID)</span></label>
<input type="text" id="socialLink" name="socialLink" maxlength="300" placeholder="YourName#TAG" />
</div>
<div class="field">
<label id="mood-label">Current Mood</label>
<div class="mood-picker" role="radiogroup" aria-labelledby="mood-label">
<!-- populated by app.js -->
</div>
<input type="hidden" id="mood" name="mood" value="🖤" />
</div>
<div class="field">
<label for="badges">Badges / Awards <span class="hint">(up to 5 images)</span></label>
<input type="file" id="badges" name="badges" accept="image/png, image/jpeg, image/gif, image/webp" multiple />
<div id="badge-preview" class="badge-preview" aria-live="polite"></div>
</div>
<p id="form-error" class="form-error" role="alert" hidden></p>
<p id="form-success" class="form-success" role="status" hidden></p>
<button type="submit" class="btn-submit" id="submit-btn">
<span>ADD MY PAGE</span>
</button>
</form>
</section>
<!-- ===================== GALLERY PANEL ===================== -->
<section id="panel-gallery" class="panel window is-hidden" role="tabpanel" aria-labelledby="tab-gallery">
<div class="window__bar">
<span class="dot dot--blue"></span>
<span class="dot dot--pink"></span>
<span class="dot dot--white"></span>
<span class="window__title">everyone's pages (●'◡'●)</span>
</div>
<div class="window__body">
<p id="gallery-status" class="gallery-status">loading pages_</p>
<div id="gallery-grid" class="gallery-grid"></div>
</div>
</section>
</main>
<footer class="site-footer">
<p>our little friend book q(≧▽≦q)</p>
</footer>
<script src="app.js"></script>
</body>
</html>
+618
View File
@@ -0,0 +1,618 @@
/* ============================================================
MERZ-HATER CLUB — design tokens
tactical-HUD scrapbook: void black, signal red, chamfered
panels, torn/jagged edges, chromatic-ghost display type.
built for a friend book, not a shooter menu -- so the ASCII
emotes and warm copy stay untouched underneath the armor.
void: #0a0a0d page background, recessed wells
panel: #131316 raised panel / window surface
ink: #ece7db warm bone text (was "ink")
ink-soft: #8b8b95 muted secondary text
signal: #ff3b3f primary red accent (css var --coral)
ember: #c23616 secondary rust-red (css var --tape)
maroon: #7a1d1f tertiary deep red (css var --lilac)
confirm: #5c1417 deep maroon, admin "approve" only (css var --sky)
line: #2a2a30 hairline borders
display font: Anton (title + card names only — spend it once)
tech font: Chakra Petch (labels, buttons, readouts)
body font: Rajdhani (paragraph text)
============================================================ */
:root {
--paper: #0a0a0d;
--paper-deep: #131316;
--ink: #ece7db;
--ink-soft: #8b8b95;
--lilac: #7a1d1f;
--sky: #5c1417;
--coral: #ff3b3f;
--tape: #c23616;
--line: #2a2a30;
--font-display: "Anton", sans-serif;
--font-mono: "Chakra Petch", sans-serif;
--font-body: "Rajdhani", sans-serif;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: 17px;
min-height: 100%;
}
body {
background-image:
repeating-linear-gradient(to right, rgba(236, 231, 219, 0.035) 0 1px, transparent 1px 64px),
repeating-linear-gradient(to bottom, rgba(236, 231, 219, 0.035) 0 1px, transparent 1px 64px),
radial-gradient(circle at 8% 0%, rgba(255, 59, 63, 0.14), transparent 40%),
radial-gradient(circle at 96% 12%, rgba(122, 29, 31, 0.22), transparent 45%);
background-attachment: fixed;
}
::selection { background: var(--coral); color: var(--paper); }
:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 3px;
}
a { color: var(--ink); text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--tape); }
/* faint CRT grain -- decorative, non-interactive */
.scanlines {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 50;
opacity: 0.35;
background-image: radial-gradient(rgba(255, 59, 63, 0.09) 1px, transparent 1px);
background-size: 3px 3px;
mix-blend-mode: screen;
}
/* ---------------- hero / title ---------------- */
.hero {
padding: 60px 20px 0;
text-align: center;
}
.hero__glitchbox {
display: inline-block;
position: relative;
}
.glitch {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.6rem, 9vw, 5.2rem);
line-height: 0.95;
letter-spacing: 0.01em;
margin: 0;
padding: 0.05em 0.2em;
color: var(--ink);
text-transform: uppercase;
position: relative;
z-index: 1;
animation: flicker-in 0.7s ease-out 1;
}
/* chromatic-ghost duplicates, sliced like a torn broadcast signal */
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
inset: 0;
padding: 0.05em 0.2em;
pointer-events: none;
}
.glitch::before {
color: var(--coral);
transform: translate(3px, -2px);
mix-blend-mode: screen;
opacity: 0.65;
clip-path: polygon(0 0, 100% 0, 100% 42%, 0 42%);
}
.glitch::after {
color: var(--tape);
transform: translate(-3px, 2px);
mix-blend-mode: screen;
opacity: 0.55;
clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
}
@keyframes flicker-in {
0% { opacity: 0; }
8% { opacity: 1; }
11% { opacity: 0.15; }
16% { opacity: 1; }
60% { opacity: 1; }
64% { opacity: 0.4; }
68% { opacity: 1; }
100% { opacity: 1; }
}
/* jagged red backing behind the title */
.hero__glitchbox::before {
content: "";
position: absolute;
left: -12px;
right: -12px;
bottom: 0.16em;
height: 0.46em;
background: var(--coral);
opacity: 0.16;
z-index: 0;
clip-path: polygon(
0 35%, 6% 0, 13% 42%, 20% 6%, 28% 46%, 36% 4%, 44% 42%,
52% 8%, 60% 46%, 68% 2%, 76% 42%, 84% 8%, 92% 44%, 100% 12%,
100% 100%, 0 100%
);
}
.hero__tagline {
display: inline-block;
position: relative;
margin: 24px 0 0;
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--ink-soft);
background: var(--paper-deep);
border: 1px solid var(--line);
padding: 8px 16px 8px 30px;
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
.hero__tagline::before {
content: "";
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--coral);
box-shadow: 0 0 6px 1px var(--coral);
}
/* jagged divider closing out the hero, torn black/red edge */
.hero::after {
content: "";
display: block;
height: 14px;
margin: 32px 0 0;
opacity: 0.55;
background:
linear-gradient(135deg, var(--paper) 25%, transparent 25%) -7px 0 / 14px 14px,
linear-gradient(225deg, var(--paper) 25%, transparent 25%) -7px 0 / 14px 14px,
linear-gradient(315deg, var(--paper) 25%, transparent 25%) 0 0 / 14px 14px,
linear-gradient(45deg, var(--paper) 25%, var(--coral) 25%) 0 0 / 14px 14px;
}
@media (prefers-reduced-motion: reduce) {
.glitch { animation: none; }
}
/* ---------------- tabs ---------------- */
.tabs {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
padding: 22px 0 0;
}
.tab-btn {
font-family: var(--font-mono);
background: var(--paper-deep);
color: var(--ink-soft);
border: 1px solid var(--line);
border-bottom: none;
padding: 10px 20px 8px;
cursor: pointer;
letter-spacing: 0.03em;
font-size: 0.8rem;
text-transform: uppercase;
clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-btn__index { color: var(--coral); margin-right: 6px; font-weight: 700; }
.tab-btn:hover { color: var(--ink); border-color: var(--coral); }
.tab-btn.is-active {
background: var(--paper-deep);
color: var(--ink);
border-color: var(--coral);
box-shadow: 0 -3px 0 0 var(--coral) inset;
}
.tab-btn.is-active .tab-btn__index { color: var(--coral); }
/* ---------------- window chrome (a tactical readout panel) ---------------- */
main {
max-width: 980px;
margin: 0 auto;
padding: 0 20px 60px;
}
.window {
position: relative;
background: var(--paper-deep);
border: 1px solid var(--line);
box-shadow: 10px 10px 0 0 rgba(255, 59, 63, 0.15);
margin-top: 20px;
padding-left: 26px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
#panel-gallery.window { box-shadow: 10px 10px 0 0 rgba(194, 54, 22, 0.2); }
.window.is-hidden { display: none; }
/* diagonal hazard stripe standing in for the old spiral holes */
.window::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 26px;
border-right: 1px solid var(--line);
background-image: repeating-linear-gradient(-45deg, var(--coral) 0 6px, transparent 6px 12px);
opacity: 0.3;
}
/* torn red teeth capping every panel */
.window::after {
content: "";
position: absolute;
top: -6px;
left: 0;
right: 0;
height: 6px;
background:
linear-gradient(135deg, var(--paper) 25%, transparent 25%) 0 0 / 12px 12px,
linear-gradient(225deg, var(--paper) 25%, transparent 25%) 0 0 / 12px 12px,
linear-gradient(315deg, var(--paper) 25%, transparent 25%) 6px 0 / 12px 12px,
linear-gradient(45deg, var(--paper) 25%, var(--coral) 25%) 6px 0 / 12px 12px;
}
#panel-gallery.window::after {
background:
linear-gradient(135deg, var(--paper) 25%, transparent 25%) 0 0 / 12px 12px,
linear-gradient(225deg, var(--paper) 25%, transparent 25%) 0 0 / 12px 12px,
linear-gradient(315deg, var(--paper) 25%, transparent 25%) 6px 0 / 12px 12px,
linear-gradient(45deg, var(--paper) 25%, var(--tape) 25%) 6px 0 / 12px 12px;
}
.window__bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px 10px 10px;
border-bottom: 1px solid var(--line);
background: rgba(255, 59, 63, 0.04);
}
.dot {
width: 8px;
height: 8px;
display: inline-block;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.dot--blue { background: var(--tape); }
.dot--pink { background: var(--coral); }
.dot--white { background: var(--ink-soft); }
.window__title {
margin-left: 6px;
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.window__body { padding: 28px; }
/* ---------------- form ---------------- */
.form { display: flex; flex-direction: column; gap: 20px; }
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 620px) {
.field-row { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.05em;
color: var(--ink-soft);
text-transform: uppercase;
}
.field .req { color: var(--coral); }
.field .hint { color: var(--ink-soft); text-transform: none; font-family: var(--font-body); font-style: italic; font-size: 0.8rem; }
input[type="text"],
textarea {
background: var(--paper);
border: 1px solid var(--line);
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
padding: 11px 13px;
resize: vertical;
clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]::placeholder,
textarea::placeholder { color: #55555e; font-style: normal; }
input[type="text"]:focus,
textarea:focus {
border-color: var(--coral);
outline: none;
box-shadow: 0 0 0 2px rgba(255, 59, 63, 0.22);
}
input[type="file"] {
font-family: var(--font-body);
color: var(--ink-soft);
border: 1px dashed var(--line);
padding: 14px;
background: rgba(236, 231, 219, 0.02);
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
/* mood picker */
.mood-picker {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mood-btn {
font-size: 1.25rem;
line-height: 1;
background: var(--paper);
border: 1px solid var(--line);
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mood-btn:hover { border-color: var(--coral); }
.mood-btn[aria-pressed="true"] {
border-color: var(--coral);
background: rgba(255, 59, 63, 0.14);
box-shadow: 0 0 0 1px var(--coral);
}
/* badge preview thumbnails in the form */
.badge-preview {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.badge-preview img {
width: 52px;
height: 52px;
object-fit: cover;
background: var(--paper);
padding: 3px;
border: 1px solid var(--line);
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.form-error {
color: var(--coral);
font-family: var(--font-mono);
font-size: 0.82rem;
border: 1px solid var(--coral);
padding: 9px 12px;
background: rgba(255, 59, 63, 0.08);
clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}
.form-success {
color: var(--ink);
font-family: var(--font-mono);
font-size: 0.82rem;
border: 1px solid var(--line);
padding: 9px 12px;
background: rgba(236, 231, 219, 0.04);
clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}
.btn-submit {
align-self: flex-start;
font-family: var(--font-mono);
font-weight: 700;
letter-spacing: 0.1em;
background: transparent;
color: var(--coral);
border: 2px solid var(--coral);
padding: 13px 24px;
cursor: pointer;
font-size: 0.88rem;
text-transform: uppercase;
clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
transition: background 0.12s ease, color 0.12s ease;
}
.btn-submit:hover { background: var(--coral); color: var(--paper); }
.btn-submit:active { transform: scale(0.98); }
.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
/* ---------------- gallery ---------------- */
.gallery-status {
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.03em;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 30px 22px;
padding-top: 6px;
}
.entry-card {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-left: 3px solid var(--coral);
padding: 22px 18px 16px;
display: flex;
flex-direction: column;
gap: 10px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
transition: transform 0.15s ease, border-color 0.15s ease;
}
.gallery-grid .entry-card:nth-child(3n) { border-left-color: var(--lilac); }
.gallery-grid .entry-card:nth-child(4n) { border-left-color: var(--tape); }
.entry-card:hover { transform: translateY(-3px); }
/* target-lock corner bracket, replaces the old washi tape */
.entry-card::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 20px;
height: 20px;
border-top: 2px solid var(--coral);
border-left: 2px solid var(--coral);
}
.gallery-grid .entry-card:nth-child(3n)::before { border-color: var(--lilac); }
.gallery-grid .entry-card:nth-child(4n)::before { border-color: var(--tape); }
.entry-card__mood {
position: absolute;
top: -13px;
right: -10px;
font-size: 1.2rem;
background: var(--paper);
border: 1px solid var(--coral);
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
}
.entry-card__name {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: 0.01em;
color: var(--ink);
margin: 0;
padding: 0 20px 8px 0;
border-bottom: 2px solid var(--coral);
line-height: 1.05;
}
.entry-card__row { font-size: 0.86rem; line-height: 1.45; }
.entry-card__row .k {
color: var(--coral);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.64rem;
display: block;
margin-bottom: 2px;
}
.entry-card__row .v { color: var(--ink); word-break: break-word; }
.entry-card__link { font-size: 0.85rem; word-break: break-all; }
.entry-card__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.entry-card__badges img {
width: 40px;
height: 40px;
object-fit: cover;
background: var(--paper);
padding: 2px;
border: 1px solid var(--line);
clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.entry-card__time {
margin-top: auto;
padding-top: 8px;
border-top: 1px solid var(--line);
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.03em;
text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
.entry-card,
.tab-btn,
.btn-submit,
.mood-btn,
input[type="text"],
textarea { transition: none; }
}
/* ---------------- footer ---------------- */
.site-footer {
text-align: center;
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.03em;
padding: 18px 20px 34px;
}
.site-footer p::before { content: "> "; color: var(--coral); }