Hugging Face's logo

Spaces:
gaur3009
/
stop_and_wait
Running

App Files Community
gaur3009 commited on
Commit
0b90c66
·
verified ·
1 Parent(s): c81fa42

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +489 -19
index.html CHANGED
@@ -1,19 +1,489 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>✨ Stop-and-Wait Protocol | The OG Reliable Transmission</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-20px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+ @keyframes shake {
16
+ 0% { transform: translateX(0); }
17
+ 25% { transform: translateX(-5px); }
18
+ 50% { transform: translateX(5px); }
19
+ 75% { transform: translateX(-5px); }
20
+ 100% { transform: translateX(0); }
21
+ }
22
+ .floating {
23
+ animation: float 3s ease-in-out infinite;
24
+ }
25
+ .shaking {
26
+ animation: shake 0.5s ease-in-out infinite;
27
+ }
28
+ .gradient-bg {
29
+ background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
30
+ }
31
+ .message-box {
32
+ transition: all 0.3s ease;
33
+ }
34
+ .message-box:hover {
35
+ transform: scale(1.05);
36
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
37
+ }
38
+ .typing {
39
+ width: 5px;
40
+ height: 5px;
41
+ border-radius: 50%;
42
+ display: inline-block;
43
+ margin-right: 3px;
44
+ animation: typing 1s infinite ease-in-out;
45
+ }
46
+ .typing:nth-child(1) {
47
+ animation-delay: 0s;
48
+ }
49
+ .typing:nth-child(2) {
50
+ animation-delay: 0.2s;
51
+ }
52
+ .typing:nth-child(3) {
53
+ animation-delay: 0.4s;
54
+ }
55
+ @keyframes typing {
56
+ 0% { transform: translateY(0); opacity: 0.4; }
57
+ 50% { transform: translateY(-5px); opacity: 1; }
58
+ 100% { transform: translateY(0); opacity: 0.4; }
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="gradient-bg min-h-screen font-sans">
63
+ <div class="container mx-auto px-4 py-8">
64
+ <!-- Header -->
65
+ <header class="text-center mb-12">
66
+ <h1 class="text-5xl font-bold text-white mb-4">STOP-AND-WAIT PROTOCOL</h1>
67
+ <p class="text-xl text-white opacity-90">The OG Reliable Transmission Method 🚀</p>
68
+ <div class="mt-6">
69
+ <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>
70
+ <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>
71
+ <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>
72
+ </div>
73
+ </header>
74
+
75
+ <!-- Main Content -->
76
+ <div class="flex flex-col lg:flex-row gap-8">
77
+ <!-- Theory Section -->
78
+ <div class="lg:w-1/2 bg-white bg-opacity-90 rounded-2xl p-6 shadow-xl">
79
+ <h2 class="text-3xl font-bold text-purple-600 mb-6 flex items-center">
80
+ <i class="fas fa-brain mr-3"></i> The Theory Breakdown
81
+ </h2>
82
+
83
+ <div class="space-y-6">
84
+ <div class="bg-purple-50 p-4 rounded-xl">
85
+ <h3 class="text-xl font-semibold text-purple-700 mb-2">What's the Vibe? 🧐</h3>
86
+ <p class="text-gray-700">
87
+ Stop-and-Wait is like that friend who needs confirmation for EVERY message before sending the next one.
88
+ "Did you get that?" "Yeah?" "Okay, here's the next one." Basic but reliable AF.
89
+ </p>
90
+ </div>
91
+
92
+ <div class="bg-blue-50 p-4 rounded-xl">
93
+ <h3 class="text-xl font-semibold text-blue-700 mb-2">How It Works 🛠️</h3>
94
+ <ul class="list-disc pl-5 space-y-2 text-gray-700">
95
+ <li><span class="font-semibold">Sender:</span> Sends one packet and chills until it gets an ACK (acknowledgement)</li>
96
+ <li><span class="font-semibold">Receiver:</span> Gets the packet, sends back an ACK like "Got it, king 👑"</li>
97
+ <li><span class="font-semibold">Timeout:</span> If sender doesn't get ACK in time, it resends like "You there??"</li>
98
+ </ul>
99
+ </div>
100
+
101
+ <div class="bg-pink-50 p-4 rounded-xl">
102
+ <h3 class="text-xl font-semibold text-pink-700 mb-2">Pros vs Cons ⚖️</h3>
103
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
104
+ <div class="bg-white p-3 rounded-lg shadow">
105
+ <h4 class="font-bold text-green-600 mb-1">Pros 👍</h4>
106
+ <ul class="list-disc pl-5 text-sm text-gray-700">
107
+ <li>Simple AF to implement</li>
108
+ <li>Guaranteed delivery (no packet left behind)</li>
109
+ <li>No congestion (chill transmission pace)</li>
110
+ </ul>
111
+ </div>
112
+ <div class="bg-white p-3 rounded-lg shadow">
113
+ <h4 class="font-bold text-red-600 mb-1">Cons 👎</h4>
114
+ <ul class="list-disc pl-5 text-sm text-gray-700">
115
+ <li>Slow as molasses (only one packet at a time)</li>
116
+ <li>Inefficient for long-distance (high latency = lots of waiting)</li>
117
+ <li>ACK could get lost too (double trouble)</li>
118
+ </ul>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="bg-yellow-50 p-4 rounded-xl">
124
+ <h3 class="text-xl font-semibold text-yellow-700 mb-2">Real-World Tea ☕</h3>
125
+ <p class="text-gray-700">
126
+ Used in basic communication systems, some IoT devices, and anywhere you need
127
+ reliability over speed. Like texting your crush - you wait for a reply before
128
+ double-texting, right? (Unless you're desperate 😅)
129
+ </p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Simulation Section -->
135
+ <div class="lg:w-1/2">
136
+ <div class="bg-white bg-opacity-90 rounded-2xl p-6 shadow-xl mb-6">
137
+ <h2 class="text-3xl font-bold text-blue-600 mb-6 flex items-center">
138
+ <i class="fas fa-play-circle mr-3"></i> Live Simulation
139
+ </h2>
140
+
141
+ <div class="flex justify-between items-center mb-6">
142
+ <div class="text-center">
143
+ <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-2">
144
+ <i class="fas fa-paper-plane text-white text-2xl"></i>
145
+ </div>
146
+ <p class="font-semibold">Sender</p>
147
+ </div>
148
+ <div class="flex-1 h-1 bg-gray-300 mx-4 relative">
149
+ <div id="connection-line" class="h-full bg-blue-500 transition-all duration-1000 ease-linear" style="width: 0%"></div>
150
+ </div>
151
+ <div class="text-center">
152
+ <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-2">
153
+ <i class="fas fa-inbox text-white text-2xl"></i>
154
+ </div>
155
+ <p class="font-semibold">Receiver</p>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="space-y-4" id="simulation-area">
160
+ <!-- Messages will appear here -->
161
+ </div>
162
+
163
+ <div class="mt-8 flex flex-wrap gap-3 justify-center">
164
+ <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">
165
+ <i class="fas fa-play mr-2"></i> Start Simulation
166
+ </button>
167
+ <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">
168
+ <i class="fas fa-step-forward mr-2"></i> Step-by-Step
169
+ </button>
170
+ <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">
171
+ <i class="fas fa-redo mr-2"></i> Reset
172
+ </button>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Stats Panel -->
177
+ <div class="bg-white bg-opacity-90 rounded-2xl p-6 shadow-xl">
178
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
179
+ <i class="fas fa-chart-bar mr-2"></i> Simulation Stats
180
+ </h3>
181
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
182
+ <div class="bg-indigo-50 p-3 rounded-lg">
183
+ <p class="text-sm text-indigo-600 font-semibold">Packets Sent</p>
184
+ <p id="sent-count" class="text-2xl font-bold">0</p>
185
+ </div>
186
+ <div class="bg-green-50 p-3 rounded-lg">
187
+ <p class="text-sm text-green-600 font-semibold">ACKs Received</p>
188
+ <p id="ack-count" class="text-2xl font-bold">0</p>
189
+ </div>
190
+ <div class="bg-yellow-50 p-3 rounded-lg">
191
+ <p class="text-sm text-yellow-600 font-semibold">Timeouts</p>
192
+ <p id="timeout-count" class="text-2xl font-bold">0</p>
193
+ </div>
194
+ <div class="bg-red-50 p-3 rounded-lg">
195
+ <p class="text-sm text-red-600 font-semibold">Packet Loss</p>
196
+ <p id="loss-count" class="text-2xl font-bold">0</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- FAQ Section -->
204
+ <div class="mt-16 bg-white bg-opacity-90 rounded-2xl p-6 shadow-xl">
205
+ <h2 class="text-3xl font-bold text-orange-600 mb-6 flex items-center">
206
+ <i class="fas fa-question-circle mr-3"></i> FAQs - For the Curious Minds
207
+ </h2>
208
+
209
+ <div class="space-y-4">
210
+ <div class="border-b border-gray-200 pb-4">
211
+ <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800">
212
+ <span>Why not just send all packets at once? 🤔</span>
213
+ <i class="fas fa-chevron-down transition-transform"></i>
214
+ </button>
215
+ <div class="faq-answer mt-2 text-gray-700 hidden">
216
+ <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>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="border-b border-gray-200 pb-4">
221
+ <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800">
222
+ <span>What happens if the ACK gets lost? 😱</span>
223
+ <i class="fas fa-chevron-down transition-transform"></i>
224
+ </button>
225
+ <div class="faq-answer mt-2 text-gray-700 hidden">
226
+ <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>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="border-b border-gray-200 pb-4">
231
+ <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800">
232
+ <span>Is this still used today? 🕰️</span>
233
+ <i class="fas fa-chevron-down transition-transform"></i>
234
+ </button>
235
+ <div class="faq-answer mt-2 text-gray-700 hidden">
236
+ <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>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="border-b border-gray-200 pb-4">
241
+ <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800">
242
+ <span>How does this compare to other protocols? 🔄</span>
243
+ <i class="fas fa-chevron-down transition-transform"></i>
244
+ </button>
245
+ <div class="faq-answer mt-2 text-gray-700 hidden">
246
+ <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>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Footer -->
253
+ <footer class="mt-12 text-center text-white text-opacity-80">
254
+ <p>Made with <i class="fas fa-heart text-red-400"></i> for network protocol enthusiasts</p>
255
+ <p class="mt-2 text-sm">PS: This is way more fun than your textbook explanation, right? 😉</p>
256
+ </footer>
257
+ </div>
258
+
259
+ <script>
260
+ document.addEventListener('DOMContentLoaded', function() {
261
+ // Simulation variables
262
+ let sequenceNumber = 0;
263
+ let sentCount = 0;
264
+ let ackCount = 0;
265
+ let timeoutCount = 0;
266
+ let lossCount = 0;
267
+ let simulationInterval;
268
+ let isSimulating = false;
269
+
270
+ // DOM elements
271
+ const simulationArea = document.getElementById('simulation-area');
272
+ const startBtn = document.getElementById('start-btn');
273
+ const stepBtn = document.getElementById('step-btn');
274
+ const resetBtn = document.getElementById('reset-btn');
275
+ const connectionLine = document.getElementById('connection-line');
276
+ const sentCountEl = document.getElementById('sent-count');
277
+ const ackCountEl = document.getElementById('ack-count');
278
+ const timeoutCountEl = document.getElementById('timeout-count');
279
+ const lossCountEl = document.getElementById('loss-count');
280
+
281
+ // FAQ functionality
282
+ const faqBtns = document.querySelectorAll('.faq-btn');
283
+ faqBtns.forEach(btn => {
284
+ btn.addEventListener('click', function() {
285
+ const answer = this.nextElementSibling;
286
+ const icon = this.querySelector('i');
287
+
288
+ answer.classList.toggle('hidden');
289
+ icon.classList.toggle('rotate-180');
290
+ });
291
+ });
292
+
293
+ // Simulation functions
294
+ function sendPacket() {
295
+ sequenceNumber++;
296
+ sentCount++;
297
+ sentCountEl.textContent = sentCount;
298
+
299
+ // Create packet element
300
+ const packet = document.createElement('div');
301
+ packet.className = 'message-box bg-blue-100 border-l-4 border-blue-500 p-4 rounded-lg';
302
+ packet.innerHTML = `
303
+ <div class="flex justify-between items-center">
304
+ <div>
305
+ <span class="font-bold text-blue-700">Packet #${sequenceNumber}</span>
306
+ <span class="text-xs text-gray-500 ml-2">Seq: ${sequenceNumber % 2}</span>
307
+ </div>
308
+ <div class="text-xs text-gray-500">
309
+ ${new Date().toLocaleTimeString()}
310
+ </div>
311
+ </div>
312
+ <div class="mt-2 text-sm text-gray-700">
313
+ Data: "Hello world ${sequenceNumber}"
314
+ </div>
315
+ `;
316
+ packet.id = `packet-${sequenceNumber}`;
317
+ simulationArea.appendChild(packet);
318
+
319
+ // Animate connection line
320
+ connectionLine.style.width = '100%';
321
+ connectionLine.style.transitionDuration = '1s';
322
+
323
+ // Randomly decide if packet will be lost (20% chance)
324
+ const isLost = Math.random() < 0.2;
325
+
326
+ if (isLost) {
327
+ lossCount++;
328
+ lossCountEl.textContent = lossCount;
329
+
330
+ setTimeout(() => {
331
+ packet.classList.add('bg-red-100', 'border-red-500');
332
+ packet.innerHTML += `
333
+ <div class="mt-2 text-sm text-red-600 font-semibold">
334
+ <i class="fas fa-times-circle mr-1"></i> Packet lost in transmission!
335
+ </div>
336
+ `;
337
+
338
+ // Timeout after 3 seconds
339
+ setTimeout(() => {
340
+ packet.innerHTML += `
341
+ <div class="mt-2 text-sm text-yellow-700 font-semibold">
342
+ <i class="fas fa-clock mr-1"></i> Timeout! Resending packet...
343
+ </div>
344
+ `;
345
+ timeoutCount++;
346
+ timeoutCountEl.textContent = timeoutCount;
347
+
348
+ // Resend the packet
349
+ setTimeout(sendPacket, 1000);
350
+ }, 3000);
351
+ }, 1000);
352
+ } else {
353
+ // Packet arrived successfully
354
+ setTimeout(() => {
355
+ packet.classList.add('bg-green-100', 'border-green-500');
356
+ packet.innerHTML += `
357
+ <div class="mt-2 text-sm text-green-600 font-semibold">
358
+ <i class="fas fa-check-circle mr-1"></i> Packet delivered successfully!
359
+ </div>
360
+ `;
361
+
362
+ // Send ACK back
363
+ setTimeout(sendAck, 1000);
364
+ }, 1000);
365
+ }
366
+ }
367
+
368
+ function sendAck() {
369
+ ackCount++;
370
+ ackCountEl.textContent = ackCount;
371
+
372
+ // Create ACK element
373
+ const ack = document.createElement('div');
374
+ ack.className = 'message-box bg-purple-100 border-l-4 border-purple-500 p-4 rounded-lg ml-12';
375
+ ack.innerHTML = `
376
+ <div class="flex justify-between items-center">
377
+ <div>
378
+ <span class="font-bold text-purple-700">ACK #${sequenceNumber}</span>
379
+ <span class="text-xs text-gray-500 ml-2">For Seq: ${sequenceNumber % 2}</span>
380
+ </div>
381
+ <div class="text-xs text-gray-500">
382
+ ${new Date().toLocaleTimeString()}
383
+ </div>
384
+ </div>
385
+ <div class="mt-2 text-sm text-gray-700">
386
+ Message: "Got it! Send next packet when ready"
387
+ </div>
388
+ `;
389
+ ack.id = `ack-${sequenceNumber}`;
390
+ simulationArea.appendChild(ack);
391
+
392
+ // Animate connection line back
393
+ connectionLine.style.width = '0%';
394
+ connectionLine.style.transitionDuration = '1s';
395
+
396
+ // Randomly decide if ACK will be lost (15% chance)
397
+ const isLost = Math.random() < 0.15;
398
+
399
+ if (isLost) {
400
+ lossCount++;
401
+ lossCountEl.textContent = lossCount;
402
+
403
+ setTimeout(() => {
404
+ ack.classList.add('bg-red-100', 'border-red-500');
405
+ ack.innerHTML += `
406
+ <div class="mt-2 text-sm text-red-600 font-semibold">
407
+ <i class="fas fa-times-circle mr-1"></i> ACK lost in transmission!
408
+ </div>
409
+ `;
410
+
411
+ // Timeout after 3 seconds
412
+ setTimeout(() => {
413
+ ack.innerHTML += `
414
+ <div class="mt-2 text-sm text-yellow-700 font-semibold">
415
+ <i class="fas fa-clock mr-1"></i> Timeout! Resending packet...
416
+ </div>
417
+ `;
418
+ timeoutCount++;
419
+ timeoutCountEl.textContent = timeoutCount;
420
+
421
+ // Resend the packet
422
+ setTimeout(sendPacket, 1000);
423
+ }, 3000);
424
+ }, 1000);
425
+ } else {
426
+ // ACK arrived successfully
427
+ setTimeout(() => {
428
+ ack.classList.add('bg-green-100', 'border-green-500');
429
+ ack.innerHTML += `
430
+ <div class="mt-2 text-sm text-green-600 font-semibold">
431
+ <i class="fas fa-check-circle mr-1"></i> ACK received successfully!
432
+ </div>
433
+ `;
434
+
435
+ if (isSimulating) {
436
+ // Continue simulation
437
+ setTimeout(sendPacket, 1000);
438
+ }
439
+ }, 1000);
440
+ }
441
+ }
442
+
443
+ // Event listeners
444
+ startBtn.addEventListener('click', function() {
445
+ if (!isSimulating) {
446
+ isSimulating = true;
447
+ startBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
448
+ startBtn.classList.remove('bg-green-500');
449
+ startBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
450
+ sendPacket();
451
+ } else {
452
+ isSimulating = false;
453
+ startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Continue';
454
+ startBtn.classList.remove('bg-yellow-500');
455
+ startBtn.classList.add('bg-green-500', 'hover:bg-green-600');
456
+ }
457
+ });
458
+
459
+ stepBtn.addEventListener('click', function() {
460
+ if (!isSimulating) {
461
+ sendPacket();
462
+ }
463
+ });
464
+
465
+ resetBtn.addEventListener('click', function() {
466
+ // Reset variables
467
+ sequenceNumber = 0;
468
+ sentCount = 0;
469
+ ackCount = 0;
470
+ timeoutCount = 0;
471
+ lossCount = 0;
472
+ isSimulating = false;
473
+
474
+ // Reset UI
475
+ simulationArea.innerHTML = '';
476
+ connectionLine.style.width = '0%';
477
+ sentCountEl.textContent = '0';
478
+ ackCountEl.textContent = '0';
479
+ timeoutCountEl.textContent = '0';
480
+ lossCountEl.textContent = '0';
481
+
482
+ startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Simulation';
483
+ startBtn.classList.remove('bg-yellow-500');
484
+ startBtn.classList.add('bg-green-500', 'hover:bg-green-600');
485
+ });
486
+ });
487
+ </script>
488
+ </body>
489
+ </html>