Add Android support + now don't block the whole page if a sub-resource is served via CF

popup.html

@@ -5,49 +5,60 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Cloudflare Blocker</title>
   <style>
+    :root {
+      color-scheme: light dark;
+    }
     body {
-      font-family: Arial, sans-serif;
-      padding: 10px;
-      width: 200px;
+      font-family: system-ui, Arial, sans-serif;
+      padding: 16px;
+      min-width: 200px;
+      margin: 0;
+    }
+    h3 {
+      margin-top: 0;
     }
     #toggle {
-      width: 50px;
-      height: 25px;
+      appearance: none;
+      border: 0;
+      padding: 0;
+      width: 72px;
+      height: 40px;
       position: relative;
-      border-radius: 15px;
+      border-radius: 20px;
       background-color: #ccc;
       cursor: pointer;
+      margin: 4px 0;
     }
     #toggle .slider {
-      width: 25px;
-      height: 25px;
+      width: 32px;
+      height: 32px;
       border-radius: 50%;
       background-color: white;
       position: absolute;
-      top: 0;
-      transition: 0.3s;
+      top: 4px;
+      left: 4px;
+      transition: left 0.2s;
     }
     #toggle.active {
       background-color: #4CAF50;
     }
     #toggle.active .slider {
-      left: 25px;
+      left: 36px;
     }
     #status {
-      margin-top: 10px;
-      font-size: 14px;
-      color: #333;
+      margin-top: 12px;
+      font-size: 16px;
     }
   </style>
 </head>
 <body>
 
   <h3>Cloudflare Blocker</h3>
-  <div id="toggle" class="active">
-    <div class="slider"></div>
-  </div>
+  <button id="toggle" class="active" role="switch" aria-checked="true" aria-label="Block Cloudflare sites">
+    <span class="slider"></span>
+  </button>
   <p id="status">Blocking is ON</p>
   <script src="popup.js"></script>
-  
+
 </body>
 </html>