mirror of
https://github.com/Xevion/dynamic-preauth.git
synced 2025-12-09 16:07:06 -06:00
improve display views, add random generation for demo version, improve badge flex, add ephemeral note
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user