Create index.html
Browse files- index.html +50 -0
index.html
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Log Viewer</title>
|
| 7 |
+
<style>
|
| 8 |
+
body { font-family: 'Courier New', monospace; background: #f4f4f4; color: #333; padding: 20px; }
|
| 9 |
+
.ip-log-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin-top: 10px; overflow-y: auto; max-height: 60vh; }
|
| 10 |
+
p { margin: 10px 0; padding-left: 10px; }
|
| 11 |
+
</style>
|
| 12 |
+
</head>
|
| 13 |
+
<body>
|
| 14 |
+
<h1>Real-Time Logs</h1>
|
| 15 |
+
<div id="logs"></div>
|
| 16 |
+
<script src="/socket.io/socket.io.js"></script>
|
| 17 |
+
<script>
|
| 18 |
+
const socket = io();
|
| 19 |
+
const colorMap = {};
|
| 20 |
+
const logContainer = document.getElementById('logs');
|
| 21 |
+
socket.on('log', function(msg) {
|
| 22 |
+
const ip = extractIP(msg);
|
| 23 |
+
if (!colorMap[ip]) {
|
| 24 |
+
// Assign a random color to this IP
|
| 25 |
+
colorMap[ip] = generateRandomColor();
|
| 26 |
+
// Create a new div for this IP
|
| 27 |
+
const ipDiv = document.createElement('div');
|
| 28 |
+
ipDiv.id = `log-${ip}`;
|
| 29 |
+
ipDiv.className = 'ip-log-container';
|
| 30 |
+
ipDiv.style.borderLeft = `10px solid ${colorMap[ip]}`;
|
| 31 |
+
logContainer.appendChild(ipDiv);
|
| 32 |
+
}
|
| 33 |
+
const ipSpecificLogs = document.getElementById(`log-${ip}`);
|
| 34 |
+
const paragraph = document.createElement('p');
|
| 35 |
+
paragraph.textContent = msg;
|
| 36 |
+
ipSpecificLogs.appendChild(paragraph);
|
| 37 |
+
// Scroll to newly added log
|
| 38 |
+
ipSpecificLogs.scrollTop = ipSpecificLogs.scrollHeight;
|
| 39 |
+
});
|
| 40 |
+
function generateRandomColor() {
|
| 41 |
+
const colors = ['red', 'green', 'blue', 'purple', 'orange', 'yellow', 'teal', 'olive'];
|
| 42 |
+
return colors[Math.floor(Math.random() * colors.length)];
|
| 43 |
+
}
|
| 44 |
+
function extractIP(msg) {
|
| 45 |
+
const parts = msg.split(' ');
|
| 46 |
+
return parts.find(part => part.match(/^[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+$/));
|
| 47 |
+
}
|
| 48 |
+
</script>
|
| 49 |
+
</body>
|
| 50 |
+
</html>
|