cleanup
This commit is contained in:
parent
60b5705107
commit
3955f95830
@ -11,10 +11,9 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="relative overflow-hidden">
|
||||
<!-- Hero -->
|
||||
<section class="relative overflow-hidden" aria-labelledby="hero-heading">
|
||||
<div class="mx-auto max-w-6xl px-6 py-24 text-center">
|
||||
<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
<h1 id="hero-heading" class="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
Westuffinder
|
||||
</h1>
|
||||
<p class="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
|
||||
@ -23,16 +22,24 @@
|
||||
</p>
|
||||
|
||||
<div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||||
<Button size="lg" class="px-8" onclick={openCreateDialog}>
|
||||
<Button
|
||||
size="lg"
|
||||
class="px-8"
|
||||
onclick={openCreateDialog}
|
||||
aria-label="Submit a found item"
|
||||
>
|
||||
Submit a Found Item
|
||||
</Button>
|
||||
<a href="/items" class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'px-8')}>
|
||||
<a
|
||||
href="/items"
|
||||
class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'px-8')}
|
||||
aria-label="Browse lost items"
|
||||
>
|
||||
Browse Lost Items
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subtle background accent -->
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl"
|
||||
@ -43,37 +50,59 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-6xl px-6 py-20">
|
||||
<section class="mx-auto max-w-6xl px-6 py-20" aria-labelledby="info-cards-heading">
|
||||
<h2 id="info-cards-heading" class="sr-only">Information</h2>
|
||||
<div class="grid gap-8 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Found an Item?</CardTitle>
|
||||
<CardTitle id="found-item-heading">Found an Item?</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-3 text-sm text-muted-foreground">
|
||||
<CardContent
|
||||
class="space-y-3 text-sm text-muted-foreground"
|
||||
aria-labelledby="found-item-heading"
|
||||
>
|
||||
<p>
|
||||
Turn it in digitally in less than a minute. Add a description and where you found it.
|
||||
</p>
|
||||
<Button class="mt-2 w-full" onclick={openCreateDialog}>Submit Item</Button>
|
||||
<Button
|
||||
class="mt-2 w-full"
|
||||
onclick={openCreateDialog}
|
||||
aria-label="Submit a found item"
|
||||
>
|
||||
Submit Item
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Lost Something?</CardTitle>
|
||||
<CardTitle id="lost-item-heading">Lost Something?</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-3 text-sm text-muted-foreground">
|
||||
<CardContent
|
||||
class="space-y-3 text-sm text-muted-foreground"
|
||||
aria-labelledby="lost-item-heading"
|
||||
>
|
||||
<p>
|
||||
Browse items that have been turned in by students and staff.
|
||||
</p>
|
||||
<a href="/items" class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'mt-2 w-full')}>Browse Items</a>
|
||||
<a
|
||||
href="/items"
|
||||
class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'mt-2 w-full')}
|
||||
aria-label="Browse found items"
|
||||
>
|
||||
Browse Items
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Safe & School-Run</CardTitle>
|
||||
<CardTitle id="safe-heading">Safe & School-Run</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-3 text-sm text-muted-foreground">
|
||||
<CardContent
|
||||
class="space-y-3 text-sm text-muted-foreground"
|
||||
aria-labelledby="safe-heading"
|
||||
>
|
||||
<p>
|
||||
Managed by Waukesha West staff. Items are reviewed before being listed.
|
||||
</p>
|
||||
@ -82,11 +111,16 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-6xl px-6 pb-24">
|
||||
<section class="mx-auto max-w-6xl px-6 pb-24" aria-labelledby="staff-heading">
|
||||
<h2 id="staff-heading" class="sr-only">Staff Access</h2>
|
||||
<div class="flex items-center justify-center">
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Staff only:
|
||||
<a href="/login" class="ml-1 underline underline-offset-4 hover:text-foreground">
|
||||
<a
|
||||
href="/login"
|
||||
class="ml-1 underline underline-offset-4 hover:text-foreground"
|
||||
aria-label="Admin sign in"
|
||||
>
|
||||
Admin sign in
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@ -16,39 +16,47 @@
|
||||
<div class="flex-1"></div>
|
||||
<div class="justify-center flex">
|
||||
<div class="w-full max-w-xs">
|
||||
<form class="flex flex-col gap-6" method="post">
|
||||
<form class="flex flex-col gap-6" method="post" aria-labelledby="login-heading">
|
||||
<FieldGroup>
|
||||
<div class="flex flex-col items-center gap-1 text-center">
|
||||
<h1 class="text-2xl font-bold">Login to your account</h1>
|
||||
<p class="text-muted-foreground text-sm text-balance">
|
||||
<h1 id="login-heading" class="text-2xl font-bold">Login to your account</h1>
|
||||
<p id="login-description" class="text-muted-foreground text-sm text-balance">
|
||||
Only admins need to log in.<br>Lost something? Go <a href="/" class="underline text-primary">home</a>.
|
||||
</p>
|
||||
</div>
|
||||
<Field>
|
||||
<FieldLabel for="email">Email</FieldLabel>
|
||||
<Input id="email" type="email" name="email" placeholder="m@example.com" required />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="m@example.com"
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<div class="flex items-center">
|
||||
<FieldLabel for="password">Password</FieldLabel>
|
||||
<!-- <a href="##" class="ms-auto text-sm underline-offset-4 hover:underline">-->
|
||||
<!-- Forgot your password?-->
|
||||
<!-- </a>-->
|
||||
</div>
|
||||
<Input id="password" name="password" type="password" required />
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
aria-required="true"
|
||||
aria-describedby={form?.message ? "password-error" : undefined}
|
||||
aria-invalid={form?.message ? "true" : "false"}
|
||||
/>
|
||||
{#if form?.message}
|
||||
<p class="text-error">{form.message}</p>
|
||||
<p id="password-error" class="text-error" role="alert" aria-live="assertive">
|
||||
{form.message}
|
||||
</p>
|
||||
{/if}
|
||||
</Field>
|
||||
<Field>
|
||||
<Button type="submit">Login</Button>
|
||||
<Button type="submit" aria-label="Login to your account">Login</Button>
|
||||
</Field>
|
||||
<!-- <Field>-->
|
||||
<!-- <FieldDescription class="text-center">-->
|
||||
<!-- Don't have an account?-->
|
||||
<!-- <a href="/signup" class="underline underline-offset-4">Sign up</a>-->
|
||||
<!-- </FieldDescription>-->
|
||||
<!-- </Field>-->
|
||||
</FieldGroup>
|
||||
</form>
|
||||
</div>
|
||||
@ -59,6 +67,7 @@
|
||||
<img
|
||||
src="login-hero.png"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
|
||||
/>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user