From 91bdb6425ea396c44ced77be411df0821819414a Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Mon, 24 Nov 2025 14:43:00 +0000 Subject: [PATCH] Auto commit: 2025-11-24T14:43:00.413Z --- assets/css/custom.css | 65 +++++++++++ assets/js/main.js | 61 ++++++++++ index.php | 256 ++++++++++++++++++------------------------ 3 files changed, 237 insertions(+), 145 deletions(-) create mode 100644 assets/css/custom.css create mode 100644 assets/js/main.js diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..5b2b699 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,65 @@ + +:root { + --primary-color: #1A73E8; + --secondary-color: #34A853; + --alert-color: #EA4335; + --warning-color: #F9AB00; + --background-color: #F9FAFB; + --surface-color: #FFFFFF; + --text-color: #212121; +} + +body { + background-color: var(--background-color); + color: var(--text-color); + font-family: 'Inter', 'Roboto', 'Open Sans', sans-serif; +} + +.navbar { + border-bottom: 1px solid #dee2e6; + background-color: var(--surface-color); +} + +.gauge-card { + background-color: var(--surface-color); + border: none; + border-radius: 0.5rem; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + transition: all 0.3s ease-in-out; +} + +.gauge-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); +} + +.gauge-container { + position: relative; + margin: 1rem auto; + width: 90%; + padding-top: 90%; /* 1:1 Aspect Ratio */ +} + +.gauge-canvas { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.gauge-value { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 2.25rem; + font-weight: 700; + color: var(--text-color); +} + +.card-footer { + background-color: transparent; + border-top: 1px solid #efefef; + font-weight: 500; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..d131cf1 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,61 @@ + +document.addEventListener('DOMContentLoaded', () => { + const createGauge = (ctx, label, value) => { + const normalColor = '#34A853'; // Green + const warningColor = '#F9AB00'; // Orange + const alertColor = '#EA4335'; // Red + const bgColor = '#e9ecef'; + + let activeColor = normalColor; + if (value >= 70 && value < 90) { + activeColor = warningColor; + } else if (value >= 90) { + activeColor = alertColor; + } + + const parent = ctx.parentElement; + const valueSpan = parent.querySelector('.gauge-value'); + valueSpan.textContent = `${value}%`; + valueSpan.style.color = activeColor; + + new Chart(ctx, { + type: 'doughnut', + data: { + datasets: [{ + data: [value, 100 - value], + backgroundColor: [activeColor, bgColor], + borderColor: [activeColor, bgColor], + borderWidth: 1, + circumference: 270, // Make it a semi-circle + rotation: 225, // Start from the bottom-left + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + cutout: '80%', + plugins: { + legend: { display: false }, + tooltip: { enabled: false } + }, + events: [] + } + }); + }; + + const gauges = [ + { id: 'gauge1', label: 'Warehouse Temp', value: 65 }, + { id: 'gauge2', label: 'Slot Humidity', value: 80 }, + { id: 'gauge3', label: 'Node-A1 CO2', value: 45 }, + { id: 'gauge4', label: 'Node-B2 Gas', value: 92 }, + { id: 'gauge5', label: 'Cooling System', value: 75 }, + { id: 'gauge6', label: 'Power Backup', value: 98 }, + ]; + + gauges.forEach(gaugeConfig => { + const ctx = document.getElementById(gaugeConfig.id); + if (ctx) { + createGauge(ctx.getContext('2d'), gaugeConfig.label, gaugeConfig.value); + } + }); +}); diff --git a/index.php b/index.php index 7205f3d..5429b00 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,116 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + <?php echo htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'NWarehouse IoT Monitoring'); ?> + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + +
+

Monitoring Dashboard

+ +
+ +
+
+
+
+ +
+
+
+
Warehouse Temp
+
+
+ +
+
+
+
+ +
+
+
+
Slot Humidity
+
+
+ +
+
+
+
+ +
+
+
+
Node-A1 CO2
+
+
+ +
+
+
+
+ +
+
+
+
Node-B2 Gas
+
+
+ +
+
+
+
+ +
+
+
+
Cooling System
+
+
+ +
+
+
+
+ +
+
+
+
Power Backup
+
+
+
+
+ + + + + + + - + \ No newline at end of file