deadtom
/
OwnchatBot


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='alertstyle.css') }}">
    <title>Milestone Reached Alert</title>    
</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.assets', asset_name=alert_name) }}" type="video/webm">
        </video>
        <div id="alertImg"></div>
    {% else %}
        <div id="alertVid"></div>
        <img id="alertImg" src="{{ url_for('web_panels.assets', asset_name=alert_name) }}">
    {% endif %}

    <div id="nameBox"></div>

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

                        const alertName = data.name;

                        nameBox.innerHTML = `
                            ${alertName}
                        `;
                        nameBox.style.display = 'block';

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

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