| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <!DOCTYPE html>
- <html lang="en">
- <!-- Polls the check_donations route every three seconds. When a new donation is found,
- the alert is displayed for ten seconds. -->
- <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>New Donation 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.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('/checkDonations')
- .then(response => response.json())
- .then(data => {
- if (data) {
- const alertVid = document.getElementById('alertVid');
- const alertImg = document.getElementById('alertImg');
- const textBox = document.getElementById('textBox');
- const donationName = data.name;
- const donationAmount = data.amount;
- textBox.innerHTML = `
- ${donationName}<br>
- $${donationAmount}
- `;
- 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 donations every 3 seconds
- </script>
- </body>
- </html>
|