ui update
This commit is contained in:
Devdatt Bhatt
parent
a1cf7bc35a
commit
8fb3741dbb
108
html/network.php
108
html/network.php
|
|
@ -127,8 +127,10 @@ $general_config = $network_config['general'] ?? [
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Network Configuration</h2>
|
<h2>Network Configuration</h2>
|
||||||
|
|
||||||
<!-- General Settings Tabs -->
|
<!-- Main container for network settings -->
|
||||||
<ul class="nav nav-tabs" id="settingsTabs" role="tablist">
|
<div class="network-settings-container">
|
||||||
|
<!-- Tabs for different sections -->
|
||||||
|
<ul class="nav nav-tabs" id="networkTabs" role="tablist">
|
||||||
<li class="nav-item" role="presentation">
|
<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">
|
<button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">
|
||||||
General Settings
|
General Settings
|
||||||
|
|
@ -139,20 +141,10 @@ $general_config = $network_config['general'] ?? [
|
||||||
Interfaces
|
Interfaces
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item" role="presentation">
|
|
||||||
<button class="nav-link" id="dns-tab" data-bs-toggle="tab" data-bs-target="#dns" type="button" role="tab">
|
|
||||||
DNS Settings
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item" role="presentation">
|
|
||||||
<button class="nav-link" id="ntp-tab" data-bs-toggle="tab" data-bs-target="#ntp" type="button" role="tab">
|
|
||||||
NTP Settings
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- Tab Content -->
|
<!-- Tab Content -->
|
||||||
<div class="tab-content" id="settingsTabContent">
|
<div class="tab-content" id="networkTabContent">
|
||||||
<!-- General Settings -->
|
<!-- General Settings -->
|
||||||
<div class="tab-pane fade show active" id="general" role="tabpanel">
|
<div class="tab-pane fade show active" id="general" role="tabpanel">
|
||||||
<div class="card mt-3">
|
<div class="card mt-3">
|
||||||
|
|
@ -201,7 +193,7 @@ $general_config = $network_config['general'] ?? [
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<!-- Interface Tabs -->
|
<!-- Interface Tabs -->
|
||||||
<ul class="nav nav-tabs" id="interfaceTabs" role="tablist">
|
<ul class="nav nav-tabs interface-tabs" id="interfaceTabs" role="tablist">
|
||||||
<?php $first = true; foreach ($interface_data as $interface): ?>
|
<?php $first = true; foreach ($interface_data as $interface): ?>
|
||||||
<li class="nav-item" role="presentation">
|
<li class="nav-item" role="presentation">
|
||||||
<button class="nav-link <?php echo $first ? 'active' : ''; ?>"
|
<button class="nav-link <?php echo $first ? 'active' : ''; ?>"
|
||||||
|
|
@ -217,16 +209,12 @@ $general_config = $network_config['general'] ?? [
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- Interface Tab Content -->
|
<!-- Interface Tab Content -->
|
||||||
<div class="tab-content" id="interfaceTabContent">
|
<div class="tab-content interface-tab-content" id="interfaceTabContent">
|
||||||
<?php $first = true; foreach ($interface_data as $interface): ?>
|
<?php $first = true; foreach ($interface_data as $interface): ?>
|
||||||
<div class="tab-pane fade <?php echo $first ? 'show active' : ''; ?>"
|
<div class="tab-pane fade <?php echo $first ? 'show active' : ''; ?>"
|
||||||
id="<?php echo $interface['name']; ?>"
|
id="<?php echo $interface['name']; ?>"
|
||||||
role="tabpanel">
|
role="tabpanel">
|
||||||
<div class="card mt-3">
|
<div class="interface-settings">
|
||||||
<div class="card-header">
|
|
||||||
<h5><?php echo htmlspecialchars($interface['name']); ?></h5>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<p><strong>IP Address:</strong> <?php echo htmlspecialchars($interface['ip'] ?: 'N/A'); ?></p>
|
<p><strong>IP Address:</strong> <?php echo htmlspecialchars($interface['ip'] ?: 'N/A'); ?></p>
|
||||||
|
|
@ -301,91 +289,11 @@ $general_config = $network_config['general'] ?? [
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<?php $first = false; endforeach; ?>
|
<?php $first = false; endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- DNS Settings -->
|
|
||||||
<div class="tab-pane fade" id="dns" role="tabpanel">
|
|
||||||
<div class="card mt-3">
|
|
||||||
<div class="card-header">
|
|
||||||
<h5>DNS Configuration</h5>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<form method="post" action="">
|
|
||||||
<input type="hidden" name="action" value="save_general">
|
|
||||||
|
|
||||||
<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="dns_domain" class="form-label">Search Domain</label>
|
|
||||||
<input type="text" class="form-control" id="dns_domain" name="dns_domain"
|
|
||||||
value="<?php echo htmlspecialchars($general_config['dns_domain'] ?? ''); ?>">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="dns_cache" class="form-label">DNS Cache Size</label>
|
|
||||||
<input type="text" class="form-control" id="dns_cache" name="dns_cache"
|
|
||||||
value="<?php echo htmlspecialchars($general_config['dns_cache'] ?? ''); ?>">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary">Save DNS Settings</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- NTP Settings -->
|
|
||||||
<div class="tab-pane fade" id="ntp" role="tabpanel">
|
|
||||||
<div class="card mt-3">
|
|
||||||
<div class="card-header">
|
|
||||||
<h5>NTP Configuration</h5>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<form method="post" action="">
|
|
||||||
<input type="hidden" name="action" value="save_general">
|
|
||||||
|
|
||||||
<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="ntp_timezone" class="form-label">Timezone</label>
|
|
||||||
<input type="text" class="form-control" id="ntp_timezone" name="ntp_timezone"
|
|
||||||
value="<?php echo htmlspecialchars($general_config['ntp_timezone'] ?? ''); ?>">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">NTP Sync Method</label>
|
|
||||||
<div class="form-check">
|
|
||||||
<input class="form-check-input" type="radio" name="ntp_method" id="ntp_method1"
|
|
||||||
value="systemd" <?php echo ($general_config['ntp_method'] ?? '') === 'systemd' ? 'checked' : ''; ?>>
|
|
||||||
<label class="form-check-label" for="ntp_method1">
|
|
||||||
Systemd-timesyncd
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input class="form-check-input" type="radio" name="ntp_method" id="ntp_method2"
|
|
||||||
value="ntp" <?php echo ($general_config['ntp_method'] ?? '') === 'ntp' ? 'checked' : ''; ?>>
|
|
||||||
<label class="form-check-label" for="ntp_method2">
|
|
||||||
NTP Daemon
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary">Save NTP Settings</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -534,3 +534,69 @@ main {
|
||||||
.pulse {
|
.pulse {
|
||||||
animation: pulse 2s infinite;
|
animation: pulse 2s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.network-settings-container {
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 20px;
|
||||||
|
background: rgba(13, 27, 45, 0.7);
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
|
||||||
|
border: 1px solid rgba(92, 158, 255, 0.2);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interface tabs styling */
|
||||||
|
.interface-tabs {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
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 {
|
||||||
|
color: var(--accent-blue-light);
|
||||||
|
border-bottom: 3px solid var(--accent-blue-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.interface-tabs .nav-link.active {
|
||||||
|
color: var(--accent-blue-light);
|
||||||
|
border-bottom: 3px solid var(--accent-blue-light);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interface tab content */
|
||||||
|
.interface-tab-content {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interface settings area */
|
||||||
|
.interface-settings {
|
||||||
|
background: rgba(10, 25, 41, 0.5);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.network-settings-container {
|
||||||
|
margin-top: 120px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interface-tabs .nav-link {
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interface-settings {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue