Add components and improve error page

2026-03-15 01:22:46 +00:00
parent 54ea6ebf59
commit 061598a0ad
12 changed files with 687 additions and 205 deletions
--- a/src/lib/components/ui/cards/BaseCard.svelte
+++ b/src/lib/components/ui/cards/BaseCard.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { IconHelpCircle } from '@tabler/icons-svelte';
+    import { slide } from 'svelte/transition';
+
+    interface Props {
+        children: Snippet;
+        header?: string;
+        helpText?: string;
+    }
+
+    let {
+        children,
+        header = "",
+        helpText,
+    }: Props = $props();
+
+    let showHelp = $state(false);
+</script>
+
+<div class="card">
+    {#if header || helpText}
+        <header class="card-header">
+            <div class="header-content">
+                {header}
+            </div>
+            {#if helpText}
+                <button
+                    type="button"
+                    class="help-toggle"
+                    onclick={() => showHelp = !showHelp}
+                    aria-label="Show Help"
+                >
+                    <IconHelpCircle size={26} stroke={2.25} color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'} />
+                </button>
+            {/if}
+        </header>
+
+        {#if showHelp && helpText}
+            <div class="help-drawer" transition:slide={{ duration: 400 }}>
+                <p>{helpText}</p>
+            </div>
+        {/if}
+    {/if}
+
+    <div class="card-body">
+        {@render children?.()}
+    </div>
+</div>
+
+<style>
+    .card {
+        background: var(--color-accent);
+        position: relative;
+        border-radius: 20px;
+        overflow: hidden;
+        width: 95%;
+        max-width: 600px;
+        text-align: center;
+        font-family: 'URW Gothic', sans-serif;
+        color: var(--color-title);
+    }
+
+    .header-content { flex: 1;
+    font-size: 1.5rem; font-weight: 600; }
+
+    .help-toggle {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background: none;
+        border: none;
+        padding: 4px;
+        cursor: help;
+        opacity: 0.6;
+        z-index: 2;
+        transition: opacity 0.2s, transform 0.2s;
+    }
+
+    .help-toggle:hover {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+
+    .help-drawer {
+        background-color: var(--color-accent);
+        padding: 4px 16px;
+        font-size: 0.95rem;
+        line-height: 1.2;
+        margin: auto;
+        border-bottom: 1px solid rgba(255,255,255,0.05);
+        color: var(--color-title);
+    }
+</style>