🌿 PlantCare — Smart Plant Monitor

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_260":261,"_262":263},"routes/_app.x.$handle.$name",{"_100":99,"_37":48,"_108":90,"_32":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_26":-5,"_120":-5,"_121":-5,"_122":30,"_123":124,"_125":126,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_46":47,"_37":48,"_41":49,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":-5,"_19":58,"_59":-5,"_60":30,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":30},"version",11,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","5ae0e729-b0b6-462e-b671-90cf826f3093","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":26,"_39":40,"_41":42,"_43":14,"_44":45,"_29":30},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","9a9e3a82-2dad-11f1-bb61-42dde27851f2","name","fileType","content","# 🌿 PlantCare — Smart Plant Health Monitoring System\n\nA full-stack IoT-inspired smart plant health dashboard with real-time sensor monitoring, AI-based health analysis, automation controls, and trend visualization.\n\n## ✨ Features\n\n| Feature | Details |\n|---|---|\n| 📊 Live Dashboard | Soil moisture, temperature, humidity with progress bars |\n| 🚨 Smart Alerts | Color-coded warnings (🟢 Healthy / 🟡 Moderate / 🔴 Critical) |\n| 🧠 AI Decisions | Stress level analysis with actionable suggestions |\n| ⚙️ Automation | Auto watering & cooling fan toggle controls |\n| 📈 Trend Chart | Line graph of last 20 readings (Chart.js) |\n| 🏗️ Architecture | System diagram showing full IoT data flow |\n| 📡 REST API | POST sensor data from real Arduino/ESP32 |\n\n## 🏗️ System Architecture\n\n```mermaid\nflowchart LR\n A[🌡️ Sensors\\nMoisture • Temp • Humidity] -->|Analog Signal| B[🤖 Microcontroller\\nArduino / ESP32]\n B -->|HTTP POST /api/reading| C[☁️ Cloud API\\nVal Town Backend]\n C -->|SQLite Storage| D[(Database\\nSensor History)]\n C -->|analyzeHealth| E[🧠 AI Engine\\nStress Analysis]\n E -->|JSON Response| F[📱 Dashboard\\nReact UI]\n F -->|Toggle Controls| C\n```\n\n## 📁 Project Structure\n\n```\nplant-health-monitor/\n├── main.ts # HTTP entrypoint\n├── backend/\n│ ├── index.ts # Hono routes\n│ └── database.ts # SQLite queries\n├── shared/\n│ └── types.ts # Types + AI health analysis\n└── frontend/\n ├── index.html # HTML shell\n ├── style.css # Green eco theme\n └── app.tsx # React dashboard\n```\n\n## 🔌 API Endpoints\n\n### `GET /api/status`\nReturns latest sensor reading + AI health analysis + automation state.\n\n### `GET /api/history?limit=20`\nReturns last N readings for chart rendering.\n\n### `POST /api/reading`\nIngest real sensor data from Arduino/ESP32:\n```json\n{ \"soilMoisture\": 45, \"temperature\": 28, \"humidity\": 60 }\n```\n\n### `POST /api/simulate`\nGenerate a simulated sensor reading (for demo/testing).\n\n### `GET|POST /api/automation`\nRead or update watering/fan automation state.\n\n## 🤖 AI Health Logic\n\n| Condition | Score | Alert |\n|---|---|---|\n| Moisture < 20% | +3 | 🚨 Critical dry |\n| Moisture < 40% | +1 | ⚠️ Low moisture |\n| Temp > 38°C | +3 | 🔥 Critical heat |\n| Temp > 32°C | +1 | 🌡️ Too warm |\n| Temp < 10°C | +2 | 🥶 Too cold |\n| Humidity < 30% | +1 | 💨 Dry air |\n| Humidity > 85% | +1 | 🌧️ Fungal risk |\n\n- Score 0 → **Healthy** 🟢 \n- Score 1–2 → **Moderate** 🟡 \n- Score 3+ → **Critical** 🔴\n\n## 🌱 Connecting a Real Sensor (Arduino/ESP32)\n\n```cpp\n// Arduino / ESP32 snippet\n#include \n#include \n\nHTTPClient http;\nhttp.begin(\"https://your-val-endpoint.web.val.run/api/reading\");\nhttp.addHeader(\"Content-Type\", \"application/json\");\n\nString body = \"{\\\"soilMoisture\\\":\" + String(moistureVal) +\n \",\\\"temperature\\\":\" + String(tempVal) +\n \",\\\"humidity\\\":\" + String(humidityVal) + \"}\";\n\nint code = http.POST(body);\n```\n","createdAt",["D",1775035907178],"branchVersion","branchId","dc9fb010-2dac-11f1-b5c0-42dde27851f2","id","dc9f5912-2dac-11f1-b5c0-42dde27851f2","plant-health-monitor",["D",1775035588423],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Smart Plant Health Monitoring System - IoT Dashboard","imageUrl","019d4858-97c2-74c5-a932-e884d55ffc59","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d4858-97c2-74c5-a932-ed4a859790a5","tursoName","dc9f59122dac11f1b5c042dde27851f2","tursoHostname","dc9f59122dac11f1b5c042dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789516253896],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_19":58,"_104":105,"_106":30},"branch",{"_13":14,"_37":90,"_46":45,"_91":47,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":48,"_98":99},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","shalini","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzNCa1p1TFdjMXVPQjRNdGREdGhTeTBlaFl1NiJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_46":47,"_37":48,"_41":255,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":-5,"_19":58,"_59":-5,"_60":30,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":256,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":257,"_85":258,"_87":259,"_89":30},"tree",[179,182,186,188,189],"files",[179,180,181,182,183,184,185,186,187,188,189],"counts",{"_169":64,"_170":140,"_171":64,"_172":173,"_174":175},"contents",[131,132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_46":163,"_37":164,"_35":165,"_139":-5,"_44":45,"_43":166,"_141":126,"_41":167,"_13":64,"_38":155,"_39":-5,"_29":30,"_145":-5,"_32":168},{"_46":157,"_37":158,"_35":159,"_139":-5,"_44":45,"_43":160,"_141":126,"_41":161,"_13":64,"_38":155,"_39":-5,"_29":30,"_145":-5,"_32":162},{"_46":150,"_37":151,"_35":152,"_139":-5,"_44":45,"_43":153,"_141":126,"_41":154,"_13":64,"_38":155,"_39":-5,"_29":30,"_145":-5,"_32":156},{"_46":147,"_37":33,"_35":36,"_139":-5,"_44":45,"_43":14,"_141":126,"_41":148,"_13":64,"_38":26,"_39":40,"_29":30,"_145":-5,"_32":149},{"_46":136,"_37":137,"_35":138,"_139":-5,"_44":45,"_43":140,"_141":126,"_41":142,"_13":64,"_38":143,"_39":144,"_29":30,"_145":-5,"_32":146},"dca266b6-2dac-11f1-b5c0-42dde27851f2","main.ts","dca26792-2dac-11f1-b5c0-42dde27851f2","parentId",1,"latest",["D",1775035588438],"http","export { default } from \"./backend/index.ts\";\n","label",[137],"9a9e39ce-2dad-11f1-bb61-42dde27851f2",["D",1775035907178],[33],"eab947a6-2dac-11f1-a5ae-42dde27851f2","shared","eab94864-2dac-11f1-a5ae-42dde27851f2",4,["D",1775035612067],"directory",[151],"e7b02c28-2dac-11f1-b5c0-42dde27851f2","frontend","e7b02cfa-2dac-11f1-b5c0-42dde27851f2",3,["D",1775035606983],[158],"e410aa0c-2dac-11f1-9c4d-42dde27851f2","backend","e410aab6-2dac-11f1-9c4d-42dde27851f2",2,["D",1775035600896],[164],"pulls","branches","forks","envVars",{"_176":64,"_178":64},"connections",{"_176":64,"_177":64},"count","unfilledCount","emptyCount",{"_46":163,"_37":164,"_35":165,"_139":-5,"_44":45,"_43":166,"_141":126,"_41":252,"_13":64,"_38":155,"_39":-5,"_29":30,"_145":-5,"_191":253,"_32":254},{"_46":244,"_37":245,"_35":246,"_139":165,"_44":45,"_43":247,"_141":126,"_41":248,"_13":64,"_38":202,"_39":249,"_29":30,"_145":-5,"_191":250,"_32":251},{"_46":236,"_37":237,"_35":238,"_139":165,"_44":45,"_43":239,"_141":126,"_41":240,"_13":64,"_38":202,"_39":241,"_29":30,"_145":-5,"_191":242,"_32":243},{"_46":157,"_37":158,"_35":159,"_139":-5,"_44":45,"_43":160,"_141":126,"_41":233,"_13":64,"_38":155,"_39":-5,"_29":30,"_145":-5,"_191":234,"_32":235},{"_46":225,"_37":226,"_35":227,"_139":159,"_44":45,"_43":228,"_141":126,"_41":229,"_13":64,"_38":26,"_39":230,"_29":30,"_145":-5,"_191":231,"_32":232},{"_46":217,"_37":218,"_35":219,"_139":159,"_44":45,"_43":220,"_141":126,"_41":221,"_13":64,"_38":26,"_39":222,"_29":30,"_145":-5,"_191":223,"_32":224},{"_46":209,"_37":210,"_35":211,"_139":159,"_44":45,"_43":212,"_141":126,"_41":213,"_13":64,"_38":26,"_39":214,"_29":30,"_145":-5,"_191":215,"_32":216},{"_46":150,"_37":151,"_35":152,"_139":-5,"_44":45,"_43":153,"_141":126,"_41":206,"_13":64,"_38":155,"_39":-5,"_29":30,"_145":-5,"_191":207,"_32":208},{"_46":197,"_37":198,"_35":199,"_139":152,"_44":45,"_43":200,"_141":126,"_41":201,"_13":64,"_38":202,"_39":203,"_29":30,"_145":-5,"_191":204,"_32":205},{"_46":147,"_37":33,"_35":36,"_139":-5,"_44":45,"_43":14,"_141":126,"_41":194,"_13":64,"_38":26,"_39":40,"_29":30,"_145":-5,"_191":195,"_32":196},{"_46":136,"_37":137,"_35":138,"_139":-5,"_44":45,"_43":140,"_141":126,"_41":190,"_13":64,"_38":143,"_39":144,"_29":30,"_145":-5,"_191":192,"_32":193},["D",1775035588438],"children",[],[137],["D",1775035907178],[],[33],"f5af35c6-2dac-11f1-869a-42dde27851f2","types.ts","f5af36e8-2dac-11f1-869a-42dde27851f2",5,["D",1775035630463],"script","export interface SensorReading {\n id?: number;\n timestamp: string;\n soilMoisture: number; // 0-100 %\n temperature: number; // Celsius\n humidity: number; // 0-100 %\n}\n\nexport interface PlantStatus {\n health: \"Healthy\" | \"Moderate\" | \"Critical\";\n color: \"green\" | \"yellow\" | \"red\";\n alerts: string[];\n suggestions: string[];\n autoWater: boolean;\n autoFan: boolean;\n}\n\nexport interface AutomationState {\n autoWater: boolean;\n autoFan: boolean;\n}\n\nexport function analyzeHealth(reading: SensorReading, automation: AutomationState): PlantStatus {\n const alerts: string[] = [];\n const suggestions: string[] = [];\n let stressScore = 0;\n\n // Soil moisture analysis\n if (reading.soilMoisture < 20) {\n stressScore += 3;\n alerts.push(\"🚨 Soil is critically dry!\");\n suggestions.push(\"💧 Water your plant immediately — soil moisture is below 20%.\");\n } else if (reading.soilMoisture < 40) {\n stressScore += 1;\n alerts.push(\"⚠️ Soil moisture is low.\");\n suggestions.push(\"💧 Consider watering soon — moisture is under 40%.\");\n }\n\n // Temperature analysis\n if (reading.temperature > 38) {\n stressScore += 3;\n alerts.push(\"🔥 Temperature is critically high!\");\n suggestions.push(\"❄️ Activate cooling immediately — temperature exceeds 38°C.\");\n } else if (reading.temperature > 32) {\n stressScore += 1;\n alerts.push(\"🌡️ Temperature is above optimal range.\");\n suggestions.push(\"🌬️ Consider turning on the fan — temperature is above 32°C.\");\n } else if (reading.temperature < 10) {\n stressScore += 2;\n alerts.push(\"🥶 Temperature is too cold for most plants.\");\n suggestions.push(\"🌿 Move plant to a warmer location.\");\n }\n\n // Humidity analysis\n if (reading.humidity < 30) {\n stressScore += 1;\n alerts.push(\"💨 Air humidity is too low.\");\n suggestions.push(\"🌫️ Mist the leaves or use a humidifier.\");\n } else if (reading.humidity > 85) {\n stressScore += 1;\n alerts.push(\"🌧️ Humidity is very high — risk of fungal growth.\");\n suggestions.push(\"🌀 Improve air circulation to reduce humidity.\");\n }\n\n let health: PlantStatus[\"health\"];\n let color: PlantStatus[\"color\"];\n\n if (stressScore === 0) {\n health = \"Healthy\";\n color = \"green\";\n suggestions.push(\"✅ Plant conditions are optimal. Keep it up!\");\n } else if (stressScore <= 2) {\n health = \"Moderate\";\n color = \"yellow\";\n } else {\n health = \"Critical\";\n color = \"red\";\n }\n\n return {\n health,\n color,\n alerts,\n suggestions,\n autoWater: automation.autoWater,\n autoFan: automation.autoFan,\n };\n}\n",[],[151,198],["D",1775035612067],[187],[151],"36ee554e-2dad-11f1-a442-42dde27851f2","style.css","36ee5652-2dad-11f1-a442-42dde27851f2",9,["D",1775035739931],"/* ── PlantCare Global Styles ── */\n:root {\n --green-dark: #1a4731;\n --green-mid: #2d7a4f;\n --green-light: #4caf82;\n --green-pale: #e8f5ee;\n --green-accent: #34d970;\n --yellow: #f5c842;\n --yellow-light: #fff8dc;\n --red: #e63946;\n --red-light: #fff0f0;\n --blue: #2196f3;\n --blue-light: #e3f2fd;\n --gray-100: #f4f6f4;\n --gray-200: #e2e8e4;\n --gray-500: #6b7c74;\n --gray-700: #374840;\n --white: #ffffff;\n --shadow: 0 4px 20px rgba(45, 122, 79, 0.12);\n --shadow-hover: 0 8px 32px rgba(45, 122, 79, 0.2);\n --radius: 16px;\n --radius-sm: 10px;\n --transition: 0.25s ease;\n}\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nbody {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: var(--gray-100);\n color: var(--gray-700);\n min-height: 100vh;\n}\n\n/* ── Header ── */\n.header {\n background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);\n color: white;\n padding: 0 24px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: sticky;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 16px rgba(0,0,0,0.2);\n}\n.header-brand { display: flex; align-items: center; gap: 12px; }\n.header-brand h1 { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.5px; }\n.header-brand .logo { font-size: 1.8rem; }\n.header-right { display: flex; align-items: center; gap: 16px; }\n.live-badge {\n display: flex; align-items: center; gap: 6px;\n background: rgba(255,255,255,0.15);\n padding: 5px 12px;\n border-radius: 20px;\n font-size: 0.8rem;\n font-weight: 600;\n}\n.live-dot {\n width: 8px; height: 8px;\n border-radius: 50%;\n background: var(--green-accent);\n animation: pulse 1.5s infinite;\n}\n@keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(1.4); }\n}\n.source-link {\n color: rgba(255,255,255,0.7);\n text-decoration: none;\n font-size: 0.8rem;\n}\n.source-link:hover { color: white; }\n\n/* ── Layout ── */\n.container { max-width: 1200px; margin: 0 auto; padding: 24px 20px; }\n\n/* ── Health Banner ── */\n.health-banner {\n border-radius: var(--radius);\n padding: 20px 28px;\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 12px;\n transition: var(--transition);\n}\n.health-banner.green { background: linear-gradient(135deg, #1e7c4a, #2d9e63); color: white; }\n.health-banner.yellow { background: linear-gradient(135deg, #c78f00, #e5a800); color: white; }\n.health-banner.red { background: linear-gradient(135deg, #b0222d, #d9323d); color: white; }\n.health-banner-left { display: flex; align-items: center; gap: 16px; }\n.health-icon { font-size: 2.8rem; }\n.health-title { font-size: 0.85rem; opacity: 0.85; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }\n.health-status { font-size: 1.8rem; font-weight: 800; }\n.health-timestamp { font-size: 0.8rem; opacity: 0.75; margin-top: 2px; }\n.simulate-btn {\n background: rgba(255,255,255,0.2);\n border: 2px solid rgba(255,255,255,0.4);\n color: white;\n padding: 10px 20px;\n border-radius: 30px;\n cursor: pointer;\n font-size: 0.85rem;\n font-weight: 600;\n transition: var(--transition);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.simulate-btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }\n.simulate-btn:active { transform: translateY(0); }\n\n/* ── Sensor Cards ── */\n.section-title {\n font-size: 1rem;\n font-weight: 700;\n color: var(--green-dark);\n text-transform: uppercase;\n letter-spacing: 0.8px;\n margin-bottom: 14px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 16px;\n margin-bottom: 28px;\n}\n.sensor-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 24px 20px;\n box-shadow: var(--shadow);\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n}\n.sensor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }\n.sensor-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 4px;\n}\n.sensor-card.moisture::before { background: linear-gradient(90deg, #2196f3, #64b5f6); }\n.sensor-card.temperature::before { background: linear-gradient(90deg, #ff6b35, #ff9a5c); }\n.sensor-card.humidity::before { background: linear-gradient(90deg, #26a69a, #4db6ac); }\n\n.card-icon {\n width: 48px; height: 48px;\n border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.4rem;\n margin-bottom: 14px;\n}\n.card-icon.moisture { background: var(--blue-light); }\n.card-icon.temperature { background: #fff3e0; }\n.card-icon.humidity { background: #e0f2f1; }\n\n.card-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gray-500); margin-bottom: 6px; }\n.card-value { font-size: 2.4rem; font-weight: 800; color: var(--gray-700); line-height: 1; }\n.card-unit { font-size: 1rem; font-weight: 400; color: var(--gray-500); }\n.card-bar { margin-top: 12px; height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; }\n.card-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }\n.moisture .card-bar-fill { background: linear-gradient(90deg, #2196f3, #64b5f6); }\n.temperature .card-bar-fill { background: linear-gradient(90deg, #ff6b35, #ff9a5c); }\n.humidity .card-bar-fill { background: linear-gradient(90deg, #26a69a, #4db6ac); }\n.card-status { font-size: 0.78rem; margin-top: 8px; font-weight: 600; }\n\n/* ── Two-col layout ── */\n.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }\n@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }\n\n/* ── Alerts Panel ── */\n.panel {\n background: var(--white);\n border-radius: var(--radius);\n padding: 22px 20px;\n box-shadow: var(--shadow);\n}\n.alert-item {\n display: flex; align-items: flex-start; gap: 10px;\n padding: 10px 14px;\n border-radius: var(--radius-sm);\n margin-bottom: 8px;\n font-size: 0.87rem;\n font-weight: 500;\n}\n.alert-item:last-child { margin-bottom: 0; }\n.alert-item.green { background: var(--green-pale); color: var(--green-dark); }\n.alert-item.yellow { background: var(--yellow-light); color: #7a5800; }\n.alert-item.red { background: var(--red-light); color: #8b0000; }\n.no-alerts { color: var(--gray-500); font-size: 0.88rem; text-align: center; padding: 20px 0; }\n\n/* ── AI Suggestions ── */\n.suggestion-item {\n display: flex; align-items: flex-start; gap: 10px;\n padding: 10px 14px;\n border-radius: var(--radius-sm);\n margin-bottom: 8px;\n font-size: 0.87rem;\n background: var(--green-pale);\n color: var(--green-dark);\n font-weight: 500;\n}\n\n/* ── Automation Controls ── */\n.automation-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 28px;\n}\n.control-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 22px 20px;\n box-shadow: var(--shadow);\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: var(--transition);\n}\n.control-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }\n.control-left { display: flex; align-items: center; gap: 14px; }\n.control-icon { font-size: 2rem; }\n.control-name { font-size: 0.95rem; font-weight: 700; color: var(--gray-700); }\n.control-sub { font-size: 0.78rem; color: var(--gray-500); margin-top: 2px; }\n\n/* Toggle switch */\n.toggle { position: relative; display: inline-block; width: 52px; height: 28px; }\n.toggle input { opacity: 0; width: 0; height: 0; }\n.slider {\n position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;\n background-color: var(--gray-200);\n transition: .3s;\n border-radius: 28px;\n}\n.slider:before {\n position: absolute; content: \"\";\n height: 20px; width: 20px;\n left: 4px; bottom: 4px;\n background-color: white;\n transition: .3s;\n border-radius: 50%;\n box-shadow: 0 2px 6px rgba(0,0,0,0.2);\n}\ninput:checked + .slider { background-color: var(--green-light); }\ninput:checked + .slider:before { transform: translateX(24px); }\n.toggle-label { font-size: 0.75rem; font-weight: 700; margin-top: 4px; text-align: center; color: var(--gray-500); }\ninput:checked ~ .toggle-label { color: var(--green-mid); }\n\n/* ── Chart ── */\n.chart-panel {\n background: var(--white);\n border-radius: var(--radius);\n padding: 22px 20px 18px;\n box-shadow: var(--shadow);\n margin-bottom: 28px;\n}\n.chart-container { position: relative; height: 260px; }\n\n/* ── Architecture Diagram ── */\n.arch-panel {\n background: var(--white);\n border-radius: var(--radius);\n padding: 24px 20px;\n box-shadow: var(--shadow);\n margin-bottom: 28px;\n}\n.arch-flow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n padding: 20px 0;\n}\n.arch-node {\n display: flex; flex-direction: column; align-items: center;\n background: var(--green-pale);\n border: 2px solid var(--green-light);\n border-radius: var(--radius);\n padding: 16px 20px;\n min-width: 110px;\n text-align: center;\n transition: var(--transition);\n}\n.arch-node:hover { background: var(--green-light); color: white; transform: translateY(-2px); box-shadow: var(--shadow); }\n.arch-node .node-icon { font-size: 1.8rem; margin-bottom: 6px; }\n.arch-node .node-title { font-size: 0.78rem; font-weight: 700; color: var(--green-dark); text-transform: uppercase; letter-spacing: 0.5px; }\n.arch-node .node-sub { font-size: 0.7rem; color: var(--gray-500); margin-top: 2px; }\n.arch-node:hover .node-title, .arch-node:hover .node-sub { color: white; }\n.arch-arrow { font-size: 1.5rem; color: var(--green-mid); padding: 0 4px; }\n\n/* ── Footer ── */\n.footer {\n text-align: center;\n padding: 20px;\n color: var(--gray-500);\n font-size: 0.82rem;\n}\n.footer a { color: var(--green-mid); text-decoration: none; }\n\n/* ── Loading ── */\n.loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100vh;\n gap: 16px;\n color: var(--green-mid);\n}\n.spinner {\n width: 48px; height: 48px;\n border: 4px solid var(--green-pale);\n border-top-color: var(--green-mid);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n\n/* ── Responsive ── */\n@media (max-width: 480px) {\n .health-banner { padding: 16px 18px; }\n .health-status { font-size: 1.4rem; }\n .automation-grid { grid-template-columns: 1fr; }\n .header-brand h1 { font-size: 1.1rem; }\n .card-value { font-size: 2rem; }\n}\n",[],[158,210],"157698ae-2dad-11f1-ad08-42dde27851f2","index.html","157699a8-2dad-11f1-ad08-42dde27851f2",8,["D",1775035683776],"\n\n\n \n \n 🌿 PlantCare — Smart Plant Monitor\n \n \n \n \n\n\n

\n \n\n\n",[],[158,218],"5c462178-2dad-11f1-88b9-42dde27851f2","app.tsx","5c462236-2dad-11f1-88b9-42dde27851f2",10,["D",1775035802582],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ── Types ────────────────────────────────────────────────────\ninterface SensorReading {\n id?: number;\n timestamp: string;\n soilMoisture: number;\n temperature: number;\n humidity: number;\n}\ninterface PlantStatus {\n health: \"Healthy\" | \"Moderate\" | \"Critical\";\n color: \"green\" | \"yellow\" | \"red\";\n alerts: string[];\n suggestions: string[];\n}\ninterface AutomationState {\n autoWater: boolean;\n autoFan: boolean;\n}\n\n// ── Chart.js chart component ─────────────────────────────────\ndeclare const Chart: any;\n\nfunction TrendChart({ history }: { history: SensorReading[] }) {\n const canvasRef = useRef(null);\n const chartRef = useRef(null);\n\n useEffect(() => {\n if (!canvasRef.current || history.length === 0) return;\n const labels = history.map((r) => {\n const d = new Date(r.timestamp);\n return `${d.getHours().toString().padStart(2,\"0\")}:${d.getMinutes().toString().padStart(2,\"0\")}`;\n });\n\n if (chartRef.current) {\n chartRef.current.data.labels = labels;\n chartRef.current.data.datasets[0].data = history.map((r) => r.soilMoisture);\n chartRef.current.data.datasets[1].data = history.map((r) => r.temperature);\n chartRef.current.data.datasets[2].data = history.map((r) => r.humidity);\n chartRef.current.update();\n } else {\n chartRef.current = new Chart(canvasRef.current, {\n type: \"line\",\n data: {\n labels,\n datasets: [\n {\n label: \"Soil Moisture (%)\",\n data: history.map((r) => r.soilMoisture),\n borderColor: \"#2196f3\",\n backgroundColor: \"rgba(33,150,243,0.08)\",\n tension: 0.4,\n fill: true,\n pointRadius: 3,\n pointHoverRadius: 5,\n },\n {\n label: \"Temperature (°C)\",\n data: history.map((r) => r.temperature),\n borderColor: \"#ff6b35\",\n backgroundColor: \"rgba(255,107,53,0.08)\",\n tension: 0.4,\n fill: true,\n pointRadius: 3,\n pointHoverRadius: 5,\n },\n {\n label: \"Humidity (%)\",\n data: history.map((r) => r.humidity),\n borderColor: \"#26a69a\",\n backgroundColor: \"rgba(38,166,154,0.08)\",\n tension: 0.4,\n fill: true,\n pointRadius: 3,\n pointHoverRadius: 5,\n },\n ],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n interaction: { mode: \"index\", intersect: false },\n plugins: {\n legend: { position: \"top\", labels: { font: { size: 12, weight: \"600\" }, padding: 16, usePointStyle: true } },\n tooltip: { backgroundColor: \"#1a4731\", titleColor: \"#fff\", bodyColor: \"#e8f5ee\", padding: 10, cornerRadius: 8 },\n },\n scales: {\n x: { grid: { color: \"rgba(0,0,0,0.04)\" }, ticks: { font: { size: 11 } } },\n y: { grid: { color: \"rgba(0,0,0,0.04)\" }, ticks: { font: { size: 11 } }, min: 0, max: 100 },\n },\n },\n });\n }\n }, [history]);\n\n return

Diff · v11