mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-22 14:29:36 +02:00
New login screen with featured images
This commit is contained in:
parent
792d9bcda2
commit
c084f348d9
7 changed files with 105 additions and 49 deletions
|
@ -1,4 +1,5 @@
|
||||||
import inspirationalQuotes from './json/quotes.json';
|
import inspirationalQuotes from './json/quotes.json';
|
||||||
|
import randomBackgrounds from './json/backgrounds.json';
|
||||||
import type { Adventure, Checklist, Collection, Note, Transportation, User } from './types';
|
import type { Adventure, Checklist, Collection, Note, Transportation, User } from './types';
|
||||||
|
|
||||||
export function getRandomQuote() {
|
export function getRandomQuote() {
|
||||||
|
@ -6,7 +7,7 @@ export function getRandomQuote() {
|
||||||
const randomIndex = Math.floor(Math.random() * quotes.length);
|
const randomIndex = Math.floor(Math.random() * quotes.length);
|
||||||
let quoteString = quotes[randomIndex].quote;
|
let quoteString = quotes[randomIndex].quote;
|
||||||
let authorString = quotes[randomIndex].author;
|
let authorString = quotes[randomIndex].author;
|
||||||
return '"' + quoteString + '" - ' + authorString;
|
return { quote: quoteString, author: authorString };
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getFlag(size: number, country: string) {
|
export function getFlag(size: number, country: string) {
|
||||||
|
@ -274,3 +275,8 @@ export function isAdventureVisited(adventure: Adventure) {
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getRandomBackground() {
|
||||||
|
const randomIndex = Math.floor(Math.random() * randomBackgrounds.backgrounds.length);
|
||||||
|
return randomBackgrounds.backgrounds[randomIndex];
|
||||||
|
}
|
||||||
|
|
24
frontend/src/lib/json/backgrounds.json
Normal file
24
frontend/src/lib/json/backgrounds.json
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"backgrounds": [
|
||||||
|
{
|
||||||
|
"url": "backgrounds/adventurelog_showcase_1.webp",
|
||||||
|
"author": "Sean Morley",
|
||||||
|
"location": "Franconia Notch State Park, New Hampshire, USA"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "backgrounds/adventurelog_showcase_2.webp",
|
||||||
|
"author": "Sean Morley",
|
||||||
|
"location": "Tumbledown Mountain, Maine, USA"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "backgrounds/adventurelog_showcase_3.webp",
|
||||||
|
"author": "Sean Morley",
|
||||||
|
"location": "Philmont Scout Ranch, New Mexico, USA"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "backgrounds/adventurelog_showcase_4.webp",
|
||||||
|
"author": "Sean Morley",
|
||||||
|
"location": "Great Sand Dunes National Park, Colorado, USA"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -1,18 +1,21 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { enhance } from '$app/forms';
|
import { enhance } from '$app/forms';
|
||||||
import { goto } from '$app/navigation';
|
import { getRandomBackground, getRandomQuote } from '$lib';
|
||||||
import { getRandomQuote } from '$lib';
|
|
||||||
import { redirect, type SubmitFunction } from '@sveltejs/kit';
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
console.log(data);
|
console.log(data);
|
||||||
|
|
||||||
import { page } from '$app/stores';
|
import FileImageBox from '~icons/mdi/file-image-box';
|
||||||
|
import Account from '~icons/mdi/account';
|
||||||
|
import MapMarkerOutline from '~icons/mdi/map-marker-outline';
|
||||||
|
|
||||||
let quote: string = '';
|
import { page } from '$app/stores';
|
||||||
let backgroundImageUrl =
|
import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
|
||||||
'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?q=80&w=2942&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
|
|
||||||
|
let quote: { quote: string; author: string } = { quote: '', author: '' };
|
||||||
|
|
||||||
|
let background = getRandomBackground();
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
quote = getRandomQuote();
|
quote = getRandomQuote();
|
||||||
|
@ -21,57 +24,80 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
|
class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
|
||||||
style="background-image: url('{backgroundImageUrl}')"
|
style="background-image: url('{background.url}')"
|
||||||
>
|
>
|
||||||
<div class="card card-compact w-96 bg-base-100 shadow-xl p-6">
|
<div
|
||||||
<article class="text-center text-4xl font-extrabold">
|
class="card card-compact m-12 w-full max-w-4xl bg-base-100 shadow-xl p-6 flex flex-col md:flex-row"
|
||||||
<h1>Sign in</h1>
|
>
|
||||||
</article>
|
<div class="flex-1">
|
||||||
|
<h3 class="text-center">AdventureLog</h3>
|
||||||
|
<article class="text-center text-4xl mb-4 font-extrabold">
|
||||||
|
<h1>Login</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="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 mr-2">Login</button>
|
<button class="py-2 px-4 btn btn-primary mr-2">Login</button>
|
||||||
<button
|
|
||||||
class="py-2 px-4 btn btn-neutral"
|
<div class="flex justify-between mt-4">
|
||||||
type="button"
|
<p><a href="/signup" class="underline">Sign Up</a></p>
|
||||||
on:click={() => goto('/settings/forgot-password')}>Forgot Password</button
|
<p><a href="/settings/forgot-password" class="underline">Forgot Password</a></p>
|
||||||
>
|
</div>
|
||||||
<button class="py-2 px-4 btn btn-neutral" type="button" on:click={() => goto('/signup')}
|
</form>
|
||||||
>Sign Up</button
|
</div>
|
||||||
>
|
|
||||||
</form>
|
{#if ($page.form?.message && $page.form?.message.length > 1) || $page.form?.type === 'error'}
|
||||||
|
<div class="text-center text-error mt-4">
|
||||||
|
{$page.form.message || 'Unable to login with the provided credentials.'}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if ($page.form?.message && $page.form?.message.length > 1) || $page.form?.type === 'error'}
|
<div class="flex-1 flex justify-center items-center mt-12 md:mt-0 md:ml-6">
|
||||||
<div class="text-center text-error mt-4">
|
<blockquote class="w-80 text-center text-2xl font-semibold break-words">
|
||||||
{$page.form.message || 'Unable to login with the provided credentials.'}
|
{#if quote != null}
|
||||||
</div>
|
{quote.quote}
|
||||||
{/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> -->
|
<footer class="text-sm mt-1">{quote.author}</footer>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="fixed bottom-4 right-4 z-[999]">
|
||||||
|
<div class="dropdown dropdown-left dropdown-end">
|
||||||
|
<div tabindex="0" role="button" class="btn m-1 btn-circle btn-md">
|
||||||
|
<FileImageBox class="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-auto min-w-[200%] p-2 shadow right-0"
|
||||||
|
>
|
||||||
|
<p class="whitespace-nowrap text-left">
|
||||||
|
<Account class="w-4 h-4 inline-block" />
|
||||||
|
{background.author}
|
||||||
|
<MapMarkerOutline class="w-4 h-4 inline-block" />
|
||||||
|
{background.location}
|
||||||
|
<button
|
||||||
|
on:click={() => (window.location.href = 'https://forms.gle/2uZNnz8QS3VjuYtQ8')}
|
||||||
|
class="btn btn-sm btn-neutral inline-block ml-4">Submit an Image</button
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Login | AdventureLog</title>
|
<title>Login | AdventureLog</title>
|
||||||
<meta
|
<meta
|
||||||
|
|
BIN
frontend/static/backgrounds/adventurelog_showcase_1.webp
Normal file
BIN
frontend/static/backgrounds/adventurelog_showcase_1.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 774 KiB |
BIN
frontend/static/backgrounds/adventurelog_showcase_2.webp
Normal file
BIN
frontend/static/backgrounds/adventurelog_showcase_2.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 887 KiB |
BIN
frontend/static/backgrounds/adventurelog_showcase_3.webp
Normal file
BIN
frontend/static/backgrounds/adventurelog_showcase_3.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 197 KiB |
BIN
frontend/static/backgrounds/adventurelog_showcase_4.webp
Normal file
BIN
frontend/static/backgrounds/adventurelog_showcase_4.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 291 KiB |
Loading…
Add table
Add a link
Reference in a new issue