New login screen with featured images

frontend/src/lib/index.ts

@@ -1,4 +1,5 @@
 import inspirationalQuotes from './json/quotes.json';
+import randomBackgrounds from './json/backgrounds.json';
 import type { Adventure, Checklist, Collection, Note, Transportation, User } from './types';
 
 export function getRandomQuote() {
@@ -6,7 +7,7 @@ export function getRandomQuote() {
 	const randomIndex = Math.floor(Math.random() * quotes.length);
 	let quoteString = quotes[randomIndex].quote;
 	let authorString = quotes[randomIndex].author;
-	return '"' + quoteString + '" - ' + authorString;
+	return { quote: quoteString, author: authorString };
 }
 
 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];
+}

frontend/src/lib/json/backgrounds.json

@@ -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"
+		}
+	]
+}

frontend/src/routes/login/+page.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
 	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';
 
 	export let 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 () => {
 		quote = getRandomQuote();
@@ -21,57 +24,80 @@
 
 <div
 	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>
 
-		{#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}
-				<!-- <footer class="text-sm">- Steve Jobs</footer> -->
+				<footer class="text-sm mt-1">{quote.author}</footer>
 			</blockquote>
 		</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>
 	<title>Login | AdventureLog</title>
 	<meta