Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>✨ Stop-and-Wait Protocol | The OG Reliable Transmission</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes shake { | |
| 0% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px); } | |
| 50% { transform: translateX(5px); } | |
| 75% { transform: translateX(-5px); } | |
| 100% { transform: translateX(0); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .shaking { | |
| animation: shake 0.5s ease-in-out infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); | |
| } | |
| .message-box { | |
| transition: all 0.3s ease; | |
| } | |
| .message-box:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
| } | |
| .typing { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 3px; | |
| animation: typing 1s infinite ease-in-out; | |
| } | |
| .typing:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .typing:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes typing { | |
| 0% { transform: translateY(0); opacity: 0.4; } | |
| 50% { transform: translateY(-5px); opacity: 1; } | |
| 100% { transform: translateY(0); opacity: 0.4; } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-5xl font-bold text-white mb-4">STOP-AND-WAIT PROTOCOL</h1> | |
| <p class="text-xl text-white opacity-90">The OG Reliable Transmission Method 🚀</p> | |
| <div class="mt-6"> | |
| <span class="inline-block bg-pink-500 text-white px-4 py-2 rounded-full text-sm font-semibold mr-2 mb-2">#ReliableAF</span> | |
| <span class="inline-block bg-purple-500 text-white px-4 py-2 rounded-full text-sm font-semibold mr-2 mb-2">#NoPacketLeftBehind</span> | |
| <span class="inline-block bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-semibold mr-2 mb-2">#OldButGold</span> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Theory Section --> | |
| <div class="lg:w-1/2 bg-white bg-opacity-90 rounded-2xl p-6 shadow-xl"> | |
| <h2 class="text-3xl font-bold text-purple-600 mb-6 flex items-center"> | |
| <i class="fas fa-brain mr-3"></i> The Theory Breakdown | |
| </h2> | |
| <div class="space-y-6"> | |
| <div class="bg-purple-50 p-4 rounded-xl"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-2">What's the Vibe? 🧐</h3> | |
| <p class="text-gray-700"> | |
| Stop-and-Wait is like that friend who needs confirmation for EVERY message before sending the next one. | |
| "Did you get that?" "Yeah?" "Okay, here's the next one." Basic but reliable AF. | |
| </p> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-xl"> | |
| <h3 class="text-xl font-semibold text-blue-700 mb-2">How It Works 🛠️</h3> | |
| <ul class="list-disc pl-5 space-y-2 text-gray-700"> | |
| <li><span class="font-semibold">Sender:</span> Sends one packet and chills until it gets an ACK (acknowledgement)</li> | |
| <li><span class="font-semibold">Receiver:</span> Gets the packet, sends back an ACK like "Got it, king 👑"</li> | |
| <li><span class="font-semibold">Timeout:</span> If sender doesn't get ACK in time, it resends like "You there??"</li> | |
| </ul> | |
| </div> | |
| <div class="bg-pink-50 p-4 rounded-xl"> | |
| <h3 class="text-xl font-semibold text-pink-700 mb-2">Pros vs Cons ⚖️</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-white p-3 rounded-lg shadow"> | |
| <h4 class="font-bold text-green-600 mb-1">Pros 👍</h4> | |
| <ul class="list-disc pl-5 text-sm text-gray-700"> | |
| <li>Simple AF to implement</li> | |
| <li>Guaranteed delivery (no packet left behind)</li> | |
| <li>No congestion (chill transmission pace)</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow"> | |
| <h4 class="font-bold text-red-600 mb-1">Cons 👎</h4> | |
| <ul class="list-disc pl-5 text-sm text-gray-700"> | |
| <li>Slow as molasses (only one packet at a time)</li> | |
| <li>Inefficient for long-distance (high latency = lots of waiting)</li> | |
| <li>ACK could get lost too (double trouble)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-xl"> | |
| <h3 class="text-xl font-semibold text-yellow-700 mb-2">Real-World Tea ☕</h3> | |
| <p class="text-gray-700"> | |
| Used in basic communication systems, some IoT devices, and anywhere you need | |
| reliability over speed. Like texting your crush - you wait for a reply before | |
| double-texting, right? (Unless you're desperate 😅) | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Simulation Section --> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white bg-opacity-90 rounded-2xl p-6 shadow-xl mb-6"> | |
| <h2 class="text-3xl font-bold text-blue-600 mb-6 flex items-center"> | |
| <i class="fas fa-play-circle mr-3"></i> Live Simulation | |
| </h2> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-paper-plane text-white text-2xl"></i> | |
| </div> | |
| <p class="font-semibold">Sender</p> | |
| </div> | |
| <div class="flex-1 h-1 bg-gray-300 mx-4 relative"> | |
| <div id="connection-line" class="h-full bg-blue-500 transition-all duration-1000 ease-linear" style="width: 0%"></div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-inbox text-white text-2xl"></i> | |
| </div> | |
| <p class="font-semibold">Receiver</p> | |
| </div> | |
| </div> | |
| <div class="space-y-4" id="simulation-area"> | |
| <!-- Messages will appear here --> | |
| </div> | |
| <div class="mt-8 flex flex-wrap gap-3 justify-center"> | |
| <button id="start-btn" class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-full font-bold transition flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Start Simulation | |
| </button> | |
| <button id="step-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-full font-bold transition flex items-center"> | |
| <i class="fas fa-step-forward mr-2"></i> Step-by-Step | |
| </button> | |
| <button id="reset-btn" class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-full font-bold transition flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Panel --> | |
| <div class="bg-white bg-opacity-90 rounded-2xl p-6 shadow-xl"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-chart-bar mr-2"></i> Simulation Stats | |
| </h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center"> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <p class="text-sm text-indigo-600 font-semibold">Packets Sent</p> | |
| <p id="sent-count" class="text-2xl font-bold">0</p> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded-lg"> | |
| <p class="text-sm text-green-600 font-semibold">ACKs Received</p> | |
| <p id="ack-count" class="text-2xl font-bold">0</p> | |
| </div> | |
| <div class="bg-yellow-50 p-3 rounded-lg"> | |
| <p class="text-sm text-yellow-600 font-semibold">Timeouts</p> | |
| <p id="timeout-count" class="text-2xl font-bold">0</p> | |
| </div> | |
| <div class="bg-red-50 p-3 rounded-lg"> | |
| <p class="text-sm text-red-600 font-semibold">Packet Loss</p> | |
| <p id="loss-count" class="text-2xl font-bold">0</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ Section --> | |
| <div class="mt-16 bg-white bg-opacity-90 rounded-2xl p-6 shadow-xl"> | |
| <h2 class="text-3xl font-bold text-orange-600 mb-6 flex items-center"> | |
| <i class="fas fa-question-circle mr-3"></i> FAQs - For the Curious Minds | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="border-b border-gray-200 pb-4"> | |
| <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800"> | |
| <span>Why not just send all packets at once? 🤔</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-700 hidden"> | |
| <p>Because the internet isn't perfect, sis! Packets can get lost, duplicated, or arrive out of order. Stop-and-Wait makes sure each packet is safely delivered before moving to the next one. It's like eating one fry at a time instead of shoving the whole box in your mouth.</p> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 pb-4"> | |
| <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800"> | |
| <span>What happens if the ACK gets lost? 😱</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-700 hidden"> | |
| <p>The sender has a timer! If it doesn't get an ACK within a certain time, it assumes the packet or ACK got lost in the void and resends the packet. This is why we have the timeout counter in the simulation.</p> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 pb-4"> | |
| <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800"> | |
| <span>Is this still used today? 🕰️</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-700 hidden"> | |
| <p>Yes, but mostly in simple systems or where reliability is more important than speed. Modern protocols like TCP use more advanced versions (sliding window) that are like Stop-and-Wait but with multiple packets in transit at once - the glow-up version!</p> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 pb-4"> | |
| <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800"> | |
| <span>How does this compare to other protocols? 🔄</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-700 hidden"> | |
| <p>Stop-and-Wait is the most basic reliable protocol. Others like Go-Back-N and Selective Repeat allow multiple packets in flight, making them more efficient but also more complex. It's like the difference between texting one message at a time vs having a full conversation flow.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center text-white text-opacity-80"> | |
| <p>Made with <i class="fas fa-heart text-red-400"></i> for network protocol enthusiasts</p> | |
| <p class="mt-2 text-sm">PS: This is way more fun than your textbook explanation, right? 😉</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Simulation variables | |
| let sequenceNumber = 0; | |
| let sentCount = 0; | |
| let ackCount = 0; | |
| let timeoutCount = 0; | |
| let lossCount = 0; | |
| let simulationInterval; | |
| let isSimulating = false; | |
| // DOM elements | |
| const simulationArea = document.getElementById('simulation-area'); | |
| const startBtn = document.getElementById('start-btn'); | |
| const stepBtn = document.getElementById('step-btn'); | |
| const resetBtn = document.getElementById('reset-btn'); | |
| const connectionLine = document.getElementById('connection-line'); | |
| const sentCountEl = document.getElementById('sent-count'); | |
| const ackCountEl = document.getElementById('ack-count'); | |
| const timeoutCountEl = document.getElementById('timeout-count'); | |
| const lossCountEl = document.getElementById('loss-count'); | |
| // FAQ functionality | |
| const faqBtns = document.querySelectorAll('.faq-btn'); | |
| faqBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const answer = this.nextElementSibling; | |
| const icon = this.querySelector('i'); | |
| answer.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Simulation functions | |
| function sendPacket() { | |
| sequenceNumber++; | |
| sentCount++; | |
| sentCountEl.textContent = sentCount; | |
| // Create packet element | |
| const packet = document.createElement('div'); | |
| packet.className = 'message-box bg-blue-100 border-l-4 border-blue-500 p-4 rounded-lg'; | |
| packet.innerHTML = ` | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-bold text-blue-700">Packet #${sequenceNumber}</span> | |
| <span class="text-xs text-gray-500 ml-2">Seq: ${sequenceNumber % 2}</span> | |
| </div> | |
| <div class="text-xs text-gray-500"> | |
| ${new Date().toLocaleTimeString()} | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm text-gray-700"> | |
| Data: "Hello world ${sequenceNumber}" | |
| </div> | |
| `; | |
| packet.id = `packet-${sequenceNumber}`; | |
| simulationArea.appendChild(packet); | |
| // Animate connection line | |
| connectionLine.style.width = '100%'; | |
| connectionLine.style.transitionDuration = '1s'; | |
| // Randomly decide if packet will be lost (20% chance) | |
| const isLost = Math.random() < 0.2; | |
| if (isLost) { | |
| lossCount++; | |
| lossCountEl.textContent = lossCount; | |
| setTimeout(() => { | |
| packet.classList.add('bg-red-100', 'border-red-500'); | |
| packet.innerHTML += ` | |
| <div class="mt-2 text-sm text-red-600 font-semibold"> | |
| <i class="fas fa-times-circle mr-1"></i> Packet lost in transmission! | |
| </div> | |
| `; | |
| // Timeout after 3 seconds | |
| setTimeout(() => { | |
| packet.innerHTML += ` | |
| <div class="mt-2 text-sm text-yellow-700 font-semibold"> | |
| <i class="fas fa-clock mr-1"></i> Timeout! Resending packet... | |
| </div> | |
| `; | |
| timeoutCount++; | |
| timeoutCountEl.textContent = timeoutCount; | |
| // Resend the packet | |
| setTimeout(sendPacket, 1000); | |
| }, 3000); | |
| }, 1000); | |
| } else { | |
| // Packet arrived successfully | |
| setTimeout(() => { | |
| packet.classList.add('bg-green-100', 'border-green-500'); | |
| packet.innerHTML += ` | |
| <div class="mt-2 text-sm text-green-600 font-semibold"> | |
| <i class="fas fa-check-circle mr-1"></i> Packet delivered successfully! | |
| </div> | |
| `; | |
| // Send ACK back | |
| setTimeout(sendAck, 1000); | |
| }, 1000); | |
| } | |
| } | |
| function sendAck() { | |
| ackCount++; | |
| ackCountEl.textContent = ackCount; | |
| // Create ACK element | |
| const ack = document.createElement('div'); | |
| ack.className = 'message-box bg-purple-100 border-l-4 border-purple-500 p-4 rounded-lg ml-12'; | |
| ack.innerHTML = ` | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-bold text-purple-700">ACK #${sequenceNumber}</span> | |
| <span class="text-xs text-gray-500 ml-2">For Seq: ${sequenceNumber % 2}</span> | |
| </div> | |
| <div class="text-xs text-gray-500"> | |
| ${new Date().toLocaleTimeString()} | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm text-gray-700"> | |
| Message: "Got it! Send next packet when ready" | |
| </div> | |
| `; | |
| ack.id = `ack-${sequenceNumber}`; | |
| simulationArea.appendChild(ack); | |
| // Animate connection line back | |
| connectionLine.style.width = '0%'; | |
| connectionLine.style.transitionDuration = '1s'; | |
| // Randomly decide if ACK will be lost (15% chance) | |
| const isLost = Math.random() < 0.15; | |
| if (isLost) { | |
| lossCount++; | |
| lossCountEl.textContent = lossCount; | |
| setTimeout(() => { | |
| ack.classList.add('bg-red-100', 'border-red-500'); | |
| ack.innerHTML += ` | |
| <div class="mt-2 text-sm text-red-600 font-semibold"> | |
| <i class="fas fa-times-circle mr-1"></i> ACK lost in transmission! | |
| </div> | |
| `; | |
| // Timeout after 3 seconds | |
| setTimeout(() => { | |
| ack.innerHTML += ` | |
| <div class="mt-2 text-sm text-yellow-700 font-semibold"> | |
| <i class="fas fa-clock mr-1"></i> Timeout! Resending packet... | |
| </div> | |
| `; | |
| timeoutCount++; | |
| timeoutCountEl.textContent = timeoutCount; | |
| // Resend the packet | |
| setTimeout(sendPacket, 1000); | |
| }, 3000); | |
| }, 1000); | |
| } else { | |
| // ACK arrived successfully | |
| setTimeout(() => { | |
| ack.classList.add('bg-green-100', 'border-green-500'); | |
| ack.innerHTML += ` | |
| <div class="mt-2 text-sm text-green-600 font-semibold"> | |
| <i class="fas fa-check-circle mr-1"></i> ACK received successfully! | |
| </div> | |
| `; | |
| if (isSimulating) { | |
| // Continue simulation | |
| setTimeout(sendPacket, 1000); | |
| } | |
| }, 1000); | |
| } | |
| } | |
| // Event listeners | |
| startBtn.addEventListener('click', function() { | |
| if (!isSimulating) { | |
| isSimulating = true; | |
| startBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause'; | |
| startBtn.classList.remove('bg-green-500'); | |
| startBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600'); | |
| sendPacket(); | |
| } else { | |
| isSimulating = false; | |
| startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Continue'; | |
| startBtn.classList.remove('bg-yellow-500'); | |
| startBtn.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| } | |
| }); | |
| stepBtn.addEventListener('click', function() { | |
| if (!isSimulating) { | |
| sendPacket(); | |
| } | |
| }); | |
| resetBtn.addEventListener('click', function() { | |
| // Reset variables | |
| sequenceNumber = 0; | |
| sentCount = 0; | |
| ackCount = 0; | |
| timeoutCount = 0; | |
| lossCount = 0; | |
| isSimulating = false; | |
| // Reset UI | |
| simulationArea.innerHTML = ''; | |
| connectionLine.style.width = '0%'; | |
| sentCountEl.textContent = '0'; | |
| ackCountEl.textContent = '0'; | |
| timeoutCountEl.textContent = '0'; | |
| lossCountEl.textContent = '0'; | |
| startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Simulation'; | |
| startBtn.classList.remove('bg-yellow-500'); | |
| startBtn.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |