how_tcpcopy_works.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TCP Handshake & TCPCopy Replication Animation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <style>
        body { 
            text-align: center; 
            font-family: Arial, sans-serif; 
            background-color: #f4f4f4; 
        }
        h1 { 
            margin-top: 20px; 
            color: #333; 
        }
        .container { 
            display: flex; 
            justify-content: center; 
            align-items: flex-start; 
            flex-wrap: wrap; 
            gap: 50px; 
            margin-top: 100px; 
        }
        .device { 
            text-align: center; 
            font-weight: bold; 
            position: relative; 
            width: 180px; 
        }
        .stack { 
            border: 2px solid black; 
            padding: 10px; 
            width: 140px; 
            text-align: center; 
            margin: 5px auto; 
            border-radius: 5px; 
        }
        .app { 
            background-color: #ffcc00; 
        }
        .tcpcopy, .intercept { 
            background-color: #ffcc00; 
            font-size: 20px; 
            padding: 5px; 
        }
        .tcp { 
            background-color: #ff5733; 
            color: white; 
        }
        .ip { 
            background-color: #33b5e5; 
            color: white; 
        }
        .datalink { 
            background-color: #28a745; 
            color: white; 
        }
        .packet { 
            width: 60px; 
            height: 30px; 
            text-align: center; 
            line-height: 30px; 
            position: absolute; 
            border-radius: 5px; 
            color: white; 
            font-weight: bold; 
        }
        .online { 
            background-color: orange; 
        }
        .replication { 
            background-color: blue; 
        }
        .test { 
            background-color: green; 
        }
        .btn { 
            margin-top: 20px; 
            padding: 10px 20px; 
            font-size: 16px; 
            cursor: pointer; 
            background-color: #007bff; 
            color: white; 
            border: none; 
            border-radius: 5px; 
        }
        .btn:disabled { 
            background-color: #ccc; 
            cursor: not-allowed; 
        }
        .btn-container { 
            margin-top: 200px; 
        }
        .status { 
            margin-top: 10px; 
            font-weight: bold; 
            color: green; 
            font-size: 16px; 
        }
        #synAckPacket { 
            width: 80px; 
        }
        #synAckPacket2 { 
            width: 80px; 
        }
        #synAckPacket2_captured { 
            width: 80px; 
        }
    </style>
</head>
<body>
    <h1>TCP Handshake & TCPCopy Replication Animation</h1>

    <div class="container">
        <div class="device" id="client">
            <div>Client</div>
            <div class="stack app">App</div>
            <div class="stack tcp">TCP</div>
            <div class="stack ip">IP</div>
            <div class="stack datalink">Data Link</div>
            <div id="clientStatus" class="status">CLOSED</div>
        </div>

        <div class="device" id="server">
            <div>Server</div>
            <div class="stack app">App</div>
            <div class="stack tcp">TCP</div>
            <div class="stack ip">IP</div>
            <div class="stack datalink">Data Link</div>
            <div id="serverStatus" class="status">LISTEN</div>
        </div>
        
        <div class="device" id="tcpcopy">
            <div>TCPCopy Client</div>
            <div class="stack tcpcopy">tcpcopy</div>
        </div>
        
        <div class="device" id="target-server">
            <div>Target Server</div>
            <div class="stack app">App</div>
            <div class="stack tcp">TCP</div>
            <div class="stack ip">IP</div>
            <div class="stack datalink">Data Link</div>
            <div id="targetServerStatus" class="status">LISTEN</div>
        </div>
        
        <div class="device" id="assistant-server">
            <div>Assistant Server</div>
            <div class="stack app">App</div>
            <div class="stack tcp">TCP</div>
            <div class="stack ip">IP</div>
            <div class="stack datalink">Data Link</div>
        </div>
        
        <div class="device" id="intercept">
            <div>TCPCopy Server</div>
            <div class="stack intercept">intercept</div>
        </div>
    </div>

    <div id="synPacket" class="packet online" style="display: none;">SYN</div>
    <div id="synAckPacket" class="packet online" style="display: none;">SYN-ACK</div>
    <div id="ackPacket" class="packet online" style="display: none;">ACK</div>
    <div id="synPacket_captured" class="packet replication" style="display: none;">SYN</div>
    <div id="ackPacket_captured" class="packet replication" style="display: none;">ACK</div>
    <div id="synPacket2" class="packet test" style="display: none;">SYN</div>
    <div id="synAckPacket2" class="packet test" style="display: none;">SYN-ACK</div>
    <div id="synAckPacket2_captured" class="packet replication" style="display: none;">SYN-ACK</div>
    <div id="synAckPacket2_info" class="packet test" style="display: none;">INFO</div>
    <div id="ackPacket2" class="packet test" style="display: none;">ACK</div>
    
    <div class="btn-container">
        <button class="btn" id="startBtn" onclick="startTCPHandshake()">Start Handshake</button>
    </div>
    
    <script>
        function startTCPHandshake() {
            const startBtn = document.getElementById("startBtn");
            startBtn.disabled = true; // Disable the button

            console.log("Handshake started!");
            document.getElementById("clientStatus").innerText = "CLOSED";
            document.getElementById("serverStatus").innerText = "LISTEN";
            document.getElementById("targetServerStatus").innerText = "LISTEN";
            
            const clientAppRect = document.querySelector("#client .app").getBoundingClientRect();
            const clientTCPRect = document.querySelector("#client .tcp").getBoundingClientRect();
            const clientIPRect = document.querySelector("#client .ip").getBoundingClientRect();
            const clientDatalinkRect = document.querySelector("#client .datalink").getBoundingClientRect();

            const serverTCPRect = document.querySelector("#server .tcp").getBoundingClientRect();
            const serverIPRect = document.querySelector("#server .ip").getBoundingClientRect();
            const serverDatalinkRect = document.querySelector("#server .datalink").getBoundingClientRect();

            const targetServerTCPRect = document.querySelector("#target-server .tcp").getBoundingClientRect();
            const targetServerIPRect = document.querySelector("#target-server .ip").getBoundingClientRect();
            const targetServerDatalinkRect = document.querySelector("#target-server .datalink").getBoundingClientRect();

            const assistServerTCPRect = document.querySelector("#assistant-server .tcp").getBoundingClientRect();
            const assistServerIPRect = document.querySelector("#assistant-server .ip").getBoundingClientRect();
            const assistServerDatalinkRect = document.querySelector("#assistant-server .datalink").getBoundingClientRect();

            const tcpcopyRect = document.querySelector("#tcpcopy .tcpcopy").getBoundingClientRect();
            const interceptRect = document.querySelector("#intercept .intercept").getBoundingClientRect();

            gsap.set("#synPacket", {
                left: clientTCPRect.left + 30, 
                top: clientTCPRect.top, 
                display: "block"
            });

            let tl = gsap.timeline();

            document.getElementById("clientStatus").innerText = "SYN_SENT";
            
            tl.to(synPacket, { duration: 1, top: clientIPRect.top})
              .to(synPacket, { duration: 1, top: clientDatalinkRect.top + 100 })
              .to(synPacket, { duration: 1, left: serverDatalinkRect.left + 30 })
              .to(synPacket, { duration: 1, top: serverDatalinkRect.top })
              .to(synPacket, { duration: 1, top: serverIPRect.top, onComplete: () => {
                  document.getElementById("synPacket_captured").style.display = "block";
                  gsap.set("#synPacket_captured", {
                      left: serverIPRect.left + 30,
                      top: serverIPRect.top
                  });
              }})
              .to("#synPacket_captured", { duration: 1, left: tcpcopyRect.left + 30 })
              .to("#synPacket_captured", { duration: 1, top: tcpcopyRect.top, onComplete: () => {
                  document.getElementById("synPacket2").style.display = "block";
                  gsap.set("#synPacket_captured", { display: "none" });
                  gsap.set("#synPacket2", {
                      left: tcpcopyRect.left + 30,
                      top: tcpcopyRect.top
                  });
              }})
              .to(synPacket, { duration: 1, top: serverTCPRect.top, onComplete: () => {
                  document.getElementById("synAckPacket").style.display = "block";
                  document.getElementById("serverStatus").innerText = "SYN_RCVD";
                  gsap.set("#synPacket", { display: "none" });
                  gsap.set("#synAckPacket", {
                      left: serverTCPRect.left + 30,
                      top: serverTCPRect.top
                  });
              }}, "<"); 
              
            
            tl.to("#synAckPacket", { duration: 1, top: serverIPRect.top })
              .to("#synPacket2", { duration: 1, top: serverIPRect.top }, "<")
              .to("#synAckPacket", { duration: 1, top: serverDatalinkRect.top + 100 })
              .to("#synPacket2", { duration: 1, left: serverIPRect.left + 30 }, "<")
              .to("#synAckPacket", { duration: 1, left: (clientDatalinkRect.left + serverDatalinkRect.left) / 2, onComplete: () => {
              	    const transitText = document.createElement("div");
						        transitText.id = "transitText";
						        transitText.innerText = "In transit...";
						        transitText.style.position = "absolute";
						        transitText.style.left = `${(clientDatalinkRect.left + serverDatalinkRect.left) / 2}px`;
						        transitText.style.top = `${clientDatalinkRect.top + 135}px`;
						        transitText.style.color = "black";
						        transitText.style.fontWeight = "bold";
						        transitText.style.fontSize = "15px";
						        document.body.appendChild(transitText);
              }})
              .to("#synPacket2", { duration: 1, top: serverDatalinkRect.top }, "<")
              .to("#synPacket2", { duration: 1, top: serverDatalinkRect.top + 100 })
              .to("#synPacket2", { duration: 1, left: targetServerDatalinkRect.left + 100 })
              .to("#synPacket2", { duration: 1, top: targetServerDatalinkRect.top })
              .to("#synPacket2", { duration: 1, top: targetServerTCPRect.top, onComplete: () => {
                  document.getElementById("synAckPacket2").style.display = "block";
                  document.getElementById("targetServerStatus").innerText = "SYN_RCVD";
                  gsap.set("#synPacket2", { display: "none" });
                  gsap.set("#synAckPacket2", {
                      left: targetServerTCPRect.left + 30,
                      top: targetServerTCPRect.top
                  });

              }});    
              
            tl.to("#synAckPacket2", { duration: 1, top: targetServerIPRect.top })
              .to("#synAckPacket2", { duration: 1, top: targetServerDatalinkRect.top + 100, onComplete: () => {
              	    const routeText = document.createElement("div");
						        routeText.id = "routeText";
						        routeText.innerText = "Route it to the assistant server";
						        routeText.style.position = "absolute";
						        routeText.style.left = `${targetServerDatalinkRect.left}px`;
						        routeText.style.top = `${targetServerDatalinkRect.top + 150}px`;
						        routeText.style.color = "black";
						        routeText.style.fontWeight = "bold";
						        routeText.style.fontSize = "15px";
						        document.body.appendChild(routeText);
              }})
              .to("#synAckPacket2", { duration: 1, left: assistServerDatalinkRect.left + 30, onComplete: () => {
              		const routeText = document.getElementById("routeText");
    			    		if (routeText) {
            				routeText.remove();
            			}
              }})
              .to("#synAckPacket2", { duration: 1, top: assistServerDatalinkRect.top, onComplete: () => {
                  document.getElementById("synAckPacket2_captured").style.display = "block";
                  gsap.set("#synAckPacket2_captured", {
                      left: assistServerDatalinkRect.left + 30,
                      top: assistServerDatalinkRect.top
                  });
              }})
              .to("#synAckPacket2_captured", { duration: 1, left: interceptRect.left + 30 })
              .to("#synAckPacket2", { duration: 1, top: assistServerIPRect.top, onComplete: () => {
                  gsap.set("#synAckPacket2", { display: "none" });     
              }}, "<")   
              .to("#synAckPacket2_captured", { duration: 1, top: interceptRect.top, onComplete: () => {
                  document.getElementById("synAckPacket2_info").style.display = "block";
                  gsap.set("#synAckPacket2_captured", { display: "none" });
                  gsap.set("#synAckPacket2_info", {
                     left: interceptRect.left + 30,
                      top: interceptRect.top
                  });
              }});
                            
                            
            tl.to("#synAckPacket2_info", { duration: 1, top: assistServerTCPRect.top  })
              .to("#synAckPacket2_info", { duration: 1, left: assistServerTCPRect.left + 30 })
              .to("#synAckPacket2_info", { duration: 1, top: assistServerIPRect.top })
              .to("#synAckPacket2_info", { duration: 1, top: assistServerDatalinkRect.top + 100 })
              .to("#synAckPacket2_info", { duration: 1, left: serverDatalinkRect.left + 100 })
              .to("#synAckPacket2_info", { duration: 1, top: serverDatalinkRect.top })
              .to("#synAckPacket2_info", { duration: 1, top: serverIPRect.top })
              .to("#synAckPacket2_info", { duration: 1, top: serverTCPRect.top })
              .to("#synAckPacket2_info", { duration: 1, left: tcpcopyRect.left+ 30 })
              .to("#synAckPacket2_info", { duration: 1, top: tcpcopyRect.top, onComplete: () => {
                  gsap.set("#synAckPacket2_info", { display: "none" });
              		const transitText = document.getElementById("transitText");
    			    		if (transitText) {
            				transitText.remove();
        					}
              }});    
              
              
            tl.to("#synAckPacket", { duration: 1, left: clientDatalinkRect.left + 30 })
              .to("#synAckPacket", { duration: 1, top: clientDatalinkRect.top  })
              .to("#synAckPacket", { duration: 1, top: clientIPRect.top })
              .to("#synAckPacket", { duration: 1, top: clientTCPRect.top, onComplete: () => {
                  document.getElementById("clientStatus").innerText = "ESTABLISHED";
                  document.getElementById("ackPacket").style.display = "block";
                  gsap.set("#synAckPacket", { display: "none" });
                  gsap.set("#ackPacket", {
                     left: clientTCPRect.left + 30,
                      top: clientTCPRect.top
                  });
              }}); 
              
 
            tl.to("#ackPacket", { duration: 1, top: clientIPRect.top  })
              .to("#ackPacket", { duration: 1, top: clientDatalinkRect.top + 100  })
              .to("#ackPacket", { duration: 1, left: serverDatalinkRect.left + 30 })
              .to("#ackPacket", { duration: 1, top: serverDatalinkRect.top  })
              .to("#ackPacket", { duration: 1, top: serverIPRect.top, onComplete: () => {
                  document.getElementById("ackPacket_captured").style.display = "block";
                  gsap.set("#ackPacket_captured", {
                     left: serverIPRect.left + 30,
                      top: serverIPRect.top
                  });
              }})
              .to("#ackPacket_captured", { duration: 1, left: tcpcopyRect.left + 30 })
              .to("#ackPacket_captured", { duration: 1, top: tcpcopyRect.top, onComplete: () => {
                  document.getElementById("ackPacket2").style.display = "block";
                  gsap.set("#ackPacket_captured", { display: "none" });
                  gsap.set("#ackPacket2", {
                      left: tcpcopyRect.left + 30,
                      top: tcpcopyRect.top
                  });
              }})
              .to("#ackPacket", { duration: 1, top: serverTCPRect.top, onComplete: () => {
                  document.getElementById("serverStatus").innerText = "ESTABLISHED";
                  gsap.set("#ackPacket", { display: "none" });

              }}, "<"); 
                         
            
            tl.to("#ackPacket2", { duration: 1, left: tcpcopyRect.left + 30 })
              .to("#ackPacket2", { duration: 1, top: tcpcopyRect.top })
              .to("#ackPacket2", { duration: 1, top: serverIPRect.top })
              .to("#ackPacket2", { duration: 1, left: serverIPRect.left + 30 })
              .to("#ackPacket2", { duration: 1, top: serverDatalinkRect.top })
              .to("#ackPacket2", { duration: 1, top: serverDatalinkRect.top + 100 })
              .to("#ackPacket2", { duration: 1, left: targetServerDatalinkRect.left + 100 })
              .to("#ackPacket2", { duration: 1, top: targetServerDatalinkRect.top })
              .to("#ackPacket2", { duration: 1, top: targetServerTCPRect.top, onComplete: () => {
                  document.getElementById("targetServerStatus").innerText = "ESTABLISHED";
                  gsap.set("#ackPacket2", { display: "none" });
                  startBtn.disabled = false; // Re-enable the button
              }});    
        }
    </script>
</body>
</html>