Network Vendor Command Comparison
/* ── 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;
}
}
Statistik
Pemilih vendor
Pencarian + filter kategori
Meja
Perbandingan Perintah CLI Vendor Jaringan
Pilih hingga 4 vendor untuk membandingkan perintah CLI mereka secara berdampingan di seluruh kategori Sistem, Antarmuka, VLAN, STP, OSPF, BGP, dan BGP EVPN. Gunakan kotak pencarian dan filter kategori untuk mempersempit hasil.
Sel ditandai⚠ VERIFIKASIharus divalidasi terhadap dokumentasi vendor saat ini sebelum digunakan dalam produksi. Sel abu-abu menunjukkan tidak ada data yang tersedia untuk vendor tersebut.
Fungsi Jumlah
-
Hasil yang Difilter
-
Vendor Dipilih
2
|
Memuat data perintah... |