mirror of
https://github.com/sassanix/Warracker.git
synced 2026-01-03 20:19:42 -06:00
109 lines
3.5 KiB
HTML
109 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple Status Page with Chart.js</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<!-- Font Awesome for icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<!-- Chart.js for visualizations -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
.chart-container {
|
|
width: 400px;
|
|
height: 400px;
|
|
margin: 50px auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="container">
|
|
<div class="app-title">
|
|
<i class="fas fa-shield-alt"></i>
|
|
<h1>Warranty Tracker</h1>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="index.html" class="nav-link">
|
|
<i class="fas fa-home"></i> Home
|
|
</a>
|
|
<a href="status.html" class="nav-link">
|
|
<i class="fas fa-chart-pie"></i> Status
|
|
</a>
|
|
<a href="simple-status.html" class="nav-link">
|
|
<i class="fas fa-vial"></i> Simple Test
|
|
</a>
|
|
<a href="status-simple.html" class="nav-link active">
|
|
<i class="fas fa-chart-line"></i> Simple Chart
|
|
</a>
|
|
<a href="page-test.html" class="nav-link">
|
|
<i class="fas fa-sitemap"></i> Page Test
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container">
|
|
<div class="status-content">
|
|
<h2>Simple Chart.js Test</h2>
|
|
|
|
<div class="chart-container">
|
|
<canvas id="sampleChart"></canvas>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 20px;">
|
|
<a href="index.html" class="btn btn-primary">Back to Home</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2023 Warracker. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Create a simple chart when the page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Get the canvas element
|
|
const ctx = document.getElementById('sampleChart').getContext('2d');
|
|
|
|
// Sample data
|
|
const data = {
|
|
labels: ['Active', 'Expiring Soon', 'Expired'],
|
|
datasets: [{
|
|
data: [12, 5, 3],
|
|
backgroundColor: [
|
|
'#4CAF50', // Green for active
|
|
'#FF9800', // Orange for expiring soon
|
|
'#F44336' // Red for expired
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
};
|
|
|
|
// Create and render the chart
|
|
const myChart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
console.log('Chart rendered successfully!');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |