Packet Header Visualizer
.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;
}
}
Визуализатор на заглавката на пакета
Визуализирайте въздействието на мрежовото капсулиране върху вашия полезен товар. Създайте персонализиран стек на заглавки, за да видите как MTU се консумира от служебните разходи на протокола. Поддържа вложени тунели (VXLAN във VXLAN, GRE в IPsec и т.н.).
Конфигурация на рамката
Бързи предварителни настройки
Създател на заглавен стек
Бързо добавяне:
Щракнете върху „Добавяне“ или използвайте предварително зададени настройки, за да създадете стека си със заглавки
Заглавки:0
Общи разходи:0байтове
Относно визуализацията на заглавката на пакета
Разбирането как заглавките на протоколите консумират вашия MTU е от решаващо значение за оптимизиране на производителността на мрежата. Всеки слой на капсулиране добавя допълнителни разходи, които намаляват наличното пространство за действителните данни на приложението (полезен товар).
Защо това има значение?
- Фрагментация:Ако вашият пакет надвишава MTU на пътя, той ще бъде фрагментиран (IPv4) или изпуснат (IPv6), причинявайки повторно предаване и забавяне
- Пропускателна способност:Повече режийни разходи означава по-малко полезен товар на пакет, намалявайки ефективната пропускателна способност
- Настройка на MSS:Максималният размер на сегмента на TCP трябва да отчита цялото капсулиране, за да се избегне фрагментацията
- Вложени тунели:Технологии като VXLAN, GRE и IPsec могат да бъдат подредени, което значително увеличава разходите
Справка за размера на заглавката:
- Ethernet II:14 байта (Dst MAC 6 + Src MAC 6 + EtherType 2)
- 802.1Q VLAN:4 байта на етикет
- MPLS:4 байта на етикет
- IPv4:20 байта (минимум, до 60 с опции)
- IPv6:40 байта (фиксиран базов хедър)
- TCP:20 байта (минимум, до 60 с опции)
- UDP:8 байта
- VXLAN/GENEVE:8 байта (само заглавка на тунела)
- GRE:4 байта основни, 8 байта с ключ
- IPsec ESP:~50 байта типично (варира според шифъра)