diff options
Diffstat (limited to '')
| -rw-r--r-- | guestbook-form.php | 182 |
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> |