mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-08-05 05:05:17 +02:00
chore: Update login and signup pages with background images
This commit is contained in:
Sean Morley
parent
c9464a220c
commit
1ccf582b85
2 changed files with 93 additions and 74 deletions
|
|
@ -1,4 +1,3 @@
|
||||||
<!-- routes/login/+page.svelte -->
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { enhance } from "$app/forms";
|
import { enhance } from "$app/forms";
|
||||||
import { goto } from "$app/navigation";
|
import { goto } from "$app/navigation";
|
||||||
|
|
@ -7,9 +6,12 @@
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
let quote: string = "";
|
let quote: string = "";
|
||||||
let errors: { message?: string } = {};
|
let errors: { message?: string } = {};
|
||||||
|
let backgroundImageUrl = "https://source.unsplash.com/random/?mountains";
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
quote = getRandomQuote();
|
quote = getRandomQuote();
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleSubmit: SubmitFunction = async ({ formData, action, cancel }) => {
|
const handleSubmit: SubmitFunction = async ({ formData, action, cancel }) => {
|
||||||
const response = await fetch(action, {
|
const response = await fetch(action, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
|
|
@ -31,42 +33,49 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<article class="text-center text-4xl font-extrabold">
|
<div
|
||||||
<h1>Sign in</h1>
|
class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
|
||||||
</article>
|
style="background-image: url('{backgroundImageUrl}')"
|
||||||
|
>
|
||||||
|
<div class="card card-compact w-96 bg-base-100 shadow-xl p-6">
|
||||||
|
<article class="text-center text-4xl font-extrabold">
|
||||||
|
<h1>Sign in</h1>
|
||||||
|
</article>
|
||||||
|
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<form method="post" use:enhance={handleSubmit} class="w-full max-w-xs">
|
<form method="post" use:enhance={handleSubmit} class="w-full max-w-xs">
|
||||||
<label for="username">Username</label>
|
<label for="username">Username</label>
|
||||||
<input
|
<input
|
||||||
name="username"
|
name="username"
|
||||||
id="username"
|
id="username"
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||||
/><br />
|
/><br />
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
name="password"
|
name="password"
|
||||||
id="password"
|
id="password"
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||||
/><br />
|
/><br />
|
||||||
<button class="py-2 px-4 btn btn-primary">Login</button>
|
<button class="py-2 px-4 btn btn-primary">Login</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if errors.message}
|
{#if errors.message}
|
||||||
<div class="text-center text-error mt-4">
|
<div class="text-center text-error mt-4">
|
||||||
{errors.message}
|
{errors.message}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="flex justify-center mt-12 mr-25 ml-25">
|
|
||||||
<blockquote class="w-80 text-center text-lg break-words">
|
|
||||||
{#if quote != ""}
|
|
||||||
{quote}
|
|
||||||
{/if}
|
{/if}
|
||||||
<!-- <footer class="text-sm">- Steve Jobs</footer> -->
|
|
||||||
</blockquote>
|
<div class="flex justify-center mt-12 mr-25 ml-25">
|
||||||
|
<blockquote class="w-80 text-center text-lg break-words">
|
||||||
|
{#if quote != ""}
|
||||||
|
{quote}
|
||||||
|
{/if}
|
||||||
|
<!-- <footer class="text-sm">- Steve Jobs</footer> -->
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
|
||||||
|
|
@ -3,54 +3,64 @@
|
||||||
import { enhance } from "$app/forms";
|
import { enhance } from "$app/forms";
|
||||||
import { getRandomQuote } from "$lib";
|
import { getRandomQuote } from "$lib";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
let backgroundImageUrl = "https://source.unsplash.com/random/?mountains";
|
||||||
|
|
||||||
let quote: string = "";
|
let quote: string = "";
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
quote = getRandomQuote();
|
quote = getRandomQuote();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<article class="text-center text-4xl font-extrabold">
|
<div
|
||||||
<h1>Signup</h1>
|
class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
|
||||||
</article>
|
style="background-image: url('{backgroundImageUrl}')"
|
||||||
|
>
|
||||||
|
<div class="card card-compact w-96 bg-base-100 shadow-xl p-6">
|
||||||
|
<article class="text-center text-4xl font-extrabold">
|
||||||
|
<h1>Signup</h1>
|
||||||
|
</article>
|
||||||
|
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<form method="post" use:enhance class="w-full max-w-xs">
|
<form method="post" use:enhance class="w-full max-w-xs">
|
||||||
<label for="username">Username</label>
|
<label for="username">Username</label>
|
||||||
<input
|
<input
|
||||||
name="username"
|
name="username"
|
||||||
id="username"
|
id="username"
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||||
/><br />
|
/><br />
|
||||||
<label for="first_name">First Name</label>
|
<label for="first_name">First Name</label>
|
||||||
<input
|
<input
|
||||||
name="first_name"
|
name="first_name"
|
||||||
id="first_name"
|
id="first_name"
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||||
/><br />
|
/><br />
|
||||||
<label for="last_name">Last Name</label>
|
<label for="last_name">Last Name</label>
|
||||||
<input
|
<input
|
||||||
name="last_name"
|
name="last_name"
|
||||||
id="last_name"
|
id="last_name"
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||||
/><br />
|
/><br />
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
name="password"
|
name="password"
|
||||||
id="password"
|
id="password"
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||||
/><br />
|
/><br />
|
||||||
<button class="py-2 px-4 btn btn-primary">Signup</button>
|
<button class="py-2 px-4 btn btn-primary">Signup</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-center mt-12 mr-25 ml-25">
|
<div class="flex justify-center mt-12 mr-25 ml-25">
|
||||||
<blockquote class="w-80 text-center text-lg break-words">
|
<blockquote class="w-80 text-center text-lg break-words">
|
||||||
{#if quote != ""}
|
{#if quote != ""}
|
||||||
{quote}
|
{quote}
|
||||||
{/if}
|
{/if}
|
||||||
<!-- <footer class="text-sm">- Steve Jobs</footer> -->
|
<!-- <footer class="text-sm">- Steve Jobs</footer> -->
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- username first last pass -->
|
<!-- username first last pass -->
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue