Hi, I'm using whatsapp.
This commit is contained in:
commit
be01fa5299
12 files changed
+2462
No files matched your search
@@ -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;
|
||||
}
|
||||
@@ -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
@@ -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
@@ -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();
|
||||
})();
|
||||
@@ -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>
|
||||
@@ -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); }
|
||||
Reference in new issue
Block a user