sudo chgrp -R noblesapp clubs
sudo chmod -R g+rw clubs
sudo find clubs -type d -exec chmod 2775 {} \;
<!-- Top Nav -->
<style>
:root {
  --ath-blue: #001f5f;
  --ath-gold: #91d6e6;
  --ath-white: #ffffff;
  --ath-blue2: #002244;
  --ath-overlay: rgba(0,0,0,0.35);
}

/* ====== TOP NAV BAR ====== */
.ath-top-nav {
  position: sticky; top: 0;
  background: var(--ath-blue);
  z-index: 9999;
}

.ath-top-nav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.ath-logo {
  display: flex;
  align-items: center;
  margin-right: 24px;
}
.ath-logo img {
  height: auto;
  max-height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* Right side nav group */
.ath-nav-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: 24px;
}

/* Primary links */
.ath-primary-links {
  display: flex;
  gap: 24px;
}
.ath-link {
  color: var(--ath-white);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 2px;
  outline: none;
}
.ath-link span {
  display: inline-block;
  transform: translateY(0);
  transition: transform .18s ease;
}
.ath-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 6px) scale(0.6);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ath-white);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.ath-link:hover span,
.ath-link:focus-visible span {
  transform: translateY(-2px);
}
.ath-link:hover::after,
.ath-link:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* More button */
.ath-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--ath-white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: transform .18s ease, opacity .18s ease, text-shadow .18s ease;
}
.ath-more-btn:hover,
.ath-more-btn:focus-visible {
  transform: translateY(-2px) scale(1.08);
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
  opacity: 0.95;
}
.ath-more-btn:focus-visible {
  outline: 2px solid var(--ath-gold);
  outline-offset: 2px;
}

.drawer-season-group {
  margin-top: 14px;
}

.drawer-season-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ath-white);
  margin-bottom: 6px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.drawer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 14px;
}


/* Drawer Overlay & Panel */
.ath-drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--ath-overlay) !important;
  z-index: 100000;
}

.ath-right-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 360px;
  max-width: 90vw;
  background: var(--ath-blue) !important;
  box-shadow: -8px 0 20px rgba(0,0,0,0.15);
  z-index: 100001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(6px);
  border-left: 1px solid #ddd;
}

.ath-right-drawer.ath-open {
  transform: translateX(0);
}

.ath-drawer-close {
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
}


.ath-drawer-content {
  padding: 0 18px 28px 18px;
  overflow-y: auto;
  max-height: calc(100vh - 64px); /* subtract header height */
  display: grid;
  gap: 8px;
}

.ath-drawer-content a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ath-white);
  font-size: 16px;
  transition: background-color 0.2s, color 0.2s;
}

.ath-drawer-content a:hover {
background-color: var(--ath-gold);
  color: var(--ath-blue);
}

.ath-drawer-section {
  border-top: 1px solid #eee;
  padding-top: 10px;
  margin-top: 10px;
}

.ath-drawer-section-title {
  margin: 10px 0 2px;
  font-weight: 800;
  color: var(--ath-blue);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  background-color: var(--ath-blue);
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  padding: 8px 0;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.25s ease;
}

.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.dropdown-content a {
  display: block;
  padding: 10px 16px;
  color: white;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s, padding-left 0.2s;
}

.dropdown-content a:hover {
  background-color: var(--ath-gold);
  color: #000;
  padding-left: 20px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

.season-title {
  color: var(--ath-white);
}

.season-column ul {
  list-style: disc;
  color: var(--ath-white); /* makes list markers white */
}

.season-column ul li {
  color: var(--ath-white); /* makes the text white too */
}

.menu-item-with-submenu .submenu {
  display: none;
  margin-left: 1rem; /* indent for submenu */
}

.menu-item-with-submenu:hover .submenu,
.menu-item-with-submenu:focus-within .submenu {
  display: block;
}


@media (max-width: 640px) {
  .ath-primary-links {
    display: none;
  }

</style>

<header class="ath-top-nav" role="navigation" aria-label="Athletics primary">
  <div class="ath-top-nav-inner">
    <div class="ath-logo">
      <a href="index.php">
        <img src="images/Nobles_Logo_Suite_RGB__Athletics_Lockup_White.png" />
        <!-- <img src="images/Nobles_shield_transparent_white.png" alt="Nobles Logo" /> -->
      </a>
    </div>

    <div class="ath-nav-content">
        <nav class="ath-primary-links">
          <a class="ath-link" href="index.php"><span>Home</span></a>
          <div class="dropdown">
              <a class="ath-link" href="#"><span>Holiday Tournaments</span></a>
                <div class="dropdown-content">
                  <a href="./RostersHome/RostersTournament/Nickerson/schedule.pdf" target="_blank" rel="noopener">Nickerson Holiday Tournament (Girls Basketball)</a>
                  <a href="./RostersHome/RostersTournament/FloodMarr/schedule.pdf" target="_blank" rel="noopener">Flood-Marr Holiday Tournament (Boys Hockey)</a>
                  <a href="./RostersHome/RostersTournament/Harrington/schedule.pdf" target="_blank" rel="noopener">Harrington Invitational Hockey Tournament (Girls Hockey)</a>
                </div>
          </div>
          <div class="dropdown">
            <a class="ath-link" href="all_teams.php"><span>Teams</span></a>

          </div>
          <a class="ath-link" href="calendar.php"><span>Schedules</span></a>
          <a class="ath-link" href="facilities_list.php"><span>Facilities</span></a>
          <div class="dropdown">
              <a class="ath-link" href="#"><span>Live Stream</span></a>
          <div class="dropdown-content">
            <a href="https://www.youtube.com/@noblesathletics6093/featured" target="_blank" rel="noopener">Football</a>
            <a href="https://fan.hudl.com/usa/ma/dedham/organization/4965/noble--greenough-high-school" target="_blank" rel="noopener">Other Sports</a>
          </div>
          </div>
        </nav>

      <button class="ath-more-btn" id="athMoreBtn" aria-haspopup="dialog" aria-controls="athRightDrawer" aria-expanded="false" title="More" aria-label="Open more menu">
        …
      </button>
    </div>
  </div>
</header>

<!-- Right Drawer + Overlay -->
<div class="ath-drawer-overlay" id="athDrawerOverlay" hidden></div>
<aside class="ath-right-drawer" id="athRightDrawer" role="dialog" aria-modal="true" aria-label="More athletics links" hidden>
  <button class="ath-drawer-close" id="athDrawerClose" aria-label="Close menu">×</button>
  <div class="ath-drawer-content">
<a href="index.php">Home</a>
<a href="athletes_at_a_higher_level.php">Athletes at the Next Level</a>
<a href="https://site.rocketalumnisolutions.com/categories/210" target="_blank" rel="noopener">Hall of Fame</a>
<a href="https://nobles.itemorder.com/shop/home/" target="_blank" rel="noopener">Athletic Store</a>

<a href="https://noblegreenough.iad1.qualtrics.com/jfe/form/SV_5cADmgmxtzJlPgi">Inquiry Form</a>
<a href="administrators.php">Contact</a>

<div class="ath-drawer-section">
  <div class="ath-drawer-section-title">Teams</div>
  <div class="season-columns">
                  <div class="season-column">
         <div class="season-title">Fall</div>
          <ul>
                          <li>
                <a href="sport_detail.php?sport_id=60">
                  Cross Country Boys                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=59">
                  Cross Country Girls                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=61">
                  Cross Country Middle School                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=39">
                  Field Hockey                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=40">
                  Football                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=49">
                  Pickleball                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=65">
                  Soccer Boys                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=66">
                  Soccer Girls                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=26">
                  Volleyball                </a>
              </li>
                      </ul>
        </div>
                        <div class="season-column">
         <div class="season-title">Winter</div>
          <ul>
                          <li>
                <a href="sport_detail.php?sport_id=34">
                  Alpine Skiing                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=50">
                  Basketball Boys                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=51">
                  Basketball Girls                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=55">
                  Hockey Boys                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=54">
                  Hockey Girls                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=56">
                  Hockey Middle School                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=67">
                  Squash Boys                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=68">
                  Squash Girls                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=69">
                  Squash Middle School                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=28">
                  Wrestling                </a>
              </li>
                      </ul>
        </div>
                        <div class="season-column">
         <div class="season-title">Spring</div>
          <ul>
                          <li>
                <a href="sport_detail.php?sport_id=7">
                  Baseball                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=53">
                  Crew Boys                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=52">
                  Crew Girls                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=19">
                  Golf                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=62">
                  Lacrosse Boys                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=63">
                  Lacrosse Girls                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=14">
                  Softball                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=71">
                  Tennis Boys                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=70">
                  Tennis Girls                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=72">
                  Tennis Middle School                </a>
              </li>
                          <li>
                <a href="sport_detail.php?sport_id=24">
                  Track and Field                </a>
              </li>
                      </ul>
        </div>
            </div>
</div>

</aside>

<script>
(function () {
  const drawer  = document.getElementById('athRightDrawer');
  const overlay = document.getElementById('athDrawerOverlay');
  const moreBtn = document.getElementById('athMoreBtn');
  const closeBtn= document.getElementById('athDrawerClose');

  if (drawer && drawer.parentElement !== document.body) document.body.appendChild(drawer);
  if (overlay && overlay.parentElement !== document.body) document.body.appendChild(overlay);

  function openDrawer() {
  drawer.hidden = false; overlay.hidden = false;
  document.body.style.overflow = 'hidden'; // prevents background scroll
  requestAnimationFrame(() => { drawer.classList.add('ath-open'); moreBtn.setAttribute('aria-expanded','true'); });
  setTimeout(() => closeBtn?.focus(), 50);
  document.addEventListener('keydown', onKeydown);
}

function closeDrawer() {
  drawer.classList.remove('ath-open'); moreBtn.setAttribute('aria-expanded','false');
  document.body.style.overflow = ''; // restores scroll
  document.removeEventListener('keydown', onKeydown);
  setTimeout(() => { drawer.hidden = true; overlay.hidden = true; moreBtn.focus(); }, 300);
}

  function onKeydown(e){ if (e.key === 'Escape') closeDrawer(); }

  moreBtn.addEventListener('click', openDrawer);
  closeBtn.addEventListener('click', closeDrawer);
  overlay.addEventListener('click', closeDrawer);
})();
</script>

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

    <link href="css/style2.css" rel="stylesheet" type="text/css">
 
    <script>
        function searchAthletes() {
            const searchInput = document.getElementById('searchInput').value.toLowerCase();
            const cards = document.querySelectorAll('.athlete-card');

            cards.forEach(card => {
                const textContent = card.innerText.toLowerCase();
                if (textContent.includes(searchInput)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }
    </script>
    <style>
        body {
            background-color:rgb(238, 241, 244);
            align:center;
        }
        
        .search-bar {
            margin-bottom: 20px;
            text-align: center;
        }
        .search-bar input {
            padding: 10px;
            width: 300px;
            margin-right: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }
        .athlete-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .athlete-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 15px;
            padding: 20px;
            width: 300px;
            text-align: center;
        }
        
       .athlete-card h3 {
            margin: 10px 0 5px;
            color: #005398;
        }
        .athlete-card p {
            margin: 5px 0;
            color: #666;
        }

        .filter-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }

        .filter-btn {
            background-color: #005398;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            width: 150px; /* Set to desired consistent width */
            text-align: center;
        }

        .filter-btn:hover {
            background-color: #000000;
            color: white;
        }

        .filter-btn.active {
            background-color: #000000;
            color: white;
        }

    </style>
</head>
<body>
 <div class="carousel-small"> 
    <div class="page-header-home">
    <div class="header-content">
        <span class="header-text">Athletes at the Next Level</span>
    </div>
    </div>    
                            <img src="images/NextLevel/simsknicks.jpeg" class="carousel-image active" alt="Carousel Image">
                    <img src="images/NextLevel/christierney.jpg" class="carousel-image " alt="Carousel Image">
                    <img src="images/NextLevel/resor.jpeg" class="carousel-image " alt="Carousel Image">
                    <img src="images/NextLevel/parsonsUSAhockey.jpg" class="carousel-image " alt="Carousel Image">
                    <img src="images/NextLevel/fayneoliers.jpeg" class="carousel-image " alt="Carousel Image">
                    <img src="images/NextLevel/GedmanPride.jpeg" class="carousel-image " alt="Carousel Image">
                    <img src="images/NextLevel/kevinhayes.jpg" class="carousel-image " alt="Carousel Image">
                    <img src="images/NextLevel/warrencummings.jpeg" class="carousel-image " alt="Carousel Image">
                    <img src="images/NextLevel/MorganCheek.png" class="carousel-image " alt="Carousel Image">
                    <img src="images/NextLevel/woodasstcapt.jpeg" class="carousel-image " alt="Carousel Image">
                    <img src="images/NextLevel/BenzanMystics.jpeg" class="carousel-image " alt="Carousel Image">
                    <img src="images/NextLevel/riceyanks.jpeg" class="carousel-image " alt="Carousel Image">
            </div>    <!-- <div class="banner-text">Athletes at the Next Level</div> -->
    <br>

    <!-- Filter Buttons -->
    <!-- Filter Buttons -->
    <div class="filter-buttons">
        <button class="filter-btn active" onclick="loadFilteredAthletes('pro', this)">Professional</button>
        <button class="filter-btn" onclick="loadFilteredAthletes('college', this)">College</button>
    </div>
    <br>
    <div class="search-bar">
        <input type="text" id="searchInput" placeholder="Search athletes..." oninput="searchAthletes()">
    </div>

    <div id="athleteContainer" class="athlete-container"></div>

    <script>
        // Auto-load professional filter
        window.onload = function () {
            const proBtn = document.querySelector('.filter-btn[onclick*="pro"]');
            if (proBtn) filterAthletes('pro', proBtn);
        };

        function loadFilteredAthletes(type, btn) {
            fetch(`fetch_athletes_filtered.php?type=${type}`)
                .then(res => res.text())
                .then(html => {
                    document.getElementById('athleteContainer').innerHTML = html;

                    // Apply active class
                    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                    if (btn) btn.classList.add('active');

                    // Run search on newly inserted content
                    searchAthletes();
                })
                .catch(err => console.error("Failed to load filtered athletes:", err));
        }

        function searchAthletes() {
            const searchInput = document.getElementById('searchInput').value.toLowerCase();
            const cards = document.querySelectorAll('.athlete-card');

            cards.forEach(card => {
                const textContent = card.innerText.toLowerCase();
                if (textContent.includes(searchInput)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        function filterAthletes(type, btn) {
            const cards = document.querySelectorAll('.athlete-card');
            cards.forEach(card => {
                const cardType = card.getAttribute('data-type');
                if (type === 'all' || cardType === type) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });

            // Handle button active class
            const buttons = document.querySelectorAll('.filter-btn');
            buttons.forEach(b => b.classList.remove('active'));
            if (btn) btn.classList.add('active');
        }    
        window.onload = function () {
            const proBtn = document.querySelector('.filter-btn[onclick*="pro"]');
            if (proBtn) loadFilteredAthletes('pro', proBtn);
        };
        </script>
</body>
<style>.social-circle {
  width: 40px;
  height: 40px;
  background-color: white;
  color: #004990;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s ease;
}

.social-circle:hover {
  background-color: #0056b3;
  color: white;
  transform: scale(1.1);
}

.social-circle img {
  display: block;
}

.footer-logo {
  width: 80px;
  height: auto;
}

</style>
<!-- FOOTER -->
<div style="background-color: #343434; color: white; padding: 40px 20px; position: relative; font-family: 'Segoe UI', sans-serif;">
    <div style="max-width: 1200px; margin: auto; display: flex; justify-content: space-between; flex-wrap: wrap;">

        <!-- Column 1: Empty or future content -->
        <div style="flex: 1; min-width: 200px;">
            <!-- Reserved space or add content here -->
             <!-- Column 1: Nobles Logo -->
            <div style="flex: 1; min-width: 200px; display: flex; justify-content: center; align-items: center;">
                <img src="images/Nobles_Logo_Suite_RGB__Athletics_Lockup_White.png"  alt="Nobles Logo" class="footer-logo"/>
            </div>

        </div>

        <!-- Column 2: Contact Info -->
        <div style="flex: 1; min-width: 200px; text-align: center;">
            <h3 style="margin-bottom: 15px;">Contact</h3>
            <p style="margin: 5px 0 0;">10 Campus Drive, Dedham, MA 02026</p>
            <p style="margin: 5px 0 0;">Phone: (781) 326-3700</p>
            <p style="margin: 0;">&copy; 2026 Noble and Greenough School</p>
       </div>

        <!-- Column 3: Connect -->
        <div style="flex: 1; min-width: 200px; text-align: center;">
            <h3 style="margin-bottom: 15px;">Connect</h3>
            <div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;">
                <a href="https://www.instagram.com/noblesathletics/#" target="_blank" class="social-circle"><i class="fab fa-instagram"></i></a>
                <a href="https://www.youtube.com/channel/UCA0IsUo7PMlbdZ7Kra-12Aw" target="_blank" class="social-circle"><i class="fab fa-youtube"></i></a>
                <a href="https://fan.hudl.com/usa/ma/dedham/organization/4965/noble--greenough-high-school" target="_blank" class="social-circle">
                    <img src="images/hudl.jpeg" alt="Hudl" style="width: 20px; height: 20px;">
                </a>
            </div>
        </div>
    </div>

    <!-- Scroll to Top Button -->
    <div class="up-arrow" onclick="scrollToTop()" style="
        position: absolute;
        right: 20px;
        bottom: 20px;
        background-color: white;
        color: #004990;
        padding: 10px;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.3s;
    ">
        &#x2191;
    </div>
</div>

<!-- SCROLL SCRIPT -->
<script>
    function scrollToTop() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }
</script>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<!-- Carousel Script -->
<script src="js/carousel.js"></script>
</html>