From 2c45a6f2ee8a2b019085ef93e25e04b2d4c2503a Mon Sep 17 00:00:00 2001
From: Stephan Kerkman <stephan@kerkman.io>
Date: Mon, 1 Jun 2026 17:53:33 +0200
Subject: [PATCH] feat: restyle identify_upload as camera-first viewfinder
 screen

---
 plants/templates/plants/identify_upload.html | 202 +++++++++++--------
 plants/views/identify.py                     |   8 +-
 2 files changed, 126 insertions(+), 84 deletions(-)

diff --git a/plants/templates/plants/identify_upload.html b/plants/templates/plants/identify_upload.html
index 2cb3bd2..7f1c4d8 100644
--- a/plants/templates/plants/identify_upload.html
+++ b/plants/templates/plants/identify_upload.html
@@ -1,118 +1,160 @@
+{# plants/templates/plants/identify_upload.html #}
 {% extends "plants/base.html" %}
 {% block title %}Identify plant — BloomBase{% endblock %}
 {% block content %}
 
-<div class="d-flex align-items-center gap-2 mb-3">
-    <a href="{% url 'plant_list' %}" class="btn btn-sm btn-outline-secondary">←</a>
-    <h5 class="mb-0">Identify plant</h5>
-</div>
+<div class="px-4 pt-6">
 
-<p class="text-muted small mb-3">
+  <!-- Header -->
+  <div class="flex items-center gap-3 mb-4">
+    <a href="{% url 'dashboard' %}" class="btn-pill no-underline text-sm">←</a>
+    <h1 class="font-nunito font-black text-[20px] text-[#1A1208]">Identify plant</h1>
+  </div>
+
+  <p class="font-nunito font-semibold text-[11px] text-[#B0A090] mb-4">
     Add one or more photos, tag what each shows, then tap Identify.
-</p>
+  </p>
 
-{% if error %}
-<div class="alert alert-warning py-2 small mb-3">{{ error }}</div>
-{% endif %}
+  {% if error %}
+  <div class="bg-orange-50 border border-orange-200 rounded-2xl px-4 py-3 font-nunito text-sm text-orange-700 mb-4">
+    {{ error }}
+  </div>
+  {% endif %}
 
-<form method="post" enctype="multipart/form-data" id="identify-form">
+  <form method="post" enctype="multipart/form-data" id="identify-form">
     {% csrf_token %}
-    <input type="file" name="images" accept="image/jpeg,image/png" class="d-none" id="file-picker">
+    <input type="file" name="images" accept="image/jpeg,image/png" class="hidden" id="file-picker">
 
-    <div id="photo-rows" class="mb-3"></div>
-
-    <div id="add-btn-wrap" class="mb-3">
-        <label class="btn btn-outline-secondary w-100 py-3" for="file-picker" id="add-photo-label">
-            📷 Add photo <span id="photo-count" class="text-muted small"></span>
+    <!-- Viewfinder / drop zone -->
+    <div class="relative bg-[#2C3820] rounded-2xl h-[140px] overflow-hidden mb-4" id="vf-box">
+      <div class="absolute inset-0"
+           style="background: radial-gradient(ellipse 60% 55% at 60% 45%, #C84060 0%, #E05878 30%, #F880A0 55%, transparent 75%),
+                  linear-gradient(160deg, #1E3018 0%, #2E5028 30%, #3A6832 50%, #2C5020 70%);"></div>
+      <div class="vf-corner vf-tl"></div>
+      <div class="vf-corner vf-tr"></div>
+      <div class="vf-corner vf-bl"></div>
+      <div class="vf-corner vf-br"></div>
+      <!-- Controls row -->
+      <div class="absolute bottom-4 left-0 right-0 flex justify-center items-center gap-6">
+        <label for="file-picker"
+               class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center border border-white/40 cursor-pointer">
+          <svg width="15" height="15" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="4"/>
+          </svg>
         </label>
+        <label for="file-picker"
+               class="bb-fab cursor-pointer">
+        </label>
+      </div>
     </div>
 
-    <button type="submit" class="btn btn-success w-100" id="identify-btn" disabled>
-        Identify →
+    <!-- Photo rows (populated by JS) -->
+    <div id="photo-rows" class="mb-4"></div>
+
+    <!-- Add more label (shown when < 5 photos) -->
+    <div id="add-btn-wrap" class="mb-4">
+      <label for="file-picker"
+             class="flex items-center justify-center gap-2 bg-white border border-[#F0E4D4] rounded-2xl py-3
+                    font-nunito font-bold text-sm text-[#B0A090] cursor-pointer">
+        📷 Add photo <span id="photo-count" class="text-[#C0B0A0]"></span>
+      </label>
+    </div>
+
+    <button type="submit" id="identify-btn" disabled
+            class="btn-bloom opacity-50 cursor-not-allowed">
+      Identify →
     </button>
-</form>
+  </form>
 
-<div class="text-center mt-3">
-    <a href="{% url 'plant_add' %}" class="text-muted small">Or enter name manually</a>
-</div>
+  <div class="text-center mt-4">
+    <a href="{% url 'plant_add' %}" class="font-nunito text-sm font-semibold text-[#B0A090] no-underline">
+      Or enter name manually
+    </a>
+  </div>
+
+  <!-- Loading overlay -->
+  <div id="identify-spinner"
+       style="display:none; position:fixed; inset:0; background:rgba(255,248,242,.92); z-index:9999;
+              align-items:center; justify-content:center; flex-direction:column; gap:16px;">
+    <div style="width:40px;height:40px;border:3px solid #F0E4D4;border-top-color:#F07040;
+                border-radius:50%;animation:spin .8s linear infinite;"></div>
+    <p class="font-nunito font-bold text-sm text-[#B0A090]">Identifying plant…</p>
+  </div>
+  <style>@keyframes spin{to{transform:rotate(360deg)}}</style>
 
-<div id="identify-spinner" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.88); z-index:9999; align-items:center; justify-content:center; flex-direction:column; gap:12px;">
-    <div class="spinner-border text-success" role="status"><span class="visually-hidden">Identifying…</span></div>
-    <p class="text-muted small mb-0">Identifying plant…</p>
 </div>
 
 <script>
 const ORGANS = [
-    {val: 'flower', label: '🌸 flower'},
-    {val: 'leaf',   label: '🍃 leaf'},
-    {val: 'habit',  label: '🌿 habit'},
-    {val: 'fruit',  label: '🍎 fruit'},
-    {val: 'bark',   label: '🪵 bark'},
-    {val: 'auto',   label: '✨ auto'},
+  {val:'flower',label:'🌸 flower'},{val:'leaf',label:'🍃 leaf'},
+  {val:'habit',label:'🌿 habit'},{val:'fruit',label:'🍎 fruit'},
+  {val:'bark',label:'🪵 bark'},{val:'auto',label:'✨ auto'},
 ];
-const selected = [];  // {file, organ, objectUrl}
+const selected = [];
 const picker = document.getElementById('file-picker');
 
 picker.addEventListener('change', function () {
-    if (!this.files[0] || selected.length >= 5) return;
-    selected.push({file: this.files[0], organ: 'auto', objectUrl: URL.createObjectURL(this.files[0])});
-    this.value = '';
-    render();
+  if (!this.files[0] || selected.length >= 5) return;
+  selected.push({file: this.files[0], organ: 'auto', objectUrl: URL.createObjectURL(this.files[0])});
+  this.value = '';
+  render();
 });
 
-function setOrgan(idx, organ) {
-    selected[idx].organ = organ;
-    render();
-}
+function setOrgan(idx, organ) { selected[idx].organ = organ; render(); }
 
 function removePhoto(idx) {
-    URL.revokeObjectURL(selected[idx].objectUrl);
-    selected.splice(idx, 1);
-    render();
+  URL.revokeObjectURL(selected[idx].objectUrl);
+  selected.splice(idx, 1);
+  render();
 }
 
 function render() {
-    const rows = document.getElementById('photo-rows');
-    rows.innerHTML = '';
-    selected.forEach((item, i) => {
-        const row = document.createElement('div');
-        row.className = 'd-flex gap-2 align-items-start mb-3';
-        row.innerHTML = `
-            <div style="position:relative;flex-shrink:0;">
-                <img src="${item.objectUrl}" style="width:72px;height:72px;object-fit:cover;border-radius:8px;" alt="">
-                <button type="button" onclick="removePhoto(${i})"
-                    style="position:absolute;top:2px;right:2px;background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer;padding:0;line-height:1;">✕</button>
-            </div>
-            <div style="flex:1;">
-                <div class="text-muted small mb-1">What's shown?</div>
-                <div class="d-flex flex-wrap gap-1">
-                    ${ORGANS.map(o => `
-                        <span onclick="setOrgan(${i}, '${o.val}')"
-                              style="cursor:pointer; padding:2px 8px; border-radius:10px; font-size:11px; ${item.organ === o.val ? 'background:#52b788;color:#fff;' : 'background:#e9ecef;color:#6c757d;'}">
-                            ${o.label}
-                        </span>
-                    `).join('')}
-                </div>
-                <input type="hidden" name="organs" value="${item.organ}" id="organ-${i}">
-            </div>`;
-        rows.appendChild(row);
-    });
+  const rows = document.getElementById('photo-rows');
+  rows.innerHTML = '';
+  selected.forEach((item, i) => {
+    const row = document.createElement('div');
+    row.className = 'flex gap-3 items-start mb-4';
+    row.innerHTML = `
+      <div style="position:relative;flex-shrink:0;">
+        <img src="${item.objectUrl}" style="width:72px;height:72px;object-fit:cover;border-radius:14px;">
+        <button type="button" onclick="removePhoto(${i})"
+          style="position:absolute;top:3px;right:3px;background:rgba(0,0,0,.5);color:#fff;
+                 border:none;border-radius:50%;width:20px;height:20px;font-size:10px;
+                 cursor:pointer;padding:0;line-height:1;">✕</button>
+      </div>
+      <div style="flex:1;">
+        <div style="font-family:Nunito,sans-serif;font-size:11px;font-weight:700;color:#B0A090;margin-bottom:6px;">What's shown?</div>
+        <div style="display:flex;flex-wrap:wrap;gap:5px;">
+          ${ORGANS.map(o=>`
+            <span onclick="setOrgan(${i},'${o.val}')"
+              style="cursor:pointer;padding:3px 10px;border-radius:20px;font-size:11px;font-family:Nunito,sans-serif;font-weight:700;
+                     ${item.organ===o.val?'background:#F07040;color:#fff;':'background:#F5F0EA;color:#B0A090;'}">
+              ${o.label}
+            </span>`).join('')}
+        </div>
+        <input type="hidden" name="organs" value="${item.organ}" id="organ-${i}">
+      </div>`;
+    rows.appendChild(row);
+  });
 
-    document.querySelectorAll('input[name="organs"]').forEach((el, i) => {
-        if (selected[i]) el.value = selected[i].organ;
-    });
+  document.querySelectorAll('input[name="organs"]').forEach((el,i)=>{
+    if(selected[i]) el.value=selected[i].organ;
+  });
 
-    document.getElementById('photo-count').textContent = selected.length ? `(${selected.length}/5)` : '';
-    document.getElementById('add-btn-wrap').style.display = selected.length >= 5 ? 'none' : '';
-    document.getElementById('identify-btn').disabled = selected.length === 0;
+  document.getElementById('photo-count').textContent = selected.length ? `(${selected.length}/5)` : '';
+  document.getElementById('add-btn-wrap').style.display = selected.length >= 5 ? 'none' : '';
+  const btn = document.getElementById('identify-btn');
+  btn.disabled = selected.length === 0;
+  btn.style.opacity = selected.length === 0 ? '0.5' : '1';
+  btn.style.cursor = selected.length === 0 ? 'not-allowed' : 'pointer';
 }
 
-document.getElementById('identify-form').addEventListener('submit', function (e) {
-    if (selected.length === 0) { e.preventDefault(); return; }
-    const dt = new DataTransfer();
-    selected.forEach(s => dt.items.add(s.file));
-    picker.files = dt.files;
-    document.getElementById('identify-spinner').style.display = 'flex';
+document.getElementById('identify-form').addEventListener('submit', function(e) {
+  if (selected.length === 0) { e.preventDefault(); return; }
+  const dt = new DataTransfer();
+  selected.forEach(s => dt.items.add(s.file));
+  picker.files = dt.files;
+  document.getElementById('identify-spinner').style.display = 'flex';
 });
 </script>
 {% endblock %}
diff --git a/plants/views/identify.py b/plants/views/identify.py
index 9c4282f..1b74fa9 100644
--- a/plants/views/identify.py
+++ b/plants/views/identify.py
@@ -8,7 +8,7 @@ from django.core.files.storage import default_storage
 from plants.services import plantnet
 from plants.services.plantnet import PlantNetError
 from plants.services.vpc import search_species as vpc_search
-from plants.models import Plant, PlantPhoto, Species
+from plants.models import Plant, PlantPhoto, Species, Location
 
 logger = logging.getLogger(__name__)
 
@@ -27,14 +27,14 @@ def _clear_session(request):
 
 def identify_upload(request):
     if request.method != 'POST':
-        return render(request, 'plants/identify_upload.html')
+        return render(request, 'plants/identify_upload.html', {'active_tab': 'home'})
 
     files = request.FILES.getlist('images')
     organs = request.POST.getlist('organs')
 
     if not files:
         return render(request, 'plants/identify_upload.html',
-                      {'error': 'Please select at least one photo.'})
+                      {'error': 'Please select at least one photo.', 'active_tab': 'home'})
 
     scan_id = uuid.uuid4().hex
     saved_paths = []
@@ -66,7 +66,7 @@ def identify_upload(request):
                     default_storage.delete(p['path'])
             except Exception:
                 pass
-        return render(request, 'plants/identify_upload.html', {'error': error_msg})
+        return render(request, 'plants/identify_upload.html', {'error': error_msg, 'active_tab': 'home'})
 
     request.session['identify_matches'] = matches
     request.session['identify_image_paths'] = saved_paths