1<!DOCTYPE html> 2<html lang="ca" class="scroll-smooth"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Sants.org | Agenda Unificada del Barri</title> 7
7<script src="https://cdn.tailwindcss.com"></script>
7 8
8<script src="https://unpkg.com/lucide@latest"></script>
8 9 10
10<script> 11 tailwind.config = { 12 darkMode: 'class', 13 theme: { 14 extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' } } 15 } 16 } 17 </script>
17 18 <style> 19 ::-webkit-scrollbar { width: 8px; } 20 ::-webkit-scrollbar-track { background: transparent; } 21 ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } 22 .dark ::-webkit-scrollbar-thumb { background: #475569; } 23 ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } 24 .dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } 25 </style> 26</head> 27<body class="bg-gray-50 dark:bg-darkbg text-gray-800 dark:text-gray-200 font-sans antialiased overflow-x-hidden flex flex-col min-h-screen transition-colors duration-300"> 28 29 <!-- Navegació --> 30 <nav id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/90 dark:bg-darkcard/90 backdrop-blur-md shadow-sm border-b border-gray-200 dark:border-gray-800 py-3 sm:py-4"> 31 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 32 <div class="flex justify-between items-center"> 33 <a href="index.php" class="text-xl sm:text-2xl font-black text-gray-900 dark:text-white tracking-tighter flex items-center gap-2"> 34 <span>SANTS<span class="text-emerald-600">.ORG</span></span> 35 <span class="text-xs sm:text-sm font-normal text-gray-500 dark:text-gray-400 hidden sm:inline-block border-l border-gray-300 dark:border-gray-700 pl-2">Agenda Unificada</span> 36 </a> 37 38 <div class="flex items-center gap-3 sm:gap-4"> 39 <!-- Botó actualitzar recarrega la pà gina forçant netejar la cau --> 40 <a href="?actualitzar=1" class="flex items-center justify-center p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors" title="Forçar actualització dades"> 41 <i data-lucide="refresh-cw" class="w-5 h-5 "></i> 42 </a> 43 44 <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full text-sm p-2 transition-colors"> 45 <i data-lucide="moon" id="theme-toggle-dark-icon" class="hidden w-5 h-5"></i> 46 <i data-lucide="sun" id="theme-toggle-light-icon" class="hidden w-5 h-5"></i> 47 </button> 48 </div> 49 </div> 50 </div> 51 </nav> 52 53 <!-- Contingut --> 54 <main class="flex-grow pt-24 sm:pt-28 pb-16 sm:pb-24"> 55 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 56 57 <div class="mb-8 sm:mb-12 text-center md:text-left"> 58 <h2 class="text-emerald-600 font-bold tracking-widest uppercase text-xs sm:text-sm mb-2">En temps real (15 Fonts)</h2> 59 <h3 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-3">Agenda del Barri</h3> 60 </div> 61 62 <!-- FILTRE PER ESPAI GENERAT DINÃMICAMENT AMB PHP --> 63 <div class="mb-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 bg-white dark:bg-darkcard p-4 rounded-xl shadow-sm border border-gray-100 dark:border-gray-800"> 64 <div class="flex items-center gap-3"> 65 <i data-lucide="filter" class="w-5 h-5 text-emerald-600"></i> 66 <span class="font-bold text-gray-700 dark:text-gray-300">Filtra per espai/entitat:</span> 67 </div> 68 <select id="filtre-espai" onchange="filtrarEspai(this.value)" class="w-full sm:w-auto bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-emerald-500 focus:border-emerald-500 block p-2.5 outline-none transition-colors cursor-pointer"> 69 <option value="tots">Tots els espais (15 fonts)</option> 70 <option value="convoca">bcn.convoca.la</option> 71 <option value="canbatllo">Can Batlló</option> 72 <option value="lleialtat">La Lleialtat</option> 73 <option value="secretariat">Secretariat</option> 74 <option value="sants3radio">Sants 3 Rà dio</option> 75 <option value="borinots">Castellers de Sants</option> 76 <option value="el3">El3.cat</option> 77 <option value="cotxeres">Cotxeres-Casinet</option> 78 <option value="comunal">La Comunal</option> 79 <option value="santstv">Sants.tv</option> 80 <option value="beteve">Betevé Sants</option> 81 <option value="ajuntament">Ajuntament Sants</option> 82 <option value="uesants">UE Sants</option> 83 <option value="totbarcelona">Tot BCN Sants</option> 84 <option value="liniasants">LÃnia Sants</option> 85 </select> 86 </div> 87 88 <!-- Graella d'esdeveniments --> 89 <div id="agenda-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 lg:gap-8"> 90 91 <!-- Bucle PHP per crear targetes HTML --> 92 <a href="https://canbatllo.org/events/presentacio-del-poemari-librida/" target="_blank" data-espai="canbatllo" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 93 <div class="flex items-center justify-between mb-4">
94 <span class="bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 95 Can Batlló </span> 96 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 97 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">30</span> 98 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Oct</span> 99 </div> 100 </div> 101 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 102 Presentació del poemari «Librida» </h4> 103 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 104 ð Presentació del poemari LÃbrida: poesia, cos i ciutat LÃbrida és un viatge poètic per Barcelona âi més enllà â on la ci... </p> 105 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 106 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 107 </div> 108 </a> 109 <a href="https://canbatllo.org/events/3a-trobada-de-cors-socials-i-rebels/" target="_blank" data-espai="canbatllo" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 110 <div class="flex items-center justify-between mb-4"> 111 <span class="bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 112 Can Batlló </span> 113 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 114 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">17</span> 115 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Oct</span> 116 </div> 117 </div> 118 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 119 3a Trobada de Cors Socials i Rebels </h4> 120 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 121 3a Trobada de Cors Socials i Rebels El 17 dâoctubre a les 12h el Centre de Documentació dels Moviments Socials Mercè Gre... </p> 122 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 123 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 124 </div> 125 </a> 126 <a href="https://canbatllo.org/events/ecm-presenta-27/" target="_blank" data-espai="canbatllo" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 127 <div class="flex items-center justify-between mb-4">
128 <span class="bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 129 Can Batlló </span> 130 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 131 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">03</span> 132 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Oct</span> 133 </div> 134 </div> 135 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 136 Ecm presentaâ¦.. </h4> 137 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 138 IEAAH! â ï¸ð¦ OBRIM DEL CURS AMB UN CARTELL QUE NO ET VOLDRÃS PERDREð«µð«µ Farem un desplegament dâestils (normalment atÃpics) ... </p> 139 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 140 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 141 </div> 142 </a> 143 <a href="https://canbatllo.org/events/jam-de-butoh/" target="_blank" data-espai="canbatllo" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 144 <div class="flex items-center justify-between mb-4"> 145 <span class="bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 146 Can Batlló </span> 147 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 148 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">03</span> 149 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Oct</span> 150 </div> 151 </div> 152 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 153 Jam de Butoh </h4> 154 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 155 JAM DE BUTOH Taller investigació al voltant d&#8217;un tema, a continuació es farà al Jam amb música en viu. Taquilla in... </p> 156 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 157 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 158 </div> 159 </a> 160 <a href="https://canbatllo.org/events/exposicio-metaxis/" target="_blank" data-espai="canbatllo" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 161 <div class="flex items-center justify-between mb-4">
162 <span class="bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 163 Can Batlló </span> 164 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 165 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">02</span> 166 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Oct</span> 167 </div> 168 </div> 169 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 170 Exposició «METAXIS» </h4> 171 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 172 Divendres 2 d&#8217;octubre a les 19h inaugurem: METAXIS âEstat liminal dâestar suspès entre dos mons o estats, sovint r... </p> 173 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 174 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 175 </div> 176 </a> 177 <a href="https://liniaxarxa.cat/liniasants/noticies/salo-comerc-nou-espai-trobada-sector/" target="_blank" data-espai="liniasants" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 178 <div class="flex items-center justify-between mb-4"> 179 <span class="bg-pink-100 text-pink-800 dark:bg-pink-900/50 dark:text-pink-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 180 LÃnia Sants </span> 181 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 182 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">01</span> 183 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Oct</span> 184 </div> 185 </div> 186 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 187 LâAjuntament impulsa el Saló del Comerç, un nou espai de trobada per al sector </h4> 188 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 189 El saló de BizBarcelona en l'edició de 2023. Foto: Fira de Barcelona Amb la voluntat de reforçar la competitivitat del c... </p> 190 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 191 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 192 </div> 193 </a> 194 <a href="https://liniaxarxa.cat/liniasants/cultura-b/cor-queer-poble-sec-no-cal-saber-cantar/" target="_blank" data-espai="liniasants" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 195 <div class="flex items-center justify-between mb-4">
196 <span class="bg-pink-100 text-pink-800 dark:bg-pink-900/50 dark:text-pink-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 197 LÃnia Sants </span> 198 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 199 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">01</span> 200 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Oct</span> 201 </div> 202 </div> 203 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 204 El cor queer del Poble-sec on no cal saber cantar </h4> 205 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 206 La coral va actuar el passat mes de maig al Teatre Grec de Montjuïc en el One Day Queer Choir. Foto cedida Al barri del ... </p> 207 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 208 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 209 </div> 210 </a> 211 <a href="https://liniaxarxa.cat/liniasants/opinio/lanalogia-damic-cultura-amb-lacn-david-centol/" target="_blank" data-espai="liniasants" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 212 <div class="flex items-center justify-between mb-4"> 213 <span class="bg-pink-100 text-pink-800 dark:bg-pink-900/50 dark:text-pink-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 214 LÃnia Sants </span> 215 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 216 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">28</span> 217 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Set</span> 218 </div> 219 </div> 220 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 221 Lâanalogia dâAMIC Cultura amb lâACN </h4> 222 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 223 En els seus primers nou mesos dâexistència, una trentena de mitjans de comunicació locals i temà tics, en paper i digital... </p> 224 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 225 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 226 </div> 227 </a> 228 <a href="https://liniaxarxa.cat/liniasants/noticies/torna-brollar-aigua-aquesta-font-proxima-placa-sants-despres-quatre-anys/" target="_blank" data-espai="liniasants" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 229 <div class="flex items-center justify-between mb-4">
230 <span class="bg-pink-100 text-pink-800 dark:bg-pink-900/50 dark:text-pink-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 231 LÃnia Sants </span> 232 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 233 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">28</span> 234 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Set</span> 235 </div> 236 </div> 237 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 238 Torna a brollar lâaigua dâaquesta font pròxima a la plaça de Sants després de quatre anys </h4> 239 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 240 La font de la placeta de Ramon Torres Casanova torna a funcionar. Foto: Ajuntament Les fonts ornamentals de la ciutat ha... </p> 241 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 242 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 243 </div> 244 </a> 245 <a href="https://liniaxarxa.cat/liniasants/cultura-b/com-era-sants-abans-com-aquestes-fotografies-ensenyen/" target="_blank" data-espai="liniasants" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 246 <div class="flex items-center justify-between mb-4"> 247 <span class="bg-pink-100 text-pink-800 dark:bg-pink-900/50 dark:text-pink-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 248 LÃnia Sants </span> 249 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 250 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">28</span> 251 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Set</span> 252 </div> 253 </div> 254 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 255 Com era Sants abans i com és ara? Aquestes fotografies tâho ensenyen </h4> 256 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 257 Una fotografia comparava l'antic Orfeó de Sants amb l'actual Caprabo. Foto: LÃnia Sants Al barri de Sants de Barcelona, ... </p> 258 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 259 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 260 </div> 261 </a> 262 <a href="https://canbatllo.org/events/exposicio-para-emboscar-al-olvido/" target="_blank" data-espai="canbatllo" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 263 <div class="flex items-center justify-between mb-4">
264 <span class="bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 265 Can Batlló </span> 266 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 267 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">26</span> 268 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Set</span> 269 </div> 270 </div> 271 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 272 Exposició «Para emboscar al olvido» </h4> 273 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 274 «Para emboscar al olvido» 43+3 AYOTZINAPA Des de fa dotze anys Mèxic està trencat. 43 joves estudiants de l&#8217;Escola... </p> 275 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 276 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 277 </div> 278 </a> 279 <a href="https://liniaxarxa.cat/liniasants/noticies/lespai-linia-acollira-una-conversa-amb-el-conseller-albert-dalmau-sobre-el-futur-de-larea-metropolitana/" target="_blank" data-espai="liniasants" class="agenda-item bg-white dark:bg-darkcard p-5 sm:p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-800 flex flex-col h-full group block relative overflow-hidden"> 280 <div class="flex items-center justify-between mb-4"> 281 <span class="bg-pink-100 text-pink-800 dark:bg-pink-900/50 dark:text-pink-300 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider line-clamp-1"> 282 LÃnia Sants </span> 283 <div class="text-center bg-gray-50 dark:bg-gray-800/50 rounded-lg p-2 border border-gray-100 dark:border-gray-700 min-w-[3.5rem] shrink-0 ml-2"> 284 <span class="block text-lg sm:text-xl font-black text-gray-900 dark:text-gray-100 leading-none">16</span> 285 <span class="block text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold uppercase mt-1 truncate">Jul</span> 286 </div> 287 </div> 288 <h4 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors leading-tight line-clamp-3"> 289 LâEspai LÃnia acollirà una conversa amb Xavier Amor, secretari de Governs Locals, sobre el futur de lâà rea metropolitana </h4> 290 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 flex-grow line-clamp-3"> 291 Xavier Amor serà el 7 d'octubre a lâEspai LÃnia. Foto: ACN El secretari de Governs Locals i de Relacions amb l'Aran de l... </p> 292 <div class="flex items-center text-xs font-semibold text-gray-400 dark:text-gray-500 gap-2 mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors"> 293 <i data-lucide="external-link" class="w-4 h-4"></i> Veure la font original 294 </div> 295 </a> 296 297 <!-- Missatge mostrat per JS si el filtre oculta totes les targetes --> 298 <div id="missatge-buit" class="hidden col-span-full text-center py-20 text-gray-500 dark:text-gray-400"> 299 <i data-lucide="calendar-x" class="w-12 h-12 mx-auto mb-4 opacity-50"></i> 300 <p>No hi ha esdeveniments recents publicats per a aquesta entitat.</p> 301 </div> 302 </div> 303 </div> 304 </main> 305 306 <!-- Footer --> 307 <footer class="bg-gray-900 text-gray-400 py-10 sm:py-12 border-t border-gray-950 mt-auto"> 308 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 sm:grid-cols-2 gap-8 text-center sm:text-left"> 309 <div> 310 <h3 class="text-white text-xl sm:text-2xl font-black tracking-tighter mb-4">SANTS<span class="text-emerald-500">.ORG</span></h3> 311 <p class="mb-4 text-sm sm:text-base">Més de 15 fonts d'informació agrupadades mitjançant tecnologia PHP i RSS.</p> 312 </div> 313 <div class="text-sm sm:text-base text-gray-500"> 314 Aquest projecte captura l'activitat de xarxes com Can Batlló, el Secretariat d'Entitats, La Lleialtat, La Comunal i molts altres espais de Sants. 315 </div> 316 </div> 317 </footer> 318 319 <!-- Lògica de Front-end (Filtres i Icons) --> 320
320<script> 321 lucide.createIcons(); 322 323 // Mode fosc / clar 324 const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon'); 325 const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon'); 326 327 if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { 328 document.documentElement.classList.add('dark'); 329 themeToggleLightIcon.classList.remove('hidden'); 330 } else { 331 document.documentElement.classList.remove('dark'); 332 themeToggleDarkIcon.classList.remove('hidden'); 333 } 334 335 document.getElementById('theme-toggle').addEventListener('click', function() { 336 themeToggleDarkIcon.classList.toggle('hidden'); 337 themeToggleLightIcon.classList.toggle('hidden'); 338 339 if (localStorage.getItem('color-theme') === 'light') { 340 document.documentElement.classList.add('dark'); 341 localStorage.setItem('color-theme', 'dark'); 342 } else { 343 document.documentElement.classList.remove('dark'); 344 localStorage.setItem('color-theme', 'light'); 345 } 346 }); 347 348 // FILTRATGE DINÃMIC VIA JAVASCRIPT 349 function filtrarEspai(espaiId) { 350 const items = document.querySelectorAll('.agenda-item'); 351 let elementsVisibles = 0; 352 353 items.forEach(item => { 354 // Comprovem l'atribut "data-espai" que hem posat amb PHP 355 if (espaiId === 'tots' || item.dataset.espai === espaiId) { 356 item.style.display = 'flex'; // Tornem a mostrar la targeta 357 elementsVisibles++; 358 } else { 359 item.style.display = 'none'; // Ocultem la targeta 360 } 361 }); 362 363 // Mostrar missatge de "buit" si cap targeta coincideix amb el filtre 364 const missatgeBuit = document.getElementById('missatge-buit'); 365 if (elementsVisibles === 0) { 366 missatgeBuit.classList.remove('hidden'); 367 } else { 368 missatgeBuit.classList.add('hidden'); 369 } 370 } 371 </script>
371 372</body> 373</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.