+
+
+
+{% endblock %}
+```
+
+- [ ] **Step 5.2: Verify page renders**
+
+```bash
+python manage.py runserver 0.0.0.0:8000
+```
+
+Open http://localhost:8000/locations/ — expect My Garden screen with area rows and + form.
+
+- [ ] **Step 5.3: Commit**
+
+```bash
+git add plants/templates/plants/locations.html
+git commit -m "feat: restyle locations.html as My Garden screen with cover photo thumbnails"
+```
+
+---
+
+## Task 6: location_detail.html — Area Detail screen
+
+**Files:**
+- Create: `plants/templates/plants/location_detail.html`
+
+- [ ] **Step 6.1: Create location_detail.html**
+
+```html
+{# plants/templates/plants/location_detail.html #}
+{% extends "plants/base.html" %}
+{% block title %}{{ location.name }} — BloomBase{% endblock %}
+{% block content %}
+
+
+
+
+
+
+
+
+ My Garden
+ Edit +
+
+ Search plants or areas
+
+
+
+
+ {% for loc in locations %}
+ {% with idx=forloop.counter0 %}
+
+
+
+
+
+
+
+
+ {% if loc.cover_photo %}
+ 
+ {% else %}
+
+ {% endif %}
+
+
+
+
+
+ ›
+
+ {% endwith %}
+ {% empty %}
+ {{ loc.name }}
+
+ {{ loc.plant_count }} plant{{ loc.plant_count|pluralize }}
+
+ + No areas yet — add one below! +
+ {% endfor %} +
+
+
+
+{% endblock %}
+```
+
+- [ ] **Step 6.2: Verify page renders**
+
+Open http://localhost:8000/locations/1/ (replace 1 with a real pk) — expect hero + plant grid.
+
+- [ ] **Step 6.3: Commit**
+
+```bash
+git add plants/templates/plants/location_detail.html
+git commit -m "feat: add location_detail.html — area detail with cover photo header + plant grid"
+```
+
+---
+
+## Task 7: location_edit.html — add cover photo upload
+
+**Files:**
+- Modify: `plants/templates/plants/location_edit.html`
+
+- [ ] **Step 7.1: Rewrite location_edit.html**
+
+```html
+{# plants/templates/plants/location_edit.html #}
+{% extends "plants/base.html" %}
+{% block title %}Edit Area — BloomBase{% endblock %}
+{% block content %}
+
+{{ location.name }}
++ {{ plants.count }} plant{{ plants.count|pluralize }} +
+ + + {% if plants %} + + {% else %} + + + {% endif %} + +
+
+
+{% endblock %}
+```
+
+- [ ] **Step 7.2: Verify form submits with photo**
+
+Open http://localhost:8000/locations/1/edit/ — fill name, attach image, save. Confirm redirect to /locations/ with updated thumbnail.
+
+- [ ] **Step 7.3: Commit**
+
+```bash
+git add plants/templates/plants/location_edit.html
+git commit -m "feat: restyle location_edit.html with cover photo upload field"
+```
+
+---
+
+## Task 8: dashboard.html — camera-first Home screen
+
+Also update `dashboard` view to pass `active_tab`.
+
+**Files:**
+- Modify: `plants/views/dashboard.py`
+- Modify: `plants/templates/plants/dashboard.html`
+
+- [ ] **Step 8.1: Update dashboard view to pass active_tab and location count**
+
+```python
+# plants/views/dashboard.py
+from datetime import date
+from django.shortcuts import render
+from plants.models import Plant, Location
+
+
+def dashboard(request):
+ today = date.today()
+ all_plants = list(Plant.objects.select_related('species').all())
+ blooming_now = [p for p in all_plants if today.month in (p.bloom_months or [])]
+ latest_plants = Plant.objects.select_related('species', 'location').prefetch_related('photos').order_by('-pk')[:6]
+ location_count = Location.objects.count()
+
+ return render(request, 'plants/dashboard.html', {
+ 'total_plants': len(all_plants),
+ 'blooming_now': blooming_now,
+ 'blooming_now_count': len(blooming_now),
+ 'today': today,
+ 'latest_plants': latest_plants,
+ 'location_count': location_count,
+ 'active_tab': 'home',
+ })
+```
+
+- [ ] **Step 8.2: Rewrite dashboard.html**
+
+```html
+{# plants/templates/plants/dashboard.html #}
+{% extends "plants/base.html" %}
+{% load plant_extras %}
+{% block title %}BloomBase{% endblock %}
+{% block content %}
+
+
+
+ ←
+
+
+
+
+Edit area
+
+
+
+
+
+
+
+
+
+{% endblock %}
+```
+
+- [ ] **Step 8.3: Verify home screen**
+
+Open http://localhost:8000/ — expect camera viewfinder + My Garden pill + recent plants.
+
+- [ ] **Step 8.4: Commit**
+
+```bash
+git add plants/views/dashboard.py plants/templates/plants/dashboard.html
+git commit -m "feat: restyle dashboard as camera-first Home screen"
+```
+
+---
+
+## Task 9: plant_list.html — search + location filter chips
+
+Also update the `plant_list` view to pass `active_tab`.
+
+**Files:**
+- Modify: `plants/views/plants.py` (just add `active_tab` to plant_list context)
+- Modify: `plants/templates/plants/plant_list.html`
+
+- [ ] **Step 9.1: Add active_tab to plant_list view**
+
+In `plants/views/plants.py`, find the `plant_list` view and add `'active_tab': 'garden'` to the context dict it passes to `render`. (Check the current return statement and add the key alongside existing context keys.)
+
+- [ ] **Step 9.2: Rewrite plant_list.html**
+
+```html
+{# plants/templates/plants/plant_list.html #}
+{% extends "plants/base.html" %}
+{% block title %}Plants — BloomBase{% endblock %}
+{% block content %}
+
+Hello, Plant Lover! 🌿
++ What are we growing today? +
++ Identify a plant and add it to Bloombase. +
+ + + + + + + + + + + +
+
+
+
+
+
+ 🪴
+
+
+
+
+
+
+ ›
+
+
+
+ {% if latest_plants %}
+ My Garden
+
+ {{ total_plants }} Plant{{ total_plants|pluralize }} · {{ location_count }} Area{{ location_count|pluralize }}
+
+ 🌿 Recently added
+
+ {% for plant in latest_plants %}
+
+ {% if plant.species and plant.species.api_image_url %}
+ 
+ {% elif plant.thumbnail_url %}
+ 
+ {% else %}
+
+ {% endif %}
+
+🌿
+ {% endif %}
+
+
+
+ {% endfor %}
+ {{ plant.name }}
+ {{ plant.location }}
+
+
+
+
+{% endblock %}
+```
+
+- [ ] **Step 9.3: Update plant_list_results partial**
+
+Open `plants/templates/plants/partials/plant_list_results.html` and check its current content. Update it to use Tailwind card style:
+
+```html
+{# plants/templates/plants/partials/plant_list_results.html #}
+{% for plant in plants %}
+
+ {% if plant.species and plant.species.api_image_url %}
+
+
+
+
+ All Plants
+ + +
+
+
+
+
+
+
+
+
+
+ {% include "plants/partials/plant_list_results.html" %}
+
+
+🌿
+ {% endif %}
+
+
+ ›
+
+{% empty %}
+{{ plant.name }}
+ {% if plant.location %}
+
+ {{ plant.location.name }}
+
+ {% endif %}
+ No plants found.
+{% endfor %} +``` + +- [ ] **Step 9.4: Verify plant list** + +Open http://localhost:8000/plants/ — expect search + chips + card list. + +- [ ] **Step 9.5: Commit** + +```bash +git add plants/views/plants.py plants/templates/plants/plant_list.html plants/templates/plants/partials/plant_list_results.html +git commit -m "feat: restyle plant_list with Tailwind — search, filter chips, plant cards" +``` + +--- + +## Task 10: plant_detail.html — hero + care + CTA + +Also add `active_tab` to the `plant_detail` view. + +**Files:** +- Modify: `plants/views/plants.py` (add `active_tab` to plant_detail context) +- Modify: `plants/templates/plants/plant_detail.html` + +- [ ] **Step 10.1: Add active_tab to plant_detail view context** + +In `plants/views/plants.py`, find the `plant_detail` view and add `'active_tab': 'garden'` to the context. + +- [ ] **Step 10.2: Rewrite plant_detail.html** + +```html +{# plants/templates/plants/plant_detail.html #} +{% extends "plants/base.html" %} +{% load plant_extras %} +{% block title %}{{ plant.name }} — BloomBase{% endblock %} +{% block content %} + + +
+ {% if plant.species and plant.species.api_image_url %}
+
+ {% elif plant.thumbnail_url %}
+
+ {% else %}
+
+
+🌿
+ {% endif %}
+
+
+ ← Back
+
+ Edit
+
+
+
+
+
+
+{% endblock %}
+```
+
+- [ ] **Step 10.3: Verify plant detail**
+
+Open http://localhost:8000/plants/1/ — expect hero + care row + CTA buttons.
+
+- [ ] **Step 10.4: Commit**
+
+```bash
+git add plants/views/plants.py plants/templates/plants/plant_detail.html
+git commit -m "feat: restyle plant_detail — hero, care row, gradient CTA buttons"
+```
+
+---
+
+## Task 11: identify_upload.html — viewfinder camera UI
+
+Also add `active_tab` to `identify_upload` view.
+
+**Files:**
+- Modify: `plants/views/identify.py` (add `active_tab`)
+- Modify: `plants/templates/plants/identify_upload.html`
+
+- [ ] **Step 11.1: Add active_tab to identify_upload view**
+
+In `plants/views/identify.py`, find the `identify_upload` view. Add `'active_tab': 'home'` to the context dict passed to render (for the GET response).
+
+- [ ] **Step 11.2: Rewrite identify_upload.html**
+
+```html
+{# plants/templates/plants/identify_upload.html #}
+{% extends "plants/base.html" %}
+{% block title %}Identify plant — BloomBase{% endblock %}
+{% block content %}
+
+{{ plant.name }}
+ {% if plant.species %} +
+ {{ plant.species.scientific_name }}
+
+ 
+
+
+ {% endif %}
+
+ {% if plant.location %}
+ + 📍 {{ plant.location.name }} +
+ {% endif %} + + + {% if plant.watering or plant.sunlight or plant.species %} +
+ {% if plant.watering %}
+
+ {% endif %}
+
+
+ {% if plant.bloom_months %}
+
+ 💧
+ {{ plant.get_watering_display }}
+
+ {% elif plant.species and plant.species.watering %}
+
+ 💧
+ {{ plant.species.watering }}
+
+ {% endif %}
+ {% if plant.sunlight %}
+
+ ☀️
+ {{ plant.get_sunlight_display }}
+
+ {% elif plant.species and plant.species.sunlight %}
+
+ ☀️
+ {{ plant.species.sunlight }}
+
+ {% endif %}
+ {% if plant.species and plant.species.frost_hardiness_c is not None %}
+
+ 🌡️
+ {{ plant.species.frost_hardiness_c }}°C min
+
+ {% endif %}
+ {% if plant.species and plant.species.max_height_cm %}
+
+ 📏
+ {{ plant.species.max_height_cm }} cm
+
+ {% endif %}
+
+
+ {% endif %}
+
+
+ {% if plant.notes %}
+ 🌸 Bloom months
+ {% month_strip plant.bloom_months %} +
+
+ {% endif %}
+
+
+ {% if plant.pruning_months %}
+ {% include "plants/partials/pruning_strip.html" %}
+ {% endif %}
+
+
+ {{ plant.notes|linebreaksbr }}
+
+ {% include "plants/partials/photo_gallery.html" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
+```
+
+- [ ] **Step 11.3: Verify identify screen**
+
+Open http://localhost:8000/identify/ — expect viewfinder box + shutter button + organ tags.
+
+- [ ] **Step 11.4: Commit**
+
+```bash
+git add plants/views/identify.py plants/templates/plants/identify_upload.html
+git commit -m "feat: restyle identify_upload as camera-first viewfinder screen"
+```
+
+---
+
+## Task 12: identify_confirm.html — match list restyle
+
+**Files:**
+- Modify: `plants/templates/plants/identify_confirm.html`
+
+- [ ] **Step 12.1: Rewrite identify_confirm.html**
+
+```html
+{# plants/templates/plants/identify_confirm.html #}
+{% extends "plants/base.html" %}
+{% block title %}Confirm species — BloomBase{% endblock %}
+{% block content %}
+
+
+ ←
+
+
+ Identify plant
++ Add one or more photos, tag what each shows, then tap Identify. +
+ + {% if error %} +
+ {{ error }}
+
+ {% endif %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
+```
+
+- [ ] **Step 12.2: Verify identify confirm**
+
+Run a real identification or view the confirm page directly — expect match cards with confidence badges and gradient confirm button.
+
+- [ ] **Step 12.3: Commit**
+
+```bash
+git add plants/templates/plants/identify_confirm.html
+git commit -m "feat: restyle identify_confirm — match cards with confidence badges"
+```
+
+---
+
+## Self-Review
+
+**Spec coverage check:**
+
+| Spec item | Task |
+|---|---|
+| Replace Bootstrap 5 with Tailwind CSS | Task 2 (base.html) |
+| 5-tab bottom nav (Home, Garden, +, Care, Profile) | Task 2 |
+| `Location.cover_photo` + migration | Task 3 |
+| `LocationForm` with cover_photo | Task 4 |
+| `location_detail` view + URL | Task 4 |
+| locations.html My Garden screen | Task 5 |
+| location_detail.html Area Detail | Task 6 |
+| location_edit.html with cover photo | Task 7 |
+| dashboard.html camera-first | Task 8 |
+| plant_list.html | Task 9 |
+| plant_detail.html | Task 10 |
+| identify_upload.html | Task 11 |
+| identify_confirm.html | Task 12 |
+| Canvas blob decorations + SVG flowers | Task 1 + Task 2 |
+| Great Vibes + Nunito + Pacifico fonts | Task 1 |
+| Gradient CTA buttons | Task 1 (.btn-bloom) |
+| `active_tab` nav active state | Tasks 4, 8, 9, 10, 11 |
+| Care + Profile stubs | Task 2 (href="#") |
+
+**Gaps identified and resolved:**
+- `plant_list_results.html` partial was missing — added in Task 9.3
+- `plant_list` and `plant_detail` views need `active_tab` in context — noted in Tasks 9 and 10
+- `identify_upload` view needs `active_tab` — noted in Task 11
+
+**Type/name consistency:**
+- `active_tab` values: `'home'` (dashboard, identify), `'garden'` (locations, plant_list, plant_detail, location_detail, location_edit)
+- CSS class names used consistently: `.btn-bloom`, `.btn-bloom-outline`, `.btn-pill`, `.bb-fab`, `.vf-corner .vf-tl/tr/bl/br`
+- `at-placeholder-N` classes 1–6 defined in bloombase.css and used in locations.html + location_detail.html
+
+**No placeholders:** All template code is complete. All CSS is complete.
+ ←
+
+ Is this your plant?
++ Tap the correct species, then confirm. +
+ + + +