update
This commit is contained in:
parent
30a3525a08
commit
a60557679c
239
html/network.php
239
html/network.php
|
|
@ -43,17 +43,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||
} elseif ($action === 'deactivate') {
|
||||
// Deactivate interface
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
// Get general settings
|
||||
$general_config = $network_config['general'] ?? [
|
||||
'hostname' => '',
|
||||
'dns_servers' => '',
|
||||
'ntp_servers' => '',
|
||||
'proxy' => ''
|
||||
];
|
||||
?>
|
||||
|
||||
<div class="container">
|
||||
|
|
@ -129,171 +110,83 @@ $general_config = $network_config['general'] ?? [
|
|||
|
||||
<!-- Main container for network settings -->
|
||||
<div class="network-settings-container">
|
||||
<!-- Tabs for different sections -->
|
||||
<ul class="nav nav-tabs" id="networkTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">
|
||||
General Settings
|
||||
</button>
|
||||
</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>
|
||||
<!-- Network Interfaces in horizontal line -->
|
||||
<div class="network-interfaces-horizontal">
|
||||
<?php foreach ($interface_data as $interface): ?>
|
||||
<div class="interface-card">
|
||||
<div class="interface-header">
|
||||
<h5><?php echo htmlspecialchars($interface['name']); ?></h5>
|
||||
<span class="badge bg-<?php echo $interface['status'] === 'up' ? 'success' : 'secondary'; ?>">
|
||||
<?php echo htmlspecialchars($interface['status']); ?>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="post" action="">
|
||||
<input type="hidden" name="action" value="save_general">
|
||||
<div class="interface-body">
|
||||
<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="action" value="save">
|
||||
|
||||
<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']); ?>">
|
||||
<label class="form-label">Configuration Method</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="method" id="dhcp-<?php echo $interface['name']; ?>"
|
||||
value="dhcp" <?php echo ($interface['config']['method'] ?? '') === 'dhcp' ? 'checked' : ''; ?>>
|
||||
<label class="form-check-label" for="dhcp-<?php echo $interface['name']; ?>">
|
||||
DHCP
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="method" id="static-<?php echo $interface['name']; ?>"
|
||||
value="static" <?php echo ($interface['config']['method'] ?? '') === 'static' ? 'checked' : ''; ?>>
|
||||
<label class="form-check-label" for="static-<?php echo $interface['name']; ?>">
|
||||
Static IP
|
||||
</label>
|
||||
</div>
|
||||
</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 class="mb-3" id="static-ip-fields-<?php echo $interface['name']; ?>"
|
||||
style="<?php echo ($interface['config']['method'] ?? '') === 'static' ? 'display: block;' : 'display: none;'; ?>">
|
||||
<label class="form-label">IP Address</label>
|
||||
<input type="text" class="form-control" name="ip"
|
||||
value="<?php echo htmlspecialchars($interface['config']['ip'] ?? ''); ?>"
|
||||
placeholder="192.168.1.100">
|
||||
|
||||
<label class="form-label mt-2">Netmask</label>
|
||||
<input type="text" class="form-control" name="netmask"
|
||||
value="<?php echo htmlspecialchars($interface['config']['netmask'] ?? ''); ?>"
|
||||
placeholder="255.255.255.0">
|
||||
|
||||
<label class="form-label mt-2">Gateway</label>
|
||||
<input type="text" class="form-control" name="gateway"
|
||||
value="<?php echo htmlspecialchars($interface['config']['gateway'] ?? ''); ?>"
|
||||
placeholder="192.168.1.1">
|
||||
|
||||
<label class="form-label mt-2">DNS Server</label>
|
||||
<input type="text" class="form-control" name="dns"
|
||||
value="<?php echo htmlspecialchars($interface['config']['dns'] ?? ''); ?>"
|
||||
placeholder="8.8.8.8">
|
||||
</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 class="d-flex justify-content-between">
|
||||
<button type="submit" class="btn btn-primary">Save Configuration</button>
|
||||
<div>
|
||||
<button type="submit" name="action" value="activate"
|
||||
class="btn btn-success <?php echo $interface['status'] === 'up' ? 'disabled' : ''; ?>">
|
||||
Activate
|
||||
</button>
|
||||
<button type="submit" name="action" value="deactivate"
|
||||
class="btn btn-danger <?php echo $interface['status'] === 'down' ? 'disabled' : ''; ?>">
|
||||
Deactivate
|
||||
</button>
|
||||
</div>
|
||||
</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'; ?>">
|
||||
<?php echo htmlspecialchars($interface['status']); ?>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<form method="post" action="">
|
||||
<input type="hidden" name="interface" value="<?php echo htmlspecialchars($interface['name']); ?>">
|
||||
<input type="hidden" name="action" value="save">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Configuration Method</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="method" id="dhcp-<?php echo $interface['name']; ?>"
|
||||
value="dhcp" <?php echo ($interface['config']['method'] ?? '') === 'dhcp' ? 'checked' : ''; ?>>
|
||||
<label class="form-check-label" for="dhcp-<?php echo $interface['name']; ?>">
|
||||
DHCP
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="method" id="static-<?php echo $interface['name']; ?>"
|
||||
value="static" <?php echo ($interface['config']['method'] ?? '') === 'static' ? 'checked' : ''; ?>>
|
||||
<label class="form-check-label" for="static-<?php echo $interface['name']; ?>">
|
||||
Static IP
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="static-ip-fields-<?php echo $interface['name']; ?>"
|
||||
style="<?php echo ($interface['config']['method'] ?? '') === 'static' ? 'display: block;' : 'display: none;'; ?>">
|
||||
<label class="form-label">IP Address</label>
|
||||
<input type="text" class="form-control" name="ip"
|
||||
value="<?php echo htmlspecialchars($interface['config']['ip'] ?? ''); ?>"
|
||||
placeholder="192.168.1.100">
|
||||
|
||||
<label class="form-label mt-2">Netmask</label>
|
||||
<input type="text" class="form-control" name="netmask"
|
||||
value="<?php echo htmlspecialchars($interface['config']['netmask'] ?? ''); ?>"
|
||||
placeholder="255.255.255.0">
|
||||
|
||||
<label class="form-label mt-2">Gateway</label>
|
||||
<input type="text" class="form-control" name="gateway"
|
||||
value="<?php echo htmlspecialchars($interface['config']['gateway'] ?? ''); ?>"
|
||||
placeholder="192.168.1.1">
|
||||
|
||||
<label class="form-label mt-2">DNS Server</label>
|
||||
<input type="text" class="form-control" name="dns"
|
||||
value="<?php echo htmlspecialchars($interface['config']['dns'] ?? ''); ?>"
|
||||
placeholder="8.8.8.8">
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<button type="submit" class="btn btn-primary">Save Configuration</button>
|
||||
<div>
|
||||
<button type="submit" name="action" value="activate"
|
||||
class="btn btn-success <?php echo $interface['status'] === 'up' ? 'disabled' : ''; ?>">
|
||||
Activate
|
||||
</button>
|
||||
<button type="submit" name="action" value="deactivate"
|
||||
class="btn btn-danger <?php echo $interface['status'] === 'down' ? 'disabled' : ''; ?>">
|
||||
Deactivate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php $first = false; endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
128
html/style.css
128
html/style.css
|
|
@ -526,9 +526,17 @@ main {
|
|||
|
||||
/* Animation for futuristic effect */
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(0, 168, 255, 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(0, 168, 255, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(0, 168, 255, 0); }
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(0, 168, 255, 0.4);
|
||||
}
|
||||
|
||||
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 {
|
||||
|
|
@ -545,43 +553,86 @@ main {
|
|||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Interface tabs styling */
|
||||
.interface-tabs {
|
||||
margin-bottom: 20px;
|
||||
/* Horizontal network interfaces */
|
||||
.network-interfaces-horizontal {
|
||||
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);
|
||||
}
|
||||
|
||||
.interface-tabs .nav-link {
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
padding: 12px 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.interface-tabs .nav-link:hover {
|
||||
.interface-header h5 {
|
||||
margin: 0;
|
||||
color: var(--accent-blue-light);
|
||||
border-bottom: 3px solid var(--accent-blue-light);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.interface-tabs .nav-link.active {
|
||||
color: var(--accent-blue-light);
|
||||
border-bottom: 3px solid var(--accent-blue-light);
|
||||
background: transparent;
|
||||
.interface-body {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Interface tab content */
|
||||
.interface-tab-content {
|
||||
padding: 20px 0;
|
||||
.interface-body p {
|
||||
margin: 8px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Interface settings area */
|
||||
.interface-settings {
|
||||
background: rgba(10, 25, 41, 0.5);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
.interface-footer {
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid rgba(92, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
.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 */
|
||||
|
|
@ -590,13 +641,14 @@ main {
|
|||
margin-top: 120px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.interface-tabs .nav-link {
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
|
||||
.network-interfaces-horizontal {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.interface-settings {
|
||||
padding: 15px;
|
||||
|
||||
.interface-card {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue