Subnet Planning Tool
.subnet-planner-container {
max-width: 100%;
margin: 20px auto;
padding: 20px;
}
.config-section {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.protocol-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 2px solid #ddd;
}
.tab-button {
padding: 10px 20px;
border: none;
background: transparent;
cursor: pointer;
font-weight: 600;
border-bottom: 3px solid transparent;
transition: all 0.3s;
}
.tab-button:hover {
background: #e8e8e8;
}
.tab-button.active {
border-bottom-color: #4CAF50;
color: #4CAF50;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.config-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-bottom: 15px;
}
.config-item label {
display: block;
font-weight: 600;
margin-bottom: 5px;
color: #333;
}
.config-item input,
.config-item select {
width: 100%;
padding: 8px;
border: 2px solid #ddd;
border-radius: 4px;
font-family: 'Courier New', monospace;
}
.config-item select:disabled {
background-color: #f0f0f0;
cursor: not-allowed;
opacity: 0.6;
}
.config-item select option:disabled {
color: #999;
font-style: italic;
}
.config-item .hint {
font-size: 0.85em;
color: #666;
margin-top: 3px;
}
.btn-group {
display: flex;
gap: 10px;
margin-top: 15px;
flex-wrap: wrap;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}
.btn-primary { background: #4CAF50; color: white; }
.btn-primary:hover { background: #45a049; }
.btn-secondary { background: #2196F3; color: white; }
.btn-secondary:hover { background: #0b7dda; }
.btn-danger { background: #f44336; color: white; }
.btn-danger:hover { background: #da190b; }
.hld-container {
margin: 20px 0;
overflow-x: auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 20px;
}
.column-toggles {
margin-bottom: 15px;
padding: 10px;
background: #f9f9f9;
border-radius: 4px;
}
.column-toggles label {
margin-right: 15px;
cursor: pointer;
user-select: none;
}
.column-toggles input[type="checkbox"] {
margin-right: 5px;
}
.hld-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85em;
}
.hld-table th {
background: #2c3e50;
color: white;
padding: 8px 4px;
text-align: center;
font-weight: 600;
position: sticky;
top: 0;
z-index: 10;
white-space: nowrap;
}
.hld-table td {
padding: 4px;
border: 1px solid #ddd;
text-align: center;
font-family: 'Courier New', monospace;
font-size: 0.9em;
min-width: 60px;
position: relative;
}
.hld-table td.subnet-cell {
background: #fff;
cursor: pointer;
transition: all 0.2s;
}
.hld-table td.subnet-cell:hover {
background: #e3f2fd;
transform: scale(1.05);
z-index: 5;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.hld-table td.subnet-cell.allocated {
font-weight: bold;
}
.hld-table td.subnet-cell.blocked {
background: #f5f5f5;
color: #999;
pointer-events: none;
}
.hld-table td.info-cell {
background: #f9f9f9;
font-size: 0.85em;
}
.hld-table td input {
width: 100%;
padding: 4px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 0.9em;
background: white;
}
.hld-table .col-hidden {
display: none;
}
.legend {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin: 15px 0;
padding: 10px;
background: #f9f9f9;
border-radius: 4px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px solid #ddd;
}
.detail-table-container {
margin: 30px 0;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 20px;
display: none;
}
.detail-table-container.show {
display: block;
}
.detail-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.detail-table th {
background: #2c3e50;
color: white;
padding: 10px;
text-align: left;
font-weight: 600;
}
.detail-table td {
padding: 8px;
border-bottom: 1px solid #ddd;
}
.detail-table input {
width: 100%;
padding: 6px;
border: 1px solid #ddd;
border-radius: 3px;
}
.detail-table input.error {
border-color: #f44336;
background: #ffebee;
}
.status-message {
padding: 12px;
margin: 10px 0;
border-radius: 4px;
display: none;
}
.status-message.show { display: block; }
.status-message.success {
background: #e8f5e9;
color: #2e7d32;
border-left: 4px solid #4CAF50;
}
.status-message.error {
background: #ffebee;
color: #c62828;
border-left: 4px solid #f44336;
}
.status-message.info {
background: #e3f2fd;
color: #1976d2;
border-left: 4px solid #2196F3;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.loading-overlay.show {
display: flex;
}
.loading-spinner {
background: white;
padding: 30px;
border-radius: 8px;
text-align: center;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #4CAF50;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.edit-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 2000;
animation: fadeIn 0.2s;
}
.edit-modal.show {
display: flex;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.edit-modal-content {
background: white;
border-radius: 8px;
padding: 30px;
max-width: 500px;
width: 90%;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
animation: slideUp 0.3s;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.edit-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #e0e0e0;
}
.edit-modal-header h3 {
margin: 0;
color: #2c3e50;
}
.edit-modal-close {
background: transparent;
border: none;
font-size: 24px;
cursor: pointer;
color: #999;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
}
.edit-modal-close:hover {
background: #f0f0f0;
color: #333;
}
.edit-form-group {
margin-bottom: 20px;
}
.edit-form-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
.edit-form-group input,
.edit-form-group select {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.2s;
}
.edit-form-group input:focus,
.edit-form-group select:focus {
outline: none;
border-color: #4CAF50;
}
.edit-form-group input.error {
border-color: #f44336;
background: #ffebee;
}
.edit-form-group .hint {
font-size: 0.85em;
color: #666;
margin-top: 4px;
}
.edit-form-group .error-message {
font-size: 0.85em;
color: #f44336;
margin-top: 4px;
display: none;
}
.edit-form-group .error-message.show {
display: block;
}
.color-picker-group {
display: flex;
align-items: center;
gap: 10px;
}
.color-picker-group input[type="color"] {
width: 60px;
height: 40px;
border: 2px solid #ddd;
border-radius: 4px;
cursor: pointer;
padding: 2px;
}
.color-preview {
flex: 1;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
text-align: center;
font-weight: 600;
}
.edit-modal-actions {
display: flex;
gap: 10px;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.edit-modal-actions .btn {
flex: 1;
}
.subnet-cell.allocated {
cursor: pointer;
}
.subnet-cell.allocated:hover {
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.subnet-cell.editing {
outline: 3px solid #4CAF50;
outline-offset: 2px;
z-index: 20;
}
.vlan-badge {
display: inline-block;
padding: 2px 6px;
margin-left: 5px;
border-radius: 3px;
font-size: 0.75em;
font-weight: 600;
}
.vlan-badge.dual-stack {
background: #2196F3;
color: white;
}
.vlan-badge.secondary {
background: #FF9800;
color: white;
}
.confirm-dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 3000;
animation: fadeIn 0.2s;
}
.confirm-dialog.show {
display: flex;
}
.confirm-dialog-content {
background: white;
border-radius: 8px;
padding: 30px;
max-width: 500px;
width: 90%;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.confirm-dialog-header {
margin-bottom: 20px;
}
.confirm-dialog-header h3 {
margin: 0 0 10px 0;
color: #2c3e50;
}
.confirm-dialog-body {
margin-bottom: 20px;
padding: 15px;
background: #f5f5f5;
border-radius: 4px;
border-left: 4px solid #FF9800;
}
.confirm-dialog-body p {
margin: 8px 0;
line-height: 1.6;
}
.confirm-dialog-body strong {
color: #333;
}
.confirm-dialog-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.vlan-info-legend {
margin-top: 10px;
padding: 10px;
background: #f9f9f9;
border-radius: 4px;
font-size: 0.85em;
}
.vlan-info-legend h4 {
margin: 0 0 10px 0;
font-size: 1em;
color: #333;
}
.vlan-info-legend p {
margin: 5px 0;
display: flex;
align-items: center;
gap: 8px;
}
आवंटन मॉडल संपादित करें
माध्यमिक आईपी के लिए पुष्टिकरण संवाद
सबनेट योजना उपकरण - उच्च स्तरीय डिज़ाइन
उचित नेस्टिंग के साथ नेटवर्क सबनेट की योजना पदानुक्रमिक रूप से बनाएं। फ़ंक्शन आवंटित करें, वीएलएएन असाइन करें, और अपना डिज़ाइन निर्यात करें।
IPv4 कॉन्फ़िगरेशन
सीआईडीआर नोटेशन में आईपीवी4 नेटवर्क
इस आकार से अधिक के स्तंभ छुपाता है
आईपीवी6 कॉन्फ़िगरेशन
सीआईडीआर नोटेशन में आईपीवी6 नेटवर्क
इस आकार से अधिक के स्तंभ छुपाता है
सबनेट विवरण - वीएलएएन/वीएनआई असाइनमेंट
आवंटित सबनेट के लिए वीएलएएन और वीएनआई असाइनमेंट को परिभाषित करें। डुअल-स्टैक (आईपीवी4+आईपीवी6) और सेकेंडरी आईपी समर्थित हैं।
वीएलएएन/वीएनआई असाइनमेंट नियम
डुअल स्टैकएक ही VLAN/VNI का उपयोग ONE IPv4 और ONE IPv6 सबनेट के लिए किया जा सकता है
माध्यमिकद्वितीयक/तृतीयक आईपी को समान प्रोटोकॉल के लिए पुष्टि की आवश्यकता होती है
| शिष्टाचार | सामान्य कार्य | विशिष्ट कार्य | आईपी पता | वीएलएएन (1-4096) | वीएनआई (1-16777215) | कार्रवाई |
|---|---|---|---|---|---|---|
| योजना शुरू करने के लिए उपरोक्त एचएलडी में सबनेट आवंटित करें | ||||||
वीएलएएन असाइनमेंट की पुष्टि करें
गतिशील सामग्री