initial commit

.htaccess

@@ -0,0 +1,28 @@
+Options -Indexes
+ServerSignature Off
+
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    RewriteBase /
+    RewriteRule ^data/   - [F,L]
+</IfModule>
+
+<IfModule mod_deflate.c>
+    AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript application/json
+</IfModule>
+
+<IfModule mod_expires.c>
+    ExpiresActive On
+    ExpiresByType text/css               "access plus 1 week"
+    ExpiresByType application/javascript "access plus 1 week"
+    ExpiresByType image/jpeg             "access plus 1 month"
+    ExpiresByType image/png              "access plus 1 month"
+    ExpiresByType image/webp             "access plus 1 month"
+</IfModule>
+
+<IfModule mod_headers.c>
+    Header always set X-Content-Type-Options "nosniff"
+    Header always set X-Frame-Options "SAMEORIGIN"
+    Header always set X-XSS-Protection "1; mode=block"
+    Header always set Referrer-Policy "strict-origin-when-cross-origin"
+</IfModule>

assets/style.css

@@ -0,0 +1,493 @@
+:root {
+    --bg-primary:    #313338;
+    --bg-secondary:  #2b2d31;
+    --bg-tertiary:   #1e1f22;
+    --bg-card:       #383a40;
+    --bg-hover:      #404249;
+    --accent-green:  #57f287;
+    --accent-blue:   #5865f2;
+    --accent-yellow: #fee75c;
+    --accent-red:    #ed4245;
+    --text-primary:  #dbdee1;
+    --text-muted:    #949ba4;
+    --text-white:    #ffffff;
+    --border:        #404249;
+    --radius-sm:     6px;
+    --radius-md:     10px;
+    --radius-lg:     16px;
+    --shadow:        0 2px 10px rgba(0,0,0,0.4);
+    --transition:    0.18s ease;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 100vh;
+    line-height: 1.6;
+}
+
+a { color: inherit; text-decoration: none; }
+
+/* HEADER */
+.site-header {
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    padding: 0 1.5rem;
+}
+.header-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+    gap: 1rem;
+}
+.logo { display: flex; align-items: center; gap: 0.75rem; }
+.logo-icon { font-size: 2rem; }
+.logo h1 { font-size: 1.1rem; font-weight: 700; color: var(--text-white); line-height: 1.2; }
+.logo-sub { font-size: 0.72rem; color: var(--text-muted); }
+.top-nav { display: flex; gap: 0.5rem; }
+.nav-link {
+    padding: 0.4rem 0.9rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    transition: var(--transition);
+}
+.nav-link:hover, .nav-link.active { background: var(--bg-hover); color: var(--text-white); }
+
+/* MAIN */
+.content { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
+
+/* HERO */
+.hero { text-align: center; padding: 2.5rem 1rem 2rem; }
+.hero h2 { font-size: 2rem; font-weight: 700; color: var(--text-white); margin-bottom: 0.5rem; }
+.hero p { color: var(--text-muted); }
+.hero strong { color: var(--accent-green); }
+
+/* MONTH GRID */
+.month-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+    margin: 1.5rem 0 2.5rem;
+}
+.month-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 1.75rem 1.5rem;
+    text-align: center;
+    transition: var(--transition);
+    display: block;
+}
+.month-card:hover {
+    background: var(--bg-hover);
+    border-color: var(--accent-green);
+    transform: translateY(-3px);
+    box-shadow: var(--shadow);
+}
+.month-emoji { font-size: 2.2rem; margin-bottom: 0.5rem; }
+.month-name { font-size: 1.1rem; font-weight: 600; color: var(--text-white); margin-bottom: 0.6rem; }
+.count-badge {
+    display: inline-block;
+    background: var(--accent-green);
+    color: #000;
+    font-size: 0.78rem;
+    font-weight: 700;
+    padding: 0.2rem 0.7rem;
+    border-radius: 100px;
+}
+.count-badge.empty { background: var(--bg-secondary); color: var(--text-muted); }
+
+/* INFO STRIP */
+.info-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-lg);
+    padding: 1.25rem 1.5rem;
+    border: 1px solid var(--border);
+}
+.info-item { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 160px; }
+.info-icon { font-size: 1.6rem; }
+.info-item strong { display: block; color: var(--text-white); font-size: 0.95rem; }
+.info-item small { color: var(--text-muted); font-size: 0.8rem; }
+
+/* BREADCRUMB */
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+}
+.breadcrumb a { color: var(--accent-green); }
+.breadcrumb a:hover { text-decoration: underline; }
+.breadcrumb .sep { color: var(--border); }
+
+/* MONTH NAV */
+.month-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+.month-title { font-size: 1.8rem; font-weight: 700; color: var(--text-white); text-align: center; flex: 1; }
+.month-nav-btn {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    transition: var(--transition);
+    white-space: nowrap;
+}
+.month-nav-btn:hover { background: var(--bg-hover); color: var(--text-white); border-color: var(--accent-green); }
+
+/* FILTER BAR */
+.month-summary { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
+.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
+.filter-btn {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 0.35rem 0.85rem;
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: var(--transition);
+    font-family: inherit;
+}
+.filter-btn:hover { background: var(--bg-hover); color: var(--text-white); }
+.filter-btn.active { background: var(--accent-green); color: #000; border-color: var(--accent-green); font-weight: 600; }
+
+/* PLANT GRID */
+.plant-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 1rem;
+}
+.plant-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 1.2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    transition: var(--transition);
+}
+.plant-card:hover {
+    background: var(--bg-hover);
+    border-color: var(--accent-green);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow);
+}
+.plant-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.25rem;
+}
+.plant-icon { font-size: 1.5rem; }
+.plant-name { font-size: 1.05rem; font-weight: 600; color: var(--text-white); }
+.plant-aliases { font-size: 0.78rem; color: var(--text-muted); }
+.plant-action-text { font-size: 0.8rem; color: var(--text-muted); font-style: italic; margin-top: 0.2rem; }
+.pot-badge { font-size: 0.75rem; color: var(--accent-green); margin-top: 0.25rem; }
+
+/* PLANT THUMBNAILS */
+.plant-thumb {
+    width: 52px;
+    height: 52px;
+    object-fit: cover;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    flex-shrink: 0;
+}
+.plant-hero-img {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: var(--radius-md);
+    border: 2px solid var(--border);
+    flex-shrink: 0;
+}
+.az-plant-thumb {
+    width: 36px;
+    height: 36px;
+    object-fit: cover;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    flex-shrink: 0;
+}
+.az-plant-no-img {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    flex-shrink: 0;
+}
+
+/* ACTION BADGES */
+.action-badge {
+    display: inline-block;
+    font-size: 0.72rem;
+    font-weight: 700;
+    padding: 0.15rem 0.55rem;
+    border-radius: 100px;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+.badge-sow        { background: rgba(87,242,135,0.15); color: #57f287; border: 1px solid rgba(87,242,135,0.35); }
+.badge-tray       { background: rgba(88,101,242,0.15); color: #7983f5; border: 1px solid rgba(88,101,242,0.35); }
+.badge-transplant { background: rgba(35,165,90,0.15);  color: #3ba55d; border: 1px solid rgba(35,165,90,0.35); }
+.badge-tuber      { background: rgba(245,124,0,0.15);  color: #f57c00; border: 1px solid rgba(245,124,0,0.35); }
+.badge-crown      { background: rgba(254,231,92,0.15); color: #f0c920; border: 1px solid rgba(254,231,92,0.35); }
+.badge-clove      { background: rgba(180,142,80,0.15); color: #c49a3c; border: 1px solid rgba(180,142,80,0.35); }
+.badge-general    { background: rgba(148,155,164,0.15);color: #949ba4; border: 1px solid #404249; }
+
+/* PLANT HERO */
+.plant-hero {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    margin-bottom: 2rem;
+    display: flex;
+    gap: 1.5rem;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+.plant-hero-info { flex: 1; min-width: 200px; }
+.plant-hero-name { font-size: 2rem; font-weight: 700; color: var(--text-white); margin-bottom: 0.4rem; }
+.plant-hero-aliases { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.75rem; }
+.plant-hero-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.hero-badge { font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: var(--radius-sm); }
+.badge-pot  { background: rgba(87,242,135,0.15); color: var(--accent-green); border: 1px solid rgba(87,242,135,0.3); }
+.badge-zone { background: rgba(88,101,242,0.15); color: #7983f5; border: 1px solid rgba(88,101,242,0.3); }
+
+/* PLANT SECTIONS */
+.plant-section { margin-bottom: 2rem; }
+.section-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-white);
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border);
+}
+.plant-description {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 1.1rem 1.3rem;
+    line-height: 1.7;
+}
+
+/* STATS GRID */
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1rem; }
+.stat-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 1.1rem;
+    text-align: center;
+}
+.stat-icon { font-size: 1.5rem; margin-bottom: 0.4rem; }
+.stat-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
+.stat-value { font-size: 1rem; font-weight: 600; color: var(--text-white); }
+.no-data-msg { color: var(--text-muted); font-style: italic; font-size: 0.9rem; }
+
+/* MONTH BAR */
+.month-bar-container { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
+.month-bar-cell {
+    flex: 1;
+    min-width: 58px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    text-align: center;
+    padding: 0.55rem 0.2rem;
+    transition: var(--transition);
+}
+.month-bar-cell.active.badge-sow        { background: rgba(87,242,135,0.12); border-color: rgba(87,242,135,0.4); }
+.month-bar-cell.active.badge-tray       { background: rgba(88,101,242,0.12); border-color: rgba(88,101,242,0.4); }
+.month-bar-cell.active.badge-transplant { background: rgba(35,165,90,0.12);  border-color: rgba(35,165,90,0.4); }
+.month-bar-cell.active.badge-tuber      { background: rgba(245,124,0,0.12);  border-color: rgba(245,124,0,0.4); }
+.month-bar-cell.active.badge-crown      { background: rgba(254,231,92,0.12); border-color: rgba(254,231,92,0.4); }
+.month-bar-cell.active.badge-clove      { background: rgba(180,142,80,0.12); border-color: rgba(180,142,80,0.4); }
+.month-bar-cell.active.badge-general    { background: rgba(87,242,135,0.12); border-color: rgba(87,242,135,0.4); }
+.mbc-name { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
+.month-bar-cell.active .mbc-name { color: var(--accent-green); }
+.mbc-icon { font-size: 1rem; margin-top: 0.2rem; }
+.calendar-legend { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--text-muted); flex-wrap: wrap; margin-top: 0.5rem; }
+.legend-item { display: flex; align-items: center; gap: 0.4rem; }
+.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
+.active-dot { background: var(--accent-green); }
+.inactive-dot { background: var(--border); }
+
+/* ACTION LIST */
+.action-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.action-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 0.6rem 1rem;
+    flex-wrap: wrap;
+}
+.action-month { font-weight: 600; color: var(--text-white); min-width: 90px; font-size: 0.9rem; }
+.action-desc  { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
+
+/* NOTES */
+.notes-box {
+    background: var(--bg-secondary);
+    border-left: 3px solid var(--accent-green);
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+    padding: 1rem 1.25rem;
+    line-height: 1.7;
+    font-size: 0.92rem;
+}
+
+/* COMPANION PLANTING */
+.companion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }
+.companion-card { border-radius: var(--radius-md); padding: 1rem 1.25rem; border: 1px solid var(--border); }
+.companion-card.good { background: rgba(87,242,135,0.07); border-color: rgba(87,242,135,0.25); }
+.companion-card.bad  { background: rgba(237,66,69,0.07);  border-color: rgba(237,66,69,0.25); }
+.companion-card h4 { font-size: 0.9rem; font-weight: 600; color: var(--text-white); margin-bottom: 0.6rem; }
+.companion-card ul { list-style: none; }
+.companion-card li { font-size: 0.85rem; color: var(--text-muted); padding: 0.15rem 0; }
+.companion-card.good li::before { content: "✓ "; color: var(--accent-green); }
+.companion-card.bad  li::before { content: "✗ "; color: #ed4245; }
+
+/* BACK BUTTON */
+.back-btn-wrap { margin-top: 2rem; }
+.btn-back {
+    display: inline-block;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 0.6rem 1.25rem;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    transition: var(--transition);
+}
+.btn-back:hover { background: var(--bg-hover); color: var(--text-white); border-color: var(--accent-green); }
+
+/* ALL PLANTS PAGE */
+.page-title { font-size: 1.8rem; font-weight: 700; color: var(--text-white); margin-bottom: 0.3rem; }
+.page-sub { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
+.search-wrap { margin-bottom: 1.25rem; }
+.search-input {
+    width: 100%;
+    max-width: 460px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 0.65rem 1rem;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 0.95rem;
+    transition: var(--transition);
+}
+.search-input:focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 0 2px rgba(87,242,135,0.15); }
+.letter-bar { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 2rem; }
+.letter-link {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 0.3rem 0.65rem;
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    transition: var(--transition);
+}
+.letter-link:hover { background: var(--accent-green); color: #000; border-color: var(--accent-green); }
+.letter-group { margin-bottom: 2rem; }
+.letter-heading { font-size: 1.2rem; font-weight: 700; color: var(--accent-green); margin-bottom: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
+.az-plant-list { display: flex; flex-direction: column; gap: 0.3rem; }
+.az-plant-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 0.5rem 1rem;
+    transition: var(--transition);
+}
+.az-plant-item:hover { background: var(--bg-hover); border-color: var(--accent-green); }
+.az-plant-name  { font-weight: 600; color: var(--text-white); min-width: 180px; }
+.az-plant-alias { font-size: 0.8rem; color: var(--text-muted); flex: 1; font-style: italic; }
+.az-plant-months {
+    font-size: 0.78rem;
+    background: rgba(87,242,135,0.12);
+    color: var(--accent-green);
+    padding: 0.15rem 0.6rem;
+    border-radius: 100px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+/* NOTICES */
+.notice { border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.9rem; }
+.notice.warning { background: rgba(254,231,92,0.1); border: 1px solid rgba(254,231,92,0.3); color: #f0c920; }
+.notice.info    { background: rgba(88,101,242,0.1);  border: 1px solid rgba(88,101,242,0.3);  color: #7983f5; }
+.notice code { background: rgba(0,0,0,0.25); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.88em; }
+
+/* FOOTER */
+.site-footer {
+    background: var(--bg-tertiary);
+    border-top: 1px solid var(--border);
+    text-align: center;
+    padding: 1.25rem;
+    font-size: 0.82rem;
+    color: var(--text-muted);
+}
+.site-footer a { color: var(--accent-green); }
+.site-footer a:hover { text-decoration: underline; }
+
+/* RESPONSIVE */
+@media (max-width: 768px) {
+    .header-inner { height: auto; padding: 0.75rem 0; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
+    .hero h2 { font-size: 1.4rem; }
+    .month-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
+    .month-nav { flex-direction: column; align-items: stretch; text-align: center; }
+    .month-title { order: -1; }
+    .plant-grid { grid-template-columns: 1fr; }
+    .stats-grid { grid-template-columns: repeat(2,1fr); }
+    .month-bar-container { gap: 0.2rem; }
+    .month-bar-cell { min-width: 42px; }
+    .mbc-name { font-size: 0.62rem; }
+    .action-item { flex-direction: column; align-items: flex-start; }
+    .plant-hero { flex-direction: column; }
+    .plant-hero-name { font-size: 1.5rem; }
+    .plant-hero-img { width: 80px; height: 80px; }
+    .az-plant-item { flex-wrap: wrap; }
+}
+@media (max-width: 480px) {
+    .content { padding: 1rem 1rem 3rem; }
+    .month-grid { grid-template-columns: repeat(3,1fr); }
+    .month-card { padding: 1rem 0.5rem; }
+    .month-name { font-size: 0.9rem; }
+    .stats-grid { grid-template-columns: 1fr 1fr; }
+}

diagnose.py

@@ -0,0 +1,44 @@
+#!/usr/bin/env python3
+import time
+import os
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from selenium.webdriver.chrome.service import Service
+
+URL = "https://www.gardenate.com/?zone=USA+-+Zone+8b&m=1"
+OUTPUT = "gardenate_debug.html"
+
+def make_driver():
+    options = Options()
+    options.add_argument("--headless")
+    options.add_argument("--no-sandbox")
+    options.add_argument("--disable-dev-shm-usage")
+    options.add_argument("--disable-gpu")
+    options.add_argument("--window-size=1920,1080")
+    options.add_argument("user-agent=Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36")
+    for driver_path in [
+        "/usr/bin/chromedriver",
+        "/usr/lib/chromium-browser/chromedriver",
+        "/usr/lib/chromium/chromedriver",
+        "/snap/bin/chromedriver",
+    ]:
+        if os.path.exists(driver_path):
+            print(f"Using chromedriver at: {driver_path}")
+            return webdriver.Chrome(service=Service(driver_path), options=options)
+    return webdriver.Chrome(options=options)
+
+driver = make_driver()
+try:
+    driver.get(URL)
+    print("Waiting 5 seconds for JS...")
+    time.sleep(5)
+    html = driver.page_source
+    with open(OUTPUT, "w", encoding="utf-8") as f:
+        f.write(html)
+    print(f"Saved {len(html)} bytes to {OUTPUT}")
+    print("\n--- /plant/ link lines ---")
+    for i, line in enumerate(html.split("\n")):
+        if "/plant/" in line.lower():
+            print(f"Line {i}: {line.strip()[:300]}")
+finally:
+    driver.quit()

index.php

@@ -0,0 +1,108 @@
+<?php
+$dataFile = __DIR__ . '/data/plants.json';
+$months   = [
+    1=>"January",2=>"February",3=>"March",4=>"April",
+    5=>"May",6=>"June",7=>"July",8=>"August",
+    9=>"September",10=>"October",11=>"November",12=>"December"
+];
+$monthEmoji = [
+    1=>"❄️",2=>"❄️",3=>"🌱",4=>"🌸",5=>"🌿",6=>"☀️",
+    7=>"☀️",8=>"🌻",9=>"🍂",10=>"🍂",11=>"🌧️",12=>"❄️"
+];
+
+$plantCounts = array_fill(1, 12, 0);
+$plantsData  = [];
+
+if (file_exists($dataFile)) {
+    $json = json_decode(file_get_contents($dataFile), true);
+    if ($json && isset($json['plants'])) {
+        $plantsData = $json['plants'];
+        foreach ($plantsData as $plant) {
+            foreach (array_keys($plant['months'] ?? []) as $m) {
+                $plantCounts[(int)$m]++;
+            }
+        }
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zone 8b Planting Calendar</title>
+    <link rel="stylesheet" href="assets/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+<header class="site-header">
+    <div class="header-inner">
+        <div class="logo">
+            <span class="logo-icon">🌱</span>
+            <div>
+                <h1>Zone 8b Planting Calendar</h1>
+                <p class="logo-sub">Your year-round garden guide</p>
+            </div>
+        </div>
+        <nav class="top-nav">
+            <a href="index.php" class="nav-link active">Calendar</a>
+            <a href="plants.php" class="nav-link">All Plants</a>
+        </nav>
+    </div>
+</header>
+
+<main class="content">
+    <section class="hero">
+        <h2>What to Plant Each Month</h2>
+        <p>Click any month to see what to plant in <strong>USDA Zone 8b</strong>.</p>
+    </section>
+
+    <?php if (empty($plantsData)): ?>
+    <div class="notice warning">
+        ⚠️ <strong>No plant data found.</strong>
+        Run <code>python3 scraper.py</code> first, then reload this page.
+    </div>
+    <?php endif; ?>
+
+    <div class="month-grid">
+        <?php foreach ($months as $num => $name): ?>
+        <a href="month.php?m=<?= $num ?>" class="month-card">
+            <div class="month-emoji"><?= $monthEmoji[$num] ?></div>
+            <div class="month-name"><?= $name ?></div>
+            <div class="month-count">
+                <?php if ($plantCounts[$num] > 0): ?>
+                <span class="count-badge"><?= $plantCounts[$num] ?> plants</span>
+                <?php else: ?>
+                <span class="count-badge empty">No data yet</span>
+                <?php endif; ?>
+            </div>
+        </a>
+        <?php endforeach; ?>
+    </div>
+
+    <section class="info-strip">
+        <div class="info-item">
+            <span class="info-icon">🌡️</span>
+            <div><strong>Zone 8b</strong><small>Min temp 15–20°F</small></div>
+        </div>
+        <div class="info-item">
+            <span class="info-icon">🗓️</span>
+            <div><strong>Last Frost</strong><small>~Mid March</small></div>
+        </div>
+        <div class="info-item">
+            <span class="info-icon">🍂</span>
+            <div><strong>First Frost</strong><small>~Late November</small></div>
+        </div>
+        <div class="info-item">
+            <span class="info-icon">☀️</span>
+            <div><strong>Growing Season</strong><small>~251 days</small></div>
+        </div>
+    </section>
+</main>
+
+<footer class="site-footer">
+    <p>Zone 8b Garden Planting Guide &mdash; Data sourced from
+    <a href="https://gardenate.com" target="_blank">Gardenate.com</a></p>
+</footer>
+</body>
+</html>

month.php

@@ -0,0 +1,151 @@
+<?php
+$dataFile   = __DIR__ . '/data/plants.json';
+$months     = [
+    1=>"January",2=>"February",3=>"March",4=>"April",
+    5=>"May",6=>"June",7=>"July",8=>"August",
+    9=>"September",10=>"October",11=>"November",12=>"December"
+];
+$monthEmoji = [
+    1=>"❄️",2=>"❄️",3=>"🌱",4=>"🌸",5=>"🌿",6=>"☀️",
+    7=>"☀️",8=>"🌻",9=>"🍂",10=>"🍂",11=>"🌧️",12=>"❄️"
+];
+
+$m = isset($_GET['m']) ? (int)$_GET['m'] : 1;
+if ($m < 1 || $m > 12) $m = 1;
+$prev   = $m > 1  ? $m - 1 : 12;
+$next   = $m < 12 ? $m + 1 : 1;
+$plants = [];
+
+if (file_exists($dataFile)) {
+    $json = json_decode(file_get_contents($dataFile), true);
+    if ($json && isset($json['plants'])) {
+        foreach ($json['plants'] as $slug => $plant) {
+            if (isset($plant['months'][strval($m)])) {
+                $plants[$slug] = $plant;
+            }
+        }
+        uksort($plants, fn($a,$b) => strcmp($plants[$a]['name'], $plants[$b]['name']));
+    }
+}
+
+function actionBadge($action) {
+    $a = strtolower($action);
+    if (strpos($a,'sow seed')    !== false) return ['type'=>'sow',       'label'=>'Sow Seed',      'icon'=>'🌱'];
+    if (strpos($a,'seed tray')   !== false ||
+        strpos($a,'start in')    !== false) return ['type'=>'tray',      'label'=>'Start in Trays','icon'=>'🪴'];
+    if (strpos($a,'transplant')  !== false ||
+        strpos($a,'plant out')   !== false) return ['type'=>'transplant','label'=>'Transplant',    'icon'=>'🌿'];
+    if (strpos($a,'tuber')       !== false) return ['type'=>'tuber',     'label'=>'Plant Tubers',  'icon'=>'🥔'];
+    if (strpos($a,'crown')       !== false) return ['type'=>'crown',     'label'=>'Plant Crowns',  'icon'=>'👑'];
+    if (strpos($a,'clove')       !== false) return ['type'=>'clove',     'label'=>'Plant Cloves',  'icon'=>'🧄'];
+    return ['type'=>'general','label'=>'Plant','icon'=>'🌱'];
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= $months[$m] ?> Planting - Zone 8b</title>
+    <link rel="stylesheet" href="assets/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+<header class="site-header">
+    <div class="header-inner">
+        <div class="logo">
+            <span class="logo-icon">🌱</span>
+            <div>
+                <h1>Zone 8b Planting Calendar</h1>
+                <p class="logo-sub">Your year-round garden guide</p>
+            </div>
+        </div>
+        <nav class="top-nav">
+            <a href="index.php" class="nav-link">Calendar</a>
+            <a href="plants.php" class="nav-link">All Plants</a>
+        </nav>
+    </div>
+</header>
+
+<main class="content">
+    <div class="breadcrumb">
+        <a href="index.php">🏠 Home</a>
+        <span class="sep">›</span>
+        <span><?= $monthEmoji[$m] ?> <?= $months[$m] ?></span>
+    </div>
+
+    <div class="month-nav">
+        <a href="month.php?m=<?= $prev ?>" class="month-nav-btn">← <?= $months[$prev] ?></a>
+        <h2 class="month-title"><?= $monthEmoji[$m] ?> <?= $months[$m] ?></h2>
+        <a href="month.php?m=<?= $next ?>" class="month-nav-btn"><?= $months[$next] ?> →</a>
+    </div>
+
+    <?php if (empty($plants)): ?>
+    <div class="notice info">🌧️ No data for <?= $months[$m] ?>. Run the scraper first.</div>
+    <?php else: ?>
+    <p class="month-summary"><?= count($plants) ?> plants for <?= $months[$m] ?> in Zone 8b</p>
+
+    <div class="filter-bar">
+        <button class="filter-btn active" data-filter="all">All (<?= count($plants) ?>)</button>
+        <?php
+        $seenTypes = [];
+        foreach ($plants as $slug => $plant) {
+            $b = actionBadge($plant['months'][strval($m)]);
+            if (!in_array($b['type'], $seenTypes)) {
+                $seenTypes[] = $b['type'];
+                echo "<button class='filter-btn' data-filter='{$b['type']}'>{$b['label']}</button>";
+            }
+        }
+        ?>
+    </div>
+
+    <div class="plant-grid">
+        <?php foreach ($plants as $slug => $plant):
+            $action = $plant['months'][strval($m)];
+            $badge  = actionBadge($action);
+        ?>
+        <a href="plant.php?p=<?= urlencode($slug) ?>&m=<?= $m ?>"
+           class="plant-card" data-type="<?= $badge['type'] ?>">
+            <div class="plant-card-header">
+                <?php if (!empty($plant['image']) && file_exists(__DIR__ . '/' . $plant['image'])): ?>
+                <img src="/<?= htmlspecialchars($plant['image']) ?>"
+                     alt="<?= htmlspecialchars($plant['name']) ?>"
+                     class="plant-thumb">
+                <?php else: ?>
+                <span class="plant-icon"><?= $badge['icon'] ?></span>
+                <?php endif; ?>
+                <span class="action-badge badge-<?= $badge['type'] ?>"><?= $badge['label'] ?></span>
+            </div>
+            <div class="plant-name"><?= htmlspecialchars($plant['name']) ?></div>
+            <?php if (!empty($plant['aliases'])): ?>
+            <div class="plant-aliases">also: <?= htmlspecialchars(implode(', ', array_slice($plant['aliases'],0,3))) ?></div>
+            <?php endif; ?>
+            <div class="plant-action-text"><?= htmlspecialchars($action) ?></div>
+            <?php if (!empty($plant['pot_friendly'])): ?>
+            <div class="pot-badge">🪴 Pot-friendly</div>
+            <?php endif; ?>
+        </a>
+        <?php endforeach; ?>
+    </div>
+    <?php endif; ?>
+</main>
+
+<footer class="site-footer">
+    <p>Zone 8b Garden Planting Guide &mdash; Data sourced from
+    <a href="https://gardenate.com" target="_blank">Gardenate.com</a></p>
+</footer>
+
+<script>
+document.querySelectorAll('.filter-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        const filter = btn.dataset.filter;
+        document.querySelectorAll('.plant-card').forEach(card => {
+            card.style.display = (filter === 'all' || card.dataset.type === filter) ? '' : 'none';
+        });
+    });
+});
+</script>
+</body>
+</html>

plant.php

@@ -0,0 +1,226 @@
+<?php
+$dataFile   = __DIR__ . '/data/plants.json';
+$months     = [1=>'Jan',2=>'Feb',3=>'Mar',4=>'Apr',5=>'May',6=>'Jun',
+               7=>'Jul',8=>'Aug',9=>'Sep',10=>'Oct',11=>'Nov',12=>'Dec'];
+$fullMonths = [1=>'January',2=>'February',3=>'March',4=>'April',
+               5=>'May',6=>'June',7=>'July',8=>'August',
+               9=>'September',10=>'October',11=>'November',12=>'December'];
+
+$slug     = isset($_GET['p']) ? preg_replace('/[^a-z0-9_]/','',strtolower($_GET['p'])) : '';
+$refMonth = isset($_GET['m']) ? (int)$_GET['m'] : 0;
+$plant    = null;
+
+if ($slug && file_exists($dataFile)) {
+    $json = json_decode(file_get_contents($dataFile), true);
+    if ($json && isset($json['plants'][$slug])) {
+        $plant = $json['plants'][$slug];
+    }
+}
+
+if (!$plant) {
+    http_response_code(404);
+    echo '<h1 style="font-family:sans-serif;padding:2rem">Plant not found</h1>';
+    echo '<a href="index.php" style="font-family:sans-serif;padding:2rem">← Home</a>';
+    exit;
+}
+
+function actionBadge($action) {
+    $a = strtolower($action);
+    if (strpos($a,'sow seed')    !== false) return ['type'=>'sow',       'label'=>'Sow Seed',      'icon'=>'🌱'];
+    if (strpos($a,'seed tray')   !== false ||
+        strpos($a,'start in')    !== false) return ['type'=>'tray',      'label'=>'Start in Trays','icon'=>'🪴'];
+    if (strpos($a,'transplant')  !== false ||
+        strpos($a,'plant out')   !== false) return ['type'=>'transplant','label'=>'Transplant',    'icon'=>'🌿'];
+    if (strpos($a,'tuber')       !== false) return ['type'=>'tuber',     'label'=>'Plant Tubers',  'icon'=>'🥔'];
+    if (strpos($a,'crown')       !== false) return ['type'=>'crown',     'label'=>'Plant Crowns',  'icon'=>'👑'];
+    if (strpos($a,'clove')       !== false) return ['type'=>'clove',     'label'=>'Plant Cloves',  'icon'=>'🧄'];
+    return ['type'=>'general','label'=>'Plant','icon'=>'🌱'];
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= htmlspecialchars($plant['name']) ?> - Zone 8b</title>
+    <link rel="stylesheet" href="assets/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+<header class="site-header">
+    <div class="header-inner">
+        <div class="logo">
+            <span class="logo-icon">🌱</span>
+            <div>
+                <h1>Zone 8b Planting Calendar</h1>
+                <p class="logo-sub">Your year-round garden guide</p>
+            </div>
+        </div>
+        <nav class="top-nav">
+            <a href="index.php" class="nav-link">Calendar</a>
+            <a href="plants.php" class="nav-link">All Plants</a>
+        </nav>
+    </div>
+</header>
+
+<main class="content">
+    <div class="breadcrumb">
+        <a href="index.php">🏠 Home</a>
+        <?php if ($refMonth > 0): ?>
+        <span class="sep">›</span>
+        <a href="month.php?m=<?= $refMonth ?>"><?= $fullMonths[$refMonth] ?></a>
+        <?php endif; ?>
+        <span class="sep">›</span>
+        <span><?= htmlspecialchars($plant['name']) ?></span>
+    </div>
+
+    <div class="plant-hero">
+        <?php if (!empty($plant['image']) && file_exists(__DIR__ . '/' . $plant['image'])): ?>
+        <img src="/<?= htmlspecialchars($plant['image']) ?>"
+             alt="<?= htmlspecialchars($plant['name']) ?>"
+             class="plant-hero-img">
+        <?php endif; ?>
+        <div class="plant-hero-info">
+            <h2 class="plant-hero-name"><?= htmlspecialchars($plant['name']) ?></h2>
+            <?php if (!empty($plant['aliases'])): ?>
+            <p class="plant-hero-aliases">Also known as:
+                <em><?= htmlspecialchars(implode(', ', $plant['aliases'])) ?></em>
+            </p>
+            <?php endif; ?>
+            <div class="plant-hero-badges">
+                <?php if (!empty($plant['pot_friendly'])): ?>
+                <span class="hero-badge badge-pot">🪴 Pot Friendly</span>
+                <?php endif; ?>
+                <span class="hero-badge badge-zone">📍 Zone 8b</span>
+            </div>
+        </div>
+    </div>
+
+    <?php if (!empty($plant['description'])): ?>
+    <section class="plant-section">
+        <h3 class="section-title">📖 About</h3>
+        <p class="plant-description"><?= htmlspecialchars($plant['description']) ?></p>
+    </section>
+    <?php endif; ?>
+
+    <section class="plant-section">
+        <h3 class="section-title">📐 Growing Information</h3>
+        <div class="stats-grid">
+            <?php if (!empty($plant['spacing'])): ?>
+            <div class="stat-card">
+                <div class="stat-icon">↔️</div>
+                <div class="stat-label">Plant Spacing</div>
+                <div class="stat-value"><?= htmlspecialchars($plant['spacing']) ?></div>
+            </div>
+            <?php endif; ?>
+            <?php if (!empty($plant['row_spacing'])): ?>
+            <div class="stat-card">
+                <div class="stat-icon">↕️</div>
+                <div class="stat-label">Row Spacing</div>
+                <div class="stat-value"><?= htmlspecialchars($plant['row_spacing']) ?></div>
+            </div>
+            <?php endif; ?>
+            <?php if (!empty($plant['height'])): ?>
+            <div class="stat-card">
+                <div class="stat-icon">📏</div>
+                <div class="stat-label">Plant Height</div>
+                <div class="stat-value"><?= htmlspecialchars($plant['height']) ?></div>
+            </div>
+            <?php endif; ?>
+            <?php if (!empty($plant['harvest_time'])): ?>
+            <div class="stat-card">
+                <div class="stat-icon">🥕</div>
+                <div class="stat-label">Harvest Time</div>
+                <div class="stat-value"><?= htmlspecialchars($plant['harvest_time']) ?></div>
+            </div>
+            <?php endif; ?>
+            <?php if (empty($plant['spacing']) && empty($plant['height']) && empty($plant['harvest_time'])): ?>
+            <p class="no-data-msg">No growing stats yet. Re-run the scraper for more detail.</p>
+            <?php endif; ?>
+        </div>
+    </section>
+
+    <section class="plant-section">
+        <h3 class="section-title">📅 Planting Calendar (Zone 8b)</h3>
+        <div class="month-bar-container">
+            <?php foreach ($months as $num => $name):
+                $hasMonth = isset($plant['months'][strval($num)]);
+                $badge    = $hasMonth ? actionBadge($plant['months'][strval($num)]) : null;
+                $title    = $hasMonth ? htmlspecialchars($plant['months'][strval($num)]) : 'Not a planting month';
+            ?>
+            <div class="month-bar-cell <?= $hasMonth ? 'active badge-'.$badge['type'] : 'inactive' ?>"
+                 title="<?= $title ?>">
+                <div class="mbc-name"><?= $name ?></div>
+                <div class="mbc-icon"><?= $hasMonth ? $badge['icon'] : '–' ?></div>
+            </div>
+            <?php endforeach; ?>
+        </div>
+        <div class="calendar-legend">
+            <span class="legend-item"><span class="legend-dot active-dot"></span> Active month</span>
+            <span class="legend-item"><span class="legend-dot inactive-dot"></span> Not recommended</span>
+        </div>
+    </section>
+
+    <?php if (!empty($plant['months'])): ?>
+    <section class="plant-section">
+        <h3 class="section-title">🗓️ Monthly Actions</h3>
+        <div class="action-list">
+            <?php foreach ($plant['months'] as $mnum => $action):
+                $badge = actionBadge($action);
+            ?>
+            <div class="action-item">
+                <span class="action-month"><?= $fullMonths[(int)$mnum] ?></span>
+                <span class="action-badge badge-<?= $badge['type'] ?>"><?= $badge['icon'] ?> <?= $badge['label'] ?></span>
+                <span class="action-desc"><?= htmlspecialchars($action) ?></span>
+            </div>
+            <?php endforeach; ?>
+        </div>
+    </section>
+    <?php endif; ?>
+
+    <?php if (!empty($plant['notes'])): ?>
+    <section class="plant-section">
+        <h3 class="section-title">📝 Notes & Tips</h3>
+        <div class="notes-box"><?= nl2br(htmlspecialchars($plant['notes'])) ?></div>
+    </section>
+    <?php endif; ?>
+
+    <?php if (!empty($plant['compatible']) || !empty($plant['avoid'])): ?>
+    <section class="plant-section">
+        <h3 class="section-title">🤝 Companion Planting</h3>
+        <div class="companion-grid">
+            <?php if (!empty($plant['compatible'])): ?>
+            <div class="companion-card good">
+                <h4>✅ Grows Well With</h4>
+                <ul><?php foreach ($plant['compatible'] as $c): ?>
+                <li><?= htmlspecialchars($c) ?></li>
+                <?php endforeach; ?></ul>
+            </div>
+            <?php endif; ?>
+            <?php if (!empty($plant['avoid'])): ?>
+            <div class="companion-card bad">
+                <h4>❌ Avoid Growing With</h4>
+                <ul><?php foreach ($plant['avoid'] as $c): ?>
+                <li><?= htmlspecialchars($c) ?></li>
+                <?php endforeach; ?></ul>
+            </div>
+            <?php endif; ?>
+        </div>
+    </section>
+    <?php endif; ?>
+
+    <div class="back-btn-wrap">
+        <?php if ($refMonth > 0): ?>
+        <a href="month.php?m=<?= $refMonth ?>" class="btn-back">← Back to <?= $fullMonths[$refMonth] ?></a>
+        <?php else: ?>
+        <a href="index.php" class="btn-back">← Back to Calendar</a>
+        <?php endif; ?>
+    </div>
+</main>
+
+<footer class="site-footer">
+    <p>Zone 8b Garden Planting Guide &mdash; Data sourced from
+    <a href="https://gardenate.com" target="_blank">Gardenate.com</a></p>
+</footer>
+</body>
+</html>

plants.php

@@ -0,0 +1,112 @@
+<?php
+$dataFile = __DIR__ . '/data/plants.json';
+$plants   = [];
+
+if (file_exists($dataFile)) {
+    $json = json_decode(file_get_contents($dataFile), true);
+    if ($json && isset($json['plants'])) {
+        $plants = $json['plants'];
+        uksort($plants, fn($a,$b) => strcmp($plants[$a]['name'], $plants[$b]['name']));
+    }
+}
+
+$grouped = [];
+foreach ($plants as $slug => $plant) {
+    $letter = strtoupper(substr($plant['name'],0,1));
+    $grouped[$letter][$slug] = $plant;
+}
+ksort($grouped);
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>All Plants - Zone 8b</title>
+    <link rel="stylesheet" href="assets/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+<header class="site-header">
+    <div class="header-inner">
+        <div class="logo">
+            <span class="logo-icon">🌱</span>
+            <div>
+                <h1>Zone 8b Planting Calendar</h1>
+                <p class="logo-sub">Your year-round garden guide</p>
+            </div>
+        </div>
+        <nav class="top-nav">
+            <a href="index.php" class="nav-link">Calendar</a>
+            <a href="plants.php" class="nav-link active">All Plants</a>
+        </nav>
+    </div>
+</header>
+
+<main class="content">
+    <div class="breadcrumb">
+        <a href="index.php">🏠 Home</a>
+        <span class="sep">›</span>
+        <span>All Plants</span>
+    </div>
+
+    <h2 class="page-title">All Vegetables &amp; Herbs</h2>
+    <p class="page-sub"><?= count($plants) ?> plants available for Zone 8b</p>
+
+    <div class="search-wrap">
+        <input type="text" id="plantSearch" class="search-input"
+               placeholder="🔍  Search plants..." autocomplete="off">
+    </div>
+
+    <div class="letter-bar">
+        <?php foreach (array_keys($grouped) as $letter): ?>
+        <a href="#letter-<?= $letter ?>" class="letter-link"><?= $letter ?></a>
+        <?php endforeach; ?>
+    </div>
+
+    <?php foreach ($grouped as $letter => $letterPlants): ?>
+    <div class="letter-group" id="letter-<?= $letter ?>">
+        <h3 class="letter-heading"><?= $letter ?></h3>
+        <div class="az-plant-list">
+            <?php foreach ($letterPlants as $slug => $plant): ?>
+            <a href="plant.php?p=<?= urlencode($slug) ?>"
+               class="az-plant-item"
+               data-name="<?= strtolower(htmlspecialchars($plant['name'])) ?>">
+                <?php if (!empty($plant['image']) && file_exists(__DIR__ . '/' . $plant['image'])): ?>
+                <img src="/<?= htmlspecialchars($plant['image']) ?>"
+                     alt="<?= htmlspecialchars($plant['name']) ?>"
+                     class="az-plant-thumb">
+                <?php else: ?>
+                <span class="az-plant-no-img">🌿</span>
+                <?php endif; ?>
+                <span class="az-plant-name"><?= htmlspecialchars($plant['name']) ?></span>
+                <?php if (!empty($plant['aliases'])): ?>
+                <span class="az-plant-alias"><?= htmlspecialchars(implode(', ', array_slice($plant['aliases'],0,2))) ?></span>
+                <?php endif; ?>
+                <span class="az-plant-months"><?= count($plant['months'] ?? []) ?> months</span>
+            </a>
+            <?php endforeach; ?>
+        </div>
+    </div>
+    <?php endforeach; ?>
+</main>
+
+<footer class="site-footer">
+    <p>Zone 8b Garden Planting Guide &mdash; Data sourced from
+    <a href="https://gardenate.com" target="_blank">Gardenate.com</a></p>
+</footer>
+
+<script>
+document.getElementById('plantSearch').addEventListener('input', function() {
+    const q = this.value.toLowerCase().trim();
+    document.querySelectorAll('.az-plant-item').forEach(el => {
+        el.style.display = (!q || el.dataset.name.includes(q)) ? '' : 'none';
+    });
+    document.querySelectorAll('.letter-group').forEach(group => {
+        const visible = [...group.querySelectorAll('.az-plant-item')].some(el => el.style.display !== 'none');
+        group.style.display = visible ? '' : 'none';
+    });
+});
+</script>
+</body>
+</html>