add docker file

This commit is contained in:
John Gatward committed 2026-03-20 10:36:22 +00:00
1 parent 80a66bc44c
commit bdcbe6efbd
7 files changed
+598 -1

No files matched your search

+506
View File
@@ -0,0 +1,506 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Hope Pub Quiz</title>
<script src="https://cdn.plot.ly/plotly-3.0.1.min.js" charset="utf-8"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen text-gray-900 antialiased">
<!-- ── Header ─────────────────────────────────────────────────────────── -->
<header class="bg-blue-900 text-white shadow-lg">
<div class="max-w-6xl mx-auto px-4 sm:px-8 py-8 sm:py-10">
<p class="text-blue-300 text-xs font-semibold tracking-widest uppercase mb-2">Performance Dashboard</p>
<h1 class="text-3xl sm:text-4xl font-bold tracking-tight">The Hope Pub Quiz</h1>
<p class="text-blue-300 mt-2 text-sm">Trying to convince ourselves we're not stupid</p>
</div>
</header>
<main class="max-w-6xl mx-auto px-4 sm:px-8 py-10 space-y-14">
<!-- ── KPI Cards ───────────────────────────────────────────────────── -->
<section>
<h2 class="text-xs font-semibold tracking-widest uppercase text-gray-400 mb-5">At a Glance</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5 flex flex-col gap-1">
<span class="text-3xl font-bold text-blue-900 leading-none">23</span>
<span class="text-sm font-medium text-gray-700 mt-2">Quizzes Played</span>
<span class="text-xs text-gray-400 leading-snug">Since Mar 2025</span>
</div>
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5 flex flex-col gap-1">
<span class="text-3xl font-bold text-blue-900 leading-none">61st</span>
<span class="text-sm font-medium text-gray-700 mt-2">Avg. Relative Percentile</span>
<span class="text-xs text-gray-400 leading-snug">Lower = better finishing position</span>
</div>
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5 flex flex-col gap-1">
<span class="text-3xl font-bold text-blue-900 leading-none">4th place</span>
<span class="text-sm font-medium text-gray-700 mt-2">Best Finish</span>
<span class="text-xs text-gray-400 leading-snug">Out of 12 teams</span>
</div>
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5 flex flex-col gap-1">
<span class="text-3xl font-bold text-blue-900 leading-none">68th</span>
<span class="text-sm font-medium text-gray-700 mt-2">Recent Form</span>
<span class="text-xs text-gray-400 leading-snug">↑ declining vs overall (lower is better)</span>
</div>
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5 flex flex-col gap-1">
<span class="text-3xl font-bold text-blue-900 leading-none">5</span>
<span class="text-sm font-medium text-gray-700 mt-2">Top-Half Finishes</span>
<span class="text-xs text-gray-400 leading-snug">22% of all games</span>
</div>
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5 flex flex-col gap-1">
<span class="text-3xl font-bold text-blue-900 leading-none">4 wks</span>
<span class="text-sm font-medium text-gray-700 mt-2">Best Streak</span>
<span class="text-xs text-gray-400 leading-snug">Consecutive weeks attended</span>
</div>
</div>
</section>
<!-- ── Stats + Squad Table ─────────────────────────────────────────── -->
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
<!-- Secondary stats -->
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
<h2 class="text-xs font-semibold tracking-widest uppercase text-gray-400 mb-5">More Stats</h2>
<dl class="divide-y divide-gray-50">
<div class="flex justify-between items-baseline py-3 first:pt-0 last:pb-0">
<dt class="text-sm text-gray-500">Top-half finishes</dt>
<dd class="text-sm font-semibold text-gray-900 ml-4 text-right">5 of 23 (22%)</dd>
</div>
<div class="flex justify-between items-baseline py-3 first:pt-0 last:pb-0">
<dt class="text-sm text-gray-500">Average teams per night</dt>
<dd class="text-sm font-semibold text-gray-900 ml-4 text-right">11.8</dd>
</div>
<div class="flex justify-between items-baseline py-3 first:pt-0 last:pb-0">
<dt class="text-sm text-gray-500">Average squad size</dt>
<dd class="text-sm font-semibold text-gray-900 ml-4 text-right">2.9 players</dd>
</div>
<div class="flex justify-between items-baseline py-3 first:pt-0 last:pb-0">
<dt class="text-sm text-gray-500">Average Scattergories score</dt>
<dd class="text-sm font-semibold text-gray-900 ml-4 text-right">6.9 pts</dd>
</div>
<div class="flex justify-between items-baseline py-3 first:pt-0 last:pb-0">
<dt class="text-sm text-gray-500">Best Scattergories score</dt>
<dd class="text-sm font-semibold text-gray-900 ml-4 text-right">11 pts</dd>
</div>
<div class="flex justify-between items-baseline py-3 first:pt-0 last:pb-0">
<dt class="text-sm text-gray-500">Longest individual streak</dt>
<dd class="text-sm font-semibold text-gray-900 ml-4 text-right">14 weeks (Jay)</dd>
</div>
</dl>
</div>
<!-- Squad table -->
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6 overflow-x-auto">
<h2 class="text-xs font-semibold tracking-widest uppercase text-gray-400 mb-5">Squad</h2>
<table class="w-full text-sm">
<thead>
<tr class="border-b-2 border-gray-100">
<th class="pb-3 text-xs font-semibold text-gray-400 uppercase tracking-wider
text-left">
Player
</th>
<th class="pb-3 text-xs font-semibold text-gray-400 uppercase tracking-wider
text-right">
Appearances
</th>
<th class="pb-3 text-xs font-semibold text-gray-400 uppercase tracking-wider
text-right">
Avg. Relative Percentile
</th>
<th class="pb-3 text-xs font-semibold text-gray-400 uppercase tracking-wider
text-right">
Spent
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-50">
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Jay
</td>
<td class="py-3
text-right text-gray-500">
22
</td>
<td class="py-3
text-right text-gray-500">
62nd
</td>
<td class="py-3
text-right text-gray-500">
£66.00
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Ciaran
</td>
<td class="py-3
text-right text-gray-500">
20
</td>
<td class="py-3
text-right text-gray-500">
62nd
</td>
<td class="py-3
text-right text-gray-500">
£60.00
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Sam
</td>
<td class="py-3
text-right text-gray-500">
9
</td>
<td class="py-3
text-right text-gray-500">
59th
</td>
<td class="py-3
text-right text-gray-500">
£27.00
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Ellora
</td>
<td class="py-3
text-right text-gray-500">
5
</td>
<td class="py-3
text-right text-gray-500">
52nd
</td>
<td class="py-3
text-right text-gray-500">
£15.00
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Drew
</td>
<td class="py-3
text-right text-gray-500">
3
</td>
<td class="py-3
text-right text-gray-500">
56th
</td>
<td class="py-3
text-right text-gray-500">
£9.00
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Tom
</td>
<td class="py-3
text-right text-gray-500">
2
</td>
<td class="py-3
text-right text-gray-500">
62nd
</td>
<td class="py-3
text-right text-gray-500">
£6.00
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Chloe
</td>
<td class="py-3
text-right text-gray-500">
2
</td>
<td class="py-3
text-right text-gray-500">
75th
</td>
<td class="py-3
text-right text-gray-500">
£6.00
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Theo
</td>
<td class="py-3
text-right text-gray-500">
1
</td>
<td class="py-3
text-right text-gray-500">
50th
</td>
<td class="py-3
text-right text-gray-500">
£3.00
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Jamie
</td>
<td class="py-3
text-right text-gray-500">
1
</td>
<td class="py-3
text-right text-gray-500">
50th
</td>
<td class="py-3
text-right text-gray-500">
£3.00
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Christine
</td>
<td class="py-3
text-right text-gray-500">
1
</td>
<td class="py-3
text-right text-gray-500">
50th
</td>
<td class="py-3
text-right text-gray-500">
£3.00
</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3
text-left font-medium text-gray-800">
Mide
</td>
<td class="py-3
text-right text-gray-500">
1
</td>
<td class="py-3
text-right text-gray-500">
100th
</td>
<td class="py-3
text-right text-gray-500">
£3.00
</td>
</tr>
</tbody>
<tfoot>
<tr class="border-t-2 border-gray-200">
<td class="pt-3 font-bold text-gray-700
text-left">
Total
</td>
<td class="pt-3 font-bold text-gray-700
text-right">
67
</td>
<td class="pt-3 font-bold text-gray-700
text-right">
—
</td>
<td class="pt-3 font-bold text-gray-700
text-right">
£201.00
</td>
</tr>
</tfoot>
</table>
</div>
</section>
<!-- ── Charts ──────────────────────────────────────────────────────── -->
<section>
<h2 class="text-xs font-semibold tracking-widest uppercase text-gray-400 mb-5">Charts</h2>
<div class="space-y-8">
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 sm:p-6">
<div id="position_trend"></div>
<script>
(function () {
var figure = {"data": [{"customdata": ["Ciaran, Jay", "Ciaran, Jay", "Ciaran, Jay, Sam, Drew", "Ciaran, Jay", "Ciaran, Jay, Sam", "Jay, Theo", "Ciaran, Jay, Sam", "Ciaran, Jay, Sam", "Ciaran, Jay, Sam, Tom", "Ciaran, Jay, Ellora", "Ciaran, Jay", "Ciaran, Jay, Sam, Ellora", "Ciaran, Jay, Ellora", "Ciaran, Jay, Sam, Ellora", "Ciaran, Sam, Tom", "Jay, Drew", "Ciaran, Jay, Ellora", "Ciaran, Jay, Chloe, Jamie", "Ciaran, Jay", "Ciaran, Jay", "Jay, Drew, Christine", "Ciaran, Jay", "Ciaran, Jay, Sam, Chloe, Mide"], "hovertemplate": "<b>%{x|%d %b %Y}</b><br>Relative percentile: %{y:.0f}th<br>Squad: %{customdata}<extra></extra>", "line": {"color": "#1e3a8a", "width": 1.5}, "marker": {"color": "#1e3a8a", "size": 6}, "mode": "lines+markers", "name": "Result", "x": ["2025-03-17T00:00:00.000000000", "2025-03-24T00:00:00.000000000", "2025-03-31T00:00:00.000000000", "2025-04-07T00:00:00.000000000", "2025-04-28T00:00:00.000000000", "2025-05-26T00:00:00.000000000", "2025-06-02T00:00:00.000000000", "2025-06-16T00:00:00.000000000", "2025-06-30T00:00:00.000000000", "2025-07-14T00:00:00.000000000", "2025-07-21T00:00:00.000000000", "2025-07-28T00:00:00.000000000", "2025-08-04T00:00:00.000000000", "2025-09-15T00:00:00.000000000", "2025-09-22T00:00:00.000000000", "2025-09-29T00:00:00.000000000", "2025-11-24T00:00:00.000000000", "2026-01-05T00:00:00.000000000", "2026-01-26T00:00:00.000000000", "2026-02-02T00:00:00.000000000", "2026-02-16T00:00:00.000000000", "2026-02-23T00:00:00.000000000", "2026-03-09T00:00:00.000000000"], "y": {"dtype": "f8", "bdata": "zMzMzMxMUUA0MzMzM1NXQDMzMzMzM0ZAZmZmZmYmTEA0MzMzM3NKQAAAAAAAAElAzczMzMxsVUABAAAAAEBLQDMzMzMz01RAAAAAAABAT0AAAAAAAABJQAAAAAAAwEJAAAAAAAAAREBnZmZmZqZAQJmZmZmZ2URAzczMzMwsUkCamZmZmTlWQAAAAAAAAElAZmZmZmYmTUAAAAAAAIBRQAAAAAAAAElAAAAAAAAATkAAAAAAAABZQA=="}, "type": "scatter"}, {"hovertemplate": "<b>%{x|%d %b %Y}</b><br>5-Game Avg: %{y:.0f}%<extra></extra>", "line": {"color": "#f59e0b", "width": 2.5}, "mode": "lines", "name": "5-Game Avg", "x": ["2025-03-17T00:00:00.000000000", "2025-03-24T00:00:00.000000000", "2025-03-31T00:00:00.000000000", "2025-04-07T00:00:00.000000000", "2025-04-28T00:00:00.000000000", "2025-05-26T00:00:00.000000000", "2025-06-02T00:00:00.000000000", "2025-06-16T00:00:00.000000000", "2025-06-30T00:00:00.000000000", "2025-07-14T00:00:00.000000000", "2025-07-21T00:00:00.000000000", "2025-07-28T00:00:00.000000000", "2025-08-04T00:00:00.000000000", "2025-09-15T00:00:00.000000000", "2025-09-22T00:00:00.000000000", "2025-09-29T00:00:00.000000000", "2025-11-24T00:00:00.000000000", "2026-01-05T00:00:00.000000000", "2026-01-26T00:00:00.000000000", "2026-02-02T00:00:00.000000000", "2026-02-16T00:00:00.000000000", "2026-02-23T00:00:00.000000000", "2026-03-09T00:00:00.000000000"], "y": {"dtype": "f8", "bdata": "zMzMzMxMUUAAAAAAAFBUQN7d3d3dPVFAMzMzMzNzUEBdj8L1KJxPQHI9CtejsE1ArkfhehTuTEByPQrXo/BNQFK4HoXrUVBAzczMzMzMUEDNzMzMzMxQQEjhehSux0xAFa5H4XpUS0AVrkfhelRGQAAAAAAAQERAhetRuB6FRkAqXI/C9ahLQCpcj8L1qExAKlyPwvUoT0AehetRuP5QQLoehetRuE9AE65H4XrUTEAK16NwPepQQA=="}, "type": "scatter"}, {"hoverinfo": "skip", "line": {"color": "#dc2626", "dash": "dot", "width": 1.5}, "mode": "lines", "name": "Trend", "x": ["2025-03-17", "2025-03-18", "2025-03-20", "2025-03-22", "2025-03-24", "2025-03-25", "2025-03-27", "2025-03-29", "2025-03-31", "2025-04-02", "2025-04-03", "2025-04-05", "2025-04-07", "2025-04-09", "2025-04-11", "2025-04-12", "2025-04-14", "2025-04-16", "2025-04-18", "2025-04-20", "2025-04-21", "2025-04-23", "2025-04-25", "2025-04-27", "2025-04-29", "2025-04-30", "2025-05-02", "2025-05-04", "2025-05-06", "2025-05-08", "2025-05-09", "2025-05-11", "2025-05-13", "2025-05-15", "2025-05-16", "2025-05-18", "2025-05-20", "2025-05-22", "2025-05-24", "2025-05-25", "2025-05-27", "2025-05-29", "2025-05-31", "2025-06-02", "2025-06-03", "2025-06-05", "2025-06-07", "2025-06-09", "2025-06-11", "2025-06-12", "2025-06-14", "2025-06-16", "2025-06-18", "2025-06-20", "2025-06-21", "2025-06-23", "2025-06-25", "2025-06-27", "2025-06-29", "2025-06-30", "2025-07-02", "2025-07-04", "2025-07-06", "2025-07-08", "2025-07-09", "2025-07-11", "2025-07-13", "2025-07-15", "2025-07-16", "2025-07-18", "2025-07-20", "2025-07-22", "2025-07-24", "2025-07-25", "2025-07-27", "2025-07-29", "2025-07-31", "2025-08-02", "2025-08-03", "2025-08-05", "2025-08-07", "2025-08-09", "2025-08-11", "2025-08-12", "2025-08-14", "2025-08-16", "2025-08-18", "2025-08-20", "2025-08-21", "2025-08-23", "2025-08-25", "2025-08-27", "2025-08-29", "2025-08-30", "2025-09-01", "2025-09-03", "2025-09-05", "2025-09-07", "2025-09-08", "2025-09-10", "2025-09-12", "2025-09-14", "2025-09-15", "2025-09-17", "2025-09-19", "2025-09-21", "2025-09-23", "2025-09-24", "2025-09-26", "2025-09-28", "2025-09-30", "2025-10-02", "2025-10-03", "2025-10-05", "2025-10-07", "2025-10-09", "2025-10-11", "2025-10-12", "2025-10-14", "2025-10-16", "2025-10-18", "2025-10-20", "2025-10-21", "2025-10-23", "2025-10-25", "2025-10-27", "2025-10-29", "2025-10-30", "2025-11-01Line truncated
Plotly.newPlot("position_trend", figure.data, figure.layout, { responsive: true, displayModeBar: false });
})();
</script>
</div>
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 sm:p-6">
<div id="player_impact"></div>
<script>
(function () {
var figure = {"data": [{"hovertemplate": "<b>%{y}</b><br>Avg relative percentile: %{x:.1f}th<extra></extra>", "marker": {"color": ["#16a34a", "#16a34a", "#16a34a", "#dc2626", "#dc2626"]}, "orientation": "h", "text": ["52nd (5 games)", "56th (3 games)", "59th (9 games)", "62nd (20 games)", "62nd (22 games)"], "textposition": "outside", "x": {"dtype": "f8", "bdata": "MzMzMzMzSkCamZmZmdlLQGZmZmZmpk1AzczMzMzMTkAzMzMzM/NOQA=="}, "y": ["Ellora", "Drew", "Sam", "Ciaran", "Jay"], "type": "bar"}], "layout": {"template": {"data": {"barpolar": [{"marker": {"line": {"color": "white", "width": 0.5}, "pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "barpolar"}], "bar": [{"error_x": {"color": "#2a3f5f"}, "error_y": {"color": "#2a3f5f"}, "marker": {"line": {"color": "white", "width": 0.5}, "pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "bar"}], "carpet": [{"aaxis": {"endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f"}, "baxis": {"endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f"}, "type": "carpet"}], "choropleth": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "choropleth"}], "contourcarpet": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "contourcarpet"}], "contour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "contour"}], "heatmap": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmap"}], "histogram2dcontour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2dcontour"}], "histogram2d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2d"}], "histogram": [{"marker": {"pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "histogram"}], "mesh3d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "mesh3d"}], "parcoords": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "parcoords"}], "pie": [{"automargin": true, "type": "pie"}], "scatter3d": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatter3d"}], "scattercarpet": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattercarpet"}], "scattergeo": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergeo"}], "scattergl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergl"}], "scattermapbox": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattermapbox"}], "scattermap": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattermap"}], "scatterpolargl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterpolargl"}], "scatterpolar": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterpolar"}], "scatter": [{"fillpattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}, "type": "scatter"}], "scatterternary": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterternary"}], "surface": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "surface"}], "table": [{"cells": {"fill": {"color": "#EBF0F8"}, "line": {"color": "white"}}, "header": {"fill": {"color": "#C8D4E3"}, "line": {"color": "white"}}, "type": "table"}]}, "layoutLine truncated
Plotly.newPlot("player_impact", figure.data, figure.layout, { responsive: true, displayModeBar: false });
})();
</script>
</div>
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 sm:p-6">
<div id="scattergories_vs_position"></div>
<script>
(function () {
var figure = {"data": [{"hovertemplate": "Scattergories Points=%{x}<br>Relative Position Percentile (lower is better)=%{y:.1f}<extra></extra>", "legendgroup": "", "marker": {"color": "#1e3a8a", "symbol": "circle", "opacity": 0.8, "size": 9}, "mode": "markers", "name": "", "orientation": "v", "showlegend": false, "x": {"dtype": "i1", "bdata": "CgQHBgUIBAYICAkECwUFBQYGCgUGCgo="}, "xaxis": "x", "y": {"dtype": "f8", "bdata": "zMzMzMxMUUA0MzMzM1NXQDMzMzMzM0ZAZmZmZmYmTEA0MzMzM3NKQAAAAAAAAElAzczMzMxsVUABAAAAAEBLQDMzMzMz01RAAAAAAABAT0AAAAAAAABJQAAAAAAAwEJAAAAAAAAAREBnZmZmZqZAQJmZmZmZ2URAzczMzMwsUkCamZmZmTlWQAAAAAAAAElAZmZmZmYmTUAAAAAAAIBRQAAAAAAAAElAAAAAAAAATkAAAAAAAABZQA=="}, "yaxis": "y", "type": "scatter"}, {"hovertemplate": "<b>OLS trendline</b><br>Relative Percentile = 0.100314 * Points on Scattergories + 60.3761<br>R<sup>2</sup>=0.000143<br><br>Scattergories Points=%{x}<br>Relative Position Percentile (lower is better)=%{y:.1f} <b>(trend)</b><extra></extra>", "legendgroup": "", "marker": {"color": "#636efa", "symbol": "circle"}, "mode": "lines", "name": "", "showlegend": false, "x": {"dtype": "i1", "bdata": "BAQEBQUFBQUGBgYGBgcICAgJCgoKCgs="}, "xaxis": "x", "y": {"dtype": "f8", "bdata": "3h+ne4BjTkDeH6d7gGNOQN4fp3uAY05AbD9hlldwTkBsP2GWV3BOQGw/YZZXcE5AbD9hlldwTkBsP2GWV3BOQPpeG7EufU5A+l4bsS59TkD6XhuxLn1OQPpeG7EufU5A+l4bsS59TkCIftXLBYpOQBaej+bclk5AFp6P5tyWTkAWno/m3JZOQKS9SQG0o05AMd0DHIuwTkAx3QMci7BOQDHdAxyLsE5AMd0DHIuwTkC//L02Yr1OQA=="}, "yaxis": "y", "type": "scatter", "line": {"color": "#dc2626", "dash": "dot", "width": 2}}], "layout": {"template": {"data": {"barpolar": [{"marker": {"line": {"color": "white", "width": 0.5}, "pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "barpolar"}], "bar": [{"error_x": {"color": "#2a3f5f"}, "error_y": {"color": "#2a3f5f"}, "marker": {"line": {"color": "white", "width": 0.5}, "pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "bar"}], "carpet": [{"aaxis": {"endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f"}, "baxis": {"endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f"}, "type": "carpet"}], "choropleth": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "choropleth"}], "contourcarpet": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "contourcarpet"}], "contour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "contour"}], "heatmap": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmap"}], "histogram2dcontour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2dcontour"}], "histogram2d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2d"}], "histogram": [{"marker": {"pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "histogram"}], "mesh3d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "mesh3d"}], "parcoords": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "parcoords"}], "pie": [{"automargin": true, "type": "pie"}], "scatter3d": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatter3d"}], "scattercarpet": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattercarpet"}], "scattergeo": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergeo"}], "scattergl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergl"}], "scattermapbox": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattermapbox"}], "scattermap": [{"marker": {"colorbar":Line truncated
Plotly.newPlot("scattergories_vs_position", figure.data, figure.layout, { responsive: true, displayModeBar: false });
})();
</script>
</div>
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 sm:p-6">
<div id="player_participation"></div>
<script>
(function () {
var figure = {"data": [{"coloraxis": "coloraxis", "name": "0", "x": {"dtype": "i1", "bdata": "AAECAwQFBgcICQoLDA0ODxAREhMUFRY="}, "y": ["Ciaran", "Jay", "Sam", "Drew", "Theo", "Tom", "Ellora", "Chloe", "Jamie", "Christine", "Mide"], "z": {"dtype": "i1", "bdata": "AQEBAQEAAQEBAQEBAQEBAAEBAQEAAQEBAQEBAQEBAQEBAQEBAQABAQEBAQEBAQAAAQABAAEBAQAAAQABAQAAAAAAAAABAAABAAAAAAAAAAAAAAAAAQAAAAABAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAQABAQEAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQ==", "shape": "11, 23"}, "type": "heatmap", "xaxis": "x", "yaxis": "y", "hovertemplate": "Game: %{x}<br>Player: %{y}<br>Attended: %{z}<extra></extra>"}], "layout": {"template": {"data": {"barpolar": [{"marker": {"line": {"color": "white", "width": 0.5}, "pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "barpolar"}], "bar": [{"error_x": {"color": "#2a3f5f"}, "error_y": {"color": "#2a3f5f"}, "marker": {"line": {"color": "white", "width": 0.5}, "pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "bar"}], "carpet": [{"aaxis": {"endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f"}, "baxis": {"endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f"}, "type": "carpet"}], "choropleth": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "choropleth"}], "contourcarpet": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "contourcarpet"}], "contour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "contour"}], "heatmap": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmap"}], "histogram2dcontour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2dcontour"}], "histogram2d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2d"}], "histogram": [{"marker": {"pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "histogram"}], "mesh3d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "mesh3d"}], "parcoords": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "parcoords"}], "pie": [{"automargin": true, "type": "pie"}], "scatter3d": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatter3d"}], "scattercarpet": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattercarpet"}], "scattergeo": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergeo"}], "scattergl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergl"}], "scattermapbox": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattermapbox"}], "scattermap": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattermap"}], "scatterpolargl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterpolargl"}], "scatterpolar": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterpolar"}], "scatter": [{"fillpattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}, "type": "scatter"}], "scatterternary": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterternary"}], "surface": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9Line truncated
Plotly.newPlot("player_participation", figure.data, figure.layout, { responsive: true, displayModeBar: false });
})();
</script>
</div>
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 sm:p-6">
<div id="calendar"></div>
<script>
(function () {
var figure = {"data": [{"colorscale": [[0, "#E4ECF6"], [1, "#1e3a8a"]], "hovertemplate": "%{y}<br>Column %{x}<br>%{text}<br>Attended: %{z}<extra></extra>", "showscale": false, "text": [["ISO week 1", "ISO week 2", "ISO week 3", "ISO week 4", "ISO week 5", "ISO week 6", "ISO week 7", "ISO week 8", "ISO week 9", "ISO week 10", "ISO week 11", "ISO week 12", "ISO week 13"], ["ISO week 14", "ISO week 15", "ISO week 16", "ISO week 17", "ISO week 18", "ISO week 19", "ISO week 20", "ISO week 21", "ISO week 22", "ISO week 23", "ISO week 24", "ISO week 25", "ISO week 26"], ["ISO week 27", "ISO week 28", "ISO week 29", "ISO week 30", "ISO week 31", "ISO week 32", "ISO week 33", "ISO week 34", "ISO week 35", "ISO week 36", "ISO week 37", "ISO week 38", "ISO week 39"], ["ISO week 40", "ISO week 41", "ISO week 42", "ISO week 43", "ISO week 44", "ISO week 45", "ISO week 46", "ISO week 47", "ISO week 48", "ISO week 49", "ISO week 50", "ISO week 51", "ISO week 52"], ["ISO week 1", "ISO week 2", "ISO week 3", "ISO week 4", "ISO week 5", "ISO week 6", "ISO week 7", "ISO week 8", "ISO week 9", "ISO week 10", "ISO week 11", "ISO week 12", "ISO week 13"], ["ISO week 14", "ISO week 15", "ISO week 16", "ISO week 17", "ISO week 18", "ISO week 19", "ISO week 20", "ISO week 21", "ISO week 22", "ISO week 23", "ISO week 24", "ISO week 25", "ISO week 26"], ["ISO week 27", "ISO week 28", "ISO week 29", "ISO week 30", "ISO week 31", "ISO week 32", "ISO week 33", "ISO week 34", "ISO week 35", "ISO week 36", "ISO week 37", "ISO week 38", "ISO week 39"], ["ISO week 40", "ISO week 41", "ISO week 42", "ISO week 43", "ISO week 44", "ISO week 45", "ISO week 46", "ISO week 47", "ISO week 48", "ISO week 49", "ISO week 50", "ISO week 51", "ISO week 52"]], "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], "xgap": 3, "y": ["2025 \u00b7 W1-13", "2025 \u00b7 W14-26", "2025 \u00b7 W27-39", "2025 \u00b7 W40-52", "2026 \u00b7 W1-13", "2026 \u00b7 W14-26", "2026 \u00b7 W27-39", "2026 \u00b7 W40-52"], "ygap": 3, "z": [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1], [1, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0, 1, 0], [1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]], "zmax": 1, "zmin": 0, "type": "heatmap"}], "layout": {"template": {"data": {"barpolar": [{"marker": {"line": {"color": "white", "width": 0.5}, "pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "barpolar"}], "bar": [{"error_x": {"color": "#2a3f5f"}, "error_y": {"color": "#2a3f5f"}, "marker": {"line": {"color": "white", "width": 0.5}, "pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type": "bar"}], "carpet": [{"aaxis": {"endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f"}, "baxis": {"endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f"}, "type": "carpet"}], "choropleth": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "choropleth"}], "contourcarpet": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "contourcarpet"}], "contour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "contour"}], "heatmap": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmap"}], "histogram2dcontour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2dcontour"}], "histogram2d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2d"}], "histogram": [{"marker": {"pattern": {"fillmode": "overlay", "size": 10, "solidity": 0.2}}, "type":Line truncated
Plotly.newPlot("calendar", figure.data, figure.layout, { responsive: true, displayModeBar: false });
})();
</script>
</div>
</div>
</section>
</main>
<!-- ── Footer ─────────────────────────────────────────────────────────── -->
<footer class="mt-16 border-t border-gray-200 bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-8 py-5 flex flex-col sm:flex-row justify-between items-center gap-2 text-xs text-gray-400">
<span>The Hope Pub Quiz Dashboard</span>
<span>23 quizzes · 5 charts</span>
</div>
</footer>
</body>
</html>