📲 Adds initial svelte app with tailwind and typescript

app/src/App.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Topbar from './components/Topbar.svelte';
+</script>
+
+<main class="w-screen h-screen">
+	<Topbar />
+	<div class="flex justify-center items-center w-full h-full">
+		<h1>🎥Weee! This is the start project for the spot micro controller</h1>
+	</div>
+</main>

app/src/app.css

@@ -0,0 +1,32 @@
+:root {
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color-scheme: light dark;
+	color: rgba(255, 255, 255, 0.87);
+	background-color: #242424;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
+}
+
+body {
+	margin: 0;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		color: #213547;
+		background-color: #ffffff;
+	}
+	a:hover {
+		color: #747bff;
+	}
+	button {
+		background-color: #f9f9f9;
+	}
+}

app/src/components/Topbar.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+</script>
+
+<div class="absolute top-0 flex justify-center w-full z-20">
+	<svg height="40" width="300" class="Settings_topSVG__2VXbU">
+		<path stroke="none" fill="#36393f" d="M 0 0 C 40 0 40 40 80 40 H 220 C 260 40 260 0 300 0 Z" />
+	</svg>
+	<div class="absolute flex gap-1 h-10 w-36 justify-center items-center dots disconnected">
+		<span class="dot h-4 w-4" />
+		<span class="dot h-4 w-4" />
+		<span class="dot h-4 w-4" />
+		<span class="dot h-4 w-4" />
+	</div>
+</div>
+
+<style scoped>
+	.dot {
+		background-color: grey;
+	}
+	.disconnected .dot {
+		animation: _fade 0.5s 3s infinite alternate forwards;
+	}
+	/*.connected .dot:first-child {
+    background-color: #00bbe3;
+    transform: scale(1.1);
+  }*/
+	/*.dots .activedot {
+    background-color: #00bbe3;
+    transform: scale(1.1);
+  }*/
+	.dots .dot:first-child {
+		animation-delay: 0.25s;
+	}
+	.dots .dot:nth-child(2) {
+		animation-delay: 0.5s;
+	}
+	.dots .dot:nth-child(3) {
+		animation-delay: 0.75s;
+	}
+	.dots .dot:last-child {
+		animation-delay: 1s;
+	}
+	.dots .dot:last-child {
+		animation-delay: 1s;
+	}
+	@keyframes _fade {
+		from {
+			background-color: #00bbe3;
+			transform: scale(1.1);
+		}
+		to {
+			background-color: grey;
+			transform: scale(1.1);
+		}
+	}
+</style>

app/src/index.css

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

app/src/main.ts

@@ -0,0 +1,9 @@
+import './app.css';
+import './index.css';
+import App from './App.svelte';
+
+const app = new App({
+	target: document.getElementById('app')
+});
+
+export default app;

app/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />