import { html } from "https://esm.town/v/stevekrouse/html";
import { sparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVG";
export default async function (req: Request): Promise<Response> {
const data = [5, 3, 9, 6, 5, 9, 7, 3, 5, 2, 6];
const bodyContent = `
<div>
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:crawl 10s infinite;">
<div style="margin-top:100px;text-align:center;">
${await sparklineSVG(data)}
</div>
</div>
<style>
@keyframes crawl {
0% { top: 5%; left: 5%; }
25% { top: 5%; left: 95%; }
50% { top: 95%; left: 95%; }
75% { top: 95%; left: 5%; }
100% { top: 5%; left: 5%; }
}
</style>
`;
return html(bodyContent);
}