guestbook
This commit is contained in:
parent
ea82de1241
commit
8d52afbc2a
|
|
@ -6,6 +6,7 @@
|
|||
3. /dev-info
|
||||
4. /hardwa-reinfo
|
||||
5. /cv
|
||||
6. /guestbook
|
||||
============================================= */
|
||||
|
||||
/* IMPORTS */
|
||||
|
|
@ -699,4 +700,13 @@ body:has(.dev-info) .hub {
|
|||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
6. /guestbook
|
||||
============================================================ */
|
||||
.clove {
|
||||
opacity: 50%;
|
||||
color: var(--subtext-1);
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
||||
<!-- Page Title -->
|
||||
<title>Ari</title>
|
||||
<link rel="icon" type="image/png" href="/assets/media/favicon.png" />
|
||||
<link rel="stylesheet" href="/css/index.css">
|
||||
<script>try { var f = localStorage.getItem('ctpFlavor'); document.documentElement.setAttribute('data-flavor', ['mocha', 'macchiato', 'frappe', 'latte'].indexOf(f) >= 0 ? f : 'mocha'); } catch (e) { document.documentElement.setAttribute('data-flavor', 'mocha'); }</script>
|
||||
<!-- SEO Meta Tags -->
|
||||
<meta name="description" content="Personal site for Ari on git.gay/AriTheStupidCat on GitHub" />
|
||||
<meta name="keywords" content="Portfolio, Personal, Developer" />
|
||||
<meta name="author" content="Ari" />
|
||||
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="https://a.stupid.cat" />
|
||||
<!-- Alternate for mobile -->
|
||||
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://a.stupid.cat" />
|
||||
<!-- Theme Color -->
|
||||
<meta name="theme-color" content="#cba6f7" />
|
||||
<!-- Open Graph / Discord / Facebook -->
|
||||
<meta property="og:image" content="https://a.stupid.cat/assets/media/favicon.png" />
|
||||
<meta property="og:site_name" content="Ari">
|
||||
<meta property="og:title" content="Ari" />
|
||||
<meta property="og:description" content="Personal site for Ari on git.gay/AriTheStupidCat on GitHub" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://a.stupid.cat" />
|
||||
<meta property="og:locale" content="en_GB" />
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:image" content="https://a.stupid.cat/assets/media/favicon.png">
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="Ari" />
|
||||
<meta name="twitter:description" content="Personal site for Ari on git.gay/AriTheStupidCat on GitHub" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<span class="hamburger" onclick="openNav()">☰</span>
|
||||
<div id="mySidenav" class="sidenav">
|
||||
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
|
||||
<a href="/" class="active">Index</a>
|
||||
<a href="/dev-info/">Dev Info</a>
|
||||
<a href="/hardware/">Hardware</a>
|
||||
<a href="/cv/">Curriculum Vitae</a>
|
||||
<a href="/socials/">Socials</a>
|
||||
|
||||
</div>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="hub friends-wrap guestbook-wrap">
|
||||
<header class="hub-header">
|
||||
<h1>Guestbook</h1>
|
||||
<p class="tagline">Leave a little note before you go :3</p>
|
||||
<p class="clove">And thanks to <a href="https://c.stupid.cat">Clove</a> for helping me set this up and letting me steal her code xD</p>
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Sign form -->
|
||||
<form id="gb-form" class="gb-form" autocomplete="off" novalidate>
|
||||
<div class="gb-field">
|
||||
<label for="gb-name">Name</label>
|
||||
<input type="text" id="gb-name" name="name" maxlength="40" required
|
||||
placeholder="what should I call you?">
|
||||
</div>
|
||||
<div class="gb-field">
|
||||
<label for="gb-website">Website <span class="gb-optional">(optional)</span></label>
|
||||
<input type="url" id="gb-website" name="website" maxlength="200"
|
||||
placeholder="https://your-cool-site.com">
|
||||
</div>
|
||||
<div class="gb-field">
|
||||
<label for="gb-message">Message</label>
|
||||
<textarea id="gb-message" name="message" maxlength="500" rows="3" required
|
||||
placeholder="say hi!"></textarea>
|
||||
<span class="gb-counter" id="gb-counter">0 / 500</span>
|
||||
</div>
|
||||
|
||||
<!-- Honeypot: hidden from humans, bots tend to fill it. -->
|
||||
<div class="gb-hp" aria-hidden="true">
|
||||
<label for="gb-url2">Leave this empty</label>
|
||||
<input type="text" id="gb-url2" name="url2" tabindex="-1" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<!-- Turnstile widget renders here when a site key is configured. -->
|
||||
<div id="gb-turnstile" class="gb-turnstile"></div>
|
||||
|
||||
<div class="gb-actions">
|
||||
<button type="submit" id="gb-submit">Sign guestbook</button>
|
||||
<span class="gb-status" id="gb-status" role="status"></span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Entries rendered by js/guestbook.js -->
|
||||
<div id="gb-entries" class="gb-entries" aria-live="polite">
|
||||
<p class="gb-empty">Loading messages…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/index.js"></script>
|
||||
<script src="/js/flavors.js"></script>
|
||||
<script src="/js/cat.js"></script>
|
||||
<script src="/js/guestbook.js" data-api="https://guestbook.a.stupid.cat"
|
||||
data-turnstile-key="0x4AAAAAACVZgjR9UOzjriuG"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -125,5 +125,4 @@
|
|||
<script src="/js/index.js"></script>
|
||||
<script src="/js/flavors.js"></script>
|
||||
<script src="/js/cat.js"></script>
|
||||
<script src="/js/heatmap.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
(function (global) {
|
||||
"use strict";
|
||||
|
||||
/* ---- config (from the <script> data-* attributes) ---- */
|
||||
var script =
|
||||
document.currentScript ||
|
||||
document.querySelector('script[src*="guestbook.js"]');
|
||||
var API = (script && script.dataset.api) || "";
|
||||
var TURNSTILE_KEY = (script && script.dataset.turnstileKey) || "";
|
||||
|
||||
var STYLE_ID = "guestbook-styles";
|
||||
|
||||
/* ---- styles (injected, mirrors the visitor-counter.js pattern) ---- */
|
||||
function injectStyles() {
|
||||
if (document.getElementById(STYLE_ID)) return;
|
||||
var s = document.createElement("style");
|
||||
s.id = STYLE_ID;
|
||||
s.textContent = [
|
||||
".guestbook-wrap { max-width: 640px; }",
|
||||
".gb-form {",
|
||||
" display: flex; flex-direction: column; gap: 0.85rem;",
|
||||
" background: var(--surface-0); border: 1px solid var(--surface-1);",
|
||||
" border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 2rem;",
|
||||
"}",
|
||||
".gb-field { display: flex; flex-direction: column; gap: 0.3rem; position: relative; }",
|
||||
".gb-field label { font-size: 0.8rem; color: var(--subtext-0); letter-spacing: 0.03em; }",
|
||||
".gb-optional { color: var(--overlay-0); }",
|
||||
".gb-form input, .gb-form textarea {",
|
||||
" font-family: inherit; font-size: 0.95rem; color: var(--text);",
|
||||
" background: var(--mantle); border: 1px solid var(--surface-1);",
|
||||
" border-radius: 9px; padding: 0.55rem 0.7rem; width: 100%; resize: vertical;",
|
||||
" transition: border-color 0.15s ease, box-shadow 0.15s ease;",
|
||||
"}",
|
||||
".gb-form input:focus, .gb-form textarea:focus {",
|
||||
" outline: none; border-color: var(--pink);",
|
||||
" box-shadow: inset 0 0 0 1px var(--pink);",
|
||||
"}",
|
||||
".gb-counter { align-self: flex-end; font-size: 0.7rem; color: var(--overlay-0); }",
|
||||
".gb-turnstile:empty { display: none; }",
|
||||
".gb-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }",
|
||||
".gb-form button {",
|
||||
" font-family: inherit; font-size: 0.9rem; color: var(--crust);",
|
||||
" background: var(--pink); border: none; border-radius: 9px;",
|
||||
" padding: 0.55rem 1.1rem; font-weight: 700;",
|
||||
" transition: transform 0.12s ease, opacity 0.12s ease;",
|
||||
"}",
|
||||
".gb-form button:hover:not(:disabled) { transform: translateY(-1px); }",
|
||||
".gb-form button:disabled { opacity: 0.55; }",
|
||||
".gb-status { font-size: 0.82rem; color: var(--subtext-0); }",
|
||||
".gb-status.gb-err { color: var(--red); }",
|
||||
".gb-status.gb-ok { color: var(--green); }",
|
||||
/* honeypot: visually hidden but still in the DOM for bots */
|
||||
".gb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }",
|
||||
".gb-entries { display: flex; flex-direction: column; gap: 0.9rem; padding-bottom: 4.5rem; }",
|
||||
".gb-empty { color: var(--subtext-0); text-align: center; font-size: 0.9rem; }",
|
||||
".gb-entry {",
|
||||
" background: var(--surface-0); border: 1px solid var(--surface-1);",
|
||||
" border-radius: 12px; padding: 0.85rem 1rem;",
|
||||
" transition: border-color 0.15s ease, transform 0.15s ease;",
|
||||
"}",
|
||||
".gb-entry:hover { border-color: rgb(var(--accent-rgb)); transform: translateY(-2px); }",
|
||||
".gb-entry-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }",
|
||||
".gb-entry-name { font-weight: 700; color: rgb(var(--accent-rgb)); }",
|
||||
".gb-entry-name a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--overlay-1); }",
|
||||
".gb-entry-name a:hover { border-bottom-color: var(--pink); }",
|
||||
".gb-entry-time { font-size: 0.72rem; color: var(--overlay-0); margin-left: auto; }",
|
||||
".gb-entry-msg { color: var(--text); font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }",
|
||||
].join("\n");
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
|
||||
/* ---- helpers ---- */
|
||||
function esc(str) {
|
||||
return String(str == null ? "" : str)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """);
|
||||
}
|
||||
|
||||
function relTime(ts) {
|
||||
var diff = Math.floor((Date.now() - ts) / 1000);
|
||||
if (diff < 60) return "just now";
|
||||
if (diff < 3600) return Math.floor(diff / 60) + "m ago";
|
||||
if (diff < 86400) return Math.floor(diff / 3600) + "h ago";
|
||||
if (diff < 604800) return Math.floor(diff / 86400) + "d ago";
|
||||
try {
|
||||
return new Date(ts).toLocaleDateString(undefined, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
} catch (_) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function entryHTML(e) {
|
||||
var name = esc(e.name);
|
||||
var nameHTML = e.website
|
||||
? '<a href="' + esc(e.website) + '" target="_blank" rel="noopener nofollow ugc">' + name + "</a>"
|
||||
: name;
|
||||
return (
|
||||
'<div class="gb-entry">' +
|
||||
'<div class="gb-entry-head">' +
|
||||
'<span class="gb-entry-name">' + nameHTML + "</span>" +
|
||||
'<span class="gb-entry-time">' + esc(relTime(e.ts)) + "</span>" +
|
||||
"</div>" +
|
||||
'<div class="gb-entry-msg">' + esc(e.message) + "</div>" +
|
||||
"</div>"
|
||||
);
|
||||
}
|
||||
|
||||
/* ---- rendering ---- */
|
||||
var entriesEl, formEl, statusEl, submitEl, counterEl, msgEl;
|
||||
|
||||
function setStatus(text, kind) {
|
||||
if (!statusEl) return;
|
||||
statusEl.textContent = text || "";
|
||||
statusEl.className = "gb-status" + (kind ? " gb-" + kind : "");
|
||||
}
|
||||
|
||||
function renderEntries(list) {
|
||||
if (!entriesEl) return;
|
||||
if (!list || !list.length) {
|
||||
entriesEl.innerHTML = '<p class="gb-empty">No messages yet, be the first to sign!</p>';
|
||||
return;
|
||||
}
|
||||
entriesEl.innerHTML = list.map(entryHTML).join("");
|
||||
}
|
||||
|
||||
async function loadEntries() {
|
||||
if (!API) {
|
||||
renderEntries([]);
|
||||
setStatus("Guestbook API not configured yet.", "err");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
var res = await fetch(API + "/?limit=100", { method: "GET" });
|
||||
if (!res.ok) throw new Error("HTTP " + res.status);
|
||||
var data = await res.json();
|
||||
renderEntries(data.entries || []);
|
||||
} catch (err) {
|
||||
console.error("[guestbook] load failed", err);
|
||||
entriesEl.innerHTML = '<p class="gb-empty">Could not load messages right now.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Turnstile (optional) ---- */
|
||||
function turnstileToken() {
|
||||
try {
|
||||
if (global.turnstile && typeof global.turnstile.getResponse === "function") {
|
||||
return global.turnstile.getResponse() || "";
|
||||
}
|
||||
} catch (_) { }
|
||||
/* Fallback: the widget injects a hidden input named cf-turnstile-response. */
|
||||
var input = document.querySelector('[name="cf-turnstile-response"]');
|
||||
return input ? input.value : "";
|
||||
}
|
||||
|
||||
function loadTurnstile() {
|
||||
if (!TURNSTILE_KEY) return;
|
||||
var holder = document.getElementById("gb-turnstile");
|
||||
if (holder) {
|
||||
holder.className = "cf-turnstile gb-turnstile";
|
||||
holder.setAttribute("data-sitekey", TURNSTILE_KEY);
|
||||
holder.setAttribute("data-theme", "dark");
|
||||
}
|
||||
var s = document.createElement("script");
|
||||
s.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
|
||||
s.async = true;
|
||||
s.defer = true;
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
|
||||
/* ---- submit ---- */
|
||||
async function onSubmit(ev) {
|
||||
ev.preventDefault();
|
||||
if (!API) {
|
||||
setStatus("Guestbook API not configured yet.", "err");
|
||||
return;
|
||||
}
|
||||
|
||||
var payload = {
|
||||
name: formEl.name.value,
|
||||
website: formEl.website.value,
|
||||
message: formEl.message.value,
|
||||
url2: formEl.url2.value, /* honeypot */
|
||||
};
|
||||
|
||||
if (!payload.name.trim() || !payload.message.trim()) {
|
||||
setStatus("Name and message are both required.", "err");
|
||||
return;
|
||||
}
|
||||
|
||||
if (TURNSTILE_KEY) {
|
||||
var token = turnstileToken();
|
||||
if (!token) {
|
||||
setStatus("Please complete the captcha first.", "err");
|
||||
return;
|
||||
}
|
||||
payload.turnstileToken = token;
|
||||
}
|
||||
|
||||
submitEl.disabled = true;
|
||||
setStatus("Signing…");
|
||||
|
||||
try {
|
||||
var res = await fetch(API + "/", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
var data = await res.json().catch(function () { return {}; });
|
||||
if (!res.ok) {
|
||||
setStatus(data.error || "Something went wrong. Try again.", "err");
|
||||
return;
|
||||
}
|
||||
setStatus("Thanks for signing! 💕", "ok");
|
||||
formEl.reset();
|
||||
if (counterEl) counterEl.textContent = "0 / 500";
|
||||
try {
|
||||
if (global.turnstile && global.turnstile.reset) global.turnstile.reset();
|
||||
} catch (_) { }
|
||||
await loadEntries();
|
||||
} catch (err) {
|
||||
console.error("[guestbook] submit failed", err);
|
||||
setStatus("Network error, please try again.", "err");
|
||||
} finally {
|
||||
submitEl.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- init ---- */
|
||||
function init() {
|
||||
injectStyles();
|
||||
entriesEl = document.getElementById("gb-entries");
|
||||
formEl = document.getElementById("gb-form");
|
||||
statusEl = document.getElementById("gb-status");
|
||||
submitEl = document.getElementById("gb-submit");
|
||||
counterEl = document.getElementById("gb-counter");
|
||||
msgEl = document.getElementById("gb-message");
|
||||
|
||||
if (msgEl && counterEl) {
|
||||
var update = function () {
|
||||
counterEl.textContent = msgEl.value.length + " / 500";
|
||||
};
|
||||
msgEl.addEventListener("input", update);
|
||||
update();
|
||||
}
|
||||
|
||||
if (formEl) formEl.addEventListener("submit", onSubmit);
|
||||
|
||||
loadTurnstile();
|
||||
loadEntries();
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
|
||||
global.Guestbook = { reload: loadEntries };
|
||||
})(typeof window !== "undefined" ? window : this);
|
||||
Loading…
Reference in New Issue