moves, games, projects carousels

tem/html/pages/mono.html

@@ -66,85 +66,97 @@
   >degrees of freedom development</div> -->
 </div>
 
-<img src='/public/img/dofdev_logo.svg?v22' width='100%'>
+<h2>moves</h2>
-<p>degrees of freedom development</p>
+<div
-
+  style="
-<div class='shuffle' style='
+    width: 100%;
     display: flex;
-  flex-flow: column;
+    gap: 6px;
-  align-items: center;
+    overflow-x: auto;
-'>
+  "
-  <div style='color: white; font-size: 20px;'>Ethan Merchant 
-    <a href='https://ethanmerchant.com' style='color: var(--light);'>@spatialfree</a>
-  </div>
-  <div style='color: white; font-size: 20px;'>Niko Ryan 
-    <a href='https://twitter.com/opendegree' style='color: var(--light);'>@opendegree</a>
-  </div>
-</div>
-
-<div class='t_symbol' style='
-  font-size: 32px;
-'>&times;</div>
-
-<div id='x'>
-  <a href='https://stereokit.net' target='_blank'>
-    <div style='
-      background-image: url("https://stereokit.net/img/StereoKitLogoLight.svg");
-    '></div>
-  </a>
-  <a href='https://www.projectnorthstar.org/' target='_blank'>
-    <div style='
-      background-image: url("/public/img/icons/northstar.svg");
-    '></div>
-  </a>
-  <a href='https://stardustxr.org' target='_blank'>
-    <div style='
-      background-image: url("https://stardustxr.org/img/icon.gif");
-    '></div>
-  </a>
-</div>
-
-
-
-<div class='t_symbol' style='
-  margin-top: 4rem;
-'>&conint;</div>
-
-<!-- <div style='height: 32px;'></div> -->
-<!-- <div id='fdeg'>&plus;</div> -->
-
-<h1>projects</h1>
-<p class='subtitle'>xr based interfaces</p>
-
-<a href='/braille_xr'>braille_xr</a>
-
-<div style='height: 32px;'></div>
-<img src='/public/img/logo.svg' width='64px'>
-<div style='height: 24px;'></div>
-
-<input type='password' autofocus
-name='pass' placeholder='pass' 
-hx-post='/pass'
-hx-vals='{"pass": this.value}'
-hx-swap='outerHTML'
 >
-<!-- <button hx-post='/clicked' hx-swap='outerHTML'>
+{{ range $hash, $move := .Data.Moves }}
-  Click Me
+  <div
-</button> -->
+    style="
+      width: 400px;
+      background-color: #00000080;
+    "
+  >
+    <div>
+      <video autoplay muted
+        style="
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          padding: 0;
+          margin: 0;
+        "
+      >
+        <source src="/public/moves/{{ $hash }}.webm" type="video/webm" />
+      </video>
+    </div>
+    <div>{{ $move.Name }}</div>
+    <a href="/move/{{ $hash }}">see more</a>
+  </div>
+{{ end }}
+</div>
 
-<footer>&copy; 2018-2024 dofdev</footer>
+<h2>games</h2>
-
+<div
-
+  style="
-<style>
+    width: 100%;
-#x {
     display: flex;
-  flex-flow: wrap;
+    gap: 6px;
-  justify-content: center;
+    overflow-x: auto;
-  gap: 32px;
+  "
-  > a > div {
+>
-    min-width: 64px;
+{{ range $hash, $game := .Data.Games }}
-    min-height: 64px;
+  <div
-    background-size: contain;
+    style="
-  }
+      width: 400px;
-}
+      background-color: #00000080;
-</style>
+    "
+  >
+    <div>
+      <video autoplay muted
+        style="
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          padding: 0;
+          margin: 0;
+        "
+      >
+        <source src="/public/games/{{ $hash }}.webm" type="video/webm" />
+      </video>
+    </div>
+    <div>{{ $game.Name }}</div>
+    <a href="/game/{{ $hash }}">see more</a>
+  </div>
+{{ end }}
+</div>
+
+<h2>projects</h2>
+<div
+  style="
+    width: 100%;
+    display: flex;
+    gap: 6px;
+    overflow-x: auto;
+  "
+>
+{{ range $hash, $project := .Data.Projects }}
+  <div
+    style="
+      width: 400px;
+      background-color: #00000080;
+    "
+  >
+    <div>{{ $project.Name }}</div>
+    <a href="/project/{{ $hash }}">see more</a>
+  </div>
+{{ end }}
+</div>
+
+
+<div style='height: 128px; width: 100%;'></div>