index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="dist/ab.d.js"></script>
</head>

<body>
    <div id="app">
        <div class="container">
            <h1>AB.d.js</h1>
            <p>The AdBlocker detector and tester</p>

            <div class="results">
                <div class="result" id="result-dom"></div>
                <div class="result" id="result-interceptor"></div>
            </div>

            <p id="final-result" style="color: #4f4">Adblock non detected</p>
        </div>
    </div>

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
            background-color: #121212;
            color: #ddd;
        }

        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            border: 1px solid #fff2;
            border-radius: 12px;
            padding: 10px 20px;
        }

        h1 {
            letter-spacing: 4px;
            font-weight: 400;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            text-align: center;
        }

        p {
            text-align: center;
        }

        .results {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .result {
            border: 1px solid #fff2;
            border-radius: 12px;
            padding: 5px 10px;
        }
    </style>

    <script>
        function toggleOn() {
            document.getElementById("final-result").style.color = "#f44";
            document.getElementById("final-result").innerHTML = "Adblock detected";
        }

        function runTest(fn, id, name) {
            fn().then((res) => {
                const success = `✅ Pass ${name} test.`;
                const err = `❌ Triggered ${name} test.`;
                document.getElementById(id).innerHTML = res ? err : success;

                if (res) {
                    toggleOn();
                }
            })
        }

        async function main() {
            const el = document.getElementById("app");
            const abd = window.ABD;

            runTest(window.ABD.runTestDom, "result-dom", "DOM");
            runTest(window.ABD.runTestScriptInterceptor, "result-interceptor", "Scripts Interceptor");
        }

        main();
    </script>
</body>

</html>