{"id":3836,"date":"2025-05-02T13:41:50","date_gmt":"2025-05-02T08:11:50","guid":{"rendered":"https:\/\/tbspanthers.british-school.org\/?page_id=3836"},"modified":"2025-05-02T13:41:55","modified_gmt":"2025-05-02T08:11:55","slug":"panthers-sports-awards-2025-award-winners","status":"publish","type":"page","link":"https:\/\/tbspanthers.british-school.org\/index.php\/panthers-sports-awards-2025-award-winners\/","title":{"rendered":"Panthers Sports Awards 2025 \u2013 Award Winners"},"content":{"rendered":"\n<!-- Panthers Sports Awards 2025 \u2013 Stylish Animated Card Layout -->\n<div style=\"max-width: 1080px; margin: 40px auto; padding: 30px; background: #fff; border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); font-family: 'Segoe UI', sans-serif; color: #2e2e2e;\">\n\n  <h2 style=\"color: #004b8d; font-size: 2rem; border-left: 6px solid #004b8d; padding-left: 16px;\"><\/h2>\n\n  <!-- Filters -->\n  <div style=\"margin: 24px 0; display: flex; flex-wrap: wrap; gap: 16px;\">\n    <select id=\"categoryFilter\" style=\"padding: 10px; border-radius: 6px; border: 1px solid #ccc;\">\n      <option value=\"\">Filter by Category<\/option>\n    <\/select>\n    <select id=\"activityFilter\" style=\"padding: 10px; border-radius: 6px; border: 1px solid #ccc;\">\n      <option value=\"\">Filter by Activity<\/option>\n    <\/select>\n    <select id=\"awardFilter\" style=\"padding: 10px; border-radius: 6px; border: 1px solid #ccc;\">\n      <option value=\"\">Filter by Award<\/option>\n    <\/select>\n  <\/div>\n\n  <!-- Cards Container -->\n  <div id=\"cardContainer\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;\"><\/div>\n<\/div>\n\n<style>\n  .award-card {\n    background: #ffffff;\n    border-radius: 14px;\n    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);\n    padding: 20px;\n    position: relative;\n    transition: transform 0.3s ease, opacity 0.3s ease;\n    border-top: 5px solid #ccc;\n    opacity: 0;\n    transform: translateY(20px);\n    animation: fadeInUp 0.6s ease forwards;\n  }\n\n  @keyframes fadeInUp {\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .award-name {\n    font-size: 1rem;\n    font-weight: 700;\n    margin-bottom: 8px;\n    color: #004b8d;\n    text-transform: uppercase;\n  }\n\n  .award-activity {\n    font-size: 0.9rem;\n    margin-bottom: 8px;\n    color: #444;\n  }\n\n  .badge {\n    display: inline-block;\n    padding: 4px 12px;\n    border-radius: 12px;\n    font-size: 0.85rem;\n    color: white;\n  }\n\n  .badge.sportsmanship { background: #4CAF50; }\n  .badge.player        { background: #2196F3; }\n  .badge.improved      { background: #FF9800; }\n  .badge.mvp           { background: #9C27B0; }\n  .badge.achiever      { background: #d4af37; }\n<\/style>\n\n<script>\nfetch('https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTdOY0pXEu-9xmuCVj7nrswDUngMWaffNzS_qKkodO0o4pCQ650HQ-oc4IcoXVKoAKMm5NJXuXTU14f\/pub?gid=351366918&single=true&output=csv')\n  .then(response => response.text())\n  .then(data => {\n    const rows = data.trim().split('\\n').slice(1);\n    const container = document.getElementById('cardContainer');\n    const categories = new Set();\n    const activities = new Set();\n    const awards = new Set();\n\n    const dataList = rows.map(row => {\n      const [student, , , , activity, category, award] = row.split(',');\n      const firstName = student.trim().split(' ')[0].toUpperCase();\n      categories.add(category.trim());\n      activities.add(activity.trim());\n      awards.add(award.trim());\n      return { firstName, activity: activity.trim(), category: category.trim(), award: award.trim() };\n    });\n\n    function getBadgeClass(award) {\n      const lower = award.toLowerCase();\n      if (lower.includes(\"sportsmanship\")) return \"badge sportsmanship\";\n      if (lower.includes(\"player\") && !lower.includes(\"valuable\")) return \"badge player\";\n      if (lower.includes(\"improved\")) return \"badge improved\";\n      if (lower.includes(\"valuable\")) return \"badge mvp\";\n      if (lower.includes(\"achiever\")) return \"badge achiever\";\n      return \"badge\";\n    }\n\n    function renderCards() {\n      const catVal = document.getElementById('categoryFilter').value;\n      const actVal = document.getElementById('activityFilter').value;\n      const awardVal = document.getElementById('awardFilter').value;\n\n      container.innerHTML = '';\n      dataList\n        .filter(row =>\n          (!catVal || row.category === catVal) &&\n          (!actVal || row.activity === actVal) &&\n          (!awardVal || row.award === awardVal)\n        )\n        .forEach((row, index) => {\n          const div = document.createElement('div');\n          div.className = \"award-card\";\n          div.style.animationDelay = `${index * 0.05}s`;\n          div.innerHTML = `\n            <div class=\"award-name\">${row.firstName}<\/div>\n            <div class=\"award-activity\">${row.activity}<\/div>\n            <div class=\"${getBadgeClass(row.award)}\">${row.award}<\/div>\n          `;\n          container.appendChild(div);\n        });\n    }\n\n    const catFilter = document.getElementById('categoryFilter');\n    const actFilter = document.getElementById('activityFilter');\n    const awardFilter = document.getElementById('awardFilter');\n\n    categories.forEach(val => {\n      const opt = document.createElement('option');\n      opt.value = val;\n      opt.textContent = val;\n      catFilter.appendChild(opt);\n    });\n\n    activities.forEach(val => {\n      const opt = document.createElement('option');\n      opt.value = val;\n      opt.textContent = val;\n      actFilter.appendChild(opt);\n    });\n\n    awards.forEach(val => {\n      const opt = document.createElement('option');\n      opt.value = val;\n      opt.textContent = val;\n      awardFilter.appendChild(opt);\n    });\n\n    catFilter.addEventListener('change', renderCards);\n    actFilter.addEventListener('change', renderCards);\n    awardFilter.addEventListener('change', renderCards);\n\n    renderCards();\n  });\n<\/script>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Filter by Category Filter by Activity Filter by Award<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3836","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages\/3836"}],"collection":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/comments?post=3836"}],"version-history":[{"count":14,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages\/3836\/revisions"}],"predecessor-version":[{"id":3850,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages\/3836\/revisions\/3850"}],"wp:attachment":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/media?parent=3836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}