ui update

This commit is contained in:
Devdatt Bhatt 2026-06-07 23:51:58 +00:00
parent a1cf7bc35a
commit 8fb3741dbb
2 changed files with 155 additions and 181 deletions

View File

@ -127,106 +127,94 @@ $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">
<li class="nav-item" role="presentation"> <!-- Tabs for different sections -->
<button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab"> <ul class="nav nav-tabs" id="networkTabs" role="tablist">
General Settings <li class="nav-item" role="presentation">
</button> <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">
</li> General Settings
<li class="nav-item" role="presentation"> </button>
<button class="nav-link" id="interfaces-tab" data-bs-toggle="tab" data-bs-target="#interfaces" type="button" role="tab"> </li>
Interfaces <li class="nav-item" role="presentation">
</button> <button class="nav-link" id="interfaces-tab" data-bs-toggle="tab" data-bs-target="#interfaces" type="button" role="tab">
</li> Interfaces
<li class="nav-item" role="presentation"> </button>
<button class="nav-link" id="dns-tab" data-bs-toggle="tab" data-bs-target="#dns" type="button" role="tab"> </li>
DNS Settings </ul>
</button>
</li> <!-- Tab Content -->
<li class="nav-item" role="presentation"> <div class="tab-content" id="networkTabContent">
<button class="nav-link" id="ntp-tab" data-bs-toggle="tab" data-bs-target="#ntp" type="button" role="tab"> <!-- General Settings -->
NTP Settings <div class="tab-pane fade show active" id="general" role="tabpanel">
</button> <div class="card mt-3">
</li> <div class="card-header">
</ul> <h5>General Network Settings</h5>
</div>
<!-- Tab Content --> <div class="card-body">
<div class="tab-content" id="settingsTabContent"> <form method="post" action="">
<!-- General Settings --> <input type="hidden" name="action" value="save_general">
<div class="tab-pane fade show active" id="general" role="tabpanel">
<div class="card mt-3"> <div class="mb-3">
<div class="card-header"> <label for="hostname" class="form-label">Hostname</label>
<h5>General Network Settings</h5> <input type="text" class="form-control" id="hostname" name="hostname"
</div> value="<?php echo htmlspecialchars($general_config['hostname']); ?>">
<div class="card-body"> </div>
<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>
<div class="mb-3"> <input type="text" class="form-control" id="dns_servers" name="dns_servers"
<label for="hostname" class="form-label">Hostname</label> value="<?php echo htmlspecialchars($general_config['dns_servers']); ?>">
<input type="text" class="form-control" id="hostname" name="hostname" </div>
value="<?php echo htmlspecialchars($general_config['hostname']); ?>">
</div> <div class="mb-3">
<label for="ntp_servers" class="form-label">NTP Servers (comma separated)</label>
<div class="mb-3"> <input type="text" class="form-control" id="ntp_servers" name="ntp_servers"
<label for="dns_servers" class="form-label">DNS Servers (comma separated)</label> value="<?php echo htmlspecialchars($general_config['ntp_servers']); ?>">
<input type="text" class="form-control" id="dns_servers" name="dns_servers" </div>
value="<?php echo htmlspecialchars($general_config['dns_servers']); ?>">
</div> <div class="mb-3">
<label for="proxy" class="form-label">Proxy Server</label>
<div class="mb-3"> <input type="text" class="form-control" id="proxy" name="proxy"
<label for="ntp_servers" class="form-label">NTP Servers (comma separated)</label> value="<?php echo htmlspecialchars($general_config['proxy']); ?>">
<input type="text" class="form-control" id="ntp_servers" name="ntp_servers" </div>
value="<?php echo htmlspecialchars($general_config['ntp_servers']); ?>">
</div> <button type="submit" class="btn btn-primary">Save General Settings</button>
</form>
<div class="mb-3"> </div>
<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> </div>
</div>
<!-- Interfaces Tab -->
<!-- Interfaces Tab --> <div class="tab-pane fade" id="interfaces" role="tabpanel">
<div class="tab-pane fade" id="interfaces" role="tabpanel"> <div class="card mt-3">
<div class="card mt-3"> <div class="card-header">
<div class="card-header"> <h5>Network Interfaces</h5>
<h5>Network Interfaces</h5> </div>
</div> <div class="card-body">
<div class="card-body"> <!-- Interface Tabs -->
<!-- Interface Tabs --> <ul class="nav nav-tabs interface-tabs" id="interfaceTabs" role="tablist">
<ul class="nav nav-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' : ''; ?>" id="tab-<?php echo $interface['name']; ?>"
id="tab-<?php echo $interface['name']; ?>" data-bs-toggle="tab"
data-bs-toggle="tab" data-bs-target="#<?php echo $interface['name']; ?>"
data-bs-target="#<?php echo $interface['name']; ?>" type="button"
type="button" role="tab">
role="tab"> <?php echo htmlspecialchars($interface['name']); ?>
<?php echo htmlspecialchars($interface['name']); ?> </button>
</button> </li>
</li> <?php $first = false; endforeach; ?>
<?php $first = false; endforeach; ?> </ul>
</ul>
<!-- Interface Tab Content -->
<!-- Interface Tab Content --> <div class="tab-content interface-tab-content" id="interfaceTabContent">
<div class="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="interface-settings">
<div class="card mt-3">
<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,92 +289,12 @@ $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> </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>

View File

@ -533,4 +533,70 @@ 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;
}
}