112 lines
4.1 KiB
PHP
112 lines
4.1 KiB
PHP
<?php
|
|
$page_title = "Green Impact";
|
|
include 'includes/header.php';
|
|
?>
|
|
|
|
<div class="container mt-5">
|
|
<h1 class="page-title">Green Impact</h1>
|
|
<p class="lead mb-5">Tracking our contribution to a more sustainable and environmentally friendly power grid.</p>
|
|
|
|
<!-- Green KPIs -->
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-md-4">
|
|
<div class="card kpi-card bg-success text-white">
|
|
<div class="card-body">
|
|
<div class="kpi-number">2.7 tons</div>
|
|
<div class="kpi-label">CO₂ Emissions Saved</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card kpi-card bg-info text-white">
|
|
<div class="card-body">
|
|
<div class="kpi-number">3,000 L</div>
|
|
<div class="kpi-label">Transformer Oil Preserved</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card kpi-card bg-warning text-dark">
|
|
<div class="card-body">
|
|
<div class="kpi-number">45 MWh</div>
|
|
<div class="kpi-label">Energy Loss Prevented</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts and Commitment -->
|
|
<div class="row g-4">
|
|
<div class="col-lg-8">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Sustainability Trends (Last 12 Months)</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="sustainability-chart" class="chart-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title">Our Commitment to a Greener Grid</h5>
|
|
<p class="text-secondary flex-grow-1">By proactively identifying and addressing transformer faults, FRA-INSIGHT not only enhances grid reliability but also plays a crucial role in environmental conservation. Preventing catastrophic failures avoids oil spills and reduces the carbon footprint associated with manufacturing and transporting replacement units. Our goal is a grid that is not just smart, but also sustainable.</p>
|
|
<button class="btn btn-secondary w-100"><i class="bi bi-file-earmark-zip"></i> Download Sustainability Report</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Mock data for 12 months
|
|
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
const co2Saved = Array.from({length: 12}, (_, i) => (i + 1) * 0.2 + Math.random() * 0.1);
|
|
const oilPreserved = Array.from({length: 12}, (_, i) => (i + 1) * 250 + Math.random() * 100);
|
|
|
|
// Create Trend Chart
|
|
const co2Trace = {
|
|
x: months,
|
|
y: co2Saved,
|
|
name: 'CO₂ Saved (tons)',
|
|
type: 'scatter',
|
|
mode: 'lines+markers',
|
|
line: { color: 'var(--secondary)' }
|
|
};
|
|
|
|
const oilTrace = {
|
|
x: months,
|
|
y: oilPreserved,
|
|
name: 'Oil Preserved (L)',
|
|
type: 'scatter',
|
|
mode: 'lines+markers',
|
|
yaxis: 'y2',
|
|
line: { color: 'var(--primary)' }
|
|
};
|
|
|
|
const layout = {
|
|
title: 'Monthly Environmental Savings',
|
|
xaxis: { title: 'Month' },
|
|
yaxis: {
|
|
title: 'CO₂ Saved (tons)',
|
|
titlefont: { color: 'var(--secondary)' },
|
|
tickfont: { color: 'var(--secondary)' }
|
|
},
|
|
yaxis2: {
|
|
title: 'Oil Preserved (L)',
|
|
titlefont: { color: 'var(--primary)' },
|
|
tickfont: { color: 'var(--primary)' },
|
|
overlaying: 'y',
|
|
side: 'right'
|
|
},
|
|
legend: { x: 0, y: 1.2, orientation: 'h' },
|
|
margin: { t: 60, l: 60, r: 60, b: 60 }
|
|
};
|
|
|
|
Plotly.newPlot('sustainability-chart', [co2Trace, oilTrace], layout, {responsive: true});
|
|
});
|
|
</script>
|
|
|
|
<?php include 'includes/footer.php'; ?>
|