976e45f156
- index.css: sidebar 210px, nav con fuente Impact/Anton uppercase y tamaño rem absoluto, calendario sin gap (bordes internos), celdas 68px, pills 12px, daynum 0.88rem, hoy resaltado con círculo rosa, padding lateral en main para separar del sidebar, corrección de bugs (font-size 4px→legible, max-width 6mv→100%) - index.html: JS actualizado con Fridays for Future en 2º y último viernes, resaltado del día actual, leyenda de colectivos, todos los colectivos del último pull (euskera, teatro, montaña, asambleas) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
361 lines
15 KiB
HTML
361 lines
15 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">
|
||
</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 MENSUAL -->
|
||
<section id="agenda" class="panel" aria-label="Calendario mensual">
|
||
<h2>Calendario</h2>
|
||
|
||
<div class="cal-controls" role="group" aria-label="Navegación de mes">
|
||
<button class="button cal-prev" type="button" aria-label="Mes anterior">←</button>
|
||
<div class="cal-title" aria-live="polite"></div>
|
||
<button class="button cal-next" type="button" aria-label="Mes siguiente">→</button>
|
||
</div>
|
||
|
||
<div class="cal" id="cal-root"></div>
|
||
<div class="cal-legend" id="cal-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/286/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('cal-root');
|
||
const legend = document.getElementById('cal-legend-root');
|
||
const title = document.querySelector('.cal-title');
|
||
const btnPrev = document.querySelector('.cal-prev');
|
||
const btnNext = document.querySelector('.cal-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];
|
||
|
||
// Cabecera
|
||
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);
|
||
|
||
// Grid 6×7
|
||
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>
|