feat(zkgm): save progress

unionlabs · Dec 4, 2024 · be22462 · be22462
1 parent 23e771c
commit be22462
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 16 deletions.
diff --git a/zkgm-dev/src/app.html b/zkgm-dev/src/app.html
@@ -1,12 +1,12 @@
 <!doctype html>
-<html lang="en" class="bg-black">
+<html lang="en" class="bg-black scroll-smooth max-h-screen touch-none overflow-hidden">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" class="overflow-hidden">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/zkgm-dev/src/lib/components/Bar.svelte b/zkgm-dev/src/lib/components/Bar.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-
   import Blink from "$lib/components/Blink.svelte";
-  import Agents from "$lib/components/Agents.svelte";
 </script>
 
-<div class="fixed bottom-0 inset-x-0">
-  <Agents/>
-  <div class="w-full bg-black p-4 flex items-center justify-center">
-    <p class="font-supermolot font-bold text-union-accent-500"><Blink /></p>
-  </div>
-</div>
+<div class="w-full bg-black p-4 flex items-center justify-between">
+  <img src="/logo.svg" alt="union logo" class="h-10 w-auto">
+  <p class="font-supermolot font-bold text-union-accent-500">
+    <Blink/>
+  </p>
+  <a href="https://union.build" class="font-mono font-bold text-union-accent-500">[MAIN SITE]</a>
+</div>
diff --git a/zkgm-dev/src/lib/components/Glitch.svelte b/zkgm-dev/src/lib/components/Glitch.svelte
@@ -14,7 +14,7 @@
   }
 
   .hero {
-    font-size: clamp(40px, 10vw, 200px);
+    font-size: clamp(100px, 20vw, 200px);
     line-height: 1;
     display: inline-block;
     color: #fff;

diff --git a/zkgm-dev/src/lib/components/Video.svelte b/zkgm-dev/src/lib/components/Video.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import Glitch from "$lib/components/Glitch.svelte";
   import {fade} from "svelte/transition";
+  import Agents from "$lib/components/Agents.svelte";
+  import Bar from "$lib/components/Bar.svelte";
 
-  let isPlaying = $state(false);
-  let isLoading = $state(false);
-  let video: HTMLVideoElement;
+  let isPlaying: boolean = $state(false);
+  let isLoading: boolean = $state(false);
+  let video: HTMLVideoElement | null = $state(null)
 
   function startVideo() {
     isLoading = true;
@@ -54,9 +56,11 @@
     <track kind="captions" src="dsa">
     <source src="https://pub-32dd1494f0fa423cb1013941269ecce9.r2.dev/zkgm-v1.mp4" type="video/webm"/>
   </video>
-  <main class="h-svh w-full flex justify-center items-center" in:fade>
+  <div class="h-svh w-full flex flex-col justify-between items-center relative" in:fade>
+    <Bar/>
     <Glitch text="ZKGM"/>
-  </main>
+    <Agents/>
+  </div>
 {/if}
 
 <style lang="postcss">

diff --git a/zkgm-dev/static/logo.svg b/zkgm-dev/static/logo.svg