116 lines
4.8 KiB
PHP
116 lines
4.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'NWarehouse IoT Monitoring'); ?></title>
|
|
<meta name="description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'IoT Monitoring System for Warehouses'); ?>">
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand fw-bold" href="#" style="color: var(--primary-color);">
|
|
NWarehouse IoT
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container-fluid mt-4">
|
|
<h1 class="h2 mb-4">Monitoring Dashboard</h1>
|
|
|
|
<div class="row">
|
|
<!-- Gauge 1 -->
|
|
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card gauge-card text-center">
|
|
<div class="card-body">
|
|
<div class="gauge-container">
|
|
<canvas id="gauge1" class="gauge-canvas"></canvas>
|
|
<div class="gauge-value"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">Warehouse Temp</div>
|
|
</div>
|
|
</div>
|
|
<!-- Gauge 2 -->
|
|
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card gauge-card text-center">
|
|
<div class="card-body">
|
|
<div class="gauge-container">
|
|
<canvas id="gauge2" class="gauge-canvas"></canvas>
|
|
<div class="gauge-value"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">Slot Humidity</div>
|
|
</div>
|
|
</div>
|
|
<!-- Gauge 3 -->
|
|
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card gauge-card text-center">
|
|
<div class="card-body">
|
|
<div class="gauge-container">
|
|
<canvas id="gauge3" class="gauge-canvas"></canvas>
|
|
<div class="gauge-value"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">Node-A1 CO2</div>
|
|
</div>
|
|
</div>
|
|
<!-- Gauge 4 -->
|
|
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card gauge-card text-center">
|
|
<div class="card-body">
|
|
<div class="gauge-container">
|
|
<canvas id="gauge4" class="gauge-canvas"></canvas>
|
|
<div class="gauge-value"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">Node-B2 Gas</div>
|
|
</div>
|
|
</div>
|
|
<!-- Gauge 5 -->
|
|
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card gauge-card text-center">
|
|
<div class="card-body">
|
|
<div class="gauge-container">
|
|
<canvas id="gauge5" class="gauge-canvas"></canvas>
|
|
<div class="gauge-value"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">Cooling System</div>
|
|
</div>
|
|
</div>
|
|
<!-- Gauge 6 -->
|
|
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
|
|
<div class="card gauge-card text-center">
|
|
<div class="card-body">
|
|
<div class="gauge-container">
|
|
<canvas id="gauge6" class="gauge-canvas"></canvas>
|
|
<div class="gauge-value"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">Power Backup</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
|
|
</body>
|
|
</html>
|