<!--
Donor Wall for Squarespace (Drop in a Code Block)
Bolder patriotic look + memorial styling + animated flag watermark
-->
<div class="donorwall patriotic bold">
<section class="dw-hero">
<div class="dw-flagbanner" aria-hidden="true"></div>
<h2>🇺🇸 Raising the Roof for Our Heroes — Donor Wall 🇺🇸</h2>
<p>With gratitude to our supporters of American Legion Post 222 and the Woody Woodbury Hall Dedication.</p>
</section>
<!-- Controls -->
<div class="dw-controls">
<div class="dw-filters">
<button data-filter="all" class="active">All</button>
<button data-filter="person">Individuals</button>
<button data-filter="memory">In Memory Of</button>
<button data-filter="business">Businesses</button>
</div>
<div class="dw-tier">
<label for="tier">Tier</label>
<select id="tier">
<option value="">All tiers</option>
<option>Platinum Hero</option>
<option>Gold Star</option>
<option>Supporter</option>
<option>Friend</option>
</select>
</div>
<div class="dw-search">
<input id="search" type="search" placeholder="Search name or business..." aria-label="Search donors" />
</div>
</div>
<!-- Results grid -->
<div id="dw-grid" class="dw-grid" aria-live="polite"></div>
</div>
<style>
:root{--navy:#0b2149;--red:#b22234;--white:#ffffff;--blue:#1b3a6b;--gold:#c99a2e;--muted:#42526e;--border:#e6e9f0}
.donorwall{font-family: Montserrat, Arial, sans-serif; color:var(--navy); position:relative}
/* Bold Patriotic background with animated flag watermark */
.donorwall.bold{background:linear-gradient(180deg,rgba(11,33,73,.96),rgba(27,58,107,.92)), url('https://www.transparenttextures.com/patterns/stardust.png'); background-size:cover; color:#fff; position:relative; overflow:hidden}
.donorwall.bold::before{content:""; position:absolute; inset:0; background:url('https://upload.wikimedia.org/wikipedia/commons/5/5c/US_flag_large_51_stars.png') center/80% no-repeat; opacity:0.08; z-index:0; animation:wave 12s ease-in-out infinite alternate}
.donorwall>*{position:relative; z-index:1}
@keyframes wave{
0%{background-position:center top}
50%{background-position:center 10px}
100%{background-position:center -10px}
}
.donorwall.bold .dw-hero h2{color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.5)}
.donorwall.bold .dw-hero p{color:#f0f0f0}
/* Flag banner */
.dw-flagbanner{height:36px; background:linear-gradient(90deg,var(--red) 0 20%, var(--white) 20% 40%, var(--blue) 40% 60%, var(--white) 60% 80%, var(--red) 80% 100%); margin:0 auto 18px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.3)}
.donorwall .dw-hero{text-align:center; margin: 0 auto 1.25rem; max-width: 900px; padding-top:.5rem}
.donorwall .dw-hero h2{font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin: 0.5rem 0; font-weight:900}
.donorwall .dw-controls{display:grid; grid-template-columns: 1fr auto auto; gap:.75rem; align-items:center; margin: 1rem 0 1.25rem}
.donorwall .dw-filters{display:flex; flex-wrap:wrap; gap:.5rem}
.donorwall .dw-filters button{border:2px solid #fff; background:var(--blue); color:#fff; padding:.5rem .9rem; border-radius:999px; cursor:pointer; font-size:1rem; font-weight:600; text-transform:uppercase}
.donorwall .dw-filters button.active, .donorwall .dw-filters button:hover{background:var(--red); border-color:#fff}
.donorwall .dw-tier select, .donorwall .dw-search input{border:2px solid #fff; padding:.5rem .7rem; border-radius:.6rem; font-size:.95rem}
.donorwall .dw-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; padding-bottom:16px}
@media (max-width:1100px){ .donorwall .dw-grid{grid-template-columns: repeat(8, 1fr);} }
@media (max-width:700px){ .donorwall .dw-grid{grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px} .donorwall .dw-controls{grid-template-columns:1fr} .donorwall .dw-card, .donorwall .dw-card.business{grid-column:auto} .donorwall .dw-card{padding:18px} .donorwall .dw-name{font-size:1.05rem} }
/* Card */
.donorwall .dw-card{grid-column: span 4; background:#fff; color:var(--navy); border:2px solid var(--navy); border-radius:18px; box-shadow:0 4px 8px rgba(9,30,66,.3); padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; overflow:hidden; transition:transform .2s}
.donorwall .dw-card:hover{transform:translateY(-4px); box-shadow:0 6px 12px rgba(0,0,0,.35)}
.donorwall .dw-card.business{flex-direction:row; text-align:left; grid-column: span 6}
@media (max-width:700px){ .donorwall .dw-card.business{grid-column: span 4; flex-direction:column; text-align:center} }
/* Patriotic border accent */
.donorwall .dw-card::after{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,var(--red),var(--white),var(--blue))}
.donorwall .dw-logo{width:84px; height:84px; border-radius:14px; border:2px solid var(--navy); display:grid; place-items:center; overflow:hidden; background:#f6f8fb; margin-bottom:8px}
.donorwall .dw-logo img{width:100%; height:100%; object-fit:contain}
.donorwall .dw-body{flex:1}
.donorwall .dw-name{font-weight:900; font-size:1.1rem}
.donorwall .dw-meta{font-size:.95rem; color:var(--muted); margin-top:2px}
.donorwall .dw-badge{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; background:var(--navy); color:#fff; padding:.25rem .7rem; border-radius:999px; margin-top:8px; font-weight:600}
.donorwall .dw-badge.flag::before{content:"🇺🇸"; font-size:.95em; line-height:1; filter:saturate(1.1)}
/* Memorial chip */
.donorwall .dw-memory{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.85rem; background:rgba(178,34,52,.1); color:var(--red); padding:.3rem .7rem; border:2px solid rgba(178,34,52,.4); border-radius:999px; font-weight:600}
.donorwall .dw-memory .icon{font-size:1rem; line-height:1}
.donorwall .dw-actions{display:flex; gap:8px; margin-top:8px; justify-content:center}
.donorwall .dw-actions a{font-size:.9rem; text-decoration:none; color:var(--navy); border:2px solid var(--navy); padding:.35rem .7rem; border-radius:8px; font-weight:600}
.donorwall .dw-actions a:hover{background:var(--navy); color:#fff}
</style>
<script>
<!--
Donor Wall for Squarespace (Drop in a Code Block)
Fixed Script so donors render properly
-->
<div class="donorwall patriotic bold">
<section class="dw-hero">
<div class="dw-flagbanner" aria-hidden="true"></div>
<h2>🇺🇸 Raising the Roof for Our Heroes — Donor Wall 🇺🇸</h2>
<p>With gratitude to our supporters of American Legion Post 222 and the Woody Woodbury Hall Dedication.</p>
</section>
<!-- Controls -->
<div class="dw-controls">
<div class="dw-filters">
<button data-filter="all" class="active">All</button>
<button data-filter="person">Individuals</button>
<button data-filter="memory">In Memory Of</button>
<button data-filter="business">Businesses</button>
</div>
<div class="dw-tier">
<label for="tier">Tier</label>
<select id="tier">
<option value="">All tiers</option>
<option>Platinum Hero</option>
<option>Gold Star</option>
<option>Supporter</option>
<option>Friend</option>
</select>
</div>
<div class="dw-search">
<input id="search" type="search" placeholder="Search name or business..." aria-label="Search donors" />
</div>
</div>
<!-- Results grid -->
<div id="dw-grid" class="dw-grid" aria-live="polite"></div>
</div>
<style>
/* styles unchanged for brevity */
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
const donors = [
{ type: 'person', name: 'Ed and Barbara Newman', tier: 'Patriot', amount: 500, memory: '' },
{ type: 'person', name: 'Gator Carter', tier: 'Bronze Star', amount: 2000, memory: 'In memory of Vicki' },
{ type: 'person', name: "Billy O'Hara", tier: 'Friend', amount: 0, memory: '' },
{ type: 'business', name: 'Erica’s Plumbing', tier: 'Business Donation', donation: 'Business Donation — 1-year membership (service in-kind)', url: 'https://www.ericasplumbing.com/', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/a57b5634-742f-4a6f-b47e-7d58b15e73ba/thumbnail_image.png?content-type=image%2Fpng' },
{ type: 'business', name: 'Koala Cooling', tier: 'Business Donation', donation: 'Gift Certificate', url: 'https://example.com', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/57ae7c31-f5a6-409e-9f44-81538efba69c/koaka.png?content-type=image%2Fpng' },
{ type: 'business', name: 'Lickie Stickie BBQ', tier: 'Business Donation', donation: 'Pig Donation', url: 'https://www.LickieStickieBBQ.com', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/48e1c3f1-ba2c-47f2-a578-03e732762166/LICKIE+GOOD+LOGO.jpg?content-type=image%2Fjpeg' },
{ type: 'business', name: 'Tropical Acres', tier: 'Gift Card Donation', donation: 'Gift Card', url: 'https://tropicalacres.com', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/3956487a-68a6-4368-a20c-88fe654ad929/troical+acres%27.jpg?content-type=image%2Fjpeg' },
{ type: 'business', name: 'Mai Kai', tier: 'Business Donation', donation: 'Gift Certificate for Dinner and Show', url: 'https://www.maikai.com', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/233d0175-dbfb-44fc-85cd-0ef8ca9dd3b5/mai+kai%27.png?content-type=image%2Fpng' },
{ type: 'business', name: 'Chick-fil-A', tier: 'Gift Card Donation', donation: 'Gift Card', url: 'https://www.chick-fil-a.com', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/a281a8e9-de50-4613-92aa-46ea42416424/chick+fila.jpg?content-type=image%2Fjpeg' },
{ type: 'business', name: 'AquaPlex Fort Lauderdale', tier: 'Business Donation', donation: 'Support Gift', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/979e86b0-da65-4009-8d9c-d688cebe4a8a/AquaPlex-Fort-Lauderdale_LP-Logo_Courtesy-of-AquaPlex-Fort-Lauderdale-scaled.jpg?content-type=image%2Fjpeg' }
];
const grid = document.getElementById('dw-grid');
const filterButtons = document.querySelectorAll('.dw-filters button');
const tierSelect = document.getElementById('tier');
const searchInput = document.getElementById('search');
let currentFilter = 'all';
function fmtUSD(n){
return n ? new Intl.NumberFormat('en-US',{style:'currency',currency:'USD',maximumFractionDigits:0}).format(n) : '';
}
function makeCard(d){
const card = document.createElement('article');
card.className = 'dw-card ' + (d.type==='business'?'business':'');
// add logo for business donors
if(d.type==='business' && d.logo){
const logo = document.createElement('div');
logo.className = 'dw-logo';
const img = document.createElement('img');
img.src = d.logo; img.alt = d.name + ' logo';
logo.appendChild(img);
card.appendChild(logo);
}
const body = document.createElement('div');
body.className = 'dw-body';
const name = document.createElement('div');
name.className = 'dw-name';
name.textContent = d.name;
const meta = document.createElement('div');
meta.className = 'dw-meta';
let metaParts = [];
if(d.tier) metaParts.push(d.tier);
if(d.type==='person' && d.amount) metaParts.push(fmtUSD(d.amount));
if(d.type==='business' && d.donation) metaParts.push(d.donation);
meta.textContent = metaParts.join(' • ');
body.appendChild(name);
body.appendChild(meta);
card.appendChild(body);
return card;
}
function render(){
grid.innerHTML = '';
donors.forEach(d => grid.appendChild(makeCard(d)));
}
render();
});
