From ea6b9f5cb96e2a2e9cf314d880620d8bc5a0a53e Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Tue, 14 Feb 2023 00:13:11 +0530
Subject: [PATCH] Standardizing ad blocker warning

---
 index.html | 79 ++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 68 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index c021709..1fb459d 100644
--- a/index.html
+++ b/index.html
@@ -60,7 +60,6 @@
             </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">
@@ -1598,17 +1597,8 @@
             })
         }
         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>` : ''}
-                        `)
+                document.body.prepend(document.createElement('adblocker-warning'))
             } else {
                 notify(error, "error")
             }
@@ -2566,6 +2556,73 @@
                 this.querySelector('#generated_private_key').value = ''
             }
         });
+        const adBlockerWarning = document.createElement('template')
+        adBlockerWarning.innerHTML = `
+            <style>
+                * {
+                    padding: 0;
+                    margin: 0;
+                    box-sizing: border-box;
+                }
+                :host{
+                    display: flex;
+                    flex-direction: column;
+                    align-content: center;
+                    justify-content: center;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    z-index: 50;
+                    background-color: rgba(var(--foreground-color), 1);
+                }
+                #adblocker_warning {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    text-align: center;
+                    gap: 1rem;
+                    padding: 1.5rem;
+                }
+                h1{
+                    font-size: 2rem;
+                    margin-top: 1rem;
+                }
+                p{
+                    font-size: 0.9rem;
+                    max-width: 65ch;
+                    line-height: 1.7;
+                    color: rgba(var(--text-color), 0.9);
+                }
+                .icon {
+                    height: 4rem;
+                    width: 4rem;
+                    fill: #ffc107;
+                }
+            </style>
+            <article id="adblocker_warning"></article>
+        `;
+        window.customElements.define('adblocker-warning', class extends HTMLElement {
+            constructor() {
+                super();
+                this.attachShadow({ mode: 'open' });
+                this.shadowRoot.appendChild(adBlockerWarning.content.cloneNode(true));
+            }
+            connectedCallback() {
+                const isBrave = navigator.brave !== undefined
+                this.shadowRoot.querySelector('#adblocker_warning').innerHTML = `
+                    <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 ? `<strong>If you have enabled Brave shield then disable it also.</strong>` : ''}
+                `;
+            }
+        });
     </script>
     <script>
         /*jshint esversion: 8 */