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

ui upadte

This commit is contained in:
Devdatt Bhatt 2026-06-08 01:02:53 +00:00
parent 5c43a0ca50
commit c1bd845f6e
2 changed files with 74 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
html/network.php
View File

@ -200,18 +200,11 @@ $selected_interface = $_GET['interface'] ?? array_keys($interface_data)[0] ?? nu
<div class="mb-3">
<label class="form-label">Multicast</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="multicast" id="multicast-on-<?php echo $selected_interface; ?>"
value="on" <?php echo ($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on' ? 'checked' : ''; ?>>
<label class="form-check-label" for="multicast-on-<?php echo $selected_interface; ?>">
Enable
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="multicast" id="multicast-off-<?php echo $selected_interface; ?>"
value="off" <?php echo ($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'off' ? 'checked' : ''; ?>>
<label class="form-check-label" for="multicast-off-<?php echo $selected_interface; ?>">
Disable
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="multicast-<?php echo $selected_interface; ?>"
name="multicast" value="on" <?php echo ($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on' ? 'checked' : ''; ?>>
<label class="form-check-label" for="multicast-<?php echo $selected_interface; ?>">
<?php echo ($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on' ? 'Enabled' : 'Disabled'; ?>
</label>
</div>
</div>

73
html/style.css
View File

@ -596,8 +596,7 @@ main {
justify-content: flex-start;
}
/* ... existing CSS ... */
/* Network interface card styling */
.interface-card {
flex: 1 1 300px;
min-width: 300px;
@ -665,11 +664,68 @@ main {
border: 1px solid rgba(92, 158, 255, 0.3);
color: var(--text-primary);
backdrop-filter: blur(5px);
border-radius: 8px;
padding: 10px 15px;
}
.interface-form .form-control:focus {
border-color: var(--accent-blue-light);
box-shadow: 0 0 10px rgba(0, 168, 255, 0.3);
box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.3);
}
/* Button styling */
.btn-primary {
background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-light));
border: none;
border-radius: 8px;
color: white;
padding: 12px 25px;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 168, 255, 0.3);
}
.btn-primary:hover {
background: linear-gradient(90deg, var(--accent-blue-light), var(--accent-blue));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 168, 255, 0.4);
}
.btn-primary:active {
transform: translateY(0);
}
/* Toggle switch styling */
.form-switch .form-check-input {
height: 24px;
width: 48px;
border-radius: 12px;
background-color: rgba(92, 158, 255, 0.3);
border: none;
position: relative;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-switch .form-check-input:checked {
background-color: var(--accent-blue-light);
}
.form-switch .form-check-input::before {
content: '';
position: absolute;
height: 18px;
width: 18px;
border-radius: 50%;
background-color: white;
top: 3px;
left: 3px;
transition: transform 0.3s ease;
}
.form-switch .form-check-input:checked::before {
transform: translateX(24px);
}
/* Responsive adjustments */
@ -707,4 +763,13 @@ main {
.activation-buttons button {
width: 100%;
}
}
.input-group {
min-width: 250px;
}
.green-btn, .red-btn {
width: 100%;
margin-bottom: 8px;
}
}