custom checkbox style

module/webui/index.html

@@ -298,7 +298,14 @@
     <div id="security-patch-card" class="security-patch-card">
         <div class="security-patch-content">
             <div class="advanced-toggle">
-                <input type="checkbox" id="advanced-mode" class="advanced-checkbox">
+                <input type="checkbox" class="checkbox" id="advanced-mode" />
+                <label for="advanced-mode" class="custom-checkbox">
+                    <span class="tick-symbol">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 26 26" width="16px" height="16px" fill="#fff">
+                            <path d="M 22.566406 4.730469 L 20.773438 3.511719 C 20.277344 3.175781 19.597656 3.304688 19.265625 3.796875 L 10.476563 16.757813 L 6.4375 12.71875 C 6.015625 12.296875 5.328125 12.296875 4.90625 12.71875 L 3.371094 14.253906 C 2.949219 14.675781 2.949219 15.363281 3.371094 15.789063 L 9.582031 22 C 9.929688 22.347656 10.476563 22.613281 10.96875 22.613281 C 11.460938 22.613281 11.957031 22.304688 12.277344 21.839844 L 22.855469 6.234375 C 23.191406 5.742188 23.0625 5.066406 22.566406 4.730469 Z"/>
+                        </svg>
+                    </span>
+                </label>
                 <label for="advanced-mode" data-i18n="security_patch.advanced_mode">Advanced Mode</label>
             </div>
             

module/webui/styles/security-patch.css

@@ -40,6 +40,54 @@
     display: flex;
     align-items: center;
     gap: 8px;
+    user-select: none;
+}
+
+.advanced-toggle .checkbox-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-left: auto;
+}
+
+.advanced-toggle .checkbox {
+    opacity: 0;
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.advanced-toggle .custom-checkbox {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    transition: border-color 1s ease, transform 0.3s ease, background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.advanced-toggle .tick-symbol {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+    transition: transform 0.2s ease-out, opacity 0.3s ease;
+}
+
+.advanced-toggle .checkbox:checked + .custom-checkbox {
+    border-color: #007bff;
+    background-color: #007bff;
+    transition: border-color 0.1s ease;
+    animation: checked-bounce 0.3s ease-out;
+}
+
+.advanced-toggle .checkbox:checked + .custom-checkbox .tick-symbol {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
 }
 
 .input-group {
@@ -52,6 +100,7 @@
     padding-top: 10px;
     font-size: 14px;
     color: #666;
+    user-select: none;
 }
 
 .input-group input {
@@ -81,11 +130,13 @@
 
 .auto-button {
     background-color: #ddd;
+    user-select: none;
 }
 
 .save-button {
     background-color: #007bff;
     color: white;
+    user-select: none;
 }
 
 .hidden {