Chris Christiansen
9fcb9c354a
Some checks are pending
Check Python Version Consistency / Check Python Version (push) Waiting to run
190 lines
6.3 KiB
HTML
190 lines
6.3 KiB
HTML
<!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> |