logistic-bot/food-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

started with new design

Browse source
This commit is contained in:
Khaïs COLIN 2025-10-20 14:34:24 +02:00
parent 28ea420ecb
commit 9238366137
Signed by: logistic-bot
SSH key fingerprint: SHA256:RlpiqKeXpcPFZZ4y9Ou4xi2M8OhRJovIwDlbCaMsuAo
6 changed files with 525 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

75
templates/food.html
View file

@ -1,28 +1,51 @@
<div style="border: 1px solid black; margin: 1em; padding: 1em; background: {{ food.color }};" id="food-{{ food.id }}">
<div style="text-align: center;">
<p>
<b>{{ food.name }}</b>
</p>
{{ food.portion }} ({{ food.kc_per_serving }} kc.)
<br>
<progress max="{{food.target_servings}}" value="{{food.actual_servings}}" {% if food.actual_servings>
food.target_servings %}
style="accent-color: red;"
{% endif %}>
</progress>
{{ food.actual_servings }}/{{ food.target_servings }}
</div>
<br>
<form method="post">
<div style="text-align: center;">
<button hx-post="/decrease/{{ food.id }}" hx-target="#food-{{ food.id }}" hx-swap="outerHTML"
style="width: 40%; height: 3em;" {% if food.actual_servings <=0 %} disabled {% endif %}>
-
</button>
<button hx-post="/increase/{{ food.id }}" hx-target="#food-{{ food.id }}" hx-swap="outerHTML"
style="width: 40%; height: 3em;">
+
</button>
<div class="card">
<p class="food-name">
{{ food.name }}
</p>
<div class="card-inner">
<div class="amounts">
<p class="unit">
<sup>1</sup>&frasl;<sub>4</sub> Cup
</p>
<p class="kc">
{{ food.kc_per_serving }} kc
</p>
</div>
</form>
<div class="buttons">
<button class="increase">+</button>
<button class="decrease">-</button>
</div>
<div class="checkboxes">
<label class="ok">
<input type="checkbox" checked>
</label>
<label class="ok">
<input type="checkbox">
</label>
<label class="ok">
<input type="checkbox" checked>
</label>
<label class="bad">
<input type="checkbox" checked>
</label>
<label class="bad">
<input type="checkbox" checked>
</label>
<label class="bad">
<input type="checkbox">
</label>
<label class="bad">
<input type="checkbox">
</label>
<label class="bad">
<input type="checkbox">
</label>
<label class="bad">
<input type="checkbox">
</label>
<label class="bad">
<input type="checkbox">
</label>
</div>
</div>
</div>