Community Resources Use the category tiles, search, and region filter to quickly find support in your area. What Do You Need Assistance With? Search Region All Regions Clear No filters 0 results Tip: You can select multiple categories at once (e.g., Food + Housing). .cr-page-wrap{ padding:2rem 0 3.5rem; max-width:1140px; margin:0 auto; } .cr-hero{ background: linear-gradient(0deg, #0a4a67, #0b3b52); color:#fff; border-radius:18px; box-shadow:0 18px 45px rgba(0,0,0,.08); overflow:hidden; } .cr-hero-inner{ padding:1.6rem 1.4rem; } .cr-hero-title{ font-weight:900; letter-spacing:.2px; font-size:1.35rem; } .cr-hero-sub{ opacity:.92; max-width:75ch; } .cr-section-title{ font-weight:900; letter-spacing:.2px; margin:1.75rem 0 1rem; text-align:center; color:#12202a; } .cr-hero-title{ color:#ffffff!important; } .cr-hero-sub{ color:#ffffff!important;; } .cr-tiles{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; } .cr-btn-learn, .cr-btn-site{ color:#ffffff; } .cr-btn-learn:hover, .cr-btn-learn:focus, .cr-btn-learn:active, .cr-btn-site:hover, .cr-btn-site:focus, .cr-btn-site:active{ color:#ffffff !important; } .cr-tile{ display:inline-flex; align-items:center; gap:.55rem; padding:.55rem .85rem; background:#fff; border:1px solid rgba(10,25,40,.12); border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.05); color:#0c2230; font-weight:800; user-select:none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; white-space:nowrap; } .cr-tile i{ font-size:1rem; width:1.1rem; text-align:center; } .cr-tile:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.08); } .cr-tile[aria-pressed="true"]{ border-color: rgba(11,59,82,.35); box-shadow:0 14px 30px rgba(11,59,82,.16); outline:2px solid rgba(11,59,82,.12); } .cr-dot{ width:.55rem; height:.55rem; border-radius:999px; box-shadow:0 0 0 3px rgba(0,0,0,.03); } .cr-dot-food{ background:#7c3aed; } .cr-dot-housing{ background:#16a34a; } .cr-dot-mental{ background:#0f766e; } .cr-dot-idd{ background:#8b5cf6; } .cr-dot-domestic{ background:#dc2626; } .cr-dot-county{ background:#fb923c; } .cr-dot-child{ background:#0ea5e9; } .cr-dot-parenting{ background:#2563eb; } .cr-dot-legal{ background:#f59e0b; } .cr-dot-substance{ background:#ef4444; } .cr-dot-newborn{ background:#10b981; } .cr-dot-disability{ background:#14b8a6; } .cr-filters{ background:#fff; border:1px solid rgba(10,25,40,.12); border-radius:18px; box-shadow:0 18px 45px rgba(0,0,0,.08); padding:1.15rem; margin-top:1rem; } .cr-input, .cr-select{ border-radius:12px; border-color: rgba(10,25,40,.16); } .cr-input:focus, .cr-select:focus{ box-shadow:0 0 0 .2rem rgba(11,59,82,.12); border-color: rgba(11,59,82,.35); } .cr-results-meta{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; margin-top:1rem; } .cr-pill{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .65rem; border-radius:999px; background: rgba(11,59,82,.08); border:1px solid rgba(11,59,82,.12); font-weight:800; font-size:.9rem; color:#0b2d40; } .cr-resource-card{ background:#fff; border:1px solid rgba(10,25,40,.12); border-radius:18px; box-shadow:0 18px 45px rgba(0,0,0,.08); overflow:hidden; } .cr-resource-row{ display:grid; grid-template-columns: 88px 1fr 220px; gap:1rem; padding:1rem; align-items:center; } .cr-logo{ width:72px; height:72px; border-radius:14px; background:#fff; border:1px solid rgba(10,25,40,.12); overflow:hidden; display:grid; place-items:center; } .cr-logo img{ width:100%; height:100%; object-fit:cover; display:block; } .cr-resource-meta{ min-width:0; } .cr-tagline{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:center; margin-bottom:.35rem; } .cr-category-tag{ display:inline-flex; align-items:center; gap:.45rem; padding:.25rem .55rem; border-radius:999px; border:1px solid rgba(0,0,0,.06); background: rgba(0,0,0,.03); font-weight:900; font-size:.78rem; letter-spacing:.2px; color:#0b2d40; } .cr-swatch{ width:.7rem; height:.7rem; border-radius:999px; } .cr-swatch-food{ background:#7c3aed; } .cr-swatch-housing{ background:#16a34a; } .cr-swatch-mental{ background:#0f766e; } .cr-swatch-idd{ background:#8b5cf6; } .cr-swatch-domestic{ background:#dc2626; } .cr-swatch-county{ background:#fb923c; } .cr-swatch-child{ background:#0ea5e9; } .cr-swatch-parenting{ background:#2563eb; } .cr-swatch-legal{ background:#f59e0b; } .cr-swatch-substance{ background:#ef4444; } .cr-swatch-newborn{ background:#10b981; } .cr-swatch-disability{ background:#14b8a6; } .cr-resource-title{ font-weight:900; margin:0 0 .25rem; font-size:1rem; line-height:1.2; color:#12202a; } .cr-resource-desc{ margin:0 0 .45rem; color: rgba(10,25,40,.82); font-size:.95rem; line-height:1.35; text-align:left; } .cr-resource-url{ font-size:.9rem; word-break:break-word; margin:0; } .cr-resource-url a{ color:#0b3b52; font-weight:900; text-decoration:none; } .cr-resource-url a:hover{ text-decoration:underline; } .cr-actions{ display:flex; flex-direction:column; gap:.55rem; align-items:stretch; justify-content:center; } .cr-btn-pill{ border-radius:999px; font-weight:900; padding:.55rem .9rem; } .cr-btn-learn{ background:#0b3b52; border-color:#0b3b52; color:#fff; } .cr-btn-learn:hover{ background:#082b3d; border-color:#082b3d; color:#fff; } .cr-btn-site{ background:#1f98bd; border-color:#1f98bd; color:#fff; } .cr-btn-site:hover{ background:#167b98; border-color:#167b98; color:#fff; } .cr-empty{ background:#fff; border:1px dashed rgba(10,25,40,.25); border-radius:18px; padding:1.5rem; text-align:center; color: rgba(10,25,40,.72); } @media (max-width:768px){ .cr-page-wrap{ padding:1.5rem .75rem 3rem; } .cr-hero-inner{ padding:1.25rem 1rem; } .cr-section-title{ font-size:1.15rem; } .cr-tiles{ gap:.55rem; } .cr-tile{ padding:.5rem .7rem; font-size:.92rem; } .cr-filters{ padding:1rem; } .cr-resource-row{ grid-template-columns: 78px 1fr; grid-template-areas: "logo meta" "actions actions"; } .cr-resource-row > .cr-logo{ grid-area:logo; } .cr-resource-row > .cr-resource-meta{ grid-area:meta; } .cr-resource-row > .cr-actions{ grid-area:actions; flex-direction:row; justify-content:flex-end; gap:.6rem; } } @media (max-width:420px){ .cr-resource-row > .cr-actions{ flex-direction:column; align-items:stretch; } .cr-tile{ width:100%; justify-content:center; } } (() => { const CATEGORIES = [ { key:"Food", label:"Food", icon:"fa-solid fa-utensils", dotClass:"cr-dot-food", swatchClass:"cr-swatch-food" }, { key:"Housing", label:"Housing", icon:"fa-solid fa-house", dotClass:"cr-dot-housing", swatchClass:"cr-swatch-housing" }, { key:"Mental Health Services", label:"Mental Health", icon:"fa-solid fa-brain", dotClass:"cr-dot-mental", swatchClass:"cr-swatch-mental" }, { key:"IDD Resources", label:"IDD Resources", icon:"fa-solid fa-puzzle-piece", dotClass:"cr-dot-idd", swatchClass:"cr-swatch-idd" }, { key:"Domestic Violence", label:"Domestic Violence", icon:"fa-solid fa-shield-heart", dotClass:"cr-dot-domestic", swatchClass:"cr-swatch-domestic" }, { key:"County Assistance", label:"County Assistance", icon:"fa-solid fa-building-columns", dotClass:"cr-dot-county", swatchClass:"cr-swatch-county" }, { key:"Child Care", label:"Child Care", icon:"fa-solid fa-baby", dotClass:"cr-dot-child", swatchClass:"cr-swatch-child" }, { key:"Parenting Classes", label:"Parenting", icon:"fa-solid fa-children", dotClass:"cr-dot-parenting", swatchClass:"cr-swatch-parenting" }, { key:"Legal", label:"Legal", icon:"fa-solid fa-gavel", dotClass:"cr-dot-legal", swatchClass:"cr-swatch-legal" }, { key:"Substance Abuse", label:"Substance Abuse", icon:"fa-solid fa-hand-holding-medical", dotClass:"cr-dot-substance", swatchClass:"cr-swatch-substance" }, { key:"Newborn Care", label:"Newborn Care", icon:"fa-solid fa-person-pregnant", dotClass:"cr-dot-newborn", swatchClass:"cr-swatch-newborn" }, { key:"Disability Services", label:"Disability Services", icon:"fa-solid fa-wheelchair", dotClass:"cr-dot-disability", swatchClass:"cr-swatch-disability" } ]; const RESOURCES = [ { region:"Pikes Peak Region", name:"Hunger Free Colorado", categories:["Food"], description:"SNAP Services & Food Resources", website:"https://hungerfreecolorado.org/find-food/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/HungerFreeColorado.webp" }, { region:"Pikes Peak Region", name:"Pikes Peak Library District", categories:["County Assistance"], description:"Community Resources Guide", website:"https://research.ppld.org/HelpingHands", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/PPLD.webp" }, { region:"Pikes Peak Region", name:"Colorado Springs Housing Authority", categories:["Housing"], description:"Affordable Housing", website:"https://csha.us/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/CSHousingAuthority.webp" }, { region:"Pikes Peak Region", name:"Colorado Crisis Services", categories:["Mental Health Services"], description:"Urgent Mental Health Support", website:"https://coloradocrisisservices.org/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/COCrisisServices.webp" }, { region:"Pikes Peak Region", name:"211 Colorado", categories:["County Assistance"], description:"Resources & Services", website:"https://www.211colorado.org/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/211.webp" }, { region:"Eastern Plains", name:"Hunger Free Colorado", categories:["Food"], description:"SNAP Services & Food Resources", website:"https://hungerfreecolorado.org/find-food/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/HungerFreeColorado.webp" }, { region:"Eastern Plains", name:"Colorado Crisis Services", categories:["Mental Health Services"], description:"Urgent Mental Health Support", website:"https://coloradocrisisservices.org/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/COCrisisServices.webp" }, { region:"Eastern Plains", name:"Limon Food Bank", categories:["Food"], description:"Resources & Services", website:"https://m.facebook.com/100068077351401/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/LimonFoodBank.webp" }, { region:"Eastern Plains", name:"211 Colorado", categories:["County Assistance"], description:"Resources & Services", website:"https://www.211colorado.org/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/211ECR.webp" }, { region:"Eastern Plains", name:"Limon Child Development Center", categories:["Child Care"], description:"Resources & Services", website:"https://www.facebook.com/p/Limon-Child-Development-Center-100063530534700/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/Limon_Head_Start_ojFrZmr.webp" }, { region:"Eastern Plains", name:"Eastern Colorado Services for the Developmentally Disabled", categories:["Disability Services","IDD Resources"], description:"Resources & Services", website:"https://www.ecsdd.org/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/Untitled_design_4.webp" }, { region:"Eastern Plains", name:"Colorado East Community Action Agency", categories:["County Assistance"], description:"Resources & Services", website:"https://www.facebook.com/coloeastcaa", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/Colorado_East_Community_Action_Agency_zfvCbGr.webp" }, { region:"Eastern Plains", name:"Women’s Crisis & Outreach Center (Douglas County)", categories:["Domestic Violence"], description:"Resources & Services", website:"https://www.thecrisiscenter.org/", image:"https://storage.googleapis.com/treatspace-prod-media/pracimg/u-2291/Untitled_design_5.webp" } ]; const els = { tiles: document.getElementById("crCategoryTiles"), search: document.getElementById("crSearchInput"), region: document.getElementById("crRegionSelect"), clear: document.getElementById("crClearBtn"), results: document.getElementById("crResults"), resultsCount: document.getElementById("crResultsCount"), activeFiltersText: document.getElementById("crActiveFiltersText") }; const state = { selectedCategories: new Set(), searchText: "", region: "all" }; const hostnameFromUrl = (url) => { try { return new URL(url).hostname.replace(/^www\./, ""); } catch { return url; } }; const buildRegions = () => { const regions = Array.from(new Set(RESOURCES.map(r => r.region))).sort((a,b) => a.localeCompare(b)); const opts = ["all", ...regions]; els.region.innerHTML = opts.map(r => { const label = r === "all" ? "All Regions" : r; return `${label}`; }).join(""); els.region.value = encodeURIComponent("all"); }; const renderTiles = () => { els.tiles.innerHTML = CATEGORIES.map(cat => { const pressed = state.selectedCategories.has(cat.key) ? "true" : "false"; return ` ${cat.label} `; }).join(""); }; const activeFiltersLabel = () => { const cats = Array.from(state.selectedCategories); const parts = []; if (cats.length) parts.push(cats.join(", ")); if (state.region !== "all") parts.push(`Region: ${state.region}`); if (state.searchText.trim()) parts.push(`Search: "${state.searchText.trim()}"`); return parts.length ? parts.join(" • ") : "No filters"; }; const matches = (resource) => { const text = state.searchText.trim().toLowerCase(); if (text){ const hay = [ resource.name, resource.description, resource.website, resource.categories.join(" "), resource.region ].join(" ").toLowerCase(); if (!hay.includes(text)) return false; } if (state.region !== "all"){ if (resource.region !== state.region) return false; } if (state.selectedCategories.size){ const hasAny = resource.categories.some(c => state.selectedCategories.has(c)); if (!hasAny) return false; } return true; }; const categoryMeta = (catKey) => CATEGORIES.find(c => c.key === catKey); const categoryTagHtml = (catKey) => { const meta = categoryMeta(catKey); const swatch = meta ? meta.swatchClass : "cr-swatch-county"; return ` ${catKey} `; }; const renderResults = () => { const filtered = RESOURCES.filter(matches); els.resultsCount.textContent = String(filtered.length); els.activeFiltersText.textContent = activeFiltersLabel(); if (!filtered.length){ els.results.innerHTML = ` No matches found Try clearing filters or adjusting your search. `; return; } els.results.innerHTML = filtered.map((r) => { const tags = r.categories.map(categoryTagHtml).join(""); const host = hostnameFromUrl(r.website); return ` ${tags} ${r.name} ${r.description} ${host} Learn More Visit Website `; }).join(""); }; const syncTilePressedStates = () => { els.tiles.querySelectorAll(".cr-tile").forEach(btn => { const cat = btn.getAttribute("data-cat"); btn.setAttribute("aria-pressed", state.selectedCategories.has(cat) ? "true" : "false"); }); }; const clearAll = () => { state.selectedCategories.clear(); state.searchText = ""; state.region = "all"; els.search.value = ""; els.region.value = encodeURIComponent("all"); syncTilePressedStates(); renderResults(); }; const initEvents = () => { els.tiles.addEventListener("click", (e) => { const btn = e.target.closest(".cr-tile"); if (!btn) return; const cat = btn.getAttribute("data-cat"); if (!cat) return; if (state.selectedCategories.has(cat)) state.selectedCategories.delete(cat); else state.selectedCategories.add(cat); syncTilePressedStates(); renderResults(); }); els.search.addEventListener("input", () => { state.searchText = els.search.value || ""; renderResults(); }); els.region.addEventListener("change", () => { const val = decodeURIComponent(els.region.value); state.region = val || "all"; renderResults(); }); els.clear.addEventListener("click", clearAll); els.results.addEventListener("click", (e) => { const btn = e.target.closest("[data-action='learn']"); if (!btn) return; const url = btn.getAttribute("data-site"); if (!url) return; window.open(url, "_blank", "noopener"); }); }; buildRegions(); renderTiles(); initEvents(); renderResults(); })();
