add visual flourish

offline warning
update splash screen
2025-07-17 18:50:41 +02:00 · 2025-07-17 18:14:47 +02:00 · 2025-07-17 17:05:32 +02:00 · 2025-07-16 19:08:43 +02:00
12 changed files with 614 additions and 193 deletions
--- a/src/lib/components/Offline.svelte
+++ b/src/lib/components/Offline.svelte
@ -0,0 +1,72 @@
+<div class="offline-container">
+  <div class="flicker">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M2.28 3L1 4.27l1.47 1.47c-.43.26-.86.55-1.27.86L3 9c.53-.4 1.08-.75 1.66-1.07l2.23 2.23c-.74.34-1.45.75-2.09 1.24l1.8 2.4c.78-.58 1.66-1.03 2.6-1.33L11.75 15c-1.25.07-2.41.5-3.35 1.2L12 21l2.46-3.27L17.74 21L19 19.72M12 3c-2.15 0-4.2.38-6.1 1.07l2.39 2.4C9.5 6.16 10.72 6 12 6c3.38 0 6.5 1.11 9 3l1.8-2.4C19.79 4.34 16.06 3 12 3m0 6c-.38 0-.75 0-1.12.05l3.19 3.2c1.22.28 2.36.82 3.33 1.55l1.8-2.4C17.2 9.89 14.7 9 12 9"
+      ></path>
+    </svg>
+    <h1>YOU ARE OFFLINE</h1>
+  </div>
+  <p>Please check your internet connection.</p>
+  <p class="explanation">
+    An internet connection is required to sync your wallet and make
+    transactions.
+  </p>
+</div>
+
+<style>
+  .offline-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    text-align: center;
+    color: var(--text-color);
+    font-family: "Press Start 2P", "VT323", monospace, sans-serif;
+    text-shadow: 1px 1px 0 #000;
+  }
+
+  h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-top: 1rem;
+    color: var(--primary-color);
+  }
+
+  p {
+    font-size: 1rem;
+    margin-top: 1rem;
+    color: var(--accent-color);
+  }
+
+  .explanation {
+    margin-top: 2rem;
+    max-width: 40ch;
+    line-height: 1.5;
+    color: var(--text-color);
+    font-size: 0.8rem;
+    opacity: 0.8;
+  }
+
+  .flicker {
+    animation: flicker 1.5s infinite;
+  }
+
+  @keyframes flicker {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.7;
+    }
+  }
+</style>
--- a/src/lib/components/PasswordDialog.svelte
+++ b/src/lib/components/PasswordDialog.svelte
@ -6,7 +6,8 @@
    openWallet,
  } from "$lib/wallet.svelte";
  import { browser } from "$app/environment";
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
+  import { fly } from "svelte/transition";

  let { onunlock }: { onunlock: () => void } = $props();

@ -14,8 +15,11 @@
  let password = $state("");
  let error = $state("");
  let isValidating = $state(false);
+  let show = $state(false);

-  onMount(() => {
+  onMount(async () => {
+    show = true;
+    await tick();
    dialogEl?.showModal();
  });

@ -41,45 +45,50 @@
  }
 </script>

-<dialog bind:this={dialogEl}>
-  <h2>Unlock Wallet</h2>
-  <p>Enter your wallet password to decrypt your seed.</p>
-  {#if error}
-    <p
-      style="color: var(--error-color); font-size: 0.7rem; margin-bottom: 1rem;"
-    >
-      {error}
-    </p>
-  {/if}
-  <input
-    type="password"
-    class="retro-input"
-    bind:value={password}
-    placeholder="Password"
-    disabled={isValidating}
-    onkeydown={(e) => {
-      if (e.key === "Enter" && !isValidating) {
-        attemptUnlock();
-      }
-    }}
-  />
-  <div style="margin-top:1rem;text-align:center;">
-    <button
-      class="retro-btn primary"
+{#if show}
+  <dialog
+    bind:this={dialogEl}
+    transition:fly={{ y: 250, duration: 250, delay: 0.5 }}
+  >
+    <h2>Unlock Wallet</h2>
+    <p>Enter your wallet password to decrypt your seed.</p>
+    {#if error}
+      <p
+        style="color: var(--error-color); font-size: 0.7rem; margin-bottom: 1rem;"
+      >
+        {error}
+      </p>
+    {/if}
+    <input
+      type="password"
+      class="retro-input"
+      bind:value={password}
+      placeholder="Password"
      disabled={isValidating}
-      onclick={() => {
-        attemptUnlock();
-      }}>{isValidating ? "Validating..." : "Unlock"}</button
-    >
-  </div>
-</dialog>
+      onkeydown={(e) => {
+        if (e.key === "Enter" && !isValidating) {
+          attemptUnlock();
+        }
+      }}
+    />
+    <div style="margin-top:1rem;text-align:center;">
+      <button
+        class="retro-btn primary"
+        disabled={isValidating}
+        onclick={() => {
+          attemptUnlock();
+        }}>{isValidating ? "Validating..." : "Unlock"}</button
+      >
+    </div>
+  </dialog>
+{/if}

 <style>
  dialog {
    z-index: 2000;
  }
  dialog::backdrop {
-    background: rgba(0, 0, 0, 1);
+    background: transparent;
  }
  h2 {
    margin-top: 0;
--- a/src/lib/components/PaymentHistoryItem.svelte
+++ b/src/lib/components/PaymentHistoryItem.svelte
@ -59,10 +59,7 @@
            ...{payment.txId?.slice(-16)}
          </a>
        {:else if (payment as Payment).details.type === "lightning"}
-          <a
-            href="https://liquid.network/tx/{payment.claimTxId}"
-            target="_blank"
-          >
+          <a href="https://liquid.network/tx/{payment.txId}" target="_blank">
            ...{payment.txId?.slice(-16)}
          </a>
        {/if}
--- a/src/lib/components/SplashScreen.svelte
+++ b/src/lib/components/SplashScreen.svelte
@ -1,158 +1,247 @@
 <script lang="ts">
-  let containerEl: HTMLDivElement;
-  let mouseX = $state(0);
-  let mouseY = $state(0);
-
-  function handleMouseMove(event: MouseEvent) {
-    if (!containerEl) return;
-    const { clientX, clientY } = event;
-    const { left, top, width, height } = containerEl.getBoundingClientRect();
-    mouseX = (clientX - left - width / 2) / (width / 2);
-    mouseY = (clientY - top - height / 2) / (height / 2);
-  }
+  let { closing = false } = $props();
 </script>

-<div
-  class="splash-screen"
-  bind:this={containerEl}
-  onmousemove={handleMouseMove}
-  onmouseleave={() => {
-    mouseX = 0;
-    mouseY = 0;
-  }}
->
-  <div class="grid-container" style="--mouse-x: {mouseX}; --mouse-y: {mouseY};">
-    <div class="grid" />
+<div class="splash-screen" class:closing>
+  <div class="content">
+    <div class="logo-container">
+      <img src="/logo-no-text.png" alt="Portal BTC Logo" class="logo" />
+    </div>
+
+    <div class="branding">
+      <h1 class="app-name">
+        <span class="portal">PORTAL</span><span class="btc">BTC</span>
+      </h1>
+      <p class="tagline">Your portal to everything Bitcoin</p>
+    </div>
+
+    <div class="loading-container">
+      <div class="loading-bar">
+        <div class="loading-fill"></div>
+      </div>
+      <div class="loading-text">Initializing wallet...</div>
+    </div>
  </div>
-  <div class="logo-container">
-    <img src="/favicon.png" alt="Portal BTC Logo" class="logo" />
+  <div class="arx-branding">
+    <span class="powered-by">Powered by</span>
+    <img src="/arx-logo.svg" alt="Arx" class="arx-logo" />
  </div>
-  <div class="scanlines"></div>
 </div>

 <style>
+  .splash-screen.closing {
+    animation: wipe-out 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
+  }
+
+  @keyframes wipe-out {
+    from {
+      clip-path: circle(150% at top right);
+    }
+    to {
+      clip-path: circle(0% at top right);
+    }
+  }
+
  .splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
-    background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
-    color: white;
-    opacity: 1;
-    transition: opacity 1s ease-out;
    overflow: hidden;
  }

-  .grid-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    perspective: 400px;
-    transform-style: preserve-3d;
-    transform: rotateX(calc(var(--mouse-y) * -5deg))
-      rotateY(calc(var(--mouse-x) * 5deg));
-    transition: transform 0.2s linear;
-  }
-
-  .grid {
-    position: absolute;
-    width: 250vw;
-    height: 250vh;
-    top: -75vh;
-    left: -75vw;
-    background-image:
-      linear-gradient(rgba(0, 255, 255, 0.4) 1px, transparent 1px),
-      linear-gradient(to right, rgba(0, 255, 255, 0.4) 1px, transparent 1px);
-    background-size: 50px 50px;
-    transform: rotateX(80deg) translateY(200px) translateZ(-300px);
-    animation: moveGrid 5s linear infinite;
-    will-change: background-position;
-  }
-
-  @keyframes moveGrid {
-    from {
-      background-position: 0 0;
-    }
-    to {
-      background-position: 0 -100px;
-    }
+  .content {
+    text-align: center;
  }

  .logo-container {
    position: relative;
-    width: 40vw;
-    max-width: 300px;
-    animation: flicker 3s infinite;
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 2rem;
+    animation: logoFloat 4s ease-in-out infinite;
+  }
+
+  @keyframes logoFloat {
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
  }

  .logo {
-    width: 100%;
-    height: auto;
-    object-fit: contain;
-    animation: pulse 2.5s infinite ease-in-out;
-    filter: drop-shadow(0 0 7px #ff00ff) drop-shadow(0 0 15px #00ffff)
-      drop-shadow(0 0 20px #ff00ff);
-  }
-
-  @keyframes pulse {
-    0% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    100% {
-      transform: scale(1);
-    }
-  }
-
-  @keyframes flicker {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.95;
-    }
-    52% {
-      opacity: 1;
-    }
-    55% {
-      opacity: 0.98;
-    }
-    56% {
-      opacity: 1;
-    }
-  }
-
-  .scanlines {
-    position: fixed;
-    top: 0;
-    left: 0;
+    position: relative;
    width: 100%;
    height: 100%;
-    background: linear-gradient(
-      to bottom,
-      rgba(18, 16, 16, 0) 50%,
-      rgba(0, 0, 0, 0.25) 50%
-    );
-    background-size: 100% 4px;
-    animation: scanlines 0.2s linear infinite;
-    pointer-events: none;
-    z-index: 10000;
+    object-fit: contain;
+    filter: drop-shadow(0 0 10px black) drop-shadow(0 0 20px black);
  }

-  @keyframes scanlines {
+  .branding {
+    margin-bottom: 1.5rem;
+  }
+
+  .app-name {
+    font-size: 2rem;
+    margin: 0 0 1rem 0;
+    letter-spacing: 0.2em;
+    line-height: 1.2;
+  }
+
+  .portal {
+    color: var(--primary-color);
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+  }
+
+  .btc {
+    color: var(--accent-color);
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+  }
+
+  .tagline {
+    font-size: 0.6rem;
+    color: rgba(255, 255, 255, 0.8);
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+    margin: 0;
+    letter-spacing: 0.1em;
+    animation: fadeInUp 1s ease-out 1s both;
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .loading-container {
+    animation: fadeInUp 1s ease-out 1.5s both;
+  }
+
+  .loading-bar {
+    width: 200px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--accent-color);
+    border-radius: 2px;
+    margin: 0 auto 1rem;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .loading-fill {
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      var(--primary-color) 0%,
+      var(--accent-color) 50%,
+      var(--primary-color) 100%
+    );
+    border-radius: 2px;
+    animation: loadingProgress 3s ease-in-out infinite;
+  }
+
+  @keyframes loadingProgress {
    0% {
-      background-position: 0 0;
+      width: 0%;
+      transform: translateX(-100%);
+    }
+    50% {
+      width: 100%;
+      transform: translateX(0%);
    }
    100% {
-      background-position: 0 4px;
+      width: 100%;
+      transform: translateX(100%);
+    }
+  }
+
+  .loading-text {
+    font-size: 0.5rem;
+    color: rgba(255, 255, 255, 0.9);
+    letter-spacing: 0.1em;
+    animation: loadingText 2s ease-in-out infinite;
+  }
+
+  @keyframes loadingText {
+    0%,
+    20% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    80%,
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .arx-branding {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    opacity: 0;
+    animation: fadeInUp 1s ease-out 2s both;
+  }
+
+  .powered-by {
+    font-size: 0.85rem;
+    color: white;
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+  }
+
+  .arx-logo {
+    height: 2rem;
+    filter: drop-shadow(0 0 5px black);
+  }
+
+  @media (max-width: 768px) {
+    .app-name {
+      font-size: 1.5rem;
+    }
+
+    .tagline {
+      font-size: 0.5rem;
+    }
+
+    .logo-container {
+      width: 100px;
+      height: 100px;
+    }
+
+    .loading-bar {
+      width: 150px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .app-name {
+      font-size: 1.2rem;
+    }
+
+    .logo-container {
+      width: 80px;
+      height: 80px;
    }
  }
 </style>
--- a/src/lib/components/ToggleSwitch.svelte
+++ b/src/lib/components/ToggleSwitch.svelte
@ -0,0 +1,88 @@
+<script lang="ts">
+  let {
+    label,
+    checked = $bindable(),
+  }: {
+    label: string;
+    checked: boolean;
+  } = $props();
+</script>
+
+<div class="switch-container">
+  <span class="switch-label">{label}</span>
+  <label class="switch">
+    <input type="checkbox" bind:checked />
+    <div class="track">
+      <div class="knob" />
+    </div>
+  </label>
+</div>
+
+<style>
+  .switch-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    font-family: "Press Start 2P", monospace;
+  }
+
+  .switch-label {
+    font-size: 0.8rem;
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 90px;
+    height: 40px;
+    cursor: pointer;
+    user-select: none;
+    transform: translateY(-50%);
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .track {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      145deg,
+      var(--surface-alt-color) 0%,
+      #1a1a1a 100%
+    );
+    border: 3px solid var(--accent-color);
+    border-radius: 4px;
+    box-shadow: 2px 2px 0 #000;
+  }
+
+  .switch:active .track {
+    transform: translate(1px, 1px);
+    box-shadow: 1px 1px 0 #000;
+  }
+
+  .knob {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 40px;
+    height: 30px;
+    background: linear-gradient(145deg, var(--primary-color) 0%, #d4af00 100%);
+    border: 2px solid #000;
+    border-radius: 2px;
+    transition: transform 0.2s ease-in-out;
+    z-index: 1;
+    box-shadow:
+      inset 0 0 2px rgba(255, 255, 255, 0.3),
+      inset 0 0 5px rgba(0, 0, 0, 0.5);
+  }
+
+  input:checked ~ .track .knob {
+    transform: translateX(41px);
+  }
+</style>
--- a/src/lib/online.svelte.ts
+++ b/src/lib/online.svelte.ts
@ -0,0 +1,24 @@
+import { writable } from "svelte/store";
+
+function createOnline() {
+  const { subscribe, set } = writable(navigator.onLine);
+
+  function handleOnline() {
+    set(true);
+  }
+
+  function handleOffline() {
+    set(false);
+  }
+
+  if (typeof window !== "undefined") {
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+  }
+
+  return {
+    subscribe,
+  };
+}
+
+export const online = createOnline();
--- a/src/lib/settings.svelte.ts
+++ b/src/lib/settings.svelte.ts
@ -0,0 +1,28 @@
+import { persistentDbWritable } from "$lib/index";
+import type { Writable } from "svelte/store";
+import Dexie, { type Table } from "dexie";
+
+interface MetaEntry {
+  key: string;
+  value: string;
+}
+
+class SettingsDB extends Dexie {
+    meta!: Table<MetaEntry, string>;
+
+    constructor() {
+        super("settings");
+        this.version(1).stores({
+            meta: "&key"
+        });
+    }
+}
+
+const settingsDB = new SettingsDB();
+
+export const shaderEnabled: Writable<boolean> = persistentDbWritable<boolean, SettingsDB>(
+    "shaderEnabled",
+    true,
+
+    settingsDB
+);
--- a/src/lib/style.css
+++ b/src/lib/style.css
@ -31,8 +31,7 @@ body {
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-shadow: 1px 1px 0 #000;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
 }

 .app-wrapper {
@ -44,14 +43,6 @@ body {
  padding: 2rem 1rem 4rem;
 }

-.container {
-  width: 100%;
-  max-width: 28rem;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
 .send-receive-buttons {
  display: flex;
  gap: 0.75rem;
@ -68,6 +59,9 @@ body {
  box-shadow:
    0 0 0 4px #000,
    0 0 0 8px var(--primary-color);
+  .header {
+    cursor: pointer;
+  }
 }

 .retro-card::before {
--- a/src/routes/+layout.svelte
+++ b/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;
@ -18,6 +21,7 @@

  let { children } = $props();
  let showSplash = $state(true);
+  let closingSplash = $state(false);
  let currentError = $state<AppError | null>(null);
  let showInstallPrompt = $state(false);
  let deferredPrompt: Event | undefined = $state(undefined);
@ -45,7 +49,10 @@

  onMount(() => {
    setTimeout(() => {
-      showSplash = false;
+      closingSplash = true;
+      setTimeout(() => {
+        showSplash = false;
+      }, 1000);
    }, 3000);

    window.addEventListener("error", (event: ErrorEvent) => {
@ -89,34 +96,82 @@
  <title>Portal BTC</title>
 </svelte:head>

-{#if showInstallPrompt && deferredPrompt}
-  <InstallPrompt onInstall={handleInstallClick} />
-{:else if showSplash}
-  <SplashScreen />
-{:else}
-  <main class="app-wrapper">
-    {#if showSettingsButton}
-      <div class="settings-button-container">
-        <button class="retro-btn settings-btn" onclick={goToSettings}>
-          <iconify-icon icon="mdi:cog" width="16" height="16"></iconify-icon>
-          Settings
-        </button>
-      </div>
-    {/if}
-
-    {#if isOnSetup || $walletState.open}
-      {@render children()}
-    {/if}
-  </main>
-
-  {#if !$walletState.open && !isOnSetup}
+<div class="container" class:retro-shader={$shaderEnabled}>
+  {#if !$online}
+    <Offline />
+  {:else if showInstallPrompt && deferredPrompt}
+    <InstallPrompt onInstall={handleInstallClick} />
+  {:else if showSplash}
+    <SplashScreen closing={closingSplash} />
+  {:else if !$walletState.open && !isOnSetup}
    <PasswordDialog onunlock={() => startNwc()} />
-  {/if}
-{/if}
+  {:else}
+    <main class="app-wrapper">
+      {#if showSettingsButton}
+        <div class="settings-button-container">
+          <button class="retro-btn settings-btn" onclick={goToSettings}>
+            <iconify-icon icon="mdi:cog" width="16" height="16"></iconify-icon>
+            Settings
+          </button>
+        </div>
+      {/if}

-<ErrorDialog error={currentError} onclose={() => (currentError = null)} />
+      {@render children()}
+    </main>
+  {/if}
+
+  <ErrorDialog error={currentError} onclose={() => (currentError = null)} />
+</div>

 <style>
+  .container {
+    height: 100vh;
+    max-height: 100vh;
+    width: 100vw;
+    overflow-y: auto;
+  }
+  .retro-shader {
+    position: relative;
+  }
+
+  .retro-shader::before {
+    content: " ";
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background:
+      linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+      linear-gradient(
+        90deg,
+        rgba(255, 0, 0, 0.06),
+        rgba(0, 255, 0, 0.02),
+        rgba(0, 0, 255, 0.06)
+      );
+    z-index: 2000;
+    background-size:
+      100% 2px,
+      3px 100%;
+    background-attachment: fixed;
+    pointer-events: none;
+  }
+
+  .retro-shader::after {
+    content: " ";
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(18, 16, 16, 0.1);
+    opacity: 0;
+    z-index: 2001;
+    pointer-events: none;
+  }
+
  .settings-button-container {
    position: absolute;
    top: 1rem;
--- a/src/routes/settings/+page.svelte
+++ b/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
--- a/static/arx-logo.svg
+++ b/static/arx-logo.svg
--- a/static/logo-no-text.png
+++ b/static/logo-no-text.png
Author	SHA1	Message	Date
Danny Morabito	cbd131cc69	add visual flourish	2025-07-17 18:50:41 +02:00
Danny Morabito	e2c5eab08b	offline warning	2025-07-17 18:14:47 +02:00
Danny Morabito	ec693b9c3f	update splash screen	2025-07-17 17:05:32 +02:00
Danny Morabito	d348ad543b	fix: issuse with payment tx id not taking user to correct place	2025-07-16 19:08:43 +02:00