zias/serengo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add:background to login

Browse Source
This commit is contained in:
ッ
2025-10-03 16:31:15 +02:00
parent 101b6cf49c
commit d8aa99e18f
3 changed files with 72 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/routes/login-03/+page.svelte
View File

@@ -1,18 +0,0 @@
<script lang="ts">
import LoginForm from '$lib/components/login-form.svelte';
import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
</script>
<div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
<div class="flex w-full max-w-sm flex-col gap-6">
<a href="##" class="flex items-center gap-2 self-center font-medium">
<div
class="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground"
>
<GalleryVerticalEndIcon class="size-4" />
</div>
Acme Inc.
</a>
<LoginForm />
</div>
</div>

78
src/routes/login/+page.svelte
View File

@@ -1,60 +1,38 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { Input, Button, ErrorMessage } from '$lib';
import LoginForm from '$lib/components/login-form.svelte';
import type { ActionData } from './$types';
let { form }: { form: ActionData } = $props();
</script>
<div class="login-container">
<h1 class="login-title">Serengo</h1>
<div class="login-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div class="flex w-full max-w-sm flex-col gap-6">
<LoginForm {form} />
</div>
<form class="login-form" method="post" action="?/login" use:enhance>
<Input name="username" type="text" placeholder="Username" required />
<style>
.login-background {
background-image: url('/cafe-bg.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
<Input name="password" type="password" placeholder="Password" required />
.login-background::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
<div class="button-group">
<Button type="submit" variant="primary">Login</Button>
<Button type="submit" variant="primary" formaction="?/register">Register</Button>
</div>
<ErrorMessage message={form?.message} />
</form>
.login-background > div {
position: relative;
z-index: 2;
}
</style>
</div>
<style>
.login-container {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 4rem 2rem;
background-color: #f8f8f8;
align-items: center;
justify-content: center;
max-width: 400px;
margin: 0 auto;
}
.login-title {
font-family: 'Washington', serif;
font-size: 3.5rem;
color: #000000;
margin-bottom: 2rem;
text-align: center;
font-weight: normal;
letter-spacing: -0.02em;
}
.login-form {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.5rem;
}
.button-group {
display: flex;
gap: 1rem;
}
</style>