mejora css/js: calendario compacto, nav Impact, FFF, hoy y leyenda

- 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>
This commit is contained in:
SITO 2026-04-08 23:29:28 +02:00
parent d0e746c079
commit 976e45f156
2 changed files with 503 additions and 548 deletions

415
index.css
View file

@ -11,8 +11,8 @@
}
:root{
--sidebar-w: 250px;
--sidebar-rail: 56px;
--sidebar-w: 210px; /* reducido de 250px */
--sidebar-rail: 48px;
/* “Impact” consistente: Anton (Google) + fallback a Impact */
--impact: 'Anton', Impact, Haettenschweiler, 'Arial Black', sans-serif;
@ -144,12 +144,12 @@ body {
main {
margin-left: var(--sidebar-w);
transition: margin-left .25s ease;
flex-grow: 1;
padding: 0px 0px;
text-align: center;
font-size: 0.9em;
margin-left: var(--sidebar-w);
transition: margin-left .25s ease;
flex-grow: 1;
padding: 0 16px 0 20px; /* 20px izquierda para separar del sidebar */
text-align: center;
font-size: 0.9em;
}
header {
@ -166,9 +166,9 @@ header h1 {
.top-nav a,
.top-nav.second a {
font-family: 'Rock Salt';
letter-spacing: 3px;
font-size: 0.5em;
font-family: Impact, 'Anton', sans-serif;
letter-spacing: 1.5px;
font-size: 0.9rem; /* rem absoluto, no hereda nada */
}
@ -199,12 +199,12 @@ header h1 {
.top-nav ul {
list-style: none;
padding: 0;
padding: 8px 10px;
margin: 0;
display: flex;
flex-wrap: wrap; /* Permite que haya varias filas si no caben */
flex-wrap: wrap;
justify-content: center;
gap: 5px; /* Espacio entre enlaces */
gap: 6px 8px;
}
.top-nav li {
@ -215,41 +215,31 @@ header h1 {
text-decoration: none;
background-color: white;
color: black;
font-weight: bold;
padding: 15px 15px;
border-radius: 20px;
transition: background 0.3s, color 0.3s;
font-size: 0.5em;
font-weight: 900;
padding: 6px 13px;
border-radius: 18px;
border: 2px solid transparent;
display: inline-block;
text-transform: uppercase;
transition: color .15s, border-color .15s, box-shadow .15s;
}
.top-nav a:hover {
background: white;
color: #ff00aa;
text-decoration: none;
background-color: white;
border: 2px solid #ff00aa;
box-shadow: 4px 8px black;
border-radius: 12px;
padding: clamp(20px, 2vw, 24px);
text-align: center;
user-select: none;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
border-color: #ff00aa;
box-shadow: 2px 3px 0 #ff00aa;
}
/* Secciones del index: fondo blanco, borde rosa, texto negro */
section{
background: #fff; /* fondo blanco */
color: #111; /* texto negro */
padding: 18px 20px;
padding-left: 50px;
margin: 16px auto;
max-width: 6mv;
border: 2px solid #ff00aa; /* borde rosa */
background: #fff;
color: #111;
padding: 14px 18px;
margin: 10px auto;
max-width: 100%;
border: 2px solid #ff00aa;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
box-shadow: 0 4px 14px rgba(0,0,0,.07);
line-height: 1.6;
}
@ -391,166 +381,172 @@ button:hover {
̣
/* ====== CALENDARIO ====== */
.cal {
display: grid;
gap: 8px;
background: #FFFFFF;
border: 1px solid rgba(0,255,255,0.18);
border-radius: 12px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,255,255,0.05);
/* Botones prev / next */
.button {
background: #000;
color: #ff00aa;
border: 2px solid #ff00aa;
border-radius: 8px;
padding: 5px 14px;
font-size: 1rem;
font-weight: bold;
font-family: inherit;
cursor: pointer;
transition: background .15s, color .15s, transform .1s;
line-height: 1;
}
.button:hover {
background: #ff00aa;
color: #000;
transform: scale(1.08);
}
.cal-controls{
.cal-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 6px 0 12px;
}
.cal-title{
min-width: 300px;
text-align: center;
font-weight: bold;
color: pink;
text-shadow: 0 0 8px rgba(0,255,255,0.25);
gap: 12px;
margin: 6px 0 10px;
}
.cal-row{
display: grid;
grid-template-columns: repeat(7, minmax(0,1fr));
gap: 8px;
.cal-title {
min-width: 180px;
text-align: center;
font-weight: bold;
font-size: 0.9rem;
color: #ff00aa;
letter-spacing: 2px;
text-transform: uppercase;
}
.cal-cell{
position: relative;
background: #FFFFFF;
border: 1px solid rgba(255,0,171,1); /* líneas rosas */
border-radius: 8px;
min-height: 90px;
/* Grid: sin gap, bordes como líneas internas */
.cal {
background: #fff;
border: 2px solid #ff00aa;
border-radius: 12px;
overflow: hidden;
padding-top:28px;
box-shadow: 0 4px 18px rgba(255,0,170,.15);
}
.cal-head{
opacity: 0.9;
.cal-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-bottom: 1px solid rgba(255,0,170,.15);
}
.cal-head-cell{
background: #FFFFFFF
border: 1px solid rgba(255,0,171,1);
.cal-row:last-child { border-bottom: none; }
/* Cabecera días */
.cal-head { background: #000; }
.cal-head-cell {
background: #000;
color: #ff00aa;
text-align: center;
font-weight: bold;
padding: 8px 0;
border: 1px solid rgba(255,0,171,1);
}
.cal-daynum{
position: absolute;
top: 6px; left: 20px;
font-size: 1.2rem;
color: var(--muted);
z-index: 2;
}
.cal-empty{
background: ;
border-style: dashed;
opacity: 0.5;
font-size: 0.78rem;
padding: 8px 2px;
border-right: 1px solid rgba(255,0,170,.2);
}
.cal-head-cell:last-child { border-right: none; }
/* celdas con evento: fondo con imagen + overlay oscuro */
.cal-event{
background: ;
}
.cal-event::before{
content: "";
position: absolute; inset: 0;
background-image: var(--bgimg);
background-size: cover;
background-position: center;
filter: contrast(1.05) saturate(1.05);
opacity: 0.9;
transition: transform .25s ease, opacity .2s ease;
}
.cal-event::after{
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.6));
pointer-events: none;
}
.cal-event .cal-label{
position: absolute;
left: 8px; bottom: 16px;
z-index: 2;
display: inline-block;
background: var(--green);
color: #000;
border: 1px solid #0f0;
padding: 4px 8px;
border-radius: 6px;
font-weight: 700;
box-shadow: 0 0 8px rgba(0,255,0,0.35);
}
.cal-event:hover::before{
transform: scale(1.04);
opacity: 1;
}
/* badge leyenda */
.cal-legend{
margin-top: 10px;
color: var(--muted);
}
.badge{
display: inline-block;
border: 1px solid rgba(0,255,0,0.5);
color: var(--green);
padding: 2px 6px;
border-radius: 6px;
margin-right: 6px;
}
/* --- Corrección de typo existente --- */
.cal-head-cell{
background: #FFFFFF; /* antes tenías #FFFFFFF */
border: 1px solid rgba(255,0,171,1);
text-align: center;
font-weight: bold;
padding: 8px 0;
}
/* --- Ajustes de celda para que quepan las tiras --- */
.cal-cell{
min-height: 110px; /* un poco más alta */
padding-top: 22px; /* deja hueco al número del día */
}
/* Contenedor vertical de tiras */
.cal-pills{
/* Celda de día */
.cal-cell {
position: relative;
z-index: 3; /* por encima de ::before/::after */
background: #fff;
border-right: 1px solid rgba(255,0,170,.1);
min-height: 68px;
padding: 20px 3px 3px;
overflow: hidden;
}
.cal-cell:last-child { border-right: none; }
/* Fin de semana: fondo levemente rosado */
.cal-cell:nth-child(6),
.cal-cell:nth-child(7) { background: #fff6fc; }
/* HOY */
.cal-today {
background: #fff0f8 !important;
box-shadow: inset 0 0 0 2px #ff00aa;
}
.cal-daynum {
position: absolute;
top: 3px;
left: 5px;
font-size: 0.88rem;
font-weight: bold;
color: #444;
z-index: 2;
}
.cal-today .cal-daynum {
background: #ff00aa;
color: #fff;
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
top: 2px;
left: 2px;
}
.cal-empty {
background: #f5f5f5 !important;
opacity: .5;
}
/* Pills */
.cal-pills {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 15px;
gap: 2px;
margin-top: 1px;
}
/* Tira (pill) de cada colectivo */
.cal-pill{
.cal-pill {
background: var(--bg);
color: var(--fg);
border: 1px solid rgba(0,0,0,.15);
border-radius: 6px;
padding: 3px 6px;
border-radius: 4px;
padding: 2px 5px;
font-size: 12px;
font-weight: 700;
font-size: 16px;
line-height: 1.1;
box-shadow: 0 0 6px rgba(0,0,0,.06);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid rgba(0,0,0,.08);
cursor: pointer;
}
.cal-pill:hover {
filter: brightness(1.08);
}
.cal-pill:hover{
filter: brightness(1.05);
box-shadow: 0 0 10px rgba(0,0,0,.12);
/* Leyenda */
.cal-legend {
display: flex;
flex-wrap: wrap;
gap: 5px 14px;
margin: 10px 0 2px;
justify-content: center;
}
.cal-legend-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.55rem;
font-family: var(--impact);
}
.cal-legend-dot {
width: 11px;
height: 11px;
border-radius: 3px;
flex-shrink: 0;
border: 1px solid rgba(0,0,0,.12);
}
@ -594,15 +590,18 @@ button:hover {
}
.top-nav a, .top-nav.second a, .top-nav2 a{
display:inline-block;
padding:5px 9px; /* más pequeño */
font-size:.8em; /* más pequeño */
padding:5px 10px;
font-size:.8rem;
font-family: Impact, 'Anton', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
line-height:1.1;
border:1px solid #ff00aa;
border-radius:16px; /* un poco más compacto */
border:2px solid transparent;
border-radius:16px;
background:#fff;
color:#000;
text-decoration:none;
white-space:nowrap; /* evita que se partan dentro del botón */
white-space:nowrap;
}
/* Secciones y contenido */
@ -612,14 +611,18 @@ button:hover {
button{ font-size:.9em; padding:8px 12px; }
footer{ font-size:.85em; padding:14px 0; }
/* ====== CALENDARIO (sin scroll lateral) ====== */
.cal{ width:100%; padding:8px; gap:4px; border-radius:10px; }
.cal-row{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.cal-cell{ min-height:56px; padding-top:18px; }
.cal-daynum{ font-size:1rem; top:6px; left:6px; z-index:2; }
.cal-pills{ gap:7px; margin-top:6px; }
.cal-pill{ font-size:.72rem; padding:2px 4px; line-height:1.3; }
.cal-head .cal-head-cell{ padding:6px 0; font-size:1.1rem; }
/* ====== CALENDARIO móvil ====== */
.cal{ border-radius:8px; }
.cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); }
.cal-cell{ min-height:52px; padding:17px 2px 2px; }
.cal-daynum{ font-size:.65rem; top:2px; left:3px; }
.cal-today .cal-daynum{ width:16px; height:16px; font-size:.55rem; }
.cal-pills{ gap:1px; margin-top:0; }
.cal-pill{ font-size:7px; padding:1px 2px; border-radius:3px; }
.cal-head-cell{ padding:6px 1px; font-size:.7rem; }
.cal-title{ font-size:.75rem; min-width:140px; }
.cal-legend{ gap:3px 8px; }
.cal-legend-item{ font-size:.5rem; }
}
@ -662,8 +665,10 @@ button:hover {
}
.top-nav li, .top-nav.second li{ list-style:none; }
.top-nav a, .top-nav.second a, .top-nav2 a{
display:block; padding:8px 12px; font-size:.95em;
border:1px solid #ff00aa; border-radius:20px;
display:inline-block; padding:7px 13px; font-size:.88rem;
font-family: Impact, 'Anton', sans-serif;
text-transform: uppercase; letter-spacing: 1px;
border:2px solid transparent; border-radius:18px;
background:#fff; color:#000; text-decoration:none;
}
@ -673,14 +678,15 @@ button:hover {
button{ font-size:1em; padding:10px 16px; }
footer{ font-size:.95em; padding:16px 0; }
/* Calendario fluido (sin scroll lateral) */
.cal{ width:100%; padding:10px; gap:6px; border-radius:12px; }
.cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.cal-cell{ min-height:70px; padding-top:20px; }
.cal-daynum{ font-size:1rem; top:6px; left:8px; z-index:2; }
.cal-pills{ gap:5px; margin-top:8px; }
.cal-pill{ font-size:4px; padding:3px 5px; }
.cal-head .cal-head-cell{ padding:8px 0; font-size:1rem; }
/* Calendario tablet vertical */
.cal{ border-radius:10px; }
.cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); }
.cal-cell{ min-height:64px; padding:20px 3px 3px; }
.cal-daynum{ font-size:.72rem; top:3px; left:5px; }
.cal-today .cal-daynum{ width:18px; height:18px; font-size:.6rem; }
.cal-pills{ gap:2px; margin-top:1px; }
.cal-pill{ font-size:8.5px; padding:1px 3px; }
.cal-head-cell{ padding:7px 1px; font-size:.75rem; }
}
/* ========== TABLETS HORIZONTALES / PORTÁTILES PEQUEÑOS (769px1024px) ========== */
@ -707,19 +713,24 @@ button:hover {
display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0;
}
.top-nav li, .top-nav.second li{ list-style:none; }
.top-nav a, .top-nav.second a{ font-size:1em; padding:10px 15px; }
.top-nav a, .top-nav.second a{
font-size:.9rem; padding:6px 13px;
font-family: Impact, 'Anton', sans-serif;
text-transform: uppercase; letter-spacing:1px;
}
section{ padding:20px; max-width:90%; margin:12px auto; }
button{ font-size:1em; padding:12px 22px; }
footer{ font-size:1em; padding:22px; }
/* Calendario (compacto, sin desbordes) */
.cal{ width:100%; padding:10px; gap:6px; border-radius:12px; }
.cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.cal-cell{ min-height:84px; padding-top:22px; }
.cal-daynum{ font-size:2rem; }
.cal-pills{ margin-top:8px; gap:6px; }
.cal-pill{ font-size:4px; }
/* Calendario tablet horizontal */
.cal{ border-radius:10px; }
.cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); }
.cal-cell{ min-height:72px; padding:21px 3px 3px; }
.cal-daynum{ font-size:.76rem; top:3px; left:5px; }
.cal-today .cal-daynum{ width:18px; height:18px; font-size:.62rem; }
.cal-pills{ margin-top:1px; gap:2px; }
.cal-pill{ font-size:9px; padding:2px 4px; }
}

View file

@ -1,4 +1,3 @@
<!DOCTYPE html>
<html lang="es">
<head>
@ -9,409 +8,354 @@
<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>
<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 right-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
OKUPA RESISTE 1312 <3
</marquee>
</div>
<div class="vertical-marquee left-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
NI DIOS NI AMO, NI PATRIA NI ESTADO -0->
</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">
<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="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://mad.convoca.la/place/CSO%20La%20Enredadera">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>
<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>
</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>
</header>
<!-- CALENDARIO MENSUAL -->
<section id="agenda" class="panel" aria-label="Calendario mensual">
<h2>Calendario</h2>
<!-- CALENDARIO MENSUAL (AUTO) -->
<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">&larr;</button>
<div class="cal-title" aria-live="polite"></div>
<button class="button cal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
</div>
<div class="cal-controls" role="group" aria-label="Navegación de mes">
<button class="button cal-prev" type="button" aria-label="Mes anterior">&larr;</button>
<div class="cal-title" aria-live="polite"></div>
<button class="button cal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
</div>
<div class="cal" id="cal-root">
<!-- Aquí el JS pintará el calendario -->
</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']; // lunes primero (ES)
(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/CSOA%20La%20Enredadera%20de%20Tetu%C3%A1n';
const ENRE_EVENTS_URL = 'https://mad.convoca.la/place/286/CSO%20La%20Enredadera';
// Paleta por colectivo
const COLORS = {
hacklab: { bg:'#39FF14', fg:'#000' }, // verde neón + negro (original)
feminismos: { bg:'#6A0DAD', fg:'#fff' }, // morado + blanco
vivienda: { bg:'#000000', fg:'#ff00aa' },// negro + rosa
circo: { bg:'#FFD400', fg:'#000' }, // amarillo + negro
bicilab: { bg:'#FF7A00', fg:'#000' }, // naranja + negro
autodefensa: { bg:'#00BCD4', fg:'#fff' }, // cian + blanco
fridays: { bg:'#2E8B57', fg:'#fff' }, // verde oscuro + blanco
euskera: { bg:'#FF0000', fg:'#00ff00' }, // rojo + verde
asamblea_enre: { bg:'#ff00ff', fg:'#fff' }, // rosa + blanco
asamblea_externas: { bg:'#FFF', fg:'#ff00ff' } // rosa + blanco
};
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' }
};
// Horarios semanales (sin viernes: se gestionan aparte)
const WEEKLY = [
{ group:'asamblea_externas', dow:0, start:'19:00', end:''}, // lunes
{ group:'asamblea_enre',dow:0, start:'20:00', end:'' }, // lunes
{ group:'teatro', dow:2, start:'11:00', end:'12:30' }, // miércoles
{ group:'autodefensa', dow:1, start:'20:00', end:'22:00' }, // martes
{ group:'autodefensa', dow:2, start:'20:00', end:'22:00' }, // miércoles
{ group:'euskera', dow:2, start:'18:15', end:'21:00' }, // miércoles
{ group:'vivienda', dow:3, start:'19:00', end:'21:30' }, // jueves
{ group:'feminismos', dow:3, start:'20:00', end:'21:30' }, // jueves
{ group:'fridays', dow:4, start:'19:00', end:'21:00' }, // viernes
{ group:'hacklab', dow:4, start:'18:00', end:'23:00' }, // viernes
{ group:'bicilab', dow:6, start:'19:00', end:'20:30' }, // domingo
{ group:'montana', dow:6, start:'10:00', end:'14:00' } // domingo
];
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;
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;
}
pill.setAttribute('role', 'link');
pill.setAttribute('tabindex', '0');
pill.style.cursor = 'pointer';
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);
}
pill.addEventListener('click', () => {
window.location.href = ENRE_EVENTS_URL;
});
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');
pill.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
window.location.href = ENRE_EVENTS_URL;
}
});
const today = new Date();
let view = new Date();
view.setDate(1);
return pill;
}
function buildCalendar(date) {
root.innerHTML = '';
const year = date.getFullYear();
const month = date.getMonth();
title.textContent = monthNames[month] + ' ' + year;
function renderWeeklyPills(cell, wd){
const todays = WEEKLY.filter(e => e.dow === wd);
if (!todays.length) return;
const startIndex = (new Date(year, month, 1).getDay() + 6) % 7;
const daysInMonth = new Date(year, month + 1, 0).getDate();
const wrap = document.createElement('div');
wrap.className = 'cal-pills';
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];
todays.forEach(e => {
const { bg, fg } = COLORS[e.group] || { bg:'#eee', fg:'#000' };
const name = e.group.charAt(0).toUpperCase() + e.group.slice(1);
wrap.appendChild(createPill(`${name} ${e.start}-${e.end}`, bg, fg));
});
// 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);
cell.appendChild(wrap);
}
// 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';
const root = document.getElementById('cal-root');
const title = document.querySelector('.cal-title');
const btnPrev = document.querySelector('.cal-prev');
const btnNext = document.querySelector('.cal-next');
if (day >= 1 && day <= daysInMonth) {
if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate())
cell.classList.add('cal-today');
let view = new Date(); // hoy
view.setDate(1); // primer día del mes
const num = document.createElement('span');
num.className = 'cal-daynum';
num.textContent = day;
cell.appendChild(num);
function buildCalendar(date){
root.innerHTML = '';
const wd = (new Date(year, month, day).getDay() + 6) % 7;
const year = date.getFullYear();
const month = date.getMonth();
title.textContent = monthNames[month] + ' ' + year;
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');
}
// semanas empiezan en lunes
const first = new Date(year, month, 1);
let startIndex = (first.getDay() + 6) % 7;
const daysInMonth = new Date(year, month + 1, 0).getDate();
row.appendChild(cell);
day++;
}
root.appendChild(row);
}
}
// localizar viernes del mes
const fridays = [];
for (let d = 1; d <= daysInMonth; d++){
const wd = (new Date(year, month, d).getDay() + 6) % 7;
if (wd === 4) fridays.push(d);
}
const secondFri = fridays[1]; // 2º viernes
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);
});
}
// 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);
btnPrev.addEventListener('click', () => { view.setMonth(view.getMonth() - 1); buildCalendar(view); });
btnNext.addEventListener('click', () => { view.setMonth(view.getMonth() + 1); buildCalendar(view); });
// grid 6x7
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){
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; // lunes=0
if (wd === 4){
// VIERNES: por defecto en blanco
// 2º viernes -> ART-LAB (neón + rosa)
// 1º/3º/4º/5º -> HACKLAB (neón + negro)
const wrap = document.createElement('div');
wrap.className = 'cal-pills';
if (day === secondFri){
wrap.appendChild(createPill('ART-LAB', '#39FF14', '#ff00aa'));
} else {
wrap.appendChild(createPill('HACKLAB', '#39FF14', '#000'));
}
cell.appendChild(wrap);
} else {
// Resto: semanales normales con sus colores
renderWeeklyPills(cell, wd);
}
} else {
cell.classList.add('cal-empty');
}
row.appendChild(cell);
day++;
}
root.appendChild(row);
}
}
function shiftMonth(delta){
view.setMonth(view.getMonth() + delta);
buildCalendar(view);
}
btnPrev.addEventListener('click', () => shiftMonth(-1));
btnNext.addEventListener('click', () => shiftMonth(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>
</section>
<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>
<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-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/feminismostetuan" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/feminismos_tetuan.jpg" alt="Feminismos Tetuán">
</a>
<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>
<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.
<br>
<strong>Nos reunimos los jueves a las 20</strong> en el CSO La Enredadera,
donde organizamos acciones, debates.
</p>
<p>
<strong>Uno de los temas que más trabajamos</strong> 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. Esta clínica está
bajo el ataque constant>
</p>
<p>
También realizamos debates y otras acciones, como salir a la plaza una vez al
mes para visibilizar las violencias que sufren las mujeres en la sociedad
patriarcal, o debates sobre temas como la pronografía, la prostitución, etc.
</p>
<p>
<strong>Queremos mantener viva la lucha</strong> contra la sociedad patriarcal
y lo vemos como algo muy necesario en el momento actual, en el que la extrema
derecha está atacando los derechos de las mujeres y personas trans. De ahí
que sigamos con nues>
</p>
</section>
<section id="circo">
<h2>Circo</h2>
<p>Información próximamente.</p>
</section>
<section id="fridays">
<h2>Fridays for Future</h2>
<p>Somos parte del movimiento global juvenil por la Justicia Climática.</p>
<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>
<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>
<section id="tienda-gratis">
<h2>Tienda Gratis</h2>
<p>Información próximamente.</p>
</section>
<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="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="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>
<section id="warawas">
<h2>Warawas</h2>
<p>Información próximamente.</p>
</section>
<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="hongos">
<h2>Hongos</h2>
<p>Información próximamente.</p>
</section>
<section id="hacklab">
<h2> Hacklab</h2>
<a class="colectivo-img-link" href="html://hacklab.laenre.net" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/hacklab.jpeg" alt="">
</a>
<section id="fermentos">
<h2>Fermentos</h2>
<p>Información próximamente.</p>
</section>
<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="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>
<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>
<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>
<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 numero 5, Madrid</p>
<p>⚡ Mastodon: <a href="masto.es/@csolaenre">@csolaenre</a></p>
</footer>
</main>
</div>
</div>
</body>
</html>