feat: rewrite base.html — Tailwind CDN, 5-tab bottom nav, canvas decorations
This commit is contained in:
parent
69837d88b2
commit
ea627ad4ef
1 changed files with 153 additions and 36 deletions
|
|
@ -1,44 +1,161 @@
|
|||
{# plants/templates/plants/base.html #}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
<title>{% block title %}BloomBase{% endblock %}</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
||||
{% load static %}
|
||||
<link rel="stylesheet" href="{% static 'plants/css/bloombase.css' %}">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
bloom: {
|
||||
bg: '#FFF8F2', primary: '#F07040', green: '#52B788',
|
||||
dark: '#1A1208', muted: '#B0A090', border: '#F0E4D4',
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
nunito: ['Nunito', 'sans-serif'],
|
||||
script: ['"Great Vibes"', 'cursive'],
|
||||
pacifico: ['Pacifico', 'cursive'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.12" defer></script>
|
||||
<style>
|
||||
body { padding-bottom: 1rem; }
|
||||
.plant-hero { width: 100%; height: 220px; object-fit: cover; }
|
||||
.plant-hero-placeholder { width: 100%; height: 220px; background: #d8f3dc; display: flex; align-items: center; justify-content: center; color: #52b788; font-size: 3rem; }
|
||||
.care-chip { display: inline-block; padding: .2rem .55rem; border-radius: 1rem; font-size: .8rem; margin: .15rem; }
|
||||
.pruning-strip { border-left: 4px solid #ffc107; background: #fff9c4; padding: .5rem .75rem; border-radius: 0 .375rem .375rem 0; }
|
||||
.pruning-strip.overdue { border-color: #dc3545; background: #fff5f5; }
|
||||
/* Month strip — display */
|
||||
.month-strip { display: flex; gap: 3px; }
|
||||
.month-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700; letter-spacing: 0; background: #e9ecef; color: #adb5bd; }
|
||||
.month-dot--on { background: #2d6a4f; color: #fff; }
|
||||
/* Month toggle — form */
|
||||
.month-toggle-group { display: flex; flex-wrap: wrap; gap: 5px; }
|
||||
.month-toggle { position: relative; }
|
||||
.month-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
|
||||
.month-toggle label { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: 13px; font-weight: 700; cursor: pointer; background: #e9ecef; color: #6c757d; transition: background .15s, color .15s; user-select: none; }
|
||||
.month-toggle input:checked + label { background: #2d6a4f; color: #fff; }
|
||||
</style>
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-dark px-3" style="background-color: #2d6a4f;">
|
||||
<a class="navbar-brand fw-bold" href="{% url 'dashboard' %}">🌸 BloomBase</a>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{% url 'plant_list' %}" class="btn btn-sm btn-outline-light">Plants</a>
|
||||
<a href="{% url 'add_plant_from_scan' %}" class="btn btn-sm btn-outline-light" title="Add plant by card scan">🪪</a>
|
||||
<a href="{% url 'identify_upload' %}" class="btn btn-sm btn-light fw-bold">+</a>
|
||||
</div>
|
||||
<body class="bg-[#FFF8F2]">
|
||||
|
||||
<!-- Canvas background blobs -->
|
||||
<div class="bb-blob-tl"></div>
|
||||
<div class="bb-blob-br"></div>
|
||||
|
||||
<!-- Canvas SVG flowers -->
|
||||
<svg class="bb-flower bb-flower-tr" width="140" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg" opacity="0.85">
|
||||
<defs>
|
||||
<radialGradient id="hp1" cx="50%" cy="80%" r="85%"><stop offset="0%" stop-color="#A02848"/><stop offset="35%" stop-color="#D04870"/><stop offset="70%" stop-color="#F07898"/><stop offset="100%" stop-color="#FFCCD8"/></radialGradient>
|
||||
<radialGradient id="hp2" cx="50%" cy="80%" r="85%"><stop offset="0%" stop-color="#B83060"/><stop offset="35%" stop-color="#E06080"/><stop offset="70%" stop-color="#F898B0"/><stop offset="100%" stop-color="#FFDDEA"/></radialGradient>
|
||||
</defs>
|
||||
<g transform="translate(70,70)">
|
||||
<path d="M0,0 C-14,-8 -26,-22 -24,-44 C-22,-62 -10,-68 0,-68 C10,-68 22,-62 24,-44 C26,-22 14,-8 0,0Z" fill="url(#hp1)" transform="rotate(0)"/>
|
||||
<path d="M0,0 C-14,-8 -26,-22 -24,-44 C-22,-62 -10,-68 0,-68 C10,-68 22,-62 24,-44 C26,-22 14,-8 0,0Z" fill="url(#hp2)" transform="rotate(72)" opacity="0.92"/>
|
||||
<path d="M0,0 C-14,-8 -26,-22 -24,-44 C-22,-62 -10,-68 0,-68 C10,-68 22,-62 24,-44 C26,-22 14,-8 0,0Z" fill="url(#hp1)" transform="rotate(144)" opacity="0.88"/>
|
||||
<path d="M0,0 C-14,-8 -26,-22 -24,-44 C-22,-62 -10,-68 0,-68 C10,-68 22,-62 24,-44 C26,-22 14,-8 0,0Z" fill="url(#hp2)" transform="rotate(216)" opacity="0.93"/>
|
||||
<path d="M0,0 C-14,-8 -26,-22 -24,-44 C-22,-62 -10,-68 0,-68 C10,-68 22,-62 24,-44 C26,-22 14,-8 0,0Z" fill="url(#hp1)" transform="rotate(288)" opacity="0.87"/>
|
||||
<rect x="-3.5" y="-20" width="7" height="20" rx="3.5" fill="#FFD060"/>
|
||||
<circle r="6" fill="#FFD040"/><circle r="3" fill="#E84020"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg class="bb-flower bb-flower-ml" width="72" height="72" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" opacity="0.7">
|
||||
<defs><radialGradient id="pp" cx="50%" cy="80%" r="80%"><stop offset="0%" stop-color="#C03058"/><stop offset="50%" stop-color="#E86090"/><stop offset="100%" stop-color="#FFB8CC"/></radialGradient></defs>
|
||||
<g transform="translate(36,36)">
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-24 C-10,-32 -4,-35 0,-35 C4,-35 10,-32 12,-24 C14,-14 8,-5 0,0Z" fill="url(#pp)" transform="rotate(0)"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-24 C-10,-32 -4,-35 0,-35 C4,-35 10,-32 12,-24 C14,-14 8,-5 0,0Z" fill="url(#pp)" transform="rotate(72)" opacity="0.9"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-24 C-10,-32 -4,-35 0,-35 C4,-35 10,-32 12,-24 C14,-14 8,-5 0,0Z" fill="url(#pp)" transform="rotate(144)"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-24 C-10,-32 -4,-35 0,-35 C4,-35 10,-32 12,-24 C14,-14 8,-5 0,0Z" fill="url(#pp)" transform="rotate(216)" opacity="0.9"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-24 C-10,-32 -4,-35 0,-35 C4,-35 10,-32 12,-24 C14,-14 8,-5 0,0Z" fill="url(#pp)" transform="rotate(288)"/>
|
||||
<circle r="5" fill="#FFD040"/><circle r="2.5" fill="#E84020"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg class="bb-flower bb-flower-br" width="96" height="96" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" opacity="0.8">
|
||||
<defs><radialGradient id="yp" cx="50%" cy="80%" r="80%"><stop offset="0%" stop-color="#D08000"/><stop offset="50%" stop-color="#F0C020"/><stop offset="100%" stop-color="#FFE880"/></radialGradient></defs>
|
||||
<g transform="translate(48,48)">
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-26 C-10,-36 -4,-40 0,-40 C4,-40 10,-36 12,-26 C14,-14 8,-5 0,0Z" fill="url(#yp)" transform="rotate(0)"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-26 C-10,-36 -4,-40 0,-40 C4,-40 10,-36 12,-26 C14,-14 8,-5 0,0Z" fill="url(#yp)" transform="rotate(45)" opacity="0.9"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-26 C-10,-36 -4,-40 0,-40 C4,-40 10,-36 12,-26 C14,-14 8,-5 0,0Z" fill="url(#yp)" transform="rotate(90)"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-26 C-10,-36 -4,-40 0,-40 C4,-40 10,-36 12,-26 C14,-14 8,-5 0,0Z" fill="url(#yp)" transform="rotate(135)" opacity="0.9"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-26 C-10,-36 -4,-40 0,-40 C4,-40 10,-36 12,-26 C14,-14 8,-5 0,0Z" fill="url(#yp)" transform="rotate(180)"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-26 C-10,-36 -4,-40 0,-40 C4,-40 10,-36 12,-26 C14,-14 8,-5 0,0Z" fill="url(#yp)" transform="rotate(225)" opacity="0.9"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-26 C-10,-36 -4,-40 0,-40 C4,-40 10,-36 12,-26 C14,-14 8,-5 0,0Z" fill="url(#yp)" transform="rotate(270)"/>
|
||||
<path d="M0,0 C-8,-5 -14,-14 -12,-26 C-10,-36 -4,-40 0,-40 C4,-40 10,-36 12,-26 C14,-14 8,-5 0,0Z" fill="url(#yp)" transform="rotate(315)" opacity="0.9"/>
|
||||
<circle r="9" fill="#E06010"/><circle r="5" fill="#C04000"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg class="bb-flower bb-flower-bl" width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" opacity="0.65">
|
||||
<g transform="translate(28,28)">
|
||||
<path d="M0,-20 C4,-20 8,-16 8,-10 C8,-4 4,0 0,0 C-4,0 -8,-4 -8,-10 C-8,-16 -4,-20 0,-20Z" fill="#52B788" transform="rotate(0)"/>
|
||||
<path d="M0,-20 C4,-20 8,-16 8,-10 C8,-4 4,0 0,0 C-4,0 -8,-4 -8,-10 C-8,-16 -4,-20 0,-20Z" fill="#3A9A68" transform="rotate(60)"/>
|
||||
<path d="M0,-20 C4,-20 8,-16 8,-10 C8,-4 4,0 0,0 C-4,0 -8,-4 -8,-10 C-8,-16 -4,-20 0,-20Z" fill="#52B788" transform="rotate(120)"/>
|
||||
<path d="M0,-20 C4,-20 8,-16 8,-10 C8,-4 4,0 0,0 C-4,0 -8,-4 -8,-10 C-8,-16 -4,-20 0,-20Z" fill="#3A9A68" transform="rotate(180)"/>
|
||||
<path d="M0,-20 C4,-20 8,-16 8,-10 C8,-4 4,0 0,0 C-4,0 -8,-4 -8,-10 C-8,-16 -4,-20 0,-20Z" fill="#52B788" transform="rotate(240)"/>
|
||||
<path d="M0,-20 C4,-20 8,-16 8,-10 C8,-4 4,0 0,0 C-4,0 -8,-4 -8,-10 C-8,-16 -4,-20 0,-20Z" fill="#3A9A68" transform="rotate(300)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Page content — pb-24 keeps content above fixed bottom nav -->
|
||||
<main class="relative z-10 pb-24 min-h-screen">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Bottom navigation -->
|
||||
<nav id="bottom-nav" aria-label="Main navigation">
|
||||
{% url 'dashboard' as url_home %}
|
||||
{% url 'location_list' as url_garden %}
|
||||
{% url 'identify_upload' as url_identify %}
|
||||
|
||||
<!-- Home -->
|
||||
<a href="{{ url_home }}"
|
||||
class="flex flex-col items-center gap-0.5 text-[7.5px] font-bold font-nunito flex-1
|
||||
{% if active_tab == 'home' %}text-[#F07040]{% else %}text-[#C8B8A8]{% endif %}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="{% if active_tab == 'home' %}#F07040{% else %}#C8B8A8{% endif %}">
|
||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
|
||||
<!-- My Garden -->
|
||||
<a href="{{ url_garden }}"
|
||||
class="flex flex-col items-center gap-0.5 text-[7.5px] font-bold font-nunito flex-1
|
||||
{% if active_tab == 'garden' %}text-[#F07040]{% else %}text-[#C8B8A8]{% endif %}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
|
||||
stroke="{% if active_tab == 'garden' %}#F07040{% else %}#C8B8A8{% endif %}" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z"/>
|
||||
</svg>
|
||||
My Garden
|
||||
</a>
|
||||
|
||||
<!-- FAB: Identify -->
|
||||
<a href="{{ url_identify }}" class="flex flex-col items-center justify-center flex-1">
|
||||
<div class="bb-fab">+</div>
|
||||
</a>
|
||||
|
||||
<!-- Care (stub) -->
|
||||
<a href="#"
|
||||
class="flex flex-col items-center gap-0.5 text-[7.5px] font-bold font-nunito flex-1
|
||||
{% if active_tab == 'care' %}text-[#F07040]{% else %}text-[#C8B8A8]{% endif %}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
|
||||
stroke="{% if active_tab == 'care' %}#F07040{% else %}#C8B8A8{% endif %}" stroke-width="2"
|
||||
stroke-linecap="round">
|
||||
<path d="M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z"/>
|
||||
<path d="M19 10a7 7 0 0 1-14 0"/>
|
||||
<line x1="12" y1="19" x2="12" y2="22"/>
|
||||
</svg>
|
||||
Care
|
||||
</a>
|
||||
|
||||
<!-- Profile (stub) -->
|
||||
<a href="#"
|
||||
class="flex flex-col items-center gap-0.5 text-[7.5px] font-bold font-nunito flex-1
|
||||
{% if active_tab == 'profile' %}text-[#F07040]{% else %}text-[#C8B8A8]{% endif %}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
|
||||
stroke="{% if active_tab == 'profile' %}#F07040{% else %}#C8B8A8{% endif %}" stroke-width="2"
|
||||
stroke-linecap="round">
|
||||
<circle cx="12" cy="8" r="4"/>
|
||||
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
|
||||
</svg>
|
||||
Profile
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid px-3 pt-3">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue