2025-10-18 20:54:23 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2025-10-18 21:21:58 +02:00
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
|
<title>Food Tracker</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<main>
|
2025-10-18 22:45:44 +02:00
|
|
|
<div style="display: flex-root; margin: auto; width: fit-content;">
|
2025-10-18 21:21:58 +02:00
|
|
|
{% for food in foods %}
|
2025-10-18 22:45:44 +02:00
|
|
|
<div style="border: 1px solid black; margin: 1em; padding: 1em;">
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
<p>
|
|
|
|
|
<b>{{ food.name }}</b>
|
|
|
|
|
</p>
|
|
|
|
|
{{ food.portion }} ({{ food.kc_per_serving }} kc.)
|
|
|
|
|
<br>
|
2025-10-18 21:21:58 +02:00
|
|
|
<progress max="{{food.target_servings}}" value="{{food.actual_servings}}" {% if food.actual_servings>
|
2025-10-18 22:12:51 +02:00
|
|
|
food.target_servings %}
|
|
|
|
|
style="accent-color: red;"
|
|
|
|
|
{% endif %}>
|
|
|
|
|
</progress>
|
2025-10-18 21:21:58 +02:00
|
|
|
{{ food.actual_servings }}/{{ food.target_servings }}
|
2025-10-18 22:45:44 +02:00
|
|
|
</div>
|
|
|
|
|
<br>
|
|
|
|
|
<form method="post">
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
<button formaction="/decrease/{{ food.id }}" style="width: 40%; height: 3em;" {% if food.actual_servings <=0
|
|
|
|
|
%} disabled {% endif %}>-</button>
|
|
|
|
|
<button formaction="/increase/{{ food.id }}" style="width: 40%; height: 3em;">+</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2025-10-18 20:54:23 +02:00
|
|
|
{% endfor %}
|
2025-10-18 22:45:44 +02:00
|
|
|
<div style="background-color: lightblue; margin: 1em;">
|
|
|
|
|
<b style="font-size: 24px; padding: 1em;">Total: {{ sum }} kc.</b>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-10-18 21:21:58 +02:00
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
