deadtom
/
OwnchatBot


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Active goals</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <style>
        body {
            background-color: transparent;
            color: white;
            width: 600px;
            text-align: left;
            font-weight: bold;
        }
    </style>
    <script>
        function checkForUpdates() {
            fetch('/updateGoals')
                .then(response => response.json())
                .then(data => {
                    if (data.updated) {
                        console.log('Goals have changed, refreshing the page...');
                        window.location.reload();  // Refresh if goals have changed
                    } else {
                        console.log('No changes detected.'); // Log if no changes
                    }
                })
                .catch(error => console.error('Error fetching updated goals:', error));
        }

        setInterval(checkForUpdates, 15 * 1000); // Check every 15 seconds
    </script>
</head>
<body style="position: absolute; bottom: 0; left: 0;">
    {% if goals %}
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th style="width: 50%"></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            {% for goal in goals %}
                <tr>
                    <td style="text-align: left;">{{ goal[3] }}</td>
                    {% set progress = goal[1] / goal[2] * 100 %}
                    <td>
                        <div class="bar-light-grey bar-tiny bar-round" style="position: relative;">
                            <div class="bar-round bar-blue" style="text-align: center; width:{{ progress }}%;">{{ '%0.0f'| format(progress| float) }}%
                            </div>
                            {% set milestones = rewards[goal[0]]["milestones"] %}
                            {% for milestone_key, milestone in milestones.items() %}
                                {% if milestones[milestone_key][0] and milestones[milestone_key][1] %}
                                    {% if milestones[milestone_key][1] < goal[2] %}
                                        {% set milestone_progress = milestones[milestone_key][1] / goal[2] * 100 %}
                                        <div class="milestone-marker" style="position: absolute; left: {{ milestone_progress }}%; transform: translateX(-50%);">
                                            <img src="/static/img/milestone.png" style="width: 16px; height: 16px;" title="{{ milestones[milestone_key][1] }} points. {{ milestones[milestone_key][0] }}">
                                        </div>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </td>
                    {% if goal[1] == goal[2] %}
                    <td style="text-align: right;">{{ goal[1] }} / {{ goal[2] }} <img src="/static/img/tada.png" style="width: 24px; height: 24px;"></td>
                    {% else %}
                    <td style="text-align: right;">{{ goal[1] }} / {{ goal[2] }}</td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endif %}
</body>
</html>