stylized download page
This commit is contained in:
Michael Freno
@@ -1,8 +1,11 @@
|
||||
import { Title, Meta } from "@solidjs/meta";
|
||||
import { A } from "@solidjs/router";
|
||||
import { createSignal, onMount, onCleanup } from "solid-js";
|
||||
import DownloadOnAppStore from "~/components/icons/DownloadOnAppStore";
|
||||
|
||||
export default function DownloadsPage() {
|
||||
const [glitchText, setGlitchText] = createSignal("$ downloads");
|
||||
|
||||
const download = (assetName: string) => {
|
||||
fetch(`/api/downloads/public/${assetName}`)
|
||||
.then((response) => response.json())
|
||||
@@ -13,6 +16,34 @@ export default function DownloadsPage() {
|
||||
.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 (
|
||||
<>
|
||||
<Title>Downloads | Michael Freno</Title>
|
||||
@@ -21,36 +52,55 @@ export default function DownloadsPage() {
|
||||
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="text-text text-center text-3xl tracking-widest">
|
||||
Downloads
|
||||
<div class="bg-base relative min-h-screen overflow-hidden px-4 pt-[15vh] pb-12 md:px-8">
|
||||
{/* Subtle scanline effect */}
|
||||
<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 class="pt-12">
|
||||
<div class="text-text text-center text-xl tracking-wide">
|
||||
Life and Lineage
|
||||
<br />
|
||||
<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="flex justify-evenly">
|
||||
<div class="flex w-1/3 flex-col">
|
||||
<div class="text-center text-lg">Android</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
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col gap-8 md:flex-row md:justify-around">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<span class="text-subtext0 font-mono text-sm">
|
||||
platform: android
|
||||
</span>
|
||||
<button
|
||||
onClick={() => download("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"
|
||||
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
|
||||
download.apk
|
||||
</button>
|
||||
<div class="mt-2 text-center text-sm italic">
|
||||
Note the android version is not well tested, and has performance
|
||||
issues.
|
||||
</div>
|
||||
<span class="text-subtext1 max-w-xs text-center text-xs italic">
|
||||
# android build not optimized
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="text-center text-lg">iOS</div>
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<span class="text-subtext0 font-mono text-sm">
|
||||
platform: ios
|
||||
</span>
|
||||
<A
|
||||
class="my-auto transition-all duration-200 ease-out active:scale-95"
|
||||
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} />
|
||||
@@ -59,52 +109,59 @@ export default function DownloadsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-12">
|
||||
<div class="text-center text-xl tracking-wide">
|
||||
Shapes with Abigail!
|
||||
<br />
|
||||
(apk and iOS)
|
||||
</div>
|
||||
{/* 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!
|
||||
</h2>
|
||||
|
||||
<div class="flex justify-evenly">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-center text-lg">Android</div>
|
||||
<div class="flex flex-col gap-8 md:flex-row md:justify-around">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<span class="text-subtext0 font-mono text-sm">
|
||||
platform: android
|
||||
</span>
|
||||
<button
|
||||
onClick={() => download("shapes-with-abigail")}
|
||||
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="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
|
||||
download.apk
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="text-center text-lg">iOS</div>
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<span class="text-subtext0 font-mono text-sm">
|
||||
platform: ios
|
||||
</span>
|
||||
<A
|
||||
class="my-auto transition-all duration-200 ease-out 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"
|
||||
>
|
||||
<DownloadOnAppStore size={50} />
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-12">
|
||||
<div class="text-text text-center text-xl tracking-wide">
|
||||
Cork
|
||||
<br />
|
||||
(macOS 13 Ventura or later)
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
{/* 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
|
||||
</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-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"
|
||||
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 app
|
||||
download.zip
|
||||
</button>
|
||||
<span class="text-subtext1 text-xs">
|
||||
# unzip → drag to /Applications
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-center text-sm">
|
||||
Just unzip and drag into 'Applications' folder
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user