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,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">

View File

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