.. заглавие: Визуализатор на заглавката на пакета
.. slug: визуализатор на пакети
.. дата: 2026-01-23 12:00:00 UTC
.. тагове: работа в мрежа, калкулатор, инструмент, пакет, капсулиране, mtu, mss
.. категория:
.. връзка:
.. описание: Визуализирайте заглавките на мрежовите пакети и капсулирането, за да разберете въздействието на полезния товар
.. тип: текст
<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, GRE в IPsec и т.н.).</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">Общи MTU:</label>
<select id="mtuPreset" onchange="applyMtuPreset()">
<option value="">По поръчка</option>
<option selected="" value="1500">Ethernet (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">Jumbo Max (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">Тунел GRE</button>
<button class="preset-btn" onclick="applyPreset('double-vxlan')" type="button">Двоен VXLAN</button>
<button class="preset-btn" onclick="applyPreset('vxlan-gre')" type="button">VXLAN в GRE</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">Ethernet II (14 байта)</option>
<option value="vlan">802.1Q VLAN етикет (4 байта)</option>
<option value="qinq">Q-in-Q Double 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">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">Header Overhead</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">Полезен товар / MTU</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>Препоръка на MSS</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>Максималният размер на сегмента на TCP трябва да отчита цялото капсулиране, за да се избегне фрагментацията</li>
<li><strong>Вложени тунели:</strong>Технологии като VXLAN, GRE и IPsec могат да бъдат подредени, което значително увеличава разходите</li>
</ul>
<p><strong>Справка за размера на заглавката:</strong></p>
<ul>
<li><strong>Ethernet 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>