|
|
@@ -0,0 +1,87 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<!-- Polls the check_milestones route every three seconds. When a new milestone is reached,
|
|
|
+the alert is displayed for ten seconds. -->
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Milestone Reached 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 nameBox */
|
|
|
+ }
|
|
|
+
|
|
|
+ #alertImg {
|
|
|
+ display: none;
|
|
|
+ max-height: 100px;
|
|
|
+ position: absolute; /* Allow positioning */
|
|
|
+ z-index: 1; /* Ensure it's below nameBox */
|
|
|
+ }
|
|
|
+
|
|
|
+ #nameBox {
|
|
|
+ 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="nameBox"></div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ setInterval(function() {
|
|
|
+ fetch('/checkMilestones')
|
|
|
+ .then(response => response.json())
|
|
|
+ .then(data => {
|
|
|
+ if (data) {
|
|
|
+ const alertVid = document.getElementById('alertVid');
|
|
|
+ const alertImg = document.getElementById('alertImg');
|
|
|
+ const nameBox = document.getElementById('nameBox');
|
|
|
+
|
|
|
+ const alertName = data.name;
|
|
|
+
|
|
|
+ nameBox.innerHTML = `
|
|
|
+ ${alertName}
|
|
|
+ `;
|
|
|
+ nameBox.style.display = 'block';
|
|
|
+
|
|
|
+ alertVid.style.display = 'block';
|
|
|
+ alertImg.style.display = 'block';
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ alertVid.style.display = 'none';
|
|
|
+ alertImg.style.display = 'none';
|
|
|
+ nameBox.style.display = 'none';
|
|
|
+ }, 10000); // Visible for 10 seconds
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 3000); // Check for new followers every 3 seconds
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
