|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Log Viewer</title> |
|
<style> |
|
body { font-family: 'Courier New', monospace; background: #f4f4f4; color: #333; padding: 20px; } |
|
.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; } |
|
p { margin: 10px 0; padding-left: 10px; } |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Real-Time Logs</h1> |
|
<div id="logs"></div> |
|
<script src="/socket.io/socket.io.js"></script> |
|
<script> |
|
const socket = io(); |
|
const colorMap = {}; |
|
const logContainer = document.getElementById('logs'); |
|
socket.on('log', function(msg) { |
|
const ip = extractIP(msg); |
|
if (!colorMap[ip]) { |
|
|
|
colorMap[ip] = generateRandomColor(); |
|
|
|
const ipDiv = document.createElement('div'); |
|
ipDiv.id = `log-${ip}`; |
|
ipDiv.className = 'ip-log-container'; |
|
ipDiv.style.borderLeft = `10px solid ${colorMap[ip]}`; |
|
logContainer.appendChild(ipDiv); |
|
} |
|
const ipSpecificLogs = document.getElementById(`log-${ip}`); |
|
const paragraph = document.createElement('p'); |
|
paragraph.textContent = msg; |
|
ipSpecificLogs.appendChild(paragraph); |
|
|
|
ipSpecificLogs.scrollTop = ipSpecificLogs.scrollHeight; |
|
}); |
|
function generateRandomColor() { |
|
const colors = ['red', 'green', 'blue', 'purple', 'orange', 'yellow', 'teal', 'olive']; |
|
return colors[Math.floor(Math.random() * colors.length)]; |
|
} |
|
function extractIP(msg) { |
|
const parts = msg.split(' '); |
|
return parts.find(part => part.match(/^[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+$/)); |
|
} |
|
</script> |
|
</body> |
|
</html> |
