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

View File

@ -158,14 +158,15 @@ $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; ?>">
<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>
<div class="mb-3">
<label class="form-label">Configuration Method</label>

View File

@ -845,7 +845,8 @@ main {
min-width: 250px;
}
.green-btn, .red-btn {
.green-btn,
.red-btn {
width: 100%;
margin-bottom: 8px;
}
@ -875,3 +876,56 @@ main {
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);
}