hallo

src/routes/lost-and-found/Lost.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
    // logic
-   import { Router, Route, Link } from 'svelte-routing';
-   
+   import { navigate } from 'svelte-routing';
    let size = '';
    let SelectionItem = 'Sock';
 	let OptionItem = [
@@ -12,9 +11,9 @@
 
    let SelectionColor = 'Sock';
 	let OptionColor = [
-		'Sock',
-		'Underwear',
-		'T-shirt', 'Shirt', 'Trousers', 'Jacket'
+		'White',
+		'Black',
+		'Yellow', 'Orange', 'Red', 'Blue', 'Green','Grey'
 	]
 
    $: if(!!size && !!SelectionItem && !!SelectionColor)
@@ -27,6 +26,10 @@
    $: console.log('Changed selected:', SelectionColor)
 	$: console.log('Updated options:', OptionColor)
 
+   const redirectToUploaded = () => {
+      navigate('/lost-and-found/LostUploaded.svelte');
+   };
+
  </script>
 
 <div class="boxes">
@@ -47,11 +50,8 @@ Color: <select bind:value={SelectionColor}>
 <div>
 Size: <input bind:value={size} placeholder="enter the size" /></div>
 
-<div class="boxes">
-   <div> <nav>
-      <Link to="/lost-and-found/LostUploaded.svelte">Upload my lost item</Link>
-    </nav></div>
-</div>
+<button on:click={redirectToUploaded}>Upload my lost item.</button>
+
 
 <style>
    .boxes {

src/routes/lost-and-found/LostAndFound.svelte

@@ -1,26 +1,23 @@
 <script lang="ts">
    // logic
-   import { Router, Route, Link } from 'svelte-routing';
+   import { navigate } from 'svelte-routing';
+
+   let addingBooking: boolean = false;
+   const addBooking = () => (addingBooking = true);
+
+   const redirectToLost = () => {
+      navigate('/lost-and-found/Lost.svelte');
+   };
+
+   const redirectToFound = () => {
+      navigate('/lost-and-found/Found.svelte');
+   };
 </script>
 
-<div class="boxes">
-   <div> <nav>
-      <Link to="/lost-and-found/Lost.svelte">LOST</Link>
-    </nav>
-    </div>
-   <div><nav>
-      <Link to="/lost-and-found/Found.svelte">FOUND</Link>
-    </nav></div>
-</div>
-
-<style>
-   .boxes {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-   }
-</style>
+<h1>Have you lost or found the item?</h1>
+<button on:click={redirectToLost}>LOST</button>
+<button on:click={redirectToFound}>FOUND</button>
+
 
 
 

src/routes/lost-and-found/LostUploaded.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
    // logic
-   import { Router, Route, Link } from 'svelte-routing';
+   import { navigate } from 'svelte-routing';
+   const redirectToFoundDB = () => {
+      navigate('/lost-and-found/SearchInFound.svelte');
+   };
  </script>
 
+<h1>Your item is uploaded into the LOST-Database.</h1>
+
 <div class="boxes">
-   <div>Your item is uploaded into the LOST-Database.</div>
    <div></div>
    <div>You will receive a notification, if your item is found.</div>
 </div>
 
-<div class="boxes">
-   <div> <nav>
-      <Link to="/lost-and-found/SeachInFound.svelte">Search yourself in the FOUND-Database.</Link>
-    </nav></div>
-</div>
+<button on:click={redirectToFoundDB}>Search yourself in the LOST-Database.</button>
+
+
 
 <style>
    .boxes {

src/routes/lost-and-found/SearchInFound.svelte

@@ -1,18 +1,14 @@
-<script lang="ts">
-   // logic
-</script>
+<script>
+   import Icon from "../../lib/assets/img1.webp"
+   import icon2 from "../../lib/assets/img2.png"
+   </script>
 
-<div class="boxes">
-   <div>Lost</div>
-   <div>Found</div>
-</div>
+<h1>FOUND Database</h1> 
+<img src={Icon} alt="Listing" style="font-size: 2px">
+<img src={icon2} alt="download icon"/>
 
 <style>
-   .boxes {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
+   img {
+      height: 200px;
    }
-</style>
-
+</style>

src/routes/lost-and-found/ThanksForUploading.svelte

@@ -1,32 +1,22 @@
 <script lang="ts">
    // logic
-   import { Router, Route, Link } from 'svelte-routing';
+   import { navigate } from 'svelte-routing';
+
+   const redirectToFound = () => {
+      navigate('/lost-and-found/Found.svelte');
+   };
+
+   const redirectToHome = () => {
+      navigate('/');
+   };
+
  </script>
 
-<div class="boxes">
-   <div>Thanks for uploading the lost item.</div>
-   <div></div>
-</div>
-
-<div class="boxes">
-   <div> <nav>
-      <Link to="/lost-and-found/Found.svelte">Upload a new item.</Link>
-    </nav></div>
-</div>
-
-<div class="boxes">
-   <div> <nav>
-      <Link to="/">Return to Homepage.</Link>
-    </nav></div>
-</div>
-
-<style>
-   .boxes {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-   }
-</style>
+
+<h1>Thanks for uploading the lost item.</h1>
+
+<button on:click={redirectToHome}>Return to Homepage.</button>
+<button on:click={redirectToFound}>Upload a new item.</button>
+
 
 

src/routes/share-a-slot/LiesasChat.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+import chatimg from "../../lib/assets/chat.png"
+  
+</script>
+
+<h1>Chat with Liesa</h1>
+<img src={chatimg} alt="download icon"/>
+
+<style>
+    img {
+       height: 500px;
+    }
+ </style>

src/routes/share-a-slot/LiesasRequest.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { navigate } from 'svelte-routing';
+
+    const redirectToLiesaChat = () => {
+      navigate('/share-a-slot/LiesasChat.svelte');
+   };
+
+</script>
+
+<button>Liesa, tomorrow (30.10.23), 2 - 3 p.m.</button>
+
+Color: <h2> white</h2>
+
+Laundry Program: <h2> Wool </h2>
+
+Temperature: <h2> 30°C </h2>
+
+Amount: <h2> 3 white sweatures </h2>
+
+<button on:click={redirectToLiesaChat}>Contact Liesa</button>
+

src/routes/share-a-slot/shareAslot.svelte

@@ -1,29 +1,32 @@
 <script lang="ts">
-   import { Router, Route, Link } from 'svelte-routing';
-
+   import { navigate } from 'svelte-routing';
    let size = '';
+   let amount = '';
    let SelectionColor = 'Sock';
 	let OptionColor = [
-		'Sock',
-		'Underwear',
-		'T-shirt', 'Shirt', 'Trousers', 'Jacket'
+		'White',
+		'Black',
+		'Yellow', 'Orange', 'Red', 'Blue', 'Green','Grey'
 	]
 
    let SelectionProgram= 'Sock';
 	let OptionProgram = [
-		'Sock',
-		'Underwear',
-		'T-shirt', 'Shirt', 'Trousers', 'Jacket'
+		'Light',
+		'Wool',
+		'Intensive'
 	]
 
    $: console.log('Changed selected:', SelectionProgram)
 	$: console.log('Updated options:', OptionProgram)
+
+   const redirectToUp = () => {
+      navigate('/share-a-slot/shareUploaded.svelte');
+   };
 </script>
 
-<div class="boxes">
-   <div>Define your cloths for the shared laundry</div>
-   <div></div>
-</div>
+
+<h1>Define your cloths for the shared laundry</h1>
+
 
 
 Color: <select bind:value={SelectionColor}>
@@ -34,15 +37,8 @@ Laundry Program: <select bind:value={SelectionProgram}>
 	{#each OptionProgram as value}<option {value}>{value}</option>{/each}
 </select>
 
- Temperature: <input bind:value={size} placeholder="enter the size" />
+Temperature: <input bind:value={size} placeholder="enter the temperature" />
 
-Amount: <input bind:value={size} placeholder="enter the cloth amount you have" />
+Amount: <input bind:value={amount} placeholder="enter the amount of cloths you have" />
 
-<style>
-   .boxes {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-   }
-</style>
+<button on:click={redirectToUp}>Upload my share request.</button>

src/routes/share-a-slot/shareUploaded.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { navigate } from 'svelte-routing';
+
+    const redirectToLiesa = () => {
+      navigate('/share-a-slot/LiesasRequest.svelte');
+    };
+   const redirectToTim = () => {
+      navigate('/share-a-slot/LiesasRequest.svelte');
+   };
+</script>
+
+<h1>Thanks for uploading your request.</h1>
+
+<h2>The following request could be of interst for you:</h2>
+
+<button on:click={redirectToLiesa}>Liesa, tomorrow (30.10.23), 2 - 3 p.m.</button>
+
+<button on:click={redirectToTim}>Tim, Wed. (03.11.23), 5 - 6 p.m.</button>