Files
vogelalbum/web/templates/dex/widget.html
T
christian a97f066e92 Zuschnitt als Regel statt als gespeichertes Bild
Die Sichtung merkt sich jetzt, WO der Vogel im Foto sitzt (vier Zahlen); die
Anzeige schneidet daraus bei jedem Aufruf. Eine geaenderte Regel wirkt damit
sofort auf den ganzen Bestand. Altbestand faellt auf das alte Bild zurueck.
2026-10-14 18:41:52 +00:00

43 lines
1.8 KiB
HTML

{% load static i18n dex_extras %}{% get_current_language as LANG %}<!doctype html>
<html lang="{{ LANG }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vogelalbum</title>
<link rel="stylesheet" href="{% static_v 'css/vogelalbum.css' %}">
<style>
/* Im iframe gibt es keine Navigation und keinen Seitenrand. */
body { background: transparent; }
.wrap { padding: 0; max-width: none; }
.widget { display: flex; gap: 14px; align-items: center;
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); padding: 14px; }
.widget img { width: 96px; height: 74px; object-fit: cover;
border-radius: 10px; background: #0b120e; flex-shrink: 0; }
</style>
</head>
<body>
<div class="wrap">
<div class="widget">
{% if latest %}
{% if latest.kachel_url %}<img src="{{ latest.kachel_url }}" alt="{{ latest.effective_species.name }}">{% endif %}
<div style="min-width:0">
<div class="sub">{% trans "Zuletzt gesehen" %}</div>
<div style="font-weight:700; font-size:18px; margin:2px 0 4px">{{ latest.effective_species.name }}</div>
<div class="sub">{{ latest.started_at|zeitpunkt }} · {% widthratio latest.confidence 1 100 %}% {% trans "sicher" %}</div>
</div>
{% else %}
<div>
<div class="sub">Vogelalbum</div>
<div style="font-weight:700; font-size:18px">{% trans "Noch kein Gast" %}</div>
</div>
{% endif %}
<div style="margin-left:auto; text-align:right; flex-shrink:0">
<div style="font-weight:800; font-size:22px">{{ progress.species_seen }}<span class="sub" style="font-size:15px">/{{ progress.species_total }}</span></div>
<div class="sub">{% trans "Arten" %}</div>
</div>
</div>
</div>
</body>
</html>