add visual flourish

src/routes/+layout.svelte

@@ -10,6 +10,9 @@
   import SplashScreen from "$lib/components/SplashScreen.svelte";
   import ErrorDialog from "$lib/components/ErrorDialog.svelte";
   import InstallPrompt from "$lib/components/InstallPrompt.svelte";
+  import { online } from "$lib/online.svelte";
+  import Offline from "$lib/components/Offline.svelte";
+  import { shaderEnabled } from "$lib/settings.svelte";
 
   type AppError = {
     message: string;
@@ -93,7 +96,7 @@
   <title>Portal BTC</title>
 </svelte:head>
 
-<div class="retro-shader">
+<div class="container" class:retro-shader={$shaderEnabled}>
   {#if !$online}
     <Offline />
   {:else if showInstallPrompt && deferredPrompt}
@@ -121,81 +124,20 @@
 </div>
 
 <style>
-  @keyframes flicker {
-    0% {
-      opacity: 0.27861;
-    }
-    5% {
-      opacity: 0.34769;
-    }
-    10% {
-      opacity: 0.23604;
-    }
-    15% {
-      opacity: 0.90626;
-    }
-    20% {
-      opacity: 0.18128;
-    }
-    25% {
-      opacity: 0.83891;
-    }
-    30% {
-      opacity: 0.65583;
-    }
-    35% {
-      opacity: 0.67807;
-    }
-    40% {
-      opacity: 0.26559;
-    }
-    45% {
-      opacity: 0.84693;
-    }
-    50% {
-      opacity: 0.96019;
-    }
-    55% {
-      opacity: 0.08594;
-    }
-    60% {
-      opacity: 0.20313;
-    }
-    65% {
-      opacity: 0.71988;
-    }
-    70% {
-      opacity: 0.53455;
-    }
-    75% {
-      opacity: 0.37288;
-    }
-    80% {
-      opacity: 0.71428;
-    }
-    85% {
-      opacity: 0.70428;
-    }
-    90% {
-      opacity: 0.7003;
-    }
-    95% {
-      opacity: 0.36108;
-    }
-    100% {
-      opacity: 0.24387;
-    }
+  .container {
+    height: 100vh;
+    max-height: 100vh;
+    width: 100vw;
+    overflow-y: auto;
   }
-
   .retro-shader {
     position: relative;
-    height: 100vh;
   }
 
   .retro-shader::before {
     content: " ";
     display: block;
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
@@ -212,13 +154,14 @@
     background-size:
       100% 2px,
       3px 100%;
+    background-attachment: fixed;
     pointer-events: none;
   }
 
   .retro-shader::after {
     content: " ";
     display: block;
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
@@ -227,7 +170,6 @@
     opacity: 0;
     z-index: 2001;
     pointer-events: none;
-    animation: flicker 0.15s infinite;
   }
 
   .settings-button-container {

src/routes/settings/+page.svelte

@@ -4,6 +4,8 @@
   import LightningSettings from "$lib/components/LightningSettings.svelte";
   import NostrWalletConnect from "$lib/components/NostrWalletConnect.svelte";
   import DangerZone from "$lib/components/DangerZone.svelte";
+  import { shaderEnabled } from "$lib/settings.svelte";
+  import ToggleSwitch from "$lib/components/ToggleSwitch.svelte";
 
   function goBack() {
     goto("/");
@@ -22,6 +24,13 @@
 
   <NostrWalletConnect />
 
+  <details class="retro-card" open>
+    <summary class="header">
+      <h2>Design</h2>
+    </summary>
+    <ToggleSwitch label="Shader" bind:checked={$shaderEnabled} />
+  </details>
+
   <div class="retro-card">
     <h2>Source Code</h2>
     <Button