ocbalert.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>OwnchatBot Alert</title>
  7. <style>
  8. body {
  9. background-color: transparent;
  10. position: relative; /* Ensure relative positioning for absolute children */
  11. }
  12. #alertVid {
  13. display: none;
  14. max-height: 100px;
  15. position: absolute; /* Allow positioning with top, left, etc. */
  16. z-index: 1; /* Ensure it's below textBox */
  17. }
  18. #alertImg {
  19. display: none;
  20. max-height: 100px;
  21. position: absolute; /* Allow positioning */
  22. z-index: 1; /* Ensure it's below textBox */
  23. }
  24. #textBox {
  25. display: none;
  26. position: absolute;
  27. top: 20%; /* Adjust as needed */
  28. left: 50%; /* Center horizontally */
  29. transform: translateX(-50%); /* Center */
  30. color: black;
  31. z-index: 2; /* Ensure it appears above alertImg and alertVid */
  32. font-size: 20px; /* Adjust as needed */
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. {% if not alert_name %}
  38. <div id="alertVid"></div>
  39. <div id="alertImg"></div>
  40. {% elif "webm" in alert_name %}
  41. <video id="alertVid" autoplay>
  42. <source src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}" type="video/webm">
  43. </video>
  44. <div id="alertImg"></div>
  45. {% else %}
  46. <div id="alertVid"></div>
  47. <img id="alertImg" src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}">
  48. {% endif %}
  49. <div id="textBox"></div>
  50. <script>
  51. setInterval(function() {
  52. fetch('/checkAlerts')
  53. .then(response => response.json())
  54. .then(data => {
  55. if (data) {
  56. const alertVid = document.getElementById('alertVid');
  57. const alertImg = document.getElementById('alertImg');
  58. const textBox = document.getElementById('textBox');
  59. textBox.innerHTML = `
  60. `;
  61. textBox.style.display = 'block';
  62. alertVid.style.display = 'block';
  63. alertImg.style.display = 'block';
  64. setTimeout(() => {
  65. alertVid.style.display = 'none';
  66. alertImg.style.display = 'none';
  67. textBox.style.display = 'none';
  68. }, 10000); // Visible for 10 seconds
  69. }
  70. });
  71. }, 3000); // Check for new subscribers every 3 seconds
  72. </script>
  73. </body>
  74. </html>