Shipmaster1/Agent_Browse
0
1<!-- index.html -->2<!DOCTYPE html>3<html lang="en">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Stock Market Assistant</title>8 <style>9 :root {10 --bg-primary: #1a1a1a;11 --bg-secondary: #2d2d2d;12 --text-primary: #ffffff;13 --text-secondary: #b3b3b3;14 --accent-color: #00ff9d;15 --user-message-bg: #2a3a4a;16 --ai-message-bg: #2d2d2d;17 --error-message-bg: #4a2a2a;18 }19 20 body {21 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;22 max-width: 800px;23 margin: 0 auto;24 padding: 20px;25 background-color: var(--bg-primary);26 color: var(--text-primary);27 line-height: 1.6;28 }29 30 h1 {31 color: var(--accent-color);32 text-align: center;33 margin-bottom: 30px;34 font-size: 2.5em;35 font-weight: 700;36 }37 38 .chat-container {39 background-color: var(--bg-secondary);40 border-radius: 15px;41 padding: 20px;42 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);43 height: 500px;44 overflow-y: auto;45 margin-bottom: 20px;46 border: 1px solid rgba(255, 255, 255, 0.1);47 }48 49 .message {50 margin-bottom: 15px;51 padding: 12px 16px;52 border-radius: 12px;53 max-width: 80%;54 position: relative;55 animation: fadeIn 0.3s ease-in-out;56 }57 58 @keyframes fadeIn {59 from { opacity: 0; transform: translateY(10px); }60 to { opacity: 1; transform: translateY(0); }61 }62 63 .user-message {64 background-color: var(--user-message-bg);65 margin-left: auto;66 border-bottom-right-radius: 4px;67 }68 69 .ai-message {70 background-color: var(--ai-message-bg);71 margin-right: auto;72 border-bottom-left-radius: 4px;73 }74 75 .error-message {76 background-color: var(--error-message-bg);77 color: #ff6b6b;78 margin: 10px auto;79 width: 90%;80 text-align: center;81 }82 83 .input-container {84 display: flex;85 gap: 10px;86 background-color: var(--bg-secondary);87 padding: 15px;88 border-radius: 15px;89 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);90 border: 1px solid rgba(255, 255, 255, 0.1);91 }92 93 input[type="text"] {94 flex: 1;95 padding: 12px 16px;96 border: none;97 border-radius: 8px;98 background-color: rgba(255, 255, 255, 0.05);99 color: var(--text-primary);100 font-size: 1em;101 transition: all 0.3s ease;102 }103 104 input[type="text"]:focus {105 outline: none;106 background-color: rgba(255, 255, 255, 0.1);107 box-shadow: 0 0 0 2px var(--accent-color);108 }109 110 input[type="text"]::placeholder {111 color: var(--text-secondary);112 }113 114 button {115 padding: 12px 24px;116 background-color: var(--accent-color);117 color: var(--bg-primary);118 border: none;119 border-radius: 8px;120 cursor: pointer;121 font-weight: 600;122 transition: all 0.3s ease;123 }124 125 button:hover {126 background-color: #00e68a;127 transform: translateY(-2px);128 }129 130 button:active {131 transform: translateY(0);132 }133 134 .tools-info {135 background-color: var(--bg-secondary);136 padding: 20px;137 border-radius: 15px;138 margin-bottom: 30px;139 border: 1px solid rgba(255, 255, 255, 0.1);140 }141 142 .tools-info h3 {143 margin-top: 0;144 color: var(--accent-color);145 font-size: 1.2em;146 margin-bottom: 15px;147 }148 149 .tools-info ul {150 padding-left: 20px;151 margin: 0;152 }153 154 .tools-info li {155 margin-bottom: 10px;156 color: var(--text-secondary);157 }158 159 .tools-info strong {160 color: var(--accent-color);161 }162 163 /* Scrollbar styling */164 ::-webkit-scrollbar {165 width: 8px;166 }167 168 ::-webkit-scrollbar-track {169 background: var(--bg-primary);170 }171 172 ::-webkit-scrollbar-thumb {173 background: var(--accent-color);174 border-radius: 4px;175 }176 177 ::-webkit-scrollbar-thumb:hover {178 background: #00e68a;179 }180 181 /* Responsive design */182 @media (max-width: 600px) {183 body {184 padding: 10px;185 }186 187 .chat-container {188 height: 400px;189 }190 191 .message {192 max-width: 90%;193 }194 195 button {196 padding: 10px 20px;197 }198 }199 </style>200</head>201<body>202 <h1>Stock Market Assistant</h1>203 204 <div class="tools-info">205 <h3>Available Tools:</h3>206 <ul>207 <li><strong>Stock Price:</strong> Get current price for any stock symbol (e.g., "What's the price of AAPL?")</li>208 <li><strong>Stock Info:</strong> Get detailed information about a company (e.g., "Tell me about Microsoft")</li>209 <li><strong>Stock History:</strong> Get historical data for a stock (e.g., "Show me Tesla's performance last month")</li>210 </ul>211 </div>212 213 <div class="chat-container" id="chatContainer">214 <div class="message ai-message">215 Hello! I'm your Stock Market Assistant. I can help you with:216 <ul>217 <li>Current stock prices</li>218 <li>Company information</li>219 <li>Historical stock data</li>220 </ul>221 How can I help you today?222 </div>223 </div>224 225 <div class="input-container">226 <input type="text" id="userInput" placeholder="Ask about any stock...">227 <button onclick="sendMessage()">Send</button>228 </div>229 230 <script>231 const ws = new WebSocket('wss://' + window.location.host + '/ws');232 const chatContainer = document.getElementById('chatContainer');233 const userInput = document.getElementById('userInput');234 235 ws.onopen = function() {236 console.log('WebSocket connection established');237 };238 239 ws.onerror = function(error) {240 console.error('WebSocket error:', error);241 const messageDiv = document.createElement('div');242 messageDiv.className = 'message error-message';243 messageDiv.textContent = 'Connection error. Please refresh the page.';244 chatContainer.appendChild(messageDiv);245 };246 247 ws.onclose = function() {248 console.log('WebSocket connection closed');249 const messageDiv = document.createElement('div');250 messageDiv.className = 'message error-message';251 messageDiv.textContent = 'Connection closed. Please refresh the page.';252 chatContainer.appendChild(messageDiv);253 };254 255 ws.onmessage = function(event) {256 console.log('Received message:', event.data);257 const data = JSON.parse(event.data);258 const messageDiv = document.createElement('div');259 messageDiv.className = 'message ' + (data.type === 'ai_message' ? 'ai-message' : 'error-message');260 messageDiv.textContent = data.content;261 chatContainer.appendChild(messageDiv);262 chatContainer.scrollTop = chatContainer.scrollHeight;263 };264 265 function sendMessage() {266 const message = userInput.value.trim();267 if (message) {268 if (ws.readyState === WebSocket.OPEN) {269 const messageDiv = document.createElement('div');270 messageDiv.className = 'message user-message';271 messageDiv.textContent = message;272 chatContainer.appendChild(messageDiv);273 chatContainer.scrollTop = chatContainer.scrollHeight;274 275 ws.send(message);276 userInput.value = '';277 } else {278 const messageDiv = document.createElement('div');279 messageDiv.className = 'message error-message';280 messageDiv.textContent = 'Not connected. Please refresh the page.';281 chatContainer.appendChild(messageDiv);282 }283 }284 }285 286 userInput.addEventListener('keypress', function(e) {287 if (e.key === 'Enter') {288 sendMessage();289 }290 });291 </script>292</body>293</html>294