Vergelijking van netwerkleverancierscommando's
/* ── Intro ── */
.intro {
margin-bottom: 30px;
padding: 20px;
background: #f8f9fa;
border-left: 5px solid #667eea;
border-radius: 6px;
}
.intro p {
margin: 10px 0;
color: #495057;
line-height: 1.6;
}
/* ── Stat cards ── */
.stats {
display: flex;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.stat-card {
flex: 1;
min-width: 150px;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.stat-label {
font-size: 14px;
opacity: 0.9;
margin-bottom: 5px;
}
.stat-value {
font-size: 32px;
font-weight: bold;
}
/* ── Vendor selector ── */
.vendor-section {
margin-bottom: 24px;
padding: 20px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.vendor-section-label {
display: block;
margin-bottom: 12px;
font-weight: 600;
color: #333;
}
.vendor-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.vendor-card {
cursor: pointer;
border: 2px solid #667eea;
border-radius: 6px;
padding: 10px 16px;
background: white;
color: #667eea;
font-size: 13px;
font-weight: 600;
text-align: center;
user-select: none;
transition: all 0.2s ease;
min-width: 120px;
}
.vendor-card .vsub {
font-size: 11px;
font-weight: 400;
opacity: 0.8;
margin-top: 2px;
}
.vendor-card:hover:not(.vc-disabled) {
background: #f0f0ff;
}
.vendor-card.vc-selected {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-color: transparent;
box-shadow: 0 2px 6px rgba(102,126,234,0.35);
}
.vendor-card.vc-selected .vsub {
opacity: 0.9;
}
.vendor-card.vc-disabled {
opacity: 0.35;
pointer-events: none;
}
.vendor-hint {
margin-top: 10px;
font-size: 12px;
color: #6c757d;
}
/* ── Search section ── */
.search-section {
margin-bottom: 20px;
padding: 20px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.search-row {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.search-label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: #333;
}
#vcSearchInput {
flex: 1;
min-width: 200px;
padding: 12px 15px;
font-size: 16px;
border: 2px solid #ced4da;
border-radius: 6px;
transition: all 0.3s ease;
}
#vcSearchInput:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* ── Category pills ── */
.category-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 14px;
}
.pill {
cursor: pointer;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
border: 1px solid #ced4da;
background: white;
color: #495057;
transition: all 0.2s ease;
user-select: none;
}
.pill:hover {
border-color: #667eea;
color: #667eea;
}
.pill.pill-active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-color: transparent;
}
/* ── Table container ── */
.table-container {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
#compareTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
#compareTable thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: sticky;
top: 0;
z-index: 10;
}
#compareTable th {
padding: 15px 12px;
text-align: left;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
word-break: break-word;
}
#compareTable th.th-function {
width: 18%;
}
#compareTable td {
padding: 12px;
border-bottom: 1px solid #e9ecef;
color: #495057;
vertical-align: top;
word-break: break-word;
}
/* Category group header row */
#compareTable tr.cat-row td {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 8px 12px;
}
/* Function name column */
.fn-name {
font-weight: 600;
color: #333;
font-size: 13px;
}
.fn-desc {
font-size: 11px;
color: #6c757d;
margin-top: 3px;
line-height: 1.4;
}
/* Cell states */
.cell-verified {
background: white;
}
.cell-unverified {
background: #fffde7;
}
.cell-nodata {
background: repeating-linear-gradient(
45deg,
#f8f8f8,
#f8f8f8 5px,
#efefef 5px,
#efefef 10px
);
color: #aaa;
font-style: italic;
font-size: 12px;
text-align: center;
vertical-align: middle !important;
}
/* Command text */
.cmd-text {
font-family: 'Courier New', Courier, monospace;
font-size: 12px;
white-space: pre-wrap;
word-break: break-all;
line-height: 1.5;
margin: 0;
}
.cell-unverified .cmd-text {
color: #5a3e00;
}
/* Verify badge */
.verify-badge {
display: inline-block;
background: #ff9800;
color: white;
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 3px;
margin-bottom: 5px;
letter-spacing: 0.3px;
}
/* Copy button */
.copy-btn {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
font-size: 11px;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 3px;
cursor: pointer;
color: #495057;
transition: all 0.15s;
}
.copy-btn:hover {
background: #667eea;
color: white;
border-color: #667eea;
}
/* Info tooltip — pure CSS */
.info-icon {
display: inline-block;
cursor: help;
color: #667eea;
font-size: 13px;
margin-left: 4px;
position: relative;
}
.info-icon::after {
content: attr(data-tip);
display: none;
position: absolute;
bottom: 125%;
left: 0;
background: #333;
color: white;
font-size: 12px;
line-height: 1.5;
padding: 8px 12px;
border-radius: 4px;
white-space: normal;
min-width: 200px;
max-width: 300px;
z-index: 100;
pointer-events: none;
}
.info-icon:hover::after {
display: block;
}
/* Row hover */
#compareTable tbody tr:not(.cat-row):hover td {
background: #f8f9fa !important;
transition: background 0.2s ease;
}
/* Loading / empty */
.loading {
text-align: center;
padding: 40px;
color: #6c757d;
}
.loading-spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error {
padding: 20px;
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
border-radius: 6px;
margin: 20px 0;
}
.no-results {
padding: 40px;
text-align: center;
color: #6c757d;
font-size: 16px;
}
/* Mobile */
@media (max-width: 768px) {
.stats {
flex-direction: column;
}
.stat-card {
min-width: 100%;
}
.vendor-card {
min-width: 90px;
font-size: 12px;
padding: 8px 10px;
}
#compareTable {
font-size: 12px;
}
#compareTable th,
#compareTable td {
padding: 8px;
}
.cmd-text {
font-size: 11px;
}
}
Statistieken
Leverancierskiezer
Zoeken + categoriefilter
Tafel
Vergelijking van CLI-opdrachten van netwerkleveranciers
Selecteer maximaal vier leveranciers om hun CLI-opdrachten naast elkaar te vergelijken in de categorieën Systeem, Interface, VLAN, STP, OSPF, BGP en BGP EVPN. Gebruik het zoekvak en de categoriefilters om de resultaten te verfijnen.
Cellen gemarkeerd⚠ VERIFIEERmoet worden gevalideerd aan de hand van de huidige leveranciersdocumentatie voordat het in productie wordt gebruikt. Grijze cellen geven aan dat er geen gegevens beschikbaar zijn voor die leverancier.
Totaal Functies
-
Gefilterde resultaten
-
Leveranciers geselecteerd
2
|
Opdrachtgegevens laden... |