.. عنوان: Packet Header Visualizer
.. slug: packet-visualizer
.. تاریخ: 2026-01-23 12:00:00 UTC
.. ٹیگز: نیٹ ورکنگ، کیلکولیٹر، ٹول، پیکٹ، انکیپسولیشن، ایم ٹی یو، ایم ایس ایس
زمرہ:
.. لنک:
.. تفصیل: پے لوڈ کے اثرات کو سمجھنے کے لیے نیٹ ورک پیکٹ ہیڈر اور انکیپسولیشن اوور ہیڈ کو تصور کریں
.. قسم: متن
<style>
    .packet-viz-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
    }

    .calc-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .calc-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .calc-header p {
        margin: 10px 0 20px 0;
        opacity: 0.95;
        font-size: 15px;
        line-height: 1.6;
    }

    .config-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .config-panel {
        background: rgba(255,255,255,0.1);
        padding: 15px;
        border-radius: 8px;
    }

    .config-panel h4 {
        margin: 0 0 12px 0;
        color: white;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .input-row {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
    }

    .input-group {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .input-group label {
        font-weight: bold;
        color: white;
        margin-bottom: 6px;
        font-size: 13px;
    }

    .input-group input,
    .input-group select {
        padding: 10px 12px;
        font-size: 14px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s ease;
    }

    .input-group input:focus,
    .input-group select:focus {
        outline: none;
        border-color: #4CAF50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
    }

    /* Stack Builder Styles */
    .stack-builder {
        margin-top: 15px;
    }

    .add-header-row {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
    }

    .add-header-row select {
        flex: 1;
        padding: 10px 12px;
        font-size: 14px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
    }

    .add-btn {
        padding: 10px 20px;
        font-size: 14px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .add-btn:hover {
        background: #45a049;
        transform: translateY(-1px);
    }

    .tunnel-shortcuts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 15px;
    }

    .tunnel-shortcut-btn {
        padding: 6px 12px;
        font-size: 11px;
        background: rgba(255,255,255,0.2);
        color: white;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 15px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .tunnel-shortcut-btn:hover {
        background: rgba(255,255,255,0.3);
    }

    .header-stack {
        background: rgba(0,0,0,0.2);
        border-radius: 8px;
        padding: 10px;
        min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
    }

    .stack-empty {
        color: rgba(255,255,255,0.5);
        text-align: center;
        padding: 40px;
        font-style: italic;
    }

    .stack-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 6px;
        background: rgba(255,255,255,0.95);
        border-radius: 6px;
        transition: all 0.2s ease;
        cursor: grab;
    }

    .stack-item:hover {
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .stack-item.dragging {
        opacity: 0.5;
        cursor: grabbing;
    }

    .stack-item .item-number {
        width: 24px;
        height: 24px;
        background: #667eea;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        flex-shrink: 0;
    }

    .stack-item .item-color {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        flex-shrink: 0;
    }

    .stack-item .item-name {
        flex: 1;
        font-weight: 500;
        color: #333;
    }

    .stack-item .item-layer {
        font-size: 11px;
        padding: 2px 8px;
        background: #e0e0e0;
        border-radius: 10px;
        color: #666;
    }

    .stack-item .item-size {
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #666;
        min-width: 45px;
        text-align: right;
    }

    .stack-item .item-delete {
        width: 24px;
        height: 24px;
        background: #f44336;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .stack-item .item-delete:hover {
        background: #d32f2f;
        transform: scale(1.1);
    }

    .stack-summary {
        margin-top: 10px;
        padding: 10px;
        background: rgba(255,255,255,0.1);
        border-radius: 6px;
        font-size: 13px;
        color: white;
    }

    .stack-summary span {
        margin-right: 20px;
    }

    .stack-summary strong {
        color: #4CAF50;
    }

    .preset-section {
        margin-top: 15px;
    }

    .preset-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .preset-btn {
        padding: 8px 14px;
        font-size: 12px;
        background: rgba(255,255,255,0.2);
        color: white;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .preset-btn:hover {
        background: rgba(255,255,255,0.3);
        transform: translateY(-1px);
    }

    .preset-btn.active {
        background: #4CAF50;
        border-color: #4CAF50;
    }

    .calc-button {
        padding: 14px 35px;
        font-size: 16px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        width: 100%;
        margin-top: 20px;
    }

    .calc-button:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    /* Results Section */
    .results-section {
        margin-top: 30px;
    }

    .summary-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .summary-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        border-top: 4px solid #4CAF50;
        transition: all 0.3s ease;
    }

    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .summary-card.warning {
        border-top-color: #ff9800;
    }

    .summary-card.danger {
        border-top-color: #f44336;
    }

    .summary-card .card-label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    .summary-card .card-value {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        font-family: 'Courier New', monospace;
    }

    .summary-card .card-unit {
        font-size: 14px;
        color: #666;
        margin-left: 4px;
    }

    .summary-card .card-subtext {
        font-size: 11px;
        color: #888;
        margin-top: 5px;
    }

    .visualization-panel {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        margin-bottom: 20px;
    }

    .panel-header {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        padding: 15px 20px;
        font-weight: bold;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .panel-content {
        padding: 20px;
        background: #fafafa;
    }

    .byte-grid-container {
        overflow-x: auto;
        padding: 10px 0;
    }

    #byteGrid {
        display: block;
        margin: 0 auto;
    }

    .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 15px;
        padding: 15px;
        background: white;
        border-radius: 6px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
    }

    .legend-color {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border: 1px solid rgba(0,0,0,0.1);
    }

    .header-breakdown {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .breakdown-table {
        width: 100%;
        border-collapse: collapse;
    }

    .breakdown-table th,
    .breakdown-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
    }

    .breakdown-table th {
        background: #f5f5f5;
        font-weight: bold;
        color: #555;
        font-size: 13px;
        text-transform: uppercase;
    }

    .breakdown-table tr:last-child td {
        border-bottom: none;
    }

    .breakdown-table tr:hover td {
        background: #f9f9f9;
    }

    .breakdown-table .layer-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: bold;
        color: white;
    }

    .layer-l2 { background: #2196F3; }
    .layer-l25 { background: #00BCD4; }
    .layer-l3 { background: #4CAF50; }
    .layer-l4 { background: #FF9800; }
    .layer-tunnel { background: #9C27B0; }
    .layer-payload { background: #607D8B; }

    .byte-range {
        font-family: 'Courier New', monospace;
        font-size: 12px;
        color: #666;
    }

    .warnings-panel {
        background: #fff3e0;
        border: 1px solid #ff9800;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .warnings-panel h4 {
        margin: 0 0 10px 0;
        color: #e65100;
        font-size: 14px;
    }

    .warning-item {
        padding: 8px 12px;
        background: rgba(255, 152, 0, 0.1);
        border-radius: 4px;
        margin-bottom: 8px;
        font-size: 13px;
        color: #e65100;
    }

    .warning-item:last-child {
        margin-bottom: 0;
    }

    .mss-recommendation {
        background: #e3f2fd;
        border: 1px solid #2196F3;
        border-radius: 8px;
        padding: 15px 20px;
        margin-top: 20px;
    }

    .mss-recommendation h4 {
        margin: 0 0 10px 0;
        color: #1565c0;
        font-size: 14px;
    }

    .mss-recommendation p {
        margin: 0;
        color: #0d47a1;
        font-size: 14px;
        line-height: 1.6;
    }

    .mss-recommendation code {
        background: rgba(33, 150, 243, 0.1);
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
    }

    .description-section {
        margin-top: 30px;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        border-top: 3px solid #4CAF50;
    }

    .description-section h3 {
        color: #4CAF50;
        margin-top: 0;
    }

    .description-section p {
        line-height: 1.6;
        color: #555;
        margin-bottom: 15px;
    }

    .description-section ul {
        line-height: 1.8;
        color: #555;
    }

    .tooltip {
        position: absolute;
        background: rgba(0,0,0,0.9);
        color: white;
        padding: 10px 14px;
        border-radius: 6px;
        font-size: 12px;
        pointer-events: none;
        z-index: 1000;
        max-width: 250px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .tooltip .tooltip-header {
        font-weight: bold;
        margin-bottom: 5px;
        color: #4CAF50;
    }

    .tooltip .tooltip-detail {
        color: #ccc;
        font-family: 'Courier New', monospace;
    }

    @media (max-width: 900px) {
        .config-grid {
            grid-template-columns: 1fr;
        }

        .summary-cards {
            grid-template-columns: 1fr 1fr;
        }

        .input-row {
            flex-direction: column;
        }
    }
</style>
<div class="packet-viz-container">
<div class="calc-header">
<h2>پیکٹ ہیڈر ویژولائزر</h2>
<p>اپنے پے لوڈ پر نیٹ ورک انکیپسولیشن کے اثرات کا تصور کریں۔ یہ دیکھنے کے لیے ایک حسب ضرورت ہیڈر اسٹیک بنائیں کہ پروٹوکول اوور ہیڈ کے ذریعے MTU کو کس طرح استعمال کیا جاتا ہے۔ گھریلو سرنگوں کی حمایت کرتا ہے (VXLAN کے اندر VXLAN، IPsec کے اندر GRE وغیرہ)۔</p>
<div class="config-grid">
<div class="config-panel">
<h4>فریم کنفیگریشن</h4>
<div class="input-row">
<div class="input-group">
<label for="mtuInput">MTU (بائٹس):</label>
<input id="mtuInput" max="65535" min="576" step="1" type="number" value="1500"/>
</div>
<div class="input-group">
<label for="mtuPreset">عام MTUs:</label>
<select id="mtuPreset" onchange="applyMtuPreset()">
<option value="">حسب ضرورت</option>
<option selected="" value="1500">ایتھرنیٹ (1500)</option>
<option value="1492">PPPoE (1492)</option>
<option value="1480">GRE ٹنل (1480)</option>
<option value="1450">VXLAN (1450)</option>
<option value="1400">IPsec (1400)</option>
<option value="9000">جمبو فریم (9000)</option>
<option value="9216">جمبو میکس (9216)</option>
</select>
</div>
</div>
<div class="preset-section">
<h4>فوری پیش سیٹ</h4>
<div class="preset-buttons">
<button class="preset-btn" onclick="applyPreset('standard')" type="button">معیاری TCP/IP</button>
<button class="preset-btn" onclick="applyPreset('vxlan')" type="button">VXLAN اوورلے</button>
<button class="preset-btn" onclick="applyPreset('ipsec')" type="button">IPsec VPN</button>
<button class="preset-btn" onclick="applyPreset('gre')" type="button">جی آر ای ٹنل</button>
<button class="preset-btn" onclick="applyPreset('double-vxlan')" type="button">ڈبل VXLAN</button>
<button class="preset-btn" onclick="applyPreset('vxlan-gre')" type="button">GRE میں VXLAN</button>
<button class="preset-btn" onclick="applyPreset('clear')" type="button">تمام صاف کریں۔</button>
</div>
</div>
</div>
<div class="config-panel">
<h4>ہیڈر اسٹیک بلڈر</h4>
<div class="stack-builder">
<div class="add-header-row">
<select id="headerSelect">
<optgroup label="Layer 2 - Data Link">
<option value="ethernet">ایتھرنیٹ II (14 بائٹس)</option>
<option value="vlan">802.1Q VLAN ٹیگ (4 بائٹس)</option>
<option value="qinq">Q-in-Q ڈبل VLAN (8 بائٹس)</option>
<option value="pppoe">PPPoE (8 بائٹس)</option>
</optgroup>
<optgroup label="Layer 2.5 - MPLS">
<option value="mpls">MPLS لیبل (4 بائٹس)</option>
</optgroup>
<optgroup label="Layer 3 - Network">
<option value="ipv4">IPv4 (20 بائٹس)</option>
<option value="ipv6">IPv6 (40 بائٹس)</option>
</optgroup>
<optgroup label="Layer 4 - Transport">
<option value="tcp">TCP (20 بائٹس)</option>
<option value="udp">UDP (8 بائٹس)</option>
</optgroup>
<optgroup label="Tunnel Protocols">
<option value="vxlan">VXLAN (8 بائٹس)</option>
<option value="geneve">GENEVE (8 بائٹس)</option>
<option value="gre">GRE (4 بائٹس)</option>
<option value="gre-key">کلید کے ساتھ GRE (8 بائٹس)</option>
<option value="nvgre">NVGRE (8 بائٹس)</option>
<option value="ipsec">IPsec ESP (~50 بائٹس)</option>
<option value="l2tp">L2TP (8 بائٹس)</option>
<option value="gtp">GTP-U (8 بائٹس)</option>
<option value="wireguard">وائر گارڈ (32 بائٹس)</option>
<option value="erspan">ERSPAN قسم II (8 بائٹس)</option>
</optgroup>
</select>
<button class="add-btn" onclick="addHeader()" type="button">+ شامل کریں۔</button>
</div>
<div class="tunnel-shortcuts">
<span style="color: rgba(255,255,255,0.7); font-size: 11px; margin-right: 5px;">فوری اضافہ:</span>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('vxlan')" type="button">+ VXLAN گروپ</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('geneve')" type="button">+ GENEVE گروپ</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('gre')" type="button">+ GRE گروپ</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('ipsec')" type="button">+ IPsec گروپ</button>
<button class="tunnel-shortcut-btn" onclick="addTunnelGroup('inner-tcp')" type="button">+ اندرونی TCP/IP</button>
</div>
<div class="header-stack" id="headerStack">
<div class="stack-empty">"شامل کریں" پر کلک کریں یا اپنا ہیڈر اسٹیک بنانے کے لیے پیش سیٹ استعمال کریں۔</div>
</div>
<div class="stack-summary" id="stackSummary">
<span>ہیڈرز:<strong id="summaryCount">0</strong></span>
<span>کل اوور ہیڈ:<strong id="summaryOverhead">0</strong>بائٹس</span>
</div>
</div>
</div>
</div>
<button class="calc-button" onclick="visualizePacket()" type="button">پیکٹ کی ساخت کا تصور کریں۔</button>
</div>
<div class="results-section" id="resultsSection" style="display: none;">
<div class="summary-cards" id="summaryCards">
<div class="summary-card" id="cardMtu">
<div class="card-label">کل MTU</div>
<div class="card-value"><span id="valueMtu">1500</span><span class="card-unit">B</span></div>
<div class="card-subtext">فریم کا سائز</div>
</div>
<div class="summary-card" id="cardOverhead">
<div class="card-label">ہیڈر اوور ہیڈ</div>
<div class="card-value"><span id="valueOverhead">54</span><span class="card-unit">B</span></div>
<div class="card-subtext" id="subtextOverhead">تمام ہیڈرز کو ملا کر</div>
</div>
<div class="summary-card" id="cardPayload">
<div class="card-label">دستیاب پے لوڈ</div>
<div class="card-value"><span id="valuePayload">1446</span><span class="card-unit">B</span></div>
<div class="card-subtext">درخواست کے ڈیٹا کے لیے</div>
</div>
<div class="summary-card" id="cardEfficiency">
<div class="card-label">کارکردگی</div>
<div class="card-value"><span id="valueEfficiency">96.4</span><span class="card-unit">%</span></div>
<div class="card-subtext">پے لوڈ / ایم ٹی یو</div>
</div>
<div class="summary-card" id="cardMss">
<div class="card-label">اندرونی TCP MSS</div>
<div class="card-value"><span id="valueMss">1406</span><span class="card-unit">B</span></div>
<div class="card-subtext">تجویز کردہ MSS</div>
</div>
</div>
<div class="warnings-panel" id="warningsPanel" style="display: none;">
<h4>کنفیگریشن وارننگز</h4>
<div id="warningsList"></div>
</div>
<div class="visualization-panel">
<div class="panel-header">
<span>بائٹ لیول ویژولائزیشن</span>
<span id="gridInfo">32 بائٹس فی قطار</span>
</div>
<div class="panel-content">
<div class="byte-grid-container">
<svg id="byteGrid"></svg>
</div>
<div class="legend" id="legend"></div>
</div>
</div>
<div class="header-breakdown">
<div class="panel-header">
<span>ہیڈر کی خرابی</span>
</div>
<table class="breakdown-table">
<thead>
<tr>
<th>#</th>
<th>تہہ</th>
<th>پروٹوکول</th>
<th>سائز</th>
<th>بائٹ رینج</th>
<th>تفصیل</th>
</tr>
</thead>
<tbody id="breakdownBody">
</tbody>
</table>
</div>
<div class="mss-recommendation" id="mssRecommendation">
<h4>ایم ایس ایس کی سفارش</h4>
<p id="mssText"></p>
</div>
</div>
<div class="description-section">
<h3>پیکٹ ہیڈر ویژولائزیشن کے بارے میں</h3>
<p>یہ سمجھنا کہ پروٹوکول ہیڈر آپ کے MTU کو کس طرح استعمال کرتے ہیں نیٹ ورک کی کارکردگی کو بہتر بنانے کے لیے اہم ہے۔ انکیپسولیشن کی ہر پرت اوور ہیڈ کا اضافہ کرتی ہے جو اصل ایپلیکیشن ڈیٹا (پے لوڈ) کے لیے دستیاب جگہ کو کم کرتی ہے۔</p>
<p><strong>اس سے فرق کیوں پڑتا ہے؟</strong></p>
<ul>
<li><strong>ٹکڑے ٹکڑے کرنا:</strong>اگر آپ کا پیکٹ MTU کے راستے سے زیادہ ہے، تو اسے ٹکڑے ٹکڑے کر دیا جائے گا (IPv4) یا گرا دیا جائے گا (IPv6)، جس کی وجہ سے دوبارہ منتقلی اور تاخیر ہو گی۔</li>
<li><strong>تھرو پٹ:</strong>زیادہ اوور ہیڈ کا مطلب ہے فی پیکٹ کم پے لوڈ، موثر تھرو پٹ کو کم کرنا</li>
<li><strong>MSS ٹیوننگ:</strong>ٹی سی پی کا زیادہ سے زیادہ سیگمنٹ سائز تمام انکیپسولیشن کے حساب سے ہونا چاہیے تاکہ ٹکڑے ٹکڑے ہونے سے بچا جا سکے۔</li>
<li><strong>نیسٹڈ ٹنل:</strong>VXLAN، GRE، اور IPsec جیسی ٹیکنالوجیز کو اسٹیک کیا جا سکتا ہے، جس سے اوور ہیڈ کو نمایاں طور پر مرکب کیا جا سکتا ہے۔</li>
</ul>
<p><strong>ہیڈر سائز حوالہ:</strong></p>
<ul>
<li><strong>ایتھرنیٹ II:</strong>14 بائٹس (Dst MAC 6 + Src MAC 6 + EtherType 2)</li>
<li><strong>802.1Q VLAN:</strong>4 بائٹس فی ٹیگ</li>
<li><strong>MPLS:</strong>4 بائٹس فی لیبل</li>
<li><strong>IPv4:</strong>20 بائٹس (کم از کم، اختیارات کے ساتھ 60 تک)</li>
<li><strong>IPv6:</strong>40 بائٹس (فکسڈ بیس ہیڈر)</li>
<li><strong>TCP:</strong>20 بائٹس (کم از کم، اختیارات کے ساتھ 60 تک)</li>
<li><strong>UDP:</strong>8 بائٹس</li>
<li><strong>VXLAN/GENEVE:</strong>8 بائٹس (صرف ٹنل ہیڈر)</li>
<li><strong>GRE:</strong>4 بائٹس بنیادی، کلید کے ساتھ 8 بائٹس</li>
<li><strong>IPsec ESP:</strong>~50 بائٹس عام (سائپر کے لحاظ سے مختلف ہوتی ہے)</li>
</ul>
</div>
</div>
<div class="tooltip" id="tooltip" style="display: none;"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
'use strict';

/**
 * Packet Header Visualizer
 * Supports arbitrary nesting of encapsulation protocols
 */

// Header definitions
const HEADERS = {
    'ethernet': {
        id: 'ethernet',
        name: 'Ethernet II',
        size: 14,
        layer: 2,
        layerName: 'L2',
        color: '#2196F3',
        description: 'Dst MAC (6B) + Src MAC (6B) + EtherType (2B)',
        rfc: 'RFC 894'
    },
    'vlan': {
        id: 'vlan',
        name: '802.1Q VLAN',
        size: 4,
        layer: 2,
        layerName: 'L2',
        color: '#03A9F4',
        description: 'TPID (2B) + TCI (2B)',
        rfc: 'IEEE 802.1Q'
    },
    'qinq': {
        id: 'qinq',
        name: 'Q-in-Q (802.1ad)',
        size: 8,
        layer: 2,
        layerName: 'L2',
        color: '#00BCD4',
        description: 'Outer VLAN (4B) + Inner VLAN (4B)',
        rfc: 'IEEE 802.1ad'
    },
    'mpls': {
        id: 'mpls',
        name: 'MPLS Label',
        size: 4,
        layer: 2.5,
        layerName: 'L2.5',
        color: '#009688',
        description: 'Label (20b) + TC (3b) + S (1b) + TTL (8b)',
        rfc: 'RFC 3031'
    },
    'pppoe': {
        id: 'pppoe',
        name: 'PPPoE',
        size: 8,
        layer: 2,
        layerName: 'L2',
        color: '#00ACC1',
        description: 'PPPoE header (6B) + PPP protocol (2B)',
        rfc: 'RFC 2516'
    },
    'ipv4': {
        id: 'ipv4',
        name: 'IPv4',
        size: 20,
        layer: 3,
        layerName: 'L3',
        color: '#4CAF50',
        description: 'Standard IPv4 header (no options)',
        rfc: 'RFC 791'
    },
    'ipv6': {
        id: 'ipv6',
        name: 'IPv6',
        size: 40,
        layer: 3,
        layerName: 'L3',
        color: '#8BC34A',
        description: 'Fixed-size IPv6 base header',
        rfc: 'RFC 8200'
    },
    'tcp': {
        id: 'tcp',
        name: 'TCP',
        size: 20,
        layer: 4,
        layerName: 'L4',
        color: '#FF9800',
        description: 'Standard TCP header (no options)',
        rfc: 'RFC 9293'
    },
    'udp': {
        id: 'udp',
        name: 'UDP',
        size: 8,
        layer: 4,
        layerName: 'L4',
        color: '#FFC107',
        description: 'Src Port + Dst Port + Length + Checksum',
        rfc: 'RFC 768'
    },
    'vxlan': {
        id: 'vxlan',
        name: 'VXLAN',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#9C27B0',
        description: 'VXLAN header with 24-bit VNI',
        rfc: 'RFC 7348'
    },
    'geneve': {
        id: 'geneve',
        name: 'GENEVE',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#AB47BC',
        description: 'Generic Network Virtualization Encapsulation',
        rfc: 'RFC 8926'
    },
    'gre': {
        id: 'gre',
        name: 'GRE',
        size: 4,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#7B1FA2',
        description: 'Basic GRE header',
        rfc: 'RFC 2784'
    },
    'gre-key': {
        id: 'gre-key',
        name: 'GRE with Key',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#6A1B9A',
        description: 'GRE header with 32-bit key field',
        rfc: 'RFC 2890'
    },
    'nvgre': {
        id: 'nvgre',
        name: 'NVGRE',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#8E24AA',
        description: 'Network Virtualization using GRE',
        rfc: 'RFC 7637'
    },
    'ipsec': {
        id: 'ipsec',
        name: 'IPsec ESP',
        size: 50,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#E91E63',
        description: 'ESP (8B) + IV (16B) + Pad (~10B) + ICV (16B)',
        rfc: 'RFC 4303',
        note: 'Size varies by cipher; ~50B for AES-GCM'
    },
    'l2tp': {
        id: 'l2tp',
        name: 'L2TP',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#F06292',
        description: 'L2TP session header',
        rfc: 'RFC 2661'
    },
    'gtp': {
        id: 'gtp',
        name: 'GTP-U',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#BA68C8',
        description: 'GPRS Tunneling Protocol User Plane',
        rfc: '3GPP TS 29.281'
    },
    'wireguard': {
        id: 'wireguard',
        name: 'WireGuard',
        size: 32,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#CE93D8',
        description: 'WireGuard transport + poly1305 tag (16B)',
        rfc: 'N/A'
    },
    'erspan': {
        id: 'erspan',
        name: 'ERSPAN Type II',
        size: 8,
        layer: 'tunnel',
        layerName: 'Tunnel',
        color: '#D81B60',
        description: 'Encapsulated Remote SPAN',
        rfc: 'N/A (Cisco)'
    }
};

// Preset configurations
const PRESETS = {
    'standard': {
        name: 'Standard TCP/IP',
        headers: ['ethernet', 'ipv4', 'tcp']
    },
    'vxlan': {
        name: 'VXLAN Overlay',
        headers: ['ethernet', 'ipv4', 'udp', 'vxlan', 'ethernet', 'ipv4', 'tcp']
    },
    'ipsec': {
        name: 'IPsec VPN',
        headers: ['ethernet', 'ipv4', 'ipsec', 'ipv4', 'tcp']
    },
    'gre': {
        name: 'GRE Tunnel',
        headers: ['ethernet', 'ipv4', 'gre', 'ipv4', 'tcp']
    },
    'double-vxlan': {
        name: 'Double VXLAN',
        headers: ['ethernet', 'ipv4', 'udp', 'vxlan', 'ethernet', 'ipv4', 'udp', 'vxlan', 'ethernet', 'ipv4', 'tcp']
    },
    'vxlan-gre': {
        name: 'VXLAN in GRE',
        headers: ['ethernet', 'ipv4', 'gre', 'ipv4', 'udp', 'vxlan', 'ethernet', 'ipv4', 'tcp']
    },
    'clear': {
        name: 'Clear All',
        headers: []
    }
};

// Tunnel groups for quick adding
const TUNNEL_GROUPS = {
    'vxlan': ['ipv4', 'udp', 'vxlan', 'ethernet'],
    'geneve': ['ipv4', 'udp', 'geneve', 'ethernet'],
    'gre': ['ipv4', 'gre'],
    'ipsec': ['ipv4', 'ipsec'],
    'inner-tcp': ['ipv4', 'tcp']
};

// Current header stack (array of header objects with unique IDs)
let headerStack = [];
let nextId = 1;

/**
 * Generate unique color variations for repeated headers
 */
function getColorVariation(baseColor, index) {
    // Slightly adjust hue/lightness for repeated headers
    const variation = (index % 5) * 15;
    // Simple approach: adjust opacity or return base
    return baseColor;
}

/**
 * Add a header to the stack
 */
function addHeader(headerId = null) {
    if (!headerId) {
        headerId = document.getElementById('headerSelect').value;
    }

    const headerDef = HEADERS[headerId];
    if (!headerDef) return;

    // Count how many of this type already exist
    const existingCount = headerStack.filter(h => h.id === headerId).length;

    headerStack.push({
        ...headerDef,
        uid: nextId++,
        instanceNum: existingCount + 1
    });

    renderHeaderStack();
    updateStackSummary();

    // Auto-update visualization if already shown
    if (document.getElementById('resultsSection').style.display !== 'none') {
        visualizePacket();
    }
}

/**
 * Add a tunnel group (e.g., IP+UDP+VXLAN+ETH)
 */
function addTunnelGroup(groupName) {
    const group = TUNNEL_GROUPS[groupName];
    if (!group) return;

    group.forEach(headerId => {
        addHeader(headerId);
    });
}

/**
 * Remove a header from the stack
 */
function removeHeader(uid) {
    headerStack = headerStack.filter(h => h.uid !== uid);
    renderHeaderStack();
    updateStackSummary();

    if (document.getElementById('resultsSection').style.display !== 'none') {
        visualizePacket();
    }
}

/**
 * Move a header up in the stack
 */
function moveHeaderUp(uid) {
    const index = headerStack.findIndex(h => h.uid === uid);
    if (index > 0) {
        [headerStack[index - 1], headerStack[index]] = [headerStack[index], headerStack[index - 1]];
        renderHeaderStack();
        if (document.getElementById('resultsSection').style.display !== 'none') {
            visualizePacket();
        }
    }
}

/**
 * Move a header down in the stack
 */
function moveHeaderDown(uid) {
    const index = headerStack.findIndex(h => h.uid === uid);
    if (index < headerStack.length - 1) {
        [headerStack[index], headerStack[index + 1]] = [headerStack[index + 1], headerStack[index]];
        renderHeaderStack();
        if (document.getElementById('resultsSection').style.display !== 'none') {
            visualizePacket();
        }
    }
}

/**
 * Render the header stack UI
 */
function renderHeaderStack() {
    const container = document.getElementById('headerStack');

    if (headerStack.length === 0) {
        container.innerHTML = '<div class="stack-empty">Click "+ Add" or use presets to build your header stack</div>';
        return;
    }

    let html = '';
    headerStack.forEach((header, index) => {
        const instanceLabel = header.instanceNum > 1 ? ` #${header.instanceNum}` : '';
        html += `
            <div class="stack-item" data-uid="${header.uid}">
                <span class="item-number">${index + 1}</span>
                <span class="item-color" style="background: ${header.color}"></span>
                <span class="item-name">${header.name}${instanceLabel}</span>
                <span class="item-layer">${header.layerName}</span>
                <span class="item-size">${header.size}B</span>
                <button type="button" class="item-delete" onclick="removeHeader(${header.uid})" title="Remove">×</button>
            </div>
        `;
    });

    container.innerHTML = html;
}

/**
 * Update the stack summary
 */
function updateStackSummary() {
    const totalOverhead = headerStack.reduce((sum, h) => sum + h.size, 0);
    document.getElementById('summaryCount').textContent = headerStack.length;
    document.getElementById('summaryOverhead').textContent = totalOverhead;
}

/**
 * Apply a preset configuration
 */
function applyPreset(presetName) {
    const preset = PRESETS[presetName];
    if (!preset) return;

    // Clear current stack
    headerStack = [];
    nextId = 1;

    // Add preset headers
    preset.headers.forEach(headerId => {
        const headerDef = HEADERS[headerId];
        if (headerDef) {
            const existingCount = headerStack.filter(h => h.id === headerId).length;
            headerStack.push({
                ...headerDef,
                uid: nextId++,
                instanceNum: existingCount + 1
            });
        }
    });

    renderHeaderStack();
    updateStackSummary();

    // Update preset button styles
    document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));
    if (event && event.target) {
        event.target.classList.add('active');
    }

    // Auto-visualize
    visualizePacket();
}

/**
 * Apply MTU preset
 */
function applyMtuPreset() {
    const preset = document.getElementById('mtuPreset').value;
    if (preset) {
        document.getElementById('mtuInput').value = preset;
        if (document.getElementById('resultsSection').style.display !== 'none') {
            visualizePacket();
        }
    }
}

/**
 * Build the positioned header stack for visualization
 */
function buildPositionedStack() {
    const positioned = [];
    let currentByte = 0;

    headerStack.forEach((header, index) => {
        positioned.push({
            ...header,
            index: index,
            startByte: currentByte,
            endByte: currentByte + header.size - 1
        });
        currentByte += header.size;
    });

    return positioned;
}

/**
 * Validate the header stack and return warnings
 */
function validateStack(stack) {
    const warnings = [];

    if (stack.length === 0) {
        return warnings;
    }

    // Check for common issues
    let lastLayer = 0;
    let hasOuterTransport = false;
    let tunnelDepth = 0;

    for (let i = 0; i < stack.length; i++) {
        const header = stack[i];
        const prevHeader = i > 0 ? stack[i - 1] : null;

        // Track tunnel depth
        if (header.layer === 'tunnel') {
            tunnelDepth++;
        }

        // Check if L4 tunnel protocol has required transport
        const udpTunnels = ['vxlan', 'geneve', 'l2tp', 'gtp', 'wireguard'];
        if (udpTunnels.includes(header.id)) {
            // Look backwards for UDP
            let foundUdp = false;
            for (let j = i - 1; j >= 0; j--) {
                if (stack[j].id === 'udp') {
                    foundUdp = true;
                    break;
                }
                if (stack[j].layer === 'tunnel') break; // Stop at previous tunnel
            }
            if (!foundUdp) {
                warnings.push(`${header.name} typically requires UDP encapsulation`);
            }
        }

        // Check if tunnel has IP before it
        if (header.layer === 'tunnel') {
            let foundIp = false;
            for (let j = i - 1; j >= 0; j--) {
                if (stack[j].id === 'ipv4' || stack[j].id === 'ipv6') {
                    foundIp = true;
                    break;
                }
                if (stack[j].layer === 'tunnel') break;
            }
            if (!foundIp) {
                warnings.push(`${header.name} typically requires an IP header`);
            }
        }
    }

    // Deep nesting warning
    if (tunnelDepth > 3) {
        warnings.push(`Deep nesting detected (${tunnelDepth} tunnel layers). This may cause significant overhead.`);
    }

    return warnings;
}

/**
 * Calculate packet metrics
 */
function calculateMetrics(positionedStack, mtu) {
    const totalOverhead = positionedStack.reduce((sum, h) => sum + h.size, 0);
    const payload = Math.max(0, mtu - totalOverhead);
    const efficiency = mtu > 0 ? (payload / mtu) * 100 : 0;

    // MSS is payload available after all headers
    const mss = payload;

    return {
        mtu,
        overhead: totalOverhead,
        payload,
        efficiency: efficiency.toFixed(1),
        mss
    };
}

/**
 * Render the byte grid visualization with D3
 */
function renderByteGrid(positionedStack, mtu) {
    const svg = d3.select('#byteGrid');
    svg.selectAll('*').remove();

    const cellSize = 16;
    const cellPadding = 2;
    const bytesPerRow = 32;
    const totalCells = Math.min(mtu, 2048); // Cap visualization at 2048 bytes
    const rows = Math.ceil(totalCells / bytesPerRow);

    const width = bytesPerRow * (cellSize + cellPadding) + 60;
    const height = rows * (cellSize + cellPadding) + 40;

    svg.attr('width', width).attr('height', height);

    // Create header lookup map
    const byteToHeader = new Map();
    positionedStack.forEach(header => {
        for (let i = header.startByte; i <= header.endByte && i < totalCells; i++) {
            byteToHeader.set(i, header);
        }
    });

    const totalOverhead = positionedStack.reduce((sum, h) => sum + h.size, 0);

    // Add row labels
    for (let row = 0; row < rows; row++) {
        svg.append('text')
            .attr('x', 5)
            .attr('y', 30 + row * (cellSize + cellPadding) + cellSize / 2 + 4)
            .attr('font-size', '10px')
            .attr('fill', '#666')
            .attr('font-family', 'Courier New, monospace')
            .text(row * bytesPerRow);
    }

    // Create cells
    const tooltip = d3.select('#tooltip');

    for (let i = 0; i < totalCells; i++) {
        const row = Math.floor(i / bytesPerRow);
        const col = i % bytesPerRow;
        const x = 50 + col * (cellSize + cellPadding);
        const y = 20 + row * (cellSize + cellPadding);

        let color, header;
        if (byteToHeader.has(i)) {
            header = byteToHeader.get(i);
            color = header.color;
        } else if (i < mtu) {
            color = '#607D8B';
            header = { name: 'Payload', description: 'Application data', layerName: 'Data' };
        } else {
            color = '#eee';
            header = null;
        }

        const rect = svg.append('rect')
            .attr('x', x)
            .attr('y', y)
            .attr('width', cellSize)
            .attr('height', cellSize)
            .attr('fill', color)
            .attr('rx', 2)
            .attr('stroke', '#fff')
            .attr('stroke-width', 1)
            .style('cursor', header ? 'pointer' : 'default');

        if (header) {
            rect.on('mouseover', function(event) {
                d3.select(this).attr('stroke', '#333').attr('stroke-width', 2);

                const instanceLabel = header.instanceNum > 1 ? ` #${header.instanceNum}` : '';
                let tooltipContent = `<div class="tooltip-header">${header.name}${instanceLabel}</div>`;
                if (header.startByte !== undefined) {
                    tooltipContent += `<div class="tooltip-detail">Bytes ${header.startByte}-${header.endByte} (${header.size}B)</div>`;
                } else {
                    tooltipContent += `<div class="tooltip-detail">Byte ${i}</div>`;
                }
                tooltipContent += `<div style="margin-top: 5px; font-size: 11px;">${header.description || ''}</div>`;
                if (header.rfc) {
                    tooltipContent += `<div style="margin-top: 3px; font-size: 10px; color: #888;">${header.rfc}</div>`;
                }

                tooltip.html(tooltipContent)
                    .style('display', 'block')
                    .style('left', (event.pageX + 10) + 'px')
                    .style('top', (event.pageY - 10) + 'px');
            })
            .on('mouseout', function() {
                d3.select(this).attr('stroke', '#fff').attr('stroke-width', 1);
                tooltip.style('display', 'none');
            })
            .on('mousemove', function(event) {
                tooltip.style('left', (event.pageX + 10) + 'px')
                    .style('top', (event.pageY - 10) + 'px');
            });
        }
    }

    // Update grid info
    const truncated = mtu > 2048 ? ' (truncated)' : '';
    document.getElementById('gridInfo').textContent = `${bytesPerRow} bytes/row | ${totalCells} bytes shown${truncated}`;
}

/**
 * Render the legend
 */
function renderLegend(positionedStack) {
    const legend = document.getElementById('legend');
    const seen = new Map();

    positionedStack.forEach(header => {
        const key = header.id;
        if (!seen.has(key)) {
            seen.set(key, { name: header.name, color: header.color, count: 1 });
        } else {
            seen.get(key).count++;
        }
    });

    let html = '';
    seen.forEach((info, key) => {
        const countLabel = info.count > 1 ? ` (×${info.count})` : '';
        html += `<div class="legend-item">
            <div class="legend-color" style="background: ${info.color}"></div>
            <span>${info.name}${countLabel}</span>
        </div>`;
    });

    // Add payload
    html += `<div class="legend-item">
        <div class="legend-color" style="background: #607D8B"></div>
        <span>Payload</span>
    </div>`;

    legend.innerHTML = html;
}

/**
 * Render the breakdown table
 */
function renderBreakdownTable(positionedStack, payloadSize, mtu) {
    const tbody = document.getElementById('breakdownBody');
    let html = '';

    positionedStack.forEach((header, index) => {
        const layerClass = `layer-${header.layerName.toLowerCase().replace('.', '')}`;
        const instanceLabel = header.instanceNum > 1 ? ` #${header.instanceNum}` : '';
        html += `<tr>
            <td>${index + 1}</td>
            <td><span class="layer-badge ${layerClass}">${header.layerName}</span></td>
            <td><strong>${header.name}${instanceLabel}</strong></td>
            <td>${header.size} bytes</td>
            <td class="byte-range">${header.startByte} - ${header.endByte}</td>
            <td>${header.description || '-'}</td>
        </tr>`;
    });

    // Add payload row
    const payloadStart = positionedStack.length > 0 ? positionedStack[positionedStack.length - 1].endByte + 1 : 0;
    const payloadEnd = Math.min(payloadStart + payloadSize - 1, mtu - 1);
    html += `<tr>
        <td>-</td>
        <td><span class="layer-badge layer-payload">Data</span></td>
        <td><strong>Payload</strong></td>
        <td>${payloadSize} bytes</td>
        <td class="byte-range">${payloadSize > 0 ? `${payloadStart} - ${payloadEnd}` : 'N/A'}</td>
        <td>Available for application data</td>
    </tr>`;

    tbody.innerHTML = html;
}

/**
 * Update summary cards
 */
function updateSummaryCards(metrics) {
    document.getElementById('valueMtu').textContent = metrics.mtu;
    document.getElementById('valueOverhead').textContent = metrics.overhead;
    document.getElementById('valuePayload').textContent = metrics.payload;
    document.getElementById('valueEfficiency').textContent = metrics.efficiency;
    document.getElementById('valueMss').textContent = metrics.mss;

    // Update card styling based on values
    const efficiencyCard = document.getElementById('cardEfficiency');
    const payloadCard = document.getElementById('cardPayload');

    efficiencyCard.className = 'summary-card';
    payloadCard.className = 'summary-card';

    if (parseFloat(metrics.efficiency) < 50) {
        efficiencyCard.classList.add('danger');
    } else if (parseFloat(metrics.efficiency) < 70) {
        efficiencyCard.classList.add('warning');
    }

    if (metrics.payload < 100) {
        payloadCard.classList.add('danger');
    } else if (metrics.payload < 500) {
        payloadCard.classList.add('warning');
    }
}

/**
 * Show warnings
 */
function showWarnings(warnings) {
    const panel = document.getElementById('warningsPanel');
    const list = document.getElementById('warningsList');

    if (warnings.length === 0) {
        panel.style.display = 'none';
        return;
    }

    list.innerHTML = warnings.map(w => `<div class="warning-item">${w}</div>`).join('');
    panel.style.display = 'block';
}

/**
 * Generate MSS recommendation text
 */
function generateMssRecommendation(positionedStack, metrics, mtu) {
    const mssText = document.getElementById('mssText');
    const tunnelCount = positionedStack.filter(h => h.layer === 'tunnel').length;

    let text = '';

    if (metrics.payload <= 0) {
        text = `<strong style="color: #c62828;">Warning:</strong> Your encapsulation overhead (${metrics.overhead} bytes) exceeds the MTU (${mtu} bytes). No payload space is available. Increase MTU or reduce encapsulation.`;
    } else if (tunnelCount > 0) {
        text = `For traffic through this ${tunnelCount}-layer tunnel configuration, configure inner TCP MSS to <code>${metrics.mss}</code> bytes to prevent fragmentation. `;
        text += `Total tunnel overhead: ${metrics.overhead} bytes.`;

        const hasIpv6 = positionedStack.some(h => h.id === 'ipv6');
        if (hasIpv6) {
            text += `<br><br><strong>Note:</strong> IPv6 does not fragment in transit. Ensure PMTUD works or configure MSS clamping.`;
        }

        text += `<br><br><strong>Cisco IOS:</strong> <code>ip tcp adjust-mss ${metrics.mss}</code>`;
        text += `<br><strong>Linux iptables:</strong> <code>iptables -t mangle -A FORWARD -p tcp --tcp-flags SYN,RST SYN -j TCPMSS --set-mss ${metrics.mss}</code>`;
    } else if (positionedStack.length > 0) {
        text = `Standard configuration with ${metrics.overhead} bytes overhead. `;
        text += `Maximum TCP segment payload: <code>${metrics.mss}</code> bytes (${metrics.efficiency}% efficiency).`;
    } else {
        text = `Add headers to your stack to see MSS recommendations.`;
    }

    mssText.innerHTML = text;
}

/**
 * Main visualization function
 */
function visualizePacket() {
    const mtu = parseInt(document.getElementById('mtuInput').value) || 1500;

    // Validate MTU
    if (mtu < 576) {
        alert('MTU must be at least 576 bytes (IPv4 minimum)');
        return;
    }
    if (mtu > 65535) {
        alert('MTU cannot exceed 65535 bytes');
        return;
    }

    // Build positioned stack
    const positionedStack = buildPositionedStack();

    // Validate and get warnings
    const warnings = validateStack(positionedStack);

    // Calculate metrics
    const metrics = calculateMetrics(positionedStack, mtu);

    // Update UI
    updateSummaryCards(metrics);
    showWarnings(warnings);
    renderByteGrid(positionedStack, mtu);
    renderLegend(positionedStack);
    renderBreakdownTable(positionedStack, metrics.payload, mtu);
    generateMssRecommendation(positionedStack, metrics, mtu);

    // Show results
    document.getElementById('resultsSection').style.display = 'block';

    // Scroll to results
    document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

/**
 * Initialize on page load
 */
document.addEventListener('DOMContentLoaded', function() {
    // Add enter key support for MTU input
    document.getElementById('mtuInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            visualizePacket();
        }
    });

    // MTU input change handler
    document.getElementById('mtuInput').addEventListener('change', function() {
        document.getElementById('mtuPreset').value = '';
        if (document.getElementById('resultsSection').style.display !== 'none') {
            visualizePacket();
        }
    });

    // Initialize with standard TCP/IP preset
    applyPreset('standard');

    console.log('Packet Header Visualizer initialized');
});
</script>