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 >
2026-01-06 16:30:32 +00:00
< p class = "hero-subtitle" > Search and compare KS2 results across England's 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 >
< / 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 >
2026-01-06 16:17:00 +00:00
< p class = "footer-note" > Primary school (KS2) data for England. Data from 2019-2020, 2020-2021, 2021-2022 unavailable due to COVID-19 disruption.< / p >
2026-01-06 13:52:00 +00:00
< / footer >
< script src = "/static/app.js" > < / script >
< / body >
< / html >
