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;
}
}
통계
공급업체 선택자
검색 + 카테고리 필터
테이블
네트워크 공급업체 CLI 명령 비교
최대 4개의 공급업체를 선택하여 시스템, 인터페이스, VLAN, STP, OSPF, BGP 및 BGP EVPN 범주에 걸쳐 CLI 명령을 나란히 비교할 수 있습니다. 검색창과 카테고리 필터를 사용하여 결과 범위를 좁힐 수 있습니다.
표시된 셀⚠ 확인프로덕션에 사용하기 전에 현재 공급업체 문서와 비교하여 유효성을 검사해야 합니다. 회색 셀은 해당 공급업체에 대해 사용 가능한 데이터가 없음을 나타냅니다.
전체 기능
-
필터링된 결과
-
선택된 벤더
2
|
명령 데이터 로드 중... |