From a718f7eff0c261d5ebba3c51a7eca23c585bfc7f Mon Sep 17 00:00:00 2001
From: Devdatt Bhatt <devdatt.bhatt@dbhatt.org>
Date: Mon, 8 Jun 2026 05:10:16 +0000
Subject: [PATCH] update

---
 html/network.php | 26 ++++++++++++++------------
 html/style.css   | 17 ++++++++++++-----
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/html/network.php b/html/network.php
index 48c932b..c4c57fb 100755
--- a/html/network.php
+++ b/html/network.php
@@ -158,17 +158,19 @@ $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 multicast-toggle"
-                                        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'; ?>
+                                <div class="switch-container">
+                                    <label class="switch">
+                                        <input
+                                            type="checkbox"
+                                            class="multicast-toggle"
+                                            name="multicast"
+                                            value="on"
+                                            <?php echo (($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on') ? 'checked' : ''; ?>>
+                                        <span class="slider"></span>
                                     </label>
+                                    <span class="switch-label">
+                                        <?php echo (($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on') ? 'Enabled' : 'Disabled'; ?>
+                                    </span>
                                 </div>
                             </div>
 
@@ -264,8 +266,8 @@ $selected_interface = $_GET['interface'] ?? array_keys($interface_data)[0] ?? nu
     document.addEventListener('DOMContentLoaded', function() {
         document.querySelectorAll('.multicast-toggle').forEach(function(checkbox) {
             checkbox.addEventListener('change', function() {
-                const interfaceName = this.id.replace('multicast-', '');
-                const label = this.nextElementSibling; // Get the label element
+                const switchContainer = this.closest('.switch-container');
+                const label = switchContainer.querySelector('.switch-label');
                 
                 if (label) {
                     label.textContent = this.checked ? 'Enabled' : 'Disabled';
diff --git a/html/style.css b/html/style.css
index 46ad7df..3f7d1fb 100644
--- a/html/style.css
+++ b/html/style.css
@@ -877,12 +877,19 @@ main {
     }
 }
 
+.switch-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 10px;
+}
+
 .switch {
     position: relative;
     display: inline-block;
     width: 50px;
     height: 24px;
-    margin: 10px 0;
+    margin: 0;
 }
 
 .switch input {
@@ -915,17 +922,17 @@ main {
     border-radius: 50%;
 }
 
-input:checked + .slider {
+input:checked+.slider {
     background-color: var(--accent-blue-light);
 }
 
-input:checked + .slider:before {
+input:checked+.slider:before {
     transform: translateX(26px);
 }
 
 .switch-label {
-    margin-left: 10px;
+    margin: 0;
     vertical-align: middle;
     font-size: 0.9rem;
     color: var(--text-primary);
-}
+}
\ No newline at end of file