donation.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!-- Polls the check_donations route every three seconds. When a new donation is found,
  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>New Donation 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('/checkDonations')
  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 donationName = data.name;
  35. const donationAmount = data.amount;
  36. textBox.innerHTML = `
  37. ${donationName}<br>
  38. $${donationAmount}
  39. `;
  40. textBox.style.display = 'block';
  41. alertVid.style.display = 'block';
  42. alertImg.style.display = 'block';
  43. setTimeout(() => {
  44. alertVid.style.display = 'none';
  45. alertImg.style.display = 'none';
  46. textBox.style.display = 'none';
  47. }, 10000); // Visible for 10 seconds
  48. }
  49. });
  50. }, 3000); // Check for new donations every 3 seconds
  51. </script>
  52. </body>
  53. </html>