| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 | <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="refresh" content="5">    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">    <title>Active goals</title>    <style>        body {            background-color: transparent;            color: white;            width: 600px;            text-align: left;        }    </style></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>
 |