Spaces:
Running
Running
Настройки все еще внтури не функциональны! - Follow Up Deployment
Browse files- index.html +171 -4
index.html
CHANGED
|
@@ -135,6 +135,53 @@
|
|
| 135 |
.active-tab {
|
| 136 |
background-color: #4f46e5;
|
| 137 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 138 |
</style>
|
| 139 |
</head>
|
| 140 |
<body class="bg-gray-900 text-gray-100 min-h-screen">
|
|
@@ -180,7 +227,7 @@
|
|
| 180 |
<i class="fas fa-comments mr-2 text-indigo-400"></i> AI Communication
|
| 181 |
</h2>
|
| 182 |
|
| 183 |
-
<div id="chatContainer" class="h-[
|
| 184 |
<div class="chat-message mb-4">
|
| 185 |
<div class="flex items-start mb-2">
|
| 186 |
<div class="bg-gradient-to-r from-purple-500 to-indigo-500 w-8 h-8 rounded-full flex items-center justify-center mr-3">
|
|
@@ -222,7 +269,7 @@
|
|
| 222 |
</div>
|
| 223 |
</div>
|
| 224 |
|
| 225 |
-
<div id="consoleOutput" class="bg-console-bg text-console-text font-mono text-sm p-4 rounded-lg h-[
|
| 226 |
<div class="mb-2">
|
| 227 |
<span class="text-green-400">user@ai-console:~$</span>
|
| 228 |
<span>agent --start</span>
|
|
@@ -274,6 +321,39 @@
|
|
| 274 |
</div>
|
| 275 |
</footer>
|
| 276 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 277 |
<script>
|
| 278 |
// Chat functionality
|
| 279 |
const messageInput = document.getElementById('messageInput');
|
|
@@ -392,6 +472,95 @@
|
|
| 392 |
addConsoleOutput(activities[Math.floor(Math.random() * activities.length)]);
|
| 393 |
}, 15000);
|
| 394 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 395 |
// Tab switching functionality
|
| 396 |
const tabButtons = document.querySelectorAll('.tab-btn');
|
| 397 |
const tabContents = document.querySelectorAll('.tab-content');
|
|
@@ -404,10 +573,8 @@
|
|
| 404 |
tabButtons.forEach(btn => {
|
| 405 |
btn.classList.remove('active-tab');
|
| 406 |
btn.classList.remove('bg-indigo-600');
|
| 407 |
-
btn.classList.add('hover:bg-gray-600');
|
| 408 |
});
|
| 409 |
button.classList.add('active-tab', 'bg-indigo-600');
|
| 410 |
-
button.classList.remove('hover:bg-gray-600');
|
| 411 |
|
| 412 |
// Show selected tab content
|
| 413 |
tabContents.forEach(content => {
|
|
|
|
| 135 |
.active-tab {
|
| 136 |
background-color: #4f46e5;
|
| 137 |
}
|
| 138 |
+
|
| 139 |
+
/* Theme styles */
|
| 140 |
+
.light-theme {
|
| 141 |
+
--bg-color: #f3f4f6;
|
| 142 |
+
--text-color: #111827;
|
| 143 |
+
--header-bg: #e5e7eb;
|
| 144 |
+
--console-bg: #ffffff;
|
| 145 |
+
--console-text: #374151;
|
| 146 |
+
--border-color: #d1d5db;
|
| 147 |
+
}
|
| 148 |
+
|
| 149 |
+
.dark-theme {
|
| 150 |
+
--bg-color: #111827;
|
| 151 |
+
--text-color: #f3f4f6;
|
| 152 |
+
--header-bg: #1f2937;
|
| 153 |
+
--console-bg: #1e1e1e;
|
| 154 |
+
--console-text: #d4d4d4;
|
| 155 |
+
--border-color: #374151;
|
| 156 |
+
}
|
| 157 |
+
|
| 158 |
+
/* Apply theme variables */
|
| 159 |
+
body {
|
| 160 |
+
background-color: var(--bg-color);
|
| 161 |
+
color: var(--text-color);
|
| 162 |
+
}
|
| 163 |
+
|
| 164 |
+
header.bg-gray-800 {
|
| 165 |
+
background-color: var(--header-bg) !important;
|
| 166 |
+
border-color: var(--border-color) !important;
|
| 167 |
+
}
|
| 168 |
+
|
| 169 |
+
.bg-console-bg {
|
| 170 |
+
background-color: var(--console-bg) !important;
|
| 171 |
+
}
|
| 172 |
+
|
| 173 |
+
.text-console-text {
|
| 174 |
+
color: var(--console-text) !important;
|
| 175 |
+
}
|
| 176 |
+
|
| 177 |
+
.bg-gray-800 {
|
| 178 |
+
background-color: var(--header-bg) !important;
|
| 179 |
+
}
|
| 180 |
+
|
| 181 |
+
footer.bg-gray-800 {
|
| 182 |
+
background-color: var(--header-bg) !important;
|
| 183 |
+
border-color: var(--border-color) !important;
|
| 184 |
+
}
|
| 185 |
</style>
|
| 186 |
</head>
|
| 187 |
<body class="bg-gray-900 text-gray-100 min-h-screen">
|
|
|
|
| 227 |
<i class="fas fa-comments mr-2 text-indigo-400"></i> AI Communication
|
| 228 |
</h2>
|
| 229 |
|
| 230 |
+
<div id="chatContainer" class="h-[700px] overflow-y-auto mb-4 bg-gray-700 rounded-lg p-4 console-scrollbar">
|
| 231 |
<div class="chat-message mb-4">
|
| 232 |
<div class="flex items-start mb-2">
|
| 233 |
<div class="bg-gradient-to-r from-purple-500 to-indigo-500 w-8 h-8 rounded-full flex items-center justify-center mr-3">
|
|
|
|
| 269 |
</div>
|
| 270 |
</div>
|
| 271 |
|
| 272 |
+
<div id="consoleOutput" class="bg-console-bg text-console-text font-mono text-sm p-4 rounded-lg h-[700px] overflow-y-auto console-scrollbar">
|
| 273 |
<div class="mb-2">
|
| 274 |
<span class="text-green-400">user@ai-console:~$</span>
|
| 275 |
<span>agent --start</span>
|
|
|
|
| 321 |
</div>
|
| 322 |
</footer>
|
| 323 |
|
| 324 |
+
<!-- Settings Modal -->
|
| 325 |
+
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
|
| 326 |
+
<div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
|
| 327 |
+
<div class="flex justify-between items-center mb-4">
|
| 328 |
+
<h3 class="text-xl font-bold">Settings</h3>
|
| 329 |
+
<button id="closeSettings" class="text-gray-400 hover:text-white">
|
| 330 |
+
<i class="fas fa-times"></i>
|
| 331 |
+
</button>
|
| 332 |
+
</div>
|
| 333 |
+
<div class="space-y-4">
|
| 334 |
+
<div>
|
| 335 |
+
<label class="block text-sm font-medium mb-1">Theme</label>
|
| 336 |
+
<select class="w-full bg-gray-700 rounded-lg px-4 py-2">
|
| 337 |
+
<option>Dark</option>
|
| 338 |
+
<option>Light</option>
|
| 339 |
+
<option>System</option>
|
| 340 |
+
</select>
|
| 341 |
+
</div>
|
| 342 |
+
<div>
|
| 343 |
+
<label class="block text-sm font-medium mb-1">Font Size</label>
|
| 344 |
+
<input type="range" min="12" max="18" value="14" class="w-full">
|
| 345 |
+
</div>
|
| 346 |
+
<div class="flex items-center">
|
| 347 |
+
<input type="checkbox" id="soundToggle" class="mr-2">
|
| 348 |
+
<label for="soundToggle">Enable Sounds</label>
|
| 349 |
+
</div>
|
| 350 |
+
<button class="w-full bg-indigo-600 hover:bg-indigo-700 py-2 rounded-lg mt-4">
|
| 351 |
+
Save Settings
|
| 352 |
+
</button>
|
| 353 |
+
</div>
|
| 354 |
+
</div>
|
| 355 |
+
</div>
|
| 356 |
+
|
| 357 |
<script>
|
| 358 |
// Chat functionality
|
| 359 |
const messageInput = document.getElementById('messageInput');
|
|
|
|
| 472 |
addConsoleOutput(activities[Math.floor(Math.random() * activities.length)]);
|
| 473 |
}, 15000);
|
| 474 |
|
| 475 |
+
// Settings Modal functionality
|
| 476 |
+
const settingsBtn = document.querySelector('.bg-indigo-600');
|
| 477 |
+
const settingsModal = document.getElementById('settingsModal');
|
| 478 |
+
const closeSettings = document.getElementById('closeSettings');
|
| 479 |
+
const themeSelect = document.querySelector('#settingsModal select');
|
| 480 |
+
const fontSizeSlider = document.querySelector('#settingsModal input[type="range"]');
|
| 481 |
+
const soundToggle = document.getElementById('soundToggle');
|
| 482 |
+
const saveSettingsBtn = document.querySelector('#settingsModal button');
|
| 483 |
+
|
| 484 |
+
// Load saved settings
|
| 485 |
+
function loadSettings() {
|
| 486 |
+
const settings = JSON.parse(localStorage.getItem('aiConsoleSettings')) || {};
|
| 487 |
+
if (settings.theme) themeSelect.value = settings.theme;
|
| 488 |
+
if (settings.fontSize) {
|
| 489 |
+
fontSizeSlider.value = settings.fontSize;
|
| 490 |
+
document.documentElement.style.fontSize = `${settings.fontSize}px`;
|
| 491 |
+
}
|
| 492 |
+
if (settings.sound !== undefined) {
|
| 493 |
+
soundToggle.checked = settings.sound;
|
| 494 |
+
}
|
| 495 |
+
}
|
| 496 |
+
|
| 497 |
+
// Save settings
|
| 498 |
+
function saveSettings() {
|
| 499 |
+
const settings = {
|
| 500 |
+
theme: themeSelect.value,
|
| 501 |
+
fontSize: fontSizeSlider.value,
|
| 502 |
+
sound: soundToggle.checked
|
| 503 |
+
};
|
| 504 |
+
localStorage.setItem('aiConsoleSettings', JSON.stringify(settings));
|
| 505 |
+
applySettings();
|
| 506 |
+
settingsModal.classList.add('hidden');
|
| 507 |
+
}
|
| 508 |
+
|
| 509 |
+
// Apply settings
|
| 510 |
+
function applySettings() {
|
| 511 |
+
// Apply font size
|
| 512 |
+
document.documentElement.style.fontSize = `${fontSizeSlider.value}px`;
|
| 513 |
+
|
| 514 |
+
// Apply theme
|
| 515 |
+
if (themeSelect.value === 'Light') {
|
| 516 |
+
document.documentElement.classList.add('light-theme');
|
| 517 |
+
document.documentElement.classList.remove('dark-theme');
|
| 518 |
+
} else if (themeSelect.value === 'Dark') {
|
| 519 |
+
document.documentElement.classList.add('dark-theme');
|
| 520 |
+
document.documentElement.classList.remove('light-theme');
|
| 521 |
+
} else {
|
| 522 |
+
// System theme - check prefers-color-scheme
|
| 523 |
+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
|
| 524 |
+
document.documentElement.classList.add('light-theme');
|
| 525 |
+
document.documentElement.classList.remove('dark-theme');
|
| 526 |
+
} else {
|
| 527 |
+
document.documentElement.classList.add('dark-theme');
|
| 528 |
+
document.documentElement.classList.remove('light-theme');
|
| 529 |
+
}
|
| 530 |
+
}
|
| 531 |
+
}
|
| 532 |
+
|
| 533 |
+
// Event Listeners
|
| 534 |
+
settingsBtn.addEventListener('click', () => {
|
| 535 |
+
loadSettings();
|
| 536 |
+
settingsModal.classList.remove('hidden');
|
| 537 |
+
});
|
| 538 |
+
|
| 539 |
+
closeSettings.addEventListener('click', () => {
|
| 540 |
+
settingsModal.classList.add('hidden');
|
| 541 |
+
});
|
| 542 |
+
|
| 543 |
+
saveSettingsBtn.addEventListener('click', saveSettings);
|
| 544 |
+
|
| 545 |
+
// Close modal when clicking outside
|
| 546 |
+
settingsModal.addEventListener('click', (e) => {
|
| 547 |
+
if (e.target === settingsModal) {
|
| 548 |
+
settingsModal.classList.add('hidden');
|
| 549 |
+
}
|
| 550 |
+
});
|
| 551 |
+
|
| 552 |
+
// System theme change listener
|
| 553 |
+
if (window.matchMedia) {
|
| 554 |
+
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => {
|
| 555 |
+
if (themeSelect.value === 'System') {
|
| 556 |
+
applySettings();
|
| 557 |
+
}
|
| 558 |
+
});
|
| 559 |
+
}
|
| 560 |
+
|
| 561 |
+
// Load settings on page load
|
| 562 |
+
loadSettings();
|
| 563 |
+
|
| 564 |
// Tab switching functionality
|
| 565 |
const tabButtons = document.querySelectorAll('.tab-btn');
|
| 566 |
const tabContents = document.querySelectorAll('.tab-content');
|
|
|
|
| 573 |
tabButtons.forEach(btn => {
|
| 574 |
btn.classList.remove('active-tab');
|
| 575 |
btn.classList.remove('bg-indigo-600');
|
|
|
|
| 576 |
});
|
| 577 |
button.classList.add('active-tab', 'bg-indigo-600');
|
|
|
|
| 578 |
|
| 579 |
// Show selected tab content
|
| 580 |
tabContents.forEach(content => {
|