Skip to content

Commit

Permalink
Add 3Labs Logo
Browse files Browse the repository at this point in the history
  • Loading branch information
@Claudio-Emmolo
Claudio-Emmolo committed Oct 21, 2023
1 parent 6e73d19 commit d1a772e
Show file tree
Hide file tree
Showing 6 changed files with 82 additions and 316 deletions.
5 changes: 5 additions & 0 deletions demo/assets/logo-small.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
210 changes: 0 additions & 210 deletions demo/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,218 +145,8 @@ <h1>Anti AdBLock Demo</h1>
<br>



function toggleContent(){
const content = document.getElementById('content');
const button = document.getElementById('how-to-remove');


if(content.innerHTML.includes('<div id="content-1"')){
content.innerHTML = `
<div id="content-2" style="padding: 30px 10px 10px; min-height: 305px">
<div style="margin-left: 10px;">
<p style="font-weight: bold; font-size: 1.5rem; margin-bottom: 20px;">
Come disattivare l'Ad Blocker</span>
</p>

<ol style="font-size: 1.1rem; color: rgb(107, 114, 128);">
<li style="margin: 25px 20px;">
<span style="font-weight: bold;">Clicca sull'icona dell'estensione per il blocco annunci</span>. Di solito si trova nell'angolo in alto a destra dello schermo.
</li>
<li style="margin: 25px 20px;">
Segui le istruzioni per <span style="font-weight: bold;">disattivare il blocco annunci</span>.
</li>
<li style="margin: 25px 20px;">
Aggiorna la pagina cliccando su <span style="font-weight: bold;">"Ok, fatto!"</span>
</li>
</ol>

</div>
</div>
`;
button.innerHTML = 'Indietro';
}else{
content.innerHTML = `
<div id="content-1" style="display: flex; padding: 30px 10px 10px; min-height: 305px;">
<div style="margin-left: 10px;">

<div style="display:flex; justify-content: space-between;">
<p>
<span style="text-transform: uppercase;">Alt!</span> Mi è sembrato di vedere un...
<br>
<span style="font-size: 3rem; font-weight: bold; text-transform: uppercase;">Adblock!</span>
</p>
<img src="./assets/adIconSmall.png" id="ad-icon-small">
</div>



<p style="font-size: 1.1rem; color: rgb(107, 114, 128); line-height: 28px; margin: 20px 0;">
Ci spiace doverti annoiare ma sembra che tu stia utilizzando un <span style="font-weight: bold;">blocco pubblicitario</span>. Ti chiediamo di disabilitarlo per continuare a navigare, grazie!
</p>
</div>

<img src="./assets/adIcon.png" id="ad-icon" style="width: 100%; height: 100%;">
</div>
`;
button.innerHTML = 'Come lo disattivo?';
}
}




<div style="${getRandomStyle()};">
<!-- <div class="style"> -->
<div style="width: 100%; max-width: 500px; margin: auto; background-color: white; border-radius: 1rem; overflow: hidden">


<!-- Content -->
<section id="content">

<div id="content-1" style="display: flex; padding: 30px 10px 10px; min-height: 305px;">
<div style="margin-left: 10px;">

<div style="display:flex; justify-content: space-between;">
<p>
<span style="text-transform: uppercase;">Alt!</span> Mi è sembrato di vedere un...
<br>
<span style="font-size: 3rem; font-weight: bold; text-transform: uppercase;">Adblock!</span>
</p>
<img src="./assets/adIconSmall.png" id="ad-icon-small">
</div>



<p style="font-size: 1.1rem; color: rgb(107, 114, 128); line-height: 28px; margin: 20px 0;">
Ci spiace doverti annoiare ma sembra che tu stia utilizzando un <span style="font-weight: bold;">blocco pubblicitario</span>. Ti chiediamo di disabilitarlo per continuare a navigare, grazie!
</p>
</div>

<img src="./assets/adIcon.png" id="ad-icon" style="width: 100%; height: 100%;">
</div>


</section>

<p style="text-align: center; margin: 20px 0; font-size: .9rem;">
Adblock Detector è un progetto di <a href="https://www.3labs.it" target="_blank" style="font-weight: bold; text-decoration: none; color: black;">3Labs™ Team</a>
</p>


<!-- Buttons -->

<div style="display: flex;">

<span onclick="toggleContent()" id="how-to-remove" style="width: 50%; height: 60px; padding: 10px; text-align: center; display: flex; justify-content: center; align-items:center; border-top: 1px solid rgb(121, 121, 121); cursor: pointer; background-color: white; ">Come lo disattivo?</span>
<span onclick="location.reload()" style="width: 50%; height: 60px; padding: 10px; text-align: center; display: flex; justify-content: center; align-items:center; border-top: 1px solid rgb(121, 121, 121); cursor: pointer; background-color: black; color: white; ">Ok, fatto!</span>

</div>


</div>
</div>

<script>

function toggleContent(){
const content = document.getElementById('content');
const button = document.getElementById('how-to-remove');


//if content include <p> then remove it
if(content.innerHTML.includes('<div id="content-1"')){
content.innerHTML = `
<div id="content-2" style="padding: 30px 10px 10px; min-height: 305px">
<div style="margin-left: 10px;">
<p style="font-weight: bold; font-size: 1.5rem; margin-bottom: 20px;">
Come disattivare l'Ad Blocker</span>
</p>
<ol style="font-size: 1.1rem; color: rgb(107, 114, 128);">
<li style="margin: 25px 20px;">
<span style="font-weight: bold;">Clicca sull'icona dell'estensione per il blocco annunci</span>. Di solito si trova nell'angolo in alto a destra dello schermo.
</li>
<li style="margin: 25px 20px;">
Segui le istruzioni per <span style="font-weight: bold;">disattivare il blocco annunci</span>.
</li>
<li style="margin: 25px 20px;">
Aggiorna la pagina cliccando su <span style="font-weight: bold;">"Ok, fatto!"</span>
</li>
</ol>
</div>
</div>
`;
button.innerHTML = 'Indietro';
}else{
content.innerHTML = `
<div id="content-1" style="display: flex; padding: 30px 10px 10px; min-height: 305px;">
<div style="margin-left: 10px;">
<div style="display:flex; justify-content: space-between;">
<p>
<span style="text-transform: uppercase;">Alt!</span> Mi è sembrato di vedere un...
<br>
<span style="font-size: 3rem; font-weight: bold; text-transform: uppercase;">Adblock!</span>
</p>
<img src="./assets/adIconSmall.png" id="ad-icon-small">
</div>
<p style="font-size: 1.1rem; color: rgb(107, 114, 128); line-height: 28px; margin: 20px 0;">
Ci spiace doverti annoiare ma sembra che tu stia utilizzando un <span style="font-weight: bold;">blocco pubblicitario</span>. Ti chiediamo di disabilitarlo per continuare a navigare, grazie!
</p>
</div>
<img src="./assets/adIcon.png" id="ad-icon" style="width: 100%; height: 100%;">
</div>
`;
button.innerHTML = 'Come lo disattivo?';
}
}


</script>

<style>
.style{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
padding: 10px;
background-color: rgba(0,0,0,0.68);
backdrop-filter: blur(5px);
display: flex;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

#ad-icon-small{
display: none;
}

@media screen and (max-width: 500px){
#ad-icon{
display: none;
}

#ad-icon-small{
display: inline-block;
}

}
</style>



</main>


<script type="module" src="./demo.js"></script>

</body>
Expand Down
41 changes: 9 additions & 32 deletions dist/antiAdBlocker.min.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import{detectAdBlock}from"/resources/detectAdBlock.js";export default class AntiAdBlocker{constructor({color:e,logo:{url:t,width:n,heigth:o},hiddenBody:i}){const a={color:e,logo:{url:t??"./assets/logo.svg",width:n??"300px",height:o??"50px"},hiddenBody:i??!0},l=document.querySelector("body");window.onload=async()=>{await detectAdBlock()&&(l.setAttribute("aria-hidden","true"),a.hiddenBody&&(l.innerHTML=""),l.style.overflow="hidden",l.innerHTML+=`
import{detectAdBlock}from"/resources/detectAdBlock.js";export default class AntiAdBlocker{constructor({color:e,logo:{url:t,width:o,heigth:i},hiddenBody:a}){const n={color:e,logo:{url:t??"./assets/logo.svg",width:o??"300px",height:i??"50px"},hiddenBody:a??!0},l=document.querySelector("body");window.onload=async()=>{await detectAdBlock()&&(l.setAttribute("aria-hidden","true"),n.hiddenBody&&(l.innerHTML=""),l.style.overflow="hidden",l.innerHTML+=`
<div style="${function(){const t=[{name:"width",value:"100%"},{name:"height",value:"100vh"},{name:"padding",value:"10px"},{name:"background-color",value:"rgba(0,0,0,0.68)"},{name:"position",value:"fixed"},{name:"top",value:"0"},{name:"left",value:"0"},{name:"z-index",value:"999999"},{name:"display",value:"flex"},{name:"font-family",value:"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol"},{name:"backdrop-filter",value:"blur(5px)"}],e=Array.from({length:t.length},(e,t)=>t).sort(()=>Math.random()-.5);return e.map(e=>`${t[e].name}: ${t[e].value};`).join(" ")}()};">
<!-- <div class="style"> -->
<div style="width: 100%; max-width: 500px; margin: auto; background-color: white; border-radius: 1rem; overflow: hidden">
<div style="width: 100%; max-width: 500px; margin: auto; background-color: white; border-radius: 1rem; overflow: hidden; position: relative;">
<img src="./assets/logo-small.svg" style="position: absolute; top: 0; right: 0; background-color: #D9D9D9; padding: 10px; border-bottom-left-radius: 1rem;">
<!-- Content -->
<section id="content">
<div id="content-1" style="display: flex; padding: 30px 10px 10px; min-height: 305px;">
<div id="content-1" style="display: flex; padding: 30px 10px 10px; min-height: 305px;">
<div style="margin-left: 10px;">
<div style="display:flex; justify-content: space-between;">
Expand All @@ -28,10 +29,7 @@ import{detectAdBlock}from"/resources/detectAdBlock.js";export default class Anti
</div>
<img src="./assets/adIcon.png" id="ad-icon" style="width: 100%; height: 100%;">
</div>
</div>
</section>
<p style="text-align: center; margin: 20px 0; font-size: .9rem;">
Expand All @@ -43,16 +41,15 @@ import{detectAdBlock}from"/resources/detectAdBlock.js";export default class Anti
<div style="display: flex;">
<span onclick="toggleContent()" id="how-to-remove" style="width: 50%; height: 60px; padding: 10px; text-align: center; display: flex; justify-content: center; align-items:center; border-top: 1px solid rgb(121, 121, 121); cursor: pointer; background-color: white; ">Come lo disattivo?</span>
<span onclick="location.reload()" style="width: 50%; height: 60px; padding: 10px; text-align: center; display: flex; justify-content: center; align-items:center; border-top: 1px solid rgb(121, 121, 121); cursor: pointer; background-color: black; color: white; ">Ok, fatto!</span>
<span onclick="toggleContent()" id="how-to-remove" style="width: 50%; height: 60px; padding: 10px; text-align: center; display: flex; justify-content: center; align-items:center; border-top: 1px solid rgb(121, 121, 121); cursor: pointer; background-color: white; ">Come lo disattivo?</span>
<span onclick="location.reload()" style="width: 50%; height: 60px; padding: 10px; text-align: center; display: flex; justify-content: center; align-items:center; border-top: 1px solid rgb(121, 121, 121); cursor: pointer; background-color: black; color: white; ">Ok, fatto!</span>
</div>
</div>
</div>
<style>
#ad-icon-small{
display: none;
Expand All @@ -69,24 +66,4 @@ import{detectAdBlock}from"/resources/detectAdBlock.js";export default class Anti
}
</style>
<script>
function toggleContent(){
const content = document.getElementById('content');
const button = document.getElementById('how-to-remove');
//if content include <p> then remove it
if(content.innerHTML.includes('<div id="content-1"')){
content.innerHTML = 'Page2';
button.innerHTML = 'Indietro';
}else{
content.innerHTML = 'Page1';
button.innerHTML = 'Come lo disattivo?';
}
}
</script>
`)}}}
Loading

0 comments on commit d1a772e

Please sign in to comment.