import live www.sillylaird.ca webrootHEADmain

1 files changed, 168 insertions, 0 deletions

diff --git a/guestbook.php b/guestbook.php
new file mode 100644
index 0000000..bbcc4b4
--- /dev/null
+++ b/guestbook.php
@@ -0,0 +1,168 @@
+<?php
+require_once __DIR__ . '/partials/i18n.php';
+
+$lang   = _i18n_lang();
+$suffix = ['en' => '', 'ja' => '_jp', 'zh' => '_zh'][$lang];
+$h      = fn(string $k) => htmlspecialchars(t($k), ENT_QUOTES, 'UTF-8');
+
+// EN serves the shared/iframe flow; JP/ZH serve the localStorage-only flow
+// with the red theme. Two real layouts behind one PHP entry point.
+$isShared = ($lang === 'en');
+
+$titleKey    = $isShared ? 'guestbook.title'    : 'guestbook.local_title';
+$descKey     = $isShared ? 'guestbook.desc'     : 'guestbook.local_desc';
+$h1Key       = $isShared ? 'guestbook.h1'       : 'guestbook.local_h1';
+$subtitleKey = $isShared ? 'guestbook.subtitle' : 'guestbook.local_subtitle';
+?>
+<!doctype html>
+<html lang="<?= ['en'=>'en','ja'=>'ja','zh'=>'zh'][$lang] ?>">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title><?= $h($titleKey) ?></title>
+  <?php $meta = ['lang'=>$lang, 'title'=>t($titleKey), 'desc'=>t($descKey), 'base'=>'guestbook']; include __DIR__ . '/partials/head_meta.php'; ?>
+
+  <link rel="stylesheet" href="assets/css/fonts.css" />
+  <link rel="stylesheet" href="assets/css/site.css" />
+  <link rel="stylesheet" href="assets/css/skeleton.css" />
+
+<?php if (!$isShared): ?>
+  <link rel="stylesheet" href="/assets/css/pages/guestbook<?= $suffix ?>.css" />
+  <style>
+    :root {
+      --bg: #000000;
+      --ink: #cc0000;
+      --border: #2a1010;
+    }
+
+    html,
+    body {
+      background-color: var(--bg) !important;
+      background: var(--bg) !important;
+      color: var(--ink) !important;
+    }
+
+    * {
+      background-color: transparent !important;
+      color: inherit;
+    }
+
+    input,
+    textarea,
+    button,
+    .guestbook-entry {
+      background-color: var(--bg) !important;
+      border: 1px solid var(--border) !important;
+      color: var(--ink) !important;
+    }
+
+    body.light-mode {
+      --bg: #fff8f1;
+      --ink: #2a1212;
+      --muted: #7a4545;
+      --accent: #8b0000;
+      --gold: #8b0000;
+      --border: #e8c8c8;
+    }
+
+    body.light-mode,
+    body.light-mode section,
+    body.light-mode form,
+    body.light-mode #guestbook-entries {
+      background-color: var(--bg) !important;
+      background: var(--bg) !important;
+      color: var(--ink) !important;
+    }
+
+    body.light-mode input,
+    body.light-mode textarea,
+    body.light-mode button,
+    body.light-mode .guestbook-entry,
+    body.light-mode .captcha-img {
+      background-color: #ffffff !important;
+      border-color: var(--border) !important;
+      color: var(--ink) !important;
+      box-shadow:
+        0 0 0 1px rgba(255, 255, 255, .95),
+        0 0 18px rgba(139, 0, 0, .32);
+    }
+
+    body.light-mode button:hover {
+      background-color: var(--accent) !important;
+      color: #ffffff !important;
+    }
+  </style>
+<?php endif; ?>
+</head>
+
+<body>
+  <a class="skip-link" href="#main"><?= $h('common.skip') ?></a>
+  <?php include 'partials/header.php'; ?>
+
+  <main id="main" class="wrap">
+    <section aria-labelledby="guestbook-title">
+      <h1 id="guestbook-title"><?= $h($h1Key) ?></h1>
+      <p class="muted"><?= $h($subtitleKey) ?></p>
+
+<?php if ($isShared): ?>
+      <div class="sefd85b92cb">
+        <div>
+          <p>
+            <button class="reset-button" id="guestbook-reset" data-reset-iframe="guestbook-form" type="button"><?= $h('guestbook.reset_form') ?></button>
+          </p>
+          <div class="iframe-clip">
+            <iframe src="https://guestbook.sillylaird.ca/form.php" id="guestbook-form-iframe"
+              data-iframe="guestbook-form" title="<?= $h('guestbook.iframe_form') ?>"
+              class="s0b3fba4969 guestbook-form-frame"></iframe>
+          </div>
+        </div>
+
+        <div class="see3e7269f8">
+          <p>
+            <button class="reset-button" id="guestbook-comments-reset" data-reset-iframe="guestbook-comments"
+              type="button"><?= $h('guestbook.reset_comments') ?></button>
+          </p>
+          <div class="iframe-clip">
+            <iframe src="https://guestbook.sillylaird.ca/guestbook-comments.php" id="guestbook-comments-iframe"
+              data-iframe="guestbook-comments" title="<?= $h('guestbook.iframe_comments') ?>"></iframe>
+          </div>
+        </div>
+      </div>
+<?php else: ?>
+      <form id="guestbook-form" class="stack">
+        <div class="field-group">
+          <label for="name"><?= $h('guestbook.label_name') ?></label>
+          <input type="text" id="name" name="name" value="Anonymous" />
+        </div>
+
+        <div class="field-group">
+          <label for="message"><?= $h('guestbook.label_message') ?></label>
+          <textarea id="message" name="message" rows="4"></textarea>
+        </div>
+
+        <div class="captcha-wrap">
+          <label for="captcha-input"><?= $h('guestbook.label_captcha') ?></label>
+          <canvas id="captcha-canvas" width="160" height="48" class="captcha-img"></canvas>
+          <input type="text" id="captcha-input" name="captcha-input" placeholder="<?= $h('guestbook.captcha_ph') ?>" />
+        </div>
+
+        <div class="btn-row stack" style="flex-direction: row; gap: var(--space-md);">
+          <button type="button" id="refresh-captcha"><?= $h('guestbook.refresh_captcha') ?></button>
+          <button type="submit" class="button-primary"><?= $h('guestbook.submit') ?></button>
+        </div>
+      </form>
+
+      <div id="guestbook-entries" aria-live="polite"></div>
+<?php endif; ?>
+    </section>
+  </main>
+
+  <?php include 'partials/footer.php'; ?>
+
+<?php if (!$isShared): ?>
+  <script defer src="/assets/js/pages/guestbook<?= $suffix ?>.js"></script>
+<?php endif; ?>
+</body>
+
+</html>