changed folder structure

src/routes/(dashboard)/+layout.svelte

@@ -1 +0,0 @@
-<slot />

src/routes/(sites)/+layout.svelte

@@ -1,12 +0,0 @@
-<main>
-	<slot />
-</main>
-
-<style lang="postcss">
-	/* :global(html) {
-		background-color: theme(colors.gray.300);
-	} */
-	main {
-		@apply p-8;
-	}
-</style>

src/routes/(sites)/help/+page.svelte

@@ -1,3 +0,0 @@
-<h1 class="text-6xl font-bold">
-	Help
-</h1>

src/routes/(sites)/settings/+page.svelte

@@ -1,15 +0,0 @@
-<h1 class="text-6xl font-bold">
-	Settings
-</h1>
-<p>
-	Onboarding neu starten
-</p>
-<p>
-	Dark Mode
-</p>
-<p>
-	Language
-</p>
-<p>
-	Reset
-</p>

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 
 
-<style lang="postcss">
+<!-- <style lang="postcss">
 	/* :global(html) {
 		background-color: theme(colors.gray.300);
 	} */
-</style>
+</style> -->

src/routes/control/+page.svelte

@@ -2,9 +2,7 @@
 	import { browser } from '$app/environment';
 </script>
 
-<h1 class="text-6xl font-bold">
-	Control
-</h1>
+<h1>Control</h1>
 <div class="relative aspect-square mt-4">
 	<div id="joystick" style="height: 300px;"></div>
 	<div class="circle">
@@ -21,14 +19,14 @@ var joystick = nipplejs.create({
 	zone: document.getElementById('joystick'),
 	mode: 'static',
 	position: {left: '50%', top: '50%'},
-	color: '#1a1a1a',
+	color: '#7DE8B2',
 	restOpacity: 0,
 	size: 200,
 });
 </script>
 {/if}
 
-<style>
+<style lang="postcss">
 	.circle > div {
 		@apply absolute aspect-square;
 		border-color: theme('colors.gray.300');

src/routes/devices/+page.svelte

@@ -1,28 +1,42 @@
 <script>
+	import DeviceSetup from "../../components/DeviceSetup.svelte";
 	import deviceImage from "./fts_first-render_minified.png";
 	var online = true;
+	
 	var devicesList = ["AGV device #1", "AGV device #2", "AGV device #3"];
+
+	import { localStorageStore } from '@skeletonlabs/skeleton';
+	const deviceSetupShow = localStorageStore('deviceSetupShow', false);
+
+	function startDeviceSetup() {
+		$deviceSetupShow = true;
+	}
+
+
+	import { getDrawerStore } from "@skeletonlabs/skeleton";
+
+	const drawerStore = getDrawerStore();
+	const settings = { id: 'edit-device' };
+	// drawerStore.open(settings);
+
+	function openDeviceSettings() {
+		drawerStore.open(settings);
+	}
 </script>
 
 <h1 class="text-6xl font-bold">
 	Devices
 </h1>
 {#each devicesList as device}
-<article class="card mb-6 p-4 relative ring-0 bg-surface-50 bg-opacity-50">
+<article class="card mb-6 p-4 relative bg-surface-50 bg-opacity-50">
 	<img class="mb-2 px-4 py-14" src="{deviceImage}" alt="Device preview">
 	<div class="flex justify-between items-center">
 		<h2 class="text-2xl">{device}</h2>
 		<div class="flex gap-2">
-			<button type="button" class="btn-icon variant-filled-warning">
-				<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
+			<button type="button" class="btn-icon variant-filled-surface bg-surface-50" on:click={openDeviceSettings}>
+				<svg xmlns="http://www.w3.org/2000/svg" height="16" width="4" viewBox="0 0 128 512">
 					<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
-					<path d="M36.4 360.9L13.4 439 1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1L73 498.6l78.1-23c12.4-3.6 23.7-9.9 33.4-18.4c1.4-1.2 2.7-2.5 4-3.8L492.7 149.3c21.9-21.9 24.6-55.6 8.2-80.5c-2.3-3.5-5.1-6.9-8.2-10L453.3 19.3c-25-25-65.5-25-90.5 0L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4zm46 13.5c1.7-5.6 4.5-10.8 8.4-15.2c.6-.6 1.1-1.2 1.7-1.8L321 129 383 191 154.6 419.5c-4.7 4.7-10.6 8.2-17 10.1l-23.4 6.9L59.4 452.6l16.1-54.8 6.9-23.4z"/>
-				</svg>
-			</button>
-			<button type="button" class="btn-icon variant-filled-error">
-				<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
-					<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-					<path d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z"/>
+					<path d="M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z"/>
 				</svg>
 			</button>
 		</div>
@@ -40,13 +54,16 @@
 	{/if}
 </article>
 {/each}
-<button type="button" class="btn btn-lg variant-filled-primary w-full">
+<button type="button" class="btn btn-lg variant-filled-primary w-full" on:click={startDeviceSetup}>
 	<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" class="w-5 h-5" viewBox="0 0 512 512">
 		<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
 		<path d="M16 288c-11.4-19.8-11.4-44.2 0-64L108.3 64.2c11.4-19.8 32.6-32 55.4-32H348.3c22.9 0 44 12.2 55.4 32L496 224c11.4 19.8 11.4 44.2 0 64L403.7 447.8c-11.4 19.8-32.6 32-55.4 32H163.7c-22.9 0-44-12.2-55.4-32L16 288zm27.7-48c-5.7 9.9-5.7 22.1 0 32L136 431.8c5.7 9.9 16.3 16 27.7 16H348.3c11.4 0 22-6.1 27.7-16L468.3 272c5.7-9.9 5.7-22.1 0-32L376 80.2c-5.7-9.9-16.3-16-27.7-16l-184.6 0c-11.4 0-22 6.1-27.7 16L43.7 240zM240 352V272H160c-8.8 0-16-7.2-16-16s7.2-16 16-16h80V160c0-8.8 7.2-16 16-16s16 7.2 16 16v80h80c8.8 0 16 7.2 16 16s-7.2 16-16 16H272v80c0 8.8-7.2 16-16 16s-16-7.2-16-16z"/>
 	</svg>
 	<span>Add new device</span>
 </button>
+{#if $deviceSetupShow}
+<DeviceSetup />
+{/if}
 
 <!-- <style lang="postcss">
 	svg {

src/routes/help/+page.svelte

@@ -0,0 +1,59 @@
+<script>
+	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
+
+	var faqObj = [
+		{
+			question: "What is this app?",
+			answer: "Content"
+		},
+		{
+			question: "What devices can I add?",
+			answer: "Content"
+		},
+		{
+			question: "What should I do if I encounter an error while operating the AGV?",
+			answer: "Refer to the error logs in the diagnostic section for detailed information, and follow the troubleshooting guide provided."
+		},
+		{
+			question: "How can I track the real-time location of an AGV?",
+			answer: "Access the live map display on the monitoring dashboard to track the real-time locations of all AGV units."
+		},
+		{
+			question: "Can I access the application remotely?",
+			answer: "You can securely access the HMI application remotely through mobile devices or pc clients provided by your employer. You cannot access the application outside of your employers network."
+		},
+		{
+			question: "Are there safety features in case of emergencies?",
+			answer: "Yes, the application integrates emergency stop buttons, safety protocols, and visual/audible alarms for critical situations."
+		},
+		{
+			question: "Can I receive real-time notifications on my mobile device?",
+			answer: "Yes, the application sends real-time notifications and alerts to your mobile device to keep you informed of important events."
+		},
+		{
+			question: "How are updates installed?",
+			answer: "Updates will be installed seamlessly within the application, there is no need to update manually."
+		},
+	];
+</script>
+<h1 class="text-6xl font-bold">
+	Help
+</h1>
+<Accordion autocollapse>
+	{#each faqObj as item}
+	<AccordionItem>
+		<svelte:fragment slot="lead">
+			<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
+				<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
+				<path d="M0 88C0 39.4 39.4 0 88 0H392c30.9 0 56 25.1 56 56V344c0 22.3-13.1 41.6-32 50.6V464h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H80c-44.2 0-80-35.8-80-80c0-2.7 .1-5.4 .4-8H0V88zM80 400c-17.7 0-32 14.3-32 32s14.3 32 32 32H368V400H80zM48 358.7c9.8-4.3 20.6-6.7 32-6.7H392c4.4 0 8-3.6 8-8V56c0-4.4-3.6-8-8-8H88C65.9 48 48 65.9 48 88V358.7zM152 112H328c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80H328c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/>
+			</svg>
+		</svelte:fragment>
+		<svelte:fragment slot="summary">
+			<h2>{item.question}</h2>
+		</svelte:fragment>
+		<svelte:fragment slot="content">
+			<p>{item.answer}</p>
+		</svelte:fragment>
+	</AccordionItem>
+	{/each}
+</Accordion>

src/routes/settings/+page.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { LightSwitch } from '@skeletonlabs/skeleton';
+	
+	function resetOnboarding() {
+		localStorage.setItem('onboarding', true);
+	}
+
+	import { getModalStore } from '@skeletonlabs/skeleton';
+	const modalStore = getModalStore();
+
+	function resetModal() {
+		const modal = {
+			type: 'confirm',
+			// Data
+			title: 'Reset Confirmation',
+			body: 'Are you sure you want to reset the app?',
+			response: (boolean) => console.log('reset:', boolean),
+		};
+		modalStore.trigger(modal);
+	}
+</script>
+
+<h1>Settings</h1>
+<div class="flex flex-col gap-4">
+	<div class="flex gap-2">
+		<p>Dark Mode</p>
+		<LightSwitch />
+	</div>
+
+	<button type="button" class="btn variant-filled-surface w-full" on:click={resetOnboarding}>Restart Onboarding</button>
+	
+	<button type="button" class="btn variant-ghost-error w-full" on:click={resetModal}>Reset</button>
+</div>