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;
}
}
Packet Header Visualizer
Visualisera effekten av nätverksinkapsling på din nyttolast. Bygg en anpassad headerstack för att se hur MTU konsumeras av protokolloverhead. Stöder kapslade tunnlar (VXLAN inuti VXLAN, GRE inuti IPsec, etc.).
Ramkonfiguration
Snabba förinställningar
Header Stack Builder
Snabb tillägg:
Klicka på "Lägg till" eller använd förinställningar för att bygga din header-stack
Rubriker:0
Total omkostnad:0bytes
Om pakethuvudvisualisering
Att förstå hur protokollhuvuden förbrukar din MTU är avgörande för att optimera nätverksprestanda. Varje lager av inkapsling lägger till overhead som minskar det tillgängliga utrymmet för faktisk applikationsdata (nyttolast).
Varför spelar detta roll?
- Splittring:Om ditt paket överskrider sökvägen MTU kommer det att fragmenteras (IPv4) eller släppas (IPv6), vilket orsakar omsändningar och latens
- Genomströmning:Mer overhead innebär mindre nyttolast per paket, vilket minskar effektiv genomströmning
- MSS Tuning:TCP:s maximala segmentstorlek bör ta hänsyn till all inkapsling för att undvika fragmentering
- Kapslade tunnlar:Teknologier som VXLAN, GRE och IPsec kan staplas, vilket förvärrar overhead avsevärt
Rubrikstorleksreferens:
- Ethernet II:14 byte (Dst MAC 6 + Src MAC 6 + EtherType 2)
- 802.1Q VLAN:4 byte per tagg
- MPLS:4 byte per etikett
- IPv4:20 byte (minst, upp till 60 med tillval)
- IPv6:40 byte (fast bashuvud)
- TCP:20 byte (minst, upp till 60 med tillval)
- UDP:8 byte
- VXLAN/GENEVE:8 byte (endast tunnelhuvud)
- GRE:4 byte grundläggande, 8 byte med nyckel
- IPsec ESP:~50 byte typiskt (varierar beroende på chiffer)