<!DOCTYPE html>
<html>
<head>
<title>Sleeper Live Draft Board</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.pick-row { transition: background-color 0.3s ease; }
.ticker {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.ticker span {
display: inline-block;
padding-left: 100%;
animation: ticker 15s linear infinite;
}
@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body class="bg-gray-900 text-white">
<h1 class="text-4xl font-bold text-center p-4">🏈 Sleeper Live Draft Board</h1>
<!-- On The Clock Banner -->
<div id="on-the-clock" class="text-center bg-yellow-500 text-black font-bold text-2xl py-2 mb-4 rounded shadow-lg">
Loading current pick...
</div>
<!-- Last Picks Ticker -->
<div class="ticker bg-gray-800 text-lg py-2 mb-4">
<span id="last-picks">Loading last picks...</span>
</div>
<div class="overflow-x-auto">
<table class="w-full text-center border-separate border-spacing-y-2">
<thead class="bg-gray-700 uppercase text-sm">
<tr>
<th class="px-4 py-2">Pick</th>
<th class="px-4 py-2">Team</th>
<th class="px-4 py-2">Player</th>
<th class="px-4 py-2">Pos</th>
<th class="px-4 py-2">Bye</th>
</tr>
</thead>
<tbody id="draft-picks"></tbody>
</table>
</div>
<script>
const leagueId = "1180574328982548480";
let draftId = "";
const teamColors = {
ARI: "#97233F", ATL: "#A71930", BAL: "#241773", BUF: "#00338D", CAR: "#0085CA",
CHI: "#0B162A", CIN: "#FB4F14", CLE: "#311D00", DAL: "#003594", DEN: "#FB4F14",
DET: "#0076B6", GB: "#203731", HOU: "#03202F", IND: "#002C5F", JAX: "#006778",
KC: "#E31837", LV: "#000000", LAC: "#0080C6", LAR: "#003594", MIA: "#008E97",
MIN: "#4F2683", NE: "#002244", NO: "#D3BC8D", NYG: "#0B2265", NYJ: "#125740",
PHI: "#004C54", PIT: "#FFB612", SF: "#AA0000", SEA: "#002244", TB: "#D50A0A",
TEN: "#4B92DB", WAS: "#5A1414"
};
async function getDraftId() {
const res = await fetch(`https://api.sleeper.app/v1/league/${leagueId}/drafts`);
const drafts = await res.json();
if (drafts.length > 0) draftId = drafts[0].draft_id;
}
async function loadDraftPicks() {
if (!draftId) return;
const res = await fetch(`https://api.sleeper.app/v1/draft/${draftId}/picks`);
const picks = await res.json();
const usersRes = await fetch(`https://api.sleeper.app/v1/league/${leagueId}/users`);
const users = await usersRes.json();
const userMap = {};
users.forEach(u => userMap[u.user_id] = u.display_name);
const table = document.getElementById("draft-picks");
table.innerHTML = "";
// Last picks ticker
const last5 = picks.filter(p => p.player_id).slice(-5).reverse().map(p => {
return `${p.pick_no}: ${p.metadata.first_name} ${p.metadata.last_name} (${p.metadata.position})`;
}).join(" | ");
document.getElementById("last-picks").textContent = last5 || "No picks yet";
// On the clock banner
const nextPick = picks.find(p => !p.player_id);
if (nextPick) {
document.getElementById("on-the-clock").textContent =
`${userMap[nextPick.owner_id] || "Unknown Team"} is ON THE CLOCK!`;
} else {
document.getElementById("on-the-clock").textContent = "Draft Complete";
}
// Full table display
picks.forEach(pick => {
if (!pick.player_id) return;
const teamAbbr = pick.metadata.team || "";
const bgColor = teamColors[teamAbbr] || "#374151";
const headshot = pick.metadata.headshot || `https://sleepercdn.com/content/nfl/players/${pick.player_id}.jpg`;
table.innerHTML += `
<tr class="pick-row text-white rounded-lg shadow-lg" style="background-color:${bgColor}">
<td class="px-4 py-3 font-bold text-lg">${pick.pick_no}</td>
<td class="px-4 py-3">${userMap[pick.owner_id] || ""}</td>
<td class="px-4 py-3 flex items-center justify-center gap-2">
<img src="${headshot}" alt="${pick.metadata.first_name}" class="w-10 h-10 rounded-full border border-white">
${pick.metadata.first_name || ""} ${pick.metadata.last_name || ""}
</td>
<td class="px-4 py-3 font-bold">${pick.metadata.position || ""}</td>
<td class="px-4 py-3">${pick.metadata.bye || ""}</td>
</tr>
`;
});
}
async function init() {
await getDraftId();
loadDraftPicks();
setInterval(loadDraftPicks, 5000);
}
init();
</script>
</body>
</html>