This commit is contained in:
Devdatt Bhatt 2026-06-08 00:18:00 +00:00
parent 30a3525a08
commit a60557679c
2 changed files with 156 additions and 211 deletions

View File

@ -43,17 +43,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
} elseif ($action === 'deactivate') { } elseif ($action === 'deactivate') {
// Deactivate interface // Deactivate interface
exec("sudo ip link set $interface down", $output, $return_code); exec("sudo ip link set $interface down", $output, $return_code);
} elseif ($action === 'save_general') {
// Save general settings
$general_config = [
'hostname' => $_POST['hostname'] ?? '',
'dns_servers' => $_POST['dns_servers'] ?? '',
'ntp_servers' => $_POST['ntp_servers'] ?? '',
'proxy' => $_POST['proxy'] ?? ''
];
$network_config['general'] = $general_config;
file_put_contents($config_file, json_encode($network_config, JSON_PRETTY_PRINT));
} }
} }
} }
@ -114,14 +103,6 @@ foreach ($output as $line) {
$interface_data[$current_interface]['status'] = 'up'; $interface_data[$current_interface]['status'] = 'up';
} }
} }
// Get general settings
$general_config = $network_config['general'] ?? [
'hostname' => '',
'dns_servers' => '',
'ntp_servers' => '',
'proxy' => ''
];
?> ?>
<div class="container"> <div class="container">
@ -129,104 +110,22 @@ $general_config = $network_config['general'] ?? [
<!-- Main container for network settings --> <!-- Main container for network settings -->
<div class="network-settings-container"> <div class="network-settings-container">
<!-- Tabs for different sections --> <!-- Network Interfaces in horizontal line -->
<ul class="nav nav-tabs" id="networkTabs" role="tablist"> <div class="network-interfaces-horizontal">
<li class="nav-item" role="presentation"> <?php foreach ($interface_data as $interface): ?>
<button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab"> <div class="interface-card">
General Settings <div class="interface-header">
</button> <h5><?php echo htmlspecialchars($interface['name']); ?></h5>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="interfaces-tab" data-bs-toggle="tab" data-bs-target="#interfaces" type="button" role="tab">
Interfaces
</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="networkTabContent">
<!-- General Settings -->
<div class="tab-pane fade show active" id="general" role="tabpanel">
<div class="card mt-3">
<div class="card-header">
<h5>General Network Settings</h5>
</div>
<div class="card-body">
<form method="post" action="">
<input type="hidden" name="action" value="save_general">
<div class="mb-3">
<label for="hostname" class="form-label">Hostname</label>
<input type="text" class="form-control" id="hostname" name="hostname"
value="<?php echo htmlspecialchars($general_config['hostname']); ?>">
</div>
<div class="mb-3">
<label for="dns_servers" class="form-label">DNS Servers (comma separated)</label>
<input type="text" class="form-control" id="dns_servers" name="dns_servers"
value="<?php echo htmlspecialchars($general_config['dns_servers']); ?>">
</div>
<div class="mb-3">
<label for="ntp_servers" class="form-label">NTP Servers (comma separated)</label>
<input type="text" class="form-control" id="ntp_servers" name="ntp_servers"
value="<?php echo htmlspecialchars($general_config['ntp_servers']); ?>">
</div>
<div class="mb-3">
<label for="proxy" class="form-label">Proxy Server</label>
<input type="text" class="form-control" id="proxy" name="proxy"
value="<?php echo htmlspecialchars($general_config['proxy']); ?>">
</div>
<button type="submit" class="btn btn-primary">Save General Settings</button>
</form>
</div>
</div>
</div>
<!-- Interfaces Tab -->
<div class="tab-pane fade" id="interfaces" role="tabpanel">
<div class="card mt-3">
<div class="card-header">
<h5>Network Interfaces</h5>
</div>
<div class="card-body">
<!-- Interface Tabs -->
<ul class="nav nav-tabs interface-tabs" id="interfaceTabs" role="tablist">
<?php $first = true; foreach ($interface_data as $interface): ?>
<li class="nav-item" role="presentation">
<button class="nav-link <?php echo $first ? 'active' : ''; ?>"
id="tab-<?php echo $interface['name']; ?>"
data-bs-toggle="tab"
data-bs-target="#<?php echo $interface['name']; ?>"
type="button"
role="tab">
<?php echo htmlspecialchars($interface['name']); ?>
</button>
</li>
<?php $first = false; endforeach; ?>
</ul>
<!-- Interface Tab Content -->
<div class="tab-content interface-tab-content" id="interfaceTabContent">
<?php $first = true; foreach ($interface_data as $interface): ?>
<div class="tab-pane fade <?php echo $first ? 'show active' : ''; ?>"
id="<?php echo $interface['name']; ?>"
role="tabpanel">
<div class="interface-settings">
<div class="row">
<div class="col-md-6">
<p><strong>IP Address:</strong> <?php echo htmlspecialchars($interface['ip'] ?: 'N/A'); ?></p>
<p><strong>MAC Address:</strong> <?php echo htmlspecialchars($interface['mac'] ?: 'N/A'); ?></p>
<p><strong>Status:</strong>
<span class="badge bg-<?php echo $interface['status'] === 'up' ? 'success' : 'secondary'; ?>"> <span class="badge bg-<?php echo $interface['status'] === 'up' ? 'success' : 'secondary'; ?>">
<?php echo htmlspecialchars($interface['status']); ?> <?php echo htmlspecialchars($interface['status']); ?>
</span> </span>
</p>
</div> </div>
<div class="col-md-6"> <div class="interface-body">
<form method="post" action=""> <p><strong>IP Address:</strong> <?php echo htmlspecialchars($interface['ip'] ?: 'N/A'); ?></p>
<p><strong>MAC Address:</strong> <?php echo htmlspecialchars($interface['mac'] ?: 'N/A'); ?></p>
</div>
<div class="interface-footer">
<form method="post" action="" class="interface-form">
<input type="hidden" name="interface" value="<?php echo htmlspecialchars($interface['name']); ?>"> <input type="hidden" name="interface" value="<?php echo htmlspecialchars($interface['name']); ?>">
<input type="hidden" name="action" value="save"> <input type="hidden" name="action" value="save">
@ -287,13 +186,7 @@ $general_config = $network_config['general'] ?? [
</form> </form>
</div> </div>
</div> </div>
</div> <?php endforeach; ?>
</div>
<?php $first = false; endforeach; ?>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -526,9 +526,17 @@ main {
/* Animation for futuristic effect */ /* Animation for futuristic effect */
@keyframes pulse { @keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 168, 255, 0.4); } 0% {
70% { box-shadow: 0 0 0 10px rgba(0, 168, 255, 0); } box-shadow: 0 0 0 0 rgba(0, 168, 255, 0.4);
100% { box-shadow: 0 0 0 0 rgba(0, 168, 255, 0); } }
70% {
box-shadow: 0 0 0 10px rgba(0, 168, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 168, 255, 0);
}
} }
.pulse { .pulse {
@ -545,43 +553,86 @@ main {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
/* Interface tabs styling */ /* Horizontal network interfaces */
.interface-tabs { .network-interfaces-horizontal {
margin-bottom: 20px; display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}
.interface-card {
flex: 1 1 300px;
min-width: 300px;
background: rgba(10, 25, 41, 0.7);
border-radius: 14px;
padding: 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(92, 158, 255, 0.2);
backdrop-filter: blur(10px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.interface-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 168, 255, 0.25);
}
.interface-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(92, 158, 255, 0.2); border-bottom: 1px solid rgba(92, 158, 255, 0.2);
} }
.interface-tabs .nav-link { .interface-header h5 {
color: var(--text-secondary); margin: 0;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
padding: 12px 20px;
transition: all 0.3s ease;
}
.interface-tabs .nav-link:hover {
color: var(--accent-blue-light); color: var(--accent-blue-light);
border-bottom: 3px solid var(--accent-blue-light); font-size: 1.2rem;
} }
.interface-tabs .nav-link.active { .interface-body {
color: var(--accent-blue-light); margin-bottom: 15px;
border-bottom: 3px solid var(--accent-blue-light);
background: transparent;
} }
/* Interface tab content */ .interface-body p {
.interface-tab-content { margin: 8px 0;
padding: 20px 0; font-size: 0.9rem;
} }
/* Interface settings area */ .interface-footer {
.interface-settings { padding-top: 15px;
background: rgba(10, 25, 41, 0.5); border-top: 1px solid rgba(92, 158, 255, 0.2);
border-radius: 12px; }
padding: 20px;
margin-top: 20px; .interface-form {
margin: 0;
}
.interface-form .mb-3 {
margin-bottom: 15px !important;
}
.interface-form .form-check {
margin-bottom: 10px;
}
.interface-form .form-check-label {
font-size: 0.9rem;
}
.interface-form .form-control {
background: rgba(13, 27, 45, 0.7);
border: 1px solid rgba(92, 158, 255, 0.3);
color: var(--text-primary);
backdrop-filter: blur(5px);
}
.interface-form .form-control:focus {
border-color: var(--accent-blue-light);
box-shadow: 0 0 10px rgba(0, 168, 255, 0.3);
} }
/* Responsive adjustments */ /* Responsive adjustments */
@ -591,12 +642,13 @@ main {
padding: 15px; padding: 15px;
} }
.interface-tabs .nav-link { .network-interfaces-horizontal {
padding: 10px 15px; flex-direction: column;
font-size: 14px; align-items: center;
} }
.interface-settings { .interface-card {
padding: 15px; width: 100%;
min-width: auto;
} }
} }