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;
}
}
Vizualizér hlavičky paketov
Vizualizujte vplyv zapuzdrenia siete na vaše užitočné zaťaženie. Vytvorte si vlastný zásobník hlavičiek, aby ste videli, ako sa MTU spotrebúva réžiou protokolu. Podporuje vnorené tunely (VXLAN vnútri VXLAN, GRE vnútri IPsec atď.).
Konfigurácia rámu
Rýchle predvoľby
Zostavovač záhlavia
Rýchle pridanie:
Kliknite na „Pridať“ alebo použite predvoľby na vytvorenie zásobníka hlavičiek
Hlavičky:0
Celková réžia:0bajtov
O vizualizácii hlavičky paketov
Pochopenie toho, ako hlavičky protokolov spotrebúvajú vašu MTU, je rozhodujúce pre optimalizáciu výkonu siete. Každá vrstva zapuzdrenia pridáva réžiu, ktorá znižuje dostupný priestor pre aktuálne aplikačné dáta (užitočné zaťaženie).
Prečo na tom záleží?
- Fragmentácia:Ak váš paket prekročí MTU cesty, bude fragmentovaný (IPv4) alebo zahodený (IPv6), čo spôsobí opakované prenosy a oneskorenie
- Priepustnosť:Väčšia réžia znamená menšie užitočné zaťaženie na paket, čím sa znižuje efektívna priepustnosť
- Ladenie MSS:Maximálna veľkosť segmentu TCP by mala brať do úvahy celé zapuzdrenie, aby sa predišlo fragmentácii
- Vnorené tunely:Technológie ako VXLAN, GRE a IPsec môžu byť stohované, čo výrazne zvyšuje réžiu
Odkaz na veľkosť hlavičky:
- Ethernet II:14 bajtov (Dst MAC 6 + Src MAC 6 + EtherType 2)
- 802.1Q VLAN:4 bajty na značku
- MPLS:4 bajty na štítok
- IPv4:20 bajtov (minimum, až 60 s možnosťami)
- IPv6:40 bajtov (pevná základná hlavička)
- TCP:20 bajtov (minimum, až 60 s možnosťami)
- UDP:8 bajtov
- VXLAN/GENEVA:8 bajtov (iba hlavička tunela)
- GRE:4 bajty základné, 8 bajtov s kľúčom
- IPsec ESP:Typicky ~50 bajtov (líši sa podľa šifry)