591 lines
34 KiB
HTML
591 lines
34 KiB
HTML
|
<title>Last distance offered — detail page mockup</title>
|
|||
|
|
<style>
|
|||
|
|
:root{
|
|||
|
|
--bg-primary:#faf7f2; --bg-secondary:#f3ede4; --bg-card:#fff;
|
|||
|
|
--text-primary:#1a1612; --text-secondary:#5c564d; --text-muted:#6d685f;
|
|||
|
|
--accent-coral:#e07256; --accent-coral-dark:#b04a2e;
|
|||
|
|
--accent-teal:#296f6f; --accent-teal-light:#3a9e9e;
|
|||
|
|
--accent-gold:#c9a227; --accent-gold-text:#7a6800;
|
|||
|
|
--coral-bg:rgba(224,114,86,.12); --teal-bg:rgba(45,125,125,.12); --gold-bg:rgba(201,162,39,.12);
|
|||
|
|
--border:#e5dfd5; --shadow:0 2px 8px rgba(26,22,18,.06); --shadow-md:0 4px 20px rgba(26,22,18,.1);
|
|||
|
|
--radius-sm:4px; --radius-md:8px; --radius-lg:16px;
|
|||
|
|
--serif:'Playfair Display',Georgia,'Iowan Old Style',serif;
|
|||
|
|
--sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
|
|||
|
|
}
|
|||
|
|
/* Mockup is a fixed light artefact — it mirrors the live app, which is light-only. */
|
|||
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|||
|
|
body{font-family:var(--sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;
|
|||
|
|
padding:44px 20px 110px;font-variant-numeric:tabular-nums}
|
|||
|
|
.wrap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:0}
|
|||
|
|
|
|||
|
|
.pagehead h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,34px);letter-spacing:-.015em;text-wrap:balance}
|
|||
|
|
.pagehead p{color:var(--text-secondary);margin-top:10px;font-size:15px;max-width:64ch}
|
|||
|
|
.pagehead p + p{margin-top:8px}
|
|||
|
|
|
|||
|
|
.step{margin:60px 0 6px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
|
|||
|
|
.step h2{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.01em}
|
|||
|
|
.step .where{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-teal);
|
|||
|
|
background:var(--teal-bg);padding:3px 9px;border-radius:999px}
|
|||
|
|
.stepdesc{color:var(--text-muted);font-size:14px;margin-bottom:18px;max-width:66ch}
|
|||
|
|
.stepdesc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--bg-secondary);padding:1px 5px;border-radius:var(--radius-sm)}
|
|||
|
|
|
|||
|
|
/* ---- card shell mirrors SchoolDetailView .card ---- */
|
|||
|
|
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
|
|||
|
|
box-shadow:var(--shadow);padding:26px 26px 24px}
|
|||
|
|
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
|
|||
|
|
.sectionTitle{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.01em}
|
|||
|
|
.sectionSub{color:var(--text-secondary);font-size:14px;margin-bottom:18px}
|
|||
|
|
|
|||
|
|
.seg{display:inline-flex;background:var(--bg-secondary);border-radius:999px;padding:3px;gap:2px;flex:none}
|
|||
|
|
.seg button{appearance:none;border:none;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
|
|||
|
|
color:var(--text-muted);padding:6px 13px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s}
|
|||
|
|
.seg button[aria-pressed="true"]{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow)}
|
|||
|
|
.seg button:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px}
|
|||
|
|
|
|||
|
|
/* ---- tiles ---- */
|
|||
|
|
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:10px;margin-top:4px}
|
|||
|
|
.tile{background:var(--bg-secondary);border-radius:var(--radius-md);padding:14px 15px 13px}
|
|||
|
|
.tile .num{font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.15;letter-spacing:-.01em;display:block}
|
|||
|
|
.tile .num .unit{font-family:var(--sans);font-size:15px;font-weight:600;margin-left:2px}
|
|||
|
|
.tile .num .sub{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--text-muted);margin-top:1px}
|
|||
|
|
.tile .lbl{display:block;font-size:12.5px;color:var(--text-secondary);margin-top:5px;line-height:1.35}
|
|||
|
|
.tile.accent{background:var(--coral-bg)}
|
|||
|
|
.tile.accent .num{color:var(--accent-coral-dark)}
|
|||
|
|
.tile.newtile{background:var(--coral-bg);box-shadow:inset 0 0 0 1.5px var(--accent-coral)}
|
|||
|
|
.tile.newtile .num{color:var(--accent-coral-dark)}
|
|||
|
|
.newflag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
|
|||
|
|
color:var(--accent-coral-dark);background:rgba(224,114,86,.2);padding:1px 6px;border-radius:999px;margin-bottom:6px}
|
|||
|
|
|
|||
|
|
/* ---- verdict banner ---- */
|
|||
|
|
.verdict{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border-radius:var(--radius-md);margin:2px 0 20px}
|
|||
|
|
.verdict.hard{background:var(--coral-bg)}
|
|||
|
|
.verdict .vic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
|
|||
|
|
background:var(--accent-coral-dark);color:#fff;font-size:12px;font-weight:700}
|
|||
|
|
.verdict .vhead{font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--accent-coral-dark);text-wrap:balance}
|
|||
|
|
.verdict .vsub{color:var(--text-secondary);font-size:13.5px;margin-top:3px}
|
|||
|
|
|
|||
|
|
/* ---- chart ---- */
|
|||
|
|
.chartwrap{overflow-x:auto}
|
|||
|
|
.chart{display:block;width:100%;min-width:460px;height:auto}
|
|||
|
|
.axtxt{font-family:var(--sans);font-size:11px;fill:var(--text-muted)}
|
|||
|
|
.ptlbl{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--accent-coral-dark)}
|
|||
|
|
.keyrow{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12.5px;color:var(--text-secondary)}
|
|||
|
|
.keyrow span{display:inline-flex;align-items:center;gap:7px}
|
|||
|
|
.kdot{width:11px;height:11px;border-radius:50%;flex:none}
|
|||
|
|
.kdot.line{background:var(--accent-coral)}
|
|||
|
|
.kdot.open{background:#fff;box-shadow:inset 0 0 0 2px var(--accent-teal)}
|
|||
|
|
.kdot.gap{background:repeating-linear-gradient(90deg,var(--text-muted) 0 2px,transparent 2px 4px);border-radius:0;height:2px}
|
|||
|
|
|
|||
|
|
/* ---- table ---- */
|
|||
|
|
.tblwrap{overflow-x:auto;margin-top:4px}
|
|||
|
|
table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
|
|||
|
|
thead th{text-align:right;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
|
|||
|
|
color:var(--text-muted);padding:0 10px 9px;border-bottom:1px solid var(--border)}
|
|||
|
|
thead th:first-child{text-align:left}
|
|||
|
|
tbody td{text-align:right;padding:11px 10px;border-bottom:1px solid var(--border)}
|
|||
|
|
tbody td:first-child{text-align:left;font-weight:600}
|
|||
|
|
tbody tr:last-child td{border-bottom:none}
|
|||
|
|
tbody tr.now{background:var(--bg-secondary)}
|
|||
|
|
td.miss{color:var(--text-muted);font-weight:400}
|
|||
|
|
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
|
|||
|
|
.pill.over{background:var(--coral-bg);color:var(--accent-coral-dark)}
|
|||
|
|
.pill.ok{background:var(--teal-bg);color:var(--accent-teal)}
|
|||
|
|
.pill.na{background:var(--bg-secondary);color:var(--text-muted)}
|
|||
|
|
|
|||
|
|
/* ---- map ---- */
|
|||
|
|
.mapfig{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:#eef2ec}
|
|||
|
|
.mapsvg{display:block;width:100%;height:auto}
|
|||
|
|
.maplegend{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:12px;font-size:12.5px;color:var(--text-secondary)}
|
|||
|
|
.maplegend span{display:inline-flex;align-items:center;gap:7px}
|
|||
|
|
.swatch{width:14px;height:14px;border-radius:50%;flex:none}
|
|||
|
|
.swatch.now{background:rgba(224,114,86,.18);box-shadow:inset 0 0 0 2px var(--accent-coral)}
|
|||
|
|
.swatch.past{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(176,74,46,.4)}
|
|||
|
|
.swatch.you{background:var(--accent-teal);border-radius:2px;transform:rotate(45deg);width:11px;height:11px}
|
|||
|
|
|
|||
|
|
/* ---- postcode check ---- */
|
|||
|
|
.checkbox{margin-top:20px;border-top:1px solid var(--border);padding-top:18px}
|
|||
|
|
.checkhead{font-weight:700;font-size:15px;margin-bottom:3px}
|
|||
|
|
.checksub{font-size:13.5px;color:var(--text-muted);margin-bottom:12px}
|
|||
|
|
.checkform{display:flex;gap:8px;flex-wrap:wrap}
|
|||
|
|
.checkform input{font:inherit;font-size:15px;padding:10px 13px;border:1px solid var(--border);border-radius:var(--radius-md);
|
|||
|
|
background:var(--bg-card);color:var(--text-primary);min-width:150px;flex:1 1 150px;text-transform:uppercase}
|
|||
|
|
.checkform input:focus-visible{outline:2px solid var(--accent-teal);outline-offset:1px;border-color:var(--accent-teal)}
|
|||
|
|
.checkform button{font:inherit;font-weight:600;font-size:15px;padding:10px 20px;border:none;border-radius:var(--radius-md);
|
|||
|
|
background:var(--accent-coral-dark);color:#fff;cursor:pointer;transition:background .15s}
|
|||
|
|
.checkform button:hover{background:#9c3f26}
|
|||
|
|
.checkform button:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px}
|
|||
|
|
.result{margin-top:14px;background:var(--teal-bg);border-radius:var(--radius-md);padding:15px 17px}
|
|||
|
|
.result .rhead{font-weight:700;font-size:16px;color:var(--accent-teal);letter-spacing:-.01em;text-wrap:balance}
|
|||
|
|
.result .rsub{font-size:13.5px;color:var(--text-secondary);margin-top:4px}
|
|||
|
|
.yearstrip{display:flex;gap:4px;margin-top:12px;flex-wrap:wrap}
|
|||
|
|
.yr{font-size:11px;font-weight:600;padding:3px 7px;border-radius:var(--radius-sm);white-space:nowrap}
|
|||
|
|
.yr.in{background:rgba(45,125,125,.22);color:var(--accent-teal)}
|
|||
|
|
.yr.out{background:var(--coral-bg);color:var(--accent-coral-dark)}
|
|||
|
|
.yr.none{background:var(--bg-secondary);color:var(--text-muted)}
|
|||
|
|
|
|||
|
|
/* ---- notes / disclosure ---- */
|
|||
|
|
.note{display:flex;gap:9px;margin-top:16px;font-size:13px;color:var(--text-muted);line-height:1.55}
|
|||
|
|
.note .i{flex:none;width:17px;height:17px;border-radius:50%;background:var(--bg-secondary);color:var(--text-muted);
|
|||
|
|
font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:2px}
|
|||
|
|
.disclosure{margin-top:16px;border-top:1px solid var(--border);padding-top:4px}
|
|||
|
|
.disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 0;
|
|||
|
|
font-weight:600;font-size:14px;color:var(--accent-teal)}
|
|||
|
|
.disclosure>summary::-webkit-details-marker{display:none}
|
|||
|
|
.disclosure>summary:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px;border-radius:var(--radius-sm)}
|
|||
|
|
.disclosure .chev{transition:transform .2s ease}
|
|||
|
|
.disclosure[open]>summary .chev{transform:rotate(90deg)}
|
|||
|
|
.disclosure .body{padding:2px 0 10px;font-size:13.5px;color:var(--text-secondary);display:flex;flex-direction:column;gap:10px}
|
|||
|
|
.disclosure .body b{color:var(--text-primary)}
|
|||
|
|
|
|||
|
|
/* ---- viewport stack (keeps card height stable across views) ---- */
|
|||
|
|
.viewport{display:grid}
|
|||
|
|
.viewport>.view{grid-area:1/1}
|
|||
|
|
.viewport>.view[hidden]{display:block;visibility:hidden;pointer-events:none}
|
|||
|
|
|
|||
|
|
/* ---- edge cases ---- */
|
|||
|
|
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
|
|||
|
|
.case{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 17px}
|
|||
|
|
.case h3{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
|
|||
|
|
.case .body{font-size:14px;color:var(--text-secondary);line-height:1.5}
|
|||
|
|
.case .body strong{color:var(--text-primary)}
|
|||
|
|
.emptybox{background:var(--bg-secondary);border-radius:var(--radius-md);padding:13px 15px;font-size:13.5px;color:var(--text-secondary)}
|
|||
|
|
|
|||
|
|
/* ---- phone ---- */
|
|||
|
|
.phonerow{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
|
|||
|
|
.phone{width:330px;max-width:100%;border:9px solid #1a1612;border-radius:34px;overflow:hidden;box-shadow:var(--shadow-md);background:var(--bg-primary)}
|
|||
|
|
.phonebody{padding:14px 13px 20px;display:flex;flex-direction:column;gap:12px}
|
|||
|
|
.phone .card{padding:17px 16px 16px;border-radius:var(--radius-md)}
|
|||
|
|
.phone .sectionTitle{font-size:18px}
|
|||
|
|
.phone .tiles{grid-template-columns:1fr 1fr;gap:8px}
|
|||
|
|
.phone .tile{padding:11px 12px}
|
|||
|
|
.phone .tile .num{font-size:22px}
|
|||
|
|
.phone .chart{min-width:0}
|
|||
|
|
.phone .chartwrap{overflow:visible}
|
|||
|
|
.phonenote{font-size:13px;color:var(--text-muted);flex:1 1 240px;min-width:220px}
|
|||
|
|
.phonenote h3{font-family:var(--serif);font-size:17px;color:var(--text-primary);margin-bottom:8px;font-weight:600}
|
|||
|
|
.phonenote ul{padding-left:18px;display:flex;flex-direction:column;gap:7px}
|
|||
|
|
|
|||
|
|
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<div class="wrap">
|
|||
|
|
|
|||
|
|
<div class="pagehead">
|
|||
|
|
<h1>Last distance offered — school detail page</h1>
|
|||
|
|
<p>Adds the final-offer cut-off distance to the existing <b>Admissions</b> card, plus a catchment
|
|||
|
|
view on the map. Data covers one to ten years depending on the school and local authority, so every
|
|||
|
|
screen here is built around partial coverage rather than assuming a full run.</p>
|
|||
|
|
<p>Sample school: <b>Fairlawn Primary School</b>, Lewisham — 8 years of distance data out of 10 years of admissions data.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ============ 1. ADMISSIONS CARD ============ -->
|
|||
|
|
<div class="step">
|
|||
|
|
<h2>1. A distance tile joins the admissions tiles</h2>
|
|||
|
|
<span class="where">SchoolDetailView · #admissions</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="stepdesc">No new section and no new nav entry — the number a parent actually asks for
|
|||
|
|
("how close do we need to live?") sits with the rest of the intake story. The segmented control gains a
|
|||
|
|
third view, <code>Distance</code>.</p>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="cardhead">
|
|||
|
|
<h2 class="sectionTitle">Admissions</h2>
|
|||
|
|
<div class="seg" role="group" aria-label="Admissions view">
|
|||
|
|
<button type="button" aria-pressed="true" data-view="year">This year</button>
|
|||
|
|
<button type="button" aria-pressed="false" data-view="trend">10-year trend</button>
|
|||
|
|
<button type="button" aria-pressed="false" data-view="dist">Distance</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p class="sectionSub">Reception entry, September 2025.</p>
|
|||
|
|
|
|||
|
|
<div class="viewport">
|
|||
|
|
<!-- view: this year -->
|
|||
|
|
<div class="view" id="v-year">
|
|||
|
|
<dl class="tiles">
|
|||
|
|
<div class="tile">
|
|||
|
|
<dd class="num">60</dd><dt class="lbl">Places offered</dt>
|
|||
|
|
</div>
|
|||
|
|
<div class="tile">
|
|||
|
|
<dd class="num">142</dd><dt class="lbl">Wanted it first</dt>
|
|||
|
|
</div>
|
|||
|
|
<div class="tile accent">
|
|||
|
|
<dd class="num">54<span class="sub">of 142 · 38%</span></dd>
|
|||
|
|
<dt class="lbl">Got their first choice</dt>
|
|||
|
|
</div>
|
|||
|
|
<div class="tile newtile">
|
|||
|
|
<span class="newflag">New</span>
|
|||
|
|
<dd class="num">0.31<span class="unit">mi</span><span class="sub">≈ 500 m · 6 min walk</span></dd>
|
|||
|
|
<dt class="lbl">Last distance offered</dt>
|
|||
|
|
</div>
|
|||
|
|
</dl>
|
|||
|
|
<div class="note">
|
|||
|
|
<span class="i" aria-hidden="true">i</span>
|
|||
|
|
<span>The furthest home offered a place once siblings, faith and EHCP priority were applied.
|
|||
|
|
It is not a fixed catchment — it moves every year with the number of applications.</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- view: distance -->
|
|||
|
|
<div class="view" id="v-dist" hidden>
|
|||
|
|
<div class="verdict hard">
|
|||
|
|
<span class="vic" aria-hidden="true">↓</span>
|
|||
|
|
<div>
|
|||
|
|
<div class="vhead">The catchment has halved in nine years</div>
|
|||
|
|
<div class="vsub">0.62 mi in 2016 → 0.31 mi in 2025. Four of the last five years tightened.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chartwrap">
|
|||
|
|
<svg class="chart" viewBox="0 0 700 250" role="img"
|
|||
|
|
aria-label="Last distance offered by year: 0.62 miles in 2016, 0.55 in 2017, not published in 2018, 0.48 in 2019, 0.51 in 2020, 0.44 in 2021, no cut-off needed in 2022, 0.39 in 2023, 0.35 in 2024, 0.31 in 2025.">
|
|||
|
|
<!-- grid -->
|
|||
|
|
<g stroke="#e5dfd5" stroke-width="1">
|
|||
|
|
<line x1="46" y1="30" x2="686" y2="30"/>
|
|||
|
|
<line x1="46" y1="80" x2="686" y2="80"/>
|
|||
|
|
<line x1="46" y1="130" x2="686" y2="130"/>
|
|||
|
|
<line x1="46" y1="180" x2="686" y2="180"/>
|
|||
|
|
</g>
|
|||
|
|
<line x1="46" y1="206" x2="686" y2="206" stroke="#d8d0c3" stroke-width="1.5"/>
|
|||
|
|
<g class="axtxt" text-anchor="end">
|
|||
|
|
<text x="38" y="34">0.8</text><text x="38" y="84">0.6</text>
|
|||
|
|
<text x="38" y="134">0.4</text><text x="38" y="184">0.2</text>
|
|||
|
|
</g>
|
|||
|
|
<text class="axtxt" x="46" y="16" text-anchor="start">miles</text>
|
|||
|
|
|
|||
|
|
<!-- gap segments (dashed = no figure published) -->
|
|||
|
|
<g fill="none" stroke="#6d685f" stroke-width="1.5" stroke-dasharray="4 4" opacity=".55">
|
|||
|
|
<path d="M114 92 L182 110"/>
|
|||
|
|
<path d="M318 122 L386 132.5"/>
|
|||
|
|
</g>
|
|||
|
|
<!-- solid series -->
|
|||
|
|
<polyline fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
|||
|
|
points="46,75 114,92"/>
|
|||
|
|
<polyline fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
|||
|
|
points="182,110 250,102 318,122"/>
|
|||
|
|
<polyline fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
|||
|
|
points="386,132.5 454,142.5 522,152.5"/>
|
|||
|
|
|
|||
|
|
<!-- points -->
|
|||
|
|
<g fill="#e07256" stroke="#fff" stroke-width="2">
|
|||
|
|
<circle cx="46" cy="75" r="5"/><circle cx="114" cy="92" r="5"/>
|
|||
|
|
<circle cx="182" cy="110" r="5"/><circle cx="250" cy="102" r="5"/>
|
|||
|
|
<circle cx="318" cy="122" r="5"/><circle cx="386" cy="132.5" r="5"/>
|
|||
|
|
<circle cx="454" cy="142.5" r="5"/>
|
|||
|
|
</g>
|
|||
|
|
<!-- latest, emphasised -->
|
|||
|
|
<circle cx="522" cy="152.5" r="7.5" fill="#b04a2e" stroke="#fff" stroke-width="2.5"/>
|
|||
|
|
|
|||
|
|
<!-- "no cut-off needed" marker, 2022 -->
|
|||
|
|
<circle cx="352" cy="46" r="6" fill="#fff" stroke="#296f6f" stroke-width="2.5"/>
|
|||
|
|
<text class="axtxt" x="352" y="34" text-anchor="middle" fill="#296f6f" font-weight="600">all offered</text>
|
|||
|
|
<line x1="352" y1="54" x2="352" y2="196" stroke="#296f6f" stroke-width="1.5" stroke-dasharray="3 4" opacity=".45"/>
|
|||
|
|
|
|||
|
|
<!-- endpoint labels -->
|
|||
|
|
<text class="ptlbl" x="46" y="63" text-anchor="start">0.62</text>
|
|||
|
|
<text class="ptlbl" x="530" y="157" text-anchor="start">0.31 mi</text>
|
|||
|
|
|
|||
|
|
<!-- year axis -->
|
|||
|
|
<g class="axtxt" text-anchor="middle">
|
|||
|
|
<text x="46" y="226">2016</text><text x="114" y="226">2017</text>
|
|||
|
|
<text x="182" y="226">2019</text><text x="250" y="226">2020</text>
|
|||
|
|
<text x="318" y="226">2021</text><text x="386" y="226">2023</text>
|
|||
|
|
<text x="454" y="226">2024</text><text x="522" y="226">2025</text>
|
|||
|
|
</g>
|
|||
|
|
<text class="axtxt" x="148" y="243" text-anchor="middle" fill="#6d685f">2018 not published</text>
|
|||
|
|
<text class="axtxt" x="352" y="243" text-anchor="middle" fill="#296f6f">2022 undersubscribed</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="keyrow">
|
|||
|
|
<span><i class="kdot line" aria-hidden="true"></i>Distance of the last place offered</span>
|
|||
|
|
<span><i class="kdot open" aria-hidden="true"></i>No cut-off needed — every applicant offered</span>
|
|||
|
|
<span><i class="kdot gap" aria-hidden="true"></i>Not published by the local authority</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="tblwrap" style="margin-top:22px">
|
|||
|
|
<table>
|
|||
|
|
<caption class="sr-only" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)">Last distance offered by year</caption>
|
|||
|
|
<thead>
|
|||
|
|
<tr><th scope="col">Year</th><th scope="col">Last distance</th><th scope="col">Places</th><th scope="col">Status</th></tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr class="now"><td>2025</td><td>0.31 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
|||
|
|
<tr><td>2024</td><td>0.35 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
|||
|
|
<tr><td>2023</td><td>0.39 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
|||
|
|
<tr><td>2022</td><td class="miss">No cut-off needed</td><td>60</td><td><span class="pill ok">All offered</span></td></tr>
|
|||
|
|
<tr><td>2021</td><td>0.44 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
|||
|
|
<tr><td>2020</td><td>0.51 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
|||
|
|
<tr><td>2019</td><td>0.48 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
|||
|
|
<tr><td>2018</td><td class="miss">—</td><td>60</td><td><span class="pill na">Not published</span></td></tr>
|
|||
|
|
<tr><td>2017</td><td>0.55 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
|||
|
|
<tr><td>2016</td><td>0.62 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<details class="disclosure">
|
|||
|
|
<summary><span class="chev" aria-hidden="true">›</span>What this number does and doesn't tell you</summary>
|
|||
|
|
<div class="body">
|
|||
|
|
<span><b>It is a result, not a rule.</b> It records how far the last successful applicant lived
|
|||
|
|
in a given year. Move one large sibling cohort and the figure shifts.</span>
|
|||
|
|
<span><b>Distance is the final tiebreak.</b> Children in care, EHCP places, siblings and — at faith
|
|||
|
|
schools — the faith criteria are ranked first. A family inside the distance can still miss out.</span>
|
|||
|
|
<span><b>Lewisham measures straight-line distance</b> from home to the school's main gate. Other
|
|||
|
|
authorities use walking routes, which are always longer for the same home.</span>
|
|||
|
|
<span><b>Gaps are normal.</b> An authority may not publish a figure, or the school may not have
|
|||
|
|
needed a distance cut-off that year. Both are shown here rather than hidden.</span>
|
|||
|
|
</div>
|
|||
|
|
</details>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ============ 2. MAP ============ -->
|
|||
|
|
<div class="step">
|
|||
|
|
<h2>2. The cut-off drawn on the map</h2>
|
|||
|
|
<span class="where">SchoolHeroMap · catchment layer</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="stepdesc">"0.31 miles" is abstract until you see it over your own streets. The latest year is a
|
|||
|
|
filled ring; earlier years sit behind it as hairlines, so the tightening reads instantly as a set of
|
|||
|
|
shrinking circles. Straight-line rings only — they're an illustration of the number, not a boundary.</p>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="cardhead" style="margin-bottom:14px">
|
|||
|
|
<h2 class="sectionTitle">Where the last place went</h2>
|
|||
|
|
<div class="seg" role="group" aria-label="Map years">
|
|||
|
|
<button type="button" aria-pressed="true">2025 only</button>
|
|||
|
|
<button type="button" aria-pressed="false">Last 5 years</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<figure class="mapfig">
|
|||
|
|
<svg class="mapsvg" viewBox="0 0 700 400" role="img"
|
|||
|
|
aria-label="Map showing concentric catchment rings around Fairlawn Primary School: 0.62 miles in 2016 shrinking to 0.31 miles in 2025, with a marker for a sample home 0.24 miles away, inside the current ring.">
|
|||
|
|
<rect width="700" height="400" fill="#eef2ec"/>
|
|||
|
|
<!-- park -->
|
|||
|
|
<path d="M470 20 h230 v150 h-160 q-70 -20 -70 -80 z" fill="#dfe9dc"/>
|
|||
|
|
<!-- water -->
|
|||
|
|
<path d="M0 330 q120 -40 250 -10 t260 -20 l190 -30 v130 H0 z" fill="#dbe6ee"/>
|
|||
|
|
<!-- street grid -->
|
|||
|
|
<g stroke="#fff" stroke-width="7" stroke-linecap="round" opacity=".95">
|
|||
|
|
<path d="M-10 90 H710"/><path d="M-10 200 H710"/><path d="M-10 300 H710"/>
|
|||
|
|
<path d="M120 -10 V410"/><path d="M300 -10 V410"/><path d="M470 -10 V410"/><path d="M620 -10 V410"/>
|
|||
|
|
</g>
|
|||
|
|
<g stroke="#fff" stroke-width="3.5" opacity=".8">
|
|||
|
|
<path d="M-10 145 H710"/><path d="M-10 250 H710"/><path d="M210 -10 V410"/><path d="M385 -10 V410"/><path d="M550 -10 V410"/>
|
|||
|
|
</g>
|
|||
|
|
<!-- building blocks -->
|
|||
|
|
<g fill="#e4e2dc" opacity=".85">
|
|||
|
|
<rect x="132" y="102" width="60" height="30" rx="2"/><rect x="222" y="102" width="64" height="30" rx="2"/>
|
|||
|
|
<rect x="132" y="212" width="60" height="26" rx="2"/><rect x="222" y="212" width="64" height="26" rx="2"/>
|
|||
|
|
<rect x="400" y="102" width="56" height="30" rx="2"/><rect x="400" y="212" width="56" height="26" rx="2"/>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- historic rings (hairline) -->
|
|||
|
|
<g fill="none" stroke="#b04a2e" opacity=".38" stroke-width="1.5">
|
|||
|
|
<circle cx="300" cy="200" r="150"/>
|
|||
|
|
<circle cx="300" cy="200" r="126"/>
|
|||
|
|
<circle cx="300" cy="200" r="106"/>
|
|||
|
|
<circle cx="300" cy="200" r="90"/>
|
|||
|
|
</g>
|
|||
|
|
<text class="axtxt" x="300" y="44" text-anchor="middle" fill="#b04a2e" font-weight="600">2016 · 0.62 mi</text>
|
|||
|
|
<!-- current ring -->
|
|||
|
|
<circle cx="300" cy="200" r="75" fill="rgba(224,114,86,.18)" stroke="#e07256" stroke-width="3"/>
|
|||
|
|
<text class="axtxt" x="300" y="118" text-anchor="middle" fill="#b04a2e" font-weight="700" font-size="12.5">2025 · 0.31 mi</text>
|
|||
|
|
|
|||
|
|
<!-- school pin -->
|
|||
|
|
<circle cx="300" cy="200" r="11" fill="#b04a2e" stroke="#fff" stroke-width="3"/>
|
|||
|
|
<text class="axtxt" x="300" y="232" text-anchor="middle" fill="#1a1612" font-weight="700" font-size="12">Fairlawn Primary</text>
|
|||
|
|
|
|||
|
|
<!-- your home -->
|
|||
|
|
<g transform="translate(246,158)">
|
|||
|
|
<rect x="-7" y="-7" width="14" height="14" rx="2" fill="#296f6f" stroke="#fff" stroke-width="2.5" transform="rotate(45)"/>
|
|||
|
|
</g>
|
|||
|
|
<text class="axtxt" x="246" y="140" text-anchor="middle" fill="#296f6f" font-weight="700" font-size="12">Your home · 0.24 mi</text>
|
|||
|
|
</svg>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
<div class="maplegend">
|
|||
|
|
<span><i class="swatch now" aria-hidden="true"></i>2025 cut-off — 0.31 mi</span>
|
|||
|
|
<span><i class="swatch past" aria-hidden="true"></i>Earlier years, 2016–2024</span>
|
|||
|
|
<span><i class="swatch you" aria-hidden="true"></i>Your home</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="checkbox">
|
|||
|
|
<div class="checkhead">Would you have got in?</div>
|
|||
|
|
<p class="checksub">We measure straight-line distance from your postcode, the same way Lewisham does.</p>
|
|||
|
|
<form class="checkform" onsubmit="return false">
|
|||
|
|
<label class="sr-only" for="pc" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)">Your postcode</label>
|
|||
|
|
<input id="pc" type="text" value="SE23 3NA" autocomplete="postal-code" spellcheck="false">
|
|||
|
|
<button type="submit">Check</button>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<div class="result">
|
|||
|
|
<div class="rhead">0.24 miles away — inside the cut-off in all 8 years on record</div>
|
|||
|
|
<div class="rsub">That's 0.07 miles of headroom on 2025, the tightest year so far. 2018 has no published
|
|||
|
|
figure, and in 2022 every applicant was offered a place.</div>
|
|||
|
|
<div class="yearstrip">
|
|||
|
|
<span class="yr in">2016 ✓</span>
|
|||
|
|
<span class="yr in">2017 ✓</span>
|
|||
|
|
<span class="yr none">2018 –</span>
|
|||
|
|
<span class="yr in">2019 ✓</span>
|
|||
|
|
<span class="yr in">2020 ✓</span>
|
|||
|
|
<span class="yr in">2021 ✓</span>
|
|||
|
|
<span class="yr in">2022 ✓</span>
|
|||
|
|
<span class="yr in">2023 ✓</span>
|
|||
|
|
<span class="yr in">2024 ✓</span>
|
|||
|
|
<span class="yr in">2025 ✓</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="note">
|
|||
|
|
<span class="i" aria-hidden="true">!</span>
|
|||
|
|
<span>An indication only. Distance is applied after siblings, faith and EHCP priority, and next year's
|
|||
|
|
cut-off depends on next year's applicants. Always check the school's own admissions policy.</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ============ 3. COVERAGE STATES ============ -->
|
|||
|
|
<div class="step">
|
|||
|
|
<h2>3. Coverage states</h2>
|
|||
|
|
<span class="where">Partial data is the normal case</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="stepdesc">Coverage runs from ten years to none. Each state says something true rather than
|
|||
|
|
falling back on a generic "no data" — the reason a figure is absent is itself useful to a parent.</p>
|
|||
|
|
|
|||
|
|
<div class="cases">
|
|||
|
|
<div class="case">
|
|||
|
|
<h3>4+ years</h3>
|
|||
|
|
<div class="body">Full treatment: verdict banner, chart, table, map rings. <strong>The verdict line only
|
|||
|
|
appears with 4+ points</strong> — below that a two-year swing isn't a trend.</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="case">
|
|||
|
|
<h3>2–3 years</h3>
|
|||
|
|
<div class="body">Tile and table, no verdict banner, single map ring for the latest year.
|
|||
|
|
<strong>"Only 3 years available"</strong> sits under the table.</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="case">
|
|||
|
|
<h3>1 year</h3>
|
|||
|
|
<div class="body">Tile plus one map ring. No <code>Distance</code> tab — the tile and its footnote are
|
|||
|
|
the whole story.</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="case">
|
|||
|
|
<h3>Never oversubscribed</h3>
|
|||
|
|
<div class="body" style="margin-bottom:10px">Not missing data — good news, and it should read that way.</div>
|
|||
|
|
<div class="emptybox"><b style="color:var(--accent-teal)">Everyone who applied was offered a place</b>
|
|||
|
|
in each of the last 6 years, so no distance cut-off was needed.</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="case">
|
|||
|
|
<h3>No data at all</h3>
|
|||
|
|
<div class="body" style="margin-bottom:10px">Replaces the current placeholder text in
|
|||
|
|
<code>SecondarySchoolDetailView.tsx:780</code>.</div>
|
|||
|
|
<div class="emptybox">Lewisham hasn't published cut-off distances for this school.
|
|||
|
|
<a href="#" style="color:var(--accent-teal);font-weight:600">The council's admissions page</a> may list them.</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="case">
|
|||
|
|
<h3>Not distance-ranked</h3>
|
|||
|
|
<div class="body" style="margin-bottom:10px">Grammar and some faith schools rank on test score or faith
|
|||
|
|
practice, so a distance figure would mislead.</div>
|
|||
|
|
<div class="emptybox">Places here are ranked by the entrance test, not by distance.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ============ 4. MOBILE ============ -->
|
|||
|
|
<div class="step">
|
|||
|
|
<h2>4. Mobile</h2>
|
|||
|
|
<span class="where">≤ 640 px</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="stepdesc">Tiles fall to two columns and the distance tile takes the full width beneath them, so the
|
|||
|
|
headline number survives the reflow. The chart drops its table on mobile behind a "See all years" disclosure.</p>
|
|||
|
|
|
|||
|
|
<div class="phonerow">
|
|||
|
|
<div class="phone">
|
|||
|
|
<div class="phonebody">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="cardhead" style="margin-bottom:6px">
|
|||
|
|
<h2 class="sectionTitle">Admissions</h2>
|
|||
|
|
</div>
|
|||
|
|
<p class="sectionSub" style="font-size:13px;margin-bottom:12px">Reception, Sept 2025</p>
|
|||
|
|
<div class="seg" style="margin-bottom:14px">
|
|||
|
|
<button type="button" aria-pressed="true">Year</button>
|
|||
|
|
<button type="button" aria-pressed="false">Trend</button>
|
|||
|
|
<button type="button" aria-pressed="false">Distance</button>
|
|||
|
|
</div>
|
|||
|
|
<dl class="tiles">
|
|||
|
|
<div class="tile"><dd class="num">60</dd><dt class="lbl">Places offered</dt></div>
|
|||
|
|
<div class="tile"><dd class="num">142</dd><dt class="lbl">Wanted it first</dt></div>
|
|||
|
|
</dl>
|
|||
|
|
<div class="tile newtile" style="margin-top:8px">
|
|||
|
|
<span class="newflag">New</span>
|
|||
|
|
<dd class="num" style="font-size:26px">0.31<span class="unit">mi</span>
|
|||
|
|
<span class="sub">≈ 500 m · 6 min walk</span></dd>
|
|||
|
|
<dt class="lbl">Last distance offered, 2025</dt>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h2 class="sectionTitle" style="margin-bottom:12px">Distance</h2>
|
|||
|
|
<div class="verdict hard" style="padding:12px 13px;margin:0 0 14px">
|
|||
|
|
<span class="vic" aria-hidden="true">↓</span>
|
|||
|
|
<div><div class="vhead" style="font-size:15px">Halved in nine years</div>
|
|||
|
|
<div class="vsub" style="font-size:12.5px">0.62 mi → 0.31 mi</div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chartwrap">
|
|||
|
|
<svg class="chart" viewBox="0 0 300 150" role="img" aria-label="Last distance offered falling from 0.62 miles in 2016 to 0.31 miles in 2025.">
|
|||
|
|
<g stroke="#e5dfd5" stroke-width="1">
|
|||
|
|
<line x1="26" y1="20" x2="292" y2="20"/><line x1="26" y1="62" x2="292" y2="62"/><line x1="26" y1="104" x2="292" y2="104"/>
|
|||
|
|
</g>
|
|||
|
|
<g class="axtxt" text-anchor="end" font-size="9">
|
|||
|
|
<text x="21" y="23">0.8</text><text x="21" y="65">0.5</text><text x="21" y="107">0.2</text>
|
|||
|
|
</g>
|
|||
|
|
<path d="M26 55 L64 69" fill="none" stroke="#e07256" stroke-width="2.5" stroke-linecap="round"/>
|
|||
|
|
<path d="M64 69 L102 84" fill="none" stroke="#6d685f" stroke-width="1.5" stroke-dasharray="3 3" opacity=".55"/>
|
|||
|
|
<path d="M102 84 L140 78 L178 95" fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
|
|||
|
|
<path d="M178 95 L216 109" fill="none" stroke="#6d685f" stroke-width="1.5" stroke-dasharray="3 3" opacity=".55"/>
|
|||
|
|
<path d="M216 109 L254 116 L280 120" fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
|
|||
|
|
<g fill="#e07256" stroke="#fff" stroke-width="1.8">
|
|||
|
|
<circle cx="26" cy="55" r="4"/><circle cx="64" cy="69" r="4"/><circle cx="102" cy="84" r="4"/>
|
|||
|
|
<circle cx="140" cy="78" r="4"/><circle cx="178" cy="95" r="4"/><circle cx="216" cy="109" r="4"/><circle cx="254" cy="116" r="4"/>
|
|||
|
|
</g>
|
|||
|
|
<circle cx="280" cy="120" r="6" fill="#b04a2e" stroke="#fff" stroke-width="2"/>
|
|||
|
|
<circle cx="197" cy="30" r="4.5" fill="#fff" stroke="#296f6f" stroke-width="2"/>
|
|||
|
|
<g class="axtxt" font-size="9" text-anchor="middle">
|
|||
|
|
<text x="26" y="132">'16</text><text x="140" y="132">'20</text><text x="280" y="132">'25</text>
|
|||
|
|
</g>
|
|||
|
|
<text class="ptlbl" x="280" y="140" text-anchor="middle" font-size="11">0.31 mi</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<details class="disclosure" style="margin-top:10px">
|
|||
|
|
<summary style="font-size:13px"><span class="chev" aria-hidden="true">›</span>See all 10 years</summary>
|
|||
|
|
</details>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="phonenote">
|
|||
|
|
<h3>Mobile decisions</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Distance tile spans both columns — the number a parent came for shouldn't be a half-width cell.</li>
|
|||
|
|
<li>Chart keeps every year but labels only first, middle and last; the endpoint stays labelled.</li>
|
|||
|
|
<li>Year-by-year table collapses into a disclosure rather than forcing a horizontal scroll.</li>
|
|||
|
|
<li>Map rings reuse the existing full-screen hero map sheet, opened from the tile.</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// Segmented control on the admissions card swaps the stacked views.
|
|||
|
|
document.querySelectorAll('.seg button[data-view]').forEach(function (btn) {
|
|||
|
|
btn.addEventListener('click', function () {
|
|||
|
|
var group = btn.closest('.seg');
|
|||
|
|
group.querySelectorAll('button').forEach(function (b) { b.setAttribute('aria-pressed', String(b === btn)); });
|
|||
|
|
var target = btn.dataset.view === 'dist' ? 'v-dist' : 'v-year';
|
|||
|
|
['v-year', 'v-dist'].forEach(function (id) {
|
|||
|
|
document.getElementById(id).hidden = id !== target;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|