More UI tweaking

Author: hhvrc

src/routes/(anonymous)/+page.svelte

@@ -1,24 +1,38 @@
 <script lang="ts">
-  import Container from '$lib/components/Container.svelte';
+  import { metaApi } from '$lib/api';
+  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+  import { onMount } from 'svelte';
+
+  let deviceCount = $state(0);
+
+  onMount(async () => {
+    try {
+      const { data } = await metaApi.publicGetOnlineDevicesStatistics();
+      deviceCount = data.devicesOnline;
+    } catch (err) {
+      handleApiError(err);
+    }
+  });
 </script>
 
-<Container>
-  <div class="flex flex-col">
-    <h1 class="text-5xl leading-none font-bold text-gray-800 dark:text-white">
-      Welcome to <span class="text-blue-600">OpenShock</span>
-    </h1>
-    <p class="text-2xl font-light text-gray-600">[Put a slogan here]</p>
-    <div class="mt-8 flex flex-row items-center justify-start space-x-4">
-      <a href="signup" class="rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-700">
-        Get Started
-      </a>
-      <a
-        href="https://wiki.openshock.org/"
-        class="rounded bg-gray-200 px-4 py-2 font-bold text-gray-700 hover:bg-gray-300"
-      >
-        Documentation
-      </a>
-    </div>
+<section
+  class="flex flex-col items-center justify-center h-full text-white text-center space-y-6 px-6"
+>
+  <span class="flex">
+    <img class="h-20 pr-4" src="/IconSpinning.svg" alt="logo" />
+    <img class="h-20" src="/LogoBakedFont.svg" alt="logo" />
+  </span>
+  <p class="text-lg md:text-2xl opacity-75">
+    The go-to platform for safe, reliable, real low-latency remote shocking.<br />
+    <span class="font-semibold">{deviceCount}</span> people online right now.
+  </p>
+  <div class="flex space-x-4 pt-8 text-sm opacity-75">
+    <a href="https://openshock.org" target="_blank" rel="noopener" class="hover:underline">
+      Learn More
+    </a>
+    <span>·</span>
+    <a href="https://wiki.openshock.org" target="_blank" rel="noopener" class="hover:underline">
+      Wiki
+    </a>
   </div>
-  <div class="placeholder h-3/4 w-1/2 rounded-none"></div>
-</Container>
+</section>

src/routes/(anonymous)/login/+page.svelte

@@ -77,6 +77,6 @@
 
     <Button type="submit" disabled={!canSubmit}>Log In</Button>
 
-    <a class="text-blue-500 underline" href="/forgot-password">I forgot my password</a>
+    <a class=" text-sm opacity-75 hover:underline" href="/forgot-password">Forgot your password?</a>
   </form>
 </Container>