learn-code-the-hard-way
/
zedshaw-games
Archived
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
Zed A. Shaw 3 weeks ago
parent 26f61eb68b
commit 592e1c4fd8
4 changed files with 346 additions and 38 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 203
      pages/copy/twitch.html
  2. 58
      pages/live/index.html
  3. 1
      static/input_style.css
  4. 122
      static/style.css

203
pages/copy/twitch.html
Unescape 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
Unescape View File

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

1
static/input_style.css
Unescape View File

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

122
static/style.css
Unescape View File

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