Standardizing ad blocker warning
This commit is contained in:
sairaj mote
parent
7428f3bcf9
commit
08d5cf5007
25
css/main.css
25
css/main.css
@ -2516,29 +2516,4 @@ 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;
|
||||
}
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -2652,29 +2652,3 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
78
index.html
78
index.html
@ -72,15 +72,7 @@
|
||||
}).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>` : ''}
|
||||
`)
|
||||
document.body.prepend(document.createElement('adblocker-warning'))
|
||||
} else {
|
||||
notify(error, "error")
|
||||
}
|
||||
@ -2373,6 +2365,74 @@
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user