2026-01-06 13:52:00 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2026-01-06 15:39:06 +00:00
< title > SchoolCompare | Compare Primary School Performance</ title >
2026-01-06 13:52:00 +00:00
< 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 >
< link rel = "stylesheet" href = "/static/styles.css" >
</ head >
< body >
< div class = "noise-overlay" ></ div >
< header class = "header" >
< div class = "header-content" >
< div 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" >
2026-01-06 15:39:06 +00:00
< span class = "logo-title" > SchoolCompare</ span >
< span class = "logo-subtitle" > schoolcompare.co.uk</ span >
2026-01-06 13:52:00 +00:00
</ div >
</ div >
< nav class = "nav" >
< a href = "#" class = "nav-link active" data-view = "dashboard" > Dashboard</ a >
< a href = "#" class = "nav-link" data-view = "compare" > Compare</ a >
< a href = "#" class = "nav-link" data-view = "rankings" > Rankings</ a >
</ nav >
</ div >
</ header >
< main class = "main" >
<!-- Dashboard View -->
< section id = "dashboard-view" class = "view active" >
< div class = "hero" >
2026-01-06 15:39:06 +00:00
< h1 class = "hero-title" > Compare Primary School Performance</ h1 >
< p class = "hero-subtitle" > Explore and compare KS2 results across Wandsworth & Merton primary schools</ p >
2026-01-06 13:52:00 +00:00
</ div >
< div class = "search-section" >
< 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 >
< option value = "Wandsworth" > Wandsworth</ option >
< option value = "Merton" > Merton</ option >
</ select >
< select id = "type-filter" class = "filter-select" >
< option value = "" > All School Types</ option >
</ select >
</ div >
</ div >
< div class = "schools-grid" id = "schools-grid" >
<!-- School cards populated by JS -->
</ 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 = "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 = "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 = "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 >
2026-01-06 15:39:06 +00:00
< p class = "section-subtitle" > Top performing primary schools ranked by KS2 metric</ p >
2026-01-06 13:52:00 +00:00
</ div >
< div class = "rankings-controls" >
< 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" >
< h2 id = "modal-school-name" ></ h2 >
< div class = "modal-meta" id = "modal-meta" ></ 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 >
< div class = "modal-footer" >
< button class = "btn btn-primary" id = "add-to-compare" > Add to Compare</ button >
</ div >
</ div >
</ div >
< footer class = "footer" >
< p > Data source: < a href = "https://www.compare-school-performance.service.gov.uk/download-data" target = "_blank" > UK Government - Compare School Performance</ a ></ p >
< p class = "footer-note" > Primary school (KS2) data for Wandsworth and Merton. Data from 2019-2020, 2020-2021, 2021-2022 unavailable due to COVID-19 disruption.</ p >
</ footer >
< script src = "/static/app.js" ></ script >
</ body >
</ html >
