Sports Picks Tracker<\/title>\n <style>\n :root{\n --bg:#0b0f17; --text:#e9eefb; --muted:#9fb0d0; --good:#28d17c; --bad:#ff4d4d; --warn:#f7c948;\n --shadow: 0 12px 30px rgba(0,0,0,.35); --radius:16px;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n background: radial-gradient(1200px 600px at 20% -10%, rgba(43,108,255,.28), transparent 55%),\n radial-gradient(800px 500px at 90% 10%, rgba(40,209,124,.18), transparent 50%),\n var(--bg);\n color:var(--text);\n }\n header{ padding: 22px 16px 10px; max-width: 1100px; margin: 0 auto; }\n .title{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:space-between; }\n .title h1{ margin:0; font-size: 22px; letter-spacing: .3px; }\n .sub{ margin:8px 0 0; color:var(--muted); font-size: 13px; line-height: 1.4; }\n main{ max-width: 1100px; margin: 0 auto; padding: 10px 16px 40px; display:grid; grid-template-columns: 380px 1fr; gap: 14px; }\n @media (max-width: 980px){ main{ grid-template-columns: 1fr; } }\n\n .card{\n background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));\n border: 1px solid rgba(255,255,255,.08);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow:hidden;\n }\n .card .hd{ padding: 14px 14px 10px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }\n .card .hd strong{ font-size: 14px; letter-spacing: .2px; }\n .card .bd{ padding: 14px; }\n\n .grid{ display:grid; gap:10px; grid-template-columns: 1fr 1fr; }\n label{ display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }\n input, select, button{\n width:100%; padding: 10px 10px; border-radius: 12px;\n border: 1px solid rgba(255,255,255,.10);\n background: rgba(0,0,0,.22);\n color: var(--text);\n outline:none;\n }\n input::placeholder{ color: rgba(159,176,208,.65); }\n input:focus, select:focus{\n border-color: rgba(43,108,255,.6);\n box-shadow: 0 0 0 4px rgba(43,108,255,.14);\n }\n .row{ display:flex; gap:10px; align-items:center; }\n .row > *{ flex:1; }\n .btn{\n background: linear-gradient(180deg, rgba(43,108,255,1), rgba(20,80,210,1));\n border: 1px solid rgba(255,255,255,.14);\n cursor:pointer;\n font-weight: 650;\n }\n .btn:hover{ filter: brightness(1.05); }\n .btn.secondary{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); font-weight: 600; }\n .btn.danger{ background: rgba(255,77,77,.14); border: 1px solid rgba(255,77,77,.22); color: #ffd4d4; }\n .pillbar{ display:flex; gap:10px; flex-wrap:wrap; }\n .pill{ padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); font-size: 12px; color: var(--muted); }\n .pill b{ color: var(--text); }\n .split{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }\n\n .tablewrap{ overflow:auto; }\n table{ width:100%; border-collapse: collapse; min-width: 860px; }\n th, td{ text-align:left; padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: middle; font-size: 13px; }\n th{\n position: sticky; top: 0;\n background: rgba(0,0,0,.26);\n backdrop-filter: blur(6px);\n z-index: 2;\n color: var(--muted);\n font-weight: 650;\n font-size: 12px;\n letter-spacing: .2px;\n }\n .team{ display:flex; align-items:center; gap:10px; min-width: 240px; }\n .logo{ width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); padding: 2px; }\n .vs{ color: var(--muted); font-weight: 700; letter-spacing: .4px; margin: 0 6px; }\n .pickbadge{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); color: var(--text); font-size: 12px; font-weight: 650; }\n .status{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); font-size: 12px; font-weight: 700; }\n .status.win{ border-color: rgba(40,209,124,.35); background: rgba(40,209,124,.12); color: #c8ffe2; }\n .status.loss{ border-color: rgba(255,77,77,.35); background: rgba(255,77,77,.12); color: #ffd4d4; }\n .status.pending{ border-color: rgba(247,201,72,.35); background: rgba(247,201,72,.10); color: #fff1c2; }\n .tiny{ font-size: 12px; color: var(--muted); }\n .actions{ display:flex; gap:8px; flex-wrap:wrap; min-width: 320px; }\n .actions button{ padding: 8px 10px; border-radius: 12px; }\n .note{ font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 10px; }\n .footer{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }\n\n \/* Modal *\/\n .modal-overlay{\n position: fixed; inset: 0; background: rgba(0,0,0,.55);\n display:none; align-items:center; justify-content:center;\n padding: 16px; z-index: 50;\n }\n .modal{\n width: min(720px, 100%);\n border-radius: 18px;\n border: 1px solid rgba(255,255,255,.10);\n background: rgba(10,14,22,.92);\n box-shadow: var(--shadow);\n overflow:hidden;\n }\n .modal .mhd{\n padding: 14px 14px 10px;\n background: rgba(0,0,0,.18);\n border-bottom: 1px solid rgba(255,255,255,.08);\n display:flex; align-items:center; justify-content:space-between; gap:10px;\n }\n .modal .mhd strong{ font-size: 14px; }\n .modal .mbd{ padding: 14px; }\n .iconbtn{\n width:auto; padding: 8px 10px;\n background: rgba(255,255,255,.06);\n border: 1px solid rgba(255,255,255,.10);\n cursor:pointer; border-radius: 12px;\n }\n .muteline{ color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 6px; }\n <\/style>\n\n\n\n<header>\n <div class=\"title\">\n <h1>Sports Picks Tracker<\/h1>\n <div class=\"pillbar\" id=\"summaryPills\"><\/div>\n <\/div>\n <p class=\"sub\">\n Add your picks for the day, then update each game later as a <b>Win \u2705<\/b> or <b>Loss \u274c<\/b>.\n Everything saves in your browser automatically (localStorage).\n <\/p>\n<\/header>\n\n<main>\n \n <section class=\"card\">\n <div class=\"hd\"><strong id=\"formTitle\">Add a Pick<\/strong><\/div>\n <div class=\"bd\">\n <div class=\"grid\">\n <div>\n <label for=\"sport\">Sport\/League (optional)<\/label>\n <input id=\"sport\" placeholder=\"NFL, NBA, NCAA, EPL...\">\n <\/div>\n <div>\n <label for=\"date\">Date<\/label>\n <input id=\"date\" type=\"date\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"teamA\">Team A<\/label>\n <input id=\"teamA\" placeholder=\"Miami Hurricanes\">\n <\/div>\n <div>\n <label for=\"teamB\">Team B<\/label>\n <input id=\"teamB\" placeholder=\"Florida State\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"logoA\">Team A Logo URL (optional)<\/label>\n <input id=\"logoA\" placeholder=\"https:\/\/...\/logo.png\">\n <\/div>\n <div>\n <label for=\"logoB\">Team B Logo URL (optional)<\/label>\n <input id=\"logoB\" placeholder=\"https:\/\/...\/logo.png\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"pick\">Your Pick<\/label>\n <select id=\"pick\">\n <option value=\"A\">Pick Team A<\/option>\n <option value=\"B\">Pick Team B<\/option>\n <\/select>\n <\/div>\n <div>\n <label for=\"notes\">Notes (optional)<\/label>\n <input id=\"notes\" placeholder=\"Spread, confidence, injuries, etc.\">\n <\/div>\n <\/div>\n\n <div style=\"height:12px\"><\/div>\n\n <div class=\"row\">\n <button class=\"btn\" id=\"addBtn\" type=\"button\">Add Pick<\/button>\n <button class=\"btn secondary\" id=\"clearDayBtn\" type=\"button\" title=\"Deletes picks for selected date only\">Clear Day<\/button>\n <\/div>\n\n <div class=\"footer\">\n <button class=\"btn secondary\" id=\"exportBtn\" type=\"button\" title=\"Download as JSON file\">Export<\/button>\n <button class=\"btn secondary\" id=\"importBtn\" type=\"button\" title=\"Import from JSON file\">Import<\/button>\n <input id=\"importFile\" type=\"file\" accept=\"application\/json\" style=\"display:none\">\n <button class=\"btn danger\" id=\"wipeAllBtn\" type=\"button\" title=\"Deletes everything stored in this browser\">Wipe All<\/button>\n <\/div>\n\n <div class=\"note\">\n If your blog platform blocks inline JS, this version is safe: it uses <b>event listeners (no inline onclick)<\/b> so Delete\/Wipe work everywhere.\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"card\">\n <div class=\"hd\">\n <div class=\"split\">\n <strong>Today\u2019s Picks<\/strong>\n <div class=\"row\" style=\"max-width:460px\">\n <input id=\"search\" placeholder=\"Search teams \/ notes...\">\n <select id=\"filterStatus\" title=\"Filter by status\">\n <option value=\"all\">All<\/option>\n <option value=\"pending\">Pending<\/option>\n <option value=\"win\">Wins<\/option>\n <option value=\"loss\">Losses<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"tiny\" id=\"dayLabel\" style=\"margin-top:8px\"><\/div>\n <\/div>\n\n <div class=\"bd tablewrap\">\n <table>\n <thead>\n <tr>\n <th style=\"width:140px;\">League<\/th>\n <th>Matchup<\/th>\n <th style=\"width:170px;\">Your Pick<\/th>\n <th style=\"width:140px;\">Result<\/th>\n <th style=\"width:380px;\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"rows\"><\/tbody>\n <\/table>\n <\/div>\n <\/section>\n<\/main>\n\n\n<div class=\"modal-overlay\" id=\"modalOverlay\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"modal\">\n <div class=\"mhd\">\n <strong>Edit Pick<\/strong>\n <button class=\"iconbtn\" id=\"closeModalBtn\" type=\"button\">\u2715<\/button>\n <\/div>\n <div class=\"mbd\">\n <div class=\"grid\">\n <div>\n <label for=\"mSport\">Sport\/League<\/label>\n <input id=\"mSport\" placeholder=\"NFL, NBA, NCAA, EPL...\">\n <\/div>\n <div>\n <label for=\"mDate\">Date<\/label>\n <input id=\"mDate\" type=\"date\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"mTeamA\">Team A<\/label>\n <input id=\"mTeamA\">\n <\/div>\n <div>\n <label for=\"mTeamB\">Team B<\/label>\n <input id=\"mTeamB\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"mLogoA\">Team A Logo URL<\/label>\n <input id=\"mLogoA\" placeholder=\"https:\/\/...\/logo.png\">\n <\/div>\n <div>\n <label for=\"mLogoB\">Team B Logo URL<\/label>\n <input id=\"mLogoB\" placeholder=\"https:\/\/...\/logo.png\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"mPick\">Your Pick<\/label>\n <select id=\"mPick\">\n <option value=\"A\">Pick Team A<\/option>\n <option value=\"B\">Pick Team B<\/option>\n <\/select>\n <\/div>\n <div>\n <label for=\"mNotes\">Notes<\/label>\n <input id=\"mNotes\" placeholder=\"Spread, confidence, injuries, etc.\">\n <\/div>\n <\/div>\n\n <div style=\"height:12px\"><\/div>\n\n <div class=\"row\">\n <button class=\"btn\" id=\"saveEditBtn\" type=\"button\">Save Changes<\/button>\n <button class=\"btn secondary\" id=\"cancelEditBtn\" type=\"button\">Cancel<\/button>\n <\/div>\n <div class=\"muteline\">Tip: results (Win\/Loss) stay attached to this pick unless you change the date filter and move it.<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n(function(){\n const $ = (id)=>document.getElementById(id);\n\n const STORAGE_KEY = \"sports_picks_tracker_v2\";\n const todayISO = new Date().toISOString().slice(0,10);\n\n const els = {\n sport: $(\"sport\"),\n date: $(\"date\"),\n teamA: $(\"teamA\"),\n teamB: $(\"teamB\"),\n logoA: $(\"logoA\"),\n logoB: $(\"logoB\"),\n pick: $(\"pick\"),\n notes: $(\"notes\"),\n addBtn: $(\"addBtn\"),\n clearDayBtn: $(\"clearDayBtn\"),\n wipeAllBtn: $(\"wipeAllBtn\"),\n rows: $(\"rows\"),\n summaryPills: $(\"summaryPills\"),\n dayLabel: $(\"dayLabel\"),\n search: $(\"search\"),\n filterStatus: $(\"filterStatus\"),\n exportBtn: $(\"exportBtn\"),\n importBtn: $(\"importBtn\"),\n importFile: $(\"importFile\"),\n\n modalOverlay: $(\"modalOverlay\"),\n closeModalBtn: $(\"closeModalBtn\"),\n cancelEditBtn: $(\"cancelEditBtn\"),\n saveEditBtn: $(\"saveEditBtn\"),\n mSport: $(\"mSport\"),\n mDate: $(\"mDate\"),\n mTeamA: $(\"mTeamA\"),\n mTeamB: $(\"mTeamB\"),\n mLogoA: $(\"mLogoA\"),\n mLogoB: $(\"mLogoB\"),\n mPick: $(\"mPick\"),\n mNotes: $(\"mNotes\")\n };\n\n \/\/ init date\n els.date.value = todayISO;\n\n let currentEditId = null;\n\n function loadData(){\n try{ return JSON.parse(localStorage.getItem(STORAGE_KEY) || \"[]\"); }\n catch(e){ return []; }\n }\n function saveData(items){\n localStorage.setItem(STORAGE_KEY, JSON.stringify(items));\n }\n function uid(){\n return Math.random().toString(16).slice(2) + Date.now().toString(16);\n }\n function safeText(s){ return (s || \"\").toString().trim(); }\n function isValidLogo(url){\n if(!url) return false;\n try{ const u = new URL(url); return \/^https?:\/.test(u.protocol); }\n catch(e){ return false; }\n }\n function escapeHtml(str){\n return (str ?? \"\").toString()\n .replaceAll(\"&\", \"&\")\n .replaceAll(\"<\", \"<\")\n .replaceAll(\">\", \">\")\n .replaceAll('\"', \""\")\n .replaceAll(\"'\", \"'\");\n }\n function computeStatus(item){\n if(!item.resultWinner) return \"pending\";\n return item.resultWinner === item.pick ? \"win\" : \"loss\";\n }\n function getSelectedDate(){ return els.date.value || todayISO; }\n\n function filteredForDay(allItems){\n const d = getSelectedDate();\n const q = safeText(els.search.value).toLowerCase();\n const f = els.filterStatus.value;\n\n return allItems\n .filter(it => it.date === d)\n .filter(it => {\n if(!q) return true;\n const hay = `${it.sport} ${it.teamA} ${it.teamB} ${it.notes}`.toLowerCase();\n return hay.includes(q);\n })\n .filter(it => (f === \"all\") ? true : (computeStatus(it) === f))\n .sort((a,b)=> (a.createdAt||0) - (b.createdAt||0));\n }\n\n function summaryForDay(allItems){\n const dayItems = allItems.filter(it => it.date === getSelectedDate());\n let wins=0, losses=0, pending=0;\n for(const it of dayItems){\n const st = computeStatus(it);\n if(st===\"win\") wins++;\n else if(st===\"loss\") losses++;\n else pending++;\n }\n const decided = wins + losses;\n const pct = decided ? Math.round((wins\/decided)*100) : 0;\n return { wins, losses, pending, pct, totalPicks: dayItems.length };\n }\n\n function renderPills(allItems){\n const d = getSelectedDate();\n const s = summaryForDay(allItems);\n els.summaryPills.innerHTML = `\n <div class=\"pill\">Date: <b>${d}\n <div class=\"pill\">Picks: <b>${s.totalPicks}\n <div class=\"pill\">Wins: <b style=\"color:var(--good)\">${s.wins}\n <div class=\"pill\">Losses: <b style=\"color:var(--bad)\">${s.losses}\n <div class=\"pill\">Pending: <b style=\"color:var(--warn)\">${s.pending}\n <div class=\"pill\">Win %: <b>${s.pct}%\n `;\n els.dayLabel.textContent = `Showing picks for ${d} \u2022 Record (decided only): ${s.wins}-${s.losses}`;\n }\n\n function renderTable(allItems){\n const items = filteredForDay(allItems);\n els.rows.innerHTML = items.map(it => {\n const st = computeStatus(it);\n const statusLabel = st === \"win\" ? \"\u2705 WIN\" : st === \"loss\" ? \"\u274c LOSS\" : \"\u23f3 PENDING\";\n const teamALogo = isValidLogo(it.logoA) ? `<img decoding=\"async\" class=\"logo\" src=\"${it.logoA}\" alt=\"\">` : `<span style=\"width:22px\">`;\n const teamBLogo = isValidLogo(it.logoB) ? `<img decoding=\"async\" class=\"logo\" src=\"${it.logoB}\" alt=\"\">` : `<span style=\"width:22px\">`;\n const pickName = it.pick === \"A\" ? it.teamA : it.teamB;\n\n return `\n <tr data-id=\"${it.id}\">\n <td>${safeText(it.sport) || \"<span class='tiny'>\u2014\"}\n <td>\n <div class=\"team\">\n ${teamALogo}\n <div>\n <div><b>${escapeHtml(it.teamA)} <span class=\"vs\">vs <b>${escapeHtml(it.teamB)}\n ${it.notes ? `<div class=\"tiny\">${escapeHtml(it.notes)}` : `<div class=\"tiny\"> `}\n \n ${teamBLogo}\n \n \n <td><span class=\"pickbadge\">\ud83c\udfaf ${escapeHtml(pickName)}\n <td><span class=\"status ${st}\">${statusLabel}\n <td>\n <div class=\"actions\">\n <button class=\"btn secondary\" type=\"button\" data-action=\"winnerA\">Winner: A\n <button class=\"btn secondary\" type=\"button\" data-action=\"winnerB\">Winner: B\n <button class=\"btn secondary\" type=\"button\" data-action=\"clearWinner\">Clear\n <button class=\"btn secondary\" type=\"button\" data-action=\"edit\">Edit\n <button class=\"btn danger\" type=\"button\" data-action=\"delete\">Delete\n \n \n \n `;\n }).join(\"\") || `\n <tr><td colspan=\"5\" class=\"tiny\">No picks found for this date\/filter. Add one on the left.\n `;\n }\n\n function rerender(){\n const all = loadData();\n renderPills(all);\n renderTable(all);\n }\n\n function addPick(){\n const item = {\n id: uid(),\n sport: safeText(els.sport.value),\n date: getSelectedDate(),\n teamA: safeText(els.teamA.value),\n teamB: safeText(els.teamB.value),\n logoA: safeText(els.logoA.value),\n logoB: safeText(els.logoB.value),\n pick: els.pick.value, \/\/ \"A\" or \"B\"\n notes: safeText(els.notes.value),\n resultWinner: \"\", \/\/ pending initially\n createdAt: Date.now()\n };\n\n if(!item.teamA || !item.teamB){\n alert(\"Please enter both Team A and Team B.\");\n return;\n }\n\n const all = loadData();\n all.push(item);\n saveData(all);\n\n els.teamA.value = \"\";\n els.teamB.value = \"\";\n els.logoA.value = \"\";\n els.logoB.value = \"\";\n els.notes.value = \"\";\n els.teamA.focus();\n\n rerender();\n }\n\n function clearDay(){\n const d = getSelectedDate();\n if(!confirm(`Clear ALL picks for ${d}?`)) return;\n const all = loadData().filter(it => it.date !== d);\n saveData(all);\n rerender();\n }\n\n function wipeAll(){\n if(!confirm(\"Wipe ALL saved picks (all dates) from this browser?\")) return;\n localStorage.removeItem(STORAGE_KEY);\n rerender();\n }\n\n function setWinner(id, winner){\n const all = loadData();\n const idx = all.findIndex(x => x.id === id);\n if(idx === -1) return;\n all[idx].resultWinner = winner; \/\/ \"\", \"A\", \"B\"\n saveData(all);\n rerender();\n }\n\n function removePick(id){\n if(!confirm(\"Delete this pick?\")) return;\n const all = loadData().filter(x => x.id !== id);\n saveData(all);\n rerender();\n }\n\n function openEditModal(id){\n const all = loadData();\n const it = all.find(x => x.id === id);\n if(!it) return;\n\n currentEditId = id;\n\n els.mSport.value = it.sport || \"\";\n els.mDate.value = it.date || todayISO;\n els.mTeamA.value = it.teamA || \"\";\n els.mTeamB.value = it.teamB || \"\";\n els.mLogoA.value = it.logoA || \"\";\n els.mLogoB.value = it.logoB || \"\";\n els.mPick.value = it.pick || \"A\";\n els.mNotes.value = it.notes || \"\";\n\n els.modalOverlay.style.display = \"flex\";\n els.mTeamA.focus();\n }\n\n function closeEditModal(){\n currentEditId = null;\n els.modalOverlay.style.display = \"none\";\n }\n\n function saveEdit(){\n if(!currentEditId) return;\n\n const all = loadData();\n const idx = all.findIndex(x => x.id === currentEditId);\n if(idx === -1) return;\n\n const updated = {\n ...all[idx],\n sport: safeText(els.mSport.value),\n date: safeText(els.mDate.value) || todayISO,\n teamA: safeText(els.mTeamA.value),\n teamB: safeText(els.mTeamB.value),\n logoA: safeText(els.mLogoA.value),\n logoB: safeText(els.mLogoB.value),\n pick: (els.mPick.value === \"B\") ? \"B\" : \"A\",\n notes: safeText(els.mNotes.value)\n };\n\n if(!updated.teamA || !updated.teamB){\n alert(\"Team A and Team B are required.\");\n return;\n }\n\n all[idx] = updated;\n saveData(all);\n\n \/\/ if you changed the date, the table view might move\u2014keep the UI consistent:\n els.date.value = updated.date;\n\n closeEditModal();\n rerender();\n }\n\n \/\/ Button handlers (no inline onclick)\n els.addBtn.addEventListener(\"click\", addPick);\n els.clearDayBtn.addEventListener(\"click\", clearDay);\n els.wipeAllBtn.addEventListener(\"click\", wipeAll);\n\n els.search.addEventListener(\"input\", rerender);\n els.filterStatus.addEventListener(\"change\", rerender);\n els.date.addEventListener(\"change\", rerender);\n\n \/\/ Table event delegation (Delete \/ Winner \/ Edit)\n els.rows.addEventListener(\"click\", (e)=>{\n const btn = e.target.closest(\"button[data-action]\");\n if(!btn) return;\n\n const tr = btn.closest(\"tr[data-id]\");\n const id = tr?.getAttribute(\"data-id\");\n if(!id) return;\n\n const action = btn.getAttribute(\"data-action\");\n if(action === \"winnerA\") setWinner(id, \"A\");\n else if(action === \"winnerB\") setWinner(id, \"B\");\n else if(action === \"clearWinner\") setWinner(id, \"\");\n else if(action === \"delete\") removePick(id);\n else if(action === \"edit\") openEditModal(id);\n });\n\n \/\/ Modal handlers\n els.closeModalBtn.addEventListener(\"click\", closeEditModal);\n els.cancelEditBtn.addEventListener(\"click\", closeEditModal);\n els.saveEditBtn.addEventListener(\"click\", saveEdit);\n\n els.modalOverlay.addEventListener(\"click\", (e)=>{\n if(e.target === els.modalOverlay) closeEditModal();\n });\n document.addEventListener(\"keydown\", (e)=>{\n if(e.key === \"Escape\" && els.modalOverlay.style.display === \"flex\") closeEditModal();\n });\n\n \/\/ Export\/Import\n els.exportBtn.addEventListener(\"click\", ()=>{\n const all = loadData();\n const blob = new Blob([JSON.stringify(all, null, 2)], {type:\"application\/json\"});\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = \"sports-picks-export.json\";\n document.body.appendChild(a);\n a.click();\n a.remove();\n });\n\n els.importBtn.addEventListener(\"click\", ()=> els.importFile.click());\n\n els.importFile.addEventListener(\"change\", async (e)=>{\n const file = e.target.files?.[0];\n if(!file) return;\n try{\n const text = await file.text();\n const imported = JSON.parse(text);\n if(!Array.isArray(imported)) throw new Error(\"Invalid format (expected an array).\");\n\n const cleaned = imported.map(it => ({\n id: it.id || uid(),\n sport: safeText(it.sport),\n date: safeText(it.date) || todayISO,\n teamA: safeText(it.teamA),\n teamB: safeText(it.teamB),\n logoA: safeText(it.logoA),\n logoB: safeText(it.logoB),\n pick: (it.pick === \"B\") ? \"B\" : \"A\",\n notes: safeText(it.notes),\n resultWinner: (it.resultWinner === \"A\" || it.resultWinner === \"B\") ? it.resultWinner : \"\",\n createdAt: it.createdAt || Date.now()\n })).filter(it => it.teamA && it.teamB);\n\n const all = loadData().concat(cleaned);\n saveData(all);\n alert(`Imported ${cleaned.length} picks.`);\n rerender();\n }catch(err){\n alert(\"Import failed: \" + err.message);\n }finally{\n els.importFile.value = \"\";\n }\n });\n\n \/\/ first render\n rerender();\n})();\n<\/script>\n\n\n<\/body>","protected":false},"excerpt":{"rendered":"<p>Besure to check out the locks picks page , 5$ and 10$ memberships Sports Picks Tracker Sports Picks Tracker Add your picks for the day, then update each game later as a Win \u2705 or Loss \u274c. Everything saves in your browser automatically (localStorage). Add a Pick Sport\/League (optional) Date Team A Team B Team […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-578","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/posts\/578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/comments?post=578"}],"version-history":[{"count":3,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/posts\/578\/revisions"}],"predecessor-version":[{"id":581,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/posts\/578\/revisions\/581"}],"wp:attachment":[{"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/media?parent=578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/categories?post=578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/tags?post=578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":578,"date":"2025-12-21T04:23:38","date_gmt":"2025-12-21T04:23:38","guid":{"rendered":"https:\/\/studio1live.com\/picks\/?p=578"},"modified":"2025-12-21T19:27:47","modified_gmt":"2025-12-21T19:27:47","slug":"sunday-12-21-2025-sports-picks-free","status":"publish","type":"post","link":"https:\/\/studio1live.com\/picks\/sunday-12-21-2025-sports-picks-free\/","title":{"rendered":"Sunday 12\/21\/2025 sports Picks free"},"content":{"rendered":"\n

Besure to check out the locks picks page , 5$ and 10$ memberships <\/p>\n\n\n\n\n\n\n \n \n Sports Picks Tracker<\/title>\n <style>\n :root{\n --bg:#0b0f17; --text:#e9eefb; --muted:#9fb0d0; --good:#28d17c; --bad:#ff4d4d; --warn:#f7c948;\n --shadow: 0 12px 30px rgba(0,0,0,.35); --radius:16px;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n background: radial-gradient(1200px 600px at 20% -10%, rgba(43,108,255,.28), transparent 55%),\n radial-gradient(800px 500px at 90% 10%, rgba(40,209,124,.18), transparent 50%),\n var(--bg);\n color:var(--text);\n }\n header{ padding: 22px 16px 10px; max-width: 1100px; margin: 0 auto; }\n .title{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:space-between; }\n .title h1{ margin:0; font-size: 22px; letter-spacing: .3px; }\n .sub{ margin:8px 0 0; color:var(--muted); font-size: 13px; line-height: 1.4; }\n main{ max-width: 1100px; margin: 0 auto; padding: 10px 16px 40px; display:grid; grid-template-columns: 380px 1fr; gap: 14px; }\n @media (max-width: 980px){ main{ grid-template-columns: 1fr; } }\n\n .card{\n background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));\n border: 1px solid rgba(255,255,255,.08);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow:hidden;\n }\n .card .hd{ padding: 14px 14px 10px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }\n .card .hd strong{ font-size: 14px; letter-spacing: .2px; }\n .card .bd{ padding: 14px; }\n\n .grid{ display:grid; gap:10px; grid-template-columns: 1fr 1fr; }\n label{ display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }\n input, select, button{\n width:100%; padding: 10px 10px; border-radius: 12px;\n border: 1px solid rgba(255,255,255,.10);\n background: rgba(0,0,0,.22);\n color: var(--text);\n outline:none;\n }\n input::placeholder{ color: rgba(159,176,208,.65); }\n input:focus, select:focus{\n border-color: rgba(43,108,255,.6);\n box-shadow: 0 0 0 4px rgba(43,108,255,.14);\n }\n .row{ display:flex; gap:10px; align-items:center; }\n .row > *{ flex:1; }\n .btn{\n background: linear-gradient(180deg, rgba(43,108,255,1), rgba(20,80,210,1));\n border: 1px solid rgba(255,255,255,.14);\n cursor:pointer;\n font-weight: 650;\n }\n .btn:hover{ filter: brightness(1.05); }\n .btn.secondary{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); font-weight: 600; }\n .btn.danger{ background: rgba(255,77,77,.14); border: 1px solid rgba(255,77,77,.22); color: #ffd4d4; }\n .pillbar{ display:flex; gap:10px; flex-wrap:wrap; }\n .pill{ padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); font-size: 12px; color: var(--muted); }\n .pill b{ color: var(--text); }\n .split{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }\n\n .tablewrap{ overflow:auto; }\n table{ width:100%; border-collapse: collapse; min-width: 860px; }\n th, td{ text-align:left; padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: middle; font-size: 13px; }\n th{\n position: sticky; top: 0;\n background: rgba(0,0,0,.26);\n backdrop-filter: blur(6px);\n z-index: 2;\n color: var(--muted);\n font-weight: 650;\n font-size: 12px;\n letter-spacing: .2px;\n }\n .team{ display:flex; align-items:center; gap:10px; min-width: 240px; }\n .logo{ width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); padding: 2px; }\n .vs{ color: var(--muted); font-weight: 700; letter-spacing: .4px; margin: 0 6px; }\n .pickbadge{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); color: var(--text); font-size: 12px; font-weight: 650; }\n .status{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); font-size: 12px; font-weight: 700; }\n .status.win{ border-color: rgba(40,209,124,.35); background: rgba(40,209,124,.12); color: #c8ffe2; }\n .status.loss{ border-color: rgba(255,77,77,.35); background: rgba(255,77,77,.12); color: #ffd4d4; }\n .status.pending{ border-color: rgba(247,201,72,.35); background: rgba(247,201,72,.10); color: #fff1c2; }\n .tiny{ font-size: 12px; color: var(--muted); }\n .actions{ display:flex; gap:8px; flex-wrap:wrap; min-width: 320px; }\n .actions button{ padding: 8px 10px; border-radius: 12px; }\n .note{ font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 10px; }\n .footer{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }\n\n \/* Modal *\/\n .modal-overlay{\n position: fixed; inset: 0; background: rgba(0,0,0,.55);\n display:none; align-items:center; justify-content:center;\n padding: 16px; z-index: 50;\n }\n .modal{\n width: min(720px, 100%);\n border-radius: 18px;\n border: 1px solid rgba(255,255,255,.10);\n background: rgba(10,14,22,.92);\n box-shadow: var(--shadow);\n overflow:hidden;\n }\n .modal .mhd{\n padding: 14px 14px 10px;\n background: rgba(0,0,0,.18);\n border-bottom: 1px solid rgba(255,255,255,.08);\n display:flex; align-items:center; justify-content:space-between; gap:10px;\n }\n .modal .mhd strong{ font-size: 14px; }\n .modal .mbd{ padding: 14px; }\n .iconbtn{\n width:auto; padding: 8px 10px;\n background: rgba(255,255,255,.06);\n border: 1px solid rgba(255,255,255,.10);\n cursor:pointer; border-radius: 12px;\n }\n .muteline{ color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 6px; }\n <\/style>\n\n\n\n<header>\n <div class=\"title\">\n <h1>Sports Picks Tracker<\/h1>\n <div class=\"pillbar\" id=\"summaryPills\"><\/div>\n <\/div>\n <p class=\"sub\">\n Add your picks for the day, then update each game later as a <b>Win \u2705<\/b> or <b>Loss \u274c<\/b>.\n Everything saves in your browser automatically (localStorage).\n <\/p>\n<\/header>\n\n<main>\n \n <section class=\"card\">\n <div class=\"hd\"><strong id=\"formTitle\">Add a Pick<\/strong><\/div>\n <div class=\"bd\">\n <div class=\"grid\">\n <div>\n <label for=\"sport\">Sport\/League (optional)<\/label>\n <input id=\"sport\" placeholder=\"NFL, NBA, NCAA, EPL...\">\n <\/div>\n <div>\n <label for=\"date\">Date<\/label>\n <input id=\"date\" type=\"date\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"teamA\">Team A<\/label>\n <input id=\"teamA\" placeholder=\"Miami Hurricanes\">\n <\/div>\n <div>\n <label for=\"teamB\">Team B<\/label>\n <input id=\"teamB\" placeholder=\"Florida State\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"logoA\">Team A Logo URL (optional)<\/label>\n <input id=\"logoA\" placeholder=\"https:\/\/...\/logo.png\">\n <\/div>\n <div>\n <label for=\"logoB\">Team B Logo URL (optional)<\/label>\n <input id=\"logoB\" placeholder=\"https:\/\/...\/logo.png\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"pick\">Your Pick<\/label>\n <select id=\"pick\">\n <option value=\"A\">Pick Team A<\/option>\n <option value=\"B\">Pick Team B<\/option>\n <\/select>\n <\/div>\n <div>\n <label for=\"notes\">Notes (optional)<\/label>\n <input id=\"notes\" placeholder=\"Spread, confidence, injuries, etc.\">\n <\/div>\n <\/div>\n\n <div style=\"height:12px\"><\/div>\n\n <div class=\"row\">\n <button class=\"btn\" id=\"addBtn\" type=\"button\">Add Pick<\/button>\n <button class=\"btn secondary\" id=\"clearDayBtn\" type=\"button\" title=\"Deletes picks for selected date only\">Clear Day<\/button>\n <\/div>\n\n <div class=\"footer\">\n <button class=\"btn secondary\" id=\"exportBtn\" type=\"button\" title=\"Download as JSON file\">Export<\/button>\n <button class=\"btn secondary\" id=\"importBtn\" type=\"button\" title=\"Import from JSON file\">Import<\/button>\n <input id=\"importFile\" type=\"file\" accept=\"application\/json\" style=\"display:none\">\n <button class=\"btn danger\" id=\"wipeAllBtn\" type=\"button\" title=\"Deletes everything stored in this browser\">Wipe All<\/button>\n <\/div>\n\n <div class=\"note\">\n If your blog platform blocks inline JS, this version is safe: it uses <b>event listeners (no inline onclick)<\/b> so Delete\/Wipe work everywhere.\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"card\">\n <div class=\"hd\">\n <div class=\"split\">\n <strong>Today\u2019s Picks<\/strong>\n <div class=\"row\" style=\"max-width:460px\">\n <input id=\"search\" placeholder=\"Search teams \/ notes...\">\n <select id=\"filterStatus\" title=\"Filter by status\">\n <option value=\"all\">All<\/option>\n <option value=\"pending\">Pending<\/option>\n <option value=\"win\">Wins<\/option>\n <option value=\"loss\">Losses<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"tiny\" id=\"dayLabel\" style=\"margin-top:8px\"><\/div>\n <\/div>\n\n <div class=\"bd tablewrap\">\n <table>\n <thead>\n <tr>\n <th style=\"width:140px;\">League<\/th>\n <th>Matchup<\/th>\n <th style=\"width:170px;\">Your Pick<\/th>\n <th style=\"width:140px;\">Result<\/th>\n <th style=\"width:380px;\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"rows\"><\/tbody>\n <\/table>\n <\/div>\n <\/section>\n<\/main>\n\n\n<div class=\"modal-overlay\" id=\"modalOverlay\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"modal\">\n <div class=\"mhd\">\n <strong>Edit Pick<\/strong>\n <button class=\"iconbtn\" id=\"closeModalBtn\" type=\"button\">\u2715<\/button>\n <\/div>\n <div class=\"mbd\">\n <div class=\"grid\">\n <div>\n <label for=\"mSport\">Sport\/League<\/label>\n <input id=\"mSport\" placeholder=\"NFL, NBA, NCAA, EPL...\">\n <\/div>\n <div>\n <label for=\"mDate\">Date<\/label>\n <input id=\"mDate\" type=\"date\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"mTeamA\">Team A<\/label>\n <input id=\"mTeamA\">\n <\/div>\n <div>\n <label for=\"mTeamB\">Team B<\/label>\n <input id=\"mTeamB\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"mLogoA\">Team A Logo URL<\/label>\n <input id=\"mLogoA\" placeholder=\"https:\/\/...\/logo.png\">\n <\/div>\n <div>\n <label for=\"mLogoB\">Team B Logo URL<\/label>\n <input id=\"mLogoB\" placeholder=\"https:\/\/...\/logo.png\">\n <\/div>\n <\/div>\n\n <div style=\"height:10px\"><\/div>\n\n <div class=\"grid\">\n <div>\n <label for=\"mPick\">Your Pick<\/label>\n <select id=\"mPick\">\n <option value=\"A\">Pick Team A<\/option>\n <option value=\"B\">Pick Team B<\/option>\n <\/select>\n <\/div>\n <div>\n <label for=\"mNotes\">Notes<\/label>\n <input id=\"mNotes\" placeholder=\"Spread, confidence, injuries, etc.\">\n <\/div>\n <\/div>\n\n <div style=\"height:12px\"><\/div>\n\n <div class=\"row\">\n <button class=\"btn\" id=\"saveEditBtn\" type=\"button\">Save Changes<\/button>\n <button class=\"btn secondary\" id=\"cancelEditBtn\" type=\"button\">Cancel<\/button>\n <\/div>\n <div class=\"muteline\">Tip: results (Win\/Loss) stay attached to this pick unless you change the date filter and move it.<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n(function(){\n const $ = (id)=>document.getElementById(id);\n\n const STORAGE_KEY = \"sports_picks_tracker_v2\";\n const todayISO = new Date().toISOString().slice(0,10);\n\n const els = {\n sport: $(\"sport\"),\n date: $(\"date\"),\n teamA: $(\"teamA\"),\n teamB: $(\"teamB\"),\n logoA: $(\"logoA\"),\n logoB: $(\"logoB\"),\n pick: $(\"pick\"),\n notes: $(\"notes\"),\n addBtn: $(\"addBtn\"),\n clearDayBtn: $(\"clearDayBtn\"),\n wipeAllBtn: $(\"wipeAllBtn\"),\n rows: $(\"rows\"),\n summaryPills: $(\"summaryPills\"),\n dayLabel: $(\"dayLabel\"),\n search: $(\"search\"),\n filterStatus: $(\"filterStatus\"),\n exportBtn: $(\"exportBtn\"),\n importBtn: $(\"importBtn\"),\n importFile: $(\"importFile\"),\n\n modalOverlay: $(\"modalOverlay\"),\n closeModalBtn: $(\"closeModalBtn\"),\n cancelEditBtn: $(\"cancelEditBtn\"),\n saveEditBtn: $(\"saveEditBtn\"),\n mSport: $(\"mSport\"),\n mDate: $(\"mDate\"),\n mTeamA: $(\"mTeamA\"),\n mTeamB: $(\"mTeamB\"),\n mLogoA: $(\"mLogoA\"),\n mLogoB: $(\"mLogoB\"),\n mPick: $(\"mPick\"),\n mNotes: $(\"mNotes\")\n };\n\n \/\/ init date\n els.date.value = todayISO;\n\n let currentEditId = null;\n\n function loadData(){\n try{ return JSON.parse(localStorage.getItem(STORAGE_KEY) || \"[]\"); }\n catch(e){ return []; }\n }\n function saveData(items){\n localStorage.setItem(STORAGE_KEY, JSON.stringify(items));\n }\n function uid(){\n return Math.random().toString(16).slice(2) + Date.now().toString(16);\n }\n function safeText(s){ return (s || \"\").toString().trim(); }\n function isValidLogo(url){\n if(!url) return false;\n try{ const u = new URL(url); return \/^https?:\/.test(u.protocol); }\n catch(e){ return false; }\n }\n function escapeHtml(str){\n return (str ?? \"\").toString()\n .replaceAll(\"&\", \"&\")\n .replaceAll(\"<\", \"<\")\n .replaceAll(\">\", \">\")\n .replaceAll('\"', \""\")\n .replaceAll(\"'\", \"'\");\n }\n function computeStatus(item){\n if(!item.resultWinner) return \"pending\";\n return item.resultWinner === item.pick ? \"win\" : \"loss\";\n }\n function getSelectedDate(){ return els.date.value || todayISO; }\n\n function filteredForDay(allItems){\n const d = getSelectedDate();\n const q = safeText(els.search.value).toLowerCase();\n const f = els.filterStatus.value;\n\n return allItems\n .filter(it => it.date === d)\n .filter(it => {\n if(!q) return true;\n const hay = `${it.sport} ${it.teamA} ${it.teamB} ${it.notes}`.toLowerCase();\n return hay.includes(q);\n })\n .filter(it => (f === \"all\") ? true : (computeStatus(it) === f))\n .sort((a,b)=> (a.createdAt||0) - (b.createdAt||0));\n }\n\n function summaryForDay(allItems){\n const dayItems = allItems.filter(it => it.date === getSelectedDate());\n let wins=0, losses=0, pending=0;\n for(const it of dayItems){\n const st = computeStatus(it);\n if(st===\"win\") wins++;\n else if(st===\"loss\") losses++;\n else pending++;\n }\n const decided = wins + losses;\n const pct = decided ? Math.round((wins\/decided)*100) : 0;\n return { wins, losses, pending, pct, totalPicks: dayItems.length };\n }\n\n function renderPills(allItems){\n const d = getSelectedDate();\n const s = summaryForDay(allItems);\n els.summaryPills.innerHTML = `\n <div class=\"pill\">Date: <b>${d}\n <div class=\"pill\">Picks: <b>${s.totalPicks}\n <div class=\"pill\">Wins: <b style=\"color:var(--good)\">${s.wins}\n <div class=\"pill\">Losses: <b style=\"color:var(--bad)\">${s.losses}\n <div class=\"pill\">Pending: <b style=\"color:var(--warn)\">${s.pending}\n <div class=\"pill\">Win %: <b>${s.pct}%\n `;\n els.dayLabel.textContent = `Showing picks for ${d} \u2022 Record (decided only): ${s.wins}-${s.losses}`;\n }\n\n function renderTable(allItems){\n const items = filteredForDay(allItems);\n els.rows.innerHTML = items.map(it => {\n const st = computeStatus(it);\n const statusLabel = st === \"win\" ? \"\u2705 WIN\" : st === \"loss\" ? \"\u274c LOSS\" : \"\u23f3 PENDING\";\n const teamALogo = isValidLogo(it.logoA) ? `<img decoding=\"async\" class=\"logo\" src=\"${it.logoA}\" alt=\"\">` : `<span style=\"width:22px\">`;\n const teamBLogo = isValidLogo(it.logoB) ? `<img decoding=\"async\" class=\"logo\" src=\"${it.logoB}\" alt=\"\">` : `<span style=\"width:22px\">`;\n const pickName = it.pick === \"A\" ? it.teamA : it.teamB;\n\n return `\n <tr data-id=\"${it.id}\">\n <td>${safeText(it.sport) || \"<span class='tiny'>\u2014\"}\n <td>\n <div class=\"team\">\n ${teamALogo}\n <div>\n <div><b>${escapeHtml(it.teamA)} <span class=\"vs\">vs <b>${escapeHtml(it.teamB)}\n ${it.notes ? `<div class=\"tiny\">${escapeHtml(it.notes)}` : `<div class=\"tiny\"> `}\n \n ${teamBLogo}\n \n \n <td><span class=\"pickbadge\">\ud83c\udfaf ${escapeHtml(pickName)}\n <td><span class=\"status ${st}\">${statusLabel}\n <td>\n <div class=\"actions\">\n <button class=\"btn secondary\" type=\"button\" data-action=\"winnerA\">Winner: A\n <button class=\"btn secondary\" type=\"button\" data-action=\"winnerB\">Winner: B\n <button class=\"btn secondary\" type=\"button\" data-action=\"clearWinner\">Clear\n <button class=\"btn secondary\" type=\"button\" data-action=\"edit\">Edit\n <button class=\"btn danger\" type=\"button\" data-action=\"delete\">Delete\n \n \n \n `;\n }).join(\"\") || `\n <tr><td colspan=\"5\" class=\"tiny\">No picks found for this date\/filter. Add one on the left.\n `;\n }\n\n function rerender(){\n const all = loadData();\n renderPills(all);\n renderTable(all);\n }\n\n function addPick(){\n const item = {\n id: uid(),\n sport: safeText(els.sport.value),\n date: getSelectedDate(),\n teamA: safeText(els.teamA.value),\n teamB: safeText(els.teamB.value),\n logoA: safeText(els.logoA.value),\n logoB: safeText(els.logoB.value),\n pick: els.pick.value, \/\/ \"A\" or \"B\"\n notes: safeText(els.notes.value),\n resultWinner: \"\", \/\/ pending initially\n createdAt: Date.now()\n };\n\n if(!item.teamA || !item.teamB){\n alert(\"Please enter both Team A and Team B.\");\n return;\n }\n\n const all = loadData();\n all.push(item);\n saveData(all);\n\n els.teamA.value = \"\";\n els.teamB.value = \"\";\n els.logoA.value = \"\";\n els.logoB.value = \"\";\n els.notes.value = \"\";\n els.teamA.focus();\n\n rerender();\n }\n\n function clearDay(){\n const d = getSelectedDate();\n if(!confirm(`Clear ALL picks for ${d}?`)) return;\n const all = loadData().filter(it => it.date !== d);\n saveData(all);\n rerender();\n }\n\n function wipeAll(){\n if(!confirm(\"Wipe ALL saved picks (all dates) from this browser?\")) return;\n localStorage.removeItem(STORAGE_KEY);\n rerender();\n }\n\n function setWinner(id, winner){\n const all = loadData();\n const idx = all.findIndex(x => x.id === id);\n if(idx === -1) return;\n all[idx].resultWinner = winner; \/\/ \"\", \"A\", \"B\"\n saveData(all);\n rerender();\n }\n\n function removePick(id){\n if(!confirm(\"Delete this pick?\")) return;\n const all = loadData().filter(x => x.id !== id);\n saveData(all);\n rerender();\n }\n\n function openEditModal(id){\n const all = loadData();\n const it = all.find(x => x.id === id);\n if(!it) return;\n\n currentEditId = id;\n\n els.mSport.value = it.sport || \"\";\n els.mDate.value = it.date || todayISO;\n els.mTeamA.value = it.teamA || \"\";\n els.mTeamB.value = it.teamB || \"\";\n els.mLogoA.value = it.logoA || \"\";\n els.mLogoB.value = it.logoB || \"\";\n els.mPick.value = it.pick || \"A\";\n els.mNotes.value = it.notes || \"\";\n\n els.modalOverlay.style.display = \"flex\";\n els.mTeamA.focus();\n }\n\n function closeEditModal(){\n currentEditId = null;\n els.modalOverlay.style.display = \"none\";\n }\n\n function saveEdit(){\n if(!currentEditId) return;\n\n const all = loadData();\n const idx = all.findIndex(x => x.id === currentEditId);\n if(idx === -1) return;\n\n const updated = {\n ...all[idx],\n sport: safeText(els.mSport.value),\n date: safeText(els.mDate.value) || todayISO,\n teamA: safeText(els.mTeamA.value),\n teamB: safeText(els.mTeamB.value),\n logoA: safeText(els.mLogoA.value),\n logoB: safeText(els.mLogoB.value),\n pick: (els.mPick.value === \"B\") ? \"B\" : \"A\",\n notes: safeText(els.mNotes.value)\n };\n\n if(!updated.teamA || !updated.teamB){\n alert(\"Team A and Team B are required.\");\n return;\n }\n\n all[idx] = updated;\n saveData(all);\n\n \/\/ if you changed the date, the table view might move\u2014keep the UI consistent:\n els.date.value = updated.date;\n\n closeEditModal();\n rerender();\n }\n\n \/\/ Button handlers (no inline onclick)\n els.addBtn.addEventListener(\"click\", addPick);\n els.clearDayBtn.addEventListener(\"click\", clearDay);\n els.wipeAllBtn.addEventListener(\"click\", wipeAll);\n\n els.search.addEventListener(\"input\", rerender);\n els.filterStatus.addEventListener(\"change\", rerender);\n els.date.addEventListener(\"change\", rerender);\n\n \/\/ Table event delegation (Delete \/ Winner \/ Edit)\n els.rows.addEventListener(\"click\", (e)=>{\n const btn = e.target.closest(\"button[data-action]\");\n if(!btn) return;\n\n const tr = btn.closest(\"tr[data-id]\");\n const id = tr?.getAttribute(\"data-id\");\n if(!id) return;\n\n const action = btn.getAttribute(\"data-action\");\n if(action === \"winnerA\") setWinner(id, \"A\");\n else if(action === \"winnerB\") setWinner(id, \"B\");\n else if(action === \"clearWinner\") setWinner(id, \"\");\n else if(action === \"delete\") removePick(id);\n else if(action === \"edit\") openEditModal(id);\n });\n\n \/\/ Modal handlers\n els.closeModalBtn.addEventListener(\"click\", closeEditModal);\n els.cancelEditBtn.addEventListener(\"click\", closeEditModal);\n els.saveEditBtn.addEventListener(\"click\", saveEdit);\n\n els.modalOverlay.addEventListener(\"click\", (e)=>{\n if(e.target === els.modalOverlay) closeEditModal();\n });\n document.addEventListener(\"keydown\", (e)=>{\n if(e.key === \"Escape\" && els.modalOverlay.style.display === \"flex\") closeEditModal();\n });\n\n \/\/ Export\/Import\n els.exportBtn.addEventListener(\"click\", ()=>{\n const all = loadData();\n const blob = new Blob([JSON.stringify(all, null, 2)], {type:\"application\/json\"});\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = \"sports-picks-export.json\";\n document.body.appendChild(a);\n a.click();\n a.remove();\n });\n\n els.importBtn.addEventListener(\"click\", ()=> els.importFile.click());\n\n els.importFile.addEventListener(\"change\", async (e)=>{\n const file = e.target.files?.[0];\n if(!file) return;\n try{\n const text = await file.text();\n const imported = JSON.parse(text);\n if(!Array.isArray(imported)) throw new Error(\"Invalid format (expected an array).\");\n\n const cleaned = imported.map(it => ({\n id: it.id || uid(),\n sport: safeText(it.sport),\n date: safeText(it.date) || todayISO,\n teamA: safeText(it.teamA),\n teamB: safeText(it.teamB),\n logoA: safeText(it.logoA),\n logoB: safeText(it.logoB),\n pick: (it.pick === \"B\") ? \"B\" : \"A\",\n notes: safeText(it.notes),\n resultWinner: (it.resultWinner === \"A\" || it.resultWinner === \"B\") ? it.resultWinner : \"\",\n createdAt: it.createdAt || Date.now()\n })).filter(it => it.teamA && it.teamB);\n\n const all = loadData().concat(cleaned);\n saveData(all);\n alert(`Imported ${cleaned.length} picks.`);\n rerender();\n }catch(err){\n alert(\"Import failed: \" + err.message);\n }finally{\n els.importFile.value = \"\";\n }\n });\n\n \/\/ first render\n rerender();\n})();\n<\/script>\n\n\n<\/body>","protected":false},"excerpt":{"rendered":"<p>Besure to check out the locks picks page , 5$ and 10$ memberships Sports Picks Tracker Sports Picks Tracker Add your picks for the day, then update each game later as a Win \u2705 or Loss \u274c. Everything saves in your browser automatically (localStorage). Add a Pick Sport\/League (optional) Date Team A Team B Team […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-578","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/posts\/578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/comments?post=578"}],"version-history":[{"count":3,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/posts\/578\/revisions"}],"predecessor-version":[{"id":581,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/posts\/578\/revisions\/581"}],"wp:attachment":[{"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/media?parent=578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/categories?post=578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studio1live.com\/picks\/wp-json\/wp\/v2\/tags?post=578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}