deadtom
/
OwnchatBot


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<html lang="en">
<!-- Polls the check_subscribers route every three seconds. When a new subscriber is found,
the alert is displayed for ten seconds. -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Subscriber Alert</title>
    <style>
        body {
            background-color: transparent;
            position: relative; /* Ensure relative positioning for absolute children */
        }

        #alertVid {
            display: none;
            max-height: 100px;
            position: absolute; /* Allow positioning with top, left, etc. */
            z-index: 1; /* Ensure it's below textBox */
        }

        #alertImg {
            display: none;
            max-height: 100px;
            position: absolute; /* Allow positioning */
            z-index: 1; /* Ensure it's below textBox */
        }

        #textBox {
            display: none;
            position: absolute;
            top: 20%; /* Adjust as needed */
            left: 50%; /* Center horizontally */
            transform: translateX(-50%); /* Center */
            color: black;
            z-index: 2; /* Ensure it appears above alertImg and alertVid */
            font-size: 20px; /* Adjust as needed */
        }
    </style>
</head>
<body>
    {% if not alert_name %}
        <div id="alertVid"></div>
        <div id="alertImg"></div>
    {% elif "webm" in alert_name %}
        <video id="alertVid" autoplay>
            <source src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}" type="video/webm">
        </video>
        <div id="alertImg"></div>
    {% else %}
        <div id="alertVid"></div>
        <img id="alertImg" src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}">
    {% endif %}

    <div id="textBox"></div>

    <script>
        setInterval(function() {
            fetch('/checkSubscribers')
                .then(response => response.json())
                .then(data => {
                    if (data) {
                        const alertVid = document.getElementById('alertVid');
                        const alertImg = document.getElementById('alertImg');
                        const textBox = document.getElementById('textBox');

                        const subscriberName = data.name;
                        const subscriberTier = data.tiername;

                        textBox.innerHTML = `
                            ${subscriberName}<br>
                            ${subscriberTier} subscriber
                        `;
                        textBox.style.display = 'block';

                        alertVid.style.display = 'block';
                        alertImg.style.display = 'block';

                        setTimeout(() => {
                            alertVid.style.display = 'none';
                            alertImg.style.display = 'none';
                            textBox.style.display = 'none';
                        }, 10000); // Visible for 10 seconds
                    }
                });
        }, 3000); // Check for new subscribers every 3 seconds
    </script>
</body>
</html>