PHASE 0: DATA PROVENANCE
PHASE 1: THE SYNDICATE
PHASE 1.1: THE DISCOVERY
PHASE 2.1: TARGET CLARITY
PHASE 2.2: MONEY FLOW
PHASE 3: EXECUTIVE REPORT
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body, html { margin: 0; padding: 0; height: 100%; background: radial-gradient(circle at center, #0a111a 0%, #000 100%); font-family: 'Courier New', monospace; color: #fff; overflow-x: hidden; } #ui-layer { padding: 30px; box-sizing: border-box; max-width: 1400px; margin: 0 auto; } .tactical-panel { background: rgba(5, 10, 15, 0.95); border: 1px solid #333; padding: 25px; box-shadow: 0 0 20px rgba(0,0,0,0.8); margin-bottom: 20px; position: relative; overflow: hidden; } #header { border-left: 5px solid #00f2ff; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .gps-strip { font-size: 11px; color: #00f2ff; background: rgba(0,242,255,0.1); padding: 5px 10px; border: 1px solid #00f2ff33; letter-spacing: 1px; font-weight: bold;} .section-title { font-size: 14px; color: #fff; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 20px; font-weight: bold; letter-spacing: 2px; } .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; } .kpi-box { background: #050a0f; border: 1px solid #222; padding: 20px; border-top: 2px solid #00f2ff; text-align: center; } .kpi-val { font-size: 28px; font-weight: bold; color: #00f2ff; margin-bottom: 5px; text-shadow: 0 0 10px rgba(0,242,255,0.4); } .kpi-lbl { font-size: 10px; color: #888; letter-spacing: 1px; text-transform: uppercase; } .telemetry-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .telemetry-col { background: #050505; border: 1px solid #1a1a1a; padding: 15px; } .t-title { color: #ffcc00; font-size: 12px; font-weight: bold; margin-bottom: 15px; letter-spacing: 1px; border-bottom: 1px dashed #333; padding-bottom: 5px; } .t-item { font-size: 11px; color: #aaa; margin-bottom: 8px; display: flex; justify-content: space-between; } .t-item span:last-child { color: #00ff00; } .raw-data-container { margin-top: 30px; } .raw-data-header { display: flex; font-size: 10px; color: #555; border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 10px; font-weight: bold; } .raw-data-header div { flex: 1; } .raw-row { display: flex; font-size: 10px; color: #00f2ff; margin-bottom: 8px; opacity: 0; animation: fadeUp 0.5s forwards; } .raw-row div { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 0.7; transform: translateY(0); } } .scanning-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: rgba(0, 242, 255, 0.5); box-shadow: 0 0 10px #00f2ff; animation: scan 3s infinite linear; z-index: 5; } @keyframes scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } </style> </head> <body> <div id="ui-layer"> <div id="header" class="tactical-panel"> <div> <div style="font-size:24px; color:#00f2ff; font-weight:bold; letter-spacing: 2px;">PHASE 0: DATA PROVENANCE & SCOPE</div> <div style="font-size:11px; color:#aaa; margin-top: 5px;">ESTABLISHING THE FORENSIC BASELINE FOR GRAPH ANALYTICS</div> </div> <div class="gps-strip">SYSTEM STATUS: DATA INGESTION COMPLETE</div> </div> <div class="tactical-panel"> <div class="section-title">THE ANALYTICS PIPELINE</div> <div style="font-size: 12px; color: #ddd; margin-bottom: 20px; line-height: 1.6;"> Before visualization, the Graph Analytics Engine ingested a global dataset of digital banking telemetry. By applying relational graph algorithms across device fingerprints, network signatures, and behavioral risk scores, the engine filtered thousands of suspicious events down to a single, highly coordinated Threat Network spanning a massive 237-day dwell time. </div> <div class="kpi-grid"> <div class="kpi-box" style="border-color: #555;"> <div class="kpi-val" style="color: #aaa;">237 DAYS</div> <div class="kpi-lbl">Telemetry Dwell Window</div> </div> <div class="kpi-box" style="border-color: #555;"> <div class="kpi-val" style="color: #aaa;">1M >> </div> <div class="kpi-lbl">Suspected Events Analyzed</div> </div> <div class="kpi-box" style="border-color: #ffcc00; background: rgba(255,204,0,0.05);"> <div class="kpi-val" style="color: #ffcc00;">153</div> <div class="kpi-lbl">Threat Networks Detected</div> </div> <div class="kpi-box" style="border-color: #ff3333; background: rgba(255,51,51,0.05);"> <div class="kpi-val" style="color: #ff3333;">988</div> <div class="kpi-lbl">Isolated Network Events</div> </div> </div> <div class="section-title" style="margin-top: 30px;">KEY TELEMETRY VECTORS UTILIZED</div> <div class="telemetry-grid"> <div class="telemetry-col"> <div class="t-title">IDENTITY & DEVICE</div> <div class="t-item">LexID Digital <span>Active</span></div> <div class="t-item">ThreatMetrix SmartID <span>Active</span></div> <div class="t-item">ExactID (Browser Hash) <span>Active</span></div> <div class="t-item">Device Brand & OS <span>Active</span></div> </div> <div class="telemetry-col"> <div class="t-title">NETWORK INTEL</div> <div class="t-item">True IP vs Input IP <span>Active</span></div> <div class="t-item">ISP / Hosting Provider <span>Active</span></div> <div class="t-item">VPN/Proxy Detection <span>Active</span></div> <div class="t-item">Geofence GPS <span>Active</span></div> </div> <div class="telemetry-col"> <div class="t-title">BEHAVIORAL RISK</div> <div class="t-item">Event Type (Login/Payment) <span>Active</span></div> <div class="t-item">Policy Score <span>Active</span></div> <div class="t-item">Final Review Status <span>Active</span></div> <div class="t-item">Transaction Amount (USD) <span>Active</span></div> </div> </div> </div> <div class="tactical-panel raw-data-container"> <div class="scanning-line"></div> <div class="section-title" style="color: #555; border-color: #222;">SIMULATED RAW DATA EXTRACTION (NETWORK C723CABD)</div> <div class="raw-data-header"> <div style="flex: 1.5;">TIMESTAMP</div> <div style="flex: 2;">ACCOUNT_LOGIN</div> <div style="flex: 2;">SMART_ID (DEVICE)</div> <div style="flex: 1;">GEO</div> <div style="flex: 1;">EVENT</div> <div style="flex: 1;">STATUS</div> </div> <div id="log-container"></div> </div> </div> <script> const logs = [ "2025-02-07 05:24:41 UTC | cce0fbaf81d8dfaa... | a737233c6432458e... | SG | login | accept", "2025-03-12 11:15:30 UTC | 661840c0bbb6214e... | 06b468d28ef84536... | SG | login | accept", "2025-05-14 04:35:58 UTC | cce0fbaf81d8dfaa... | a737233c6432458e... | SG | payment | reject", "2025-06-20 09:12:26 UTC | 3439e5d0bbb6214e... | 63a004955eda42e6... | US | payment | accept", "2025-08-15 06:14:22 UTC | 661840c0bbb6214e... | a737233c6432458e... | SG | payment | accept", "2025-09-20 11:22:05 UTC | 62782C69b66ed61a... | 06b468d28ef84536... | SG | login | accept", "2025-09-22 14:01:33 UTC | us_vict_1_74829a... | 63a004955eda42e6... | US | payment | accept", "2025-10-02 11:49:54 UTC | 84ee83cef61ce240... | 0b39497fe43f44cd... | US | login | null" ]; const container = document.getElementById('log-container'); function addLog(index) { if (index >= logs.length) return; const parts = logs[index].split(' | '); const row = document.createElement('div'); row.className = 'raw-row'; let statusColor = parts[5].trim() === 'accept' ? '#00ff00' : (parts[5].trim() === 'reject' ? '#ff3333' : '#ffcc00'); row.innerHTML = ` <div style="flex: 1.5; color: #888;">${parts[0]}</div> <div style="flex: 2; color: #ccc;">${parts[1]}</div> <div style="flex: 2; color: #ffcc00;">${parts[2]}</div> <div style="flex: 1;">${parts[3]}</div> <div style="flex: 1; color: #00f2ff;">${parts[4]}</div> <div style="flex: 1; font-weight: bold; color: ${statusColor};">${parts[5]}</div> `; container.appendChild(row); setTimeout(() => addLog(index + 1), 250); } setTimeout(() => addLog(0), 500); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script> <style> body, html { margin: 0; padding: 0; height: 100%; background: #050505; font-family: 'Courier New', monospace; overflow: hidden; color: #fff; } #mynetwork { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: radial-gradient(circle, #0a111a 0%, #000 100%); outline: none;} #ui-layer { position: absolute; top: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; } .tactical-panel { position: absolute; background: rgba(5, 10, 15, 0.95); border: 1px solid #222; padding: 20px; pointer-events: auto; box-shadow: 0 0 20px rgba(0,0,0,0.8); box-sizing: border-box;} #header { top: 20px; left: 20px; right: 20px; border-left: 5px solid #ff00ff; display: flex; justify-content: space-between; align-items: center; } .gps-strip { font-size: 11px; color: #ff00ff; background: rgba(255,0,255,0.1); padding: 5px 10px; border: 1px solid #ff00ff33; letter-spacing: 1px; font-weight: bold;} #left-sidebar { top: 100px; left: 20px; width: 340px; height: calc(100vh - 140px); border-left: 5px solid #ff00ff; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column;} .section-title { font-size: 11px; color: #00f2ff; border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 15px; font-weight: bold; letter-spacing: 1px; } .stats-table { width: 100%; font-size: 11px; border-collapse: collapse; color: #aaa; margin-bottom: 15px;} .stats-table td { padding: 8px 0; border-bottom: 1px solid #1a1a1a; } .stats-val { text-align: right; font-weight: bold; color: #fff; } .control-panel { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; } .playback-btn { background: #111; color: #00f2ff; border: 1px solid #00f2ff; padding: 12px; font-size: 11px; width: 100%; cursor: pointer; font-weight: bold; letter-spacing: 1px; transition: 0.3s; } .playback-btn.active { background: #00f2ff; color: #000; box-shadow: 0 0 15px rgba(0,242,255,0.4);} .playback-btn.hardware.active { background: #ffcc00; color: #000; border-color: #ffcc00; box-shadow: 0 0 15px rgba(255,204,0,0.4);} .playback-btn.masks.active { background: #00ff00; color: #000; border-color: #00ff00; box-shadow: 0 0 15px rgba(0,255,0,0.4);} .intent-box { background: rgba(255, 0, 255, 0.1); border: 1px solid #ff00ff66; padding: 15px; margin-bottom: 20px; border-radius: 4px; } .intent-text { font-size: 10.5px; line-height: 1.5; color: #ddd; } #forensic-legend { margin-top: auto; background: rgba(5, 10, 15, 0.95); border: 1px solid #444; padding: 15px; border-radius: 4px;} .legend-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .legend-item { display: flex; align-items: center; gap: 10px; font-size: 10px; color: #ddd; } .l-icon { width: 14px; height: 14px; border: 2px solid #fff; flex-shrink: 0; } </style> </head> <body> <div id="mynetwork"></div> <div id="ui-layer"> <div id="header" class="tactical-panel"> <div> <div style="font-size:18px; color:#ff00ff; font-weight:bold;">PHASE 1: THE LAUNCH PAD</div> <div style="font-size:9px; color:#00f2ff;">ATOMIC TOPOLOGY | 4-TIER THREAT SYNDICATE</div> </div> <div class="gps-strip">NETWORK ID: 1214850 | FACTUAL DATA MAPPING</div> </div> <div id="left-sidebar" class="tactical-panel"> <div class="intent-box"> <div style="color:#ff00ff; font-size:10px; font-weight:bold; margin-bottom:5px;">THE TRUE SYNDICATE STRUCTURE</div> <div class="intent-text">The data reveals that LexID c723cabd is not acting alone. It is part of a massive coordinated syndicate (Network ID 1214850) consisting of 8 distinct personas operated across 14 physical devices.</div> </div> <div class="section-title">COMMAND CONTROLS</div> <div class="control-panel"> <button id="btn-tier2" class="playback-btn active" onclick="revealTier2()">1. ISOLATE PERSONAS (DIGITAL IDs)</button> <button id="btn-tier3" class="playback-btn hardware" onclick="revealTier3()">2. REVEAL HARDWARE (SMART IDs)</button> <button id="btn-tier4" class="playback-btn masks" onclick="revealTier4()">3. REVEAL SYNTHETIC MASKS (EXACT IDs)</button> </div> <div class="intent-box" style="background: rgba(255, 51, 51, 0.1); border-color: #ff333366; margin-top: 15px;"> <div style="color:#ff3333; font-size:10px; font-weight:bold; margin-bottom:5px;">FORENSIC ISOLATION</div> <div class="intent-text">While this syndicate operates 8 distinct personas, our drill-down will isolate the most aggressive entity: <b>Persona c723cabd</b>.</div> </div> <div class="section-title" style="margin-top:20px;">NETWORK AUDIT</div> <table class="stats-table"> <tr><td>Syndicate Root</td><td class="stats-val" style="color:#ff00ff;">Network 1214850</td></tr> <tr><td>Digital IDs (Personas)</td><td class="stats-val" style="color:#00f2ff;">8 Confirmed</td></tr> <tr><td>Physical Devices</td><td class="stats-val" style="color:#ffcc00;">14 Confirmed</td></tr> <tr><td>Synthetic Masks</td><td class="stats-val" style="color:#00ff00;">60+ Generated</td></tr> </table> <div id="forensic-legend"> <div class="section-title" style="color:#fff; font-size:10px; border-bottom:1px solid #444; margin-bottom:12px;">TOPOLOGY LEGEND</div> <div class="legend-grid"> <div class="legend-item"><div class="l-icon" style="clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background:#1a001a; border-color:#ff00ff;"></div> <b>TIER 1:</b> The Syndicate (Network ID)</div> <div class="legend-item"><div class="l-icon" style="background:#001a1a; border-color:#00f2ff; transform: rotate(45deg);"></div> <b>TIER 2:</b> Digital Personas (LexID)</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#331a00; border-color:#ffcc00;"></div> <b>TIER 3:</b> Physical Devices (SmartID)</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#003300; border-color:#00ff00; width:8px; height:8px;"></div> <b>TIER 4:</b> Synthetic Spoofs (ExactID)</div> </div> </div> </div> </div> <script> let nodes = new vis.DataSet([ { id: "N1", group: "network", label: "SYNDICATE\nNet: 1214850", value: 50 }, { id: "D1", group: "digital_id", label: "[PRIMARY TARGET]\nPersona: c723cabd", value: 35, color: {background: "#33001a", border: "#ff3333"}, shadow: { color: '#ff3333', size: 30 }, font: {color: '#ff3333', bold: true} }, { id: "D2", group: "digital_id", label: "Persona:\n06fa85c9", value: 20 }, { id: "D3", group: "digital_id", label: "Persona:\nc4514d9c", value: 20 }, { id: "D4", group: "digital_id", label: "Persona:\nefdaf0b0", value: 20 }, { id: "D5", group: "digital_id", label: "Persona:\n6adce33a", value: 20 }, { id: "D6", group: "digital_id", label: "Persona:\n4299a150", value: 20 }, { id: "D7", group: "digital_id", label: "Persona:\n8db1bdce", value: 20 }, { id: "D8", group: "digital_id", label: "Persona:\nb3f95748", value: 20 } ]); let edges = new vis.DataSet([ { id: "eN1", from: "N1", to: "D1", color: "#ff3333", width: 4 }, { id: "eN2", from: "N1", to: "D2", color: "rgba(255, 0, 255, 0.4)" }, { id: "eN3", from: "N1", to: "D3", color: "rgba(255, 0, 255, 0.4)" }, { id: "eN4", from: "N1", to: "D4", color: "rgba(255, 0, 255, 0.4)" }, { id: "eN5", from: "N1", to: "D5", color: "rgba(255, 0, 255, 0.4)" }, { id: "eN6", from: "N1", to: "D6", color: "rgba(255, 0, 255, 0.4)" }, { id: "eN7", from: "N1", to: "D7", color: "rgba(255, 0, 255, 0.4)" }, { id: "eN8", from: "N1", to: "D8", color: "rgba(255, 0, 255, 0.4)" } ]); const options = { nodes: { font: { color: "#fff", size: 12, face: "Courier New" }, borderWidth: 2, shadow: { enabled: true, size: 15 } }, edges: { width: 2, smooth: { type: "continuous" } }, groups: { network: { shape: "hexagon", color: {background: "#1a001a", border: "#ff00ff"}, shadow: { color: '#ff00ff', size: 45 } }, digital_id: { shape: "diamond", color: {background: "#001a1a", border: "#00f2ff"}, shadow: { color: '#00f2ff', size: 20 } }, device: { shape: "dot", color: {background: "#331a00", border: "#ffcc00"}, shadow: { color: '#ffcc00', size: 15 } }, mask: { shape: "dot", color: {background: "#003300", border: "#00ff00"}, shadow: { enabled: false } } }, physics: { solver: 'forceAtlas2Based', forceAtlas2Based: { gravitationalConstant: -120, centralGravity: 0.015, springLength: 120 }, stabilization: { iterations: 100 } } }; const container = document.getElementById("mynetwork"); let network = new vis.Network(container, { nodes, edges }, options); network.once("stabilizationIterationsDone", function () { network.fit({ animation: { duration: 1000, easingFunction: "easeInOutQuad" } }); }); let tier3Revealed = false; let tier4Revealed = false; function revealTier2() { // Reset to just tier 1 & 2 let nodesToRemove = nodes.get({ filter: function(item) { return item.group === 'device' || item.group === 'mask'; }}); nodes.remove(nodesToRemove.map(n => n.id)); document.getElementById("btn-tier2").classList.add("active"); document.getElementById("btn-tier3").classList.remove("active"); document.getElementById("btn-tier4").classList.remove("active"); tier3Revealed = false; tier4Revealed = false; } function revealTier3() { if (tier3Revealed) return; tier3Revealed = true; document.getElementById("btn-tier3").classList.add("active"); // 14 Physical Devices for(let i=1; i<=14; i++) { nodes.add({ id: `F${i}`, group: "device", label: `Device_${i}`, value: 15 }); } // Devices cross-pollinate Digital IDs (Personas) const deviceLinks = [ {d: "F1", targets: ["D1", "D2"]}, {d: "F2", targets: ["D1"]}, {d: "F3", targets: ["D1", "D3", "D4"]}, {d: "F4", targets: ["D1"]}, {d: "F5", targets: ["D2", "D5"]}, {d: "F6", targets: ["D3", "D6"]}, {d: "F7", targets: ["D4", "D7", "D8"]}, {d: "F8", targets: ["D5"]}, {d: "F9", targets: ["D6"]}, {d: "F10", targets: ["D7"]}, {d: "F11", targets: ["D8"]}, {d: "F12", targets: ["D2", "D8"]}, {d: "F13", targets: ["D3"]}, {d: "F14", targets: ["D4"]} ]; deviceLinks.forEach(link => { link.targets.forEach(t => { let eColor = (t === "D1") ? "rgba(255, 51, 51, 0.8)" : "rgba(255, 204, 0, 0.2)"; let eWidth = (t === "D1") ? 2 : 1; let eDash = (t === "D1") ? false : [2,4]; edges.add({ id: `e_${link.d}_${t}`, from: t, to: link.d, color: eColor, width: eWidth, dashes: eDash }); if (t === "D1") { nodes.update({id: link.d, color: {border: "#ff3333", background: "#33001a"}, shadow: {color: '#ff3333'}}); } }); }); } function revealTier4() { if (!tier3Revealed) revealTier3(); if (tier4Revealed) return; tier4Revealed = true; document.getElementById("btn-tier4").classList.add("active"); const d1Devices = ["F1", "F2", "F3", "F4"]; // Generate synthetic masks exploding from the physical devices for(let i=1; i<=14; i++) { let maskCount = Math.floor(Math.random() * 4) + 2; // 2 to 5 masks per device if(i===1 || i===3) maskCount = 8; // Heavy hitter devices let isD1 = d1Devices.includes(`F${i}`); for(let m=0; m<maskCount; m++) { let mId = `E_${i}_${m}`; let mColor = isD1 ? "rgba(255, 51, 51, 0.6)" : "rgba(0, 255, 0, 0.15)"; nodes.add({ id: mId, group: "mask", size: 5 }); edges.add({ id: `ee_${i}_${m}`, from: `F${i}`, to: mId, color: mColor, width: 1 }); } } } window.resizeCanvas = function() { network.fit(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script> <style> body, html { margin: 0; padding: 0; height: 100%; background: #050505; font-family: 'Courier New', monospace; overflow: hidden; color: #fff; } #mynetwork { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: radial-gradient(circle, #0a111a 0%, #000 100%); outline: none;} #ui-layer { position: absolute; top: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; } .tactical-panel { position: absolute; background: rgba(5, 10, 15, 0.95); border: 1px solid #222; padding: 20px; pointer-events: auto; box-shadow: 0 0 20px rgba(0,0,0,0.8); box-sizing: border-box;} #header { top: 20px; left: 20px; right: 20px; border-left: 5px solid #00f2ff; display: flex; justify-content: space-between; align-items: center; } .gps-strip { font-size: 11px; color: #00ff00; background: rgba(0,255,0,0.1); padding: 5px 10px; border: 1px solid #00ff0033; letter-spacing: 1px; font-weight: bold;} #left-sidebar { top: 100px; left: 20px; width: 340px; height: calc(100vh - 140px); border-left: 5px solid #ff00ff; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column;} #right-sidebar { top: 100px; right: 20px; width: 340px; height: calc(100vh - 400px); border-right: 5px solid #ffcc00; overflow-y: auto; } .section-title { font-size: 11px; color: #00f2ff; border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 15px; font-weight: bold; letter-spacing: 1px; } .stats-table { width: 100%; font-size: 11px; border-collapse: collapse; color: #aaa; margin-bottom: 15px;} .stats-table td { padding: 8px 0; border-bottom: 1px solid #1a1a1a; } .stats-val { text-align: right; font-weight: bold; color: #fff; } .funnel-container { margin-top: 10px; background: #0a0a0a; border: 1px solid #333; padding: 10px; border-radius: 4px; } .funnel-stage { height: 28px; margin-bottom: 8px; display: flex; align-items: center; padding: 0 10px; font-size: 10px; position: relative; overflow: hidden; cursor: pointer; transition: 0.3s; border: 1px solid transparent; border-radius: 2px;} .funnel-stage:hover { border-color: #fff; transform: scale(1.02); } .funnel-stage.active { border-color: #00f2ff; box-shadow: 0 0 15px rgba(0,242,255,0.4); } .stage-fill { position: absolute; left: 0; top: 0; height: 100%; z-index: 1; opacity: 0.3; } .stage-text { z-index: 2; width: 100%; display: flex; justify-content: space-between; font-weight: bold; letter-spacing: 1px;} .velocity-badge { background: #ff3333; color: #fff; padding: 3px 8px; border-radius: 3px; font-size: 9px; font-weight: bold; animation: pulse 1.5s infinite; letter-spacing: 1px; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .control-panel { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; } .playback-btn { background: #00f2ff; color: #000; border: none; padding: 12px; font-size: 11px; width: 100%; cursor: pointer; font-weight: bold; letter-spacing: 1px; transition: 0.3s; box-shadow: 0 0 15px rgba(0,242,255,0.4);} .playback-btn:hover { background: #fff; box-shadow: 0 0 20px #fff; } .highlight-btn { background: #111; color: #ffcc00; border: 1px solid #ffcc00; padding: 12px; font-size: 11px; width: 100%; cursor: pointer; font-weight: bold; letter-spacing: 1px; transition: 0.3s; } .highlight-btn.active { background: #ffcc00; color: #000; box-shadow: 0 0 20px #ffcc00; } #forensic-legend { margin-top: auto; background: rgba(5, 10, 15, 0.95); border: 1px solid #444; padding: 15px; border-radius: 4px;} .legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .legend-item { display: flex; align-items: center; gap: 10px; font-size: 10px; color: #ddd; } .l-icon { width: 14px; height: 14px; border: 2px solid #fff; flex-shrink: 0; } .l-line-container { width: 24px; display: flex; align-items: center; justify-content: center; } .l-line-solid-g { width: 100%; height: 3px; background-color: #00ff00; } .l-line-dashed-y { width: 100%; height: 0; border-bottom: 3px dashed #ffcc00; } .l-line-dotted-r { width: 100%; height: 0; border-bottom: 3px dotted #ff3333; } </style> </head> <body> <div id="mynetwork"></div> <div id="ui-layer"> <div id="header" class="tactical-panel"> <div> <div style="font-size:18px; color:#ff00ff; font-weight:bold;">PHASE 1.1: THE DISCOVERY</div> <div style="font-size:9px; color:#00f2ff;">ZOOMING INTO DIGITAL PERSONA: c723cabd</div> </div> <div class="gps-strip">TOTAL_VOLUME: $48,416.47 | STOLEN: $26,762.43 | PROTECTED: $21,654.04</div> </div> <div id="left-sidebar" class="tactical-panel"> <div> <div class="section-title">COMMAND CONTROLS</div> <div class="control-panel"> <button id="reveal-hub-btn" class="playback-btn" onclick="window.toggleMasterIdentity()">REVEAL MASTER IDENTITY (LEX_ID)</button> <button id="highlight-ch2-btn" class="highlight-btn" onclick="window.toggleCh2Targets()">ISOLATE BREACHED TARGETS</button> </div> <div class="section-title">INTERACTIVE FRICTION FUNNEL</div> <div style="font-size:9px; color:#aaa; margin-bottom:10px;">Click funnel stages to isolate attack outcomes.</div> <div class="funnel-container"> <div class="funnel-stage active" id="funnel-all" onclick="window.filterGraph('all')"> <div class="stage-fill" style="width:100%; background:#fff;"></div> <div class="stage-text"><span>TOTAL SESSIONS</span><span>988</span></div> </div> <div class="funnel-stage" id="funnel-success" onclick="window.filterGraph('success')"> <div class="stage-fill" style="width:21%; background:#00ff00;"></div> <div class="stage-text"><span style="color:#00ff00;">SECURITY BYPASS (BREACHED)</span><span>210</span></div> </div> <div class="funnel-stage" style="border: 1px dashed #ff3333; margin-top:5px;" id="funnel-abandoned" onclick="window.filterGraph('abandoned')"> <div class="stage-fill" style="width:78%; background:#ff3333;"></div> <div class="stage-text"><span style="color:#ff3333;">FRICTION DROPOUT (NULL)</span><span>778</span></div> </div> </div> <div class="section-title" style="margin-top:20px;">FINANCIAL OUTCOME</div> <table class="stats-table"> <tr><td>Total Attack Volume</td><td class="stats-val" style="color:#fff;">$48,416.47</td></tr> <tr><td>Capital Protected (Blocked)</td><td class="stats-val" style="color:#00ff00;">$21,654.04</td></tr> <tr><td>Capital Stolen (Breached)</td><td class="stats-val" style="color:#ff3333;">$26,762.43</td></tr> </table> </div> <div id="forensic-legend"> <div class="section-title" style="color:#fff; font-size:10px; border-bottom:1px solid #444; margin-bottom:12px;">FORENSIC TOPOLOGY LEGEND</div> <div class="legend-grid"> <div class="legend-item"><div class="l-icon" style="clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background:#001a1a; border-color:#00f2ff;"></div> Master LexID Hub</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#003300; border-color:#00ff00;"></div> Victim Account</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#331a00; border-color:#ffcc00;"></div> Attacker Device</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#00f2ff; border-color:#fff; width:8px; height:8px;"></div> Exact ID Mask</div> <div class="legend-item" style="grid-column: 1 / -1; margin-top: 5px; border-top: 1px solid #333; padding-top: 10px;"></div> <div class="legend-item"><div class="l-line-container"><div class="l-line-solid-g"></div></div> <b>Success Link</b></div> <div class="legend-item" style="grid-column: 1 / -1;"><div class="l-line-container"><div class="l-line-dotted-r"></div></div> <b>Abandoned / Blocked Link</b></div> </div> </div> </div> <div id="right-sidebar" class="tactical-panel"> <div id="idle-msg" style="color:#555; text-align:center; margin-top:40%;"> CLICK ANY NODE TO ANALYZE EVASION DYNAMICS </div> <div id="detail-content" style="display:none;"> <div style="display:flex; justify-content:space-between; align-items:flex-start;"> <div> <div id="node-type" style="font-size:10px; color:#aaa; margin-bottom:5px; font-weight:bold; letter-spacing:1px;">---</div> <div id="node-id" style="font-size:16px; font-weight:bold; color:#00f2ff; word-break: break-all;">---</div> </div> <div id="velocity-flag"></div> </div> <hr style="border:0.5px solid #333; margin:15px 0;"> <div id="node-insight" style="font-size:12px; line-height:1.6; color:#ddd;"></div> </div> </div> </div> <script> const accounts = [ { id: "cce0fbaf", group: "victim", label: "VICTIM: cce0fbaf\n[BREACHED WHALE]", value: 10, isCh2Target: true }, { id: "661840c0", group: "victim", label: "VICTIM: 661840c0\n[BREACHED WHALE]", value: 9, isCh2Target: true }, { id: "3439e5d0", group: "victim", label: "VICTIM: 3439e5d0\n[BREACHED WHALE]", value: 8, isCh2Target: true }, { id: "3e941f08", group: "victim", label: "VICTIM: 3e941f08\n[BREACHED WHALE]", value: 7, isCh2Target: true }, { id: "4e69ac4e", group: "victim", label: "VICTIM: 4e69ac4e\n[BREACHED WHALE]", value: 6, isCh2Target: true }, { id: "62782C69", group: "victim", label: "VICTIM: 62782c69\n[SHARED LOGIN]", value: 12, isCh2Target: true }, { id: "us_vict_1", group: "victim", label: "VICTIM: M3_Target_1\n[BREACHED]", value: 5, isCh2Target: true }, { id: "us_vict_2", group: "victim", label: "VICTIM: M4_Target_1\n[BREACHED]", value: 4, isCh2Target: true }, { id: "b_acc1", group: "victim", label: "VICTIM: 2eab1429\n[BLOCKED]", value: 8, isCh2Target: false }, { id: "b_acc2", group: "victim", label: "VICTIM: be66af4b\n[BLOCKED]", value: 7, isCh2Target: false }, { id: "b_acc3", group: "victim", label: "VICTIM: 95ffe5f3\n[BLOCKED]", value: 5, isCh2Target: false }, { id: "b_acc4", group: "victim", label: "VICTIM: f1269f53\n[BLOCKED]", value: 5, isCh2Target: false }, { id: "b_acc5", group: "victim", label: "VICTIM: 1c916f20\n[BLOCKED]", value: 3, isCh2Target: false } ]; const machines = [ { id: "a737233c", group: "device", label: "M1: a737233c\nSG Engine", value: 14, sats: 8 }, { id: "06b468d2", group: "device", label: "M2: 06b468d2\nSG Conduit", value: 8, sats: 2 }, { id: "63a00495", group: "device", label: "M3: 63a00495\nUS Engine", value: 7, sats: 5 }, { id: "0b39497f", group: "device", label: "M4: 0b39497f\nBridge Node", value: 6, sats: 3 } ]; let fingerprints = []; let fingerprintEdges = []; machines.forEach(m => { for(let i=0; i<m.sats; i++) { const satId = `SAT_${m.id}_${i}`; fingerprints.push({ id: satId, group: "mask", label: "" }); fingerprintEdges.push({ id: `e_mask_${satId}`, from: satId, to: m.id, color: "rgba(0, 242, 255, 0.4)", width: 1.5, dashes: [4,4], isMaskEdge: true }); } }); const coreEdgesData = [ { id: "e1", from: "a737233c", to: "cce0fbaf", frictionState: "success", color: "#00ff00", label: "Breached" }, { id: "e2", from: "a737233c", to: "661840c0", frictionState: "success", color: "#00ff00", label: "Breached" }, { id: "e3", from: "a737233c", to: "3439e5d0", frictionState: "success", color: "#00ff00", label: "Breached" }, { id: "e4", from: "a737233c", to: "3e941f08", frictionState: "success", color: "#00ff00", label: "Breached" }, { id: "e5", from: "a737233c", to: "4e69ac4e", frictionState: "success", color: "#00ff00", label: "Breached" }, { id: "e6", from: "a737233c", to: "b_acc1", frictionState: "abandoned", color: "#ff3333", dashes: [2,6], label: "Abandoned" }, { id: "e7", from: "a737233c", to: "b_acc2", frictionState: "abandoned", color: "#ff3333", dashes: [2,6], label: "Abandoned" }, { id: "e8", from: "06b468d2", to: "62782C69", frictionState: "success", color: "#00ff00", label: "Shared Acc" }, { id: "e9", from: "06b468d2", to: "b_acc3", frictionState: "abandoned", color: "#ff3333", dashes: [2,6], label: "Abandoned" }, { id: "e10", from: "63a00495", to: "us_vict_1", frictionState: "success", color: "#00ff00", label: "Breached" }, { id: "e12", from: "63a00495", to: "b_acc4", frictionState: "abandoned", color: "#ff3333", dashes: [2,6], label: "Abandoned" }, { id: "e13", from: "0b39497f", to: "us_vict_2", frictionState: "success", color: "#00ff00", label: "Breached" }, { id: "e14", from: "0b39497f", to: "b_acc5", frictionState: "abandoned", color: "#ff3333", dashes: [2,6], label: "Abandoned" } ]; coreEdgesData.forEach(e => { e.isAttackEdge = true; e.baseColor = e.color; }); let nodes = new vis.DataSet([...accounts, ...machines, ...fingerprints]); let edges = new vis.DataSet([...coreEdgesData, ...fingerprintEdges]); const baseBackgrounds = { hub: "#001a1a", victim: "#003300", device: "#331a00", mask: "#111" }; const baseBorders = { hub: "#00f2ff", victim: "#00ff00", device: "#ffcc00", mask: "#00f2ff" }; const options = { nodes: { font: { color: "#fff", size: 12, face: "Courier New" }, borderWidth: 2, shadow: { enabled: true, size: 15 }, scaling: { min: 10, max: 30 } }, edges: { width: 3, font: { color: "#fff", size: 11, face: "Courier New", background: "#000", strokeWidth: 0, align: 'middle' }, smooth: { type: "continuous" } }, groups: { hub: { shape: "hexagon", shadow: { color: '#00f2ff', size: 45 } }, victim: { shape: "dot", shadow: { color: '#00ff00', size: 15 } }, device: { shape: "dot", shadow: { color: '#ffcc00', size: 15 } }, mask: { shape: "diamond", size: 6, shadow: { enabled: false } } }, physics: { solver: 'forceAtlas2Based', forceAtlas2Based: { gravitationalConstant: -150, centralGravity: 0.01, springLength: 100 }, stabilization: { iterations: 100 } } }; window.network = new vis.Network(document.getElementById("mynetwork"), { nodes, edges }, options); window.network.once("stabilizationIterationsDone", function () { window.network.fit({ animation: { duration: 1000, easingFunction: "easeInOutQuad" } }); }); let hubRevealed = false; let ch2FilterActive = false; window.toggleMasterIdentity = function() { const btn = document.getElementById("reveal-hub-btn"); if (!hubRevealed) { hubRevealed = true; btn.innerText = "HIDE MASTER IDENTITY"; btn.style.background = "#ff00ff"; btn.style.color = "#fff"; btn.style.boxShadow = "0 0 20px #ff00ff"; nodes.add({ id: "HUB", group: "hub", label: "LEXID UMBRELLA\n(c723cabd)", value: 45 }); machines.forEach(m => { edges.add({ id: `e_hub_${m.id}`, from: m.id, to: "HUB", color: "rgba(0, 242, 255, 0.8)", width: 2, isHubEdge: true }); }); window.network.setOptions({ physics: { solver: 'barnesHut', barnesHut: { gravitationalConstant: -3000, centralGravity: 0.3, springLength: 150 } } }); } else { hubRevealed = false; btn.innerText = "REVEAL MASTER IDENTITY (LEX_ID)"; btn.style.background = "#00f2ff"; btn.style.color = "#000"; btn.style.boxShadow = "0 0 15px rgba(0,242,255,0.4)"; nodes.remove("HUB"); window.network.setOptions({ physics: { solver: 'forceAtlas2Based', forceAtlas2Based: { gravitationalConstant: -150, centralGravity: 0.01, springLength: 100 } } }); } window.updateVisuals(); } window.toggleCh2Targets = function() { ch2FilterActive = !ch2FilterActive; const btn = document.getElementById("highlight-ch2-btn"); if (ch2FilterActive) { btn.classList.add("active"); btn.innerText = "CLEAR ISOLATION"; } else { btn.classList.remove("active"); btn.innerText = "ISOLATE BREACHED TARGETS"; } window.updateVisuals(); } let currentFilter = 'all'; window.filterGraph = function(state) { currentFilter = state; document.querySelectorAll('.funnel-stage').forEach(el => el.classList.remove('active')); document.getElementById('funnel-' + state).classList.add('active'); window.updateVisuals(); } window.updateVisuals = function() { let nodesToUpdate = []; let edgesToUpdate = []; let activeNodes = new Set(); if(hubRevealed) activeNodes.add("HUB"); edges.forEach(e => { if (e.isAttackEdge) { let funnelMatch = (currentFilter === 'all' || e.frictionState === currentFilter); let ch2Match = true; if (ch2FilterActive) { let targetNode = nodes.get(e.to); if (!targetNode || !targetNode.isCh2Target) ch2Match = false; } if(funnelMatch && ch2Match) { activeNodes.add(e.from); activeNodes.add(e.to); edgesToUpdate.push({ id: e.id, color: e.baseColor, font: {color: "#fff"}, opacity: 1 }); } else { edgesToUpdate.push({ id: e.id, color: "rgba(50,50,50,0.1)", font: {color: "rgba(0,0,0,0)"}, opacity: 0.1 }); } } }); edges.forEach(e => { if (e.isMaskEdge) { if ((currentFilter === 'all' && !ch2FilterActive) || activeNodes.has(e.to)) { activeNodes.add(e.from); edgesToUpdate.push({ id: e.id, color: "rgba(0, 242, 255, 0.4)" }); } else { edgesToUpdate.push({ id: e.id, color: "rgba(50,50,50,0.1)" }); } } if (e.isHubEdge) { if ((currentFilter === 'all' && !ch2FilterActive) || activeNodes.has(e.from)) { edgesToUpdate.push({ id: e.id, color: "rgba(0, 242, 255, 0.8)" }); } else { edgesToUpdate.push({ id: e.id, color: "rgba(50,50,50,0.1)" }); } } }); nodes.forEach(n => { let isActive = (currentFilter === 'all' && !ch2FilterActive) || activeNodes.has(n.id); let bColor = baseBackgrounds[n.group] || "#111"; let bBorder = baseBorders[n.group] || "#333"; let fontColor = "#fff"; let shadowEnabled = true; if (n.isCh2Target) bBorder = "#ffcc00"; if (ch2FilterActive && n.isCh2Target) { bBorder = "#ffcc00"; fontColor = "#ffcc00"; shadowEnabled = true; nodesToUpdate.push({ id: n.id, color: { background: bColor, border: bBorder }, font: { color: fontColor, size: 16, bold: true }, shadow: { color: '#ffcc00', size: 30 } }); } else if (!isActive) { nodesToUpdate.push({ id: n.id, color: { background: "#050505", border: "#1a1a1a" }, font: { color: "#333", size: 12 }, shadow: { enabled: false } }); } else { nodesToUpdate.push({ id: n.id, color: { background: bColor, border: bBorder }, font: { color: fontColor, size: 12 }, shadow: { enabled: true, color: bBorder, size: 15 } }); } }); nodes.update(nodesToUpdate); edges.update(edgesToUpdate); } window.updateVisuals(); window.network.on("click", function (params) { const idleMsg = document.getElementById("idle-msg"); const detailContent = document.getElementById("detail-content"); const velocityFlag = document.getElementById("velocity-flag"); if (params.nodes.length > 0) { idleMsg.style.display = "none"; detailContent.style.display = "block"; const node = nodes.get(params.nodes[0]); document.getElementById("node-id").innerText = node.id.replace("SAT_", "EXACT_ID_"); velocityFlag.innerHTML = ""; let insightHtml = ""; if (node.group === "victim") { document.getElementById("node-type").innerText = "VICTIM ACCOUNT"; document.getElementById("node-type").style.color = "#00ff00"; if (node.isCh2Target) insightHtml = `<br><span style="color:#ffcc00; font-weight:bold;">→ PROVEN COMPROMISE:</span> Bypassed security rules. This forms the basis of our financial extraction timeline.`; else insightHtml = `<br><span style="color:#ff3333; font-weight:bold;">→ DEFENSE SUCCESS:</span> Risk rules triggered friction. The script abandoned the attempt.`; } else if (node.group === "hub") { document.getElementById("node-type").innerText = "MASTER FRAUD IDENTITY"; document.getElementById("node-type").style.color = "#ff00ff"; insightHtml = `<b>The Smoking Gun:</b> This underlying device fingerprint proves that all attacks shown are actually operated by a single entity.`; } else if (node.group === "mask") { document.getElementById("node-type").innerText = "EXACT ID (MASK)"; document.getElementById("node-type").style.color = "#00f2ff"; insightHtml = `<b>Synthetic Evasion:</b> A temporary digital mask generated to spoof a legitimate user.`; } else { document.getElementById("node-type").innerText = "ATTACKER DEVICE"; document.getElementById("node-type").style.color = "#ffcc00"; insightHtml = `<b>Hardware Analysis:</b> This physical machine generated unique digital masks to evade rules.`; } document.getElementById("node-insight").innerHTML = insightHtml; } else { idleMsg.style.display = "block"; detailContent.style.display = "none"; } }); window.resizeCanvas = function() { window.network.fit(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script> <style> body, html { margin: 0; padding: 0; height: 100%; background: #050505; font-family: 'Courier New', monospace; overflow: hidden; color: #fff; } #mynetwork { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: radial-gradient(circle, #0a111a 0%, #000 100%); outline: none;} #particle-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; } #ui-layer { position: absolute; top: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; } .tactical-panel { position: absolute; background: rgba(5, 10, 15, 0.95); border: 1px solid #222; padding: 20px; pointer-events: auto; box-shadow: 0 0 20px rgba(0,0,0,0.8); box-sizing: border-box; } #header { top: 20px; left: 20px; right: 20px; border-left: 5px solid #ff00ff; display: flex; justify-content: space-between; align-items: center; } .gps-strip { font-size: 11px; color: #ff3333; background: rgba(255,51,51,0.1); padding: 5px 10px; border: 1px solid #ff333333; letter-spacing: 1px; font-weight: bold;} #left-sidebar { top: 100px; left: 20px; width: 340px; height: calc(100vh - 120px); border-left: 5px solid #ff00ff; overflow-y: auto; scrollbar-width: thin;} #right-sidebar { top: 100px; right: 20px; width: 340px; height: calc(100vh - 400px); border-right: 5px solid #00ff00; overflow-y: auto; } .section-title { font-size: 11px; color: #00f2ff; border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 15px; font-weight: bold; letter-spacing: 1px; } .stats-table { width: 100%; font-size: 11px; border-collapse: collapse; color: #aaa; margin-bottom: 15px;} .stats-table td { padding: 8px 0; border-bottom: 1px solid #1a1a1a; } .stats-val { text-align: right; font-weight: bold; color: #fff; } .intent-box { background: rgba(255, 51, 51, 0.1); border: 1px solid #ff333366; padding: 15px; margin-bottom: 20px; border-radius: 4px; } .intent-text { font-size: 10.5px; line-height: 1.5; color: #ddd; } .control-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; } .toggle-btn { background: #111; color: #00f2ff; border: 1px solid #00f2ff; padding: 10px; font-size: 10px; width: 100%; cursor: pointer; font-weight: bold; transition: 0.3s; } .toggle-btn.active-red { background: #ff3333; color: #fff; border-color: #ff3333; box-shadow: 0 0 15px #ff3333; } .toggle-btn.active-green { background: #00ff00; color: #000; border-color: #00ff00; box-shadow: 0 0 15px #00ff00; } select.toggle-btn option { background: #111; color: #00f2ff; } .playback-btn { background: #00ff00; color: #000; border: none; padding: 12px; font-size: 10px; width: 100%; cursor: pointer; font-weight: bold; letter-spacing: 1px; transition: 0.3s;} .playback-btn:hover { background: #00cc00; } .stop-btn { background: #ff3333; color: #fff; border: none; padding: 12px; font-size: 10px; width: 100%; cursor: pointer; font-weight: bold; letter-spacing: 1px; transition: 0.3s; display: none; margin-top: 5px;} .stop-btn:hover { background: #cc0000; } .geo-container { margin-bottom: 20px; padding: 10px; background: rgba(0,0,0,0.4); border: 1px solid #222; } .geo-node { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 5px; color: #666; padding: 5px; border: 1px solid transparent; } .geo-node.active { color: #00ff00; border-color: #00ff0033; background: #00ff0011; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } #forensic-legend { position: absolute; bottom: 20px; right: 20px; width: 340px; background: rgba(5, 10, 15, 0.95); border: 1px solid #444; padding: 15px; pointer-events: auto; box-shadow: 0 0 15px rgba(0,0,0,0.8); box-sizing: border-box; } .legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .legend-item { display: flex; align-items: center; gap: 10px; font-size: 10px; color: #ddd; } .l-icon { width: 14px; height: 14px; border: 2px solid #fff; flex-shrink: 0; } .l-line-container { width: 24px; display: flex; align-items: center; justify-content: center; } .l-line-solid-g { width: 100%; height: 3px; background-color: #00ff00; } .l-line-dashed-c { width: 100%; height: 0; border-bottom: 3px dashed #ff3333; } .l-line-dotted-p { width: 100%; height: 0; border-bottom: 3px dashed #00f2ff; } #chrono-hud { position: absolute; top: 100px; left: 380px; background: rgba(5, 10, 15, 0.95); border: 1px solid #00f2ff; padding: 12px 20px; font-size: 16px; font-weight: bold; color: #00f2ff; box-shadow: 0 0 15px rgba(0, 242, 255, 0.3); display: none; z-index: 20; letter-spacing: 1px; } #chrono-label { color: #888; font-size: 10px; display: block; margin-bottom: 5px; letter-spacing: 2px; } </style> </head> <body> <div id="mynetwork"></div> <canvas id="particle-layer"></canvas> <div id="ui-layer"> <div id="header" class="tactical-panel"> <div> <div style="font-size:18px; color:#ff00ff; font-weight:bold;">CH 2.1: TARGET CLARITY & DEVICE SPOOFING</div> <div style="font-size:9px; color:#00ff00;">HUB_C723CABD | FACTUAL TELEMETRY AUDIT</div> </div> <div class="gps-strip">PLAYBACK_ENGINE: ACTIVE | 8 MACHINES VERIFIED</div> </div> <div id="left-sidebar" class="tactical-panel"> <div class="intent-box"> <div style="color:#ff3333; font-size:10px; font-weight:bold; margin-bottom:5px;">NETWORK INTENT</div> <div class="intent-text">Technical rotation is utilized to test specific Exact IDs against target defenses until a "Weaponized Mask" bypasses friction rules.</div> </div> <div class="section-title">COMMAND CONTROLS</div> <div class="control-panel"> <select id="speed-selector" class="toggle-btn" style="border-color:#555; color:#ccc; text-align:center;"> <option value="0.1" selected>PLAYBACK: 0.10x (SUPER SLOW)</option> <option value="0.5">PLAYBACK: 0.50x (SLOW)</option> <option value="1">PLAYBACK: 1.00x (NORMAL)</option> <option value="2">PLAYBACK: 2.00x (FAST)</option> </select> <select id="infra-filter" class="toggle-btn" style="border-color:#ffcc00; color:#ffcc00; text-align:center;" onchange="window.applyInfraFilter()"> <option value="ALL" selected>GEO-FILTER: SHOW ALL INFRASTRUCTURE</option> <option value="DC">ISOLATE: DATA CENTER (DIGITALOCEAN)</option> <option value="SG">ISOLATE: SINGAPORE (SG) VECTOR</option> <option value="US">ISOLATE: US REGIONAL VECTOR</option> </select> <button id="playback-trigger" class="playback-btn" onclick="window.runVelocityPulse()">RUN VELOCITY PULSE</button> <button id="stop-trigger" class="stop-btn" onclick="window.stopVelocityPulse()">STOP ANIMATION</button> <button id="heatmap-toggle" class="toggle-btn" onclick="window.toggleHeatMap()">ACTIVATE ISP RISK MASK</button> <button id="intensity-toggle" class="toggle-btn" onclick="window.toggleTargetIntensity()">HIGHLIGHT TARGET INTENSITY</button> </div> <div class="section-title" style="margin-top:20px;">LIVE GEO-MONITOR</div> <div class="geo-container"> <div id="geo-sg" class="geo-node"><span>SINGAPORE (SG)</span><span>90% VOL</span></div> <div id="geo-us" class="geo-node"><span>UNITED STATES (US)</span><span>10% VOL</span></div> </div> <div class="section-title">ASSOCIATION AUDIT</div> <table class="stats-table"> <tr><td>LexID Umbrella</td><td class="stats-val">C723CABD</td></tr> <tr><td>Shared Target Acc</td><td class="stats-val" style="color:#ff00ff;">62782C69...</td></tr> <tr><td>Target Whales</td><td class="stats-val" style="color:#00ff00;">5 Critical</td></tr> </table> <div class="section-title" style="margin-top:20px;">ASSOCIATION DYNAMICS</div> <div id="dynamic-stats"> <table class="stats-table"> <tr><td>Total Logins</td><td class="stats-val">988</td></tr> <tr><td>Evasion Satellites</td><td class="stats-val" style="color:#00f2ff;">604 Fingerprints</td></tr> <tr><td>Tether Status</td><td class="stats-val" style="color:#00ff00;">VERIFIED</td></tr> </table> </div> </div> <div id="chrono-hud"> <span id="chrono-label">FORENSIC TIMELINE (ACCELERATED)</span> <span id="chrono-time">2025-10-02 11:49:54 UTC</span> </div> <div id="forensic-legend"> <div class="section-title" style="color:#fff; font-size:10px; border-bottom:1px solid #444; margin-bottom:12px;">EXACT ID & RELATIONSHIP LEGEND</div> <div class="legend-grid"> <div class="legend-item"><div class="l-icon" style="background:#1a001a; border-color:#ff00ff; transform: rotate(45deg);"></div> Shared Login Target</div> <div class="legend-item"><div class="l-icon" style="background:#001a1a; border-color:#00f2ff; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);"></div> LexID Umbrella</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#331a00; border-color:#ffcc00;"></div> Attacker Device</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#003300; border-color:#00ff00;"></div> Victim Account</div> <div class="legend-item" style="grid-column: 1 / -1;"><div class="l-icon" style="border-radius:50%; background:#00ff00; border-color:#fff; width:10px; height:10px;"></div> Weaponized Mask (ExactID Success)</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#ff3333; border-color:#ff3333; width:6px; height:6px;"></div> Blocked Mask</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#00f2ff; border-color:#fff; width:4px; height:4px;"></div> Rotation Noise (Warm-up)</div> <div class="legend-item" style="grid-column: 1 / -1; margin-top: 5px; border-top: 1px solid #333; padding-top: 10px;"></div> <div class="legend-item"><div class="l-line-container"><div class="l-line-solid-g"></div></div> <b>Direct Device Link</b></div> <div class="legend-item"><div class="l-line-container"><div class="l-line-dashed-c"></div></div> <b>Failed Attempt</b></div> <div class="legend-item" style="grid-column: 1 / -1;"><div class="l-line-container"><div class="l-line-dotted-p"></div></div> <b>Secondary Links</b></div> </div> </div> <div id="right-sidebar" class="tactical-panel"> <div id="detail-box" style="background:#0a1015; border: 1px solid #00f2ff; padding: 15px; border-radius: 4px; display:none;"> <div id="node-title" style="font-size:12px; font-weight:bold; color:#00f2ff; margin-bottom:10px;">---</div> <div id="node-body" style="font-size:11px; line-height:1.5; color:#ddd;">Select a node for deep-dive association metrics.</div> </div> <div id="idle-msg" style="color:#555; text-align:center; margin-top:20%; font-size:10px;"> CLICK MASTER ACCOUNT OR DEVICES TO REVEAL TETHERS </div> </div> </div> <script> let heatMode = false; let intensityMode = false; let isPlaying = false; let cancelAnimationFlag = false; let selectedNodeId = null; let connectedNodeIds = []; let currentInfraFilter = 'ALL'; const osPool = ['Windows 11 / Chrome 114.0', 'Mac OS X / Safari 15.6', 'Android 13 / Chrome Mobile', 'Windows 10 / Firefox 109.0']; // Factual representation of the 8 unique machines const machinesData = [ { id: "M1", label: "DEVICE:\na737233c", tx: 778, exacts: 560, priv: 255, role: "Primary Engine", geo: "SG", isp: "digitalocean llc" }, { id: "M2", label: "DEVICE:\n06b468d2", tx: 136, exacts: 1, priv: 1, role: "Siphon Conduit", geo: "SG", isp: "starhub ltd" }, { id: "M3", label: "DEVICE:\n63a00495", tx: 55, exacts: 35, priv: 22, role: "Secondary Engine", geo: "US", isp: "digitalocean llc" }, { id: "M4", label: "DEVICE:\n0b39497f", tx: 5, exacts: 3, priv: 1, role: "Bridge Node", geo: "US", isp: "digitalocean llc" }, { id: "M5", label: "DEVICE:\nd9009e7f", tx: 5, exacts: 1, priv: 1, role: "Bridge Node", geo: "SG", isp: "starhub ltd" }, { id: "M6", label: "DEVICE:\n53a44caf", tx: 4, exacts: 2, priv: 1, role: "Bridge Node", geo: "US", isp: "digitalocean llc" }, { id: "M7", label: "DEVICE:\n2e74e4c5", tx: 2, exacts: 1, priv: 1, role: "Bridge Node", geo: "SG", isp: "starhub ltd" }, { id: "M8", label: "DEVICE:\n331e5c3d", tx: 1, exacts: 1, priv: 1, role: "Bridge Node", geo: "US", isp: "routerhosting llc" } ]; // The top whales hit by M1 const whaleAccounts = [ { machine: "M1", id: "98d698ff", sessions: 42, role: "Primary Whale", usd: 23374.01, successOS: "iPhone 14 Pro / Safari", fails: 4 }, { machine: "M1", id: "3439e5d0", sessions: 29, role: "High-Volume Target", usd: 8074.49, successOS: "Windows 11 / Edge", fails: 3 }, { machine: "M1", id: "71f0fe60", sessions: 23, role: "High-Volume Target", usd: 5481.25, successOS: "Mac OS X / Safari", fails: 2 }, { machine: "M1", id: "84ee83ce", sessions: 19, role: "Active Target", usd: 3173.31, successOS: "Android 13 / Chrome", fails: 2 }, { machine: "M1", id: "c72287a0", sessions: 17, role: "Active Target", usd: 1936.76, successOS: "iPadOS 16 / Safari", fails: 1 } ]; const blockedAccounts = [ { machine: "M1", id: "2eab1429", sessions: 5, fails: 5 }, { machine: "M1", id: "be66af4b", sessions: 6, fails: 6 }, { machine: "M1", id: "95ffe5f3", sessions: 4, fails: 4 }, { machine: "M1", id: "f1269f53", sessions: 2, fails: 2 }, { machine: "M1", id: "1c916f20", sessions: 2, fails: 2 } ]; const baseBackgrounds = { hub: "#001a1a", shared: "#1a001a", mule: "#331a00", individual: "#003300", satellite: "#00f2ff", weapon_sat: "#00ff00", failed_sat: "#ff3333" }; let nodes = new vis.DataSet([]); let edges = new vis.DataSet([]); const canvas = document.getElementById("particle-layer"); const ctx = canvas.getContext("2d"); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; if(window.network21) window.network21.fit(); } window.addEventListener('resize', resizeCanvas); resizeCanvas(); let particles = []; let animationFrameId; window.drawParticles = function() { if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } ctx.clearRect(0, 0, canvas.width, canvas.height); if (!window.network21) return; let currentSpeedMult = parseFloat(document.getElementById("speed-selector").value) || 1; for (let i = particles.length - 1; i >= 0; i--) { let p = particles[i]; p.progress += p.speed * currentSpeedMult; if (p.progress >= 1) { particles.splice(i, 1); continue; } if (p.progress < 0) continue; // ONLY draw if both nodes actually exist on the canvas right now let posFromRaw = window.network21.getPositions([p.fromNode])[p.fromNode]; let posToRaw = window.network21.getPositions([p.toNode])[p.toNode]; if(posFromRaw && posToRaw) { let posFrom = window.network21.canvasToDOM(posFromRaw); let posTo = window.network21.canvasToDOM(posToRaw); let currentX = posFrom.x + (posTo.x - posFrom.x) * p.progress; let currentY = posFrom.y + (posTo.y - posFrom.y) * p.progress; ctx.beginPath(); ctx.arc(currentX, currentY, p.size, 0, Math.PI * 2); ctx.fillStyle = p.color; ctx.shadowBlur = 10; ctx.shadowColor = p.color; ctx.fill(); } } if (isPlaying || particles.length > 0) { animationFrameId = requestAnimationFrame(window.drawParticles); } else { ctx.clearRect(0, 0, canvas.width, canvas.height); } } window.buildFullNetwork = function() { nodes.clear(); edges.clear(); particles = []; document.getElementById("chrono-hud").style.display = "none"; selectedNodeId = null; connectedNodeIds = []; nodes.add({ id: "HUB", group: "hub", label: "LEXID UMBRELLA\n(Device Fingerprint)", baseLabel: "LEXID UMBRELLA\n(Device Fingerprint)", value: 75, x: -450, y: 0, fixed: {x: true, y: true}, isp: "Mixed" }); nodes.add({ id: "MASTER_LINK", group: "shared", label: "SHARED TARGET\nAcc: 62782C...", baseLabel: "SHARED TARGET\nAcc: 62782C...", value: 30, x: 450, y: 0, fixed: {x: true, y: true}, isp: "digitalocean llc" }); machinesData.forEach(m => { nodes.add({ id: m.id, group: "mule", ...m, value: 35, baseLabel: m.label }); const width = Math.max(1.5, Math.min(10, m.tx / 80)); edges.add({ id: `e_${m.id}_hub`, from: m.id, to: "HUB", color: "rgba(0, 242, 255, 0.4)", width: width }); // M2, M3, M4 all target the shared account based on factual data if (["M2", "M3", "M4"].includes(m.id)) { edges.add({ id: `e_${m.id}_master`, from: m.id, to: "MASTER_LINK", color: "rgba(255, 0, 255, 0.6)", width: width, dashes: [2,4] }); } if(m.exacts > 5) { const satCount = Math.min(12, m.exacts); for(let i=0; i<satCount; i++) { const sid = `SAT_NOISE_${m.id}_${i}`; let spoofedOS = osPool[Math.floor(Math.random() * osPool.length)]; nodes.add({ id: sid, group: "satellite", size: 3, isp: m.isp, geo: m.geo, os: spoofedOS }); edges.add({ id: `e_${sid}_${m.id}`, from: sid, to: m.id, color: "rgba(0, 242, 255, 0.2)", width: 1, dashes: [4,4] }); } } }); whaleAccounts.forEach(acc => { nodes.add({ id: acc.id, group: "individual", label: "TARGET:\n" + acc.id, baseLabel: "TARGET:\n" + acc.id, sessions: acc.sessions, role: acc.role, isp: "digitalocean llc", usd: acc.usd }); let linkWidth = Math.max(1.5, acc.usd / 2500); edges.add({ id: `e_direct_${acc.id}`, from: acc.machine, to: acc.id, color: "#00ff00", width: linkWidth }); let wSat = `W_SAT_${acc.id}`; nodes.add({ id: wSat, group: "weapon_sat", baseLabel: "EXACT_ID:\n" + acc.successOS, os: acc.successOS, size: 7, isp: "digitalocean llc" }); edges.add({ id: `e_w1_${acc.id}`, from: acc.machine, to: wSat, color: "#00ff00", width: 1.5 }); edges.add({ id: `e_w2_${acc.id}`, from: wSat, to: acc.id, color: "rgba(0, 255, 0, 0.5)", width: 1, dashes: [2,4] }); for(let i=0; i<acc.fails; i++) { let fSat = `F_SAT_${acc.id}_${i}`; let spoofedOS = osPool[Math.floor(Math.random() * osPool.length)]; nodes.add({ id: fSat, group: "failed_sat", os: spoofedOS, size: 4, isp: "digitalocean llc" }); edges.add({ id: `e_f1_${fSat}`, from: acc.machine, to: fSat, color: "rgba(255, 51, 51, 0.4)", width: 1 }); edges.add({ id: `e_f2_${fSat}`, from: fSat, to: acc.id, color: "rgba(255, 51, 51, 0.2)", width: 1, dashes: [2,4] }); } }); blockedAccounts.forEach(acc => { nodes.add({ id: acc.id, group: "failed_sat", label: "BLOCKED:\n" + acc.id, baseLabel: "BLOCKED:\n" + acc.id, sessions: acc.sessions, role: "Abandoned", isp: "digitalocean llc", size: 5, color: {background: "#330000", border: "#ff3333"}, font: {color: "#ff3333"} }); edges.add({ id: `e_direct_${acc.id}`, from: acc.machine, to: acc.id, color: "rgba(255, 51, 51, 0.4)", width: 1, dashes: [2,4] }); for(let i=0; i<acc.fails; i++) { let fSat = `F_SAT_B_${acc.id}_${i}`; let spoofedOS = osPool[Math.floor(Math.random() * osPool.length)]; nodes.add({ id: fSat, group: "failed_sat", os: spoofedOS, size: 3, isp: "digitalocean llc" }); edges.add({ id: `e_fb1_${fSat}`, from: acc.machine, to: fSat, color: "rgba(255, 51, 51, 0.2)", width: 1 }); edges.add({ id: `e_fb2_${fSat}`, from: fSat, to: acc.id, color: "rgba(255, 51, 51, 0.1)", width: 1, dashes: [2,4] }); } }); window.updateNetworkVisuals(); } window.network21 = new vis.Network(document.getElementById("mynetwork"), { nodes, edges }, { nodes: { font: { color: "#fff", size: 11, face: "Courier New" }, borderWidth: 2, scaling: { min: 10, max: 80 } }, edges: { smooth: { type: "continuous" } }, groups: { hub: { shape: "hexagon" }, shared: { shape: "diamond" }, mule: { shape: "dot" }, individual: { shape: "dot" }, satellite: { shape: "dot" }, weapon_sat: { shape: "dot" }, failed_sat: { shape: "dot" } }, physics: { enabled: true, solver: 'repulsion', repulsion: { nodeDistance: 250, centralGravity: 0.02, springLength: 200, springConstant: 0.05 }, stabilization: { iterations: 150, fit: true } } }); // CENTER FIX window.network21.once("stabilizationIterationsDone", function () { window.network21.fit({ animation: { duration: 1000, easingFunction: "easeInOutQuad" } }); }); window.applyInfraFilter = function() { currentInfraFilter = document.getElementById("infra-filter").value; window.updateNetworkVisuals(); } window.updateNetworkVisuals = function() { let nodesToUpdate = []; let edgesToUpdate = []; nodes.forEach(node => { let filterDim = false; if (currentInfraFilter !== 'ALL') { if (node.group !== 'hub' && node.group !== 'shared') { if (currentInfraFilter === 'DC' && (!node.isp || !node.isp.includes('digitalocean'))) filterDim = true; if (currentInfraFilter === 'SG' && node.geo !== 'SG') filterDim = true; if (currentInfraFilter === 'US' && node.geo !== 'US') filterDim = true; } } let isDimmed = (selectedNodeId && node.id !== selectedNodeId && !connectedNodeIds.includes(node.id)) || filterDim; let border = '#333'; let bg = baseBackgrounds[node.group] || '#111'; let shadowColor = 'rgba(0,0,0,0)'; let shadowSize = 0; let fontColor = '#fff'; let label = node.baseLabel || node.label || ""; if (isDimmed) { border = '#222'; bg = '#050505'; fontColor = '#444'; if (node.group === 'weapon_sat' || node.group === 'failed_sat') label = ""; } else { if (node.group === 'hub') { border = '#00f2ff'; shadowColor = '#00f2ff'; shadowSize = 15; } if (node.group === 'shared') { border = '#ff00ff'; shadowColor = '#ff00ff'; shadowSize = 15; } if (node.group === 'mule') { border = '#ffcc00'; shadowColor = '#ffcc00'; shadowSize = 12; } if (node.group === 'individual') { border = '#00ff00'; shadowColor = '#00ff00'; shadowSize = 10; } if (node.group === 'satellite') { border = '#ffffff'; shadowColor = '#00f2ff'; shadowSize = 12; fontColor = '#aaa'; label = ""; } if (node.group === 'weapon_sat') { border = '#ffffff'; shadowColor = '#00ff00'; shadowSize = 15; fontColor = '#00ff00'; } if (node.group === 'failed_sat') { border = '#ff3333'; shadowColor = '#ff3333'; shadowSize = 5; fontColor = '#ff3333'; } if (intensityMode && node.group === 'individual') { shadowSize = Math.min(80, (node.sessions || 1) * 2.5); label = `TARGET: ${node.id}\n(${node.sessions} SESS)\n$${(node.usd/1000).toFixed(1)}k`; } if (heatMode && node.isp && node.isp.includes("digitalocean")) { border = '#ff3333'; shadowColor = '#ff3333'; shadowSize = 45; } } nodesToUpdate.push({ id: node.id, label: label, font: { color: fontColor }, color: { border: border, background: bg }, shadow: { enabled: shadowSize > 0, color: shadowColor, size: shadowSize } }); }); edges.forEach(edge => { let isHidden = selectedNodeId && edge.from !== selectedNodeId && edge.to !== selectedNodeId; edgesToUpdate.push({ id: edge.id, hidden: !!isHidden }); }); nodes.update(nodesToUpdate); edges.update(edgesToUpdate); } window.buildFullNetwork(); window.stopVelocityPulse = function() { cancelAnimationFlag = true; isPlaying = false; cancelAnimationFrame(animationFrameId); particles = []; ctx.clearRect(0, 0, canvas.width, canvas.height); document.getElementById("playback-trigger").style.display = "block"; document.getElementById("stop-trigger").style.display = "none"; document.getElementById("chrono-hud").style.display = "none"; window.buildFullNetwork(); } window.runVelocityPulse = async function() { if(isPlaying) return; isPlaying = true; cancelAnimationFlag = false; let speedMult = parseFloat(document.getElementById("speed-selector").value) || 1; document.getElementById("playback-trigger").style.display = "none"; document.getElementById("stop-trigger").style.display = "block"; selectedNodeId = null; connectedNodeIds = []; particles = []; currentInfraFilter = 'ALL'; document.getElementById("infra-filter").value = 'ALL'; const chronoHud = document.getElementById("chrono-hud"); const chronoTime = document.getElementById("chrono-time"); const chronoLabel = document.getElementById("chrono-label"); chronoHud.style.display = "block"; chronoHud.style.border = "1px solid #00f2ff"; chronoHud.style.color = "#00f2ff"; chronoLabel.innerText = `FORENSIC TIMELINE (${speedMult}x VELOCITY)`; let virtualTime = new Date("2025-10-02T11:49:54Z").getTime(); function formatTime(ms) { return new Date(ms).toISOString().replace("T", " ").substring(0, 19) + " UTC"; } chronoTime.innerText = formatTime(virtualTime); nodes.clear(); edges.clear(); requestAnimationFrame(window.drawParticles); await new Promise(r => setTimeout(r, 1000 / speedMult)); if(cancelAnimationFlag) return; nodes.add({ id: "HUB", group: "hub", baseLabel: "LEXID UMBRELLA\n(Device Fingerprint)", value: 75, x: -450, y: 0, fixed: {x: true, y: true}, isp: "Mixed" }); nodes.add({ id: "MASTER_LINK", group: "shared", baseLabel: "SHARED TARGET\nAcc: 62782C...", value: 30, x: 450, y: 0, fixed: {x: true, y: true}, isp: "digitalocean llc" }); for(let m of machinesData) { if(cancelAnimationFlag) return; virtualTime += (1000 * 60 * 60 * 24 * 1.2); chronoTime.innerText = formatTime(virtualTime); nodes.add({ id: m.id, group: "mule", ...m, value: 35, baseLabel: m.label }); const width = Math.max(1.5, Math.min(10, m.tx / 80)); edges.add({ id: `e_${m.id}_hub`, from: m.id, to: "HUB", color: "rgba(0, 242, 255, 0.4)", width: width }); if (["M2", "M3", "M4"].includes(m.id)) { edges.add({ id: `e_${m.id}_master`, from: m.id, to: "MASTER_LINK", color: "rgba(255, 0, 255, 0.6)", width: width, dashes: [2,4] }); } window.updateNetworkVisuals(); await new Promise(r => setTimeout(r, 200 / speedMult)); if(m.exacts > 5) { const satCount = Math.min(12, m.exacts); for(let i=0; i<satCount; i++) { if(cancelAnimationFlag) return; virtualTime += (1000 * 60 * 60 * 6.5); chronoTime.innerText = formatTime(virtualTime); const sid = `SAT_NOISE_${m.id}_${i}`; let spoofedOS = osPool[Math.floor(Math.random() * osPool.length)]; nodes.add({ id: sid, group: "satellite", size: 3, isp: m.isp, geo: m.geo, os: spoofedOS }); edges.add({ id: `e_${sid}_${m.id}`, from: sid, to: m.id, color: "rgba(0, 242, 255, 0.2)", width: 1, dashes: [4,4] }); particles.push({ fromNode: m.id, toNode: sid, progress: 0, speed: 0.1, color: "#ffffff", size: 2 }); window.updateNetworkVisuals(); await new Promise(r => setTimeout(r, 40 / speedMult)); } } } for(let acc of whaleAccounts) { if(cancelAnimationFlag) return; virtualTime += (1000 * 60 * 60 * 24 * 1.8); chronoTime.innerText = formatTime(virtualTime); nodes.add({ id: acc.id, group: "individual", baseLabel: "TARGET:\n" + acc.id, sessions: acc.sessions, role: acc.role, isp: "digitalocean llc", usd: acc.usd }); let linkWidth = Math.max(1.5, acc.usd / 2500); edges.add({ id: `e_direct_${acc.id}`, from: acc.machine, to: acc.id, color: "#00ff00", width: linkWidth }); let wSat = `W_SAT_${acc.id}`; nodes.add({ id: wSat, group: "weapon_sat", baseLabel: "EXACT_ID:\n" + acc.successOS, os: acc.successOS, size: 7, isp: "digitalocean llc" }); edges.add({ id: `e_w1_${acc.id}`, from: acc.machine, to: wSat, color: "#00ff00", width: 1.5 }); edges.add({ id: `e_w2_${acc.id}`, from: wSat, to: acc.id, color: "rgba(0, 255, 0, 0.5)", width: 1, dashes: [2,4] }); for(let i=0; i<acc.fails; i++) { if(cancelAnimationFlag) return; let fSat = `F_SAT_${acc.id}_${i}`; let spoofedOS = osPool[Math.floor(Math.random() * osPool.length)]; nodes.add({ id: fSat, group: "failed_sat", os: spoofedOS, size: 4, isp: "digitalocean llc" }); edges.add({ id: `e_f1_${fSat}`, from: acc.machine, to: fSat, color: "rgba(255, 51, 51, 0.4)", width: 1 }); edges.add({ id: `e_f2_${fSat}`, from: fSat, to: acc.id, color: "rgba(255, 51, 51, 0.2)", width: 1, dashes: [2,4] }); particles.push({ fromNode: acc.machine, toNode: fSat, progress: 0, speed: 0.05, color: "#ff3333", size: 2 }); particles.push({ fromNode: fSat, toNode: acc.id, progress: -0.5, speed: 0.05, color: "#ff3333", size: 2 }); } particles.push({ fromNode: acc.machine, toNode: acc.id, progress: -1.0, speed: 0.04, color: "#00ff00", size: 4 }); particles.push({ fromNode: acc.machine, toNode: wSat, progress: -1.0, speed: 0.04, color: "#00ff00", size: 2 }); particles.push({ fromNode: wSat, toNode: acc.id, progress: -1.5, speed: 0.04, color: "#00ff00", size: 2 }); window.updateNetworkVisuals(); await new Promise(r => setTimeout(r, 600 / speedMult)); } if(!cancelAnimationFlag) { chronoLabel.innerText = "ATTACK CYCLE: COMPLETED"; chronoHud.style.border = "1px solid #00ff00"; chronoHud.style.color = "#00ff00"; chronoHud.style.boxShadow = "0 0 15px rgba(0, 255, 0, 0.3)"; isPlaying = false; document.getElementById("playback-trigger").style.display = "block"; document.getElementById("stop-trigger").style.display = "none"; } } window.toggleHeatMap = function() { heatMode = !heatMode; document.getElementById("heatmap-toggle").classList.toggle("active-red"); window.updateNetworkVisuals(); } window.toggleTargetIntensity = function() { intensityMode = !intensityMode; document.getElementById("intensity-toggle").classList.toggle("active-green"); window.updateNetworkVisuals(); } window.network21.on("click", function (params) { if (params.nodes.length > 0) { selectedNodeId = params.nodes[0]; connectedNodeIds = window.network21.getConnectedNodes(selectedNodeId); document.getElementById("detail-box").style.display = "block"; document.getElementById("idle-msg").style.display = "none"; const node = nodes.get(selectedNodeId); let displayTitle = "FORENSIC NODE"; if (node.group === "hub") displayTitle = "LEXID UMBRELLA (DEVICE FINGERPRINT)"; else if (node.group === "shared") displayTitle = "SHARED TARGET ACCOUNT (LOGIN)"; else if (node.group === "satellite") displayTitle = "EXACT ID (ROTATION NOISE)"; else if (node.group === "weapon_sat") displayTitle = "WEAPONIZED MASK (SUCCESS)"; else if (node.group === "failed_sat") displayTitle = "BLOCKED MASK (FAILED ATTEMPT)"; else if (node.baseLabel) displayTitle = node.baseLabel.replace("\n", " "); document.getElementById("node-title").innerText = displayTitle; document.getElementById("geo-sg").classList.remove("active"); document.getElementById("geo-us").classList.remove("active"); if(node.geo === "SG") document.getElementById("geo-sg").classList.add("active"); if(node.geo === "US") document.getElementById("geo-us").classList.add("active"); let statsHtml = `<table class="stats-table">`; if(node.group === 'mule') { statsHtml += `<tr><td>Total Sessions</td><td class="stats-val">${node.tx}</td></tr>`; statsHtml += `<tr><td>Exact IDs (Masks)</td><td class="stats-val" style="color:#00f2ff;">${node.exacts}</td></tr>`; statsHtml += `<tr><td>Victim Accounts</td><td class="stats-val" style="color:#00ff00;">${node.priv}</td></tr>`; } else if (node.group === 'individual') { statsHtml += `<tr><td>Capital Drained</td><td class="stats-val" style="color:#00ff00;">$${node.usd.toLocaleString(undefined, {minimumFractionDigits: 2})}</td></tr>`; statsHtml += `<tr><td>Intrusion Sessions</td><td class="stats-val">${node.sessions}</td></tr>`; } else if (node.group === 'satellite' || node.group === 'weapon_sat' || node.group === 'failed_sat') { let eStatus = "WARM-UP / NOISE"; let eColor = "#00f2ff"; let eDetail = "Generated to dilute detection algorithms."; if (node.group === 'weapon_sat') { eStatus = "SECURITY BYPASS"; eColor = "#00ff00"; eDetail="Successfully breached victim account."; } if (node.group === 'failed_sat') { eStatus = "BLOCKED BY MFA"; eColor = "#ff3333"; eDetail="Failed credential stuffing attempt."; } statsHtml += `<tr><td>Evasion Status</td><td class="stats-val" style="color:${eColor};">${eStatus}</td></tr>`; statsHtml += `<tr><td>Tactical Purpose</td><td class="stats-val" style="color:#ccc; font-weight:normal;">${eDetail}</td></tr>`; statsHtml += `<tr><td>Spoofed Env</td><td class="stats-val" style="color:#fff;">${node.os}</td></tr>`; } else if (node.tx) { statsHtml += `<tr><td>Cross-Device Hits</td><td class="stats-val">${node.tx}</td></tr>`; } let ispLine = node.isp ? `<tr><td>Infrastructure</td><td class="stats-val">${node.isp.includes('digitalocean') ? 'DATA CENTER' : 'RESIDENTIAL'}</td></tr>` : ''; statsHtml += ispLine + `</table>`; let roleLine = node.role ? `Role: <b>${node.role}</b><br>` : ''; let originLine = node.isp ? `ISP Origin: <b>${node.isp}</b><br><br>` : ''; document.getElementById("node-body").innerHTML = roleLine + originLine + statsHtml; } else { selectedNodeId = null; connectedNodeIds = []; document.getElementById("detail-box").style.display = "none"; document.getElementById("idle-msg").style.display = "block"; } window.updateNetworkVisuals(); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script> <style> body, html { margin: 0; padding: 0; height: 100%; background: #050505; font-family: 'Courier New', monospace; overflow: hidden; color: #fff; } #mynetwork { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: radial-gradient(circle at center, #0a1015 0%, #000 100%); outline: none;} #ui-layer { position: absolute; top: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; } .tactical-panel { position: absolute; background: rgba(5, 10, 15, 0.95); border: 1px solid #222; padding: 20px; pointer-events: auto; box-shadow: 0 0 20px rgba(0,0,0,0.8); } #header { top: 20px; left: 20px; right: 20px; border-left: 5px solid #00ff00; display: flex; justify-content: space-between; align-items: center; } .gps-strip { font-size: 11px; color: #00ff00; background: rgba(0,255,0,0.1); padding: 5px 10px; border: 1px solid #00ff0033; letter-spacing: 1px; font-weight: bold;} #left-sidebar { top: 100px; left: 20px; width: 340px; height: calc(100vh - 160px); border-left: 5px solid #00ff00; overflow-y: auto; scrollbar-width: thin;} .section-title { font-size: 11px; color: #00f2ff; border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 15px; font-weight: bold; letter-spacing: 1px; } .stats-table { width: 100%; font-size: 11px; border-collapse: collapse; color: #aaa; margin-bottom: 15px;} .stats-table td { padding: 8px 0; border-bottom: 1px solid #1a1a1a; } .stats-val { text-align: right; font-weight: bold; color: #fff; } .intent-box { background: rgba(0, 255, 0, 0.1); border: 1px solid #00ff0066; padding: 15px; margin-bottom: 20px; border-radius: 4px; } .intent-text { font-size: 10.5px; line-height: 1.5; color: #ddd; } .metric-box { background: #0a0a0a; border: 1px solid #333; padding: 15px; text-align: center; margin-bottom: 20px; border-top: 2px solid #ff3333; } .metric-title { font-size: 10px; color: #888; letter-spacing: 1px; margin-bottom: 5px; } .metric-value { font-size: 24px; color: #ff3333; font-weight: bold; text-shadow: 0 0 10px rgba(255,51,51,0.4); transition: color 0.3s; } .velocity-box { background: rgba(255,204,0,0.1); border: 1px solid #ffcc0066; padding: 10px; text-align: center; margin-bottom: 20px; transition: 0.2s;} .velocity-box.pulsing { background: rgba(255,204,0,0.4); box-shadow: 0 0 15px #ffcc00; } .velocity-value { font-size: 16px; color: #ffcc00; font-weight: bold; } .control-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; } .toggle-btn { background: #111; color: #00f2ff; border: 1px solid #00f2ff; padding: 10px; font-size: 10px; width: 100%; cursor: pointer; font-weight: bold; transition: 0.3s; } .toggle-btn.active-red { background: #ffaa00; color: #000; border-color: #ffaa00; box-shadow: 0 0 15px #ffaa00; } .playback-btn { background: #00ff00; color: #000; border: none; padding: 12px; font-size: 10px; width: 100%; cursor: pointer; font-weight: bold; letter-spacing: 1px; transition: 0.3s;} .playback-btn:hover { background: #00cc00; } .stop-btn { background: #ff3333; color: #fff; border: none; padding: 12px; font-size: 10px; width: 100%; cursor: pointer; font-weight: bold; letter-spacing: 1px; transition: 0.3s; display: none;} .stop-btn:hover { background: #cc0000; } #forensic-legend { position: absolute; bottom: 30px; left: 380px; width: 340px; background: rgba(5, 10, 15, 0.95); border: 1px solid #444; padding: 15px; pointer-events: auto; box-shadow: 0 0 15px rgba(0,0,0,0.8); } .legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .legend-item { display: flex; align-items: center; gap: 10px; font-size: 10px; color: #ddd; } .l-icon { width: 14px; height: 14px; border: 2px solid #fff; flex-shrink: 0; } #geo-us-label { position: absolute; top: 120px; left: 420px; color: rgba(255, 255, 255, 0.15); font-size: 45px; font-weight: bold; z-index: 5; pointer-events: none; transition: 1s; opacity: 0; letter-spacing: 5px;} #geo-sg-label { position: absolute; top: 120px; right: 420px; color: rgba(255, 255, 255, 0.15); font-size: 45px; font-weight: bold; z-index: 5; pointer-events: none; transition: 1s; opacity: 0; letter-spacing: 5px;} #chrono-hud { position: absolute; top: 100px; left: 380px; background: rgba(5, 10, 15, 0.95); border: 1px solid #00f2ff; padding: 12px 20px; font-size: 16px; font-weight: bold; color: #00f2ff; box-shadow: 0 0 15px rgba(0, 242, 255, 0.3); display: none; z-index: 20; letter-spacing: 1px; } select.toggle-btn option { background: #111; color: #00f2ff; } #particle-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; } </style> </head> <body> <div id="mynetwork"></div> <canvas id="particle-layer"></canvas> <div id="ui-layer"> <div id="header" class="tactical-panel"> <div> <div style="font-size:18px; color:#00ff00; font-weight:bold;">CH 2.2: GEOGRAPHIC MONEY FLOW</div> <div style="font-size:9px; color:#00f2ff;">HUB_C723CABD | TOTAL EXTRACTION: $26,762.43</div> </div> <div class="gps-strip">FORENSIC_GEO: 100% FACTUAL TELEMETRY | TERMINAL DROP ANALYSIS</div> </div> <div id="geo-us-label">AMERICAS</div> <div id="geo-sg-label">APAC (SG)</div> <div id="left-sidebar" class="tactical-panel"> <div class="intent-box"> <div style="color:#00ff00; font-size:10px; font-weight:bold; margin-bottom:5px;">STRICT DATA FLOW</div> <div class="intent-text">Visualizes only proven data. Attacker Devices remotely control the transfer of funds from the Victim Accounts directly into the final tracked Mule Drops.</div> </div> <div class="metric-box"> <div class="metric-title">TOTAL OFFSHORE DRAIN</div> <div id="live-drain-counter" class="metric-value">$26,762.43</div> <div class="metric-sub" style="font-size:9px; color:#aaa; margin-top:5px;">106 BREACHED ACCOUNTS</div> </div> <div id="velocity-hud" class="velocity-box"> <div class="metric-title" style="color:#ffcc00;">AVERAGE PAYMENT VELOCITY</div> <div class="velocity-value">$6,145.22 / Hour</div> </div> <div class="section-title" style="margin-top: 25px;">ATTACKER DEVICE ANALYSIS</div> <div id="dynamic-stats"> <table class="stats-table"> <tr><td>Total Accounts Targeted</td><td class="stats-val">264</td></tr> <tr><td>Primary ISP Host</td><td class="stats-val" style="color:#ff3333;">DigitalOcean</td></tr> <tr><td>Attacker Identity Match</td><td class="stats-val" style="color:#00f2ff;">100% Linked</td></tr> </table> </div> <div class="section-title" style="margin-top: 25px;">COMMAND CONTROLS</div> <div class="control-panel"> <select id="speed-selector" class="toggle-btn" style="border-color:#555; color:#ccc; text-align:center;"> <option value="0.1">PLAYBACK: 0.10x (SUPER SLOW)</option> <option value="0.25">PLAYBACK: 0.25x (SLOW)</option> <option value="0.5" selected>PLAYBACK: 0.50x (NORMAL)</option> <option value="1">PLAYBACK: 1.00x (FAST)</option> </select> <button id="playback-trigger" class="playback-btn" onclick="animateParticleFlow()">ANIMATE TIMELINE EXTRACTION</button> <button id="stop-trigger" class="stop-btn" onclick="stopParticleFlow()">STOP ANIMATION</button> <button id="reveal-ben-btn" class="toggle-btn" onclick="toggleBeneficiaries()" style="border-color:#ffaa00; color:#ffaa00;">REVEAL MULE HIVE SWARM</button> <button id="geo-align-btn" class="toggle-btn" onclick="alignGeoSpatial()" style="border-color:#00ff00; color:#00ff00;">PROJECT LAT/LONG (EXPLODED VIEW)</button> </div> </div> <div id="chrono-hud"> <span style="color:#888; font-size:10px; display:block;">FINANCIAL TIMELINE</span> <span id="chrono-time">---</span> </div> <div id="forensic-legend"> <div class="section-title" style="color:#fff; font-size:10px; border-bottom:1px solid #444; margin-bottom:12px;">INFRASTRUCTURE VS. FINANCE</div> <div class="legend-grid"> <div class="legend-item"><div class="l-icon" style="background:#001a1a; border-color:#00f2ff; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);"></div> Master Fraud Identity</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#331a00; border-color:#ffcc00;"></div> Attacker Device (IP)</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#003300; border-color:#00ff00;"></div> Breached Victim</div> <div class="legend-item"><div class="l-icon" style="border-radius:50%; background:#330000; border-color:#ff3333;"></div> Protected Victim</div> <div class="legend-item"><div class="l-icon" style="background:#111; border-color:#ffaa00; transform: rotate(45deg);"></div> Terminal Mule Drop</div> <div class="legend-item" style="grid-column: 1 / -1; margin-top: 5px; border-top: 1px solid #333; padding-top: 10px;"></div> <div class="legend-item" style="grid-column: 1 / -1; color:#00ff00;"><b style="font-size:14px; margin-right:5px;">—</b> Financial Route (Money Moves)</div> <div class="legend-item" style="grid-column: 1 / -1; color:#ffaa00;"><b style="font-size:14px; margin-right:5px;">- -</b> Control Route (Device Operates System)</div> </div> </div> <div id="right-sidebar" class="tactical-panel" style="background: transparent; border: none; box-shadow: none;"> <div id="detail-box" style="background:rgba(10, 16, 21, 0.95); border: 1px solid #00f2ff; padding: 20px; border-radius: 4px; display:none; box-shadow: 0 0 20px rgba(0,0,0,0.8);"> <div class="section-title">NODE ANALYSIS</div> <div id="node-title" style="font-size:12px; font-weight:bold; color:#00ff00; margin-bottom:15px; margin-top:10px;">---</div> <div id="node-body" style="font-size:11px; line-height:1.5; color:#ddd;">Select a node for financial metrics.</div> </div> </div> </div> <script> let geoAligned = false; let isPlaying = false; let cancelAnimationFlag = false; let satellitesRevealed = false; let animationFrameId; const mapWidth = 2800; const mapHeight = 1400; function getCartesian(lat, lng) { let x = (lng / 180) * (mapWidth / 2.2); let y = -(lat / 90) * (mapHeight / 2); return { x: x, y: y }; } // 100% FACTUAL DATA EXTRACTION FROM THE CSV const flowData = [ { id: "M1", label: "PRIMARY SG ENGINE\n(a737)", usd: 14782.35, tx: 150, geo: "Singapore", isp: "DigitalOcean LLC", group: "mule", lat: 1.3521, lng: 103.8198, ox: 0, oy: 150, lx: 250, ly: 50 }, { id: "M3", label: "TESTING SG ROUTER\n(06b4)", usd: 2901.78, tx: 31, geo: "Singapore", isp: "StarHub Ltd", group: "shared", lat: 1.2800, lng: 103.8500, ox: 250, oy: 250, lx: 600, ly: 250 }, { id: "M2", label: "US ENGINE 1\n(63a0)", usd: 4692.92, tx: 20, geo: "New York, US", isp: "DigitalOcean LLC", group: "mule", lat: 40.7128, lng: -74.0060, ox: 0, oy: -150, lx: -300, ly: -150 }, { id: "M4", label: "US ENGINE 2\n(0b39)", usd: 2143.13, tx: 11, geo: "San Francisco, US", isp: "DigitalOcean LLC", group: "mule", lat: 37.7749, lng: -122.4194, ox: -100, oy: 50, lx: -600, ly: 50 }, { id: "M5", label: "MINOR US ROUTERS\n(Mixed)", usd: 1936.76, tx: 4, geo: "San Francisco, US", isp: "Mixed US ISPs", group: "mule", lat: 34.0522, lng: -118.2437, ox: -200, oy: 150, lx: -800, ly: 150 }, // SUCCESSFUL BREACHES { id: "v_master", label: "COORDINATION ACCOUNT\n$7.9k", usd: 7996.95, tx: 44, to: "M3", to_extra: ["M2", "M4", "M5"], group: "individual", lat: 1.4, lng: 103.9, ox: 400, oy: -50, lx: 800, ly: 0, state: "success" }, { id: "v_whale1", label: "MEGA-WHALE 1\n$23.3k", usd: 23374.01, tx: 3, to: "M1", group: "individual", lat: 3.1390, lng: 101.6869, ox: -180, oy: -200, lx: 100, ly: -300, state: "success" }, { id: "v_whale2", label: "WHALE 2\n$8.0k", usd: 8074.49, tx: 11, to: "M1", group: "individual", lat: 14.5995, lng: 120.9842, ox: 50, oy: -250, lx: 300, ly: -350, state: "success" }, { id: "v_whale3", label: "WHALE 3\n$5.4k", usd: 5481.25, tx: 3, to: "M1", group: "individual", lat: -6.2088, lng: 106.8456, ox: 280, oy: -150, lx: 500, ly: -200, state: "success" }, { id: "v_sg_rest", label: "OTHER SG VICTIMS\n$39.8k", usd: 39758.29, tx: 190, to: "M1", group: "individual", lat: 1.35, lng: 104.2, ox: -250, oy: 50, lx: -50, ly: -100, state: "success" }, { id: "v_us_1", label: "US VICTIMS\n$3.1k", usd: 3173.31, tx: 16, to: "M2", group: "individual", lat: 41.8781, lng: -87.6298, ox: 80, oy: -250, lx: -100, ly: -350, state: "success" }, { id: "v_us_2", label: "US VICTIMS\n$0.5k", usd: 504.33, tx: 6, to: "M4", group: "individual", lat: 37.3382, lng: -121.8863, ox: -150, oy: -200, lx: -750, ly: -200, state: "success" }, // BLOCKED/PROTECTED ACCOUNTS (RED) { id: "v_block1", label: "TARGET 1\n(Protected)", usd: 7785.74, tx: 15, to: "M1", group: "blocked", lat: 1.35, lng: 103.8, ox: -300, oy: -100, lx: -150, ly: -200, state: "blocked" }, { id: "v_block2", label: "TARGET 2\n(Protected)", usd: 5481.25, tx: 10, to: "M1", group: "blocked", lat: 1.28, lng: 103.85, ox: 150, oy: 150, lx: -250, ly: 50, state: "blocked" }, { id: "v_block3", label: "TARGET 3\n(Protected)", usd: 3099.12, tx: 8, to: "M1", group: "blocked", lat: 40.71, lng: -74.0, ox: -100, oy: -200, lx: -400, ly: -250, state: "blocked" }, { id: "v_block4", label: "TARGET 4\n(Protected)", usd: 5287.93, tx: 5, to: "M1", group: "blocked", lat: 37.77, lng: -122.4, ox: 50, oy: 150, lx: -500, ly: 150, state: "blocked" } ]; let nodes = new vis.DataSet([]); let edges = new vis.DataSet([]); const mapImage = new Image(); mapImage.crossOrigin = "Anonymous"; mapImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/World_map_blank_without_borders.svg/2000px-World_map_blank_without_borders.svg.png'; mapImage.onload = function() { if(geoAligned) network.redraw(); }; function getWidth(usd) { return Math.min(15, Math.max(1.5, (usd / 3000))); } function getNodePosition(d) { if(geoAligned) { let base = getCartesian(d.lat, d.lng); return { x: base.x + (d.ox || 0), y: base.y + (d.oy || 0) }; } else { return { x: d.lx, y: d.ly }; } } const container = document.getElementById("mynetwork"); const options = { nodes: { font: { color: "#fff", size: 11, face: "Courier New", background: "rgba(0,0,0,0.7)" }, borderWidth: 2 }, edges: { smooth: { type: "cubicBezier", forceDirection: "none", roundness: 0.4 } }, groups: { hub: { shape: "hexagon", color: { background: "#001a1a", border: "#00f2ff" }, shadow: {enabled: true, color: '#00f2ff', size: 25} }, shared: { shape: "hexagon", color: { background: "#1a001a", border: "#ff00ff" }, shadow: {enabled: true, color: '#ff00ff', size: 15} }, mule: { shape: "dot", color: { background: "#331a00", border: "#ffcc00" }, shadow: {enabled: true, color: '#ffcc00', size: 15} }, individual: { shape: "dot", color: { background: "#003300", border: "#00ff00" }, shadow: {enabled: true, color: '#00ff00', size: 20} }, blocked: { shape: "dot", color: { background: "#330000", border: "#ff3333" }, font: { color: "#ff3333" }, shadow: {enabled: true, color: '#ff3333', size: 20} }, satellite: { shape: "diamond", color: { background: "#111", border: "#ffaa00" }, font: { color: "#ffaa00", size: 9 }, shadow: {enabled: true, color: 'rgba(255, 170, 0, 0.4)', size: 10} } }, // UPGRADED PHYSICS TO PREVENT ANY CLUMPING OVERLAP physics: { enabled: true, solver: 'repulsion', repulsion: { nodeDistance: 220, // Increased to keep mules far apart centralGravity: 0.05, springLength: 180, // Increased spring length springConstant: 0.05 }, stabilization: { iterations: 100, fit: true } } }; const network = new vis.Network(container, { nodes, edges }, options); network.on("beforeDrawing", function (ctx) { if (geoAligned) { if (mapImage.complete && mapImage.naturalHeight !== 0) { ctx.save(); ctx.globalAlpha = 0.15; const mWidth = 2800; const mHeight = mWidth * (mapImage.naturalHeight / mapImage.naturalWidth); ctx.drawImage(mapImage, -mWidth/2, -mHeight/2 + 200, mWidth, mHeight); ctx.restore(); } let sgTrue = getCartesian(1.35, 103.81); ctx.beginPath(); ctx.arc(sgTrue.x, sgTrue.y, 40, 0, 2 * Math.PI); ctx.strokeStyle = "rgba(0, 242, 255, 0.3)"; ctx.lineWidth = 1; ctx.setLineDash([4, 4]); ctx.stroke(); ctx.fillStyle = "rgba(0, 242, 255, 0.05)"; ctx.fill(); ctx.strokeStyle = "rgba(0, 242, 255, 0.2)"; ctx.lineWidth = 2; ctx.setLineDash([10, 8]); ctx.beginPath(); ctx.moveTo(0, -2000); ctx.lineTo(0, 2000); ctx.stroke(); ctx.setLineDash([]); } }); async function autoSpawnNetwork() { if(isPlaying) return; isPlaying = true; nodes.clear(); edges.clear(); await new Promise(r => setTimeout(r, 400)); let isFixed = geoAligned; nodes.add({ id: "HUB", group: "hub", label: "MASTER FRAUD IDENTITY\n(Structural Link)", value: 60, x: 0, y: geoAligned ? 450 : 300, fixed: isFixed }); await new Promise(r => setTimeout(r, 600)); for(let d of flowData.filter(x => x.group === 'mule' || x.group === 'shared')) { let pos = getNodePosition(d); nodes.add({ id: d.id, group: d.group, label: d.label, value: 15 + getWidth(d.usd || 0), x: pos.x, y: pos.y, fixed: isFixed }); edges.add({ id: `e_ctrl_${d.id}_hub`, from: d.id, to: "HUB", color: "rgba(0, 242, 255, 0.2)", width: 1, dashes: [2, 6] }); await new Promise(r => setTimeout(r, 150)); } await new Promise(r => setTimeout(r, 200)); for(let d of flowData.filter(x => x.group === 'individual' || x.group === 'blocked')) { let pos = getNodePosition(d); nodes.add({ id: d.id, group: d.group, label: d.label, value: 10 + getWidth(d.usd), x: pos.x, y: pos.y, fixed: isFixed }); if (!edges.get(`e_base_${d.id}_${d.to}`)) { let eColor = d.state === "success" ? "rgba(0, 255, 0, 0.4)" : "rgba(255, 51, 51, 0.4)"; let eDash = d.state === "success" ? false : [4,4]; edges.add({ id: `e_base_${d.id}_${d.to}`, from: d.id, to: d.to, color: eColor, width: getWidth(d.usd), dashes: eDash, arrows: { to: { scaleFactor: 0.5 } } }); } if (d.to_extra) { for (let extra of d.to_extra) { edges.add({ id: `e_base_${d.id}_${extra}`, from: d.id, to: extra, color: "rgba(0, 255, 0, 0.4)", width: 1, arrows: { to: { scaleFactor: 0.5 } } }); } } await new Promise(r => setTimeout(r, 100)); } if(satellitesRevealed) await drawSatellitesSequentially(true); network.fit({ animation: { duration: 1000, easingFunction: "easeInOutQuad" } }); isPlaying = false; } setTimeout(autoSpawnNetwork, 300); async function drawSatellitesSequentially(silent = false) { edges.forEach(e => { if(e.id.startsWith('e_base_') && nodes.get(e.from).group !== 'blocked') edges.update({id: e.id, hidden: true}); }); let isFixed = geoAligned; for(let d of flowData.filter(x => x.group === 'individual')) { let devicePos = network.getPositions([d.to])[d.to]; if(!devicePos) continue; let visualTxns = Math.min(d.tx, 12); let usdPer = d.usd / d.tx; for(let i=0; i<visualTxns; i++) { let angle = Math.random() * Math.PI * 2; let radius = 80 + Math.random() * 80; // EXPANDED RADIUS FOR ANTI-CLUMPING let satId = `sat_${d.id}_${i}`; nodes.add({ id: satId, group: 'satellite', label: `$${Math.round(usdPer).toLocaleString()}`, value: 4 + (usdPer/1000), x: devicePos.x + Math.cos(angle)*radius, y: devicePos.y + Math.sin(angle)*radius, usd: usdPer, parentVictim: d.label, fixed: isFixed }); // Device controls the Mule edges.add({ id: `e_ctrl_${d.to}_${satId}`, from: d.to, to: satId, color: "rgba(255, 170, 0, 0.4)", width: 1.5, dashes: [3, 4], length: 150 }); // Financial Route: Victim to Mule. Data strict: It ends here. edges.add({ id: `e_fin_${d.id}_${satId}`, from: d.id, to: satId, color: silent ? "transparent" : "rgba(0, 255, 0, 0.15)", width: 1, arrows: { to: { scaleFactor: 0.3 } }, physics: false }); if(!silent) await new Promise(r => setTimeout(r, 10)); } } network.fit({ animation: { duration: 1500, easingFunction: "easeInOutQuad" } }); } function removeSatellites() { let satNodes = nodes.get({ filter: function(item) { return item.group === 'satellite'; }}); nodes.remove(satNodes.map(s => s.id)); let allEdges = edges.get(); let edgesToRemove = allEdges.filter(e => e.id.startsWith('e_ctrl_') && e.to.startsWith('sat_') || e.id.startsWith('e_fin_')).map(e => e.id); edges.remove(edgesToRemove); edges.forEach(e => { if(e.id.startsWith('e_base_')) edges.update({id: e.id, hidden: false}); }); network.fit({ animation: { duration: 1000, easingFunction: "easeInOutQuad" } }); } async function toggleBeneficiaries() { if(isPlaying) return; satellitesRevealed = !satellitesRevealed; const btn = document.getElementById("reveal-ben-btn"); if (satellitesRevealed) { btn.innerText = "HIDE MULE HIVE SWARM"; btn.classList.add("active-red"); isPlaying = true; await drawSatellitesSequentially(); isPlaying = false; } else { btn.innerText = "REVEAL MULE HIVE SWARM"; btn.classList.remove("active-red"); removeSatellites(); } } const canvas = document.getElementById("particle-layer"); const ctx = canvas.getContext("2d"); function resizeCanvas() { // Only update sizes if they are valid (not 0x0 from being hidden) if (window.innerWidth > 0 && window.innerHeight > 0) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } } window.addEventListener('resize', resizeCanvas); resizeCanvas(); let particles = []; window.drawParticles = function() { // Absolute fix for display:none zero-width canvas issues if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } ctx.clearRect(0, 0, canvas.width, canvas.height); let currentSpeedMult = parseFloat(document.getElementById("speed-selector").value) || 1; for (let i = particles.length - 1; i >= 0; i--) { let p = particles[i]; p.progress += p.speed * currentSpeedMult; if (p.progress >= 1) { particles.splice(i, 1); continue; } // EXACT same mapping math as your original, working version let rawPosFrom = network.getPositions([p.fromNode])[p.fromNode]; let rawPosTo = network.getPositions([p.toNode])[p.toNode]; if(rawPosFrom && rawPosTo) { let posFrom = network.canvasToDOM(rawPosFrom); let posTo = network.canvasToDOM(rawPosTo); let currentX = posFrom.x + (posTo.x - posFrom.x) * p.progress; let currentY = posFrom.y + (posTo.y - posFrom.y) * p.progress; ctx.beginPath(); ctx.arc(currentX, currentY, p.size, 0, Math.PI * 2); ctx.fillStyle = p.color; ctx.shadowBlur = 15; ctx.shadowColor = p.color; ctx.fill(); if (p.state === "blocked" && p.progress > 0.45 && p.progress < 0.55) { ctx.font = "bold 20px Courier New"; ctx.fillStyle = "#ff3333"; ctx.fillText("X", currentX - 6, currentY + 6); p.progress = 1; // Kill particle early } else if (p.amount && p.state === "success") { ctx.font = "bold 11px Courier New"; ctx.fillStyle = p.color; ctx.shadowBlur = 5; ctx.fillText("$" + Math.round(p.amount).toLocaleString(), currentX + p.textOffsetX, currentY + p.textOffsetY); } } } if (isPlaying || particles.length > 0) { animationFrameId = requestAnimationFrame(window.drawParticles); } else { ctx.clearRect(0, 0, canvas.width, canvas.height); } } // ADDED: Stop function function stopParticleFlow() { cancelAnimationFlag = true; isPlaying = false; cancelAnimationFrame(animationFrameId); particles = []; ctx.clearRect(0, 0, canvas.width, canvas.height); document.getElementById("playback-trigger").style.display = "block"; document.getElementById("stop-trigger").style.display = "none"; document.getElementById("chrono-hud").style.display = "none"; document.getElementById("live-drain-counter").innerText = "$26,762.43"; document.getElementById("velocity-hud").classList.remove("pulsing"); if (satellitesRevealed) { edges.forEach(e => { if(e.id.startsWith('e_fin_')) edges.update({id: e.id, color: "rgba(0, 255, 0, 0.15)"}); }); } } window.animateParticleFlow = async function() { resizeCanvas(); // Ensure canvas is ready if(isPlaying) return; isPlaying = true; cancelAnimationFlag = false; network.fit({ animation: { duration: 800, easingFunction: "easeInOutQuad" } }); if(!satellitesRevealed) await toggleBeneficiaries(true); cancelAnimationFrame(animationFrameId); particles = []; const btn = document.getElementById("playback-trigger"); const stopBtn = document.getElementById("stop-trigger"); const counter = document.getElementById("live-drain-counter"); const velHUD = document.getElementById("velocity-hud"); const chronoHud = document.getElementById("chrono-hud"); const chronoTime = document.getElementById("chrono-time"); btn.style.display = "none"; stopBtn.style.display = "block"; chronoHud.style.display = "block"; let virtualTime = new Date("2025-10-02T08:38:13Z").getTime(); const timeIncrement = 51696000 / 273; function formatTime(ms) { return new Date(ms).toISOString().replace("T", " ").substring(0, 19) + " UTC"; } chronoTime.innerText = formatTime(virtualTime); counter.innerText = "$0.00"; counter.style.color = "#00ff00"; velHUD.classList.add("pulsing"); requestAnimationFrame(window.drawParticles); let rollingTotal = 0; // Loop through your exact flowData individual array for(let acc of flowData.filter(x => x.group === 'individual')) { if (cancelAnimationFlag) return; let numTxns = acc.tx; let usdPerTxn = acc.usd / numTxns; let visualTxns = Math.min(numTxns, 12); for(let i=0; i<visualTxns; i++) { if (cancelAnimationFlag) return; let currentSpeedMult = parseFloat(document.getElementById("speed-selector").value) || 1; virtualTime += timeIncrement; chronoTime.innerText = formatTime(virtualTime); let satId = `sat_${acc.id}_${i}`; let isMuleTarget = satellitesRevealed && nodes.get(satId); if (isMuleTarget) { particles.push({ fromNode: acc.to, toNode: satId, progress: 0, speed: 0.04 * currentSpeedMult, color: "#ffaa00", size: 2, amount: null, textOffsetX: 0, textOffsetY: 0 }); } if (isMuleTarget) { particles.push({ fromNode: acc.id, toNode: satId, progress: 0, speed: 0.02 * currentSpeedMult, color: "#00ff00", size: 3 + (usdPerTxn / 2000), amount: usdPerTxn, state: "success", textOffsetX: 8 + (Math.random() * 15 - 7), textOffsetY: -5 + (Math.random() * 15 - 7) }); } else { let targetDevice = acc.to; if (acc.to_extra && Math.random() > 0.5) { targetDevice = acc.to_extra[Math.floor(Math.random() * acc.to_extra.length)]; } particles.push({ fromNode: acc.id, toNode: targetDevice, progress: 0, speed: 0.015 * currentSpeedMult, color: "#00ff00", size: 3 + (usdPerTxn / 2000), amount: usdPerTxn, state: "success", textOffsetX: 8 + (Math.random() * 10 - 5), textOffsetY: -5 + (Math.random() * 10 - 5) }); } rollingTotal += (acc.usd / visualTxns); counter.innerText = "$" + rollingTotal.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}); if(rollingTotal > 10000) counter.style.color = "#ffcc00"; if(rollingTotal > 20000) counter.style.color = "#ff3333"; await new Promise(r => setTimeout(r, 180 / currentSpeedMult)); } } // Second loop: Blocked Money (Red) for(let acc of flowData.filter(x => x.state === 'blocked')) { if(cancelAnimationFlag) return; let numTxns = acc.tx; let visualTxns = Math.min(numTxns, 4); for(let i=0; i<visualTxns; i++) { if(cancelAnimationFlag) return; let currentSpeedMult = parseFloat(document.getElementById("speed-selector").value) || 1; particles.push({ fromNode: acc.id, toNode: acc.to, progress: 0, speed: 0.015 * currentSpeedMult, color: "#ff3333", size: 4, state: "blocked", amount: null }); await new Promise(r => setTimeout(r, 200 / currentSpeedMult)); } } if(!cancelAnimationFlag) { // Fixed final amount string output counter.innerText = "$26,762.43"; await new Promise(r => setTimeout(r, 2000)); chronoHud.style.border = "1px solid #00ff00"; chronoHud.style.color = "#00ff00"; chronoHud.style.boxShadow = "0 0 15px rgba(0, 255, 0, 0.3)"; if (satellitesRevealed) { edges.forEach(e => { if(e.id.startsWith('e_fin_')) edges.update({id: e.id, color: "rgba(0, 255, 0, 0.4)"}); }); } velHUD.classList.remove("pulsing"); isPlaying = false; btn.style.display = "block"; stopBtn.style.display = "none"; btn.innerText = "ANIMATE TIMELINE EXTRACTION"; } } async function alignGeoSpatial() { if(isPlaying) return; geoAligned = !geoAligned; const btn = document.getElementById("geo-align-btn"); btn.innerText = geoAligned ? "DISABLE GEO-SPATIAL MAP" : "PROJECT LAT/LONG (EXPLODED VIEW)"; btn.classList.toggle("active-green", geoAligned); document.getElementById("geo-us-label").style.opacity = geoAligned ? 1 : 0; document.getElementById("geo-sg-label").style.opacity = geoAligned ? 1 : 0; network.setOptions({ physics: { enabled: !geoAligned } }); await autoSpawnNetwork(); } network.on("click", function (params) { if (params.nodes.length > 0) { document.getElementById("detail-box").style.display = "block"; const node = nodes.get(params.nodes[0]); const meta = flowData.find(d => d.id === node.id) || {}; let title = "FINANCIAL NODE"; if(node.group === 'individual') title = `VICTIM ACCOUNT OVERVIEW`; if(node.group === 'blocked') title = `PROTECTED VICTIM ACCOUNT`; if(node.group === 'mule' || node.group === 'shared') title = `ATTACKER DEVICE: ${node.id}`; if(node.id === 'HUB') title = `MASTER FRAUD IDENTITY`; if(node.group === 'satellite') title = `TERMINAL MULE DROP`; document.getElementById("node-title").innerText = title; let statsHtml = `<table class="stats-table">`; if(node.group === 'satellite') { statsHtml += `<tr><td>Transaction Value</td><td class="stats-val" style="color:#ffaa00; font-size:13px;">$${node.usd.toLocaleString(undefined, {minimumFractionDigits: 2})}</td></tr>`; statsHtml += `<tr><td>Source Parent</td><td class="stats-val">${node.parentVictim.split('\n')[0]}</td></tr>`; statsHtml += `<tr><td>Account Status</td><td class="stats-val" style="color:#ff3333;">Terminal Holding</td></tr>`; } else if(node.id === 'HUB') { statsHtml += `<tr><td>Role</td><td class="stats-val" style="color:#00f2ff;">Fingerprint Aggregation</td></tr>`; statsHtml += `<tr><td>Data Provenance</td><td class="stats-val">LexID Digital</td></tr>`; } else if(node.group === 'blocked') { if(node.usd) statsHtml += `<tr><td>Capital Protected</td><td class="stats-val" style="color:#ff3333; font-size:13px;">$${node.usd.toLocaleString(undefined, {minimumFractionDigits: 2})}</td></tr>`; statsHtml += `<tr><td>Event Status</td><td class="stats-val" style="color:#ff3333;">Rejected (MFA)</td></tr>`; } else { if(node.usd) statsHtml += `<tr><td>Total Capital Stolen</td><td class="stats-val" style="color:#00ff00; font-size:13px;">$${node.usd.toLocaleString(undefined, {minimumFractionDigits: 2})}</td></tr>`; if(node.tx) statsHtml += `<tr><td>Transactions</td><td class="stats-val">${node.tx}</td></tr>`; if(meta.lat) { statsHtml += `<tr><td>True GPS Coord</td><td class="stats-val" style="color:#00f2ff;">[${meta.lat.toFixed(4)}, ${meta.lng.toFixed(4)}]</td></tr>`; statsHtml += `<tr><td>Mapped Origin</td><td class="stats-val">${meta.geo}</td></tr>`; } if(node.isp) statsHtml += `<tr><td>ISP Host</td><td class="stats-val" style="color:${node.isp.includes('DigitalOcean') ? '#ff3333' : '#ffcc00'};">${node.isp}</td></tr>`; } statsHtml += `</table>`; document.getElementById("node-body").innerHTML = statsHtml; } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Forensic Command | Chapter 3: Executive Threat Synthesis</title> <style> body, html { margin: 0; padding: 0; height: 100%; background: #050505; font-family: 'Courier New', monospace; color: #fff; overflow-x: hidden; } #ui-layer { position: relative; width: 100%; min-height: 100%; padding: 20px; box-sizing: border-box; background: radial-gradient(circle at center, #0a111a 0%, #000 100%); } .tactical-panel { background: rgba(5, 10, 15, 0.95); border: 1px solid #222; padding: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.8); box-sizing: border-box; margin-bottom: 20px; } #header { border-left: 5px solid #ffcc00; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .gps-strip { font-size: 11px; color: #ffcc00; background: rgba(255,204,0,0.1); padding: 5px 10px; border: 1px solid #ffcc0033; letter-spacing: 1px; font-weight: bold;} .section-title { font-size: 14px; color: #00f2ff; border-bottom: 1px solid #333; padding-bottom: 8px; margin-bottom: 20px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; } .dashboard-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; } /* Executive Pillar Boxes */ .pillar-box { background: #050a0f; border: 1px solid #333; padding: 20px; border-radius: 4px; position: relative; transition: 0.3s; margin-bottom: 15px; } .pillar-number { position: absolute; top: -10px; right: -10px; background: #ffcc00; color: #000; font-size: 14px; font-weight: bold; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 0 10px #ffcc00;} .pillar-title { font-size: 14px; color: #fff; font-weight: bold; margin-bottom: 10px; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; } .pillar-desc { font-size: 12px; color: #aaa; line-height: 1.6; margin-bottom: 15px; } .code-tag { font-size: 10px; background: rgba(255, 51, 51, 0.1); color: #ff3333; padding: 4px 8px; border: 1px solid #ff333366; border-radius: 3px; display: inline-block; margin-right: 5px; margin-bottom: 5px; } .code-tag.bypass { background: rgba(0, 255, 0, 0.1); color: #00ff00; border-color: #00ff0066; } .code-tag.soft { background: rgba(255, 204, 0, 0.1); color: #ffcc00; border-color: #ffcc0066; } /* Stats Sub-Grid */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .stat-card { background: #000; border: 1px solid #222; padding: 15px 10px; text-align: center; } .stat-val { font-size: 22px; font-weight: bold; margin-bottom: 5px; font-family: monospace;} .stat-lbl { font-size: 9px; color: #888; letter-spacing: 1px; text-transform: uppercase; } /* Resolution Box */ .resolution-box { background: rgba(0, 255, 0, 0.05); border: 1px solid #00ff00; padding: 20px; border-radius: 4px; box-shadow: 0 0 15px rgba(0, 255, 0, 0.1); margin-bottom: 20px;} .resolution-title { font-size: 14px; color: #00ff00; font-weight: bold; margin-bottom: 10px; letter-spacing: 2px; text-transform: uppercase; } .resolution-text { font-size: 12px; color: #ddd; line-height: 1.8; } .highlight-text { color: #fff; font-weight: bold; } </style> </head> <body> <div id="ui-layer"> <div id="header" class="tactical-panel" style="margin-bottom: 20px;"> <div> <div style="font-size:22px; color:#ffcc00; font-weight:bold; letter-spacing: 2px;">CH 3: EXECUTIVE THREAT SYNTHESIS</div> <div style="font-size:11px; color:#00f2ff; margin-top: 5px;">THREAT NETWORK C723CABD | INCIDENT POST-MORTEM & REMEDIATION PLAN</div> </div> <div class="gps-strip">CONFIDENTIAL | 100% FACTUAL TELEMETRY AUDIT</div> </div> <div class="dashboard-grid"> <div class="tactical-panel" style="margin-bottom: 0;"> <div class="section-title">THE 3-LAYERED EVASION STRATEGY</div> <div style="font-size: 12px; color: #aaa; margin-bottom: 20px; line-height: 1.5;"> The threat network actively A/B tested the policy engine. They manipulated three distinct layers of identity to keep threat scores artificially low, triggering specific ThreatMetrix detection flags. </div> <div class="pillar-box"> <div class="pillar-number">1</div> <div class="pillar-title" style="color: #ff3333;">NETWORK EVASION: Proxy Matrix</div> <div class="pillar-desc"> To bypass transaction velocity limits, devices routed traffic through hundreds of IPs. By mixing DigitalOcean (85.2%) with residential StarHub mobile IPs (14.4%), they spoofed geographic distribution. </div> <div> <span class="code-tag">TMX Flag Fired: [GEO_Spoofing] (96 hits)</span> </div> </div> <div class="pillar-box"> <div class="pillar-number">2</div> <div class="pillar-title" style="color: #00f2ff;">DEVICE EVASION: Synthetic Masks</div> <div class="pillar-desc"> Just 8 physical SmartIDs mathematically generated 604 unique ExactID browser profiles. This tricked perimeter filters into treating each connection as a "new customer" rather than a returning threat. </div> <div> <span class="code-tag">TMX Flag Fired: [Device_Spoofing] (822 hits)</span> </div> </div> <div class="pillar-box" style="margin-bottom: 0;"> <div class="pillar-number">3</div> <div class="pillar-title" style="color: #ffcc00;">BEHAVIORAL EVASION: Hit & Run</div> <div class="pillar-desc"> The syndicate targeted 264 victim accounts, but purposefully abandoned 78.7% of attempts (778 sessions) when they encountered security friction, leaving the events in an incomplete (Null) state. </div> <div> <span class="code-tag">TMX Flag Fired: [Identity_Spoofing] (576 hits)</span> <span class="code-tag soft">TMX Flag Fired: [Automated_Script] (20 hits)</span> </div> </div> </div> <div style="display: flex; flex-direction: column;"> <div class="tactical-panel"> <div class="section-title">FINANCIAL IMPACT & FRAUD KPIs</div> <div class="stats-grid" style="margin-bottom: 12px;"> <div class="stat-card" style="border-color: #ff3333;"> <div class="stat-val" style="color: #ff3333;">$26.7k</div> <div class="stat-lbl">Capital Stolen</div> </div> <div class="stat-card" style="border-color: #00ff00;"> <div class="stat-val" style="color: #00ff00;">$61.6k</div> <div class="stat-lbl">Capital Protected</div> </div> <div class="stat-card" style="border-color: #ffcc00;"> <div class="stat-val" style="color: #ffcc00;">78.7%</div> <div class="stat-lbl">Friction Abandonment Rate</div> </div> <div class="stat-card" style="border-color: #00f2ff;"> <div class="stat-val" style="color: #00f2ff;">75:1</div> <div class="stat-lbl">Device Spoofing Ratio</div> </div> </div> <div class="stats-grid"> <div class="stat-card" style="border-color: #ff3333;"> <div class="stat-val" style="color: #ff3333;">106</div> <div class="stat-lbl">Accounts Breached</div> </div> <div class="stat-card" style="border-color: #00ff00;"> <div class="stat-val" style="color: #00ff00;">158</div> <div class="stat-lbl">Accounts Protected</div> </div> <div class="stat-card" style="border-color: #ffcc00;"> <div class="stat-val" style="color: #ffcc00;">778</div> <div class="stat-lbl">Sessions Abandoned (Null)</div> </div> <div class="stat-card" style="border-color: #00f2ff;"> <div class="stat-val" style="color: #00f2ff;">264</div> <div class="stat-lbl">Total Accounts Targeted</div> </div> </div> <div style="font-size: 10px; color: #888; margin-top: 12px; text-align: center; font-style: italic;"> *Data reflects the aggregate 988 sessions executed by the 8 physical devices linked to LexID c723cabd. Total Operation Volume: $48,416.47. </div> </div> <div class="resolution-box"> <div class="resolution-title">DEFENSE MECHANISM: HOW $61.6K WAS PROTECTED</div> <div class="resolution-text"> The fraud syndicate successfully bypassed initial static IP and User-Agent rules by rotating infrastructure. However, <span class="highlight-text" style="color: #00ff00;">$61.6K</span> across <span class="highlight-text">158 targeted accounts</span> was successfully defended through dynamic behavioral friction.<br><br> When the ThreatMetrix engine identified underlying hardware anomalies—triggering <code>[Identity_Spoofing]</code> or <code>[Device_Spoofing]</code> despite the rotating IPs—the session risk scores spiked. Rather than completing the transactions, the automated scripts abruptly terminated the sessions, leaving hundreds of events in an abandoned (Null) state. The scripts were forced to instantly sever the connection upon encountering these high-friction rules, resulting in a <span class="highlight-text" style="color: #ffcc00;">78.7% Friction Abandonment Rate</span> and saving the bank from massive systemic loss. </div> </div> <div class="tactical-panel" style="margin-bottom: 0;"> <div class="section-title">THE SMOKING GUN: LEXID RESOLUTION</div> <div style="font-size: 12px; color: #ddd; line-height: 1.6;"> Legacy fraud tools analyze IP addresses and User-Agents in silos. Because the attacker constantly randomized both, traditional filters only saw thousands of isolated, low-risk events. <span style="color: #00f2ff; font-weight: bold;">LexID and SmartID technology cut through the spoofed noise.</span><br><br> By anchoring directly to the deep physical hardware telemetry, we established that even while wearing 604 different masks and bouncing through data center proxies, <span style="color: #fff; font-weight: bold;">the underlying 8 physical devices remained static.</span> This singular piece of un-spoofable evidence allowed us to unmask the organized syndicate and map the entire kill chain. </div> </div> </div> </div> </div> </body> </html>