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;
}
ایلوکیشن موڈل میں ترمیم کریں۔
ثانوی IPs کے لیے تصدیقی ڈائیلاگ
سب نیٹ پلاننگ ٹول - ہائی لیول ڈیزائن
مناسب nesting کے ساتھ درجہ بندی کے مطابق نیٹ ورک سب نیٹس کی منصوبہ بندی کریں۔ فنکشنز مختص کریں، VLAN تفویض کریں، اور اپنے ڈیزائن کو ایکسپورٹ کریں۔
IPv4 کنفیگریشن
CIDR اشارے میں IPv4 نیٹ ورک
اس سائز سے زیادہ کالم چھپاتا ہے۔
IPv6 کنفیگریشن
CIDR نوٹیشن میں IPv6 نیٹ ورک
اس سائز سے زیادہ کالم چھپاتا ہے۔
سب نیٹ کی تفصیلات - VLAN/VNI اسائنمنٹ
مختص سب نیٹس کے لیے VLAN اور VNI اسائنمنٹس کی وضاحت کریں۔ ڈوئل اسٹیک (IPv4+IPv6) اور ثانوی IPs تعاون یافتہ ہیں۔
VLAN/VNI تفویض کے قواعد
دوہری اسٹیکایک ہی VLAN/VNI ایک IPv4 اور ایک IPv6 سب نیٹ کے لیے استعمال کیا جا سکتا ہے۔
سیکنڈریسیکنڈری/ٹرٹیری آئی پیز کو اسی پروٹوکول کے لیے تصدیق کی ضرورت ہوتی ہے۔
| پروٹوکول | جنرل فنکشن | مخصوص فنکشن | آئی پی ایڈریس | VLAN (1-4096) | VNI (1-16777215) | اعمال |
|---|---|---|---|---|---|---|
| منصوبہ بندی شروع کرنے کے لیے اوپر دیے گئے HLD میں سب نیٹس مختص کریں۔ | ||||||
VLAN اسائنمنٹ کی تصدیق کریں۔
متحرک مواد