First commit

1 files changed, 91 insertions, 0 deletions

diff --git a/assets/js/pages/guestbook_zh.js b/assets/js/pages/guestbook_zh.js
new file mode 100644
index 0000000..5f3a055
--- /dev/null
+++ b/assets/js/pages/guestbook_zh.js
@@ -0,0 +1,91 @@
+document.addEventListener("DOMContentLoaded", function () {
+      const form = document.getElementById("guestbook-form");
+      const entriesContainer = document.getElementById("guestbook-entries");
+      const captchaCanvas = document.getElementById("captcha-canvas");
+      const refreshCaptchaButton = document.getElementById("refresh-captcha");
+      const captchaInput = document.getElementById("captcha-input");
+      const GUESTBOOK_KEY = "guestbookEntries";
+
+      let currentCaptcha = "";
+
+      function generateCaptcha() {
+        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        let captcha = "";
+        for (let i = 0; i < 6; i++) captcha += chars.charAt(Math.floor(Math.random() * chars.length));
+        return captcha;
+      }
+
+      function drawCaptcha(captcha) {
+        const ctx = captchaCanvas.getContext("2d");
+        ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height);
+        ctx.font = "22px Arial";
+        ctx.fillStyle = "#000";
+        ctx.fillText(captcha, 10, 32);
+      }
+
+      function refreshCaptcha() {
+        currentCaptcha = generateCaptcha();
+        drawCaptcha(currentCaptcha);
+      }
+
+      function formatMessage(message) {
+        return message
+          .split("\n")
+          .map((line) => {
+            if (line.startsWith(">")) return `<span class="anonymous">${line}</span>`;
+            return line;
+          })
+          .join("<br>");
+      }
+
+      function loadEntries() {
+        const entries = JSON.parse(localStorage.getItem(GUESTBOOK_KEY)) || [];
+        entriesContainer.innerHTML = "";
+
+        entries
+          .slice()
+          .reverse()
+          .forEach((entry) => {
+            const entryElement = document.createElement("div");
+            entryElement.className = "entry";
+
+            const nameElement = document.createElement("h4");
+            if (entry.name === "Anonymous") nameElement.className = "anonymous";
+            nameElement.textContent = entry.name;
+            entryElement.appendChild(nameElement);
+
+            const messageElement = document.createElement("p");
+            messageElement.innerHTML = formatMessage(entry.message);
+            entryElement.appendChild(messageElement);
+
+            entriesContainer.appendChild(entryElement);
+          });
+      }
+
+      form.addEventListener("submit", function (event) {
+        event.preventDefault();
+
+        let name = document.getElementById("name").value.trim();
+        if (!name) name = "Anonymous";
+
+        const message = document.getElementById("message").value.trim();
+        const captchaValue = captchaInput.value.trim();
+
+        if (name && message && captchaValue === currentCaptcha) {
+          const entries = JSON.parse(localStorage.getItem(GUESTBOOK_KEY)) || [];
+          entries.push({ name, message });
+          localStorage.setItem(GUESTBOOK_KEY, JSON.stringify(entries));
+
+          form.reset();
+          document.getElementById("name").value = "Anonymous";
+          loadEntries();
+          refreshCaptcha();
+        } else {
+          alert("CAPTCHA is incorrect. Please try again.");
+        }
+      });
+
+      refreshCaptcha();
+      refreshCaptchaButton.addEventListener("click", refreshCaptcha);
+      loadEntries();
+    });