*

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');