diff options
| author | elioat <elioat@tilde.institute> | 2025-01-05 08:55:12 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2025-01-05 08:55:12 -0500 |
| commit | e3b513e983ffb236149cb9ec314f04d340a4f627 (patch) | |
| tree | 2dec63a9601d2c451f6f2cb84dcb4e5e2af05a4f /html/matt-chat | |
| parent | e94262a4f6423cab4fa909a788a86a150a8829ac (diff) | |
| download | tour-e3b513e983ffb236149cb9ec314f04d340a4f627.tar.gz | |
*
Diffstat (limited to 'html/matt-chat')
| -rw-r--r-- | html/matt-chat/index.html | 145 |
1 files changed, 144 insertions, 1 deletions
diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html index c9e44c0..182e323 100644 --- a/html/matt-chat/index.html +++ b/html/matt-chat/index.html @@ -144,6 +144,106 @@ text-align: center; /* Center the text */ } + /* Existing styles become part of "professional" theme */ + /* Move existing styles under this selector */ + body.theme-professional { + font-family: Arial, sans-serif; + font-size: 22px; + /* ... existing body styles ... */ + } + + /* Add Molly Millions theme */ + body.theme-molly-millions { + font-family: "Courier New", monospace; + font-size: 22px; + margin: 0; + padding: 20px; + background-color: #0a0a0a; + color: #00ff00; + max-width: 800px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + overflow: hidden; + } + + .theme-molly-millions #chat-container { + background-color: #000000; + border: 2px solid #00ff00; + border-radius: 0; + padding: 1em; + margin: 0 auto; + flex: 1; + overflow-y: auto; + width: 100%; + max-height: 400px; + scroll-behavior: smooth; + box-shadow: 0 0 10px #00ff00; + } + + .theme-molly-millions #user-input { + width: 100%; + padding: 10px; + border-radius: 0; + border: 2px solid #00ff00; + background-color: #000000; + color: #00ff00; + font-family: "Courier New", monospace; + font-size: 16px; + margin-top: 10px; + box-sizing: border-box; + } + + .theme-molly-millions #send-button { + padding: 10px 15px; + border-radius: 0; + background-color: #000000; + color: #00ff00; + border: 2px solid #00ff00; + cursor: pointer; + margin-top: 10px; + width: 100%; + font-family: "Courier New", monospace; + text-transform: uppercase; + } + + .theme-molly-millions #send-button:hover { + background-color: #00ff00; + color: #000000; + } + + .theme-molly-millions .message { + white-space: pre-wrap; + margin-bottom: 10px; + padding: 1em; + border-radius: 0; + border: 1px solid #00ff00; + background-color: #0a0a0a; + display: block; + max-width: 100%; + } + + .theme-molly-millions .user-message { + background-color: #001100; + color: #00ff00; + border: 1px solid #00ff00; + text-align: right; + margin-left: 20px; + } + + .theme-molly-millions .bot-message { + background-color: #000000; + color: #00ff00; + border: 1px solid #00ff00; + text-align: left; + margin-right: 20px; + } + + .theme-molly-millions .bot-time { + color: #005500; + } </style> </head> <body> @@ -198,6 +298,12 @@ const API_MODELS_ENDPOINT = config.modelsEndpoint; + // Add this near the top with other constants + const AVAILABLE_THEMES = { + 'professional': 'Professional Theme', + 'molly-millions': 'Molly Millions Cyberpunk Theme' + }; + // Function to handle errors function handleError(message) { console.error(message); @@ -260,6 +366,10 @@ modelSelect.addEventListener("change", () => { localStorage.setItem("selectedModel", modelSelect.value); }); + + // Load saved theme + const savedTheme = localStorage.getItem('selectedTheme') || 'professional'; + switchTheme(savedTheme); }); // Add a message to the chat container @@ -359,6 +469,21 @@ return; } + if (userMessage.toLowerCase().startsWith('/theme')) { + const requestedTheme = userMessage.toLowerCase().split(' ')[1]; + if (!requestedTheme) { + // No theme specified, show available themes + addMessage(`Available themes: ${Object.keys(AVAILABLE_THEMES).join(', ')}`, "bot"); + } else if (AVAILABLE_THEMES[requestedTheme]) { + switchTheme(requestedTheme); + } else { + addMessage(`Unknown theme. Available themes: ${Object.keys(AVAILABLE_THEMES).join(', ')}`, "bot"); + } + userInput.value = ""; + updateCounter(); + return; + } + addMessage(userMessage, "user"); userInput.value = ""; // Add this line back to clear the input @@ -514,8 +639,9 @@ Available commands:\n /context - Show the current conversation's context /clear - Clear the chat history /help - Show this message + /theme [theme-name] - Switch theme (available: ${Object.keys(AVAILABLE_THEMES).join(', ')}) `; - addMessage(helpMessage, "bot"); // Display help message as a bot message + addMessage(helpMessage, "bot"); } function estimateTokens(text) { @@ -635,6 +761,23 @@ Available commands:\n const chatContainer = document.getElementById("chat-container"); chatContainer.scrollTop = chatContainer.scrollHeight; } + + // Add this function to handle theme switching + function switchTheme(themeName) { + // Remove all theme classes + Object.keys(AVAILABLE_THEMES).forEach(theme => { + document.body.classList.remove(`theme-${theme}`); + }); + + // Add the new theme class + document.body.classList.add(`theme-${themeName}`); + + // Save to localStorage + localStorage.setItem('selectedTheme', themeName); + + // Notify user + addMessage(`Theme switched to: ${AVAILABLE_THEMES[themeName]}`, "bot"); + } </script> </body> </html> |