stylized download page

src/routes/downloads.tsx

@@ -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="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 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 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">
+              <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">
+                  <span class="text-subtext1 max-w-xs text-center text-xs italic">
-                Note the android version is not well tested, and has performance
+                    # android build not optimized
-                issues.
+                  </span>
-              </div>
                 </div>
 
-            <div class="flex flex-col">
+                <div class="flex flex-col items-center gap-3">
-              <div class="text-center text-lg">iOS</div>
+                  <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">
+            {/* Shapes with Abigail */}
-          <div class="text-center text-xl tracking-wide">
+            <div class="border-overlay0 rounded-lg border p-6 md:p-8">
-            Shapes with Abigail!
+              <h2 class="text-text mb-6 font-mono text-2xl">
-            <br />
+                <span class="text-yellow">{">"}</span> Shapes with Abigail!
-            (apk and iOS)
+              </h2>
-          </div>
 
-          <div class="flex justify-evenly">
+              <div class="flex flex-col gap-8 md:flex-row md:justify-around">
-            <div class="flex flex-col">
+                <div class="flex flex-col items-center gap-3">
-              <div class="text-center text-lg">Android</div>
+                  <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="flex flex-col items-center gap-3">
-              <div class="text-center text-lg">iOS</div>
+                  <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>