improve display views, add random generation for demo version, improve badge flex, add ephemeral note

This commit is contained in:
2024-12-22 10:28:50 -06:00
parent 9f142327b9
commit b88296c410
3 changed files with 20 additions and 6 deletions

View File

@@ -12,14 +12,20 @@ type SessionData = {
};
const StatefulDemo = ({ class: className }: StatefulDemoProps) => {
const randomBits = (bits: number) =>
Math.floor(Math.random() * 2 ** bits)
.toString(16)
.padStart(bits / 4, "0")
.toUpperCase();
const [session, setSession] = useState<SessionData | null>({
id: "0x59AF5BC09",
downloads: ["0xABF4", "0x1F3A", "0x2F3A"],
id: "0×" + randomBits(32),
downloads: Array.from({ length: 7 }).map(() => "0×" + randomBits(16)),
});
return (
<div class={cn(className, "px-5 leading-6")}>
<p class="mt-3">
<p class="mt-3 mb-3">
This demo uses websockets to communicate between the server and the
browser. Each download gets a unique identifier bound to the user
session.
@@ -33,9 +39,10 @@ const StatefulDemo = ({ class: className }: StatefulDemoProps) => {
</>
) : null}
</p>
<div>
<div class="flex flex-wrap justify-center gap-y-2.5">
{session?.downloads.map((download) => (
<Badge
className="grow-0"
onClick={function onClick() {
const audio = new Audio("/notify.wav");
audio.volume = 0.3;
@@ -46,6 +53,13 @@ const StatefulDemo = ({ class: className }: StatefulDemoProps) => {
</Badge>
))}
</div>
<div class="mt-4 p-2 bg-zinc-900/90 rounded-md border border-zinc-700">
<p class="my-0">
The server running this is completely ephemeral, can restart at any
time, and purges data on regular intervals - at which point the
executables you've downloaded will no longer function.
</p>
</div>
</div>
);
};

View File

@@ -7,7 +7,7 @@
<link rel="preload" href="/notify.wav" as="audio" />
<title>Dynamic Preauth</title>
</head>
<body class="noise after:opacity-70">
<body class="md:noise after:opacity-70">
<slot />
</body>
</html>

View File

@@ -7,7 +7,7 @@ import "@/globals.scss";
<Base>
<div class="w-screen h-screen flex flex-col items-center middle">
<div
class="noise-card rounded-sm relative z-20 border-zinc-700 border w-full max-w-[40rem] mt-16 mb-8 shadow-lg"
class="noise-card rounded-sm relative z-20 border-zinc-700 md:border w-full max-w-[40rem] md:mt-16 mb-8 shadow-lg"
style={{
backgroundPosition:
Math.random() * 100 + "px " + Math.random() * 100 + "px",