rmilestone.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!-- Polls the check_milestones route every three seconds. When a new milestone is reached,
  4. the alert is displayed for ten seconds. -->
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <link rel="stylesheet" href="{{ url_for('static', filename='alertstyle.css') }}">
  9. <title>Milestone Reached Alert</title>
  10. </head>
  11. <body>
  12. {% if not alert_name %}
  13. <div id="alertVid"></div>
  14. <div id="alertImg"></div>
  15. {% elif "webm" in alert_name %}
  16. <video id="alertVid" autoplay>
  17. <source src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}" type="video/webm">
  18. </video>
  19. <div id="alertImg"></div>
  20. {% else %}
  21. <div id="alertVid"></div>
  22. <img id="alertImg" src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}">
  23. {% endif %}
  24. <div id="textBox"></div>
  25. <script>
  26. setInterval(function() {
  27. fetch('/checkMilestones')
  28. .then(response => response.json())
  29. .then(data => {
  30. if (data) {
  31. const alertVid = document.getElementById('alertVid');
  32. const alertImg = document.getElementById('alertImg');
  33. const textBox = document.getElementById('textBox');
  34. const alertName = data.name;
  35. textBox.innerHTML = `
  36. ${alertName}
  37. `;
  38. textBox.style.display = 'block';
  39. alertVid.style.display = 'block';
  40. alertImg.style.display = 'block';
  41. setTimeout(() => {
  42. alertVid.style.display = 'none';
  43. alertImg.style.display = 'none';
  44. textBox.style.display = 'none';
  45. }, 10000); // Visible for 10 seconds
  46. }
  47. });
  48. }, 3000); // Check for new followers every 3 seconds
  49. </script>
  50. </body>
  51. </html>