112 lines
4.1 KiB
PHP
112 lines
4.1 KiB
PHP
<?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 & 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 — 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>
|