From 4ce76591d24964dc4bb887e4dcead21f773ecc74 Mon Sep 17 00:00:00 2001
From: Kevin Cameron <kevinacameron@hotmail.com>
Date: Sat, 7 Feb 2026 08:25:24 -0800
Subject: [PATCH 1/3] can be button or link

---
 src/lib/components/Button.svelte | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index c5520b4..3720aca 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     let {
-        href,
+        href = null,
         children,
         type = null,
         arrow = null,
         dataTest = null,
+        onclick = null
     } = $props();
 
     let cssClass = $state("button");
@@ -20,12 +21,21 @@
     }
 </script>
 
-<a href={href} class={cssClass} data-test={dataTest}>
-    {@render children()}
-    {#if arrow}
-        →
-    {/if}
-</a>
+{#if href}
+    <a href={href} class={cssClass} data-test={dataTest}>
+        {@render children()}
+        {#if arrow}
+            →
+        {/if}
+    </a>
+{:else}
+    <button class={cssClass} data-test={dataTest} onclick={onclick}>
+        {@render children()}
+        {#if arrow}
+            →
+        {/if}
+    </button>
+{/if}
 
 <style>
     .button {

From 4d7ba094654c75aaa61cbed6655c6e92ee52bde5 Mon Sep 17 00:00:00 2001
From: Kevin Cameron <kevinacameron@hotmail.com>
Date: Sat, 7 Feb 2026 08:25:38 -0800
Subject: [PATCH 2/3] can be button or link

---
 src/lib/styles/globals.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/lib/styles/globals.css b/src/lib/styles/globals.css
index dc87407..27967b4 100644
--- a/src/lib/styles/globals.css
+++ b/src/lib/styles/globals.css
@@ -90,6 +90,12 @@ a {
     color: var(--color-link);
 }
 
+button {
+    color: var(--color-text);
+    border: none;
+    cursor: pointer;
+}
+
 section {
     margin: var(--layout-section-vertical) 0;
 }

From c7a57791f47757f4fd7240d2eb157de531ab70d8 Mon Sep 17 00:00:00 2001
From: Kevin Cameron <kevinacameron@hotmail.com>
Date: Sat, 7 Feb 2026 08:27:17 -0800
Subject: [PATCH 3/3] cookie notification banner

---
 .env.example                        |   1 +
 messages/en.json                    |   5 ++
 src/lib/components/Analytics.svelte | 116 ++++++++++++++++++++++++++++
 src/lib/components/Footer.svelte    |  15 +++-
 src/routes/+layout.svelte           |   4 +
 5 files changed, 139 insertions(+), 2 deletions(-)
 create mode 100644 .env.example
 create mode 100644 src/lib/components/Analytics.svelte

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..4ae8806
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
\ No newline at end of file
diff --git a/messages/en.json b/messages/en.json
index 6fdaf6f..f01b4c6 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -47,6 +47,11 @@
     "socials.facebook.cta": "Facebook",
     "socials.facebook.href": "https://www.facebook.com/SeattleCommNet",
 
+    "cookieBanner.message": "We use cookies to improve your experience.<br /> By clicking \"Accept\", you consent to the use of analytics cookies.",
+    "cookieBanner.accept": "Accept",
+    "cookieBanner.deny": "Deny",
+    "cookieBanner.settings": "Cookie Settings",
+
 
     "=== PAGES HOME ===" : "comment",
 
diff --git a/src/lib/components/Analytics.svelte b/src/lib/components/Analytics.svelte
new file mode 100644
index 0000000..a17fd8b
--- /dev/null
+++ b/src/lib/components/Analytics.svelte
@@ -0,0 +1,116 @@
+<script>
+    import { onMount } from "svelte";
+    import { fly } from "svelte/transition";
+
+    import { PUBLIC_GOOGLE_ANALYTICS_ID } from "$env/static/public";
+
+    import { m } from '$lib/paraglide/messages.js';
+
+    import Button from "./Button.svelte";
+
+    let showBanner = $state(false);
+
+    onMount(() => {
+        const consentStatus = localStorage.getItem("consent_status");
+
+        if (consentStatus === null) {
+            showBanner = true;
+        } else if (consentStatus === "granted") {
+            window.gtag("consent", "update", {
+                analytics_storage: "granted",
+                ad_storage: "granted",
+                ad_user_data: "granted",
+                ad_personalization: "granted",
+            });
+        }
+    });
+
+    function handleAccept() {
+        showBanner = false;
+        localStorage.setItem("consent_status", "granted");
+
+        window.gtag("consent", "update", {
+            analytics_storage: "granted",
+            ad_storage: "granted",
+            ad_user_data: "granted",
+            ad_personalization: "granted",
+        });
+    }
+
+    function handleDeny() {
+        showBanner = false;
+        localStorage.setItem("consent_status", "denied");
+    }
+
+    export function reopenBanner() {
+        showBanner = true;
+        localStorage.removeItem("consent_status");
+    }
+</script>
+
+<svelte:head>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+
+        window.gtag = gtag;
+
+        gtag("consent", "default", {
+            analytics_storage: "denied",
+            ad_storage: "denied",
+            ad_user_data: "denied",
+            ad_personalization: "denied",
+        });
+    </script>
+
+    <script async src={`https://www.googletagmanager.com/gtag/js?id=${PUBLIC_GOOGLE_ANALYTICS_ID}`}></script>
+    <script>
+        gtag("js", new Date());
+        gtag("config", "{PUBLIC_GOOGLE_ANALYTICS_ID}");
+    </script>
+</svelte:head>
+
+{#if showBanner}
+    <div transition:fly="{{ x: 20, duration: 300 }}" class="banner">
+        <p>
+            {@html m["cookieBanner.message"]() }
+        </p>
+
+        <div class="buttons">
+            <Button type="medium" onclick={handleAccept}>{ m["cookieBanner.accept"]() }</Button>
+            <Button type="medium" onclick={handleDeny}>{ m["cookieBanner.deny"]() }</Button>
+        </div>
+    </div>
+{/if}
+
+<style lang="postcss">
+    .banner {
+        position: fixed;
+        bottom: 1em;
+        right: 0;
+        width: 370px;
+
+        background-color: #fff;
+
+        padding: 1rem;
+
+        border: solid 1px #ccc;
+        border-right-width:0;
+        border-top-left-radius: 0.6em;
+        border-bottom-left-radius: 0.6em;
+        box-shadow: 0 0 1em #0004;
+
+        p {
+            margin: 0 0 1em;
+            font-size: 1em;
+        }
+    }
+
+    .buttons {
+        display: flex;
+        gap: 0.5em;
+    }
+</style>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 2f77c00..b2733c1 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,9 +1,11 @@
 <script>
     import { m } from '$lib/paraglide/messages.js';
-    // import { setLocale } from '$lib/paraglide/runtime';
     import Button from './Button.svelte';
     import Socials from './Socials.svelte';
     import Wrapper from './Wrapper.svelte';
+    import Analytics from './Analytics.svelte';
+
+    let analytics;
 
     const buttons = [
         {
@@ -33,6 +35,12 @@
                         <Button {href} type="medium">{cta}</Button>
                     </div>
                 {/each}
+
+                <div>
+                    <Button type="medium" onclick={() => analytics?.reopenBanner()}>
+                        {m["cookieBanner.settings"]()}
+                    </Button>
+                </div>
             </div>
 
             <!-- <button onclick={() => setLocale('en')}>en</button> -->
@@ -40,7 +48,9 @@
     </Wrapper>
 </div>
 
-<style>
+<Analytics bind:this={analytics} />
+
+<style lang="postcss">
     .footer {
         background-color: var(--color-brand-primary);
 
@@ -57,6 +67,7 @@
             margin: 0;
         }
     }
+
     footer {
         display: flex;
         flex-direction: column;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d7d4614..734718f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,10 +4,12 @@
     import Header   from '$lib/components/Header.svelte';
     import Footer   from '$lib/components/Footer.svelte';
     import Metatags from '$lib/components/Metatags.svelte';
+    import Analytics from '$lib/components/Analytics.svelte';
 
     let { children } = $props();
 </script>
 
+
 <Metatags />
 
 <Header />
@@ -18,6 +20,8 @@
 
 <Footer/>
 
+<Analytics />
+
 <style lang="postcss">
 
 </style>