-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
120 lines (114 loc) · 5.58 KB
/
index.html
File metadata and controls
120 lines (114 loc) · 5.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Creative Image Studio</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Define themes directly in the script for instant application.
const THEMES = [
{
name: 'Default',
colors: {
light: { primary: '47 159 208', secondary: '0 166 156', base100: '243 244 246', base200: '255 255 255', base300: '228 228 228', textPrimary: '0 47 86', textSecondary: '102 102 102' },
dark: { primary: '47 159 208', secondary: '0 166 156', base100: '0 47 86', base200: '0 77 122', base300: '0 101 112', textPrimary: '228 228 228', textSecondary: '156 163 175' }
}
},
{
name: 'Ocean Depths',
colors: {
light: { primary: '0 119 182', secondary: '0 180 216', base100: '240 247 255', base200: '255 255 255', base300: '202 240 248', textPrimary: '3 4 94', textSecondary: '0 95 145' },
dark: { primary: '144 224 239', secondary: '0 180 216', base100: '3 4 94', base200: '0 29 61', base300: '0 53 102', textPrimary: '240 247 255', textSecondary: '123 195 208' }
}
},
{
name: 'Sunset',
colors: {
light: { primary: '255 107 107', secondary: '255 166 0', base100: '255 243 224', base200: '255 255 255', base300: '255 224 178', textPrimary: '96 46 46', textSecondary: '191 112 55' },
dark: { primary: '255 138 101', secondary: '255 183 77', base100: '69 21 21', base200: '96 46 46', base300: '142 68 68', textPrimary: '255 236 217', textSecondary: '255 204 128' }
}
},
{
name: 'Forest',
colors: {
light: { primary: '76 175 80', secondary: '139 195 74', base100: '232 245 233', base200: '255 255 255', base300: '200 230 201', textPrimary: '27 94 32', textSecondary: '85 139 47' },
dark: { primary: '129 199 132', secondary: '174 213 129', base100: '12 50 16', base200: '27 94 32', base300: '56 142 60', textPrimary: '232 245 233', textSecondary: '197 225 165' }
}
},
{
name: 'Monochrome',
colors: {
light: { primary: '33 33 33', secondary: '97 97 97', base100: '250 250 250', base200: '255 255 255', base300: '245 245 245', textPrimary: '0 0 0', textSecondary: '117 117 117' },
dark: { primary: '224 224 224', secondary: '158 158 158', base100: '33 33 33', base200: '66 66 66', base300: '97 97 97', textPrimary: '255 255 255', textSecondary: '189 189 189' }
}
}
];
/**
* Applies theme colors as CSS variables to the root element.
* @param {string} themeName - The name of the theme to apply.
* @param {boolean} isDark - Whether to apply the dark or light version.
*/
window.applyTheme = function(themeName, isDark) {
const theme = THEMES.find(t => t.name === themeName) || THEMES[0];
const colors = isDark ? theme.colors.dark : theme.colors.light;
const root = document.documentElement;
root.style.setProperty('--color-brand-primary', colors.primary);
root.style.setProperty('--color-brand-secondary', colors.secondary);
root.style.setProperty('--color-base-100', colors.base100);
root.style.setProperty('--color-base-200', colors.base200);
root.style.setProperty('--color-base-300', colors.base300);
root.style.setProperty('--color-text-primary', colors.textPrimary);
root.style.setProperty('--color-text-secondary', colors.textSecondary);
};
// Set theme on initial load to prevent FOUC
(function() {
const themeMode = localStorage.getItem('themeMode');
const themeName = localStorage.getItem('themeName') || 'Default';
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isDark = themeMode === 'dark' || (!themeMode && prefersDark);
window.applyTheme(themeName, isDark);
if (isDark) {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
}
})();
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(var(--color-brand-primary) / <alpha-value>)',
'brand-secondary': 'rgb(var(--color-brand-secondary) / <alpha-value>)',
'base-100': 'rgb(var(--color-base-100) / <alpha-value>)',
'base-200': 'rgb(var(--color-base-200) / <alpha-value>)',
'base-300': 'rgb(var(--color-base-300) / <alpha-value>)',
'text-primary': 'rgb(var(--color-text-primary) / <alpha-value>)',
'text-secondary': 'rgb(var(--color-text-secondary) / <alpha-value>)',
},
animation: {
'pulse-fast': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
}
}
}
}
</script>
<script type="importmap">
{
"imports": {
"react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
"react/": "https://aistudiocdn.com/react@^19.1.1/",
"react": "https://aistudiocdn.com/react@^19.1.1",
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.19.0"
}
}
</script>
</head>
<body class="bg-base-100 text-text-primary">
<div id="root"></div>
<script type="module" src="/index.tsx"></script>
</body>
</html>