
<!DOCTYPE html>
<!--
    Developed by Sergey Drozdov
    https://sd.blackball.lv/
-->
<html>
<head>
    <meta charset="utf-8" />
    <title>Gateway .::. Blackball</title>
    <meta name="Description" content="Gateway page is the part of Blackball Web Application Firewall." />
    <meta name="web application firewall, security" />
    <meta http-equiv="Cache-Control" content="public, max-age=86400" />
    <meta name="Revisit" content="1" />
    <meta name="Robots" content="index, follow" />
    <meta name="Resource-type" content="Document" />
    <meta name="Author" content="Sergey Drozdov" />
    <meta name="Copyright" content="2000-2025 Sergey Drozdov" />
    <link rel="canonical" href="https://blackball.lv/gateway" />
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <script src="/scripts/blackball.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
/*        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
*/
.site-title {
    margin: 0;
    padding: 0;
    font-family: -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    font-size: 32pt;
    font-weight: 500;
    color: #000
}
.center-block {
    font-size: 2rem;
}
.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 100%;
    max-height: 250px;
}

.circle-bg {
    stroke: #e6e6e6;
}

.circle {
    transition: stroke-dashoffset 1s linear, stroke 0.3s linear;
    transform: rotate(0deg); /* Start from the top */
    transform-origin: center;
}

.form-label {
    font-weight: 600;
    margin: 4px 0 4px 0
}

.form-required:after {
    color: #e00;
    content: " *"
}

.form-control {
    font-size: 12pt;
    padding: 6px;
    margin: 4px 0 10px 0;
    border: solid 1px #c0c2c4;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
    .form-control:hover {
        box-shadow: 0 0 5px #c0c2c4;
        -webkit-box-shadow: 0 0 5px #c0c2c4;
        -moz-box-shadow: 0 0 5px #c0c2c4;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }
.form-error {
    border: solid 1px #d00;
}
.error-message {
    color: #d00;
    font-size: 10pt;
    margin-top: 4px
}
.lang a {
    text-decoration: none;
    color: #000;
}
    .lang a:hover {
        color: #c00;
    }
.hidden {
    display: none;
}
.gateway-control {
    display: none;
}
.gateway-button {
    display: none;
}
.gatevay-button {
}
/* modal */
.bb-modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.bb-modal-title {
    font-size: 18pt;
    font-weight: normal;
    padding: 0;
    margin: 0
}

.bb-modal-header {
    padding: 20px;
    background-color: #eeeeee;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.bb-modal-body {
    padding: 5px 20px 0 20px;
}

.bb-modal-footer {
    padding: 0 20px 20px 20px;
}

.bb-modal-content {
    background-color: #fff;
    margin: auto;
    border: 1px solid #777;
    border-radius: 10px;
    width: 100%;
}

@media (max-width: 450px) {
    .bb-modal-content {
        width: 400px;
    }
}

.bb-modal-md {
    margin: auto;
    width: 500px;
}

.bb-modal-lg {
    margin: auto;
    width: 800px;
}

.bb-modal-xs {
    margin: auto;
    width: 1200px;
}

.bb-modal-result {
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    color: #0b0
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
/* end of modal */
</style>
</head>
<body>
<form method="post" action="./gateway" id="MainForm">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="+aOMt8vzsqfD2u+EOdlbmYNItH7HSy4E3GGL6alK+CO1ae4bms5nc4SBagxelpai2jGHHgnrEdCtVCJ8j3TARFt0eIwxSUDHgZcA2h58cKl69fbBqFnVSECF//6he3wI7E1NrbbB/btN3222NIMPBmnI/WpSCLpu9lrplIhln+Z0jKvqYJ4GI06PQqid6rv6ydvi2g==" />

<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="5698C502" />
    <div style="padding: 10px; float: left">
        <a href="javascript:m2a();" id="btnOpenMsgDialog" class="tm"><i class="fa fa-envelope-o"></i> Написать администратору</a>
    </div>
    <div class="lang" style="padding: 10px; float: right">
        <a href="?lang=ru">RU</a>
        &nbsp;
        <a href="?lang=en">EN</a>
        &nbsp;
        <a href="?lang=lv">LV</a>
    </div>

    <div class="clear" style="width: 400px; margin: 0 auto; padding-top: 100px">
        <div align="center" style="border-bottom: solid 1px #e0e2e4">
            <h1 class="site-title">B&nbsp;&nbsp;l&nbsp;&nbsp;a&nbsp;&nbsp;c&nbsp;&nbsp;k&nbsp;&nbsp;b&nbsp;&nbsp;a&nbsp;&nbsp;l&nbsp;&nbsp;l</h1>
        </div>
        <div class="center-block">
            <span id="width">...</span>
            x
            <span id="height">...</span>
            <br />
            <br />
            <input type="hidden" id="screenWidth" name="screenWidth" value="0" />
            <input type="hidden" id="screenHeight" name="screenHeight" value="0" />
            <input onclick="__doPostBack('btnNotRobot','')" name="btnNotRobot" type="button" id="btnNotRobot" value="Continue" class="bb-btn btn-large" style="display: none" />
            <input name="token" type="hidden" id="token" />
            <input name="score" type="hidden" id="score" value="0" />
            <input name="txtName" type="text" id="txtName" class="gateway-control" autocomplete="off" />
            
            <input onclick="__doPostBack('btnStartUse','')" name="btnStartUse" type="button" id="btnStartUse" value="Continue" class="bb-btn btn-large gateway-button" />

            <div id="status">Осталось времени, чтобы отметить как робота.</div>

            <div id="countdown-container" style="position: relative; width: 100px; height: 100px; margin: 20px auto;">
                <svg width="100" height="100" viewBox="0 0 36 36" class="circular-chart">
                    <path class="circle-bg"
                            d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831"
                            fill="none"
                            stroke="#e6e6e6"
                            stroke-width="2"></path>
                    <path id="circle-progress"
                            class="circle"
                            d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831"
                            fill="none"
                            stroke="#000"
                            stroke-width="2"
                            stroke-dasharray="100"
                            stroke-dashoffset="0"
                            stroke-linecap="round"></path>
                </svg>
                <div id="countdown-text" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; color: #000;">30</div>
            </div>
        </div>
    </div>
    <div style="position: fixed; bottom: 0; width: 100%; padding: 10px">
        <div style="float: left">
            2000&ndash;2026 &bull; Blackball
        </div>
        <div style="float: right; padding: 0 20px 0 0">

            
            <!-- puls.lv START //-->
            <div id="_puls.lv_23151" style="display:inline-block;"></div>
            <SCRIPT type="text/javascript">var _puls_counter_id = 23151;</SCRIPT>
            <SCRIPT async src="//hits.puls.lv/?sid=23151&js=1" type="text/javascript"></SCRIPT>
            <noscript>
            <a href="https://puls.lv/" target="_blank"><img src="//hits.puls.lv/?sid=23151&jsver=0" border=0 alt="PULS.LV Professional rating system"></a>
            </noscript>
            <!-- puls.lv END //-->
            
        </div>
    </div>
<div id="bb-modal-msg2admin" class="bb-modal" tabindex="-1">
    <div class="bb-modal-dialog bb-modal-md">
        <div class="bb-modal-content">
            <div class="bb-modal-header">
                <h5 class="bb-modal-title">Сообщение администратору</h5>
            </div>
            <div class="bb-modal-body">
                <div class="form-label">Имя:</div>
                <div><input type="text" id="name" name="name" class="form-control" style="width: 60%" /></div>
                
                <div class="form-label">Почта:</div>
                <div><input type="text" id="email" name="email" class="form-control" style="width: 60%" /></div>
                
                <div class="form-label form-required">Сообщение:</div>
                <div>
                    <textarea id="message" name="message" cols="40" rows="2" class="form-control" style="width: 97%; height: 120px"></textarea>
                    <div id="message-error"></div>
                </div>
                <div style="margin: 10px 0 10px 0" id="bb-modal-m2a-result"></div>
            </div>
            <div class="bb-modal-footer">
                <input type="button" id="btnSendMessage" value="Отправить" class="bb-btn btn-large" onclick="SendMessage(event)" />
                <input type="button" id="btnCloseMessage" value="Отменить" class="bb-btn-secondary btn-large btn-close-modal" style="float: right" onclick="CloseMessage()" />
            </div>
        </div>
    </div>
</div>
<script>
    let humanScore = 0;
    const startTime = Date.now();

    document.addEventListener('mousemove', () => humanScore += 2);
    document.addEventListener('scroll', () => humanScore += 3);
    document.addEventListener('click', () => humanScore += 5);

    const scoreInput = document.getElementById('score');
    function updateHumanScore() {
        scoreInput.value = humanScore;
    }
    setInterval(updateHumanScore, 500);

    document.getElementById('token').value = btoa((Date.now() + Math.random()).toString());

    const modal = document.getElementById("bb-modal-msg2admin");
    const modalResult = document.getElementById("bb-modal-m2a-result");
    let name = document.getElementById("name");
    let email = document.getElementById("email");
    let message = document.getElementById("message");

    function m2a() {
        modal.style.display = "block";
    }
    function CloseMessage() {
        modal.style.display = "none";
    }

    function SendMessage(e) {
        e.preventDefault();

        let formData = new FormData();
        formData.append("name", name.value);
        formData.append("email", email.value);
        formData.append("message", message.value);
        formData.append("url", "/gateway");
        formData.append("cmd", "sendmessage2admin");

        fetch('/ajax/AjaxProcessor', { method: 'POST', body: formData })
            .then(response => response.json())
            .then(response => {
                if (response.statusCode === 200) {
                    modalResult.className = "bb-modal-result";
                    modalResult.innerHTML = response.message;

                    let controls = ["name", "email", "message"];
                    controls.forEach((item) => {
                        const element = document.getElementById(item);
                        const errorElement = document.getElementById(`${item}-error`);

                        if (element) {
                            element.classList.remove("form-error");
                        }

                        if (errorElement) {
                            errorElement.innerHTML = "";
                            errorElement.classList.remove("error-message");
                        }
                    });
                    setTimeout(function () {
                        controls.forEach((item) => {
                            const element = document.getElementById(item);
                            if (element) {
                                element.value = "";
                            }
                        });
                        modalResult.innerHTML = "";
                        CloseMessage();
                    }, 3000);
                } else {
                    modalResult.innerHTML = "";
                    response.errors.forEach((item) => {
                        const element = document.getElementById(item.name);
                        const errorElement = document.getElementById(`${item.name}-error`);

                        if (item.message !== "") {
                            if (element) {
                                element.classList.add("form-error");
                            }
                            if (errorElement) {
                                errorElement.innerHTML = item.message;
                                errorElement.classList.add("error-message");
                            }
                        } else {
                            if (element) {
                                element.classList.remove("form-error");
                            }
                            if (errorElement) {
                                errorElement.innerHTML = "";
                                errorElement.classList.remove("error-message");
                            }
                        }
                    });
                }
            });
    }

    window.onload = (e) => {
        let screenWidth = window.screen.width || window.innerWidth;
        if (screenWidth === 0) {
            screenWidth = document.documentElement.clientWidth || document.body.clientWidth || document.body.offsetWidth;
        }
        let screenHeight = window.screen.height || window.innerHeight;
        if (screenHeight === 0) {
            screenHeight = document.documentElement.clientHeight || document.body.clientHeight || document.body.offsetHeight;
        }

        const widthSpan = document.getElementById("width");
        const heightSpan = document.getElementById("height");
        widthSpan.innerText = screenWidth;
        heightSpan.innerText = screenHeight;
        document.getElementById("screenWidth").value = screenWidth;
        document.getElementById("screenHeight").value = screenHeight;

        const btnStart = document.getElementById("btnStart");

        setTimeout(() => {
            btnStart.style.display = "inline-block";
        }, 3000);

        const countdownStatus = document.getElementById("status");
        countdownStatus.style.fontSize = "1.5rem";
        countdownStatus.style.marginTop = "20px";

        const totalTime = 30;
        let timeLeft = totalTime;

        const countdownContainer = document.getElementById("countdown-container");
        const circle = document.getElementById("circle-progress");
        const countdownText = document.getElementById("countdown-text");

        const updateCircle = (time) => {
            const progress = (time / totalTime) * 100;
            const redValue = Math.floor((1 - time / totalTime) * 255);
            const remainingColor = `rgb(${redValue}, 0, 0)`;

            const dashOffset = 100 - progress;
            circle.style.strokeDasharray = `100`;
            circle.style.strokeDashoffset = dashOffset;
            circle.style.stroke = remainingColor;
            countdownText.style.color = remainingColor;
        };

        const timer = setInterval(() => {
            if (timeLeft <= 0) {
                clearInterval(timer);
                countdownText.innerText = "0";
                circle.style.stroke = "gray";

                var formData = new FormData();
                formData.append("cmd", "mark-visitor-as-bot");
                formData.append("score", humanScore);
                fetch('/ajax/AjaxProcessor', { method: 'POST', body: formData })
                    .then(response => response.json())
                    .then(data => {
                        countdownStatus.innerText = data.message;
                        countdownContainer.style.display = 'none'
                    })
                    .catch(error => {
                        countdownStatus.innerText = "";
                        countdownContainer.style.display = 'none'
                        console.error("Error: " + error.message);
                    });
            } else {
                countdownText.innerText = timeLeft;
                updateCircle(timeLeft);
                timeLeft--;
            }
        }, 1000);
    };

    document.addEventListener("DOMContentLoaded", () => {
        if (modal) {
            window.addEventListener("click", (event) => {
                if (event.target === modal) {
                    CloseMessage();
                }
            });
        }
    });
</script>
</form>
</body>
</html>
