hacklab/ENRE_WEB
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

415
index.css
View file

@ -11,8 +11,8 @@
} }
:root{ :root{
--sidebar-w: 250px; --sidebar-w: 210px; /* reducido de 250px */
--sidebar-rail: 56px; --sidebar-rail: 48px;
/* “Impact” consistente: Anton (Google) + fallback a Impact */ /* “Impact” consistente: Anton (Google) + fallback a Impact */
--impact: 'Anton', Impact, Haettenschweiler, 'Arial Black', sans-serif; --impact: 'Anton', Impact, Haettenschweiler, 'Arial Black', sans-serif;
@ -144,12 +144,12 @@ body {
main { main {
margin-left: var(--sidebar-w); margin-left: var(--sidebar-w);
transition: margin-left .25s ease; transition: margin-left .25s ease;
flex-grow: 1; flex-grow: 1;
padding: 0px 0px; padding: 0 16px 0 20px; /* 20px izquierda para separar del sidebar */
text-align: center; text-align: center;
font-size: 0.9em; font-size: 0.9em;
} }
header { header {
@ -166,9 +166,9 @@ header h1 {
.top-nav a, .top-nav a,
.top-nav.second a { .top-nav.second a {
font-family: 'Rock Salt'; font-family: Impact, 'Anton', sans-serif;
letter-spacing: 3px; letter-spacing: 1.5px;
font-size: 0.5em; font-size: 0.9rem; /* rem absoluto, no hereda nada */
} }
@ -199,12 +199,12 @@ header h1 {
.top-nav ul { .top-nav ul {
list-style: none; list-style: none;
padding: 0; padding: 8px 10px;
margin: 0; margin: 0;
display: flex; display: flex;
flex-wrap: wrap; /* Permite que haya varias filas si no caben */ flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 5px; /* Espacio entre enlaces */ gap: 6px 8px;
} }
.top-nav li { .top-nav li {
@ -215,41 +215,31 @@ header h1 {
text-decoration: none; text-decoration: none;
background-color: white; background-color: white;
color: black; color: black;
font-weight: bold; font-weight: 900;
padding: 15px 15px; padding: 6px 13px;
border-radius: 20px; border-radius: 18px;
transition: background 0.3s, color 0.3s; border: 2px solid transparent;
font-size: 0.5em;
display: inline-block; display: inline-block;
text-transform: uppercase;
transition: color .15s, border-color .15s, box-shadow .15s;
} }
.top-nav a:hover { .top-nav a:hover {
background: white;
color: #ff00aa; color: #ff00aa;
text-decoration: none; border-color: #ff00aa;
background-color: white; box-shadow: 2px 3px 0 #ff00aa;
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;
} }
/* Secciones del index: fondo blanco, borde rosa, texto negro */ /* Secciones del index: fondo blanco, borde rosa, texto negro */
section{ section{
background: #fff; /* fondo blanco */ background: #fff;
color: #111; /* texto negro */ color: #111;
padding: 18px 20px; padding: 14px 18px;
padding-left: 50px; margin: 10px auto;
margin: 16px auto; max-width: 100%;
max-width: 6mv; border: 2px solid #ff00aa;
border: 2px solid #ff00aa; /* borde rosa */
border-radius: 12px; 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; line-height: 1.6;
} }
@ -391,166 +381,172 @@ button:hover {
̣ ̣
/* ====== CALENDARIO ====== */ /* ====== CALENDARIO ====== */
.cal {
display: grid; /* Botones prev / next */
gap: 8px; .button {
background: #FFFFFF; background: #000;
border: 1px solid rgba(0,255,255,0.18); color: #ff00aa;
border-radius: 12px; border: 2px solid #ff00aa;
padding: 10px; border-radius: 8px;
box-shadow: 0 0 20px rgba(0,255,255,0.05); 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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 12px;
margin: 6px 0 12px; margin: 6px 0 10px;
}
.cal-title{
min-width: 300px;
text-align: center;
font-weight: bold;
color: pink;
text-shadow: 0 0 8px rgba(0,255,255,0.25);
} }
.cal-row{ .cal-title {
display: grid; min-width: 180px;
grid-template-columns: repeat(7, minmax(0,1fr)); text-align: center;
gap: 8px; font-weight: bold;
font-size: 0.9rem;
color: #ff00aa;
letter-spacing: 2px;
text-transform: uppercase;
} }
.cal-cell{
position: relative; /* Grid: sin gap, bordes como líneas internas */
background: #FFFFFF; .cal {
border: 1px solid rgba(255,0,171,1); /* líneas rosas */ background: #fff;
border-radius: 8px; border: 2px solid #ff00aa;
min-height: 90px; border-radius: 12px;
overflow: hidden; 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{ .cal-row:last-child { border-bottom: none; }
background: #FFFFFFF
border: 1px solid rgba(255,0,171,1); /* Cabecera días */
.cal-head { background: #000; }
.cal-head-cell {
background: #000;
color: #ff00aa;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
padding: 8px 0; font-size: 0.78rem;
border: 1px solid rgba(255,0,171,1); padding: 8px 2px;
} border-right: 1px solid rgba(255,0,170,.2);
.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;
} }
.cal-head-cell:last-child { border-right: none; }
/* celdas con evento: fondo con imagen + overlay oscuro */ /* Celda de día */
.cal-event{ .cal-cell {
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{
position: relative; 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; display: flex;
flex-direction: column; flex-direction: column;
gap: 7px; gap: 2px;
margin-top: 15px; margin-top: 1px;
} }
/* Tira (pill) de cada colectivo */ .cal-pill {
.cal-pill{
background: var(--bg); background: var(--bg);
color: var(--fg); color: var(--fg);
border: 1px solid rgba(0,0,0,.15); border-radius: 4px;
border-radius: 6px; padding: 2px 5px;
padding: 3px 6px; font-size: 12px;
font-weight: 700; font-weight: 700;
font-size: 16px; line-height: 1.2;
line-height: 1.1;
box-shadow: 0 0 6px rgba(0,0,0,.06);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
border: 1px solid rgba(0,0,0,.08);
cursor: pointer;
}
.cal-pill:hover {
filter: brightness(1.08);
} }
.cal-pill:hover{ /* Leyenda */
filter: brightness(1.05); .cal-legend {
box-shadow: 0 0 10px rgba(0,0,0,.12); 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{ .top-nav a, .top-nav.second a, .top-nav2 a{
display:inline-block; display:inline-block;
padding:5px 9px; /* más pequeño */ padding:5px 10px;
font-size:.8em; /* más pequeño */ font-size:.8rem;
font-family: Impact, 'Anton', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
line-height:1.1; line-height:1.1;
border:1px solid #ff00aa; border:2px solid transparent;
border-radius:16px; /* un poco más compacto */ border-radius:16px;
background:#fff; background:#fff;
color:#000; color:#000;
text-decoration:none; text-decoration:none;
white-space:nowrap; /* evita que se partan dentro del botón */ white-space:nowrap;
} }
/* Secciones y contenido */ /* Secciones y contenido */
@ -612,14 +611,18 @@ button:hover {
button{ font-size:.9em; padding:8px 12px; } button{ font-size:.9em; padding:8px 12px; }
footer{ font-size:.85em; padding:14px 0; } footer{ font-size:.85em; padding:14px 0; }
/* ====== CALENDARIO (sin scroll lateral) ====== */ /* ====== CALENDARIO móvil ====== */
.cal{ width:100%; padding:8px; gap:4px; border-radius:10px; } .cal{ border-radius:8px; }
.cal-row{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; } .cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); }
.cal-cell{ min-height:56px; padding-top:18px; } .cal-cell{ min-height:52px; padding:17px 2px 2px; }
.cal-daynum{ font-size:1rem; top:6px; left:6px; z-index:2; } .cal-daynum{ font-size:.65rem; top:2px; left:3px; }
.cal-pills{ gap:7px; margin-top:6px; } .cal-today .cal-daynum{ width:16px; height:16px; font-size:.55rem; }
.cal-pill{ font-size:.72rem; padding:2px 4px; line-height:1.3; } .cal-pills{ gap:1px; margin-top:0; }
.cal-head .cal-head-cell{ padding:6px 0; font-size:1.1rem; } .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 li, .top-nav.second li{ list-style:none; }
.top-nav a, .top-nav.second a, .top-nav2 a{ .top-nav a, .top-nav.second a, .top-nav2 a{
display:block; padding:8px 12px; font-size:.95em; display:inline-block; padding:7px 13px; font-size:.88rem;
border:1px solid #ff00aa; border-radius:20px; 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; background:#fff; color:#000; text-decoration:none;
} }
@ -673,14 +678,15 @@ button:hover {
button{ font-size:1em; padding:10px 16px; } button{ font-size:1em; padding:10px 16px; }
footer{ font-size:.95em; padding:16px 0; } footer{ font-size:.95em; padding:16px 0; }
/* Calendario fluido (sin scroll lateral) */ /* Calendario tablet vertical */
.cal{ width:100%; padding:10px; gap:6px; border-radius:12px; } .cal{ border-radius:10px; }
.cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; } .cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); }
.cal-cell{ min-height:70px; padding-top:20px; } .cal-cell{ min-height:64px; padding:20px 3px 3px; }
.cal-daynum{ font-size:1rem; top:6px; left:8px; z-index:2; } .cal-daynum{ font-size:.72rem; top:3px; left:5px; }
.cal-pills{ gap:5px; margin-top:8px; } .cal-today .cal-daynum{ width:18px; height:18px; font-size:.6rem; }
.cal-pill{ font-size:4px; padding:3px 5px; } .cal-pills{ gap:2px; margin-top:1px; }
.cal-head .cal-head-cell{ padding:8px 0; font-size:1rem; } .cal-pill{ font-size:8.5px; padding:1px 3px; }
.cal-head-cell{ padding:7px 1px; font-size:.75rem; }
} }
/* ========== TABLETS HORIZONTALES / PORTÁTILES PEQUEÑOS (769px–1024px) ========== */ /* ========== TABLETS HORIZONTALES / PORTÁTILES PEQUEÑOS (769px–1024px) ========== */
@ -707,19 +713,24 @@ button:hover {
display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0;
} }
.top-nav li, .top-nav.second li{ list-style:none; } .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; } section{ padding:20px; max-width:90%; margin:12px auto; }
button{ font-size:1em; padding:12px 22px; } button{ font-size:1em; padding:12px 22px; }
footer{ font-size:1em; padding:22px; } footer{ font-size:1em; padding:22px; }
/* Calendario (compacto, sin desbordes) */ /* Calendario tablet horizontal */
.cal{ width:100%; padding:10px; gap:6px; border-radius:12px; } .cal{ border-radius:10px; }
.cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; } .cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); }
.cal-cell{ min-height:84px; padding-top:22px; } .cal-cell{ min-height:72px; padding:21px 3px 3px; }
.cal-daynum{ font-size:2rem; } .cal-daynum{ font-size:.76rem; top:3px; left:5px; }
.cal-pills{ margin-top:8px; gap:6px; } .cal-today .cal-daynum{ width:18px; height:18px; font-size:.62rem; }
.cal-pill{ font-size:4px; } .cal-pills{ margin-top:1px; gap:2px; }
.cal-pill{ font-size:9px; padding:2px 4px; }
} }

632
index.html
View file

@ -1,4 +1,3 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="es">
<head> <head>
@ -9,409 +8,354 @@
<link rel="stylesheet" href="/index.css"> <link rel="stylesheet" href="/index.css">
</head> </head>
<body> <body>
<input type="checkbox" id="nav-toggle" class="sr-only"> <input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir/cerrar menú">☰</label> <label for="nav-toggle" class="sb-toggle" aria-label="Abrir/cerrar menú">☰</label>
<div class="container"> <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"> <div class="vertical-marquee left-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2"> <marquee behavior="scroll" direction="up" scrollamount="2">
OKUPA RESISTE 1312 <3 NI DIOS NI AMO, NI PATRIA NI ESTADO -0->
</marquee> </marquee>
</div> </div>
<aside id="sidebar" class="sidebar"> <div class="vertical-marquee right-marquee">
<img src="/INFO/logo_enre_negro.png" alt="Logo de La Enredadera" class="logo"> <marquee behavior="scroll" direction="up" scrollamount="2">
<h2>La Enredadera</h2> OKUPA RESISTE 1312 <3
<p>Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p> </marquee>
<nav class="sidebar-nav"> </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> <ul>
<li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li> <li><a href="/index.html#feminismos">feminismos tetuan</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li> <li><a href="/subdir/campa.html">campañas</a></li>
<li><a href="https://mad.convoca.la/place/CSO%20La%20Enredadera">Eventos</a></li> <li><a href="/index.html#fridays">fridays for future</a></li>
<li><a href="comunicados.html">Comunicados</a></li> <li><a href="/index.html#ovt">organizacion vivienda tetuan</a></li>
<li><a href="mailto:enredadera@riseup.net">Contacto</a></li> <li><a href="/index.html#circo">circo</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li> <li><a href="https://hacklab.laenre.net">hacklab la raiz</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</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> </ul>
</nav> </nav>
</aside> </header>
<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>
<!-- CALENDARIO MENSUAL (AUTO) --> <div class="cal-controls" role="group" aria-label="Navegación de mes">
<section id="agenda" class="panel" aria-label="Calendario mensual"> <button class="button cal-prev" type="button" aria-label="Mes anterior">&larr;</button>
<h2>Calendario</h2> <div class="cal-title" aria-live="polite"></div>
<div class="cal-controls" role="group" aria-label="Navegación de mes"> <button class="button cal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
<button class="button cal-prev" type="button" aria-label="Mes anterior">&larr;</button> </div>
<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"> <div class="cal" id="cal-root"></div>
<!-- Aquí el JS pintará el calendario --> <div class="cal-legend" id="cal-legend-root"></div>
</div>
<script> <script>
(function () { (function () {
const monthNames = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre']; 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) 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 = {
const COLORS = { hacklab: { bg:'#39FF14', fg:'#000', label:'Hacklab' },
hacklab: { bg:'#39FF14', fg:'#000' }, // verde neón + negro (original) artlab: { bg:'#39FF14', fg:'#ff00aa', label:'Art-Lab' },
feminismos: { bg:'#6A0DAD', fg:'#fff' }, // morado + blanco feminismos: { bg:'#6A0DAD', fg:'#fff', label:'Feminismos' },
vivienda: { bg:'#000000', fg:'#ff00aa' },// negro + rosa vivienda: { bg:'#000000', fg:'#ff00aa', label:'Vivienda' },
circo: { bg:'#FFD400', fg:'#000' }, // amarillo + negro bicilab: { bg:'#FF7A00', fg:'#000', label:'Bicilab' },
bicilab: { bg:'#FF7A00', fg:'#000' }, // naranja + negro autodefensa: { bg:'#00BCD4', fg:'#fff', label:'Autodefensa' },
autodefensa: { bg:'#00BCD4', fg:'#fff' }, // cian + blanco fridays: { bg:'#2E8B57', fg:'#fff', label:'Fridays for Future' },
fridays: { bg:'#2E8B57', fg:'#fff' }, // verde oscuro + blanco euskera: { bg:'#FF0000', fg:'#00ff00', label:'Euskera' },
euskera: { bg:'#FF0000', fg:'#00ff00' }, // rojo + verde asamblea_enre: { bg:'#ff00ff', fg:'#fff', label:'Asamblea Enre' },
asamblea_enre: { bg:'#ff00ff', fg:'#fff' }, // rosa + blanco asamblea_externas: { bg:'#fff', fg:'#ff00ff', label:'Asamblea ext.' },
asamblea_externas: { bg:'#FFF', fg:'#ff00ff' } // rosa + blanco montana: { bg:'#8B4513', fg:'#fff', label:'Montaña' },
}; teatro: { bg:'#4169E1', fg:'#fff', label:'Teatro' }
};
// Horarios semanales (sin viernes: se gestionan aparte) const WEEKLY = [
const WEEKLY = [ { group:'asamblea_externas', dow:0, start:'19:00' },
{ group:'asamblea_externas', dow:0, start:'19:00', end:''}, // lunes { group:'asamblea_enre', dow:0, start:'20:00' },
{ group:'asamblea_enre',dow:0, start:'20:00', end:'' }, // lunes { group:'autodefensa', dow:1, start:'20:00' },
{ group:'teatro', dow:2, start:'11:00', end:'12:30' }, // miércoles { group:'teatro', dow:2, start:'11:00' },
{ group:'autodefensa', dow:1, start:'20:00', end:'22:00' }, // martes { group:'autodefensa', dow:2, start:'20:00' },
{ group:'autodefensa', dow:2, start:'20:00', end:'22:00' }, // miércoles { group:'euskera', dow:2, start:'18:15' },
{ group:'euskera', dow:2, start:'18:15', end:'21:00' }, // miércoles { group:'vivienda', dow:3, start:'19:00' },
{ group:'vivienda', dow:3, start:'19:00', end:'21:30' }, // jueves { group:'feminismos', dow:3, start:'20:00' },
{ group:'feminismos', dow:3, start:'20:00', end:'21:30' }, // jueves { group:'bicilab', dow:6, start:'19:00' },
{ group:'fridays', dow:4, start:'19:00', end:'21:00' }, // viernes { group:'montana', dow:6, start:'10:00' }
{ 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
];
function createPill(text, bg, fg) { function createPill(text, bg, fg) {
const pill = document.createElement('div'); const pill = document.createElement('div');
pill.className = 'cal-pill'; pill.className = 'cal-pill';
pill.style.setProperty('--bg', bg); pill.style.setProperty('--bg', bg);
pill.style.setProperty('--fg', fg); pill.style.setProperty('--fg', fg);
pill.textContent = text; 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'); function renderWeeklyPills(cell, wd) {
pill.setAttribute('tabindex', '0'); const todays = WEEKLY.filter(e => e.dow === wd);
pill.style.cursor = 'pointer'; 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', () => { const root = document.getElementById('cal-root');
window.location.href = ENRE_EVENTS_URL; 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) => { const today = new Date();
if (e.key === 'Enter' || e.key === ' ') { let view = new Date();
e.preventDefault(); view.setDate(1);
window.location.href = ENRE_EVENTS_URL;
}
});
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 startIndex = (new Date(year, month, 1).getDay() + 6) % 7;
const todays = WEEKLY.filter(e => e.dow === wd); const daysInMonth = new Date(year, month + 1, 0).getDate();
if (!todays.length) return;
const wrap = document.createElement('div'); const fridays = [];
wrap.className = 'cal-pills'; 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 => { // Cabecera
const { bg, fg } = COLORS[e.group] || { bg:'#eee', fg:'#000' }; const head = document.createElement('div');
const name = e.group.charAt(0).toUpperCase() + e.group.slice(1); head.className = 'cal-row cal-head';
wrap.appendChild(createPill(`${name} ${e.start}-${e.end}`, bg, fg)); 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'); if (day >= 1 && day <= daysInMonth) {
const title = document.querySelector('.cal-title'); if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate())
const btnPrev = document.querySelector('.cal-prev'); cell.classList.add('cal-today');
const btnNext = document.querySelector('.cal-next');
let view = new Date(); // hoy const num = document.createElement('span');
view.setDate(1); // primer día del mes num.className = 'cal-daynum';
num.textContent = day;
cell.appendChild(num);
function buildCalendar(date){ const wd = (new Date(year, month, day).getDay() + 6) % 7;
root.innerHTML = '';
const year = date.getFullYear(); if (wd === 4) {
const month = date.getMonth(); const wrap = document.createElement('div');
title.textContent = monthNames[month] + ' ' + year; 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 row.appendChild(cell);
const first = new Date(year, month, 1); day++;
let startIndex = (first.getDay() + 6) % 7; }
const daysInMonth = new Date(year, month + 1, 0).getDate(); root.appendChild(row);
}
}
// localizar viernes del mes function buildLegend() {
const fridays = []; legend.innerHTML = '';
for (let d = 1; d <= daysInMonth; d++){ ['hacklab','artlab','feminismos','vivienda','bicilab','autodefensa','fridays','euskera','asamblea_enre','montana','teatro']
const wd = (new Date(year, month, d).getDay() + 6) % 7; .forEach(key => {
if (wd === 4) fridays.push(d); const c = COLORS[key];
} if (!c) return;
const secondFri = fridays[1]; // 2º viernes 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 btnPrev.addEventListener('click', () => { view.setMonth(view.getMonth() - 1); buildCalendar(view); });
const head = document.createElement('div'); btnNext.addEventListener('click', () => { view.setMonth(view.getMonth() + 1); buildCalendar(view); });
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 6x7 buildCalendar(view);
let day = 1 - startIndex; buildLegend();
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);
})();
</script> </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"> <a class="colectivo-btn" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">LinkTree</a>
<h2> Feminismos</h2> <a class="colectivo-btn" href="https://www.instagram.com/fridaysformadrid/" target="_blank" rel="noopener">Instagram</a>
</section>
<p>
<strong>Feminismo Tetuán</strong> es una asamblea de barrio que nace a raíz
del movimiento del <strong>8M</strong>.
</p>
<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"> <a class="colectivo-img-link" href="https://www.instagram.com/organizacionviviendatetuan/" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/feminismos_tetuan.jpg" alt="Feminismos Tetuán"> <img class="colectivo-img" src="/INFO/ovt.jpg" alt="Organización Vivienda Tetuán">
</a> </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"> <section id="circo">
LinkTree <h2>Circo</h2>
</a> <p>Información próximamente.</p>
</section>
<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="fridays"> <section id="hacklab">
<h2>Fridays for Future</h2> <h2>Hacklab</h2>
<p>Somos parte del movimiento global juvenil por la Justicia Climática.</p> <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"> <section id="tienda-gratis">
<img class="colectivo-img" src="/INFO/fridays_madrid.jpg" alt="Fridays for Future Madrid"> <h2>Tienda Gratis</h2>
</a> <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"> <section id="biblioteka">
Instagram <h2>Biblioteca Libre</h2>
</a> <p>Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.</p>
</section> <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"> <section id="warawas">
<img class="colectivo-img" src="/INFO/ovt.jpg" alt="Organización Vivienda Tetuán"> <h2>Warawas</h2>
</a> <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"> <section id="hongos">
<h2> Circo</h2> <h2>Hongos</h2>
<p>Información próximamente.</p> <p>Información próximamente.</p>
</section> </section>
<section id="hacklab">
<h2> Hacklab</h2>
<a class="colectivo-img-link" href="html://hacklab.laenre.net" target="_blank" rel="noopener"> <section id="fermentos">
<img class="colectivo-img" src="/INFO/hacklab.jpeg" alt=""> <h2>Fermentos</h2>
</a> <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"> <section id="bicilab">
hacklab.laenre.net <h2>BICILAB</h2>
</a> <p>Bocata de espaguetis todos los domingos a las 17:00 nos engrasamos las manos y recuperamos tu bicicleta!</p>
</section> <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"> <footer>
<h2> Biblioteca Libre</h2> <p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
<p>Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.</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"> </div>
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>
</body> </body>
</html> </html>