Add Tailwind CSS and update layout and page styles

package.json

@@ -13,8 +13,13 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tailwindcss/typography": "^0.5.12",
+		"autoprefixer": "^10.4.19",
+		"daisyui": "^4.9.0",
+		"postcss": "^8.4.38",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.4.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/lib/assets/exportFile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="17.75" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V288H216c-13.3 0-24 10.7-24 24s10.7 24 24 24H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM384 336V288H494.1l-39-39c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l80 80c9.4 9.4 9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l39-39H384zm0-208H256V0L384 128z"/></svg>

src/lib/components/Navbar.svelte

@@ -1,44 +1,26 @@
-<style>
-    .navbar {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: row;
-    }
-
-    button {
-        margin-left: 1rem;
-        padding: 0.5rem 1rem;
-        border: none;
-        border-radius: 4px;
-        background-color: #076836;
-        color: white;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-        box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
-    }
-
-    button:hover {
-        background-color: #074b28;
-    }
-</style>
-
 <script lang="ts">
-    function navHome() {
-        window.location.href = '/';
-    
-    }
-    function navLog() {
-        window.location.href = '/log';
-    }
+  import { getNumberOfAdventures } from "../../services/adventureService";
 </script>
-
-
-<div class="navbar">
-
-    <h2>AdventureLog 🗺️</h2>
-    <button on:click={navHome}>Home</button>
-    <button on:click={navLog}>Log</button>
-    <hr>
-    <br>
-</div>
+<div class="navbar bg-base-100">
+    <div class="navbar-start">
+        <button class="btn btn-primary mr-4 ml-2" on:click={() => window.location.href = '/'}>Home</button>
+        <button class="btn btn-primary" on:click={() => window.location.href = '/log'}>My Log</button>
+    </div>
+    <div class="navbar-center">
+      <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
+    </div>
+    <div class="navbar-end">
+      <p>Adventures: {getNumberOfAdventures()} </p>
+      <button class="btn btn-ghost btn-circle">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+      </button>
+      
+      <button class="btn btn-ghost btn-circle">
+        <div class="indicator">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+          <span class="badge badge-xs badge-primary indicator-item"></span>
+          
+        </div>
+      </button>
+    </div>
+  </div>

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script>
     import Footer from "$lib/components/Footer.svelte";
     import Navbar from "$lib/components/Navbar.svelte";
+    import "../app.css";
 </script>
 
 <Navbar />

src/routes/+page.svelte

@@ -5,37 +5,8 @@
     }
 </script>
 
-<h1>Welcome to AdventureLog 🗺️</h1>
-<img src={campingDrawing} width="25%" alt="Logo" />
-<button on:click={navToLog}>Open Log</button>
-
-<style>
-    button {
-        margin-left: 1rem;
-        padding: 0.5rem 1rem;
-        border: none;
-        border-radius: 4px;
-        background-color: #076836;
-        color: white;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-        box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
-        margin-left: auto;
-        margin-right: auto;
-        display: block;
-    }
-
-    button:hover {
-        background-color: #074b28;
-    }
-    h1 {
-        text-align: center;
-    }
-    img {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: 2rem;
-        margin-bottom: 2rem;
-    }
-</style>
+<div class="flex flex-col items-center justify-center">
+    <article class="prose"><h1 class="mb-4">Welcome. Let's get Exploring!</h1></article>
+    <img src={campingDrawing} class="w-1/4 mb-4" alt="Logo" />
+    <button on:click={navToLog} class="btn btn-primary">Open Log</button>
+</div>

src/routes/log/+page.svelte

@@ -5,6 +5,7 @@
     import { onMount } from 'svelte';
     import { exportData } from "../../services/export";
     import { importData } from "../../services/import";
+    import exportFile from "$lib/assets/exportFile.svg";
 
     import mapDrawing from "$lib/assets/adventure_map.svg"
 
@@ -62,9 +63,13 @@
     
 </script>
 
-<input bind:value={newName} placeholder="Adventure Name" />
-<input bind:value={newLocation} placeholder="Adventure Location" />
-<button on:click={createNewAdventure}>Add Adventure</button>
+<div class="flex flex-row items-center justify-center gap-4">
+    <input type="text" bind:value={newName} placeholder="Adventure Name" class="input input-bordered w-full max-w-xs" />
+    <input type="text" bind:value={newLocation} placeholder="Adventure Location" class="input input-bordered w-full max-w-xs" />
+    <button class="btn" on:click={createNewAdventure}>Add Adventure</button>
+</div>
+
+
 
 {#each adventures as adventure, i}
     <div>
@@ -73,8 +78,8 @@
 {/each}
 
 {#if adventures.length == 0}
-<div class="addsomething">
-    <h2>Add some adventures!</h2>
+<div class="flex flex-col items-center justify-center mt-28">
+    <article class="prose mb-4"><h2>Add some adventures!</h2></article>
     <img src={mapDrawing} width="25%" alt="Logo" />
 </div >
 
@@ -90,10 +95,16 @@
 {/if}
 
 {#if adventures.length != 0}
-<button on:click={async () => { window.location.href = exportData(); }}>Save as File</button>
+
+
+
+<button class="btn btn-neutral ml-auto mr-auto block" on:click={async () => { window.location.href = exportData(); }}>
+    <img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
+</button>
+
 {/if}
 
-<style>
+<!-- <style>
 .addsomething {
     display: flex;
     flex-direction: column;
@@ -117,4 +128,4 @@ button {
     button:hover {
         background-color: #074b28;
     }
-</style>
+</style> -->

src/services/adventureService.ts

@@ -55,4 +55,8 @@ export function saveEdit(editId:number, editName:string, editLocation:string, ed
     }
 }
 
+export function getNumberOfAdventures() {
+    return adventures.length;
+}
+
 

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {}
+  },
+  plugins: [require("@tailwindcss/typography"), require("daisyui")],
+  daisyui: {
+    themes: ["night"],
+  },
+};