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 03:57:05 +00:00
parent 47204774c3
commit e762897da9
2 changed files with 72 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
html/network.php
View File

@ -158,13 +158,14 @@ $selected_interface = $_GET['interface'] ?? array_keys($interface_data)[0] ?? nu
<div class="mb-3">
<label class="form-label">Multicast</label>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="multicast-<?php echo $selected_interface; ?>"
<div class="switch">
<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>
<span class="slider"></span>
</div>
<label for="multicast-<?php echo $selected_interface; ?>" class="switch-label">
<?php echo ($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on' ? 'Enabled' : 'Disabled'; ?>
</label>
</div>
<div class="mb-3">

78
html/style.css
View File

@ -821,57 +821,111 @@ main {
width: 100%;
min-width: auto;
}
.interface-list {
flex-direction: column;
align-items: stretch;
}
.tab-button {
width: 100%;
text-align: center;
}
.activation-buttons {
flex-direction: column;
align-items: stretch;
}
.activation-buttons button {
width: 100%;
}
.input-group {
min-width: 250px;
}
.green-btn, .red-btn {
.green-btn,
.red-btn {
width: 100%;
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);
}
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
margin: 10px 0;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: var(--accent-blue-light);
}
input:checked+.slider:before {
transform: translateX(26px);
}
.switch-label {
margin-left: 10px;
vertical-align: middle;
font-size: 0.9rem;
color: var(--text-primary);
}