stylized download page
This commit is contained in:
Michael Freno
@@ -1,8 +1,11 @@
|
|||||||
import { Title, Meta } from "@solidjs/meta";
|
import { Title, Meta } from "@solidjs/meta";
|
||||||
import { A } from "@solidjs/router";
|
import { A } from "@solidjs/router";
|
||||||
|
import { createSignal, onMount, onCleanup } from "solid-js";
|
||||||
import DownloadOnAppStore from "~/components/icons/DownloadOnAppStore";
|
import DownloadOnAppStore from "~/components/icons/DownloadOnAppStore";
|
||||||
|
|
||||||
export default function DownloadsPage() {
|
export default function DownloadsPage() {
|
||||||
|
const [glitchText, setGlitchText] = createSignal("$ downloads");
|
||||||
|
|
||||||
const download = (assetName: string) => {
|
const download = (assetName: string) => {
|
||||||
fetch(`/api/downloads/public/${assetName}`)
|
fetch(`/api/downloads/public/${assetName}`)
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
@@ -13,6 +16,34 @@ export default function DownloadsPage() {
|
|||||||
.catch((error) => console.error(error));
|
.catch((error) => console.error(error));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
onCleanup(() => {
|
||||||
|
clearInterval(glitchInterval);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Title>Downloads | Michael Freno</Title>
|
<Title>Downloads | Michael Freno</Title>
|
||||||
@@ -21,90 +52,116 @@ export default function DownloadsPage() {
|
|||||||
content="Download Life and Lineage, Shapes with Abigail, and Cork for macOS. Available on iOS, Android, and macOS."
|
content="Download Life and Lineage, Shapes with Abigail, and Cork for macOS. Available on iOS, Android, and macOS."
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="bg-base min-h-screen pt-[15vh] pb-12">
|
<div class="bg-base relative min-h-screen overflow-hidden px-4 pt-[15vh] pb-12 md:px-8">
|
||||||
<div class="text-text text-center text-3xl tracking-widest">
|
{/* Subtle scanline effect */}
|
||||||
Downloads
|
<div class="pointer-events-none absolute inset-0 opacity-5">
|
||||||
|
<div
|
||||||
|
class="h-full w-full"
|
||||||
|
style={{
|
||||||
|
"background-image":
|
||||||
|
"repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px)"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pt-12">
|
<div class="relative z-10">
|
||||||
<div class="text-text text-center text-xl tracking-wide">
|
<div class="text-text mb-12 font-mono text-3xl tracking-wider">
|
||||||
Life and Lineage
|
<span class="text-green">freno@downloads</span>
|
||||||
<br />
|
<span class="text-subtext1">:</span>
|
||||||
|
<span class="text-blue">~</span>
|
||||||
|
<span class="text-subtext1 ml-2">{glitchText()}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-evenly">
|
<div class="mx-auto max-w-5xl space-y-16">
|
||||||
<div class="flex w-1/3 flex-col">
|
{/* Life and Lineage */}
|
||||||
<div class="text-center text-lg">Android</div>
|
<div class="border-overlay0 rounded-lg border p-6 md:p-8">
|
||||||
<button
|
<h2 class="text-text mb-6 font-mono text-2xl">
|
||||||
onClick={() => download("lineage")}
|
<span class="text-yellow">{">"}</span> Life and Lineage
|
||||||
class="bg-blue mx-auto mt-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
|
</h2>
|
||||||
>
|
|
||||||
Download APK
|
<div class="flex flex-col gap-8 md:flex-row md:justify-around">
|
||||||
</button>
|
<div class="flex flex-col items-center gap-3">
|
||||||
<div class="mt-2 text-center text-sm italic">
|
<span class="text-subtext0 font-mono text-sm">
|
||||||
Note the android version is not well tested, and has performance
|
platform: android
|
||||||
issues.
|
</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"
|
||||||
|
>
|
||||||
|
download.apk
|
||||||
|
</button>
|
||||||
|
<span class="text-subtext1 max-w-xs text-center text-xs italic">
|
||||||
|
# android build not optimized
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center gap-3">
|
||||||
|
<span class="text-subtext0 font-mono text-sm">
|
||||||
|
platform: ios
|
||||||
|
</span>
|
||||||
|
<A
|
||||||
|
class="transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
||||||
|
href="https://apps.apple.com/us/app/life-and-lineage/id6737252442"
|
||||||
|
>
|
||||||
|
<DownloadOnAppStore size={50} />
|
||||||
|
</A>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col">
|
{/* Shapes with Abigail */}
|
||||||
<div class="text-center text-lg">iOS</div>
|
<div class="border-overlay0 rounded-lg border p-6 md:p-8">
|
||||||
<A
|
<h2 class="text-text mb-6 font-mono text-2xl">
|
||||||
class="my-auto transition-all duration-200 ease-out active:scale-95"
|
<span class="text-yellow">{">"}</span> Shapes with Abigail!
|
||||||
href="https://apps.apple.com/us/app/life-and-lineage/id6737252442"
|
</h2>
|
||||||
>
|
|
||||||
<DownloadOnAppStore size={50} />
|
|
||||||
</A>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pt-12">
|
<div class="flex flex-col gap-8 md:flex-row md:justify-around">
|
||||||
<div class="text-center text-xl tracking-wide">
|
<div class="flex flex-col items-center gap-3">
|
||||||
Shapes with Abigail!
|
<span class="text-subtext0 font-mono text-sm">
|
||||||
<br />
|
platform: android
|
||||||
(apk and iOS)
|
</span>
|
||||||
</div>
|
<button
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-evenly">
|
<div class="flex flex-col items-center gap-3">
|
||||||
<div class="flex flex-col">
|
<span class="text-subtext0 font-mono text-sm">
|
||||||
<div class="text-center text-lg">Android</div>
|
platform: ios
|
||||||
<button
|
</span>
|
||||||
onClick={() => download("shapes-with-abigail")}
|
<A
|
||||||
class="bg-blue mx-auto mt-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
|
class="transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
||||||
>
|
href="https://apps.apple.com/us/app/shapes-with-abigail/id6474561117"
|
||||||
Download APK
|
>
|
||||||
</button>
|
<DownloadOnAppStore size={50} />
|
||||||
|
</A>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col">
|
{/* Cork */}
|
||||||
<div class="text-center text-lg">iOS</div>
|
<div class="border-overlay0 rounded-lg border p-6 md:p-8">
|
||||||
<A
|
<h2 class="text-text mb-6 font-mono text-2xl">
|
||||||
class="my-auto transition-all duration-200 ease-out active:scale-95"
|
<span class="text-yellow">{">"}</span> Cork
|
||||||
href="https://apps.apple.com/us/app/shapes-with-abigail/id6474561117"
|
</h2>
|
||||||
>
|
|
||||||
<DownloadOnAppStore size={50} />
|
|
||||||
</A>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pt-12">
|
<div class="flex flex-col items-center gap-3">
|
||||||
<div class="text-text text-center text-xl tracking-wide">
|
<span class="text-subtext0 font-mono text-sm">
|
||||||
Cork
|
platform: macOS (13+)
|
||||||
<br />
|
</span>
|
||||||
(macOS 13 Ventura or later)
|
<button
|
||||||
</div>
|
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"
|
||||||
<div class="flex justify-center">
|
>
|
||||||
<button
|
download.zip
|
||||||
onClick={() => download("cork")}
|
</button>
|
||||||
class="bg-blue my-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
|
<span class="text-subtext1 text-xs">
|
||||||
>
|
# unzip → drag to /Applications
|
||||||
Download app
|
</span>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="text-center text-sm">
|
|
||||||
Just unzip and drag into 'Applications' folder
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user