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;
}
}
Trình hiển thị tiêu đề gói
Trực quan hóa tác động của việc đóng gói mạng đối với tải trọng của bạn. Xây dựng ngăn xếp tiêu đề tùy chỉnh để xem MTU được sử dụng như thế nào bởi chi phí giao thức. Hỗ trợ các đường hầm lồng nhau (VXLAN bên trong VXLAN, GRE bên trong IPsec, v.v.).
Cấu hình khung
Cài đặt trước nhanh
Trình tạo ngăn xếp tiêu đề
Thêm nhanh:
Nhấp vào "Thêm" hoặc sử dụng các cài đặt trước để xây dựng ngăn xếp tiêu đề của bạn
Tiêu đề:0
Tổng chi phí:0byte
Giới thiệu về Trực quan hóa Tiêu đề Gói
Hiểu cách tiêu đề giao thức tiêu thụ MTU của bạn là rất quan trọng để tối ưu hóa hiệu suất mạng. Mỗi lớp đóng gói sẽ bổ sung thêm chi phí làm giảm không gian khả dụng cho dữ liệu ứng dụng thực tế (tải trọng).
Tại sao điều này lại quan trọng?
- Phân mảnh:Nếu gói của bạn vượt quá MTU đường dẫn, nó sẽ bị phân mảnh (IPv4) hoặc bị rớt (IPv6), gây ra tình trạng truyền lại và độ trễ
- Thông lượng:Nhiều chi phí hơn có nghĩa là tải trọng trên mỗi gói ít hơn, làm giảm thông lượng hiệu quả
- Điều chỉnh MSS:Kích thước phân đoạn tối đa của TCP phải tính đến tất cả việc đóng gói để tránh phân mảnh
- Đường hầm lồng nhau:Các công nghệ như VXLAN, GRE và IPsec có thể được xếp chồng lên nhau, làm tăng chi phí đáng kể
Tham chiếu kích thước tiêu đề:
- Ethernet II:14 byte (Dst MAC 6 + Src MAC 6 + EtherType 2)
- VLAN 802.1Q:4 byte mỗi thẻ
- MPLS:4 byte mỗi nhãn
- IPv4:20 byte (tối thiểu, tối đa 60 với các tùy chọn)
- IPv6:40 byte (tiêu đề cơ sở cố định)
- TCP:20 byte (tối thiểu, tối đa 60 với các tùy chọn)
- UDP:8 byte
- VXLAN/GENEVE:8 byte (chỉ tiêu đề đường hầm)
- GRE:4 byte cơ bản, 8 byte có khóa
- IPsec ESP:~50 byte điển hình (thay đổi tùy theo mật mã)