56 lines
2.2 KiB
HTML
56 lines
2.2 KiB
HTML
{% extends "plants/base.html" %}
|
|
{% block title %}Confirm species — PlantDB{% endblock %}
|
|
{% block content %}
|
|
|
|
<div class="d-flex align-items-center gap-2 mb-3">
|
|
<a href="{% url 'identify_upload' %}" class="btn btn-sm btn-outline-secondary">←</a>
|
|
<h5 class="mb-0">Is this your plant?</h5>
|
|
</div>
|
|
|
|
<p class="text-muted small mb-3">Tap the correct species, then confirm.</p>
|
|
|
|
<form method="post" id="confirm-form">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="match_idx" id="match_idx_input" value="0">
|
|
|
|
<div class="d-flex flex-column gap-2 mb-4" id="match-list">
|
|
{% for m in matches %}
|
|
<div class="match-card d-flex align-items-center gap-3 p-3 border rounded"
|
|
style="cursor:pointer; {% if forloop.first %}border-color:#52b788 !important; background:#f0faf4;{% endif %}"
|
|
data-idx="{{ forloop.counter0 }}"
|
|
data-name="{{ m.scientific_name }}"
|
|
onclick="selectMatch(this)">
|
|
<div class="flex-grow-1">
|
|
<div class="fw-bold">{{ m.scientific_name }}</div>
|
|
{% if m.common_names %}
|
|
<div class="text-muted small">{{ m.common_names|join:", " }}</div>
|
|
{% endif %}
|
|
<div class="text-muted small fst-italic">{{ m.family }}</div>
|
|
</div>
|
|
<div>
|
|
<span class="badge {% if m.score >= 0.70 %}bg-success{% elif m.score >= 0.30 %}bg-warning text-dark{% else %}bg-secondary{% endif %}">
|
|
{% widthratio m.score 1 100 %}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-success w-100" id="confirm-btn">
|
|
Use <span id="selected-name">{{ matches.0.scientific_name }}</span> →
|
|
</button>
|
|
</form>
|
|
|
|
<script>
|
|
function selectMatch(el) {
|
|
document.querySelectorAll('.match-card').forEach(c => {
|
|
c.style.borderColor = '';
|
|
c.style.background = '';
|
|
});
|
|
el.style.borderColor = '#52b788';
|
|
el.style.background = '#f0faf4';
|
|
document.getElementById('match_idx_input').value = el.dataset.idx;
|
|
document.getElementById('selected-name').textContent = el.dataset.name;
|
|
}
|
|
</script>
|
|
{% endblock %}
|