Associations – Intramuros
/* Reset + base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding:16px; color:#1f2a33; }
/* Menus */
label { display:block; font-weight:600; margin:12px 0 6px; }
#city-select, #category-select, #search-input {
padding:10px; font-size:1rem; border-radius:8px; border:1px solid #cbd5e1;
width:100%; max-width:320px; display:block; background:#fff;
}
#search-input { margin-top:10px; }
/* Grid */
#grid_container { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; padding-top:20px; }
/* Card */
.asso_card {
background:#E1E1E1; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:12px;
transition:transform .18s ease, box-shadow .18s ease; overflow:hidden;
}
.asso_card:hover { transform: translateY(-4px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.title_cont { display:flex; align-items:center; gap:14px; }
.logo_asso { width:60px; height:60px; border-radius:50%; object-fit:cover; background:#eee; flex:0 0 60px; }
.title-asso { font-size:1.05rem; font-weight:800; color:#22414E; line-height:1.25; }
.categorie-asso { font-size:.9rem; color:#69838F; margin-top:2px; }
.asso_button {
text-decoration:none !important; color:#fff !important; background:#91070E;
padding:10px 12px; text-align:center; border-radius:8px; font-weight:700; margin-top:6px;
transition: background-color .2s ease;
}
.asso_button:hover { background:#B1272E; }
/* States */
.muted { color:#6b7280; font-size:.95rem; }
Choisissez une commune :
Argentan
Aunou-le-Faucon
Avoine
Bailleul
Boischampré
Boucé
Brieux
Commeaux
Coulonces
Coudehard
Écorches
Écouché-les-Vallées
Fleuré
Fontaine-les-Bassets
Ginai
Gouffern en Auge
Guêprei
Joué-du-Plain
Juvigny-sur-Orne
La Lande-de-Lougé
Le Pin-au-Haras
Lougé-sur-Maire
Louvières-en-Auge
Merri
Mont-Ormel
Montabard
Montreuil-la-Cambe
Monts-sur-Orne
Moulins-sur-Orne
Neauphe-sur-Dive
Nécy
Occagnes
Ommoy
Rânes
Ri
Rônai
Sai
Saint-Brice-sous-Rânes
Saint-Georges-d'Annebecq
Saint-Gervais-des-Sablons
Saint-Lambert-sur-Dive
Sarceaux
Sevrai
Sévigny
Tanques
Tournai-sur-Dive
Trun
Vieux-Pont
Villedieu-lès-Bailleul
Choisissez une catégorie :
Toutes les catégories
Recherche par mot-clé :
const API_BASE = "https://data.appli-intramuros.com/actors/associations";
const API_KEY = "5R0oEftUxt1NVKN3kidLs9K5W2LmdfYT4WUOZ8f4";
let allAssociations = [];
async function loadAssociations(cityId) {
const container = document.getElementById("grid_container");
const catSelect = document.getElementById("category-select");
container.innerHTML = '
Chargement…
';
catSelect.innerHTML = 'Toutes les catégories';
try {
const res = await fetch(`${API_BASE}?city-id=${encodeURIComponent(cityId)}`, {
headers: { "x-api-key": API_KEY }
});
if (!res.ok) throw new Error("Erreur de chargement");
const data = await res.json();
allAssociations = Array.isArray(data) ? data : [];
displayAssociations(allAssociations);
// Catégories uniques triées
const categories = [...new Set(allAssociations.map(a => a.category_name).filter(Boolean))].sort((a,b)=>a.localeCompare(b, 'fr'));
for (const c of categories) {
const opt = document.createElement("option");
opt.value = c;
opt.textContent = c;
catSelect.appendChild(opt);
}
if (!allAssociations.length)
container.innerHTML = '
Aucune association trouvée.
';
} catch (err) {
console.error(err);
container.innerHTML = `
Erreur : ${escapeHtml(err.message)}
`;
}
}
function displayAssociations(list) {
const container = document.getElementById("grid_container");
container.innerHTML = "";
const fallbackLogo = "https://www.argentan.fr/wp-content/uploads/2023/05/no-image.jpg";
list.forEach(a => {
const card = document.createElement("div");
card.className = "asso_card";
card.innerHTML = `
${a.name || "Association"}
${a.category_name || "—"}
Fiche complète [3]
`;
container.appendChild(card);
});
}
function filterAssociations() {
const search = document.getElementById("search-input").value.toLowerCase().trim();
const category = document.getElementById("category-select").value;
let filtered = allAssociations;
// Filtrage par catégorie
if (category) filtered = filtered.filter(a => a.category_name === category);
// Filtrage par texte (nom, description, catégorie, etc.)
if (search) {
filtered = filtered.filter(a => {
const name = a.name?.toLowerCase() || "";
const desc = a.description?.toLowerCase() || "";
const cat = a.category_name?.toLowerCase() || "";
const city = a.city_name?.toLowerCase() || "";
const tags = a.tags?.join(" ").toLowerCase() || "";
return (
name.includes(search) ||
desc.includes(search) ||
cat.includes(search) ||
city.includes(search) ||
tags.includes(search)
);
});
}
displayAssociations(filtered);
}
function escapeHtml(s="") {
return s.replace(/[&"']/g, m => ({ "&":"&","":">",'"':""","'":"'" }[m]));
}
loadAssociations(document.getElementById("city-select").value);
