goals.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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. font-weight: bold;
  16. }
  17. </style>
  18. </head>
  19. <body style="position: absolute;
  20. bottom: 0; left: 0;">
  21. {% if goals %}
  22. <table>
  23. <thead>
  24. <tr>
  25. <th></th>
  26. <th style="width: 50%"></th>
  27. <th></th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. {% for goal in goals %}
  32. <tr>
  33. <td style="text-align: left;"> {{ goal[3] }} </td>
  34. {% set progress = goal[1] / goal[2] * 100 %}
  35. <td>
  36. <div class="bar-light-grey bar-tiny bar-round" style="position: relative;">
  37. <div class="bar-round bar-blue" style="text-align: center; width:{{ progress }}%;">{{ '%0.0f'| format(progress| float) }}%
  38. </div>
  39. {% set milestones = rewards[goal[0]]["milestones"] %}
  40. {% for milestone_key, milestone in milestones.items() %}
  41. {% if milestones[milestone_key][0] and milestones[milestone_key][1] %}
  42. {% if milestones[milestone_key][1] < goal[2] %}
  43. {% set milestone_progress = milestones[milestone_key][1] / goal[2] * 100 %}
  44. <div class="milestone-marker" style="position: absolute; left: {{ milestone_progress }}%; transform: translateX(-50%);">
  45. <img src="/static/img/milestone.png" style="width: 16px; height: 16px;" title="{{ milestones[milestone_key][1] }} points. {{ milestones[milestone_key][0] }}">
  46. </div>
  47. {% endif %}
  48. {% endif %}
  49. {% endfor %}
  50. </div>
  51. </td>
  52. {% if goal[1] == goal[2] %}
  53. <td style="text-align: right;">{{ goal[1] }} / {{ goal[2] }} <img src=/static/img/tada.png style="width: 24px; height: 24px;"></td>
  54. {% else %}
  55. <td style="text-align: right;">{{ goal[1] }} / {{ goal[2] }}</td>
  56. {% endif %}
  57. </tr>
  58. {% endfor %}
  59. </tbody>
  60. </table>
  61. {% endif %}
  62. </body>
  63. </html>