Skip to main content

head

<!-- Mid-month Billing Reminder banner (15–18) - adaptive sizing for Amplify vs Classic -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const startDay = 1;
  const endDay = 18;

  const now = new Date();
  const day = now.getDate();
  if (day < startDay || day > endDay) return;

  const key = `dwaBillingBannerDismissed-${now.getFullYear()}-${now.getMonth()+1}`;
  if (localStorage.getItem(key) === "true") return;

  const BANNER_ID = "dwa-billing-banner";
  if (document.getElementById(BANNER_ID)) return; // prevent duplicates

  function isAdminEditingView() {
    return window.location.hash && window.location.hash.includes("/settings/");
  }
  function getAdminOffsetPx() {
    return isAdminEditingView() ? 72 : 0;
  }

  // Detect Amplify-ish pages (best effort)
  function isAmplifyPage() {
    return !!(
      document.querySelector(".amplify-html-embed-container") ||
      document.querySelector(".amplify-section-container") ||
      document.querySelector(".amplify-container") ||
      document.querySelector("#app .amplify-container") ||
      document.body.className.toLowerCase().includes("amplify")
    );
  }

  const amplify = isAmplifyPage();

  // Size presets:
  // - Amplify: smaller so it doesn't feel huge on the homepage
  // - Classic: bigger for internal pages readability
  const sizes = amplify
    ? {
        title: "clamp(1.05rem, 1.6vw, 1.25rem)",
        msg:   "clamp(1.00rem, 1.7vw, 1.18rem)",
        btn:   "clamp(.95rem, 1.5vw, 1.05rem)",
        padY:  "14px"
      }
    : {
        title: "clamp(1.2rem, 2.4vw, 1.55rem)",
        msg:   "clamp(1.1rem, 2.6vw, 1.4rem)",
        btn:   "clamp(1.0rem, 2.0vw, 1.15rem)",
        padY:  "18px"
      };

  const banner = document.createElement("div");
  banner.id = BANNER_ID;
  banner.setAttribute("role", "region");
  banner.setAttribute("aria-label", "Billing reminder");
  banner.style.position = "sticky";
  banner.style.top = getAdminOffsetPx() + "px";
  banner.style.zIndex = "4000"; // keep below admin overlay
  banner.style.background = "#14558E";
  banner.style.color = "#ffffff";
  banner.style.padding = `${sizes.padY} 16px`;
  banner.style.display = "block";

  const inner = document.createElement("div");
  inner.style.maxWidth = "1200px";
  inner.style.margin = "0 auto";
  inner.style.display = "flex";
  inner.style.flexWrap = "wrap";
  inner.style.gap = "14px";
  inner.style.alignItems = "center";
  inner.style.justifyContent = "space-between";

  const textWrap = document.createElement("div");
  textWrap.style.display = "flex";
  textWrap.style.flexDirection = "column";
  textWrap.style.gap = "4px";
  textWrap.style.maxWidth = "920px";

  const title = document.createElement("strong");
  title.textContent = "Billing Reminder";
  title.style.fontSize = sizes.title;
  title.style.lineHeight = "1.25";
  title.style.letterSpacing = ".01em";

  const msg = document.createElement("span");
  msg.style.fontSize = sizes.msg;
  msg.style.lineHeight = "1.35";
  msg.style.fontWeight = "600";
  msg.innerHTML = `Payments due soon. Avoid late fees and pay online in minutes.
    <a href="/pay-my-bill" style="color:#fff; text-decoration: underline; font-weight:900;">Pay My Bill</a>`;

  textWrap.appendChild(title);
  textWrap.appendChild(msg);

  const btn = document.createElement("button");
  btn.type = "button";
  btn.setAttribute("aria-label", "Dismiss billing reminder");
  btn.textContent = "Dismiss";
  btn.style.background = "transparent";
  btn.style.color = "#ffffff";
  btn.style.border = "2px solid #ffffff";
  btn.style.borderRadius = "12px";
  btn.style.padding = amplify ? "10px 12px" : "12px 16px";
  btn.style.fontWeight = "900";
  btn.style.cursor = "pointer";
  btn.style.fontSize = sizes.btn;
  btn.style.whiteSpace = "nowrap";

  btn.addEventListener("focus", function () {
    btn.style.outline = "3px solid #0B1F33";
    btn.style.outlineOffset = "3px";
  });
  btn.addEventListener("blur", function () {
    btn.style.outline = "none";
  });

  btn.addEventListener("click", function () {
    localStorage.setItem(key, "true");
    banner.remove();
  });

  inner.appendChild(textWrap);
  inner.appendChild(btn);
  banner.appendChild(inner);
  document.body.prepend(banner);

  function updateBannerOffset() {
    const el = document.getElementById(BANNER_ID);
    if (!el) return;
    el.style.top = getAdminOffsetPx() + "px";
  }

  window.addEventListener("hashchange", updateBannerOffset);
  window.addEventListener("resize", updateBannerOffset);
});
</script>

<!-- sticky nav -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  const links = document.querySelectorAll('a.btn-pill[href="/upcoming-events"]');

  links.forEach(link => {
    if (link.textContent.trim() === 'View Board Meetings') {
      link.textContent = 'View more';
    }
  });
});
</script>
<script>
(function () {
  var ROOT = '.amplify-carousel-container.section-instance-7e3be00f-3b35-4830-b8bc-f90717c6f5ba';
  var FIRST_SECTION = '.amplify-section-instance';
  var WAVE_ID = 'carousel-bleed-wave';

  var D = 'M681.358 99.6025C419.811 130.111 119.139 45.2462 -0.00375175 0L-0.00390625 110H1597.67H1685.33H1773V109V47.7646C1253.91 -13.3418 965.155 66.4982 681.358 99.6025Z';

  function makeWave() {
    var ns='http://www.w3.org/2000/svg';
    var svg=document.createElementNS(ns,'svg');
    svg.id=WAVE_ID;
    svg.setAttribute('viewBox','0 0 1773 110');
    svg.setAttribute('preserveAspectRatio','none'); // <- stretches full width
    svg.setAttribute('aria-hidden','true');
    svg.setAttribute('focusable','false');
    // full-bleed, pinned to bottom of the carousel
    svg.style.position='absolute';
    svg.style.left='0';
    svg.style.right='0';
    svg.style.bottom='-1px';       // tuck seam
    svg.style.width='100%';
    svg.style.height='110px';       // matches viewBox height; adjust if needed
    svg.style.display='block';
    svg.style.pointerEvents='none';
    svg.style.zIndex='3';

    var path=document.createElementNS(ns,'path');
    path.setAttribute('d', D);
    path.setAttribute('fill', '#1978BE'); // required color
    svg.appendChild(path);
    return svg;
  }

  function inject() {
    var container=document.querySelector(ROOT);
    if(!container) return false;

    // ensure positioning context
    if(getComputedStyle(container).position==='static'){
      container.style.position='relative';
    }

    // remove any previous wave(s)
    container.querySelectorAll('#'+CSS.escape(WAVE_ID)).forEach(function(n){ n.remove(); });

    var wave=makeWave();

    // insert at the root, *before* the first .amplify-section-instance,
    // NOT inside the inner .container with padding
    var firstSection=container.querySelector(FIRST_SECTION);
    if(firstSection){
      container.insertBefore(wave, firstSection);
    } else {
      container.appendChild(wave);
    }
    return true;
  }

  if(!inject()){
    var mo=new MutationObserver(function(){ if(inject()) mo.disconnect(); });
    mo.observe(document.documentElement,{childList:true,subtree:true});
    setTimeout(function(){ mo.disconnect(); }, 8000);
  }
})();
</script>
<style>
/* Avoid a black bar overlapping; push the next section if needed */
.amplify-carousel-container.section-instance-7e3be00f-3b35-4830-b8bc-f90717c6f5ba + .amplify-section-instance {
  margin-top: 0; /* adjust only if you see a gap/overlap */
}

/* If the carousel has a bottom overlay, keep it below the wave */
.amplify-carousel-container .overlay-container { z-index: 1; }
#carousel-bleed-wave { z-index: 3; }
/* push wave down a bit so it doesn't sit tight under the button */
#carousel-bleed-wave {
  margin-top: 3rem; /* adjust to taste (e.g. 1.5rem = ~24px) */
}

.splide__slide .carousel-slide-content a .btn-pill {
    margin-top: 1.5rem;
    color: #fff;
    border-color: #fff;
    margin-bottom: .75rem !important;
}
</style>

<!-- change defaut loading status in submissions dashboard  -->
<script>
(function () {
  function isFormSubmissionsPage() {
    return window.location.hash === '#/form-submissions';
  }

  function setStatusToAll() {
    if (!isFormSubmissionsPage()) return;

    const statusSelect = document.querySelector('#submissionStatus');

    if (!statusSelect) return;

    if (statusSelect.value === '0') {
      statusSelect.value = '';
      statusSelect.dispatchEvent(new Event('input', { bubbles: true }));
      statusSelect.dispatchEvent(new Event('change', { bubbles: true }));
    }
  }

  // Check after full page load
  window.addEventListener('load', function () {
    setTimeout(setStatusToAll, 500);
    setTimeout(setStatusToAll, 1500);
    setTimeout(setStatusToAll, 3000);
  });

  // Check when hash route changes
  window.addEventListener('hashchange', function () {
    setTimeout(setStatusToAll, 500);
    setTimeout(setStatusToAll, 1500);
  });

  // Check when Angular/admin content renders dynamically
  const observer = new MutationObserver(function () {
    setStatusToAll();
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();
</script>

Join our mailing list