adding correct tracking link
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 57s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m55s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s

This commit is contained in:
Tudor Sitaru
2026-02-20 15:30:30 +00:00
parent 9b55320aa7
commit 4c4070841c

View File

@@ -1,385 +1,663 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SchoolCompare | Compare Primary School Performance</title>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SchoolCompare | Compare Primary School Performance</title>
<!-- Primary Meta Tags -->
<meta name="description" content="Compare primary school KS2 performance across England. Search, filter and compare Reading, Writing and Maths results for thousands of schools.">
<meta name="keywords" content="school comparison, KS2 results, primary school performance, England schools, SATs results">
<meta name="author" content="SchoolCompare">
<meta name="robots" content="index, follow">
<!-- Primary Meta Tags -->
<meta
name="description"
content="Compare primary school KS2 performance across England. Search, filter and compare Reading, Writing and Maths results for thousands of schools."
/>
<meta
name="keywords"
content="school comparison, KS2 results, primary school performance, England schools, SATs results"
/>
<meta name="author" content="SchoolCompare" />
<meta name="robots" content="index, follow" />
<!-- Analytics -->
<script defer src="http://10.0.1.225:3000/script.js" data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"></script>
<!-- Analytics -->
<script
defer
src="https://analytics.schoolcompare.co.uk/script.js"
data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
></script>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Canonical -->
<link rel="canonical" href="https://schoolcompare.co.uk/">
<!-- Canonical -->
<link rel="canonical" href="https://schoolcompare.co.uk/" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://schoolcompare.co.uk/">
<meta property="og:title" content="SchoolCompare | Compare Primary School Performance">
<meta property="og:description" content="Compare primary school KS2 performance across England. Search and compare Reading, Writing and Maths results.">
<meta property="og:site_name" content="SchoolCompare">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://schoolcompare.co.uk/" />
<meta
property="og:title"
content="SchoolCompare | Compare Primary School Performance"
/>
<meta
property="og:description"
content="Compare primary school KS2 performance across England. Search and compare Reading, Writing and Maths results."
/>
<meta property="og:site_name" content="SchoolCompare" />
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://schoolcompare.co.uk/">
<meta name="twitter:title" content="SchoolCompare | Compare Primary School Performance">
<meta name="twitter:description" content="Compare primary school KS2 performance across England.">
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="https://schoolcompare.co.uk/" />
<meta
name="twitter:title"
content="SchoolCompare | Compare Primary School Performance"
/>
<meta
name="twitter:description"
content="Compare primary school KS2 performance across England."
/>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "SchoolCompare",
"url": "https://schoolcompare.co.uk",
"description": "Compare primary school KS2 performance across England",
"applicationCategory": "EducationalApplication",
"operatingSystem": "Web",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "GBP"
},
"author": {
"@type": "Organization",
"name": "SchoolCompare",
"url": "https://schoolcompare.co.uk"
}
}
</script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "SchoolCompare",
"url": "https://schoolcompare.co.uk",
"description": "Compare primary school KS2 performance across England",
"applicationCategory": "EducationalApplication",
"operatingSystem": "Web",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "GBP"
},
"author": {
"@type": "Organization",
"name": "SchoolCompare",
"url": "https://schoolcompare.co.uk"
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Leaflet Map Library -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
<div class="noise-overlay"></div>
<header class="header">
<div class="header-content">
<a href="/" class="logo">
<div class="logo-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="2"/>
<path d="M20 8L20 32M12 14L28 14M10 20L30 20M12 26L28 26" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="20" cy="20" r="4" fill="currentColor"/>
</svg>
</div>
<div class="logo-text">
<span class="logo-title">SchoolCompare</span>
<span class="logo-subtitle">schoolcompare.co.uk</span>
</div>
</a>
<nav class="nav">
<a href="/" class="nav-link active" data-view="home">Home</a>
<a href="/compare" class="nav-link" data-view="compare">Compare</a>
<a href="/rankings" class="nav-link" data-view="rankings">Rankings</a>
</nav>
</div>
</header>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Playfair+Display:wght@600;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Leaflet Map Library -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<div class="noise-overlay"></div>
<main class="main">
<!-- Home View -->
<section id="home-view" class="view active">
<div class="hero">
<h1 class="hero-title">Compare Primary School Performance</h1>
<p class="hero-subtitle">Search and compare KS2 results across England's primary schools</p>
<header class="header">
<div class="header-content">
<a href="/" class="logo">
<div class="logo-icon">
<svg
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="20"
cy="20"
r="18"
stroke="currentColor"
stroke-width="2"
/>
<path
d="M20 8L20 32M12 14L28 14M10 20L30 20M12 26L28 26"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
<circle cx="20" cy="20" r="4" fill="currentColor" />
</svg>
</div>
<div class="logo-text">
<span class="logo-title">SchoolCompare</span>
<span class="logo-subtitle">schoolcompare.co.uk</span>
</div>
</a>
<nav class="nav">
<a href="/" class="nav-link active" data-view="home"
>Home</a
>
<a href="/compare" class="nav-link" data-view="compare"
>Compare</a
>
<a href="/rankings" class="nav-link" data-view="rankings"
>Rankings</a
>
</nav>
</div>
</header>
<div class="search-section">
<div class="search-mode-toggle">
<button class="search-mode-btn active" data-mode="name">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
</svg>
Find by Name
</button>
<button class="search-mode-btn" data-mode="location">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
Find by Location
</button>
<main class="main">
<!-- Home View -->
<section id="home-view" class="view active">
<div class="hero">
<h1 class="hero-title">
Compare Primary School Performance
</h1>
<p class="hero-subtitle">
Search and compare KS2 results across England's primary
schools
</p>
</div>
<div id="name-search-panel" class="search-panel active">
<div class="search-container">
<input type="text" id="school-search" class="search-input" placeholder="Search primary schools by name...">
<div class="search-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
<div class="search-section">
<div class="search-mode-toggle">
<button class="search-mode-btn active" data-mode="name">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
width="16"
height="16"
>
<circle cx="11" cy="11" r="8" />
<path d="M21 21l-4.35-4.35" />
</svg>
Find by Name
</button>
<button class="search-mode-btn" data-mode="location">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
width="16"
height="16"
>
<path
d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
/>
<circle cx="12" cy="10" r="3" />
</svg>
Find by Location
</button>
</div>
<div id="name-search-panel" class="search-panel active">
<div class="search-container">
<input
type="text"
id="school-search"
class="search-input"
placeholder="Search primary schools by name..."
/>
<div class="search-icon">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="11" cy="11" r="8" />
<path d="M21 21l-4.35-4.35" />
</svg>
</div>
</div>
<div class="filter-row">
<select
id="local-authority-filter"
class="filter-select"
>
<option value="">All Areas</option>
</select>
<select id="type-filter" class="filter-select">
<option value="">All School Types</option>
</select>
</div>
</div>
<div class="filter-row">
<select id="local-authority-filter" class="filter-select">
<option value="">All Areas</option>
</select>
<select id="type-filter" class="filter-select">
<option value="">All School Types</option>
</select>
<div id="location-search-panel" class="search-panel">
<div class="location-input-group">
<input
type="text"
id="postcode-search"
class="search-input postcode-input"
placeholder="Enter postcode..."
/>
<select
id="radius-select"
class="filter-select radius-select"
>
<option value="0.5" selected>1/2 mile</option>
<option value="1">1 mile</option>
<option value="2">2 miles</option>
</select>
<select
id="type-filter-location"
class="filter-select"
>
<option value="">All School Types</option>
</select>
<button
id="location-search-btn"
class="btn btn-primary location-btn"
>
Find Nearby
</button>
</div>
</div>
</div>
<div id="location-search-panel" class="search-panel">
<div class="location-input-group">
<input type="text" id="postcode-search" class="search-input postcode-input" placeholder="Enter postcode...">
<select id="radius-select" class="filter-select radius-select">
<option value="0.5" selected>1/2 mile</option>
<option value="1">1 mile</option>
<option value="2">2 miles</option>
</select>
<select id="type-filter-location" class="filter-select">
<option value="">All School Types</option>
</select>
<button id="location-search-btn" class="btn btn-primary location-btn">Find Nearby</button>
</div>
</div>
</div>
<div class="view-toggle" id="view-toggle" style="display: none;">
<button class="view-toggle-btn active" data-view="list">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<line x1="8" y1="6" x2="21" y2="6"/>
<line x1="8" y1="12" x2="21" y2="12"/>
<line x1="8" y1="18" x2="21" y2="18"/>
<line x1="3" y1="6" x2="3.01" y2="6"/>
<line x1="3" y1="12" x2="3.01" y2="12"/>
<line x1="3" y1="18" x2="3.01" y2="18"/>
</svg>
List
</button>
<button class="view-toggle-btn" data-view="map">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
Map
</button>
</div>
<div class="results-container" id="results-container">
<div class="results-map" id="results-map"></div>
<div class="schools-grid" id="schools-grid">
<!-- School cards populated by JS -->
</div>
</div>
</section>
<!-- Compare View -->
<section id="compare-view" class="view">
<div class="compare-header">
<h2 class="section-title">Compare Primary Schools</h2>
<p class="section-subtitle">Select schools to compare their KS2 performance over time</p>
</div>
<div class="compare-search-section">
<input type="text" id="compare-search" class="search-input" placeholder="Add a school to compare...">
<div id="compare-results" class="compare-results"></div>
</div>
<div class="selected-schools" id="selected-schools">
<div class="empty-selection">
<div class="empty-icon">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="6" y="10" width="36" height="28" rx="2"/>
<path d="M6 18h36"/>
<circle cx="14" cy="14" r="2" fill="currentColor"/>
<circle cx="22" cy="14" r="2" fill="currentColor"/>
<div class="view-toggle" id="view-toggle" style="display: none">
<button class="view-toggle-btn active" data-view="list">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
width="16"
height="16"
>
<line x1="8" y1="6" x2="21" y2="6" />
<line x1="8" y1="12" x2="21" y2="12" />
<line x1="8" y1="18" x2="21" y2="18" />
<line x1="3" y1="6" x2="3.01" y2="6" />
<line x1="3" y1="12" x2="3.01" y2="12" />
<line x1="3" y1="18" x2="3.01" y2="18" />
</svg>
</div>
<p>Search and add schools to compare</p>
List
</button>
<button class="view-toggle-btn" data-view="map">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
width="16"
height="16"
>
<path
d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
/>
<circle cx="12" cy="10" r="3" />
</svg>
Map
</button>
</div>
</div>
<div class="charts-section" id="charts-section" style="display: none;">
<div class="metric-selector">
<label>Select KS2 Metric:</label>
<select id="metric-select" class="filter-select">
<div class="results-container" id="results-container">
<div class="results-map" id="results-map"></div>
<div class="schools-grid" id="schools-grid">
<!-- School cards populated by JS -->
</div>
</div>
</section>
<!-- Compare View -->
<section id="compare-view" class="view">
<div class="compare-header">
<h2 class="section-title">Compare Primary Schools</h2>
<p class="section-subtitle">
Select schools to compare their KS2 performance over
time
</p>
</div>
<div class="compare-search-section">
<input
type="text"
id="compare-search"
class="search-input"
placeholder="Add a school to compare..."
/>
<div id="compare-results" class="compare-results"></div>
</div>
<div class="selected-schools" id="selected-schools">
<div class="empty-selection">
<div class="empty-icon">
<svg
viewBox="0 0 48 48"
fill="none"
stroke="currentColor"
stroke-width="1.5"
>
<rect
x="6"
y="10"
width="36"
height="28"
rx="2"
/>
<path d="M6 18h36" />
<circle
cx="14"
cy="14"
r="2"
fill="currentColor"
/>
<circle
cx="22"
cy="14"
r="2"
fill="currentColor"
/>
</svg>
</div>
<p>Search and add schools to compare</p>
</div>
</div>
<div
class="charts-section"
id="charts-section"
style="display: none"
>
<div class="metric-selector">
<label>Select KS2 Metric:</label>
<select id="metric-select" class="filter-select">
<optgroup label="Expected Standard">
<option value="rwm_expected_pct">
Reading, Writing & Maths Combined %
</option>
<option value="reading_expected_pct">
Reading Expected %
</option>
<option value="writing_expected_pct">
Writing Expected %
</option>
<option value="maths_expected_pct">
Maths Expected %
</option>
<option value="gps_expected_pct">
GPS Expected %
</option>
<option value="science_expected_pct">
Science Expected %
</option>
</optgroup>
<optgroup label="Higher Standard">
<option value="rwm_high_pct">
RWM Combined Higher %
</option>
<option value="reading_high_pct">
Reading Higher %
</option>
<option value="writing_high_pct">
Writing Higher %
</option>
<option value="maths_high_pct">
Maths Higher %
</option>
<option value="gps_high_pct">
GPS Higher %
</option>
</optgroup>
<optgroup label="Progress Scores">
<option value="reading_progress">
Reading Progress
</option>
<option value="writing_progress">
Writing Progress
</option>
<option value="maths_progress">
Maths Progress
</option>
</optgroup>
<optgroup label="Average Scores">
<option value="reading_avg_score">
Reading Avg Score
</option>
<option value="maths_avg_score">
Maths Avg Score
</option>
<option value="gps_avg_score">
GPS Avg Score
</option>
</optgroup>
<optgroup label="Gender Performance">
<option value="rwm_expected_boys_pct">
RWM Expected % (Boys)
</option>
<option value="rwm_expected_girls_pct">
RWM Expected % (Girls)
</option>
<option value="rwm_high_boys_pct">
RWM Higher % (Boys)
</option>
<option value="rwm_high_girls_pct">
RWM Higher % (Girls)
</option>
</optgroup>
<optgroup label="Equity (Disadvantaged)">
<option value="rwm_expected_disadvantaged_pct">
RWM Expected % (Disadvantaged)
</option>
<option
value="rwm_expected_non_disadvantaged_pct"
>
RWM Expected % (Non-Disadvantaged)
</option>
<option value="disadvantaged_gap">
Disadvantaged Gap vs National
</option>
</optgroup>
<optgroup label="School Context">
<option value="disadvantaged_pct">
% Disadvantaged Pupils
</option>
<option value="eal_pct">% EAL Pupils</option>
<option value="sen_support_pct">
% SEN Support
</option>
<option value="stability_pct">
% Pupil Stability
</option>
</optgroup>
<optgroup label="3-Year Trends">
<option value="rwm_expected_3yr_pct">
RWM Expected % (3-Year Avg)
</option>
<option value="reading_avg_3yr">
Reading Score (3-Year Avg)
</option>
<option value="maths_avg_3yr">
Maths Score (3-Year Avg)
</option>
</optgroup>
</select>
</div>
<div class="chart-container">
<canvas id="comparison-chart"></canvas>
</div>
<div class="data-table-container">
<table class="data-table" id="comparison-table">
<thead>
<tr id="table-header"></tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</div>
</div>
</section>
<!-- Rankings View -->
<section id="rankings-view" class="view">
<div class="rankings-header">
<h2 class="section-title">Primary School Rankings</h2>
<p class="section-subtitle">
Top performing primary schools ranked by KS2 metric
</p>
</div>
<div class="rankings-controls">
<select id="ranking-area" class="filter-select">
<option value="">All Areas</option>
<!-- Populated by JS -->
</select>
<select id="ranking-metric" class="filter-select">
<optgroup label="Expected Standard">
<option value="rwm_expected_pct">Reading, Writing & Maths Combined %</option>
<option value="reading_expected_pct">Reading Expected %</option>
<option value="writing_expected_pct">Writing Expected %</option>
<option value="maths_expected_pct">Maths Expected %</option>
<option value="gps_expected_pct">GPS Expected %</option>
<option value="science_expected_pct">Science Expected %</option>
<option value="rwm_expected_pct">
Reading, Writing & Maths Combined %
</option>
<option value="reading_expected_pct">
Reading Expected %
</option>
<option value="writing_expected_pct">
Writing Expected %
</option>
<option value="maths_expected_pct">
Maths Expected %
</option>
<option value="gps_expected_pct">
GPS Expected %
</option>
<option value="science_expected_pct">
Science Expected %
</option>
</optgroup>
<optgroup label="Higher Standard">
<option value="rwm_high_pct">RWM Combined Higher %</option>
<option value="reading_high_pct">Reading Higher %</option>
<option value="writing_high_pct">Writing Higher %</option>
<option value="maths_high_pct">Maths Higher %</option>
<option value="rwm_high_pct">
RWM Combined Higher %
</option>
<option value="reading_high_pct">
Reading Higher %
</option>
<option value="writing_high_pct">
Writing Higher %
</option>
<option value="maths_high_pct">
Maths Higher %
</option>
<option value="gps_high_pct">GPS Higher %</option>
</optgroup>
<optgroup label="Progress Scores">
<option value="reading_progress">Reading Progress</option>
<option value="writing_progress">Writing Progress</option>
<option value="maths_progress">Maths Progress</option>
<option value="reading_progress">
Reading Progress
</option>
<option value="writing_progress">
Writing Progress
</option>
<option value="maths_progress">
Maths Progress
</option>
</optgroup>
<optgroup label="Average Scores">
<option value="reading_avg_score">Reading Avg Score</option>
<option value="maths_avg_score">Maths Avg Score</option>
<option value="reading_avg_score">
Reading Avg Score
</option>
<option value="maths_avg_score">
Maths Avg Score
</option>
<option value="gps_avg_score">GPS Avg Score</option>
</optgroup>
<optgroup label="Gender Performance">
<option value="rwm_expected_boys_pct">RWM Expected % (Boys)</option>
<option value="rwm_expected_girls_pct">RWM Expected % (Girls)</option>
<option value="rwm_high_boys_pct">RWM Higher % (Boys)</option>
<option value="rwm_high_girls_pct">RWM Higher % (Girls)</option>
<option value="rwm_expected_boys_pct">
RWM Expected % (Boys)
</option>
<option value="rwm_expected_girls_pct">
RWM Expected % (Girls)
</option>
<option value="rwm_high_boys_pct">
RWM Higher % (Boys)
</option>
<option value="rwm_high_girls_pct">
RWM Higher % (Girls)
</option>
</optgroup>
<optgroup label="Equity (Disadvantaged)">
<option value="rwm_expected_disadvantaged_pct">RWM Expected % (Disadvantaged)</option>
<option value="rwm_expected_non_disadvantaged_pct">RWM Expected % (Non-Disadvantaged)</option>
<option value="disadvantaged_gap">Disadvantaged Gap vs National</option>
</optgroup>
<optgroup label="School Context">
<option value="disadvantaged_pct">% Disadvantaged Pupils</option>
<option value="eal_pct">% EAL Pupils</option>
<option value="sen_support_pct">% SEN Support</option>
<option value="stability_pct">% Pupil Stability</option>
<option value="rwm_expected_disadvantaged_pct">
RWM Expected % (Disadvantaged)
</option>
<option value="rwm_expected_non_disadvantaged_pct">
RWM Expected % (Non-Disadvantaged)
</option>
</optgroup>
<optgroup label="3-Year Trends">
<option value="rwm_expected_3yr_pct">RWM Expected % (3-Year Avg)</option>
<option value="reading_avg_3yr">Reading Score (3-Year Avg)</option>
<option value="maths_avg_3yr">Maths Score (3-Year Avg)</option>
<option value="rwm_expected_3yr_pct">
RWM Expected % (3-Year Avg)
</option>
</optgroup>
</select>
<select id="ranking-year" class="filter-select">
<!-- Populated by JS -->
</select>
</div>
<div class="chart-container">
<canvas id="comparison-chart"></canvas>
<div class="rankings-list" id="rankings-list">
<!-- Rankings populated by JS -->
</div>
</section>
</main>
<div class="data-table-container">
<table class="data-table" id="comparison-table">
<thead>
<tr id="table-header"></tr>
</thead>
<tbody id="table-body"></tbody>
</table>
<!-- School Detail Modal -->
<div class="modal" id="school-modal">
<div class="modal-backdrop"></div>
<div class="modal-content">
<button class="modal-close" id="modal-close">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</button>
<div class="modal-header">
<button
class="btn btn-primary modal-compare-btn"
id="add-to-compare"
>
Add to Compare
</button>
<h2 id="modal-school-name"></h2>
<div class="modal-meta" id="modal-meta"></div>
<div class="modal-details" id="modal-details"></div>
</div>
</div>
</section>
<!-- Rankings View -->
<section id="rankings-view" class="view">
<div class="rankings-header">
<h2 class="section-title">Primary School Rankings</h2>
<p class="section-subtitle">Top performing primary schools ranked by KS2 metric</p>
</div>
<div class="rankings-controls">
<select id="ranking-area" class="filter-select">
<option value="">All Areas</option>
<!-- Populated by JS -->
</select>
<select id="ranking-metric" class="filter-select">
<optgroup label="Expected Standard">
<option value="rwm_expected_pct">Reading, Writing & Maths Combined %</option>
<option value="reading_expected_pct">Reading Expected %</option>
<option value="writing_expected_pct">Writing Expected %</option>
<option value="maths_expected_pct">Maths Expected %</option>
<option value="gps_expected_pct">GPS Expected %</option>
<option value="science_expected_pct">Science Expected %</option>
</optgroup>
<optgroup label="Higher Standard">
<option value="rwm_high_pct">RWM Combined Higher %</option>
<option value="reading_high_pct">Reading Higher %</option>
<option value="writing_high_pct">Writing Higher %</option>
<option value="maths_high_pct">Maths Higher %</option>
<option value="gps_high_pct">GPS Higher %</option>
</optgroup>
<optgroup label="Progress Scores">
<option value="reading_progress">Reading Progress</option>
<option value="writing_progress">Writing Progress</option>
<option value="maths_progress">Maths Progress</option>
</optgroup>
<optgroup label="Average Scores">
<option value="reading_avg_score">Reading Avg Score</option>
<option value="maths_avg_score">Maths Avg Score</option>
<option value="gps_avg_score">GPS Avg Score</option>
</optgroup>
<optgroup label="Gender Performance">
<option value="rwm_expected_boys_pct">RWM Expected % (Boys)</option>
<option value="rwm_expected_girls_pct">RWM Expected % (Girls)</option>
<option value="rwm_high_boys_pct">RWM Higher % (Boys)</option>
<option value="rwm_high_girls_pct">RWM Higher % (Girls)</option>
</optgroup>
<optgroup label="Equity (Disadvantaged)">
<option value="rwm_expected_disadvantaged_pct">RWM Expected % (Disadvantaged)</option>
<option value="rwm_expected_non_disadvantaged_pct">RWM Expected % (Non-Disadvantaged)</option>
</optgroup>
<optgroup label="3-Year Trends">
<option value="rwm_expected_3yr_pct">RWM Expected % (3-Year Avg)</option>
</optgroup>
</select>
<select id="ranking-year" class="filter-select">
<!-- Populated by JS -->
</select>
</div>
<div class="rankings-list" id="rankings-list">
<!-- Rankings populated by JS -->
</div>
</section>
</main>
<!-- School Detail Modal -->
<div class="modal" id="school-modal">
<div class="modal-backdrop"></div>
<div class="modal-content">
<button class="modal-close" id="modal-close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
<div class="modal-header">
<button class="btn btn-primary modal-compare-btn" id="add-to-compare">Add to Compare</button>
<h2 id="modal-school-name"></h2>
<div class="modal-meta" id="modal-meta"></div>
<div class="modal-details" id="modal-details"></div>
</div>
<div class="modal-body">
<div class="modal-chart-container">
<canvas id="school-detail-chart"></canvas>
</div>
<div class="modal-stats" id="modal-stats"></div>
<div class="modal-map-container" id="modal-map-container">
<h4>Location</h4>
<div class="modal-map" id="modal-map"></div>
<div class="modal-body">
<div class="modal-chart-container">
<canvas id="school-detail-chart"></canvas>
</div>
<div class="modal-stats" id="modal-stats"></div>
<div class="modal-map-container" id="modal-map-container">
<h4>Location</h4>
<div class="modal-map" id="modal-map"></div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-content">
<div class="footer-contact">
<a href="mailto:contact@schoolcompare.co.uk">Contact Us</a>
<footer class="footer">
<div class="footer-content">
<div class="footer-contact">
<a href="mailto:contact@schoolcompare.co.uk">Contact Us</a>
</div>
<div class="footer-source">
<p>
Data source:
<a
href="https://www.compare-school-performance.service.gov.uk/"
target="_blank"
>UK Government - Compare School Performance</a
>
</p>
</div>
</div>
<div class="footer-source">
<p>Data source: <a href="https://www.compare-school-performance.service.gov.uk/" target="_blank">UK Government - Compare School Performance</a></p>
</div>
</div>
</footer>
</footer>
<script src="/static/app.js"></script>
</body>
<script src="/static/app.js"></script>
</body>
</html>