chore: Update login and signup pages with background images

src/routes/login/+page.svelte

@@ -1,4 +1,3 @@
-<!-- routes/login/+page.svelte -->
 <script lang="ts">
   import { enhance } from "$app/forms";
   import { goto } from "$app/navigation";
@@ -7,9 +6,12 @@
   import { onMount } from "svelte";
   let quote: string = "";
   let errors: { message?: string } = {};
+  let backgroundImageUrl = "https://source.unsplash.com/random/?mountains";
+
   onMount(async () => {
     quote = getRandomQuote();
   });
+
   const handleSubmit: SubmitFunction = async ({ formData, action, cancel }) => {
     const response = await fetch(action, {
       method: "POST",
@@ -31,6 +33,11 @@
   };
 </script>
 
+<div
+  class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
+  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>
@@ -68,6 +75,8 @@
         <!-- <footer class="text-sm">- Steve Jobs</footer> -->
       </blockquote>
     </div>
+  </div>
+</div>
 
 <svelte:head>
   <title>Login | AdventureLog</title>

src/routes/signup/+page.svelte

@@ -3,12 +3,20 @@
   import { enhance } from "$app/forms";
   import { getRandomQuote } from "$lib";
   import { onMount } from "svelte";
+
+  let backgroundImageUrl = "https://source.unsplash.com/random/?mountains";
+
   let quote: string = "";
   onMount(async () => {
     quote = getRandomQuote();
   });
 </script>
 
+<div
+  class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
+  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>
@@ -52,6 +60,8 @@
         <!-- <footer class="text-sm">- Steve Jobs</footer> -->
       </blockquote>
     </div>
+  </div>
+</div>
 
 <!-- username first last pass -->