Added Ad-blocker warning

css/main.css

@@ -1838,4 +1838,29 @@ button:not([disabled], .button--primary, .button--danger):hover,
 }
 .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

@@ -1731,3 +1731,29 @@ fieldset {
 .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

@@ -60,6 +60,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">
@@ -1597,7 +1598,10 @@
                         document.querySelectorAll('.user-element').forEach(elem => elem.classList.add('hidden'))
                         getRef('home').classList.add('is-sub-admin')
                         routeTo(window.location.hash, { firstLoad: true })
-                    }).catch(error => console.error(error))
+                    }).catch(error => {
+                        console.error(error)
+                        detectAdBlocker(error)
+                    })
                 } else {
                     userUI.renderCashierRequests(User.cashierRequests);
                     userUI.renderMoneyRequests(User.moneyRequests);
@@ -1608,12 +1612,31 @@
                         document.querySelectorAll('.user-element').forEach(elem => elem.classList.remove('hidden'))
                         routeTo(window.location.hash, { firstLoad: true })
                         floGlobals.loaded = true
-                    }).catch(error => console.error(error))
+                    }).catch(error => {
+                        console.error(error)
+                        detectAdBlocker(error)
+                    })
                 }
             }).catch(error => {
                 console.error(error)
             })
         }
+        function detectAdBlocker(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")
+            }
+        }
     </script>
     <script>
         /*jshint esversion: 9 */