goals.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="refresh" content="5">
  7. <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
  8. <title>Active goals</title>
  9. <style>
  10. body {
  11. background-color: transparent;
  12. color: white;
  13. width: 600px;
  14. text-align: left;
  15. }
  16. </style>
  17. </head>
  18. <body style="position: absolute;
  19. bottom: 0; left: 0;">
  20. {% if goals %}
  21. <table>
  22. <thead>
  23. <tr>
  24. <th></th>
  25. <th style="width: 50%"></th>
  26. <th></th>
  27. </tr>
  28. </thead>
  29. <tbody>
  30. {% for goal in goals %}
  31. <tr>
  32. <td style="text-align: left;"> {{ goal[3] }} </td>
  33. {% set progress = goal[1] / goal[2] * 100 %}
  34. <td><div class="bar-light-grey bar-tiny bar-round">
  35. <div class="bar-round bar-blue" style="text-align: center; width:{{ goal[1] / goal[2] * 100 }}%;">{{ '%0.0f'| format(progress| float) }}%</div>
  36. </div>
  37. </td>
  38. {% if goal[1] == goal[2] %}
  39. <td style="text-align: right;">{{ goal[1] }} / {{ goal[2] }} <img src=/static/img/tada.png style="width: 24px; height: 24px;"></td>
  40. {% else %}
  41. <td style="text-align: right;">{{ goal[1] }} / {{ goal[2] }}</td>
  42. {% endif %}
  43. </tr>
  44. {% endfor %}
  45. </tbody>
  46. </table>
  47. {% endif %}
  48. </body>
  49. </html>