From cf3e19b54a16e6685710451438e1c89a4d49e469 Mon Sep 17 00:00:00 2001
From: Chris Christiansen <chris.christian...@>
Date: Tue, 26 May 2026 11:54:54 +0000
Subject: [PATCH] feat(ts3): Master Hub v3.2 theme-switcher + docs(bq): Looker
 Studio setup

---
 master_hub/index.html | 190 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 master_hub/index.html
diff --git a/master_hub/index.html b/master_hub/index.html
new file mode 100644
index 0000000..cee8191
--- /dev/null
+++ b/master_hub/index.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="gemini" data-mode="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Master Hub v3.2</title>
+    <link href="https://api.fontshare.com/v2/css?f[]=zodiak@500,700&f[]=satoshi@400,700&f[]=general-sans@400,600&f[]=cabinet-grotesk@700,800,900&display=swap" rel="stylesheet">
+    <style>
+        /* General Styles */
+        :root {
+            /* Define a default transition for smooth theme changes */
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        body {
+            background-color: var(--ts-bg);
+            color: var(--ts-text);
+            font-family: var(--ts-font-body);
+            margin: 0;
+            padding: 2rem;
+            line-height: 1.6;
+        }
+
+        h1, h2, h3 {
+            font-family: var(--ts-font-display);
+            color: var(--ts-accent);
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background-color: var(--ts-surface);
+            padding: 2rem;
+            border: 1px solid var(--ts-border);
+            border-radius: 1rem;
+        }
+
+        .theme-switcher, .mode-switcher {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            align-items: center;
+        }
+
+        button {
+            font-family: var(--ts-font-body);
+            background-color: var(--ts-accent);
+            color: var(--ts-bg);
+            border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+
+        button:hover {
+            background-color: var(--ts-accent-hover);
+        }
+        
+        p a {
+            color: var(--ts-accent);
+        }
+
+        /* Gemini Theme */
+        [data-theme="gemini"] {
+            --ts-bg: #f8f9ff;
+            --ts-surface: #f0f2ff;
+            --ts-surface-2: #e6e9ff;
+            --ts-border: #cdd2f5;
+            --ts-text: #0c0e1a;
+            --ts-text-muted: #5a5f82;
+            --ts-accent: #4355f5;
+            --ts-accent-hover: #2d3dd4;
+            --ts-accent-highlight: #dde0ff;
+            --ts-font-display: 'Cabinet Grotesk', 'Google Sans', sans-serif;
+            --ts-font-body: 'Satoshi', 'Inter', sans-serif;
+        }
+        [data-theme="gemini"][data-mode="dark"] {
+            --ts-bg: #0c0e1a;
+            --ts-surface: #12152a;
+            --ts-surface-2: #181c30;
+            --ts-border: #252a42;
+            --ts-text: #e4e6f8;
+            --ts-text-muted: #7a7fa8;
+            --ts-accent: #6b7cff;
+            --ts-accent-hover: #4355f5;
+            --ts-accent-highlight: #1a1f3a;
+        }
+
+        /* Claude Theme */
+        [data-theme="claude"] {
+            --ts-bg: #f9f6f1;
+            --ts-surface: #f4f0e8;
+            --ts-surface-2: #ede8de;
+            --ts-border: #d6cfc4;
+            --ts-text: #2c2420;
+            --ts-text-muted: #7a6e65;
+            --ts-accent: #c96442;
+            --ts-accent-hover: #a84e30;
+            --ts-accent-highlight: #f0ddd6;
+            --ts-font-display: 'Zodiak', 'Georgia', serif;
+            --ts-font-body: 'Satoshi', 'Inter', sans-serif;
+        }
+        [data-theme="claude"][data-mode="dark"] {
+            --ts-bg: #1a1714;
+            --ts-surface: #201d1a;
+            --ts-surface-2: #272320;
+            --ts-border: #3a3530;
+            --ts-text: #e8e2d8;
+            --ts-text-muted: #8a7e74;
+            --ts-accent: #e07a57;
+            --ts-accent-hover: #c96442;
+            --ts-accent-highlight: #3d2820;
+        }
+
+        /* ChatGPT Theme */
+        [data-theme="chatgpt"] {
+            --ts-bg: #f7f7f7;
+            --ts-surface: #ffffff;
+            --ts-surface-2: #f0f0f0;
+            --ts-border: #e0e0e0;
+            --ts-text: #0d0d0d;
+            --ts-text-muted: #6b6b6b;
+            --ts-accent: #10a37f;
+            --ts-accent-hover: #0d8a6a;
+            --ts-accent-highlight: #d4f1e9;
+            --ts-font-display: 'General Sans', 'Helvetica Neue', sans-serif;
+            --ts-font-body: 'General Sans', 'Inter', sans-serif;
+        }
+        [data-theme="chatgpt"][data-mode="dark"] {
+            --ts-bg: #0d0d0d;
+            --ts-surface: #141414;
+            --ts-surface-2: #1c1c1c;
+            --ts-border: #2a2a2a;
+            --ts-text: #ececec;
+            --ts-text-muted: #8a8a8a;
+            --ts-accent: #19c37d;
+            --ts-accent-hover: #10a37f;
+            --ts-accent-highlight: #0d2e25;
+        }
+
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <div class="theme-switcher">
+            <h3>Theme:</h3>
+            <button id="theme-gemini">Gemini</button>
+            <button id="theme-claude">Claude</button>
+            <button id="theme-chatgpt">ChatGPT</button>
+        </div>
+
+        <div class="mode-switcher">
+            <h3>Mode:</h3>
+            <button id="mode-toggle">Toggle Dark/Light Mode</button>
+        </div>
+
+        <hr style="border: 0; border-top: 1px solid var(--ts-border); margin: 2rem 0;">
+
+        <h1>Master Hub v3.2</h1>
+        <h2>A demonstration of the theme switcher</h2>
+        <p>This is a sample paragraph to show the text rendering in the selected theme. You can switch between themes using the buttons above. You can also find some <a href="#">links</a> here.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <button>Sample Button</button>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const root = document.documentElement;
+            const themeButtons = document.querySelectorAll('.theme-switcher button');
+            const modeToggle = document.getElementById('mode-toggle');
+
+            themeButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const theme = button.id.replace('theme-', '');
+                    root.setAttribute('data-theme', theme);
+                });
+            });
+
+            modeToggle.addEventListener('click', () => {
+                const currentMode = root.getAttribute('data-mode');
+                const newMode = currentMode === 'light' ? 'dark' : 'light';
+                root.setAttribute('data-mode', newMode);
+            });
+        });
+    </script>
+
+</body>
+</html>
\ No newline at end of file
