dev #60
+148
-92
@@ -32,107 +32,114 @@ const errorMsg = errorParam ? (errorMessages[errorParam] ?? decodeURIComponent(e
|
||||
</header>
|
||||
|
||||
<!-- Submission form -->
|
||||
<section class="card form-section" aria-labelledby="form-heading">
|
||||
<h2 id="form-heading">Leave a message</h2>
|
||||
<p class="form-note">
|
||||
Messages are reviewed before being published. Please don't include personal or
|
||||
sensitive information — this is a public guestbook.
|
||||
</p>
|
||||
<section class="card form-section" aria-label="Leave a message">
|
||||
<details class="compose" open={submitted || Boolean(errorMsg)}>
|
||||
<summary class="compose-toggle">
|
||||
<span class="compose-toggle-text">Leave a message</span>
|
||||
</summary>
|
||||
|
||||
{submitted && (
|
||||
<div class="alert alert-success" role="alert">
|
||||
Thank you for your message! It will appear here once reviewed.
|
||||
</div>
|
||||
)}
|
||||
<div class="compose-body">
|
||||
<p class="form-note">
|
||||
Messages are reviewed before being published. Please don't include personal or
|
||||
sensitive information — this is a public guestbook.
|
||||
</p>
|
||||
|
||||
{errorMsg && (
|
||||
<div class="alert alert-error" role="alert">
|
||||
{errorMsg}
|
||||
</div>
|
||||
)}
|
||||
{submitted && (
|
||||
<div class="alert alert-success" role="alert">
|
||||
Thank you for your message! It will appear here once reviewed.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form
|
||||
method="post"
|
||||
action="/api/guestbook/submit"
|
||||
class="guestbook-form"
|
||||
novalidate
|
||||
>
|
||||
<!-- Honeypot field: hidden from real users, filled by bots -->
|
||||
<div class="hp-field" aria-hidden="true">
|
||||
<label for="address">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
id="address"
|
||||
name="address"
|
||||
tabindex="-1"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
{errorMsg && (
|
||||
<div class="alert alert-error" role="alert">
|
||||
{errorMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="field">
|
||||
<label for="display_name">
|
||||
Name or nickname <span class="required" aria-label="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="display_name"
|
||||
name="display_name"
|
||||
maxlength="60"
|
||||
required
|
||||
autocomplete="nickname"
|
||||
placeholder="your name or alias"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
method="post"
|
||||
action="/api/guestbook/submit"
|
||||
class="guestbook-form"
|
||||
novalidate
|
||||
>
|
||||
<!-- Honeypot field: hidden from real users, filled by bots -->
|
||||
<div class="hp-field" aria-hidden="true">
|
||||
<label for="address">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
id="address"
|
||||
name="address"
|
||||
tabindex="-1"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="message">
|
||||
Message <span class="required" aria-label="required">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
maxlength="1000"
|
||||
required
|
||||
rows="4"
|
||||
placeholder="say hello, share a thought, leave a trail..."
|
||||
></textarea>
|
||||
<span class="field-hint">Plain text only. Max 1000 characters.</span>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="display_name">
|
||||
Name or nickname <span class="required" aria-label="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="display_name"
|
||||
name="display_name"
|
||||
maxlength="60"
|
||||
required
|
||||
autocomplete="nickname"
|
||||
placeholder="your name or alias"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="website">
|
||||
Website <span class="optional">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="website"
|
||||
name="website"
|
||||
maxlength="200"
|
||||
autocomplete="url"
|
||||
placeholder="https://your-site.example"
|
||||
/>
|
||||
<span class="field-hint">Only https:// links. Leave blank if you don't have one.</span>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="message">
|
||||
Message <span class="required" aria-label="required">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
maxlength="1000"
|
||||
required
|
||||
rows="4"
|
||||
placeholder="say hello, share a thought, leave a trail..."
|
||||
></textarea>
|
||||
<span class="field-hint">Plain text only. Max 1000 characters.</span>
|
||||
</div>
|
||||
|
||||
<div class="field consent-field">
|
||||
<label class="consent-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="consent"
|
||||
value="yes"
|
||||
required
|
||||
/>
|
||||
<span>
|
||||
I understand this message may be published publicly on this guestbook.
|
||||
<span class="required" aria-label="required">*</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="website">
|
||||
Website <span class="optional">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="website"
|
||||
name="website"
|
||||
maxlength="200"
|
||||
autocomplete="url"
|
||||
placeholder="https://your-site.example"
|
||||
/>
|
||||
<span class="field-hint">Only https:// links. Leave blank if you don't have one.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn-submit">send message</button>
|
||||
<div class="field consent-field">
|
||||
<label class="consent-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="consent"
|
||||
value="yes"
|
||||
required
|
||||
/>
|
||||
<span>
|
||||
I understand this message may be published publicly on this guestbook.
|
||||
<span class="required" aria-label="required">*</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn-submit">send message</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- Approved entries -->
|
||||
@@ -245,6 +252,55 @@ const errorMsg = errorParam ? (errorMessages[errorParam] ?? decodeURIComponent(e
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.compose {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.compose-toggle {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--color-accent-bright);
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--space-sm);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.compose-toggle::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compose-toggle:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.compose-toggle::before {
|
||||
content: '+';
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
border: 1px solid var(--color-accent);
|
||||
border-radius: 4px;
|
||||
color: var(--color-accent);
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.compose[open] .compose-toggle::before {
|
||||
content: '−';
|
||||
}
|
||||
|
||||
.compose-body {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.guestbook-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user