hw_partner
/
urmic_mpeg2_transcoder
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui update

This commit is contained in:
Devdatt Bhatt 2026-06-08 01:12:04 +00:00
parent c1bd845f6e
commit 7ed793d13f
2 changed files with 126 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
html/network.php
View File

@ -177,25 +177,33 @@ $selected_interface = $_GET['interface'] ?? array_keys($interface_data)[0] ?? nu
<div class="mb-3" id="static-ip-fields-<?php echo $selected_interface; ?>" <div class="mb-3" id="static-ip-fields-<?php echo $selected_interface; ?>"
style="<?php echo ($interface_data[$selected_interface]['config']['method'] ?? '') === 'static' ? 'display: block;' : 'display: none;'; ?>"> style="<?php echo ($interface_data[$selected_interface]['config']['method'] ?? '') === 'static' ? 'display: block;' : 'display: none;'; ?>">
<label class="form-label">IP Address</label> <div class="input-group">
<input type="text" class="form-control" name="ip" <label class="form-label">IP Address</label>
value="<?php echo htmlspecialchars($interface_data[$selected_interface]['config']['ip'] ?? ''); ?>" <input type="text" class="form-control" name="ip"
placeholder="192.168.1.100"> value="<?php echo htmlspecialchars($interface_data[$selected_interface]['config']['ip'] ?? ''); ?>"
placeholder="192.168.1.100">
</div>
<label class="form-label mt-2">Netmask</label> <div class="input-group">
<input type="text" class="form-control" name="netmask" <label class="form-label mt-2">Subnet Mask</label>
value="<?php echo htmlspecialchars($interface_data[$selected_interface]['config']['netmask'] ?? ''); ?>" <input type="text" class="form-control" name="netmask"
placeholder="255.255.255.0"> value="<?php echo htmlspecialchars($interface_data[$selected_interface]['config']['netmask'] ?? ''); ?>"
placeholder="255.255.255.0">
</div>
<label class="form-label mt-2">Gateway</label> <div class="input-group">
<input type="text" class="form-control" name="gateway" <label class="form-label mt-2">Gateway</label>
value="<?php echo htmlspecialchars($interface_data[$selected_interface]['config']['gateway'] ?? ''); ?>" <input type="text" class="form-control" name="gateway"
placeholder="192.168.1.1"> value="<?php echo htmlspecialchars($interface_data[$selected_interface]['config']['gateway'] ?? ''); ?>"
placeholder="192.168.1.1">
</div>
<label class="form-label mt-2">DNS</label> <div class="input-group">
<input type="text" class="form-control" name="dns" <label class="form-label mt-2">DNS Server</label>
value="<?php echo htmlspecialchars($interface_data[$selected_interface]['config']['dns'] ?? ''); ?>" <input type="text" class="form-control" name="dns"
placeholder="8.8.8.8"> value="<?php echo htmlspecialchars($interface_data[$selected_interface]['config']['dns'] ?? ''); ?>"
placeholder="8.8.8.8">
</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">

102
html/style.css
View File

@ -543,6 +543,7 @@ main {
animation: pulse 2s infinite; animation: pulse 2s infinite;
} }
/* Network configuration specific styles */
.network-settings-container { .network-settings-container {
padding: 20px; padding: 20px;
background: rgba(13, 27, 45, 0.7); background: rgba(13, 27, 45, 0.7);
@ -550,6 +551,7 @@ main {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(92, 158, 255, 0.2); border: 1px solid rgba(92, 158, 255, 0.2);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
margin-top: 20px;
} }
.interface-tabs { .interface-tabs {
@ -728,6 +730,81 @@ main {
transform: translateX(24px); transform: translateX(24px);
} }
/* Input group styling for network config */
.input-group.network-input {
margin-bottom: 15px;
}
.input-group.network-input label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: var(--text-primary);
font-size: 0.9rem;
}
.input-group.network-input input {
width: 100%;
padding: 12px 15px;
font-size: 1rem;
border: 1px solid rgba(92, 158, 255, 0.3);
border-radius: 8px;
outline: none;
background: rgba(13, 27, 45, 0.7);
transition: all 0.3s ease;
color: var(--text-primary);
backdrop-filter: blur(5px);
}
.input-group.network-input input:focus {
border-color: var(--accent-blue-light);
box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.3);
}
/* Multicast toggle styling */
.multicast-toggle {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.multicast-toggle .form-check-input {
width: 50px;
height: 25px;
border-radius: 12px;
background-color: rgba(92, 158, 255, 0.3);
position: relative;
cursor: pointer;
transition: background-color 0.3s ease;
}
.multicast-toggle .form-check-input:checked {
background-color: var(--accent-blue-light);
}
.multicast-toggle .form-check-input::before {
content: '';
position: absolute;
height: 19px;
width: 19px;
border-radius: 50%;
background-color: white;
top: 3px;
left: 3px;
transition: transform 0.3s ease;
}
.multicast-toggle .form-check-input:checked::before {
transform: translateX(25px);
}
.multicast-toggle .form-check-label {
margin: 0;
font-size: 1rem;
color: var(--text-primary);
}
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 768px) { @media (max-width: 768px) {
.network-settings-container { .network-settings-container {
@ -772,4 +849,29 @@ main {
width: 100%; width: 100%;
margin-bottom: 8px; margin-bottom: 8px;
} }
.input-group.network-input {
margin-bottom: 12px;
}
.input-group.network-input input {
padding: 10px 12px;
font-size: 0.9rem;
}
.multicast-toggle .form-check-input {
width: 40px;
height: 20px;
}
.multicast-toggle .form-check-input::before {
height: 14px;
width: 14px;
top: 3px;
left: 3px;
}
.multicast-toggle .form-check-input:checked::before {
transform: translateX(20px);
}
} }