113 lines
3.6 KiB
PHP
113 lines
3.6 KiB
PHP
<?php
|
||
$page_title = "Home Dashboard";
|
||
include 'includes/header.php';
|
||
?>
|
||
|
||
<div class="container mt-5">
|
||
<div class="text-center mb-5">
|
||
<h1 style="font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 3rem; color: var(--primary);">FRA-INSIGHT</h1>
|
||
<p class="lead" style="font-family: 'Inter', sans-serif; color: var(--text-secondary); font-size: 1.25rem;">AI-based Explainable Diagnostics for India’s Power Infrastructure</p>
|
||
</div>
|
||
|
||
<!-- National Stats -->
|
||
<div class="row g-4 mb-5">
|
||
<div class="col-md-3">
|
||
<div class="card kpi-card">
|
||
<div class="card-body">
|
||
<div class="kpi-number">800,000</div>
|
||
<div class="kpi-label">Total Transformers</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card kpi-card">
|
||
<div class="card-body">
|
||
<div class="kpi-number text-danger">127</div>
|
||
<div class="kpi-label">Risk Zones</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card kpi-card">
|
||
<div class="card-body">
|
||
<div class="kpi-number" style="color: var(--secondary);">2.7 tons</div>
|
||
<div class="kpi-label">CO₂ Saved</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card kpi-card">
|
||
<div class="card-body">
|
||
<div class="kpi-number" style="color: var(--accent);">3,000 L</div>
|
||
<div class="kpi-label">Oil Preserved</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Map Section -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">National Transformer Health Map</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="map-container" class="chart-container"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-4">
|
||
<a href="upload.php" class="btn btn-primary btn-lg">Analyze FRA Data <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Generate random data points for the map
|
||
const numPoints = 150;
|
||
const latitudes = Array.from({length: numPoints}, () => 8 + Math.random() * 28); // India lat range
|
||
const longitudes = Array.from({length: numPoints}, () => 68 + Math.random() * 30); // India lon range
|
||
const healthStatus = Array.from({length: numPoints}, () => Math.random()); // 0 -> good, 1 -> bad
|
||
|
||
const colors = healthStatus.map(h => {
|
||
if (h > 0.8) return 'red';
|
||
if (h > 0.5) return 'yellow';
|
||
return 'green';
|
||
});
|
||
|
||
const sizes = healthStatus.map(h => {
|
||
if (h > 0.8) return 15;
|
||
if (h > 0.5) return 10;
|
||
return 5;
|
||
});
|
||
|
||
const mapData = [{
|
||
type: 'scattermapbox',
|
||
lat: latitudes,
|
||
lon: longitudes,
|
||
mode: 'markers',
|
||
marker: {
|
||
size: sizes,
|
||
color: colors,
|
||
opacity: 0.7
|
||
},
|
||
text: healthStatus.map(h => `Health Score: ${(100 * (1-h)).toFixed(0)}%`),
|
||
hoverinfo: 'text'
|
||
}];
|
||
|
||
const layout = {
|
||
mapbox: {
|
||
style: 'open-street-map',
|
||
center: { lat: 20.5937, lon: 78.9629 },
|
||
zoom: 3.8
|
||
},
|
||
margin: { r: 0, t: 0, b: 0, l: 0 },
|
||
showlegend: false
|
||
};
|
||
|
||
Plotly.newPlot('map-container', mapData, layout, {responsive: true});
|
||
});
|
||
</script>
|
||
|
||
<?php include 'includes/footer.php'; ?>
|