Change to retro styling

index.html

@@ -6,43 +6,77 @@
     <title>DWS Intelligence</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;700&display=swap" rel="stylesheet">
     <style>
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Noto Sans Mono', monospace;
-            max-width: 800px;
+            background-color: #000;
-            margin: 0 auto;
+            color: #fff;
-            padding: 20px;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            overflow: hidden;
         }
         #chat-container {
-            border: 1px solid #ccc;
+            border: 2px solid #444;
-            height: 400px;
+            flex: 1;
             overflow-y: auto;
             padding: 10px;
-            margin-bottom: 10px;
+            background-color: #111;
+            box-sizing: border-box;
+        }
+        #input-container {
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+            background-color: #222;
+            box-sizing: border-box;
         }
         #user-input {
             width: 100%;
             padding: 10px;
+            background-color: #000;
+            color: #fff;
+            border: 1px solid #444;
+            font-family: 'Noto Sans Mono', monospace;
+            font-size: 16px;
             margin-bottom: 10px;
+            box-sizing: border-box;
         }
         #send-button {
             width: 100%;
             padding: 10px;
-            background-color: #4CAF50;
+            background-color: #444;
-            color: white;
+            color: #fff;
             border: none;
             cursor: pointer;
+            font-family: 'Noto Sans Mono', monospace;
+            font-size: 16px;
+            box-sizing: border-box;
         }
         .message {
             margin-bottom: 10px;
+            font-size: 16px;
         }
         .user-message {
             text-align: right;
-            color: blue;
+            color: #0ff;
         }
         .bot-message {
             text-align: left;
-            color: green;
+            color: #fff;
+        }
+        .bot-message pre {
+            background-color: #222;
+            padding: 10px;
+            border-radius: 5px;
+            overflow-x: auto;
+        }
+        .bot-message code {
+            font-family: 'Noto Sans Mono', monospace;
+            font-size: 14px;
         }
         .thinking {
             font-style: italic;
@@ -50,19 +84,21 @@
         }
         .thought-summary {
             cursor: pointer;
-            color: #888;
+            color: #fff;
             margin-bottom: 5px;
             font-weight: bold;
+            display: flex;
+            align-items: center;
         }
         .thought-details {
             display: none;
             margin-left: 20px;
-            border-left: 2px solid #ccc;
+            border-left: 2px solid #444;
             padding-left: 10px;
             margin-bottom: 10px;
             white-space: pre-wrap;
-            font-family: monospace;
+            font-family: 'Noto Sans Mono', monospace;
-            background-color: #f0f0f0;
+            background-color: #222;
         }
         .collapsible::before {
             content: '▶ ';
@@ -72,13 +108,79 @@
         .collapsible.open::before {
             transform: rotate(90deg);
         }
+        .led {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: #f00;
+            margin-right: 10px;
+            position: relative;
+        }
+        .led::after {
+            content: '';
+            position: absolute;
+            top: -5px;
+            left: -5px;
+            right: -5px;
+            bottom: -5px;
+            background-color: #f00;
+            border-radius: 50%;
+            filter: blur(5px);
+            opacity: 0;
+            transition: opacity 0.5s ease-in-out;
+        }
+        .led.blinking {
+            animation: blink 1s step-start infinite;
+        }
+        .led.blinking::after {
+            animation: glow 1s ease-in-out infinite alternate;
+        }
+        @keyframes blink {
+            50% {
+                opacity: 0;
+            }
+        }
+        @keyframes glow {
+            0% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 0.5;
+            }
+        }
+        /* PDP-11 inspired styles */
+        #chat-container::-webkit-scrollbar {
+            width: 12px;
+        }
+        #chat-container::-webkit-scrollbar-track {
+            background: #222;
+        }
+        #chat-container::-webkit-scrollbar-thumb {
+            background-color: #444;
+            border-radius: 6px;
+            border: 3px solid #222;
+        }
+        .pdp-panel {
+            background-color: #333;
+            border: 2px solid #555;
+            border-radius: 5px;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+        .pdp-label {
+            font-size: 14px;
+            color: #888;
+            margin-bottom: 5px;
+        }
     </style>
 </head>
 <body>
-    <h1>DWS Intelligence</h1>
     <div id="chat-container"></div>
+    <div id="input-container" class="pdp-panel">
+        <div class="pdp-label">INPUT:</div>
         <textarea id="user-input" placeholder="Type your message here..." rows="3"></textarea>
-    <button id="send-button">Send</button>
+        <button id="send-button">EXECUTE</button>
+    </div>
 
     <script>
         const socket = io();
@@ -102,7 +204,14 @@
         function startThinking() {
             thinkingElement = document.createElement('div');
             thinkingElement.classList.add('thought-summary', 'collapsible');
-            thinkingElement.textContent = 'Thinking...';
+            
+            const led = document.createElement('div');
+            led.classList.add('led', 'blinking');
+            
+            const textNode = document.createTextNode('Thinking...');
+            
+            thinkingElement.appendChild(led);
+            thinkingElement.appendChild(textNode);
             thinkingElement.onclick = toggleThinkingDetails;
             
             thinkingDetails = document.createElement('div');
@@ -134,7 +243,12 @@
 
         function endThinking(thinkingTime) {
             if (thinkingElement) {
-                thinkingElement.textContent = `Thinking... (${thinkingTime}s)`;
+                const textNode = thinkingElement.childNodes[1];
+                textNode.nodeValue = `Thinking... (${thinkingTime}s)`;
+                const led = thinkingElement.querySelector('.led');
+                led.classList.remove('blinking');
+                led.style.backgroundColor = '#0f0';
+                led.style.boxShadow = '0 0 10px #0f0';
                 thinkingStartTime = null;
             }
         }