site/zedshaw.games
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Finally embedded my twitch stream into the site, now just need to get links posting to work.

Browse source
This commit is contained in:
Zed A. Shaw 2025-08-18 13:56:08 -04:00
parent 26f61eb68b
commit 592e1c4fd8
4 changed files with 346 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

203
pages/copy/twitch.html Normal file
View file

@ -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>

58
pages/live/index.html
View file

@ -2,34 +2,46 @@
let req = new GetJson("/api/stream/1"); let req = new GetJson("/api/stream/1");
let link_req = new GetJson("/api/stream/1/links"); let link_req = new GetJson("/api/stream/1/links");
</script> </script>
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<div x-init="Stream = await req.theData()" x-data="{Stream: {}}"> <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"> <div id="twitch-player" class="flex justify-center items-center w-full bg-gray-300 text-gray-950 text-center aspect-video">
<span>Stream Viewer</span>
</div> </div>
<div class="p-6 flex flex-col justify-center"> <div class="p-6 flex flex-col justify-center">
<div> <div>
<h2>Links Found in Chat</h2> <h2>Links Found in Chat</h2>
<ul x-init="links = await link_req.theData()" x-data="{links: {}}"> <ul x-init="links = await link_req.theData()" x-data="{links: {}}">
<template x-for="item in links"> <template x-for="item in links">
<li><a x-text="item.description" x-bind:href="item.url"></a></li> <li><a x-text="item.description" x-bind:href="item.url"></a></li>
</template> </template>
</ul> </ul>
</div> </div>
<form action="/api/link" method="POST"> <form action="/api/link" method="POST">
<card class="card"> <card class="card">
<top>Submit a Link</top> <top>Submit a Link</top>
<middle> <middle>
<input id="stream_id" name="stream_id" type="hidden" value="1"> <input id="stream_id" name="stream_id" type="hidden" value="1">
<input id="url" name="url" type="text" placeholder="Link Url"> <input id="url" name="url" type="text" placeholder="Link Url">
<input id="description" name="description" type="text" placeholder="Description"> <input id="description" name="description" type="text" placeholder="Description">
</middle> </middle>
<bottom> <bottom>
<button id="submit" type="submit">Send It</button> <button id="submit" type="submit">Send It</button>
</bottom> </bottom>
</card> </card>
</form> </form>
</div> </div>
</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>

1
static/input_style.css
View file

@ -117,7 +117,6 @@ shape.video {
@apply w-full aspect-video; @apply w-full aspect-video;
} }
block { block {
@apply flex flex-col pl-4 pr-4 pb-10 pt-4 gap-4; @apply flex flex-col pl-4 pr-4 pb-10 pt-4 gap-4;
} }

122
static/style.css
View file

@ -49,6 +49,7 @@
--font-weight-bold: 700; --font-weight-bold: 700;
--radius-sm: 0.25rem; --radius-sm: 0.25rem;
--radius-md: 0.375rem; --radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem; --radius-xl: 0.75rem;
--aspect-video: 16 / 9; --aspect-video: 16 / 9;
--default-transition-duration: 150ms; --default-transition-duration: 150ms;
@ -212,12 +213,42 @@
.static { .static {
position: static; position: static;
} }
.end-0 {
inset-inline-end: calc(var(--spacing) * 0);
}
.top-3 { .top-3 {
top: calc(var(--spacing) * 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-3 {
left: calc(var(--spacing) * 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 { .block {
display: block; display: block;
} }
@ -239,6 +270,21 @@
.table-row { .table-row {
display: 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-video {
aspect-ratio: var(--aspect-video); aspect-ratio: var(--aspect-video);
} }
@ -255,9 +301,18 @@
.max-h-10 { .max-h-10 {
max-height: calc(var(--spacing) * 10); max-height: calc(var(--spacing) * 10);
} }
.max-h-15 {
max-height: calc(var(--spacing) * 15);
}
.max-h-15\! { .max-h-15\! {
max-height: calc(var(--spacing) * 15) !important; 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-h-screen {
min-height: 100vh; min-height: 100vh;
} }
@ -267,6 +322,15 @@
.w-full { .w-full {
width: 100%; 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-w-md {
min-width: var(--container-md); min-width: var(--container-md);
} }
@ -285,6 +349,9 @@
.grid-cols-3 { .grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
} }
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
@ -306,6 +373,15 @@
.gap-0\! { .gap-0\! {
gap: calc(var(--spacing) * 0) !important; 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-4 {
gap: calc(var(--spacing) * 4); gap: calc(var(--spacing) * 4);
} }
@ -321,6 +397,9 @@
.rounded-full { .rounded-full {
border-radius: calc(infinity * 1px); border-radius: calc(infinity * 1px);
} }
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-md { .rounded-md {
border-radius: var(--radius-md); border-radius: var(--radius-md);
} }
@ -349,6 +428,10 @@
} }
} }
} }
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-1 { .border-1 {
border-style: var(--tw-border-style); border-style: var(--tw-border-style);
border-width: 1px; border-width: 1px;
@ -378,6 +461,9 @@
.border-gray-500 { .border-gray-500 {
border-color: var(--color-gray-500); border-color: var(--color-gray-500);
} }
.border-gray-700 {
border-color: var(--color-gray-700);
}
.btn-alert { .btn-alert {
background-color: var(--color-red-800) !important; background-color: var(--color-red-800) !important;
color: var(--color-gray-50) !important; color: var(--color-gray-50) !important;
@ -410,6 +496,9 @@
.bg-gray-600 { .bg-gray-600 {
background-color: var(--color-gray-600); background-color: var(--color-gray-600);
} }
.bg-gray-700 {
background-color: var(--color-gray-700);
}
.bg-gray-800 { .bg-gray-800 {
background-color: var(--color-gray-800); background-color: var(--color-gray-800);
} }
@ -419,21 +508,18 @@
.bg-green-400\! { .bg-green-400\! {
background-color: var(--color-green-400) !important; 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 { .p-0 {
padding: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0);
} }
.p-0\! { .p-0\! {
padding: calc(var(--spacing) * 0) !important; padding: calc(var(--spacing) * 0) !important;
} }
.p-1 {
padding: calc(var(--spacing) * 1);
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-2\! { .p-2\! {
padding: calc(var(--spacing) * 2) !important; padding: calc(var(--spacing) * 2) !important;
} }
@ -467,6 +553,12 @@
.text-center { .text-center {
text-align: center; text-align: center;
} }
.text-left {
text-align: left;
}
.align-top {
vertical-align: top;
}
.text-2xl { .text-2xl {
font-size: var(--text-2xl); font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height)); line-height: var(--tw-leading, var(--text-2xl--line-height));
@ -479,6 +571,10 @@
font-size: var(--text-sm); font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height)); 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\! { .text-xl\! {
font-size: var(--text-xl) !important; font-size: var(--text-xl) !important;
line-height: var(--tw-leading, var(--text-xl--line-height)) !important; line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
@ -494,6 +590,9 @@
.text-gray-50 { .text-gray-50 {
color: var(--color-gray-50); color: var(--color-gray-50);
} }
.text-gray-300 {
color: var(--color-gray-300);
}
.text-gray-950 { .text-gray-950 {
color: var(--color-gray-950); color: var(--color-gray-950);
} }
@ -506,11 +605,6 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: var(--tw-duration, var(--default-transition-duration));
} }
.\*\:stroke-gray-50 {
:is(& > *) {
stroke: var(--color-gray-50);
}
}
.\*\:text-nowrap { .\*\:text-nowrap {
:is(& > *) { :is(& > *) {
text-wrap: nowrap; text-wrap: nowrap;