Greg/SportAttendanceSheet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reports side by side

Browse Source
This commit is contained in:
Greg 2025-05-10 22:53:50 +02:00
parent 4fe697f857
commit deedc2fad3
1 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
templates/reports.html
View File

@ -6,22 +6,49 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial, sans-serif; background: #222831; color: #DFD0B8; margin: 2em; }
.chart-container { background: #393E46; padding: 2em; border-radius: 8px; margin-bottom: 2em; }
h2 { color: #948979; }
.charts-flex {
display: flex;
gap: 2em;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
.chart-container.small-chart {
background: #393E46;
padding: 1em 1.2em;
border-radius: 8px;
margin-bottom: 1em;
min-width: 320px;
max-width: 350px;
flex: 1 1 320px;
box-sizing: border-box;
}
.chart-container.small-chart canvas {
max-width: 100%;
height: 260px !important;
width: 100% !important;
}
h2 { color: #948979; font-size: 1.1em; margin-bottom: 0.5em; }
a, button { color: #222831; background: #948979; border: none; padding: 0.7em 1.5em; border-radius: 4px; font-weight: bold; font-size: 1em; transition: background 0.2s; cursor: pointer; text-decoration: none; }
a:hover, button:hover { background: #7c765c; }
@media (max-width: 900px) {
.charts-flex { flex-direction: column; align-items: stretch; }
.chart-container.small-chart { max-width: 100%; min-width: 0; }
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<a href="/" style="margin-bottom: 2em; display: inline-block;">Back to Attendance</a>
<div class="chart-container">
<h2>Attendance Count per Player</h2>
<canvas id="barChart"></canvas>
</div>
<div class="chart-container">
<h2>Player Attendance Share (Pie)</h2>
<canvas id="pieChart"></canvas>
<div class="charts-flex">
<div class="chart-container small-chart">
<h2>Attendance Count per Player</h2>
<canvas id="barChart" width="300" height="300"></canvas>
</div>
<div class="chart-container small-chart">
<h2>Player Attendance Share (Pie)</h2>
<canvas id="pieChart" width="300" height="300"></canvas>
</div>
</div>
<script>
fetch('/api/data').then(r => r.json()).then(data => {