|
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <meta name="theme-color" content="#1e1e1e"> |
| 7 | + <meta name="msapplication-navbutton-color" content="#1e1e1e"> |
| 8 | + <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> |
| 9 | + <meta name="apple-mobile-web-app-capable" content="yes"> |
5 | 10 | <title>Agent Terminal</title> |
6 | 11 | <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&display=swap" rel="stylesheet"> |
7 | 12 | <style> |
8 | 13 | body { |
9 | 14 | font-family: 'Fira Code', monospace; |
10 | 15 | margin: 0; |
11 | | - padding: 20px; |
| 16 | + padding: 20px 20px 20px 20px; |
12 | 17 | background-color: #1e1e1e; |
13 | 18 | color: #c5c5c5; |
14 | | - height: calc(100vh - 40px); /* Adjust height to add bottom margin */ |
| 19 | + height: 100vh; |
15 | 20 | display: flex; |
16 | 21 | flex-direction: column; |
17 | 22 | overflow: hidden; /* Prevent body from scrolling */ |
| 23 | + box-sizing: border-box; |
18 | 24 | } |
19 | 25 | h1 { |
20 | 26 | font-size: 24px; |
21 | 27 | color: #06883e; |
22 | 28 | margin: 0 0 20px 0; |
23 | 29 | } |
24 | 30 | .console { |
25 | | - background-image: url('./assets/images/agent.png'); |
| 31 | + /* background-image: url('./assets/images/agent.png'); */ |
26 | 32 | background-size: contain; /* Fit the image within the element */ |
27 | 33 | background-repeat: no-repeat; /* Prevent repeating */ |
28 | 34 | background-position: center; /* Center the image */ |
29 | 35 | height: 100vh; /* Full viewport height */ |
30 | 36 | width: 100%; |
31 | | - background-color: #191919; |
| 37 | + background-color: transparent; |
32 | 38 | color: #ffffff; |
33 | | - padding: 10px; |
| 39 | + padding: 10px 10px 10px 10px; |
34 | 40 | flex-grow: 1; |
35 | 41 | overflow: auto; |
36 | 42 | border-radius: 4px; |
|
40 | 46 | position: relative; |
41 | 47 | white-space: pre-wrap; |
42 | 48 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); |
| 49 | + box-sizing: border-box; |
| 50 | + } |
| 51 | + .console::-webkit-scrollbar { |
| 52 | + width: 12px; |
| 53 | + } |
| 54 | + .console::-webkit-scrollbar-track { |
| 55 | + background: #1a1a1a; |
| 56 | + border-radius: 6px; |
| 57 | + } |
| 58 | + .console::-webkit-scrollbar-thumb { |
| 59 | + background: #333333; |
| 60 | + border-radius: 6px; |
| 61 | + border: 2px solid #1a1a1a; |
| 62 | + } |
| 63 | + .console::-webkit-scrollbar-thumb:hover { |
| 64 | + background: #555555; |
43 | 65 | } |
44 | 66 | .input { |
45 | 67 | display: flex; |
|
87 | 109 | color: #ffffff; |
88 | 110 | } |
89 | 111 | table.vampire-matrix { |
90 | | - width: 100%; /* Make the table consume the entire window width */ |
91 | | - border-collapse: collapse; |
92 | | - background-color: #1c1c1c; |
93 | | - box-shadow: 0 0 10px rgba(0, 255, 64, 0.5); |
94 | | -} |
| 112 | + width: 100%; /* Make the table consume the entire window width */ |
| 113 | + border-collapse: collapse; |
| 114 | + background-color: #030303; |
| 115 | + box-shadow: none; |
| 116 | + } |
95 | 117 |
|
96 | | -table.vampire-matrix th, |
97 | | -table.vampire-matrix td { |
98 | | - border: 1px solid #333; |
99 | | - padding: 10px 15px; |
100 | | - text-align: left; |
101 | | - vertical-align: middle; |
102 | | - word-wrap: break-word; /* Ensure content wraps within the cell */ |
103 | | -} |
| 118 | + table.vampire-matrix th, |
| 119 | + table.vampire-matrix td { |
| 120 | + border: 1px solid #333; |
| 121 | + padding: 10px 15px; |
| 122 | + text-align: left; |
| 123 | + vertical-align: middle; |
| 124 | + word-wrap: break-word; /* Ensure content wraps within the cell */ |
| 125 | + } |
104 | 126 |
|
105 | | -table.vampire-matrix thead th { |
106 | | - background-color: #333; |
107 | | - color: #fff; |
108 | | - font-size: 1.1em; |
109 | | -} |
| 127 | + table.vampire-matrix thead th { |
| 128 | + background-color: #0a0a0a; |
| 129 | + color: #fff; |
| 130 | + font-size: 1.1em; |
| 131 | + } |
110 | 132 |
|
111 | | -table.vampire-matrix tbody tr { |
112 | | - transition: background-color 0.3s; |
113 | | -} |
| 133 | + table.vampire-matrix tbody tr { |
| 134 | + transition: background-color 0.3s; |
| 135 | + } |
114 | 136 |
|
115 | | -table.vampire-matrix tbody tr:hover { |
116 | | - background-color: #2a2a2a; |
117 | | -} |
| 137 | + table.vampire-matrix tbody tr:hover { |
| 138 | + background-color: #080808; |
| 139 | + } |
118 | 140 |
|
119 | | -table.vampire-matrix tbody tr:nth-child(even) { |
120 | | - background-color: #232323; |
121 | | -} |
| 141 | + table.vampire-matrix tbody tr:nth-child(even) { |
| 142 | + background-color: #050505; |
| 143 | + } |
122 | 144 |
|
123 | | -table.vampire-matrix tbody tr:nth-child(odd) { |
124 | | - background-color: #1a1a1a; |
125 | | -} |
| 145 | + table.vampire-matrix tbody tr:nth-child(odd) { |
| 146 | + background-color: #020202; |
| 147 | + } |
126 | 148 |
|
127 | | -table.vampire-matrix td { |
128 | | - color: #fff; /* Change text color to white */ |
129 | | -} |
| 149 | + table.vampire-matrix td { |
| 150 | + color: #fff; /* Change text color to white */ |
| 151 | + } |
130 | 152 |
|
131 | | -table.vampire-matrix th { |
132 | | - border-bottom: 2px solid #444; |
133 | | -} |
| 153 | + table.vampire-matrix th { |
| 154 | + border-bottom: 2px solid #444; |
| 155 | + } |
| 156 | + |
| 157 | + table.vampire-matrix tbody td:first-child { |
| 158 | + border-left: 2px solid #444; |
| 159 | + } |
134 | 160 |
|
135 | | -table.vampire-matrix tbody td:first-child { |
136 | | - border-left: 2px solid #444; |
137 | | -} |
| 161 | + table.vampire-matrix tbody td:last-child { |
| 162 | + border-right: 2px solid #444; |
| 163 | + } |
138 | 164 |
|
139 | | -table.vampire-matrix tbody td:last-child { |
140 | | - border-right: 2px solid #444; |
141 | | -} |
| 165 | + tr { |
| 166 | + height: 20px; |
| 167 | + max-height: 20px; /* Set your desired max-height here */ |
| 168 | + overflow: hidden; |
| 169 | + } |
| 170 | + tr > td { |
| 171 | + max-height: inherit; /* Apply max height to each cell */ |
| 172 | + overflow: hidden; /* Ensure content overflow is hidden in each cell */ |
| 173 | + } |
142 | 174 |
|
143 | | -tr { |
144 | | - height: 20px; |
145 | | - max-height: 20px; /* Set your desired max-height here */ |
146 | | - overflow: hidden; |
147 | | -} |
148 | | -tr > td { |
149 | | - max-height: inherit; /* Apply max height to each cell */ |
150 | | - overflow: hidden; /* Ensure content overflow is hidden in each cell */ |
151 | | -} |
| 175 | + @media (prefers-color-scheme: dark) { |
| 176 | + body { |
| 177 | + background-color: #0a0a0a; |
| 178 | + } |
| 179 | + } |
152 | 180 | </style> |
153 | 181 | </head> |
154 | 182 | <body> |
155 | 183 | <!-- <h1>Agent Terminal</h1> --> |
| 184 | + |
156 | 185 | <div class="agentstatus" id="agentstatus"> |
157 | | - <table id="agentTable" class="vampire-matrix" height="20px"> |
158 | | - <tbody> |
159 | | - <tr> |
160 | | - <td>Agent ID</td> |
161 | | - <td>Hostname</td> |
162 | | - <td>Username</td> |
163 | | - <td>Process</td> |
164 | | - <td>PID</td> |
165 | | - <td>IP</td> |
166 | | - <td>Arch</td> |
167 | | - <td>Platform</td> |
168 | | - <td>Checkin</td> |
169 | | - </tr> |
170 | | - </tbody> |
171 | | - </table> |
| 186 | + <table id="agentTable" class="vampire-matrix" height="20px"> |
| 187 | + <tbody> |
| 188 | + <tr id="agentDataRow"> |
| 189 | + <td>Loading..</td> |
| 190 | + <td>-</td> |
| 191 | + <td>-</td> |
| 192 | + <td>-</td> |
| 193 | + <td>-</td> |
| 194 | + <td>-</td> |
| 195 | + <td>-</td> |
| 196 | + <td>-</td> |
| 197 | + <td>-</td> |
| 198 | + </tr> |
| 199 | + </tbody> |
| 200 | + </table> |
172 | 201 | </div> |
173 | 202 | <div class="console" id="consoleOutput"></div> |
174 | 203 | <div class="input"> |
|
178 | 207 | <div id="commandDropdown"></div> |
179 | 208 | </div> |
180 | 209 | <script src="agent.js"></script> |
| 210 | + <script> |
| 211 | + // Function to apply font settings to this agent window |
| 212 | + function applyFontSettings(settings) { |
| 213 | + console.log('=== APPLYING FONT SETTINGS ==='); |
| 214 | + console.log('Settings received:', settings); |
| 215 | + |
| 216 | + const elementsToStyle = [ |
| 217 | + document.body, |
| 218 | + document.getElementById('consoleOutput'), |
| 219 | + document.getElementById('consoleInput'), |
| 220 | + ...document.querySelectorAll('.vampire-matrix td'), |
| 221 | + ...document.querySelectorAll('.vampire-matrix th'), |
| 222 | + ...document.querySelectorAll('.vampire-matrix') |
| 223 | + ]; |
| 224 | + |
| 225 | + console.log('Elements to style:', elementsToStyle.length); |
| 226 | + |
| 227 | + elementsToStyle.forEach((element, index) => { |
| 228 | + if (element) { |
| 229 | + console.log(`Styling element ${index}:`, element.tagName, element.className); |
| 230 | + if (settings.fontFamily) { |
| 231 | + element.style.fontFamily = settings.fontFamily; |
| 232 | + console.log(`Set fontFamily to: ${settings.fontFamily}`); |
| 233 | + } |
| 234 | + if (settings.fontSize) { |
| 235 | + element.style.fontSize = settings.fontSize + 'px'; |
| 236 | + console.log(`Set fontSize to: ${settings.fontSize}px`); |
| 237 | + } |
| 238 | + if (settings.fontColor) { |
| 239 | + element.style.color = settings.fontColor; |
| 240 | + console.log(`Set fontColor to: ${settings.fontColor}`); |
| 241 | + } |
| 242 | + } |
| 243 | + }); |
| 244 | + |
| 245 | + // Apply zoom if specified |
| 246 | + if (settings.zoom && settings.zoom !== 1.0) { |
| 247 | + console.log('Applying zoom:', settings.zoom); |
| 248 | + const elementsToZoom = [ |
| 249 | + document.getElementById('consoleOutput'), |
| 250 | + document.querySelector('.agentstatus') |
| 251 | + ]; |
| 252 | + |
| 253 | + elementsToZoom.forEach(element => { |
| 254 | + if (element) { |
| 255 | + element.style.transform = `scale(${settings.zoom})`; |
| 256 | + element.style.transformOrigin = 'top left'; |
| 257 | + console.log('Applied zoom to:', element.id || element.className); |
| 258 | + } |
| 259 | + }); |
| 260 | + } |
| 261 | + |
| 262 | + // Apply agent background image if specified |
| 263 | + if (settings.agentBackgroundImage) { |
| 264 | + console.log('Applying agent background image:', settings.agentBackgroundImage); |
| 265 | + document.body.style.backgroundImage = `url('${settings.agentBackgroundImage}')`; |
| 266 | + document.body.style.backgroundSize = 'cover'; |
| 267 | + document.body.style.backgroundRepeat = 'no-repeat'; |
| 268 | + document.body.style.backgroundPosition = 'center'; |
| 269 | + document.body.style.backgroundAttachment = 'fixed'; |
| 270 | + } else { |
| 271 | + console.log('Clearing agent background image'); |
| 272 | + document.body.style.backgroundImage = ''; |
| 273 | + document.body.style.backgroundSize = ''; |
| 274 | + document.body.style.backgroundRepeat = ''; |
| 275 | + document.body.style.backgroundPosition = ''; |
| 276 | + document.body.style.backgroundAttachment = ''; |
| 277 | + } |
| 278 | + |
| 279 | + console.log('=== FONT SETTINGS APPLIED ==='); |
| 280 | + } |
| 281 | + |
| 282 | + // Handle font settings from separate settings window |
| 283 | + ipcRenderer.on('apply-font-settings', (event, settings) => { |
| 284 | + console.log('=== RECEIVED APPLY-FONT-SETTINGS IPC ==='); |
| 285 | + console.log('Event:', event); |
| 286 | + console.log('Settings:', settings); |
| 287 | + applyFontSettings(settings); |
| 288 | + }); |
| 289 | + |
| 290 | + // Load saved settings on page load |
| 291 | + window.addEventListener('DOMContentLoaded', () => { |
| 292 | + // Load settings from customize.js file |
| 293 | + ipcRenderer.invoke('get-customize-settings').then(settings => { |
| 294 | + if (settings) { |
| 295 | + console.log('Loading customize settings from file:', settings); |
| 296 | + applyFontSettings(settings); |
| 297 | + } |
| 298 | + }).catch(error => { |
| 299 | + console.error('Error loading customize settings:', error); |
| 300 | + }); |
| 301 | + }); |
| 302 | + |
| 303 | + // Add test keyboard shortcut (F5 to test applying settings) |
| 304 | + document.addEventListener('keydown', (event) => { |
| 305 | + if (event.key === 'F5') { |
| 306 | + event.preventDefault(); |
| 307 | + console.log('=== F5 PRESSED - TESTING SETTINGS ==='); |
| 308 | + const testSettings = { |
| 309 | + fontFamily: "'Courier New', monospace", |
| 310 | + fontSize: 20, |
| 311 | + fontColor: "#ff0000", |
| 312 | + zoom: 1.2 |
| 313 | + }; |
| 314 | + console.log('Applying test settings:', testSettings); |
| 315 | + applyFontSettings(testSettings); |
| 316 | + } |
| 317 | + |
| 318 | + // Zoom hotkeys for agent window |
| 319 | + if (event.ctrlKey && (event.key === '+' || event.key === '=')) { |
| 320 | + event.preventDefault(); |
| 321 | + // Get current settings and increase zoom |
| 322 | + ipcRenderer.invoke('get-customize-settings').then(settings => { |
| 323 | + if (settings) { |
| 324 | + const newZoom = Math.min(2.0, (settings.zoom || 1.0) + 0.1); |
| 325 | + const updatedSettings = { ...settings, zoom: newZoom }; |
| 326 | + applyFontSettings(updatedSettings); |
| 327 | + // Save updated settings |
| 328 | + ipcRenderer.send('apply-agent-settings', updatedSettings); |
| 329 | + } |
| 330 | + }); |
| 331 | + } |
| 332 | + |
| 333 | + if (event.ctrlKey && event.key === '-') { |
| 334 | + event.preventDefault(); |
| 335 | + // Get current settings and decrease zoom |
| 336 | + ipcRenderer.invoke('get-customize-settings').then(settings => { |
| 337 | + if (settings) { |
| 338 | + const newZoom = Math.max(0.5, (settings.zoom || 1.0) - 0.1); |
| 339 | + const updatedSettings = { ...settings, zoom: newZoom }; |
| 340 | + applyFontSettings(updatedSettings); |
| 341 | + // Save updated settings |
| 342 | + ipcRenderer.send('apply-agent-settings', updatedSettings); |
| 343 | + } |
| 344 | + }); |
| 345 | + } |
| 346 | + }); |
| 347 | + </script> |
181 | 348 | </body> |
182 | 349 | </html> |
0 commit comments