UI consolidation
This commit is contained in:
Michael Freno
@@ -2,9 +2,29 @@ import { Title, Meta } from "@solidjs/meta";
|
||||
import { A } from "@solidjs/router";
|
||||
import { createSignal, onMount, onCleanup } from "solid-js";
|
||||
import DownloadOnAppStore from "~/components/icons/DownloadOnAppStore";
|
||||
import { glitchText } from "~/lib/client-utils";
|
||||
|
||||
const DownloadButton = ({
|
||||
onClick,
|
||||
children
|
||||
}: {
|
||||
onClick: () => void;
|
||||
children: Element | string;
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
class="bg-green hover:bg-green/90 cursor-pointer rounded-md px-6 py-3 font-mono text-base font-semibold shadow-lg transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default function DownloadsPage() {
|
||||
const [glitchText, setGlitchText] = createSignal("$ downloads");
|
||||
const [LaLText, setLaLText] = createSignal("Life and Lineage");
|
||||
const [SwAText, setSwAText] = createSignal("Shapes with Abigail!");
|
||||
const [corkText, setCorkText] = createSignal("Cork");
|
||||
|
||||
const download = (assetName: string) => {
|
||||
fetch(`/api/downloads/public/${assetName}`)
|
||||
@@ -17,30 +37,14 @@ export default function DownloadsPage() {
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
const originalText = "$ downloads";
|
||||
const glitchChars = "!@#$%^&*()_+-=[]{}|;':\",./<>?~`";
|
||||
|
||||
const glitchInterval = setInterval(() => {
|
||||
if (Math.random() > 0.9) {
|
||||
let glitched = "";
|
||||
for (let i = 0; i < originalText.length; i++) {
|
||||
if (Math.random() > 0.8) {
|
||||
glitched +=
|
||||
glitchChars[Math.floor(Math.random() * glitchChars.length)];
|
||||
} else {
|
||||
glitched += originalText[i];
|
||||
}
|
||||
}
|
||||
setGlitchText(glitched);
|
||||
|
||||
setTimeout(() => {
|
||||
setGlitchText(originalText);
|
||||
}, 80);
|
||||
}
|
||||
}, 300);
|
||||
const lalInterval = glitchText(LaLText(), setLaLText);
|
||||
const swaInterval = glitchText(SwAText(), setSwAText);
|
||||
const corkInterval = glitchText(corkText(), setCorkText);
|
||||
|
||||
onCleanup(() => {
|
||||
clearInterval(glitchInterval);
|
||||
clearInterval(lalInterval);
|
||||
clearInterval(swaInterval);
|
||||
clearInterval(corkInterval);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -65,18 +69,11 @@ export default function DownloadsPage() {
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="text-text mb-12 font-mono text-3xl tracking-wider">
|
||||
<span class="text-green">freno@downloads</span>
|
||||
<span class="text-subtext1">:</span>
|
||||
<span class="text-blue">~</span>
|
||||
<span class="text-subtext1 ml-2">{glitchText()}</span>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-5xl space-y-16">
|
||||
{/* Life and Lineage */}
|
||||
<div class="border-overlay0 rounded-lg border p-6 md:p-8">
|
||||
<h2 class="text-text mb-6 font-mono text-2xl">
|
||||
<span class="text-yellow">{">"}</span> Life and Lineage
|
||||
<span class="text-yellow">{">"}</span> {LaLText()}
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col gap-8 md:flex-row md:justify-around">
|
||||
@@ -84,12 +81,9 @@ export default function DownloadsPage() {
|
||||
<span class="text-subtext0 font-mono text-sm">
|
||||
platform: android
|
||||
</span>
|
||||
<button
|
||||
onClick={() => download("lineage")}
|
||||
class="bg-green hover:bg-green/90 rounded-md px-6 py-3 font-mono text-base font-semibold shadow-lg transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
||||
>
|
||||
<DownloadButton onClick={() => download("lineage")}>
|
||||
download.apk
|
||||
</button>
|
||||
</DownloadButton>
|
||||
<span class="text-subtext1 max-w-xs text-center text-xs italic">
|
||||
# android build not optimized
|
||||
</span>
|
||||
@@ -112,7 +106,7 @@ export default function DownloadsPage() {
|
||||
{/* Shapes with Abigail */}
|
||||
<div class="border-overlay0 rounded-lg border p-6 md:p-8">
|
||||
<h2 class="text-text mb-6 font-mono text-2xl">
|
||||
<span class="text-yellow">{">"}</span> Shapes with Abigail!
|
||||
<span class="text-yellow">{">"}</span> {SwAText()}
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col gap-8 md:flex-row md:justify-around">
|
||||
@@ -120,12 +114,11 @@ export default function DownloadsPage() {
|
||||
<span class="text-subtext0 font-mono text-sm">
|
||||
platform: android
|
||||
</span>
|
||||
<button
|
||||
<DownloadButton
|
||||
onClick={() => download("shapes-with-abigail")}
|
||||
class="bg-green hover:bg-green/90 rounded-md px-6 py-3 font-mono text-base font-semibold shadow-lg transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
||||
>
|
||||
download.apk
|
||||
</button>
|
||||
</DownloadButton>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
@@ -145,19 +138,16 @@ export default function DownloadsPage() {
|
||||
{/* Cork */}
|
||||
<div class="border-overlay0 rounded-lg border p-6 md:p-8">
|
||||
<h2 class="text-text mb-6 font-mono text-2xl">
|
||||
<span class="text-yellow">{">"}</span> Cork
|
||||
<span class="text-yellow">{">"}</span> {corkText()}
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<span class="text-subtext0 font-mono text-sm">
|
||||
platform: macOS (13+)
|
||||
</span>
|
||||
<button
|
||||
onClick={() => download("cork")}
|
||||
class="bg-green hover:bg-green/90 rounded-md px-6 py-3 font-mono text-base font-semibold shadow-lg transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
||||
>
|
||||
<DownloadButton onClick={() => download("cork")}>
|
||||
download.zip
|
||||
</button>
|
||||
</DownloadButton>
|
||||
<span class="text-subtext1 text-xs">
|
||||
# unzip → drag to /Applications
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user