From 592e1c4fd8e3c877eeeef0273e6da57b81852a79 Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Mon, 18 Aug 2025 13:56:08 -0400
Subject: [PATCH] Finally embedded my twitch stream into the site, now just
 need to get links posting to work.

---
 pages/copy/twitch.html | 203 +++++++++++++++++++++++++++++++++++++++++
 pages/live/index.html  |  58 +++++++-----
 static/input_style.css |   1 -
 static/style.css       | 122 ++++++++++++++++++++++---
 4 files changed, 346 insertions(+), 38 deletions(-)
 create mode 100644 pages/copy/twitch.html

diff --git a/pages/copy/twitch.html b/pages/copy/twitch.html
new file mode 100644
index 0000000..8d458b6
--- /dev/null
+++ b/pages/copy/twitch.html
@@ -0,0 +1,203 @@
+<div class="text-gray-950 bg-gray-200">
+  <bar class="bg-gray-400 justify-evenly items-center">
+    <img src="/icons/twitch.svg" />
+    <span>Browse</span>
+    <img src="/icons/menu.svg" />
+    <bar class="p-0! bg-gray-300 rounded-lg border-1 border-gray-700">
+      <input placeholder="Search" />
+      <img src="/icons/search.svg" />
+    </bar>
+    <img src="/icons/crown.svg" />
+    <button type="button">Log In</button>
+    <button type="button">Sign Up</button>
+    <img src="/icons/person-standing.svg" />
+  </bar>
+
+<div class="p-1">
+  <bar>
+    <img src="/icons/chevron-left.svg" />
+
+      <shape class="video">
+        Main Video
+      </shape>
+
+    <img src="/icons/chevron-right.svg" />
+  </bar>
+
+  <block>
+    <a class="text-xl">Live on Twitch</a>
+    <grid class="grid-cols-2 p-0! gap-2">
+      <block class="p-0!">
+        <shape class="video">Sample Video</shape>
+        <div class="flex align-top gap-3">
+          <shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
+          <div class="flex flex-col gap-1">
+            <span class="font-bold">Title</span>
+            <span>Name</span>
+            <span>Game Title</span>
+            <span>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            </span>
+          </div>
+        </div>
+      </block>
+
+      <block class="p-0!">
+        <shape class="video">Sample Video</shape>
+        <div class="flex align-top gap-3">
+          <shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
+          <div class="flex flex-col gap-1">
+            <span class="font-bold">Title</span>
+            <span>Name</span>
+            <span>Game Title</span>
+            <span>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            </span>
+          </div>
+        </div>
+      </block>
+    </bar>
+  </block>
+
+  <div class="flex justify-center items-center">
+    <a href="#">Show more v</a>
+  </div>
+
+  <block>
+    <span><a href="#">Categories</a> we think you'll like</span>
+
+    <grid class="grid-cols-4 p-0! gap-2">
+      <block class="p-0!">
+        <shape class="aspect-[9/12]!">Category</shape>
+        <div class="flex flex-col gap-1">
+          <span class="font-bold">Title</span>
+          <span>Name</span>
+          <span>Game Title</span>
+          <span>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+          </span>
+        </div>
+      </block>
+      <block class="p-0!">
+        <shape class="aspect-[9/12]!">Category</shape>
+        <div class="flex flex-col gap-1">
+          <span class="font-bold">Title</span>
+          <span>Name</span>
+          <span>Game Title</span>
+          <span>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+          </span>
+        </div>
+      </block>
+      <block class="p-0!">
+        <shape class="aspect-[9/12]!">Category</shape>
+        <div class="flex flex-col gap-1">
+          <span class="font-bold">Title</span>
+          <span>Name</span>
+          <span>Game Title</span>
+          <span>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+          </span>
+        </div>
+      </block>
+      <block class="p-0!">
+        <shape class="aspect-[9/12]!">Category</shape>
+        <div class="flex flex-col gap-1">
+          <span class="font-bold">Title</span>
+          <span>Name</span>
+          <span>Game Title</span>
+          <span>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+          </span>
+        </div>
+      </block>
+    </grid>
+  </block>
+
+  <grid class="grid-cols-3">
+    <stack class="p-0!">
+      <button type="button" class="rounded-xxl text-left text-xxl">Games</button>
+      <img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/gamepad.svg" />
+    </stack>
+    <stack class="p-0!">
+      <button type="button" class="rounded-xxl text-left text-xxl">IRL</button>
+      <img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/mic.svg" />
+    </stack>
+    <stack class="p-0!">
+      <button type="button" class="rounded-xxl text-left text-xxl">Music</button>
+      <img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/headphones.svg" />
+    </stack>
+    <stack class="p-0!">
+      <button type="button" class="rounded-xxl text-left text-xxl">Creative</button>
+      <img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/paintbrush.svg" />
+    </stack>
+    <stack class="p-0!">
+      <button type="button" class="rounded-xxl text-left text-xxl">Esports</button>
+      <img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/trophy.svg" />
+    </stack>
+  </grid>
+
+  <block>
+    <a class="text-xl">Live on Twitch</a>
+    <grid class="grid-cols-2 p-0! gap-2">
+      <block class="p-0!">
+        <shape class="video">Sample Video</shape>
+        <div class="flex align-top gap-3">
+          <shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
+          <div class="flex flex-col gap-1">
+            <span class="font-bold">Title</span>
+            <span>Name</span>
+            <span>Game Title</span>
+            <span>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            </span>
+          </div>
+        </div>
+      </block>
+
+      <block class="p-0!">
+        <shape class="video">Sample Video</shape>
+        <div class="flex align-top gap-3">
+          <shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
+          <div class="flex flex-col gap-1">
+            <span class="font-bold">Title</span>
+            <span>Name</span>
+            <span>Game Title</span>
+            <span>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+              <a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
+            </span>
+          </div>
+        </div>
+      </block>
+    </bar>
+  </block>
+
+  <block class="justify-center items-center">
+    <h4>an amazon company</h4>
+  </block>
+</div>
+</div>
diff --git a/pages/live/index.html b/pages/live/index.html
index ebffbaf..5cb1e37 100644
--- a/pages/live/index.html
+++ b/pages/live/index.html
@@ -2,34 +2,46 @@
   let req = new GetJson("/api/stream/1");
   let link_req = new GetJson("/api/stream/1/links");
 </script>
+<script src="https://player.twitch.tv/js/embed/v1.js"></script>
 
 <div x-init="Stream = await req.theData()" x-data="{Stream: {}}">
-  <div class="flex justify-center items-center w-full bg-gray-300 text-gray-950 text-center aspect-video">
-    <span>Stream Viewer</span>
+  <div id="twitch-player" class="flex justify-center items-center w-full bg-gray-300 text-gray-950 text-center aspect-video">
   </div>
 
   <div class="p-6 flex flex-col justify-center">
-  <div>
-    <h2>Links Found in Chat</h2>
-    <ul x-init="links = await link_req.theData()" x-data="{links: {}}">
-      <template x-for="item in links">
-        <li><a x-text="item.description" x-bind:href="item.url"></a></li>
-      </template>
-    </ul>
-  </div>
+    <div>
+      <h2>Links Found in Chat</h2>
+      <ul x-init="links = await link_req.theData()" x-data="{links: {}}">
+        <template x-for="item in links">
+          <li><a x-text="item.description" x-bind:href="item.url"></a></li>
+        </template>
+      </ul>
+    </div>
 
-  <form action="/api/link" method="POST">
-    <card class="card">
-      <top>Submit a Link</top>
-      <middle>
-        <input id="stream_id" name="stream_id" type="hidden" value="1">
-        <input id="url" name="url" type="text" placeholder="Link Url">
-        <input id="description" name="description" type="text" placeholder="Description">
-      </middle>
-      <bottom>
-        <button id="submit" type="submit">Send It</button>
-      </bottom>
-    </card>
-  </form>
+    <form action="/api/link" method="POST">
+      <card class="card">
+        <top>Submit a Link</top>
+        <middle>
+          <input id="stream_id" name="stream_id" type="hidden" value="1">
+          <input id="url" name="url" type="text" placeholder="Link Url">
+          <input id="description" name="description" type="text" placeholder="Description">
+        </middle>
+        <bottom>
+          <button id="submit" type="submit">Send It</button>
+        </bottom>
+      </card>
+    </form>
   </div>
 </div>
+
+<script>
+  var options = {
+    width: "100%",
+    height: "100%",
+    autoplay: false,
+    muted: true,
+    channel: "zedashaw"
+  };
+  var player = new Twitch.Player("twitch-player", options);
+  player.setVolume(0.5);
+</script>
diff --git a/static/input_style.css b/static/input_style.css
index f0ac8a7..5570f2d 100644
--- a/static/input_style.css
+++ b/static/input_style.css
@@ -117,7 +117,6 @@ shape.video {
   @apply w-full aspect-video;
 }
 
-
 block {
   @apply flex flex-col pl-4 pr-4 pb-10 pt-4 gap-4;
 }
diff --git a/static/style.css b/static/style.css
index 3c947ef..e252608 100644
--- a/static/style.css
+++ b/static/style.css
@@ -49,6 +49,7 @@
     --font-weight-bold: 700;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
@@ -212,12 +213,42 @@
   .static {
     position: static;
   }
+  .end-0 {
+    inset-inline-end: calc(var(--spacing) * 0);
+  }
   .top-3 {
     top: calc(var(--spacing) * 3);
   }
+  .top-20 {
+    top: calc(var(--spacing) * 20);
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+  .bottom-6 {
+    bottom: calc(var(--spacing) * 6);
+  }
+  .bottom-8 {
+    bottom: calc(var(--spacing) * 8);
+  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
+  .left-30 {
+    left: calc(var(--spacing) * 30);
+  }
+  .left-40 {
+    left: calc(var(--spacing) * 40);
+  }
   .block {
     display: block;
   }
@@ -239,6 +270,21 @@
   .table-row {
     display: table-row;
   }
+  .aspect-\[9\/12\]\! {
+    aspect-ratio: 9/12 !important;
+  }
+  .aspect-\[9\/16\] {
+    aspect-ratio: 9/16;
+  }
+  .aspect-\[9\/16\]\! {
+    aspect-ratio: 9/16 !important;
+  }
+  .aspect-\[10\/16\]\! {
+    aspect-ratio: 10/16 !important;
+  }
+  .aspect-square\! {
+    aspect-ratio: 1 / 1 !important;
+  }
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
@@ -255,9 +301,18 @@
   .max-h-10 {
     max-height: calc(var(--spacing) * 10);
   }
+  .max-h-15 {
+    max-height: calc(var(--spacing) * 15);
+  }
   .max-h-15\! {
     max-height: calc(var(--spacing) * 15) !important;
   }
+  .max-h-20 {
+    max-height: calc(var(--spacing) * 20);
+  }
+  .max-h-30 {
+    max-height: calc(var(--spacing) * 30);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -267,6 +322,15 @@
   .w-full {
     width: 100%;
   }
+  .max-w-15 {
+    max-width: calc(var(--spacing) * 15);
+  }
+  .max-w-20 {
+    max-width: calc(var(--spacing) * 20);
+  }
+  .max-w-30 {
+    max-width: calc(var(--spacing) * 30);
+  }
   .min-w-md {
     min-width: var(--container-md);
   }
@@ -285,6 +349,9 @@
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -306,6 +373,15 @@
   .gap-0\! {
     gap: calc(var(--spacing) * 0) !important;
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -321,6 +397,9 @@
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -349,6 +428,10 @@
       }
     }
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .border-1 {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -378,6 +461,9 @@
   .border-gray-500 {
     border-color: var(--color-gray-500);
   }
+  .border-gray-700 {
+    border-color: var(--color-gray-700);
+  }
   .btn-alert {
     background-color: var(--color-red-800) !important;
     color: var(--color-gray-50) !important;
@@ -410,6 +496,9 @@
   .bg-gray-600 {
     background-color: var(--color-gray-600);
   }
+  .bg-gray-700 {
+    background-color: var(--color-gray-700);
+  }
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
@@ -419,21 +508,18 @@
   .bg-green-400\! {
     background-color: var(--color-green-400) !important;
   }
-  .fill-gray-50 {
-    fill: var(--color-gray-50);
-  }
-  .stroke-gray-50 {
-    stroke: var(--color-gray-50);
-  }
-  .stroke-gray-50\! {
-    stroke: var(--color-gray-50) !important;
-  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-2\! {
     padding: calc(var(--spacing) * 2) !important;
   }
@@ -467,6 +553,12 @@
   .text-center {
     text-align: center;
   }
+  .text-left {
+    text-align: left;
+  }
+  .align-top {
+    vertical-align: top;
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -479,6 +571,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
   .text-xl\! {
     font-size: var(--text-xl) !important;
     line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
@@ -494,6 +590,9 @@
   .text-gray-50 {
     color: var(--color-gray-50);
   }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
   .text-gray-950 {
     color: var(--color-gray-950);
   }
@@ -506,11 +605,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .\*\:stroke-gray-50 {
-    :is(& > *) {
-      stroke: var(--color-gray-50);
-    }
-  }
   .\*\:text-nowrap {
     :is(& > *) {
       text-wrap: nowrap;