<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/global.css">
<link rel="stylesheet" href="/color.css">
<link rel="stylesheet" href="/blockstart.css">
<title>ZedShaw's Game Thing</title>
<script defer src="/js/alpine.js"></script>
<script src="/js/code.js"></script>
<script>
let req = new GetJson("/api/live/index.json");
</script>
</head>
<body x-init="Stream = await req.theData()" x-data="{Stream: {}}">
<header>
<a href="/">🏡</a> <span>Zed's Game Dev Website Yay</span>
</header>
<blockstart>
<shape style="--w: 100%; --h: 350px">
Stream Viewer
</shape>
<block>
<h2>Links Found in Chat</h2>
<ul>
<template x-for="item in Stream.links">
<li><a x-text="item.description" x-bind:href="item.url"></a></li>
</template>
</ul>
</block>
<form action="/api/link" method="POST">
<card>
<top>Submit a Link</top>
<middle>
<input type="text" placeholder="Link Url">
</middle>
</card>
<buttons>
<button type="submit">Send It</button>
</buttons>
</form>
</blockstart>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>