*

1 files changed, 159 insertions, 1 deletions

diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html
index 8e23494..35e1086 100644
--- a/html/matt-chat/index.html
+++ b/html/matt-chat/index.html
@@ -364,6 +364,160 @@
             font-family: "Press Start 2P", "Courier New", monospace;
             font-size: 12px;
         }
+
+        /* Add Classic Mac theme */
+        @font-face {
+            font-family: 'ChicagoFLF';
+            src: url('https://dl.dropboxusercontent.com/s/5h2j708xuoyjnk7/ChicagoFLF.woff2') format('woff2');
+        }
+
+        body.theme-classic {
+            font-family: 'ChicagoFLF', 'Monaco', monospace;
+            font-size: 14px;
+            margin: 0;
+            padding: 20px;
+            background-color: #DDDDDD;
+            color: #000000;
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 100vh;
+            overflow: hidden;
+            image-rendering: pixelated;
+        }
+
+        .theme-classic #chat-container {
+            background-color: #FFFFFF;
+            border: 2px solid #000000;
+            border-radius: 2px;
+            padding: 1em;
+            margin: 0 auto;
+            flex: 1;
+            overflow-y: auto;
+            width: 100%;
+            max-height: 400px;
+            scroll-behavior: smooth;
+            box-shadow: 2px 2px 0px #000000;
+        }
+
+        .theme-classic #user-input {
+            width: 100%;
+            padding: 8px;
+            border: 2px solid #000000;
+            background-color: #FFFFFF;
+            color: #000000;
+            font-family: 'ChicagoFLF', 'Monaco', monospace;
+            font-size: 14px;
+            margin-top: 10px;
+            box-sizing: border-box;
+            border-radius: 2px;
+        }
+
+        .theme-classic #send-button {
+            padding: 4px 15px;
+            background-color: #FFFFFF;
+            color: #000000;
+            border: 2px solid #000000;
+            border-radius: 2px;
+            cursor: pointer;
+            margin-top: 10px;
+            width: 100%;
+            font-family: 'ChicagoFLF', 'Monaco', monospace;
+            font-size: 14px;
+            box-shadow: 2px 2px 0px #000000;
+        }
+
+        .theme-classic #send-button:hover {
+            background-color: #000000;
+            color: #FFFFFF;
+        }
+
+        .theme-classic #send-button:active {
+            box-shadow: 1px 1px 0px #000000;
+            transform: translate(1px, 1px);
+        }
+
+        .theme-classic .message {
+            white-space: pre-wrap;
+            margin-bottom: 10px;
+            padding: 8px;
+            border: 2px solid #000000;
+            background-color: #FFFFFF;
+            display: block;
+            max-width: 100%;
+            font-size: 14px;
+            border-radius: 2px;
+        }
+
+        .theme-classic .user-message {
+            background-color: #FFFFFF;
+            color: #000000;
+            text-align: right;
+            margin-left: 20px;
+            box-shadow: 2px 2px 0px #000000;
+        }
+
+        .theme-classic .bot-message {
+            background-color: #FFFFFF;
+            color: #000000;
+            text-align: left;
+            margin-right: 20px;
+            box-shadow: 2px 2px 0px #000000;
+        }
+
+        .theme-classic .bot-time {
+            color: #666666;
+            font-size: 12px;
+            text-align: center;
+            margin: 4px 0;
+        }
+
+        .theme-classic #counter {
+            color: #000000 !important;
+        }
+
+        .theme-classic .model-select-container {
+            background-color: #FFFFFF;
+            border: 2px solid #000000;
+            padding: 8px;
+            margin-bottom: 10px;
+            width: 100%;
+            box-sizing: border-box;
+            border-radius: 2px;
+            box-shadow: 2px 2px 0px #000000;
+        }
+
+        .theme-classic #model-select {
+            background-color: #FFFFFF;
+            color: #000000;
+            border: 2px solid #000000;
+            padding: 2px;
+            font-family: 'ChicagoFLF', 'Monaco', monospace;
+            font-size: 14px;
+            border-radius: 2px;
+        }
+
+        .theme-classic input[type="checkbox"] {
+            appearance: none;
+            -webkit-appearance: none;
+            width: 16px;
+            height: 16px;
+            border: 2px solid #000000;
+            background-color: #FFFFFF;
+            position: relative;
+            vertical-align: middle;
+            margin-right: 5px;
+        }
+
+        .theme-classic input[type="checkbox"]:checked::after {
+            content: '✓';
+            position: absolute;
+            left: 1px;
+            top: -2px;
+            font-size: 14px;
+        }
     </style>
 </head>
 <body>
@@ -422,7 +576,8 @@
         const AVAILABLE_THEMES = {
             'professional': 'Professional Theme',
             'molly-millions': 'Molly Millions Cyberpunk Theme',
-            'cloud': 'Cloud JRPG Theme'
+            'cloud': 'Cloud JRPG Theme',
+            'classic': 'Classic Mac OS Theme'
         };
 
         // Function to handle errors
@@ -903,6 +1058,9 @@ Available commands:\n
                     case 'cloud':
                         metaThemeColor.setAttribute('content', '#4080ff');
                         break;
+                    case 'classic':
+                        metaThemeColor.setAttribute('content', '#DDDDDD');
+                        break;
                     case 'professional':
                     default:
                         metaThemeColor.setAttribute('content', '#007BFF');