/home/ejrndhmu/tokobiolink.com/index_hmh.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="https://f.top4top.io/p_3430ppuro0.png" type="image/x-icon">
    <title>𝐇𝐦𝐇•𝐒𝐨𝐜𝐢𝐞𝐭𝐲</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');

        * {
            cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), progress !important;
            font-family: "Exo 2", sans-serif;
            transition: .3s;
        }

        body {
            font-family: 'Hacked', sans-serif;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: black;
        }

        .deface {
            transform: translateY(5%);
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.788);
            z-index: 1;
        }

        img {
            width: 13%;
            border-radius: 50%;
            position: relative;
            z-index: 2;
        }

        img:hover {
            filter: drop-shadow(0 0 30px rgba(43, 255, 0, 0.521));
        }

        h1 {
            color: rgb(0, 255, 0);
            filter: drop-shadow(0 0 5px rgba(43, 255, 0, 0.74));
            font-size: 50px;
            z-index: 2;
        }

        p {
            font-size: 25px;
            color: rgb(0, 255, 0);
            filter: drop-shadow(0 0 5px rgba(43, 255, 0, 0.74));
        }

        hr {
            border: 0px solid rgb(0, 255, 0);
            background-color: rgb(0, 255, 0);
            width: 60%;
            box-shadow: 0 0px 16px rgb(0, 255, 0);
            padding: 1px;
            z-index: 2;
        }

        marquee {
            width: 30%;
            font-size: 20px;
            color: rgb(0, 255, 0);
            filter: drop-shadow(0 0 5px rgba(43, 255, 0, 0.74));
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
            text-align: center;
            padding-top: 20px;
        }

        canvas {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            background-color: rgba(0, 0, 0, 0.2);
        }

        h2 {
            width: 25%;
            padding: 5px;
            margin: 30px;
            font-family: sans-serif;
            filter: drop-shadow(0 0 7px rgb(0, 173, 0));
            top: 0;
            right: 0;
            color: rgb(0, 255, 0);
            border-radius: 7px;
            transition: .2s;
        }

        h2:hover {
            transition: .2s;
            color: rgb(0, 255, 0);
            filter: drop-shadow(0 0 7px rgb(0, 255, 0));
        }

        a {
            width: 0%;
            text-decoration: none;
        }

        #co {
            transform: translateY(-10px);
            font-size: 20px;
        }

        .footer {
            position: static;
            transform: translateY(180%);
            text-align: center;
            padding: 28px;
        }

        #hr {
            width: 100%;
        }

        #aviso {
            width: 70%;
        }

        @media only screen and (max-width: 726px) {
            img {
                width: 40%;
                max-width: none;
                transition: .6s;
            }
        }

        @media only screen and (max-width: 726px) {
            body {
                overflow-y: auto;
            }
        }

        @media only screen and (max-width: 1000px) {
            h2 {
                width: 100%;
            }
        }
    </style>
    <script>
        document.addEventListener('contextmenu', event => event.preventDefault());
        document.onkeydown = function(e) {
            if (e.ctrlKey && (e.key === 'u' || e.key === 'i' || e.key === 's' || e.key === 'h' || e.key === 'j' || e.key === 'c' || e.key === 'k')) {
                return false;
            }
            if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
                return false;
            }
        };
    </script>
    <meta name="description" content="Matrix rain with pure JavaScript" />
</head>

<body>
    <canvas id="matrix"></canvas>
    <div class="overlay"></div>
    <div class="content">
        <div class="deface">
        <img src="https://f.top4top.io/p_3430ppuro0.png" alt="wh0l5r00t">
        <h1>𝐇𝐦𝐇•𝐒𝐨𝐜𝐢𝐞𝐭𝐲</h1>
        <hr>
        <p>Gotchaaaa Aprilmop</p>
        <center>
        <p id="aviso">•</p>
    </center>
        <p>#HOBARHUBAR</p>
        <hr>
    </div>
        <br>
        <div class="footer">
        <hr id="hr">
        <p id="co">HmH§ociety</p>
        </div>
    </div>
    <script>
        const c = document.getElementById("matrix");
        const ctx = c.getContext("2d");
        c.height = window.innerHeight;
        c.width = window.innerWidth;
        const letters = ["日", "ﾊ", "ﾐ", "ﾋ", "ｰ", "ｳ", "ｼ", "ﾅ", "ﾓ", "ﾆ", "ｻ", "ﾜ", "ﾂ", "ｵ", "ﾘ", "ｱ", "ﾎ", "ﾃ", "ﾏ", "ｹ", "ﾒ", "ｴ", "ｶ", "ｷ", "ﾑ", "ﾕ", "ﾗ", "ｾ", "ﾈ", "ｽ", "ﾀ", "ﾇ", "ﾍ", ":", "・", ".", "=", "*", "+", "-", "<", ">", "¦", "｜", "ﾘ"];
        const fontSize = 20;
        const columns = c.width / fontSize;
        let drops = [];
        for (let x = 0; x < columns; x++)
            drops[x] = 1;

        function draw() {
            ctx.fillStyle = "rgba(0, 0, 0, 0.06)";
            ctx.fillRect(0, 0, c.width, c.height);
            ctx.fillStyle = "#0F0";
            ctx.font = `${fontSize}px arial`;
            for (let i = 0; i < drops.length; i++) {
                const text = letters[Math.floor(Math.random() * letters.length)];
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                if (drops[i] * fontSize > c.height && Math.random() > 0.975)
                    drops[i] = 0;
                drops[i]++;
            }
            window.requestAnimationFrame(draw);
        }
        draw();
    </script>
    <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                },
                i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-58087941-1', 'auto');
        ga('send', 'pageview');
        ga('send', 'event', 'labs', 'matrix');
    </script>
</body>

</html>
Path: home/ejrndhmu/tokobiolink.com