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"> <div class="mb-3">
<label class="form-label">Multicast</label> <label class="form-label">Multicast</label>
<div class="form-check form-switch"> <div class="switch">
<input class="form-check-input" type="checkbox" id="multicast-<?php echo $selected_interface; ?>" <input type="checkbox" id="multicast-<?php echo $selected_interface; ?>"
name="multicast" value="on" <?php echo ($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on' ? 'checked' : ''; ?>> 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; ?>"> <span class="slider"></span>
<?php echo ($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on' ? 'Enabled' : 'Disabled'; ?>
</label>
</div> </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>
<div class="mb-3"> <div class="mb-3">

78
html/style.css
View File

@ -821,57 +821,111 @@ main {
width: 100%; width: 100%;
min-width: auto; min-width: auto;
} }
.interface-list { .interface-list {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
} }
.tab-button { .tab-button {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.activation-buttons { .activation-buttons {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
} }
.activation-buttons button { .activation-buttons button {
width: 100%; width: 100%;
} }
.input-group { .input-group {
min-width: 250px; min-width: 250px;
} }
.green-btn, .red-btn { .green-btn,
.red-btn {
width: 100%; width: 100%;
margin-bottom: 8px; margin-bottom: 8px;
} }
.input-group.network-input { .input-group.network-input {
margin-bottom: 12px; margin-bottom: 12px;
} }
.input-group.network-input input { .input-group.network-input input {
padding: 10px 12px; padding: 10px 12px;
font-size: 0.9rem; font-size: 0.9rem;
} }
.multicast-toggle .form-check-input { .multicast-toggle .form-check-input {
width: 40px; width: 40px;
height: 20px; height: 20px;
} }
.multicast-toggle .form-check-input::before { .multicast-toggle .form-check-input::before {
height: 14px; height: 14px;
width: 14px; width: 14px;
top: 3px; top: 3px;
left: 3px; left: 3px;
} }
.multicast-toggle .form-check-input:checked::before { .multicast-toggle .form-check-input:checked::before {
transform: translateX(20px); 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);
} }