Spaces:
Sleeping
Sleeping
Update index.html
Browse files- index.html +28 -11
index.html
CHANGED
|
@@ -12,6 +12,7 @@
|
|
| 12 |
--color-behavior: #FCBA40;
|
| 13 |
--color-udl: #A50064;
|
| 14 |
--color-prompt3: #11C7B5;
|
|
|
|
| 15 |
--color-background: #FFFFFF;
|
| 16 |
--color-text: #333333;
|
| 17 |
--color-light-gray: #F5F5F5;
|
|
@@ -123,6 +124,21 @@
|
|
| 123 |
border-color: var(--color-prompt3);
|
| 124 |
}
|
| 125 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 126 |
.container {
|
| 127 |
width: 90%;
|
| 128 |
max-width: 800px;
|
|
@@ -260,7 +276,7 @@
|
|
| 260 |
|
| 261 |
<body class="theme-default">
|
| 262 |
<div id="error-toast" class="toast"></div>
|
| 263 |
-
<div class="mode-indicator">Default Mode</div>
|
| 264 |
|
| 265 |
<div class="container">
|
| 266 |
<h1 class="app-title">Real-Time Experts</h1>
|
|
@@ -310,11 +326,11 @@
|
|
| 310 |
|
| 311 |
// Theme configuration
|
| 312 |
const themeConfig = {
|
| 313 |
-
'
|
| 314 |
color: '#0066B3',
|
| 315 |
name: 'Default Assistant'
|
| 316 |
},
|
| 317 |
-
'Behavior
|
| 318 |
color: '#FCBA40',
|
| 319 |
name: 'Behavior Expert'
|
| 320 |
},
|
|
@@ -322,12 +338,12 @@
|
|
| 322 |
color: '#A50064',
|
| 323 |
name: 'UDL Expert'
|
| 324 |
},
|
| 325 |
-
'
|
| 326 |
color: '#11C7B5',
|
| 327 |
name: 'Learning Support Expert'
|
| 328 |
},
|
| 329 |
-
'
|
| 330 |
-
color: '#
|
| 331 |
name: 'Custom Assistant'
|
| 332 |
}
|
| 333 |
};
|
|
@@ -363,12 +379,13 @@
|
|
| 363 |
// Set the appropriate theme class
|
| 364 |
const themeClass = promptKey === 'Behavior Expert' ? 'theme-behavior' :
|
| 365 |
promptKey === 'UDL Expert' ? 'theme-udl' :
|
| 366 |
-
promptKey === 'Learning Support Expert' ? 'theme-prompt3' :
|
|
|
|
| 367 |
|
| 368 |
body.classList.add(themeClass);
|
| 369 |
|
| 370 |
// Update mode indicator
|
| 371 |
-
const config = themeConfig[promptKey] || themeConfig['
|
| 372 |
modeIndicator.textContent = config.name + ' Mode';
|
| 373 |
}
|
| 374 |
|
|
@@ -377,7 +394,7 @@
|
|
| 377 |
const selectedValue = this.value;
|
| 378 |
|
| 379 |
// Toggle custom prompt textarea
|
| 380 |
-
if (selectedValue === '
|
| 381 |
customPrompt.style.display = 'block';
|
| 382 |
} else {
|
| 383 |
customPrompt.style.display = 'none';
|
|
@@ -407,8 +424,8 @@
|
|
| 407 |
function getSelectedPrompt() {
|
| 408 |
const selectedValue = promptSelect.value;
|
| 409 |
return {
|
| 410 |
-
promptKey: selectedValue === '
|
| 411 |
-
customPrompt: selectedValue === '
|
| 412 |
};
|
| 413 |
}
|
| 414 |
|
|
|
|
| 12 |
--color-behavior: #FCBA40;
|
| 13 |
--color-udl: #A50064;
|
| 14 |
--color-prompt3: #11C7B5;
|
| 15 |
+
--color-custom: #FF6B35;
|
| 16 |
--color-background: #FFFFFF;
|
| 17 |
--color-text: #333333;
|
| 18 |
--color-light-gray: #F5F5F5;
|
|
|
|
| 124 |
border-color: var(--color-prompt3);
|
| 125 |
}
|
| 126 |
|
| 127 |
+
body.theme-custom .app-title,
|
| 128 |
+
body.theme-custom a {
|
| 129 |
+
color: var(--color-custom);
|
| 130 |
+
}
|
| 131 |
+
body.theme-custom .box,
|
| 132 |
+
body.theme-custom .start-button {
|
| 133 |
+
background-color: var(--color-custom);
|
| 134 |
+
}
|
| 135 |
+
body.theme-custom .mode-indicator {
|
| 136 |
+
background-color: var(--color-custom);
|
| 137 |
+
}
|
| 138 |
+
body.theme-custom .prompt-select {
|
| 139 |
+
border-color: var(--color-custom);
|
| 140 |
+
}
|
| 141 |
+
|
| 142 |
.container {
|
| 143 |
width: 90%;
|
| 144 |
max-width: 800px;
|
|
|
|
| 276 |
|
| 277 |
<body class="theme-default">
|
| 278 |
<div id="error-toast" class="toast"></div>
|
| 279 |
+
<div class="mode-indicator">Default Assistant Mode</div>
|
| 280 |
|
| 281 |
<div class="container">
|
| 282 |
<h1 class="app-title">Real-Time Experts</h1>
|
|
|
|
| 326 |
|
| 327 |
// Theme configuration
|
| 328 |
const themeConfig = {
|
| 329 |
+
'Default': {
|
| 330 |
color: '#0066B3',
|
| 331 |
name: 'Default Assistant'
|
| 332 |
},
|
| 333 |
+
'Behavior Expert': {
|
| 334 |
color: '#FCBA40',
|
| 335 |
name: 'Behavior Expert'
|
| 336 |
},
|
|
|
|
| 338 |
color: '#A50064',
|
| 339 |
name: 'UDL Expert'
|
| 340 |
},
|
| 341 |
+
'Learning Support Expert': {
|
| 342 |
color: '#11C7B5',
|
| 343 |
name: 'Learning Support Expert'
|
| 344 |
},
|
| 345 |
+
'Custom': {
|
| 346 |
+
color: '#FF6B35',
|
| 347 |
name: 'Custom Assistant'
|
| 348 |
}
|
| 349 |
};
|
|
|
|
| 379 |
// Set the appropriate theme class
|
| 380 |
const themeClass = promptKey === 'Behavior Expert' ? 'theme-behavior' :
|
| 381 |
promptKey === 'UDL Expert' ? 'theme-udl' :
|
| 382 |
+
promptKey === 'Learning Support Expert' ? 'theme-prompt3' :
|
| 383 |
+
promptKey === 'Custom' ? 'theme-custom' : 'theme-default';
|
| 384 |
|
| 385 |
body.classList.add(themeClass);
|
| 386 |
|
| 387 |
// Update mode indicator
|
| 388 |
+
const config = themeConfig[promptKey] || themeConfig['Default'];
|
| 389 |
modeIndicator.textContent = config.name + ' Mode';
|
| 390 |
}
|
| 391 |
|
|
|
|
| 394 |
const selectedValue = this.value;
|
| 395 |
|
| 396 |
// Toggle custom prompt textarea
|
| 397 |
+
if (selectedValue === 'Custom') {
|
| 398 |
customPrompt.style.display = 'block';
|
| 399 |
} else {
|
| 400 |
customPrompt.style.display = 'none';
|
|
|
|
| 424 |
function getSelectedPrompt() {
|
| 425 |
const selectedValue = promptSelect.value;
|
| 426 |
return {
|
| 427 |
+
promptKey: selectedValue === 'Custom' ? '' : selectedValue,
|
| 428 |
+
customPrompt: selectedValue === 'Custom' ? customPrompt.value : ''
|
| 429 |
};
|
| 430 |
}
|
| 431 |
|