initial commit

web/src/lib/components/avatar.svelte

@@ -0,0 +1 @@
+<menu class="rounded-full border w-12 h-12"></menu>

web/src/lib/components/category_card.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { Category } from "$lib/models/category";
+
+    export let category: Category;
+</script>
+
+<div class="category-card relative rounded-2xl shadow-md w-48 h-48 overflow-hidden cursor-pointer">
+    <img class="w-full h-full" src={category.img} alt="" />
+    <div class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"></div>
+    <h5 class="absolute text-white font-bold bottom-4 left-4 text-xl">{category.name}</h5>
+</div>
+
+<style>
+    .category-card img {
+        object-fit: cover;
+        transition: 0.25s ease;
+    }
+
+    .category-card:hover img {
+        scale: 1.075;
+    }
+</style>

web/src/lib/components/footer.svelte

@@ -0,0 +1,34 @@
+<script>
+    import LogoTextLight from "./logo_text_light.svelte";
+</script>
+
+<footer class="bg-primary text-white w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-8 p-12 mt-12 rounded-t-3xl">
+    <LogoTextLight></LogoTextLight>
+    <div>
+        <h5 class="font-semibold">Resources</h5>
+        <ul></ul>
+    </div>
+    <div>
+        <h5 class="font-semibold">wanderer</h5>
+        <ul class="mt-4">
+            <li>About</li>
+            <li>Features</li>
+            <li>Changelog</li>
+            <li>License</li>
+        </ul>
+    </div>
+    <div>
+        <h5 class="font-semibold">Community</h5>
+        <ul class="mt-4">
+            <li>GitHub</li>
+            <li>Issues</li>
+            <li>Contribute</li>
+        </ul>
+    </div>
+</footer>
+
+<style>
+    footer li:not(:last-child) {
+        margin-bottom: 4px;
+    }
+</style>

web/src/lib/components/nav_bar.svelte

@@ -0,0 +1,20 @@
+<script>
+    import Avatar from "./avatar.svelte";
+    import LogoText from "./logo_text.svelte";
+</script>
+
+<nav class="flex justify-between items-center p-6">
+    <a href="/"><LogoText></LogoText></a>
+    <menu class="flex gap-8">
+        <a class="font-semibold" href="">Trails</a>
+        <a class="font-semibold" href="">Map</a>
+        <a class="font-semibold" href="">Categories</a>
+        <a class="font-semibold" href="">Favorites</a>
+    </menu>
+    <div class="flex gap-6 items-center">
+        <button class="btn-primary"
+            ><i class="fa fa-plus mr-2"></i>New Trail</button
+        >
+        <Avatar></Avatar>
+    </div>
+</nav>

web/src/lib/components/summit_log_card.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { SummitLog } from "$lib/models/summit_log";
+    import { formatISODate } from "$lib/util/format_util";
+
+    export let log: SummitLog;
+</script>
+
+<div class="p-4 my-2 border rounded-xl">
+    <h5 class="font-medium mr-2">{formatISODate(log.date)}</h5>
+    <span>{log.text}</span>
+</div>

web/src/lib/components/tabs.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let tabs: string[];
+    export let activeTab: number;
+</script>
+
+<div class="flex gap-2 overflow-x-scroll">
+    {#each tabs as tab, i}
+        <button class="tab" class:tab-active={activeTab == i} on:click={() => activeTab = i}>{tab}</button>
+    {/each}
+</div>

web/src/lib/components/trail_card.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import type { Trail } from "$lib/models/trail";
+
+    export let trail: Trail;
+</script>
+
+<div
+    class="trail-card rounded-2xl shadow-md w-72 overflow-hidden cursor-pointer"
+>
+    <img class="w-full h-48" src={trail.img} alt="" />
+    <div class="p-4">
+        <div>
+            <h4 class="font-semibold text-lg">{trail.name}</h4>
+            <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
+        </div>
+        <div class="flex mt-2 gap-4">
+            <span><i class="fa fa-left-right mr-2"></i>{trail.distance}m</span>
+            <span><i class="fa fa-up-down mr-2"></i>{trail.height}m</span>
+        </div>
+    </div>
+</div>
+
+<style>
+    .trail-card img {
+        object-fit: cover;
+        transition: 0.25s ease;
+    }
+
+    .trail-card:hover img {
+        scale: 1.075;
+    }
+</style>

web/src/lib/components/waypoint_card.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { Waypoint } from "$lib/models/waypoint";
+
+    export let waypoint: Waypoint;
+</script>
+
+<div class="p-4 border rounded-md my-2 cursor-pointer hover:bg-gray-100">
+    <h5 class="mb-2"><i class="fa fa-{waypoint.icon} mr-2"></i>{waypoint.name}</h5>
+    <p>{waypoint.description}</p>
+    <span class="text-sm text-gray-500">{waypoint.lat}, {waypoint.lon}</span>
+</div>