historical weather

2026-07-25 15:24:03 +02:00
parent f8d7c7699f
commit 61d84e4450
15 changed files with 1653 additions and 25 deletions
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import UnlockDialog from './UnlockDialog.svelte';
+	import { isPremium, refreshPremium } from './premium';
+
+	let open = $state(false);
+
+	// Verify once on load so the badge reflects real status site-wide.
+	onMount(refreshPremium);
+</script>
+
+<button
+	type="button"
+	class="flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-3 text-xs font-semibold transition-colors {$isPremium
+		? 'border-amber-400/50 bg-amber-400/10 text-amber-700 hover:bg-amber-400/20 dark:text-amber-300'
+		: 'border-border/70 text-muted-foreground hover:bg-muted hover:text-foreground'}"
+	onclick={() => (open = true)}
+	title={$isPremium ? 'Premium active' : 'Unlock premium'}
+	aria-label={$isPremium ? 'Premium active' : 'Unlock premium'}
+>
+	{#if $isPremium}
+		<!-- star -->
+		<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+			<path
+				d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.9 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9L12 2.5z"
+			/>
+		</svg>
+		<span class="hidden sm:inline">Premium</span>
+	{:else}
+		<!-- padlock -->
+		<svg
+			class="h-4 w-4"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			stroke-width="1.75"
+			aria-hidden="true"
+		>
+			<rect x="4" y="10" width="16" height="11" rx="2" />
+			<path stroke-linecap="round" d="M8 10V7a4 4 0 0 1 8 0v3" />
+		</svg>
+		<span class="hidden sm:inline">Premium</span>
+	{/if}
+</button>
+
+<UnlockDialog bind:open />