Refactor carpeater filter UI: update label text and improve checkbox SVG visibility

Author: MrAlders0n

index.html

@@ -164,22 +164,21 @@ <h2 class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings<
 
         <!-- Carpeater Filter -->
         <div class="space-y-2">
-          <label class="block text-xs font-medium text-slate-400 uppercase tracking-wide">
-            <a href="#" id="carpeaterInfoLink" class="hover:text-sky-400 transition-colors" onclick="event.preventDefault(); document.getElementById('carpeaterModal').classList.remove('hidden');">Carpeater</a> Filter
-          </label>
+          <label class="block text-xs font-medium text-slate-400 uppercase tracking-wide">Carpeater Filter</label>
           <div class="flex items-center gap-2">
             <!-- Custom styled checkbox -->
             <label class="relative inline-flex items-center cursor-pointer">
               <input type="checkbox" id="carpeaterFilterEnabled" class="sr-only peer">
               <div class="w-5 h-5 bg-slate-700 border border-slate-600 rounded peer-checked:bg-emerald-600 peer-checked:border-emerald-600 peer-focus:ring-2 peer-focus:ring-emerald-500 peer-focus:ring-offset-1 peer-focus:ring-offset-slate-800 transition-all flex items-center justify-center">
-                <svg class="w-3 h-3 text-white hidden peer-checked:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                 </svg>
               </div>
             </label>
-            <label for="carpeaterFilterEnabled" class="text-sm text-slate-300 cursor-pointer select-none">Carpeater ID:</label>
+            <label for="carpeaterFilterEnabled" class="text-sm text-slate-300 cursor-pointer select-none">Ignore ID:</label>
             <input type="text" id="carpeaterIdInput" maxlength="2" placeholder="00" disabled
                    class="w-14 px-2 py-1 text-sm bg-slate-700 text-white border border-slate-600 rounded focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none uppercase font-mono disabled:opacity-50 disabled:cursor-not-allowed">
+            <a href="#" id="carpeaterInfoLink" class="text-xs text-sky-400 hover:text-sky-300 transition-colors ml-1" onclick="event.preventDefault(); document.getElementById('carpeaterModal').classList.remove('hidden');">Info</a>
           </div>
         </div>