217 lines
8.5 KiB
HTML
217 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Sproutly</title>
|
|
<link rel="stylesheet" href="/css/style.css" />
|
|
</head>
|
|
<body>
|
|
<aside class="sidebar">
|
|
<div class="sidebar-brand">
|
|
<span class="brand-icon">🌿</span>
|
|
<span class="brand-name">Sproutly</span>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<a href="#dashboard" class="nav-link active" data-page="dashboard">
|
|
<span class="nav-icon">📈</span> Dashboard
|
|
</a>
|
|
<a href="#varieties" class="nav-link" data-page="varieties">
|
|
<span class="nav-icon">🌱</span> Seed Library
|
|
</a>
|
|
<a href="#garden" class="nav-link" data-page="garden">
|
|
<span class="nav-icon">🌿</span> My Garden
|
|
</a>
|
|
<a href="#settings" class="nav-link" data-page="settings">
|
|
<span class="nav-icon">⚙</span> Settings
|
|
</a>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<span id="sidebar-date"></span>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<!-- DASHBOARD -->
|
|
<section id="page-dashboard" class="page active">
|
|
<div class="page-header">
|
|
<div>
|
|
<h1 class="page-title">Dashboard</h1>
|
|
<p class="page-subtitle" id="dash-subtitle">Loading your garden...</p>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="App.showAddBatchModal()">+ Log Batch</button>
|
|
</div>
|
|
|
|
<div class="stats-row" id="stats-row">
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="stat-varieties">—</div>
|
|
<div class="stat-label">Seed Varieties</div>
|
|
</div>
|
|
<div class="stat-card accent">
|
|
<div class="stat-value" id="stat-active">—</div>
|
|
<div class="stat-label">Active Batches</div>
|
|
</div>
|
|
<div class="stat-card green">
|
|
<div class="stat-value" id="stat-garden">—</div>
|
|
<div class="stat-label">In Garden</div>
|
|
</div>
|
|
<div class="stat-card warn">
|
|
<div class="stat-value" id="stat-tasks">—</div>
|
|
<div class="stat-label">Tasks This Month</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-header">
|
|
<h2>Action Needed</h2>
|
|
<span class="badge badge-frost" id="frost-badge"></span>
|
|
</div>
|
|
<div id="tasks-container">
|
|
<div class="empty-state">Loading tasks...</div>
|
|
</div>
|
|
|
|
<div class="section-header" style="margin-top:2rem">
|
|
<h2>Year Planting Timeline</h2>
|
|
<span class="hint-text">Based on your last frost date</span>
|
|
</div>
|
|
<div class="timeline-wrapper" id="timeline-container">
|
|
<div class="empty-state">Configure your last frost date in Settings to see the timeline.</div>
|
|
</div>
|
|
|
|
<div class="section-header" style="margin-top:2rem">
|
|
<h2>Active Batches</h2>
|
|
</div>
|
|
<div class="batch-grid" id="active-batches-container">
|
|
<div class="empty-state">No active batches. Start tracking by logging a batch!</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SEED LIBRARY -->
|
|
<section id="page-varieties" class="page">
|
|
<div class="page-header">
|
|
<div>
|
|
<h1 class="page-title">Seed Library</h1>
|
|
<p class="page-subtitle">Manage your plant varieties and growing schedules</p>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="App.showAddVarietyModal()">+ Add Variety</button>
|
|
</div>
|
|
<div class="filter-bar">
|
|
<input type="text" id="variety-search" class="search-input" placeholder="Search varieties..." oninput="App.filterVarieties()" />
|
|
<select id="variety-cat-filter" class="select-input" onchange="App.filterVarieties()">
|
|
<option value="">All Categories</option>
|
|
<option value="vegetable">Vegetables</option>
|
|
<option value="herb">Herbs</option>
|
|
<option value="flower">Flowers</option>
|
|
<option value="fruit">Fruit</option>
|
|
</select>
|
|
</div>
|
|
<div id="varieties-container">
|
|
<div class="empty-state">Loading varieties...</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MY GARDEN -->
|
|
<section id="page-garden" class="page">
|
|
<div class="page-header">
|
|
<div>
|
|
<h1 class="page-title">My Garden</h1>
|
|
<p class="page-subtitle">Track your growing batches from seed to harvest</p>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="App.showAddBatchModal()">+ Log Batch</button>
|
|
</div>
|
|
<div class="filter-bar">
|
|
<select id="garden-status-filter" class="select-input" onchange="App.filterBatches()">
|
|
<option value="">All Statuses</option>
|
|
<option value="planned">Planned</option>
|
|
<option value="germinating">Germinating</option>
|
|
<option value="seedling">Seedling</option>
|
|
<option value="potted_up">Potted Up</option>
|
|
<option value="hardening">Hardening Off</option>
|
|
<option value="garden">In Garden</option>
|
|
<option value="harvested">Harvested</option>
|
|
<option value="failed">Failed</option>
|
|
</select>
|
|
</div>
|
|
<div class="batch-grid" id="garden-container">
|
|
<div class="empty-state">Loading batches...</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SETTINGS -->
|
|
<section id="page-settings" class="page">
|
|
<div class="page-header">
|
|
<div>
|
|
<h1 class="page-title">Settings</h1>
|
|
<p class="page-subtitle">Configure your growing zone and notifications</p>
|
|
</div>
|
|
</div>
|
|
<div class="settings-grid">
|
|
<div class="settings-card">
|
|
<h3 class="settings-section-title">Growing Zone</h3>
|
|
<div class="form-group">
|
|
<label class="form-label">Location Name</label>
|
|
<input type="text" id="s-location" class="form-input" placeholder="e.g. Backyard Garden" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Last Spring Frost Date</label>
|
|
<input type="date" id="s-last-frost" class="form-input" />
|
|
<span class="form-hint">Used to calculate all seed starting dates</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">First Fall Frost Date</label>
|
|
<input type="date" id="s-first-frost" class="form-input" />
|
|
<span class="form-hint">Used for fall planting planning</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Timezone</label>
|
|
<input type="text" id="s-timezone" class="form-input" placeholder="e.g. America/New_York" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<h3 class="settings-section-title">Ntfy Notifications</h3>
|
|
<p class="settings-desc">
|
|
Get daily summaries on your phone via <a href="https://ntfy.sh" target="_blank">ntfy.sh</a> (free, open source push notifications).
|
|
</p>
|
|
<div class="form-group">
|
|
<label class="form-label">Ntfy Server</label>
|
|
<input type="text" id="s-ntfy-server" class="form-input" placeholder="https://ntfy.sh" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Ntfy Topic</label>
|
|
<input type="text" id="s-ntfy-topic" class="form-input" placeholder="my-garden-alerts" />
|
|
<span class="form-hint">Subscribe to this topic in the ntfy app</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Daily Summary Time</label>
|
|
<input type="time" id="s-notif-time" class="form-input" />
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn btn-secondary" onclick="App.sendTestNotification()">Send Test</button>
|
|
<button class="btn btn-secondary" onclick="App.sendDailySummary()">Send Summary Now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:1rem">
|
|
<button class="btn btn-primary" onclick="App.saveSettings()">Save Settings</button>
|
|
<span id="settings-status" class="settings-status"></span>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- MODALS -->
|
|
<div id="modal-overlay" class="modal-overlay hidden" onclick="App.closeModal(event)">
|
|
<div class="modal" id="modal-box">
|
|
<div class="modal-header">
|
|
<h3 id="modal-title">Modal</h3>
|
|
<button class="modal-close" onclick="App.closeModal()">×</button>
|
|
</div>
|
|
<div id="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast hidden"></div>
|
|
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
</html>
|