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;
}
}
Vizualizator glave paketa
Vizualizirajte vpliv enkapsulacije omrežja na vašo obremenitev. Zgradite sklad glav po meri, da vidite, kako obremenitev protokola porabi MTU. Podpira ugnezdene tunele (VXLAN znotraj VXLAN, GRE znotraj IPsec itd.).
Konfiguracija okvirja
Hitre prednastavitve
Graditelj sklada glave
Hitro dodajanje:
Kliknite »Dodaj« ali uporabite prednastavitve, da ustvarite svoj sklad glav
Glave:0
Skupni režijski stroški:0bajtov
O vizualizaciji glave paketa
Razumevanje, kako glave protokola porabljajo vaš MTU, je ključnega pomena za optimizacijo delovanja omrežja. Vsaka plast enkapsulacije doda dodatne stroške, ki zmanjšajo razpoložljivi prostor za dejanske podatke aplikacije (tovor).
Zakaj je to pomembno?
- Razdrobljenost:Če vaš paket preseže pot MTU, bo razdrobljen (IPv4) ali izpuščen (IPv6), kar bo povzročilo ponovne prenose in zakasnitev
- Prepustnost:Več režijskih stroškov pomeni manj koristne obremenitve na paket, kar zmanjša učinkovito prepustnost
- MSS Tuning:TCP-jeva največja velikost segmenta mora upoštevati vso enkapsulacijo, da se izognemo razdrobljenosti
- Ugnezdeni tuneli:Tehnologije, kot so VXLAN, GRE in IPsec, je mogoče združiti, kar znatno poveča stroške
Referenca velikosti glave:
- Ethernet II:14 bajtov (Dst MAC 6 + Src MAC 6 + EtherType 2)
- 802.1Q VLAN:4 bajti na oznako
- MPLS:4 bajte na oznako
- IPv4:20 bajtov (najmanj, do 60 z možnostmi)
- IPv6:40 bajtov (fiksna osnovna glava)
- TCP:20 bajtov (najmanj, do 60 z možnostmi)
- UDP:8 bajtov
- VXLAN/GENEVE:8 bajtov (samo glava tunela)
- GRE:4 bajti osnovni, 8 bajti s ključem
- IPsec ESP:~50 bajtov tipično (odvisno od šifre)