ETFL Stat Book

/* Layout: crest header band, leader strip, then one tabbed stat table (All-Time / By Season) with a player drill-down panel */
:root{
–paper:#FBFAF8; –surface:#FFFFFF; –ink:#16130F; –muted:#6B645C; –line:#E6E1DA; –band:#F4F1ED;
–red:#D2161E; –red-ink:#B3121A; –red-soft:#FCE9E9; –leather:#7A4A24;
–display:”Graduate”,”Rockwell”,”Georgia”,serif;
–body:”Barlow”,system-ui,-apple-system,”Segoe UI”,sans-serif;
–num:”Barlow Condensed”,”Arial Narrow”,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme=”light”]){
–paper:#141210; –surface:#1C1916; –ink:#F2EEE9; –muted:#A49B91; –line:#332E29; –band:#211E1A;
–red:#F0484E; –red-ink:#FF6B70; –red-soft:#3A1A1B; –leather:#C08A5C; color-scheme:dark}}
:root[data-theme=”dark”]{
–paper:#141210; –surface:#1C1916; –ink:#F2EEE9; –muted:#A49B91; –line:#332E29; –band:#211E1A;
–red:#F0484E; –red-ink:#FF6B70; –red-soft:#3A1A1B; –leather:#C08A5C; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(–paper);color:var(–ink);font-family:var(–body);font-size:15px;line-height:1.45}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:20px 48px}
header.top{display:flex;align-items:center;gap:18px;padding-block:8px 18px;border-bottom:3px solid var(–red)}
header.top img{width:76px;height:76px;flex:none;border-radius:50%;background:#fff}
header.top h1{font-family:var(–display);font-weight:400;font-size:clamp(22px,4.5vw,34px);line-height:1.05;margin:0;letter-spacing:.01em;text-wrap:balance}
header.top p{margin:4px 0 0;color:var(–muted);font-size:14px}
.leaders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-block:20px}
.leader{background:var(–surface);border:1px solid var(–line);padding:12px 14px;min-width:0}
.leader .k{font-family:var(–num);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(–muted)}
.leader .v{font-family:var(–num);font-weight:700;font-size:34px;line-height:1;color:var(–red);font-variant-numeric:tabular-nums;margin-top:4px}
.leader .n{font-weight:600;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){.leaders{grid-template-columns:repeat(2,minmax(0,1fr))}}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-block:8px 12px}
.tabs{display:flex;border:1px solid var(–ink)}
.tabs button{font:600 14px var(–num);letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border:0;background:transparent;color:var(–ink);cursor:pointer}
.tabs button[aria-selected=”true”]{background:var(–ink);color:var(–paper)}
.controls input,.controls select{font:inherit;padding:7px 10px;border:1px solid var(–line);background:var(–surface);color:var(–ink);min-width:0}
.controls input{flex:1 1 200px}
:focus-visible{outline:2px solid var(–red);outline-offset:2px}
.count{color:var(–muted);font-size:13px;margin-left:auto}
.tablebox{overflow-x:auto;border:1px solid var(–line);background:var(–surface)}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;text-align:center;white-space:nowrap}
th{font-family:var(–num);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;background:var(–band);color:var(–muted);cursor:pointer;user-select:none;position:sticky;top:0}
th.sorted{color:var(–red-ink)}
th.sorted::after{content:” ▾”} th.sorted.asc::after{content:” ▴”}
td{border-top:1px solid var(–line)}
td.l,th.l{text-align:left}
td.pts{font-weight:700;font-family:var(–num);font-size:17px}
td.rank{color:var(–muted);font-family:var(–num);width:3em}
tr.top3 td.rank{color:var(–red);font-weight:700}
td.dim{color:var(–muted)}
button.player{all:unset;cursor:pointer;font-weight:600;border-bottom:1px dotted var(–muted)}
button.player:hover{color:var(–red-ink);border-color:var(–red)}
tr.seasonbreak td{background:var(–band);font-family:var(–display);text-align:left;font-size:15px;padding-block:10px;color:var(–ink)}
.chip{display:inline-block;font-size:12px;padding:1px 7px;border:1px solid var(–line);margin:1px 2px 1px 0;color:var(–muted)}
.panel{margin-bottom:16px;border:1px solid var(–line);border-top:3px solid var(–red);background:var(–surface);padding:16px}
.panel h2{font-family:var(–display);font-weight:400;font-size:22px;margin:0 0 4px}
.panel .sub{color:var(–muted);margin-bottom:12px}
.panel .close{float:right;font:600 13px var(–num);letter-spacing:.06em;text-transform:uppercase;background:none;border:1px solid var(–line);color:var(–ink);padding:5px 10px;cursor:pointer}
.bars{display:flex;align-items:flex-end;gap:10px;height:120px;margin:8px 0 16px;padding-bottom:4px;border-bottom:1px solid var(–line)}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.bar span.b{width:100%;max-width:46px;background:var(–leather);display:block}
.bar span.b.best{background:var(–red)}
.bar .val{font-family:var(–num);font-weight:700;font-size:14px}
.bar .lab{font-size:11px;color:var(–muted);margin-top:4px;text-align:center;white-space:nowrap}
.sections{display:flex;gap:0;margin-block:18px 4px;border-bottom:1px solid var(–line)}
.sections button{font:400 17px var(–display);background:none;border:0;border-bottom:3px solid transparent;color:var(–muted);padding:8px 14px;cursor:pointer;margin-bottom:-1px}
.sections button[aria-pressed=”true”]{color:var(–ink);border-bottom-color:var(–red)}
.champs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-block:20px}
@media (max-width:820px){.champs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:460px){.champs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.champ{background:var(–surface);border:1px solid var(–line);border-top:3px solid var(–red);padding:10px 12px;min-width:0}
.champ .k{font-family:var(–num);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(–muted)}
.champ .t{font-family:var(–display);font-size:20px;margin-top:2px}
.champ .q{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.champ .s{font-size:12px;color:var(–muted)}
tr.champrow td{background:var(–red-soft)}
.cup{color:var(–red);font-weight:700;font-family:var(–num);letter-spacing:.04em}
footer{margin-top:24px;color:var(–muted);font-size:13px;max-width:70ch}
footer p{margin:6px 0}

ETFL Stat Book

Player stats, standings and QB records, Spring 2023 to Spring 2026

const fmt = v => v===null||v===undefined ? “–” : (Number.isInteger(v) ? v : v.toFixed(1));
const esc = s => String(s).replace(/[&”]/g, c => ({“&”:”&”,””:”>”,’”‘:”"”}[c]));

// leaders
function leader(label, key, unit){
const best = […players].sort((a,b)=>b[key]-a[key] || b.pts-a.pts)[0];
return `

${label}

${fmt(best[key])}

${esc(best.name)}

`;
}
const bestSeason = […recs].sort((a,b)=>b.pts-a.pts)[0];
document.getElementById(“leaders”).innerHTML =
leader(“All-time points”,”pts”) + leader(“All-time touchdowns”,”td”) + leader(“All-time interceptions”,”int”) +
`

Best single season

${bestSeason.pts}

${esc(bestSeason.name)}

${bestSeason.season}

function render(){
const cols = COLS[state.view];
const thead = document.querySelector(“#tbl thead”), tbody = document.querySelector(“#tbl tbody”);
thead.innerHTML = “

” + cols.map(([k,l,c]) => k===”rank” ? `

${l}

` :
`

${l}

`).join(“”) + “

“;
let html = “”, n = 0;
if (state.view === “all”){
// rank by points regardless of sort, ties share a rank
const ranked = […players].sort((a,b)=>b.pts-a.pts); let prev=null, rk=0;
ranked.forEach((p,i)=>{ if(p.pts!==prev){rk=i+1;prev=p.pts;} p.rank=rk; });
for (const p of sorted(players).filter(match)){
n++;
html += `<tr class="${p.rank

${p.rank} ${p.n} ${p.teams.map(t=>`${esc(t)}`).join(“”)} ${p.td} ${fmt(p.fg)} ${fmt(p.xp)} ${fmt(p.int)} ${fmt(p.sck)} ${fmt(p.saf)} ${fmt(p.pts)} ${fmt(p.ppg)}

`;
}
} else {
let list = recs.filter(r => (state.season===”all” || r.season===state.season) && match(r));
list = sorted(list);
const grouped = true;
list.sort((a,b)=>SEASONS.indexOf(a.season)-SEASONS.indexOf(b.season));
let cur = null;
for (const r of list){
n++;
if (grouped && r.season !== cur){ cur = r.season; html += `

${cur}

`; }
html += `

${esc(r.team)} ${r.td} ${fmt(r.fg)} ${fmt(r.xp)} ${fmt(r.int)} ${fmt(r.sck)} ${fmt(r.saf)} ${fmt(r.pts)}

`;
}
}
tbody.innerHTML = html || `

No players match “${esc(state.q)}”.

`;
document.getElementById(“count”).textContent = state.view===”all” ? `${n} players` : `${n} player-seasons`;
}

function showPlayer(name){
const p = byPlayer.get(name); if (!p) return;
const max = Math.max(…p.seasons.map(s=>s.pts), 1);
const bars = SEASONS.map(s => {
const r = p.seasons.find(x=>x.season===s);
const h = r ? Math.max(2, r.pts/max*86) : 0;
return `

${r?r.pts:””}0?”best”:””}” style=”height:${h}px”>${s.replace(” 20″,” ‘”)}

`;
}).join(“”);
const rows = p.seasons.map(r=>`

${r.season} ${esc(r.team)} ${r.td} ${fmt(r.fg)} ${fmt(r.xp)} ${fmt(r.int)} ${fmt(r.sck)} ${fmt(r.saf)} ${fmt(r.pts)}

`).join(“”);
document.getElementById(“panel”).innerHTML = `

${esc(name)}

${p.seasons.length} season${p.seasons.length>1?”s”:””} · ${p.td} TD · ${fmt(p.pts)} points · ${p.teams.join(“, “)}

${rows}

Season	Team	TD	FG	Convert	INT	Sacks	Safety	Points
Career		${p.td}	${fmt(p.fg)}	${fmt(p.xp)}	${fmt(p.int)}	${fmt(p.sck)}	${fmt(p.saf)}	${fmt(p.pts)}

`;
document.getElementById(“close-panel”).onclick = () => { document.getElementById(“panel”).innerHTML = “”; };
document.getElementById(“panel”).scrollIntoView({behavior: matchMedia(“(prefers-reduced-motion: reduce)”).matches ? “auto” : “smooth”, block:”start”});
}

// —- Teams & QBs —-
const pct = (w,l,t) => (w+l+t) ? ((w+.5*t)/(w+l+t)).toFixed(3).replace(/^0/,””) : “–”;
const rec = (w,l,t) => `${w}-${l}${t?”-“+t:””}`;
document.getElementById(“champs”).innerHTML = TD.champs.map(c=>`

${c.season}

${esc(c.champ)}

${esc(c.qb)}

Beat ${esc(c.runner)} ${c.score}

`).join(“”);
const tsel = document.getElementById(“tseason”);
tsel.innerHTML = SEASONS.map(s=>`${s}`).join(“”);
const tstate = {view:”standings”, season:SEASONS.at(-1)};
function agg(key, other){
const m = new Map();
for (const t of TD.teamseasons){
let a = m.get(t[key]); if(!a){a={name:t[key],seasons:0,w:0,l:0,t:0,pf:0,pa:0,pw:0,pl:0,pt:0,ch:[],other:[]}; m.set(t[key],a);}
a.seasons++; for (const k of [“w”,”l”,”t”,”pf”,”pa”,”pw”,”pl”,”pt”]) a[k]+=t[k];
if (t.champ) a.ch.push(t.season); if(!a.other.includes(t[other])) a.other.push(t[other]);
}
return […m.values()].sort((a,b)=>b.ch.length-a.ch.length || pct(b.w,b.l,b.t)-pct(a.w,a.l,a.t) || b.w-a.w);
}
function trender(){
const tb = document.getElementById(“ttbl”); tsel.hidden = tstate.view!==”standings”;
let h=””;
if (tstate.view===”standings”){
const rows = TD.teamseasons.filter(t=>t.season===tstate.season).sort((a,b)=>a.rank-b.rank);
h = `

# Team QB W L T Win % PF PA PD Playoffs `+
rows.map(t=>`

${t.rank} ${esc(t.team)} ${esc(t.qb)} ${t.w} ${t.l} ${t.t} ${pct(t.w,t.l,t.t)} ${t.pf} ${t.pa} ${t.pd>0?”+”:””}${t.pd} ${rec(t.pw,t.pl,t.pt)} ${t.champ?’CHAMPION‘:””}

`).join(“”)+”

“;
} else {
const qb = tstate.view===”qbs”, list = agg(qb?”qb”:”team”, qb?”team”:”qb”);
h = `

${qb?”Quarterback”:”Team”} Seasons Reg. Record Win % Playoffs Total

${qb?””:”

PF PA

“}

Titles ${qb?”Teams”:”QBs”} `+
list.map(a=>`

${esc(a.name)} ${a.seasons} ${rec(a.w,a.l,a.t)} ${pct(a.w,a.l,a.t)} ${rec(a.pw,a.pl,a.pt)} ${rec(a.w+a.pw,a.l+a.pl,a.t+a.pt)}

${qb?””:`

${a.pf} ${a.pa}

${a.ch.length?`${a.ch.length} ${a.ch.map(s=>s.replace(” 20″,” ‘”)).join(“, “)}`:”–”} ${a.other.map(o=>`${esc(o)}`).join(“”)}

`).join(“”)+”

“;
}
tb.innerHTML = h;
}
document.getElementById(“ttabs”).addEventListener(“click”, e=>{ const b=e.target.closest(“button”); if(!b) return; tstate.view=b.dataset.tv; document.querySelectorAll(“#ttabs button”).forEach(x=>x.setAttribute(“aria-selected”, x===b)); trender(); });
tsel.addEventListener(“change”, e=>{ tstate.season=e.target.value; trender(); });
document.querySelector(“.sections”).addEventListener(“click”, e=>{ const b=e.target.closest(“button”); if(!b) return;
document.querySelectorAll(“.sections button”).forEach(x=>x.setAttribute(“aria-pressed”, x===b));
document.getElementById(“players-sec”).hidden = b.dataset.sec!==”players”; document.getElementById(“teams-sec”).hidden = b.dataset.sec!==”teams”; });
if (location.hash===”#teams”) document.getElementById(“sec-teams”).click();
trender();

Statistics

${esc(name)}