f3823c4c53
- Integra gancio-calendar desde mad.convoca.la (place ID 42, CSO La Enredadera) - Añade calendario semanal de colectivos debajo del gancio con pills de colores - Corrige ID del lugar: 42 (no 286) confirmado via API - Tema light + custom properties --calendar-* para colores blanco/negro/rosa - Sidebar más compacto en móvil (65vw/220px), nav con fuente Impact uppercase - Leyenda más grande y legible (0.75rem, puntos 16px) - Márgenes 25px izquierda / 10px derecha en calendario semanal - Añade context.txt con guía completa de despliegue y referencias técnicas - Elimina botón "Calendario" redundante y espacio entre nav y calendario Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
382 lines
16 KiB
HTML
382 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>La Enredadera de Tetuán</title>
|
|
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf">
|
|
<link rel="stylesheet" href="/index.css">
|
|
<!-- Web component gancio-calendar (CSO La Rosa) https://framagit.org/rosa/gancio-calendar -->
|
|
<script type="module" src="https://rosa.frama.io/gancio-calendar/gancio-calendar.js"></script>
|
|
</head>
|
|
<body>
|
|
<input type="checkbox" id="nav-toggle" class="sr-only">
|
|
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir/cerrar menú">☰</label>
|
|
<div class="container">
|
|
|
|
<div class="vertical-marquee left-marquee">
|
|
<marquee behavior="scroll" direction="up" scrollamount="2">
|
|
NI DIOS NI AMO, NI PATRIA NI ESTADO -0->
|
|
</marquee>
|
|
</div>
|
|
|
|
<div class="vertical-marquee right-marquee">
|
|
<marquee behavior="scroll" direction="up" scrollamount="2">
|
|
OKUPA RESISTE 1312 <3
|
|
</marquee>
|
|
</div>
|
|
|
|
<aside id="sidebar" class="sidebar">
|
|
<img src="/INFO/logo_enre_negro.png" alt="Logo de La Enredadera" class="logo">
|
|
<h2>La Enredadera</h2>
|
|
<p>Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
|
|
<nav class="sidebar-nav">
|
|
<ul>
|
|
<li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
|
|
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
|
|
<li><a href="/convocala.html">Eventos</a></li>
|
|
<li><a href="comunicados.html">Comunicados</a></li>
|
|
<li><a href="mailto:enredadera@riseup.net">Contacto</a></li>
|
|
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
|
|
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<header>
|
|
<h1>CSO LA ENREDADERA DE TETUÁN</h1>
|
|
<nav class="top-nav">
|
|
<ul>
|
|
<li><a href="/index.html#feminismos">feminismos tetuan</a></li>
|
|
<li><a href="/subdir/campa.html">campañas</a></li>
|
|
<li><a href="/index.html#fridays">fridays for future</a></li>
|
|
<li><a href="/index.html#ovt">organizacion vivienda tetuan</a></li>
|
|
<li><a href="/index.html#circo">circo</a></li>
|
|
<li><a href="https://hacklab.laenre.net">hacklab la raiz</a></li>
|
|
<li><a href="/index.html#tienda-gratis">tienda gratis</a></li>
|
|
<li><a href="/index.html#biblioteka">biblioteka</a></li>
|
|
<li><a href="/index.html#warawas">warawas</a></li>
|
|
<li><a href="/index.html#hongos">hongos</a></li>
|
|
<li><a href="/index.html#fermentos">fermentos</a></li>
|
|
<li><a href="/index.html#bicilab">bicilab</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
|
|
<!-- CALENDARIO: gancio-calendar embebido desde mad.convoca.la -->
|
|
<section id="agenda" class="panel" aria-label="Calendario de eventos">
|
|
|
|
<!--
|
|
places="286" = ID de CSO La Enredadera en mad.convoca.la
|
|
https://mad.convoca.la/place/CSO%20La%20Enredadera
|
|
-->
|
|
<gancio-calendar
|
|
baseurl="https://mad.convoca.la"
|
|
title="Agenda de La Enredadera de Tetuán"
|
|
instance_name="mad.convoca.la"
|
|
instance_description="Agenda activista y cultural de Tetuán"
|
|
locale="es-ES"
|
|
places="42"
|
|
accent_color="#ff00aa"
|
|
theme="light">
|
|
</gancio-calendar>
|
|
|
|
</section>
|
|
|
|
|
|
<!-- CALENDARIO SEMANAL DE COLECTIVOS -->
|
|
<section id="agenda-semanal" aria-label="Horarios semanales de colectivos">
|
|
<h2>Horarios Semanales</h2>
|
|
|
|
<div class="cal-controls" id="semanal-controls" role="group" aria-label="Navegación de mes">
|
|
<button class="button semanal-prev" type="button" aria-label="Mes anterior">←</button>
|
|
<div class="cal-title semanal-title" aria-live="polite"></div>
|
|
<button class="button semanal-next" type="button" aria-label="Mes siguiente">→</button>
|
|
</div>
|
|
|
|
<div class="cal" id="semanal-root"></div>
|
|
<div class="cal-legend" id="semanal-legend-root"></div>
|
|
|
|
<script>
|
|
(function () {
|
|
const monthNames = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
|
|
const weekdayNames = ['L','M','X','J','V','S','D'];
|
|
|
|
const ENRE_EVENTS_URL = 'https://mad.convoca.la/place/42/CSO%20La%20Enredadera';
|
|
|
|
const COLORS = {
|
|
hacklab: { bg:'#39FF14', fg:'#000', label:'Hacklab' },
|
|
artlab: { bg:'#39FF14', fg:'#ff00aa', label:'Art-Lab' },
|
|
feminismos: { bg:'#6A0DAD', fg:'#fff', label:'Feminismos' },
|
|
vivienda: { bg:'#000000', fg:'#ff00aa', label:'Vivienda' },
|
|
bicilab: { bg:'#FF7A00', fg:'#000', label:'Bicilab' },
|
|
autodefensa: { bg:'#00BCD4', fg:'#fff', label:'Autodefensa' },
|
|
fridays: { bg:'#2E8B57', fg:'#fff', label:'Fridays for Future' },
|
|
euskera: { bg:'#FF0000', fg:'#00ff00', label:'Euskera' },
|
|
asamblea_enre: { bg:'#ff00ff', fg:'#fff', label:'Asamblea Enre' },
|
|
asamblea_externas: { bg:'#fff', fg:'#ff00ff', label:'Asamblea ext.' },
|
|
montana: { bg:'#8B4513', fg:'#fff', label:'Montaña' },
|
|
teatro: { bg:'#4169E1', fg:'#fff', label:'Teatro' }
|
|
};
|
|
|
|
const WEEKLY = [
|
|
{ group:'asamblea_externas', dow:0, start:'19:00' },
|
|
{ group:'asamblea_enre', dow:0, start:'20:00' },
|
|
{ group:'autodefensa', dow:1, start:'20:00' },
|
|
{ group:'teatro', dow:2, start:'11:00' },
|
|
{ group:'autodefensa', dow:2, start:'20:00' },
|
|
{ group:'euskera', dow:2, start:'18:15' },
|
|
{ group:'vivienda', dow:3, start:'19:00' },
|
|
{ group:'feminismos', dow:3, start:'20:00' },
|
|
{ group:'bicilab', dow:6, start:'19:00' },
|
|
{ group:'montana', dow:6, start:'10:00' }
|
|
];
|
|
|
|
function createPill(text, bg, fg) {
|
|
const pill = document.createElement('div');
|
|
pill.className = 'cal-pill';
|
|
pill.style.setProperty('--bg', bg);
|
|
pill.style.setProperty('--fg', fg);
|
|
pill.textContent = text;
|
|
pill.setAttribute('role', 'link');
|
|
pill.setAttribute('tabindex', '0');
|
|
pill.addEventListener('click', () => { window.location.href = ENRE_EVENTS_URL; });
|
|
pill.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); window.location.href = ENRE_EVENTS_URL; }
|
|
});
|
|
return pill;
|
|
}
|
|
|
|
function renderWeeklyPills(cell, wd) {
|
|
const todays = WEEKLY.filter(e => e.dow === wd);
|
|
if (!todays.length) return;
|
|
const wrap = document.createElement('div');
|
|
wrap.className = 'cal-pills';
|
|
todays.forEach(e => {
|
|
const c = COLORS[e.group] || { bg:'#eee', fg:'#000', label: e.group };
|
|
wrap.appendChild(createPill(c.label + (e.start ? ' ' + e.start : ''), c.bg, c.fg));
|
|
});
|
|
cell.appendChild(wrap);
|
|
}
|
|
|
|
const root = document.getElementById('semanal-root');
|
|
const legend = document.getElementById('semanal-legend-root');
|
|
const title = document.querySelector('.semanal-title');
|
|
const btnPrev = document.querySelector('.semanal-prev');
|
|
const btnNext = document.querySelector('.semanal-next');
|
|
|
|
const today = new Date();
|
|
let view = new Date();
|
|
view.setDate(1);
|
|
|
|
function buildCalendar(date) {
|
|
root.innerHTML = '';
|
|
const year = date.getFullYear();
|
|
const month = date.getMonth();
|
|
title.textContent = monthNames[month] + ' ' + year;
|
|
|
|
const startIndex = (new Date(year, month, 1).getDay() + 6) % 7;
|
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
|
|
const fridays = [];
|
|
for (let d = 1; d <= daysInMonth; d++) {
|
|
if ((new Date(year, month, d).getDay() + 6) % 7 === 4) fridays.push(d);
|
|
}
|
|
const secondFri = fridays[1];
|
|
const lastFri = fridays[fridays.length - 1];
|
|
|
|
const head = document.createElement('div');
|
|
head.className = 'cal-row cal-head';
|
|
weekdayNames.forEach(w => {
|
|
const cell = document.createElement('div');
|
|
cell.className = 'cal-cell cal-head-cell';
|
|
cell.textContent = w;
|
|
head.appendChild(cell);
|
|
});
|
|
root.appendChild(head);
|
|
|
|
let day = 1 - startIndex;
|
|
for (let r = 0; r < 6; r++) {
|
|
const row = document.createElement('div');
|
|
row.className = 'cal-row';
|
|
for (let c = 0; c < 7; c++) {
|
|
const cell = document.createElement('div');
|
|
cell.className = 'cal-cell';
|
|
|
|
if (day >= 1 && day <= daysInMonth) {
|
|
if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate())
|
|
cell.classList.add('cal-today');
|
|
|
|
const num = document.createElement('span');
|
|
num.className = 'cal-daynum';
|
|
num.textContent = day;
|
|
cell.appendChild(num);
|
|
|
|
const wd = (new Date(year, month, day).getDay() + 6) % 7;
|
|
|
|
if (wd === 4) {
|
|
const wrap = document.createElement('div');
|
|
wrap.className = 'cal-pills';
|
|
if (day === secondFri)
|
|
wrap.appendChild(createPill('Art-Lab', COLORS.artlab.bg, COLORS.artlab.fg));
|
|
else
|
|
wrap.appendChild(createPill('Hacklab', COLORS.hacklab.bg, COLORS.hacklab.fg));
|
|
if (day === secondFri || day === lastFri)
|
|
wrap.appendChild(createPill('Fridays 🌱', COLORS.fridays.bg, COLORS.fridays.fg));
|
|
cell.appendChild(wrap);
|
|
} else {
|
|
renderWeeklyPills(cell, wd);
|
|
}
|
|
} else {
|
|
cell.classList.add('cal-empty');
|
|
}
|
|
|
|
row.appendChild(cell);
|
|
day++;
|
|
}
|
|
root.appendChild(row);
|
|
}
|
|
}
|
|
|
|
function buildLegend() {
|
|
legend.innerHTML = '';
|
|
['hacklab','artlab','feminismos','vivienda','bicilab','autodefensa','fridays','euskera','asamblea_enre','montana','teatro']
|
|
.forEach(key => {
|
|
const c = COLORS[key];
|
|
if (!c) return;
|
|
const item = document.createElement('div');
|
|
item.className = 'cal-legend-item';
|
|
const dot = document.createElement('span');
|
|
dot.className = 'cal-legend-dot';
|
|
dot.style.background = c.bg;
|
|
if (c.bg === '#fff') dot.style.border = '1px solid #ff00aa';
|
|
const txt = document.createElement('span');
|
|
txt.textContent = c.label;
|
|
item.appendChild(dot);
|
|
item.appendChild(txt);
|
|
legend.appendChild(item);
|
|
});
|
|
}
|
|
|
|
btnPrev.addEventListener('click', () => { view.setMonth(view.getMonth() - 1); buildCalendar(view); });
|
|
btnNext.addEventListener('click', () => { view.setMonth(view.getMonth() + 1); buildCalendar(view); });
|
|
|
|
buildCalendar(view);
|
|
buildLegend();
|
|
})();
|
|
</script>
|
|
|
|
</section>
|
|
|
|
|
|
<section id="feminismos">
|
|
<h2>Feminismos</h2>
|
|
<p><strong>Feminismo Tetuán</strong> es una asamblea de barrio que nace a raíz del movimiento del <strong>8M</strong>.</p>
|
|
|
|
<a class="colectivo-img-link" href="https://www.instagram.com/feminismostetuan" target="_blank" rel="noopener">
|
|
<img class="colectivo-img" src="/INFO/feminismos_tetuan.jpg" alt="Feminismos Tetuán">
|
|
</a>
|
|
|
|
<a class="colectivo-btn" href="https://linktr.ee/FeminismosTetuan?utm_source=ig&utm_medium=social&utm_content=link_in_bio&fbclid=PAZXh0bgNhZW0CMTEAc3J0YwZhcHBfaWQMMjU2MjgxMDQwNTU4AAGnRoxnOqEyhqJxFoRTPlDSH8zvge2GNvrAQDn4Ou98RwCysuYT0AABDgbbFWw_aem_tbCIw3s5HlsIgRoH4D4p1A" target="_blank" rel="noopener">LinkTree</a>
|
|
<a class="colectivo-btn" href="https://www.instagram.com/feminismostetuan/" target="_blank" rel="noopener">Instagram</a>
|
|
|
|
<p>Es una asamblea abierta no mixta transinclusiva. <strong>Nos reunimos los jueves a las 20</strong> en el CSO La Enredadera.</p>
|
|
<p>Uno de los temas que más trabajamos es el derecho a la libre intervención del embarazo, ya que en nuestro barrio se encuentra la clínica Dator, la primera clínica en realizar abortos en España.</p>
|
|
</section>
|
|
|
|
|
|
<section id="fridays">
|
|
<h2>Fridays for Future</h2>
|
|
<p>Somos parte del movimiento global juvenil por la Justicia Climática.</p>
|
|
|
|
<a class="colectivo-img-link" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">
|
|
<img class="colectivo-img" src="/INFO/photo_5913560549843653631_y.jpg" alt="Fridays for Future Madrid">
|
|
</a>
|
|
<a class="colectivo-img-link" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">
|
|
<img class="colectivo-img" src="/INFO/fridays_madrid.jpg" alt="Fridays for Future Madrid">
|
|
</a>
|
|
|
|
<a class="colectivo-btn" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">LinkTree</a>
|
|
<a class="colectivo-btn" href="https://www.instagram.com/fridaysformadrid/" target="_blank" rel="noopener">Instagram</a>
|
|
</section>
|
|
|
|
|
|
<section id="ovt">
|
|
<h2>Colectivo de Vivienda</h2>
|
|
<p>Asamblea abierta desde donde defendemos que la vivienda es para quien la habita y no un negocio.</p>
|
|
|
|
<a class="colectivo-img-link" href="https://www.instagram.com/organizacionviviendatetuan/" target="_blank" rel="noopener">
|
|
<img class="colectivo-img" src="/INFO/ovt.jpg" alt="Organización Vivienda Tetuán">
|
|
</a>
|
|
<a class="colectivo-btn" href="https://www.instagram.com/organizacionviviendatetuan/" target="_blank" rel="noopener">Instagram</a>
|
|
</section>
|
|
|
|
|
|
<section id="circo">
|
|
<h2>Circo</h2>
|
|
<p>Información próximamente.</p>
|
|
</section>
|
|
|
|
|
|
<section id="hacklab">
|
|
<h2>Hacklab</h2>
|
|
<a class="colectivo-img-link" href="https://hacklab.laenre.net" target="_blank" rel="noopener">
|
|
<img class="colectivo-img" src="/INFO/hacklab.jpeg" alt="Hacklab La Raíz">
|
|
</a>
|
|
<a class="colectivo-img-link" href="https://hacklab.laenre.net/eventos.html" target="_blank" rel="noopener">
|
|
<img class="colectivo-img" src="/INFO/teclado_negro_planta.jpg" alt="">
|
|
</a>
|
|
<a class="colectivo-btn" href="https://hacklab.laenre.net" target="_blank" rel="noopener">hacklab.laenre.net</a>
|
|
</section>
|
|
|
|
|
|
<section id="tienda-gratis">
|
|
<h2>Tienda Gratis</h2>
|
|
<p>Información próximamente.</p>
|
|
</section>
|
|
|
|
|
|
<section id="biblioteka">
|
|
<h2>Biblioteca Libre</h2>
|
|
<p>Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.</p>
|
|
<a class="colectivo-btn" href="/archivos/biblioteca.pdf">Mas información</a>
|
|
</section>
|
|
|
|
|
|
<section id="warawas">
|
|
<h2>Warawas</h2>
|
|
<p>Información próximamente.</p>
|
|
</section>
|
|
|
|
|
|
<section id="hongos">
|
|
<h2>Hongos</h2>
|
|
<p>Información próximamente.</p>
|
|
</section>
|
|
|
|
|
|
<section id="fermentos">
|
|
<h2>Fermentos</h2>
|
|
<p>Información próximamente.</p>
|
|
</section>
|
|
|
|
|
|
<section id="bicilab">
|
|
<h2>BICILAB</h2>
|
|
<p>Bocata de espaguetis todos los domingos a las 17:00 nos engrasamos las manos y recuperamos tu bicicleta!</p>
|
|
<a class="colectivo-btn" href="/archivos/asamblea.pdf">Descargar Actas</a>
|
|
</section>
|
|
|
|
|
|
<footer>
|
|
<p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
|
|
<p>📌 Calle de la Coruña nº5, Madrid</p>
|
|
<p>⚡ Mastodon: <a href="https://masto.es/@csolaenre">@csolaenre</a></p>
|
|
</footer>
|
|
</main>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|