|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GrowBuddy - Cannabis Grow Assistant</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
width: 100%; |
|
|
} |
|
|
.phase-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.phase-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
position: fixed; |
|
|
left: -100%; |
|
|
top: 0; |
|
|
z-index: 50; |
|
|
height: 100vh; |
|
|
} |
|
|
.sidebar.active { |
|
|
left: 0; |
|
|
} |
|
|
.overlay { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: rgba(0,0,0,0.5); |
|
|
z-index: 40; |
|
|
} |
|
|
.overlay.active { |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<div class="md:hidden fixed top-4 left-4 z-50"> |
|
|
<button id="menuBtn" class="p-2 rounded-lg bg-green-600 text-white"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="overlay" class="overlay"></div> |
|
|
|
|
|
|
|
|
<div id="sidebar" class="sidebar bg-white w-64 p-4 shadow-lg fixed h-full"> |
|
|
<div class="flex items-center justify-between mb-8"> |
|
|
<h1 class="text-2xl font-bold text-green-700">GrowBuddy</h1> |
|
|
<button id="closeMenuBtn" class="md:hidden p-2 text-gray-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
<span class="text-sm font-medium">Active Grow: <span id="currentGrowName">Blue Dream</span></span> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">Day 24</button> |
|
|
<button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Vegetative</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg bg-green-100 text-green-700"> |
|
|
<i class="fas fa-home mr-3"></i> |
|
|
<span>Dashboard</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700"> |
|
|
<i class="fas fa-seedling mr-3"></i> |
|
|
<span>Grow Cycle</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span>Data Logging</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700"> |
|
|
<i class="fas fa-tasks mr-3"></i> |
|
|
<span>Tasks & Reminders</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span>Setup Management</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700"> |
|
|
<i class="fas fa-question-circle mr-3"></i> |
|
|
<span>Troubleshooting</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<div class="mt-8 pt-4 border-t border-gray-200"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="text-sm font-medium">User Mode:</span> |
|
|
<div class="relative"> |
|
|
<select class="block appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-1 px-2 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-green-500 text-sm"> |
|
|
<option>Beginner</option> |
|
|
<option>Pro</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-chevron-down text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-plus mr-2"></i> New Grow |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:ml-64 p-4"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Grow Dashboard</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700"> |
|
|
<i class="fas fa-question-circle"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-lg font-semibold mb-4 text-gray-700">Grow Cycle Progress</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
|
|
<div class="phase-card bg-white p-4 rounded-lg shadow border-l-4 border-blue-500"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Germination</h4> |
|
|
<p class="text-sm text-gray-500">Completed</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i class="fas fa-check text-blue-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 text-xs text-gray-500"> |
|
|
<span class="font-medium">Day 1-7</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="phase-card bg-white p-4 rounded-lg shadow border-l-4 border-green-500"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Seedling</h4> |
|
|
<p class="text-sm text-gray-500">Completed</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 text-xs text-gray-500"> |
|
|
<span class="font-medium">Day 8-14</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="phase-card bg-white p-4 rounded-lg shadow border-l-4 border-yellow-500"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Vegetative</h4> |
|
|
<p class="text-sm text-yellow-600">Current Phase</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center"> |
|
|
<i class="fas fa-leaf text-yellow-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 text-xs text-gray-500"> |
|
|
<span class="font-medium">Day 15-42</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="phase-card bg-white p-4 rounded-lg shadow border-l-4 border-purple-300"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Flowering</h4> |
|
|
<p class="text-sm text-gray-500">Upcoming</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center"> |
|
|
<i class="fas fa-spa text-purple-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 text-xs text-gray-500"> |
|
|
<span class="font-medium">Day 43-100</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8 bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="bg-yellow-50 p-4 border-b border-yellow-100"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 flex items-center"> |
|
|
<i class="fas fa-info-circle text-yellow-500 mr-2"></i> |
|
|
Vegetative Phase Guide (Day 24) |
|
|
</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700 mb-2 flex items-center"> |
|
|
<i class="fas fa-lightbulb text-green-500 mr-2"></i> |
|
|
Lighting |
|
|
</h4> |
|
|
<p class="text-sm text-gray-600 mb-2">18-24 hours of light per day</p> |
|
|
<p class="text-sm text-gray-600">PPFD: 400-600 μmol/m²/s</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700 mb-2 flex items-center"> |
|
|
<i class="fas fa-tint text-blue-500 mr-2"></i> |
|
|
Water & Nutrients |
|
|
</h4> |
|
|
<p class="text-sm text-gray-600 mb-2">pH: 5.8-6.3 (adjust for medium)</p> |
|
|
<p class="text-sm text-gray-600">EC: 1.2-1.8 mS/cm</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700 mb-2 flex items-center"> |
|
|
<i class="fas fa-thermometer-half text-red-500 mr-2"></i> |
|
|
Environment |
|
|
</h4> |
|
|
<p class="text-sm text-gray-600 mb-2">Temp: 22-28°C (day), 18-22°C (night)</p> |
|
|
<p class="text-sm text-gray-600">RH: 50-70%</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<h4 class="font-medium text-gray-700 mb-2">Recommended Actions</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
|
|
<span class="text-sm text-gray-700">Continue LST (Low Stress Training) to promote bushier growth</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
|
|
<span class="text-sm text-gray-700">Monitor for pests - inspect undersides of leaves</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
|
|
<span class="text-sm text-gray-700">Increase nitrogen slightly if leaves appear light green</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-700">Grow Data Tracking</h3> |
|
|
<button class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Data Point |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4 mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h4 class="font-medium text-gray-700">Environmental Conditions</h4> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-xs"> |
|
|
7 Days |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs"> |
|
|
30 Days |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-xs"> |
|
|
All |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="envChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<h4 class="font-medium text-gray-700 mb-4">Nutrient Solution</h4> |
|
|
<div class="chart-container"> |
|
|
<canvas id="nutrientChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<h4 class="font-medium text-gray-700 mb-4">Water Consumption</h4> |
|
|
<div class="chart-container"> |
|
|
<canvas id="waterChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8 bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="bg-blue-50 p-4 border-b border-blue-100"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 flex items-center justify-between"> |
|
|
<span><i class="fas fa-tasks text-blue-500 mr-2"></i> Upcoming Tasks</span> |
|
|
<button class="text-blue-600 text-sm font-medium">View All</button> |
|
|
</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="mr-3 mt-1"> |
|
|
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center"> |
|
|
<i class="fas fa-exclamation text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h4 class="font-medium text-gray-800">Check pH & EC levels</h4> |
|
|
<span class="text-xs bg-red-100 text-red-700 px-2 py-1 rounded-full">Today</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">Measure and adjust nutrient solution pH to 5.8-6.0</p> |
|
|
<div class="flex items-center mt-2 text-xs text-gray-500"> |
|
|
<i class="far fa-clock mr-1"></i> |
|
|
<span>Due: Today 6:00 PM</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="mr-3 mt-1"> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center"> |
|
|
<i class="fas fa-tint text-yellow-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h4 class="font-medium text-gray-800">Water plants</h4> |
|
|
<span class="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full">Tomorrow</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">Water with 1L per plant, check runoff EC</p> |
|
|
<div class="flex items-center mt-2 text-xs text-gray-500"> |
|
|
<i class="far fa-clock mr-1"></i> |
|
|
<span>Due: Tomorrow 10:00 AM</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="mr-3 mt-1"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i class="fas fa-cut text-green-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h4 class="font-medium text-gray-800">LST (Low Stress Training)</h4> |
|
|
<span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">In 2 days</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">Adjust ties to spread branches evenly</p> |
|
|
<div class="flex items-center mt-2 text-xs text-gray-500"> |
|
|
<i class="far fa-clock mr-1"></i> |
|
|
<span>Due: Friday 2:00 PM</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-plus mr-2"></i> Add New Task |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4 mb-8"> |
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-4">Quick Log Entry</h3> |
|
|
<form> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">pH</label> |
|
|
<input type="number" step="0.1" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">EC (mS/cm)</label> |
|
|
<input type="number" step="0.1" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Temp (°C)</label> |
|
|
<input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">RH (%)</label> |
|
|
<input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Notes</label> |
|
|
<textarea rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"></textarea> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<button type="button" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-sm font-medium mr-2"> |
|
|
Cancel |
|
|
</button> |
|
|
<button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium"> |
|
|
Save Log |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const menuBtn = document.getElementById('menuBtn'); |
|
|
const closeMenuBtn = document.getElementById('closeMenuBtn'); |
|
|
const sidebar = document.getElementById('sidebar'); |
|
|
const overlay = document.getElementById('overlay'); |
|
|
|
|
|
menuBtn.addEventListener('click', () => { |
|
|
sidebar.classList.add('active'); |
|
|
overlay.classList.add('active'); |
|
|
}); |
|
|
|
|
|
closeMenuBtn.addEventListener('click', () => { |
|
|
sidebar.classList.remove('active'); |
|
|
overlay.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
overlay.addEventListener('click', () => { |
|
|
sidebar.classList.remove('active'); |
|
|
overlay.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const envCtx = document.getElementById('envChart').getContext('2d'); |
|
|
const envChart = new Chart(envCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: Array.from({length: 30}, (_, i) => `Day ${i+1}`), |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Temperature (°C)', |
|
|
data: Array.from({length: 30}, () => Math.floor(Math.random() * 5) + 22), |
|
|
borderColor: 'rgb(239, 68, 68)', |
|
|
backgroundColor: 'rgba(239, 68, 68, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}, |
|
|
{ |
|
|
label: 'Humidity (%)', |
|
|
data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 50), |
|
|
borderColor: 'rgb(59, 130, 246)', |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false, |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
suggestedMin: 15, |
|
|
suggestedMax: 80 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const nutrientCtx = document.getElementById('nutrientChart').getContext('2d'); |
|
|
const nutrientChart = new Chart(nutrientCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: Array.from({length: 30}, (_, i) => `Day ${i+1}`), |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'pH', |
|
|
data: Array.from({length: 30}, () => (Math.random() * 0.5) + 5.7), |
|
|
borderColor: 'rgb(16, 185, 129)', |
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true, |
|
|
yAxisID: 'y' |
|
|
}, |
|
|
{ |
|
|
label: 'EC (mS/cm)', |
|
|
data: Array.from({length: 30}, () => (Math.random() * 0.6) + 1.2), |
|
|
borderColor: 'rgb(245, 158, 11)', |
|
|
backgroundColor: 'rgba(245, 158, 11, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true, |
|
|
yAxisID: 'y1' |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false, |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
type: 'linear', |
|
|
display: true, |
|
|
position: 'left', |
|
|
min: 5, |
|
|
max: 7, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'pH' |
|
|
} |
|
|
}, |
|
|
y1: { |
|
|
type: 'linear', |
|
|
display: true, |
|
|
position: 'right', |
|
|
min: 0.5, |
|
|
max: 2.5, |
|
|
grid: { |
|
|
drawOnChartArea: false, |
|
|
}, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'EC (mS/cm)' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const waterCtx = document.getElementById('waterChart').getContext('2d'); |
|
|
const waterChart = new Chart(waterCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: Array.from({length: 7}, (_, i) => `Week ${i+1}`), |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Water (L)', |
|
|
data: [2, 3, 4, 5, 6, 7, 8], |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.7)', |
|
|
borderRadius: 4 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Liters' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chiminaca/growbuddy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
