zoriya/vex
1
0
Fork 0
mirror of https://github.com/zoriya/vex.git synced 2026-08-16 02:44:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Auth page is done

Browse Source
This commit is contained in:
Clément Le Bihan
2024-05-05 16:33:17 +02:00
parent ee9966d1fb
commit 625c6a67e2
1 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/auth/+page.svelte
+100
View File
@@ -0,0 +1,100 @@
<script>
import {
Label,
Input,
InputAddon,
ButtonGroup,
Button,
Heading,
Secondary,
P,
Span,
} from "flowbite-svelte";
import { EnvelopeOutline, LockOutline } from "flowbite-svelte-icons";
</script>
<div class="text-center mb-10">
<Heading
tag="h1"
class="mb-4"
customSize="text-5xl font-extrabold md:text-5xl lg:text-6xl"
>
Welcome to <Span gradient>Vex</Span>
</Heading>
<P class="mb-4 w-full text-center">The best place to share your thoughts with the world</P>
</div>
<div class="main">
<form>
<Heading tag="h3" class="mb-4">Login</Heading>
<div>
<Label for="email" class="block mb-2">Email</Label>
<ButtonGroup class="w-full">
<InputAddon>
<EnvelopeOutline class="w-4 h-4 text-gray-500 dark:text-gray-400" />
</InputAddon>
<Input id="email" type="email" placeholder="name@flowbite.com"></Input>
</ButtonGroup>
</div>
<div>
<Label for="password" class="block mb-2">Password</Label>
<ButtonGroup class="w-full">
<InputAddon>
<LockOutline class="w-4 h-4 text-gray-500 dark:text-gray-400" />
</InputAddon>
<Input id="password" type="password"></Input>
</ButtonGroup>
</div>
<div>
<Button type="submit" color="primary" class="w-full">Connect</Button>
</div>
</form>
<form>
<Heading tag="h3" class="mb-4">Welcome</Heading>
<div>
<Label for="email" class="block mb-2">Your Email</Label>
<ButtonGroup class="w-full">
<InputAddon>
<EnvelopeOutline class="w-4 h-4 text-gray-500 dark:text-gray-400" />
</InputAddon>
<Input id="email" type="email" placeholder="name@flowbite.com"></Input>
</ButtonGroup>
</div>
<div>
<Label for="password" class="block mb-2">Your Password</Label>
<ButtonGroup class="w-full">
<InputAddon>
<LockOutline class="w-4 h-4 text-gray-500 dark:text-gray-400" />
</InputAddon>
<Input id="password" type="password"></Input>
</ButtonGroup>
</div>
<div>
<Label for="password-repeat" class="block mb-2">Repeat Password</Label>
<ButtonGroup class="w-full">
<InputAddon>
<LockOutline class="w-4 h-4 text-gray-500 dark:text-gray-400" />
</InputAddon>
<Input id="password-repeat" type="password"></Input>
</ButtonGroup>
</div>
<div>
<Button type="submit" color="primary" class="w-full">Register</Button>
</div>
</form>
</div>
<style>
.main {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
form {
flex-grow: 1;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 1rem;
}
</style>