79 lines
2.6 KiB
XML
79 lines
2.6 KiB
XML
import { LayoutFragment } from "../../shared/ui/fragments.tsx";
|
|
|
|
export const EventJoinPageFragment = () => {
|
|
return (
|
|
<LayoutFragment title="Join Event">
|
|
<div class="auth-card">
|
|
<div class="brand-header">
|
|
<div
|
|
class="brand-logo"
|
|
style="background: var(--primary-light); color: var(--primary);"
|
|
>
|
|
<svg
|
|
width="26"
|
|
height="26"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z">
|
|
</path>
|
|
<path d="M13 5v2"></path>
|
|
<path d="M13 17v2"></path>
|
|
<path d="M13 11v2"></path>
|
|
</svg>
|
|
</div>
|
|
<h1>Join Event or Workshop</h1>
|
|
<p class="subtitle">
|
|
Enter your event PIN code or slug to claim an instant sandbox seat.
|
|
</p>
|
|
</div>
|
|
|
|
<form id="joinForm" data-on-submit="@post('/api/join')">
|
|
<div style="margin-bottom: 1.25rem;">
|
|
<label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
|
|
Event PIN or Slug Code
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="code"
|
|
id="eventCode"
|
|
placeholder="e.g. 749-123 or deno-lab"
|
|
required
|
|
autofocus
|
|
style="width: 100%; font-size: 1.1rem; text-align: center; letter-spacing: 0.05em; font-weight: 600; min-height: 48px;"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
id="joinNotice"
|
|
style="display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.9rem;"
|
|
/>
|
|
|
|
<button
|
|
type="submit"
|
|
id="joinBtn"
|
|
class="btn-primary"
|
|
style="width: 100%; min-height: 48px; font-size: 1rem;"
|
|
>
|
|
⚡ Enter Workshop
|
|
</button>
|
|
</form>
|
|
|
|
<div style="margin-top: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--text-muted);">
|
|
Looking for standard sign in?{" "}
|
|
<a
|
|
href="/login"
|
|
style="color: var(--primary); text-decoration: none; font-weight: 600;"
|
|
>
|
|
Sign in with Passkey
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</LayoutFragment>
|
|
);
|
|
};
|