Added ad-blocker warning

css/main.css

@@ -2530,4 +2530,29 @@ sm-chip .badge {
 }
 .hidden {
   display: none !important;
+}
+
+#adblocker_warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(var(--foreground-color), 1);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+#adblocker_warning:empty {
+  display: none;
+}
+#adblocker_warning .icon {
+  height: 4rem;
+  width: 4rem;
+  fill: #ffc107;
 }

css/main.scss

@@ -2664,3 +2664,29 @@ sm-chip {
 .hidden {
   display: none !important;
 }
+
+#adblocker_warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(var(--foreground-color), 1);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 1rem;
+  padding: 1.5rem;
+  &:empty {
+    display: none;
+  }
+  .icon {
+    height: 4rem;
+    width: 4rem;
+    // fill amber
+    fill: #ffc107;
+  }
+}

index.html

@@ -69,7 +69,22 @@
                     setBgImage();
                     routeTo(window.location.hash, { firstLoad: true })
                     floGlobals.loaded = true;
-                }).catch(error => notify(error, "error"))
+                }).catch(error => {
+                    let isBrave = navigator.brave !== undefined
+                    if (error === 'Cloud offline') {
+                        renderElem(getRef('adblocker_warning'), html`
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>
+                        <h1>Ad-Blocker Detected!</h1>
+                        <p>
+                            It seems like you are using an ad-blocker. Please disable it and reload the page.
+                            We don't show any ads on this app and we don't track you.    
+                        </p>
+                        ${isBrave ? html`<strong>If you have enabled Brave shield then disable it also.</strong>` : ''}
+                        `)
+                    } else {
+                        notify(error, "error")
+                    }
+                })
             }).catch(error => notify(error, "error"))
         }
     </script>
@@ -96,6 +111,7 @@
             </div>
         </sm-form>
     </sm-popup>
+    <div id="adblocker_warning"></div>
     <div id="secondary_pages" class="page hidden">
         <header class="flex align-center gap-1">
             <div class="flex align-center flex-1">