QoS DSCP Calculator & Configuration Generator
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
.calc-container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
}
.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;
}
/* DSCP Converter in Header */
.dscp-converter-compact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
margin-top: 20px;
}
.input-group {
display: flex;
flex-direction: column;
}
.input-group label {
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: rgba(255,255,255,0.95);
}
.input-group input,
.input-group select {
padding: 14px;
font-size: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 6px;
font-family: 'Courier New', monospace;
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.1);
}
.dscp-info {
margin-top: 15px;
padding: 12px;
background: rgba(255,255,255,0.15);
border-radius: 6px;
font-size: 14px;
}
.dscp-info strong {
color: white;
}
/* Quick Reference Table */
.quick-reference {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 8px;
margin-top: 15px;
}
.dscp-chip {
background: rgba(255,255,255,0.15);
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
border: 2px solid transparent;
color: inherit;
font-family: inherit;
width: 100%;
}
.dscp-chip:hover {
background: rgba(255,255,255,0.25);
border-color: rgba(255,255,255,0.4);
}
.dscp-chip:focus {
outline: none;
background: rgba(255,255,255,0.3);
border-color: #4CAF50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}
.dscp-chip:active {
transform: scale(0.98);
}
.dscp-chip .name {
font-weight: bold;
font-size: 13px;
}
.dscp-chip .value {
font-size: 11px;
opacity: 0.9;
margin-top: 2px;
}
/* Section Tabs */
.tabs {
display: none; /* Hidden by default, shown after pathway selection */
background: rgba(255,255,255,0.1);
border-radius: 8px;
margin-top: 20px;
overflow: hidden;
}
.tabs.show {
display: flex;
}
.tab {
flex: 1;
padding: 12px 20px;
text-align: center;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
color: rgba(255,255,255,0.8);
border: none;
background: transparent;
}
.tab:hover {
background: rgba(255,255,255,0.15);
color: white;
}
.tab.active {
background: white;
color: #667eea;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Sections */
.section {
margin-bottom: 30px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.section h3 {
margin-top: 0;
margin-bottom: 20px;
color: #333;
border-left: 5px solid #667eea;
padding-left: 15px;
font-size: 20px;
}
.section-header {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 8px 8px 0 0;
margin: -20px -20px 20px -20px;
}
.section-header h3 {
margin: 0;
font-size: 18px;
border: none;
padding: 0;
color: white;
}
/* Policy Designer */
.traffic-class {
background: #f8f9fa;
padding: 15px;
margin-bottom: 15px;
border-radius: 8px;
border-left: 4px solid #667eea;
}
.traffic-class-header {
display: flex;
gap: 15px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.traffic-class-header input,
.traffic-class-header select {
flex: 1;
min-width: 150px;
padding: 10px;
border: 2px solid #ced4da;
border-radius: 6px;
font-size: 14px;
}
.traffic-class-header input:focus,
.traffic-class-header select:focus {
outline: none;
border-color: #667eea;
}
.remove-class-btn {
background: #dc3545;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.remove-class-btn:hover {
background: #c82333;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-primary {
background: #4CAF50;
color: white;
}
.btn-primary:hover {
background: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
}
.alert {
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 4px solid;
}
.alert-info {
background: #d1ecf1;
border-color: #17a2b8;
color: #0c5460;
}
.alert-warning {
background: #fff3cd;
border-color: #ffc107;
color: #856404;
}
.alert-success {
background: #d4edda;
border-color: #28a745;
color: #155724;
}
.bandwidth-summary {
background: white;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
border: 2px solid #667eea;
}
.bandwidth-bar-container {
margin: 20px 0;
}
.bandwidth-bar {
height: 40px;
display: flex;
border-radius: 6px;
overflow: hidden;
border: 2px solid #dee2e6;
}
.bandwidth-segment {
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 12px;
transition: all 0.3s ease;
}
/* Latency Calculator */
.latency-calculator {
background: white;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
border: 2px solid #17a2b8;
}
.latency-class {
background: #f8f9fa;
padding: 20px;
margin-bottom: 15px;
border-radius: 8px;
border-left: 4px solid #17a2b8;
}
.latency-class-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 10px;
}
.latency-class-name {
font-weight: 600;
font-size: 16px;
color: #333;
}
.latency-result {
font-size: 24px;
font-weight: bold;
font-family: 'Courier New', monospace;
}
.latency-result.good {
color: #28a745;
}
.latency-result.warning {
color: #ffc107;
}
.latency-result.critical {
color: #dc3545;
}
.slider-container {
margin-top: 15px;
}
.slider-label {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
color: #666;
}
.slider-input {
width: 100%;
height: 8px;
border-radius: 4px;
background: #dee2e6;
outline: none;
-webkit-appearance: none;
}
.slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #17a2b8;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.slider-input::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #17a2b8;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
border: none;
}
.slider-input:hover::-webkit-slider-thumb {
background: #138496;
}
.slider-input:hover::-moz-range-thumb {
background: #138496;
}
.latency-details {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #dee2e6;
font-size: 13px;
color: #666;
}
.config-output {
background: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
overflow-x: auto;
margin-top: 15px;
}
.copy-btn {
background: #4CAF50;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-top: 10px;
}
.copy-btn:hover {
background: #45a049;
}
.vendor-selector {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.vendor-btn {
padding: 10px 20px;
background: white;
border: 2px solid #667eea;
color: #667eea;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}
.vendor-btn:hover {
background: #f0f0ff;
}
.vendor-btn.active {
background: #667eea;
color: white;
}
.hidden {
display: none;
}
/* Getting Started Section */
.getting-started {
background: rgba(255,255,255,0.95);
padding: 25px;
border-radius: 8px;
margin-top: 20px;
border: 2px solid rgba(255,255,255,0.3);
}
.getting-started h3 {
margin-top: 0;
color: white;
font-size: 20px;
}
.pathway-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-top: 15px;
}
.pathway-card {
background: white;
padding: 20px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid #dee2e6;
text-align: center;
}
.pathway-card:hover {
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.pathway-card:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}
.pathway-icon {
font-size: 36px;
margin-bottom: 10px;
}
.pathway-title {
font-weight: bold;
color: #333;
margin-bottom: 8px;
font-size: 16px;
}
.pathway-desc {
color: #666;
font-size: 13px;
}
/* Collapsible DSCP Converter */
.dscp-converter-toggle {
background: rgba(255,255,255,0.2);
border: 2px solid rgba(255,255,255,0.3);
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
transition: all 0.2s ease;
color: white;
font-weight: 600;
}
.dscp-converter-toggle:hover {
background: rgba(255,255,255,0.3);
}
.dscp-converter-toggle:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}
.toggle-icon {
transition: transform 0.3s ease;
}
.toggle-icon.open {
transform: rotate(180deg);
}
.dscp-converter-content {
margin-top: 15px;
display: none;
}
.dscp-converter-content.show {
display: block;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.calc-container {
padding: 12px;
margin: 10px auto;
}
.dscp-converter-compact {
grid-template-columns: 1fr;
gap: 12px;
}
.quick-reference {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 6px;
}
.dscp-chip {
padding: 6px 10px;
font-size: 12px;
}
.dscp-chip .name {
font-size: 12px;
}
.dscp-chip .value {
font-size: 10px;
}
.tabs {
flex-direction: column;
}
.tab {
padding: 10px 15px;
border-right: none;
border-bottom: 2px solid transparent;
}
.tab.active {
border-right: none;
border-bottom: 2px solid white;
}
.traffic-class-header {
flex-direction: column;
}
.traffic-class-header input,
.traffic-class-header select {
width: 100%;
}
.section {
padding: 15px;
}
.section h3 {
font-size: 18px;
}
/* Minimum touch target size for mobile accessibility */
.btn, button, .tab, .dscp-chip {
min-height: 44px;
min-width: 44px;
}
}
@media (max-width: 480px) {
.calc-container {
padding: 8px;
}
.calc-header h2 {
font-size: 22px;
}
.calc-header p {
font-size: 14px;
}
.input-group label {
font-size: 13px;
}
.input-group input,
.input-group select {
font-size: 14px;
padding: 10px;
}
.btn {
width: 100%;
padding: 10px 16px;
font-size: 14px;
}
}
Skládací převodník DSCP
Konec dscp-converter-content
Karty pro další funkce
Ovládací prvky relace
Karta 1: Návrhář zásad
Kalkulačka dopadu latence
Karta 2: Generátor konfigurace
Karta 3: Kompletní reference
🎯 QoS DSCP Calculator & Configuration Generator
Převádějte hodnoty DSCP, navrhujte zásady QoS a generujte konfigurace více dodavatelů pro konvergované sítě
Sekce Začínáme👋 Co byste chtěli dělat?
Aktuální hodnota: DSCP 46 (EF – zrychlené přeposílání)
Případ použití: Hlasový provoz (VoIP)
Případ použití: Hlasový provoz (VoIP)
Rozdělení bajtů IP ToS:
Rychlé společné hodnoty
D
D
D
D
D
D
E
E
DSCP (bity 7-2): = |
ECN (bity 1-0):|
Priorita IP:
Neuloženo
Obnovit banner
Jak používat panel
📖 Jak tento nástroj používat
- Převodník DSCP:Převod mezi desítkovými, hexadecimálními, binárními a standardními názvy v záhlaví
- Šablony zásad:Načíst předkonfigurované zásady pro běžné scénáře (zdravotní péče, vzdělávání, podniky)
- Návrhář zásad:Vytvářejte třídy provozu, přiřazujte hodnoty DSCP a přidělujte procenta šířky pásma
- Kalkulačka latence:Upravte hloubku fronty, abyste viděli dopad latence v reálném čase pro každou třídu
- Generátor konfigurace:Generujte konfigurace routeru/přepínače pro Cisco, Juniper, Arista a Aruba
- Kompletní reference:Tabulka rychlého vyhledávání všech standardních hodnot DSCP a případů použití
Návrhář zásad QoS
ℹ️ Info:Definujte své třídy provozu a přidělení šířky pásma. Součet nesmí překročit 100 %. Graf se automaticky aktualizuje.
Šablony zásad (funkce P0)
Konfigurační generátor
⚠️ Poznámka:Vygenerované konfigurace jsou šablony. Před nasazením do produkce vždy zkontrolujte a otestujte v laboratorním prostředí.
Navrhněte svou zásadu na kartě Návrhář zásad a poté níže vyberte platformu svého dodavatele a vygenerujte konfiguraci.
Vyberte platformu dodavatele:
Rychlá referenční tabulka DSCP
| Jméno | Desetinný | Hex | Binární | Use Case |
|---|