PageSourceSearch

https://sants.org/index.php

html sants.org collected 2026-10-02 07:11:28 UTC 38,820 bytes, 373 lines download raw bytes

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&amp;#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&amp;#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&#039;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&#039;antic Orfeó de Sants amb l&#039;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&amp;#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&#039;octubre a l’Espai Línia. Foto: ACN El secretari de Governs Locals i de Relacions amb l&#039;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.