diff options
| -rw-r--r-- | html/matt-chat/index.html | 205 |
1 files changed, 188 insertions, 17 deletions
diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html index 535dc29..eac9a05 100644 --- a/html/matt-chat/index.html +++ b/html/matt-chat/index.html @@ -516,6 +516,177 @@ top: -2px; font-size: 14px; } + + /* LCARS Theme */ + body.theme-lcars { + font-family: "Helvetica Neue", Arial, sans-serif; + font-size: 18px; + margin: 0; + padding: 20px; + background-color: #000; + color: #FF9966; + max-width: 800px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + overflow: hidden; + } + + .theme-lcars #chat-container { + background-color: #000; + border: none; + border-radius: 0; + padding: 1em; + margin: 0 auto; + flex: 1; + overflow-y: auto; + width: 100%; + max-height: 400px; + scroll-behavior: smooth; + position: relative; + } + + .theme-lcars #chat-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2em; + background: #CC6699; + border-radius: 20px 20px 0 0; + } + + .theme-lcars #user-input { + width: 100%; + padding: 10px; + border: none; + background-color: #000; + color: #FF9966; + font-family: "Helvetica Neue", Arial, sans-serif; + font-size: 16px; + margin-top: 10px; + box-sizing: border-box; + border-left: 2em solid #CC6699; + } + + .theme-lcars #send-button { + padding: 10px 15px; + background-color: #CC6699; + color: #000; + border: none; + cursor: pointer; + margin-top: 10px; + width: 100%; + font-family: "Helvetica Neue", Arial, sans-serif; + font-weight: bold; + font-size: 16px; + text-transform: uppercase; + border-radius: 0 0 20px 20px; + } + + .theme-lcars #send-button:hover { + background-color: #FF9966; + } + + .theme-lcars .message { + white-space: pre-wrap; + margin-bottom: 10px; + padding: 1em; + border: none; + display: block; + max-width: 100%; + position: relative; + } + + .theme-lcars .user-message { + background-color: #000; + color: #FF9966; + text-align: right; + margin-left: 20px; + border-right: 1em solid #CC6699; + } + + .theme-lcars .bot-message { + background-color: #000; + color: #99CCFF; + text-align: left; + margin-right: 20px; + border-left: 1em solid #9999CC; + } + + .theme-lcars .bot-time { + color: #CC6699; + font-size: 0.8em; + text-align: center; + margin: 4px 0; + } + + .theme-lcars #counter { + color: #99CCFF !important; + } + + .theme-lcars .model-select-container { + background-color: #000; + border: none; + padding: 10px; + margin-bottom: 10px; + width: 100%; + box-sizing: border-box; + display: flex; + align-items: center; + border-radius: 20px; + position: relative; + overflow: hidden; + } + + .theme-lcars .model-select-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 2em; + background: #9999CC; + border-radius: 20px 0 0 20px; + } + + .theme-lcars #model-select { + background-color: #000; + color: #FF9966; + border: none; + padding: 5px; + margin-left: 3em; + font-family: "Helvetica Neue", Arial, sans-serif; + font-size: 16px; + } + + .theme-lcars input[type="checkbox"] { + appearance: none; + -webkit-appearance: none; + width: 16px; + height: 16px; + border: 2px solid #CC6699; + background-color: #000; + position: relative; + vertical-align: middle; + margin-right: 5px; + } + + .theme-lcars input[type="checkbox"]:checked { + background-color: #CC6699; + } + + .theme-lcars input[type="checkbox"]:checked::after { + content: '✓'; + position: absolute; + left: 2px; + top: -2px; + color: #000; + font-size: 14px; + } </style> </head> <body> @@ -572,10 +743,11 @@ // Add this near the top with other constants const AVAILABLE_THEMES = { - 'professional': 'Professional Theme', - 'molly-millions': 'Molly Millions Cyberpunk Theme', - 'cloud': 'Cloud JRPG Theme', - 'classic': 'Classic Mac OS Theme' + 'professional': 'Boring, like wearing a tie', + 'molly-millions': 'Molly Millions\' manicure', + 'cloud': 'It took a lot of self control not to add sound effects', + 'classic': 'This is not a fish', + 'engage': 'Boldly going' }; // Function to handle errors @@ -629,24 +801,19 @@ } document.addEventListener("DOMContentLoaded", () => { - populateModelSelect(); // Populate the model select dropdown - // Load the saved model from local storage + populateModelSelect(); const modelSelect = document.getElementById("model-select"); const savedModel = localStorage.getItem("selectedModel"); if (savedModel) { modelSelect.value = savedModel; } - // Save the selected model to local storage when changed 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 function addMessage(message, sender = "user") { const chatContainer = document.getElementById("chat-container"); const messageElement = document.createElement("div"); @@ -656,9 +823,9 @@ // Scroll to the new message with a smooth animation messageElement.scrollIntoView({ behavior: "smooth", block: "end" }); - chatContainer.scrollTop = chatContainer.scrollHeight; // Ensure the chat is scrolled to the bottom + chatContainer.scrollTop = chatContainer.scrollHeight; // Make sure the chat is scrolled to the bottom - return messageElement; // Return the message element for further manipulation + return messageElement; // Return the message element so it is easier to use } // Fancy format milliseconds into a more readable format @@ -690,13 +857,12 @@ // Event listener to update the counter on input document.getElementById("user-input").addEventListener("input", updateCounter); - // Function to toggle cat mode function toggleCatMode() { isCatMode = !isCatMode; // Toggle the flag if (isCatMode) { config.systemMessage += " You are a cat."; // Append the phrase } else { - config.systemMessage = config.systemMessage.replace(" You are a cat.", ""); // Remove the phrase + config.systemMessage = config.systemMessage.replace(" You are a large, fluffy cat. You are a little aloof, but kind.", ""); // Remove the phrase } addMessage(`Cat mode is now ${isCatMode ? "enabled" : "disabled"}.`, "bot"); // Inform the user } @@ -748,6 +914,8 @@ if (!requestedTheme) { // No theme specified, show available themes addMessage(`Available themes: ${Object.keys(AVAILABLE_THEMES).join(', ')}`, "bot"); + } else if (requestedTheme === 'engage') { + switchTheme('lcars'); } else if (AVAILABLE_THEMES[requestedTheme]) { switchTheme(requestedTheme); } else { @@ -759,7 +927,7 @@ } addMessage(userMessage, "user"); - userInput.value = ""; // Add this line back to clear the input + userInput.value = ""; // Clear input after sending the message // Reset the counter document.getElementById("char-count").textContent = "0"; @@ -843,7 +1011,7 @@ } } - // Basic animmation for the loading indicator + // Basic animation for the loading indicator function animateLoadingIndicator(indicator) { let dots = 0; return setInterval(() => { @@ -908,7 +1076,7 @@ function displayHelp() { const helpMessage = ` Available commands:\n - /darkmode - Toggle dark mode + /dark - Toggle dark mode when using the professional theme /cat - Toggle cat mode /context - Show the current conversation's context /clear - Clear the chat history @@ -1059,6 +1227,9 @@ Available commands:\n case 'classic': metaThemeColor.setAttribute('content', '#DDDDDD'); break; + case 'lcars': + metaThemeColor.setAttribute('content', '#CC6699'); + break; case 'professional': default: metaThemeColor.setAttribute('content', '#007BFF'); |