Skip to content

Commit f9237a9

Browse files
jeremymanningclaude
jeremymanning
and
claude
committed
feat(demos): Add unified theming and improve demo index page
- Change logo text to "Interactive Demonstrations" - Fix slide links to use relative paths (../slides/) - Update all 15 demos to use shared CSS variables for theming - Add dark/light mode toggle support across all demos - Add search and keyword browser to demo index - Update demo-styles.css with comprehensive theming variables This enables consistent dark/light mode switching across the entire demo site. Each demo now inherits theme colors from shared CSS variables rather than hardcoding its own color scheme. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent 8888885 commit f9237a9

File tree

19 files changed

+930
-382
lines changed

19 files changed

+930
-382
lines changed

‎demos/01-eliza/css/eliza.css‎

Lines changed: 71 additions & 81 deletions
Large diffs are not rendered by default.

‎demos/01-eliza/index.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="dark">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>ELIZA Interactive Demo - Pattern Matching Chatbot</title>
7+
<link rel="stylesheet" href="../shared/css/demo-styles.css">
78
<link rel="stylesheet" href="css/eliza.css">
89
</head>
910
<body>
11+
<nav class="demo-nav">
12+
<a href="../" class="back-link">← Back to Demos</a>
13+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">☀️</button>
14+
</nav>
1015
<div class="header">
1116
<div class="container">
1217
<h1>ELIZA Interactive Demo</h1>
@@ -531,5 +536,28 @@ <h3>Example Pattern</h3>
531536
// Initialize the app
532537
init();
533538
</script>
539+
540+
<script>
541+
// Theme toggle functionality
542+
const themeToggle = document.getElementById('theme-toggle');
543+
const html = document.documentElement;
544+
545+
// Load saved theme
546+
const savedTheme = localStorage.getItem('theme') || 'dark';
547+
html.setAttribute('data-theme', savedTheme);
548+
if (themeToggle) {
549+
themeToggle.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
550+
}
551+
552+
if (themeToggle) {
553+
themeToggle.addEventListener('click', () => {
554+
const currentTheme = html.getAttribute('data-theme');
555+
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
556+
html.setAttribute('data-theme', newTheme);
557+
localStorage.setItem('theme', newTheme);
558+
themeToggle.textContent = newTheme === 'dark' ? '☀️' : '🌙';
559+
});
560+
}
561+
</script>
534562
</body>
535563
</html>

‎demos/02-tokenization/css/tokenization.css‎

Lines changed: 31 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,20 @@
1-
/* Global Styles */
1+
/* Global Styles - Uses CSS variables from ../shared/css/demo-styles.css for theming */
22
* {
33
margin: 0;
44
padding: 0;
55
box-sizing: border-box;
66
}
77

8+
/* Demo-specific variables that don't conflict with theming */
89
:root {
9-
--primary-color: #4f46e5;
10-
--primary-hover: #4338ca;
11-
--secondary-color: #6b7280;
12-
--success-color: #10b981;
13-
--warning-color: #f59e0b;
14-
--danger-color: #ef4444;
15-
--bg-color: #f9fafb;
16-
--card-bg: #ffffff;
17-
--border-color: #e5e7eb;
18-
--text-primary: #111827;
19-
--text-secondary: #6b7280;
20-
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
21-
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
22-
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
10+
--token-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
11+
--token-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
12+
--token-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
2313
--radius-sm: 4px;
2414
--radius-md: 8px;
2515
--radius-lg: 12px;
2616
}
2717

28-
body {
29-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
30-
background-color: var(--bg-color);
31-
color: var(--text-primary);
32-
line-height: 1.6;
33-
}
34-
3518
.container {
3619
max-width: 1400px;
3720
margin: 0 auto;
@@ -43,10 +26,10 @@ header {
4326
text-align: center;
4427
margin-bottom: 40px;
4528
padding: 40px 20px;
46-
background: linear-gradient(135deg, var(--primary-color), #7c3aed);
29+
background: var(--gradient-primary);
4730
color: white;
4831
border-radius: var(--radius-lg);
49-
box-shadow: var(--shadow-lg);
32+
box-shadow: var(--token-shadow-lg);
5033
}
5134

5235
header h1 {
@@ -108,10 +91,10 @@ header h1 {
10891

10992
/* Input Section */
11093
.input-section {
111-
background: var(--card-bg);
94+
background: var(--surface-color);
11295
padding: 30px;
11396
border-radius: var(--radius-lg);
114-
box-shadow: var(--shadow-md);
97+
box-shadow: var(--token-shadow-md);
11598
margin-bottom: 30px;
11699
}
117100

@@ -132,6 +115,8 @@ header h1 {
132115
font-family: inherit;
133116
transition: border-color 0.3s;
134117
resize: vertical;
118+
background: var(--surface-color);
119+
color: var(--text-primary);
135120
}
136121

137122
.input-section textarea:focus,
@@ -168,17 +153,17 @@ header h1 {
168153
.primary-btn:hover:not(:disabled) {
169154
background: var(--primary-hover);
170155
transform: translateY(-1px);
171-
box-shadow: var(--shadow-md);
156+
box-shadow: var(--token-shadow-md);
172157
}
173158

174159
.secondary-btn {
175-
background: var(--bg-color);
160+
background: var(--surface-color);
176161
color: var(--text-primary);
177162
border: 2px solid var(--border-color);
178163
}
179164

180165
.secondary-btn:hover:not(:disabled) {
181-
background: var(--border-color);
166+
background: var(--surface-hover);
182167
}
183168

184169
button:disabled {
@@ -193,7 +178,7 @@ button:disabled {
193178

194179
.mode-btn:hover:not(:disabled) {
195180
transform: translateY(-2px);
196-
box-shadow: var(--shadow-md);
181+
box-shadow: var(--token-shadow-md);
197182
}
198183

199184
.mode-btn.active {
@@ -204,12 +189,12 @@ button:disabled {
204189

205190
.mode-btn:not(.active) {
206191
border-color: var(--border-color) !important;
207-
background: white !important;
192+
background: var(--surface-color) !important;
208193
color: var(--text-primary) !important;
209194
}
210195

211196
.mode-btn:not(.active):hover:not(:disabled) {
212-
background: var(--bg-color) !important;
197+
background: var(--surface-hover) !important;
213198
border-color: var(--primary-color) !important;
214199
}
215200

@@ -247,16 +232,16 @@ button:disabled {
247232
}
248233

249234
.tokenizer-card {
250-
background: var(--card-bg);
235+
background: var(--surface-color);
251236
border-radius: var(--radius-lg);
252237
padding: 20px;
253-
box-shadow: var(--shadow-md);
238+
box-shadow: var(--token-shadow-md);
254239
transition: transform 0.3s, box-shadow 0.3s;
255240
}
256241

257242
.tokenizer-card:hover {
258243
transform: translateY(-2px);
259-
box-shadow: var(--shadow-lg);
244+
box-shadow: var(--token-shadow-lg);
260245
}
261246

262247
.tokenizer-header {
@@ -299,7 +284,7 @@ button:disabled {
299284
.token-output {
300285
min-height: 100px;
301286
padding: 15px;
302-
background: var(--bg-color);
287+
background: var(--bg-secondary);
303288
border-radius: var(--radius-md);
304289
line-height: 2;
305290
word-wrap: break-word;
@@ -331,7 +316,7 @@ button:disabled {
331316

332317
.token:hover {
333318
transform: scale(1.05);
334-
box-shadow: var(--shadow-md);
319+
box-shadow: var(--token-shadow-md);
335320
}
336321

337322
.token-0 { background: #fef3c7; border: 1px solid #fbbf24; }
@@ -354,33 +339,35 @@ button:disabled {
354339

355340
.token-ids summary {
356341
padding: 8px;
357-
background: var(--bg-color);
342+
background: var(--bg-secondary);
358343
border-radius: var(--radius-sm);
359344
font-weight: 500;
360345
user-select: none;
346+
color: var(--text-primary);
361347
}
362348

363349
.token-ids summary:hover {
364-
background: var(--border-color);
350+
background: var(--surface-hover);
365351
}
366352

367353
.ids-content {
368354
margin-top: 10px;
369355
padding: 10px;
370-
background: var(--bg-color);
356+
background: var(--bg-secondary);
371357
border-radius: var(--radius-sm);
372358
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
373359
font-size: 0.9rem;
374360
max-height: 150px;
375361
overflow-y: auto;
362+
color: var(--text-primary);
376363
}
377364

378365
/* Stats Section */
379366
.stats-section {
380-
background: var(--card-bg);
367+
background: var(--surface-color);
381368
padding: 30px;
382369
border-radius: var(--radius-lg);
383-
box-shadow: var(--shadow-md);
370+
box-shadow: var(--token-shadow-md);
384371
}
385372

386373
.stats-section h3 {
@@ -413,10 +400,10 @@ button:disabled {
413400

414401
.bpe-explanation,
415402
.bpe-visualization {
416-
background: var(--card-bg);
403+
background: var(--surface-color);
417404
padding: 25px;
418405
border-radius: var(--radius-lg);
419-
box-shadow: var(--shadow-md);
406+
box-shadow: var(--token-shadow-md);
420407
}
421408

422409
.bpe-explanation h3,

‎demos/02-tokenization/index.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="dark">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Interactive Tokenization Visualizer</title>
7+
<link rel="stylesheet" href="../shared/css/demo-styles.css">
78
<link rel="stylesheet" href="css/tokenization.css">
89
<script type="module" src="https://cdn.jsdelivr.net/npm/@xenova/[email protected]"></script>
910
</head>
1011
<body>
12+
<nav class="demo-nav">
13+
<a href="../" class="back-link">← Back to Demos</a>
14+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">☀️</button>
15+
</nav>
1116
<div class="container">
1217
<header>
1318
<h1>Interactive Tokenization Visualizer</h1>
@@ -242,5 +247,28 @@ <h4>Subword Tokens</h4>
242247

243248
<script type="module" src="js/tokenizer-comparison.js"></script>
244249
<script type="module" src="js/bpe-visualizer.js"></script>
250+
251+
<script>
252+
// Theme toggle functionality
253+
const themeToggle = document.getElementById('theme-toggle');
254+
const html = document.documentElement;
255+
256+
// Load saved theme
257+
const savedTheme = localStorage.getItem('theme') || 'dark';
258+
html.setAttribute('data-theme', savedTheme);
259+
if (themeToggle) {
260+
themeToggle.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
261+
}
262+
263+
if (themeToggle) {
264+
themeToggle.addEventListener('click', () => {
265+
const currentTheme = html.getAttribute('data-theme');
266+
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
267+
html.setAttribute('data-theme', newTheme);
268+
localStorage.setItem('theme', newTheme);
269+
themeToggle.textContent = newTheme === 'dark' ? '☀️' : '🌙';
270+
});
271+
}
272+
</script>
245273
</body>
246274
</html>

‎demos/03-embeddings/index.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="dark">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Text Embeddings Explorer - Interactive 3D Visualization</title>
7+
<link rel="stylesheet" href="../shared/css/demo-styles.css">
78
<link rel="stylesheet" href="css/embeddings.css">
89
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
910
<script src="https://cdn.jsdelivr.net/npm/@xenova/[email protected]"></script>
1011
</head>
1112
<body>
13+
<nav class="demo-nav">
14+
<a href="../" class="back-link">← Back to Demos</a>
15+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">☀️</button>
16+
</nav>
1217
<div class="container">
1318
<header>
1419
<h1>🔍 Text Embeddings Explorer</h1>
@@ -670,5 +675,28 @@ <h3>Add Custom Texts</h3>
670675
// Export for debugging
671676
window.app = app;
672677
</script>
678+
679+
<script>
680+
// Theme toggle functionality
681+
const themeToggle = document.getElementById('theme-toggle');
682+
const html = document.documentElement;
683+
684+
// Load saved theme
685+
const savedTheme = localStorage.getItem('theme') || 'dark';
686+
html.setAttribute('data-theme', savedTheme);
687+
if (themeToggle) {
688+
themeToggle.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
689+
}
690+
691+
if (themeToggle) {
692+
themeToggle.addEventListener('click', () => {
693+
const currentTheme = html.getAttribute('data-theme');
694+
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
695+
html.setAttribute('data-theme', newTheme);
696+
localStorage.setItem('theme', newTheme);
697+
themeToggle.textContent = newTheme === 'dark' ? '☀️' : '🌙';
698+
});
699+
}
700+
</script>
673701
</body>
674702
</html>

0 commit comments

Comments
 (0)