diff --git a/ts-themes-tailwind.html b/ts-themes-tailwind.html
new file mode 100644
index 0000000..d1b64ce
--- /dev/null
+++ b/ts-themes-tailwind.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ <title>Time Safari Theme Switcher</title>
+ <style>
+ :root {
+ --bg: #ffffff;
+ --text: #000000;
+ --primary: #dddddd;
+ --accent: #cccccc;
+ --highlight: #aaaaaa;
+ }
+
+ body {
+ margin: 0;
+ padding: 2rem;
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: system-ui, sans-serif;
+ transition: all 0.3s ease;
+ }
+
+ h2, h3 {
+ margin-top: 1.5rem;
+ }
+
+ .theme-buttons {
+ margin: 1rem 0;
+ }
+
+ button {
+ margin: 0.3rem;
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ background: #eee;
+ transition: background 0.2s;
+ }
+
+ button:hover {
+ background: #ddd;
+ }
+
+ .swatch-bar {
+ display: flex;
+ height: 40px;
+ margin-bottom: 1.5rem;
+ border-radius: 6px;
+ overflow: hidden;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+ }
+
+ .swatch {
+ flex: 1;
+ }
+
+ .card {
+ background: var(--primary);
+ padding: 1rem;
+ border-radius: 8px;
+ margin-bottom: 1rem;
+ }
+
+ .highlight {
+ background: var(--highlight);
+ padding: 0.5rem;
+ border-radius: 4px;
+ display: inline-block;
+ }
+
+ .accent {
+ color: var(--accent);
+ }
+
+ .color-vars {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ .color-tile {
+ border: 1px solid #ccc;
+ border-radius: 6px;
+ padding: 0.5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ font-size: 0.9rem;
+ background-color: #fff;
+ }
+
+ .tile-preview {
+ height: 40px;
+ border-radius: 4px;
+ margin-bottom: 0.3rem;
+ }
+ </style>
+</head>
+<body>
+ <h2>π¨ Time Safari Theme Preview</h2>
+
+ <!-- Theme Switch Buttons -->
+ <div class="theme-buttons">
+ <button onclick="setTheme('op-calm')">πΌπ§ Optimistic Calm</button>
+
+ <!--
+ <button onclick="setTheme('pastel')">πΈ Warm Pastels</button>
+ <button onclick="setTheme('earth')">πΌ Optimistic Earth</button>
+ <button onclick="setTheme('bright')">β¨ Bright Uplift</button>
+ <button onclick="setTheme('calm')">π§ Productive Calm</button>
+ <button onclick="setTheme('garden')">πͺ΄ Giving Garden</button>
+ <button onclick="setTheme('op-garden')">πΌπͺ΄ Optimistic Garden</button>
+ -->
+ </div>
+
+ <!-- Visual Designer Swatch Bar -->
+ <div class="swatch-bar">
+ <div class="swatch" id="swatch-bg"></div>
+ <div class="swatch" id="swatch-text"></div>
+ <div class="swatch" id="swatch-primary"></div>
+ <div class="swatch" id="swatch-accent"></div>
+ <div class="swatch" id="swatch-highlight"></div>
+ </div>
+
+ <!-- UI Preview Card -->
+ <div class="card">
+ <h3>Sample Card</h3>
+ <p>This card reflects the current theme's <code>--primary</code> background color.</p>
+ <p class="highlight">This is a <code>--highlight</code> element.</p>
+ <p class="accent">This line uses the <code>--accent</code> color.</p>
+ </div>
+
+ <!-- Variable Overview -->
+ <h3>Current Theme Colors</h3>
+ <div class="color-vars" id="colorVars">
+ <!-- Filled by JavaScript -->
+ </div>
+
+ <script>
+ const themes = {
+ "op-calm": {
+ '--bg': '#FAFAFA',
+ '--text': '#3E4C59',
+ '--primary': '#D0F0EF',
+ '--accent': '#E2725B',
+ '--highlight': '#6699CC'
+ },
+ pastel: {
+ '--bg': '#fffafc',
+ '--text': '#444',
+ '--primary': '#CDE9F9',
+ '--accent': '#F7D6E0',
+ '--highlight': '#FBD38D'
+ },
+ earth: {
+ '--bg': '#FAF3E0',
+ '--text': '#3A3A3A',
+ '--primary': '#FFCC70',
+ '--accent': '#E2725B',
+ '--highlight': '#7F9F80'
+ },
+ bright: {
+ '--bg': '#FFF9F2',
+ '--text': '#2D2D2D',
+ '--primary': '#FFF685',
+ '--accent': '#FFB09E',
+ '--highlight': '#A7F2C1'
+ },
+ calm: {
+ '--bg': '#FAFAFA',
+ '--text': '#3E4C59',
+ '--primary': '#D0F0EF',
+ '--accent': '#FFD8BE',
+ '--highlight': '#6699CC'
+ },
+ garden: {
+ '--bg': '#F7FFF7',
+ '--text': '#3C3C3C',
+ '--primary': '#A8D5BA',
+ '--accent': '#E0A899',
+ '--highlight': '#F9DC5C'
+ },
+ "op-garden": {
+ '--bg': '#F7FFF7',
+ '--text': '#3C3C3C',
+ '--primary': '#A8D5BA',
+ '--accent': '#E2725B',
+ '--highlight': '#F9DC5C'
+ },
+ };
+
+ function setTheme(themeName) {
+ const theme = themes[themeName];
+ for (let variable in theme) {
+ document.documentElement.style.setProperty(variable, theme[variable]);
+ }
+ localStorage.setItem('selectedTheme', themeName);
+ renderColorTiles(theme);
+ updateSwatchBar(theme);
+ }
+
+ function loadTheme() {
+ const savedTheme = localStorage.getItem('selectedTheme') || 'op-calm';
+ setTheme(savedTheme);
+ }
+
+ function renderColorTiles(theme) {
+ const container = document.getElementById('colorVars');
+ container.innerHTML = '';
+ for (let variable in theme) {
+ const tile = document.createElement('div');
+ tile.className = 'color-tile';
+ tile.innerHTML = `
+ <div class="tile-preview" style="background: ${theme[variable]}"></div>
+ <strong>${variable}</strong>
+ <code>${theme[variable]}</code>
+ `;
+ container.appendChild(tile);
+ }
+ }
+
+ function updateSwatchBar(theme) {
+ document.getElementById('swatch-bg').style.background = theme['--bg'];
+ document.getElementById('swatch-text').style.background = theme['--text'];
+ document.getElementById('swatch-primary').style.background = theme['--primary'];
+ document.getElementById('swatch-accent').style.background = theme['--accent'];
+ document.getElementById('swatch-highlight').style.background = theme['--highlight'];
+ }
+
+ window.onload = loadTheme;
+ </script>
+</body>
+</html>