| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>OwnchatBot 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('/checkAlerts')
- .then(response => response.json())
- .then(data => {
- if (data) {
- const alertVid = document.getElementById('alertVid');
- const alertImg = document.getElementById('alertImg');
- const textBox = document.getElementById('textBox');
- textBox.innerHTML = `
- `;
- 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>
|