import live www.sillylaird.ca webrootHEADmain

1 files changed, 182 insertions, 0 deletions

diff --git a/guestbook-form.php b/guestbook-form.php
new file mode 100644
index 0000000..1b69614
--- /dev/null
+++ b/guestbook-form.php
@@ -0,0 +1,182 @@
+<?php $light = isset($_GET['theme']) && $_GET['theme'] === 'light'; ?>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Guestbook Form — SillyLaird</title>
+    <link rel="stylesheet" href="https://www.sillylaird.ca/assets/css/fonts.css" />
+    <link rel="stylesheet" href="https://guestbook.sillylaird.ca/style.css?v=1.2">
+    <style>
+        :root {
+            --bg: <?= $light ? '#fff8f1' : '#000000' ?>;
+            --surface: <?= $light ? '#ffffff' : '#000000' ?>;
+            --ink: <?= $light ? '#2a1212' : '#8b0000' ?>;
+            --muted: <?= $light ? '#7a4545' : '#4a0000' ?>;
+            --border: <?= $light ? '#e8c8c8' : '#3a0000' ?>;
+            --accent: <?= $light ? '#8b0000' : '#8b0000' ?>;
+            --accent-hover: <?= $light ? '#5a0000' : '#5a0000' ?>;
+            --control-shadow: <?= $light ? '0 0 0 1px rgba(255, 255, 255, .9), 0 0 16px rgba(139, 0, 0, .36)' : 'none' ?>;
+            --control-shadow-focus: <?= $light ? '0 0 0 1px rgba(255, 255, 255, 1), 0 0 22px rgba(139, 0, 0, .36)' : 'none' ?>;
+            --focus-border: <?= $light ? '#8b0000' : '#3a0000' ?>;
+            --font-mono: "JetBrains Mono", "Source Code Pro", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+        }
+
+        html,
+        body {
+            background-color: var(--bg) !important;
+            margin: 0;
+            padding: 0;
+            color: var(--ink) !important;
+            width: 100%;
+            height: 100%;
+            font-family: var(--font-mono);
+            font-size: 16px;
+            line-height: 1.5;
+            overflow: hidden;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        form {
+            width: 100%;
+            height: 100%;
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            background-color: var(--bg) !important;
+        }
+
+        .field-group {
+            width: 100%;
+        }
+
+        .textarea-group {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0;
+        }
+
+        input[type="text"],
+        textarea {
+            width: 100% !important;
+            background-color: var(--surface) !important;
+            border: 1px solid var(--border) !important;
+            color: var(--ink) !important;
+            padding: 12px !important;
+            font-size: 16px !important;
+            font-family: var(--font-mono) !important;
+            box-shadow: var(--control-shadow);
+        }
+
+        textarea {
+            flex: 1;
+            line-height: 1.4 !important;
+            resize: none;
+        }
+
+        input::placeholder,
+        textarea::placeholder {
+            color: var(--muted) !important;
+            opacity: 0.72;
+        }
+
+        input[type="text"]:focus,
+        textarea:focus {
+            background-color: var(--surface) !important;
+            color: var(--ink) !important;
+            border-color: var(--focus-border) !important;
+            box-shadow: var(--control-shadow-focus);
+            outline: none;
+        }
+
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:focus,
+        textarea:-webkit-autofill {
+            -webkit-text-fill-color: var(--ink) !important;
+            -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
+            box-shadow: 0 0 0 1000px var(--surface) inset !important;
+            caret-color: var(--ink) !important;
+        }
+
+        .captcha-wrap {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .captcha-img {
+            max-width: 150px;
+            height: 50px;
+            background-color: var(--surface) !important;
+            border: 1px solid var(--border) !important;
+            box-shadow: var(--control-shadow);
+        }
+
+        .captcha-wrap input {
+            flex: 1;
+            height: 50px;
+        }
+
+        .form-actions {
+            width: 100%;
+        }
+
+        button[type="submit"] {
+            width: 100% !important;
+            padding: 16px !important;
+            font-size: 18px !important;
+            font-weight: bold !important;
+            cursor: pointer;
+            background-color: var(--accent) !important;
+            color: <?= $light ? '#ffffff' : 'var(--bg)' ?> !important;
+            border: 1px solid var(--border) !important;
+            box-shadow: var(--control-shadow);
+            transition: background-color 0.15s, box-shadow 0.15s;
+        }
+
+        button[type="submit"]:hover {
+            background-color: var(--accent-hover) !important;
+        }
+
+        body::-webkit-scrollbar {
+            display: block;
+            width: 8px;
+        }
+
+        body::-webkit-scrollbar-thumb {
+            background: var(--border);
+            border-radius: 4px;
+        }
+    </style>
+</head>
+
+<body>
+
+    <form action="https://guestbook.sillylaird.ca/submit.php" method="post">
+        <div class="field-group">
+            <input type="text" name="name" placeholder="Your Name" maxlength="100" required aria-label="Your Name">
+        </div>
+
+        <div class="field-group textarea-group">
+            <textarea name="message" placeholder="Your Message" required aria-label="Your Message"></textarea>
+        </div>
+
+        <div class="captcha-wrap">
+            <img src="https://guestbook.sillylaird.ca/captcha.php<?= $light ? '?theme=light' : '' ?>" alt="CAPTCHA" class="captcha-img" loading="lazy">
+            <input type="text" name="captcha" placeholder="Enter the code pulse" required aria-label="CAPTCHA code">
+        </div>
+
+        <div class="form-actions">
+            <button type="submit">Sign Guestbook</button>
+        </div>
+    </form>
+</body>
+
+</html>