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

381
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;
@ -147,7 +147,7 @@ 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;
} }
@ -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 { .cal-title {
min-width: 300px; min-width: 180px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: pink; font-size: 0.9rem;
text-shadow: 0 0 8px rgba(0,255,255,0.25); color: #ff00aa;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Grid: sin gap, bordes como líneas internas */
.cal {
background: #fff;
border: 2px solid #ff00aa;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(255,0,170,.15);
} }
.cal-row { .cal-row {
display: grid; display: grid;
grid-template-columns: repeat(7, minmax(0,1fr)); grid-template-columns: repeat(7, 1fr);
gap: 8px; border-bottom: 1px solid rgba(255,0,170,.15);
}
.cal-cell{
position: relative;
background: #FFFFFF;
border: 1px solid rgba(255,0,171,1); /* líneas rosas */
border-radius: 8px;
min-height: 90px;
overflow: hidden;
padding-top:28px;
}
.cal-head{
opacity: 0.9;
} }
.cal-row:last-child { border-bottom: none; }
/* Cabecera días */
.cal-head { background: #000; }
.cal-head-cell { .cal-head-cell {
background: #FFFFFFF background: #000;
border: 1px solid rgba(255,0,171,1); 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-head-cell:last-child { border-right: none; }
/* Celda de día */
.cal-cell {
position: relative;
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 { .cal-daynum {
position: absolute; position: absolute;
top: 6px; left: 20px; top: 3px;
font-size: 1.2rem; left: 5px;
color: var(--muted); font-size: 0.88rem;
z-index: 2;
}
.cal-empty{
background: ;
border-style: dashed;
opacity: 0.5;
}
/* 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; font-weight: bold;
padding: 8px 0; color: #444;
z-index: 2;
} }
/* --- Ajustes de celda para que quepan las tiras --- */ .cal-today .cal-daynum {
.cal-cell{ background: #ff00aa;
min-height: 110px; /* un poco más alta */ color: #fff;
padding-top: 22px; /* deja hueco al número del día */ border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
top: 2px;
left: 2px;
} }
/* Contenedor vertical de tiras */ .cal-empty {
background: #f5f5f5 !important;
opacity: .5;
}
/* Pills */
.cal-pills { .cal-pills {
position: relative;
z-index: 3; /* por encima de ::before/::after */
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; }
} }

274
index.html
View file

@ -1,4 +1,3 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="es">
<head> <head>
@ -12,6 +11,7 @@
<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"> <div class="vertical-marquee left-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2"> <marquee behavior="scroll" direction="up" scrollamount="2">
NI DIOS NI AMO, NI PATRIA NI ESTADO -0-> NI DIOS NI AMO, NI PATRIA NI ESTADO -0->
@ -32,7 +32,7 @@
<ul> <ul>
<li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li> <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://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://mad.convoca.la/place/CSO%20La%20Enredadera">Eventos</a></li> <li><a href="/convocala.html">Eventos</a></li>
<li><a href="comunicados.html">Comunicados</a></li> <li><a href="comunicados.html">Comunicados</a></li>
<li><a href="mailto:enredadera@riseup.net">Contacto</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://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
@ -50,69 +50,65 @@
<li><a href="/subdir/campa.html">campañas</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#fridays">fridays for future</a></li>
<li><a href="/index.html#ovt">organizacion vivienda tetuan</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="/index.html#circo">circo</a></li>
<li><a href="https://hacklab.laenre.net">hacklab la raiz</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#tienda-gratis">tienda gratis</a></li>
<li><a href="/index.html#biblioteka/">biblioteka</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#warawas">warawas</a></li>
<li><a href="/index.html#Hongos/">hongos</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#fermentos">fermentos</a></li>
<li><a href="/index.html#bicilab/">bicilab</a></li> <li><a href="/index.html#bicilab">bicilab</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
<!-- CALENDARIO MENSUAL -->
<!-- CALENDARIO MENSUAL (AUTO) -->
<section id="agenda" class="panel" aria-label="Calendario mensual"> <section id="agenda" class="panel" aria-label="Calendario mensual">
<h2>Calendario</h2> <h2>Calendario</h2>
<div class="cal-controls" role="group" aria-label="Navegación de mes"> <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> <button class="button cal-prev" type="button" aria-label="Mes anterior">&larr;</button>
<div class="cal-title" aria-live="polite"></div> <div class="cal-title" aria-live="polite"></div>
<button class="button cal-next" type="button" aria-label="Mes siguiente">&rarr;</button> <button class="button cal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
</div> </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' }, // verde neón + negro (original) hacklab: { bg:'#39FF14', fg:'#000', label:'Hacklab' },
feminismos: { bg:'#6A0DAD', fg:'#fff' }, // morado + blanco artlab: { bg:'#39FF14', fg:'#ff00aa', label:'Art-Lab' },
vivienda: { bg:'#000000', fg:'#ff00aa' },// negro + rosa feminismos: { bg:'#6A0DAD', fg:'#fff', label:'Feminismos' },
circo: { bg:'#FFD400', fg:'#000' }, // amarillo + negro vivienda: { bg:'#000000', fg:'#ff00aa', label:'Vivienda' },
bicilab: { bg:'#FF7A00', fg:'#000' }, // naranja + negro bicilab: { bg:'#FF7A00', fg:'#000', label:'Bicilab' },
autodefensa: { bg:'#00BCD4', fg:'#fff' }, // cian + blanco autodefensa: { bg:'#00BCD4', fg:'#fff', label:'Autodefensa' },
fridays: { bg:'#2E8B57', fg:'#fff' }, // verde oscuro + blanco fridays: { bg:'#2E8B57', fg:'#fff', label:'Fridays for Future' },
euskera: { bg:'#FF0000', fg:'#00ff00' }, // rojo + verde euskera: { bg:'#FF0000', fg:'#00ff00', label:'Euskera' },
asamblea_enre: { bg:'#ff00ff', fg:'#fff' }, // rosa + blanco asamblea_enre: { bg:'#ff00ff', fg:'#fff', label:'Asamblea Enre' },
asamblea_externas: { bg:'#FFF', fg:'#ff00ff' } // rosa + blanco 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 = [ const WEEKLY = [
{ group:'asamblea_externas', dow:0, start:'19:00', end:''}, // lunes { group:'asamblea_externas', dow:0, start:'19:00' },
{ group:'asamblea_enre',dow:0, start:'20:00', end:'' }, // lunes { group:'asamblea_enre', dow:0, start:'20:00' },
{ group:'teatro', dow:2, start:'11:00', end:'12:30' }, // miércoles { group:'autodefensa', dow:1, start:'20:00' },
{ group:'autodefensa', dow:1, start:'20:00', end:'22:00' }, // martes { group:'teatro', dow:2, start:'11:00' },
{ group:'autodefensa', dow:2, start:'20:00', end:'22:00' }, // miércoles { group:'autodefensa', dow:2, start:'20:00' },
{ group:'euskera', dow:2, start:'18:15', end:'21:00' }, // miércoles { group:'euskera', dow:2, start:'18:15' },
{ group:'vivienda', dow:3, start:'19:00', end:'21:30' }, // jueves { group:'vivienda', dow:3, start:'19:00' },
{ group:'feminismos', dow:3, start:'20:00', end:'21:30' }, // jueves { group:'feminismos', dow:3, start:'20:00' },
{ group:'fridays', dow:4, start:'19:00', end:'21:00' }, // viernes { group:'bicilab', dow:6, start:'19:00' },
{ group:'hacklab', dow:4, start:'18:00', end:'23:00' }, // viernes { group:'montana', dow:6, start:'10:00' }
{ 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) {
@ -121,70 +117,54 @@
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('role', 'link');
pill.setAttribute('tabindex', '0'); pill.setAttribute('tabindex', '0');
pill.style.cursor = 'pointer'; pill.addEventListener('click', () => { window.location.href = ENRE_EVENTS_URL; });
pill.addEventListener('click', () => {
window.location.href = ENRE_EVENTS_URL;
});
pill.addEventListener('keydown', (e) => { pill.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); window.location.href = ENRE_EVENTS_URL; }
e.preventDefault();
window.location.href = ENRE_EVENTS_URL;
}
}); });
return pill; return pill;
} }
function renderWeeklyPills(cell, wd) { function renderWeeklyPills(cell, wd) {
const todays = WEEKLY.filter(e => e.dow === wd); const todays = WEEKLY.filter(e => e.dow === wd);
if (!todays.length) return; if (!todays.length) return;
const wrap = document.createElement('div'); const wrap = document.createElement('div');
wrap.className = 'cal-pills'; wrap.className = 'cal-pills';
todays.forEach(e => { todays.forEach(e => {
const { bg, fg } = COLORS[e.group] || { bg:'#eee', fg:'#000' }; const c = COLORS[e.group] || { bg:'#eee', fg:'#000', label: e.group };
const name = e.group.charAt(0).toUpperCase() + e.group.slice(1); wrap.appendChild(createPill(c.label + (e.start ? ' ' + e.start : ''), c.bg, c.fg));
wrap.appendChild(createPill(`${name} ${e.start}-${e.end}`, bg, fg));
}); });
cell.appendChild(wrap); cell.appendChild(wrap);
} }
const root = document.getElementById('cal-root'); const root = document.getElementById('cal-root');
const legend = document.getElementById('cal-legend-root');
const title = document.querySelector('.cal-title'); const title = document.querySelector('.cal-title');
const btnPrev = document.querySelector('.cal-prev'); const btnPrev = document.querySelector('.cal-prev');
const btnNext = document.querySelector('.cal-next'); const btnNext = document.querySelector('.cal-next');
let view = new Date(); // hoy const today = new Date();
view.setDate(1); // primer día del mes let view = new Date();
view.setDate(1);
function buildCalendar(date) { function buildCalendar(date) {
root.innerHTML = ''; root.innerHTML = '';
const year = date.getFullYear(); const year = date.getFullYear();
const month = date.getMonth(); const month = date.getMonth();
title.textContent = monthNames[month] + ' ' + year; title.textContent = monthNames[month] + ' ' + year;
// semanas empiezan en lunes const startIndex = (new Date(year, month, 1).getDay() + 6) % 7;
const first = new Date(year, month, 1);
let startIndex = (first.getDay() + 6) % 7;
const daysInMonth = new Date(year, month + 1, 0).getDate(); const daysInMonth = new Date(year, month + 1, 0).getDate();
// localizar viernes del mes
const fridays = []; const fridays = [];
for (let d = 1; d <= daysInMonth; d++) { for (let d = 1; d <= daysInMonth; d++) {
const wd = (new Date(year, month, d).getDay() + 6) % 7; if ((new Date(year, month, d).getDay() + 6) % 7 === 4) fridays.push(d);
if (wd === 4) fridays.push(d);
} }
const secondFri = fridays[1]; // 2º viernes const secondFri = fridays[1];
const lastFri = fridays[fridays.length - 1];
// cabecera // Cabecera
const head = document.createElement('div'); const head = document.createElement('div');
head.className = 'cal-row cal-head'; head.className = 'cal-row cal-head';
weekdayNames.forEach(w => { weekdayNames.forEach(w => {
@ -195,40 +175,37 @@
}); });
root.appendChild(head); root.appendChild(head);
// grid 6x7 // Grid 6×7
let day = 1 - startIndex; let day = 1 - startIndex;
for (let r = 0; r < 6; r++) { for (let r = 0; r < 6; r++) {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'cal-row'; row.className = 'cal-row';
for (let c = 0; c < 7; c++) { for (let c = 0; c < 7; c++) {
const cell = document.createElement('div'); const cell = document.createElement('div');
cell.className = 'cal-cell'; cell.className = 'cal-cell';
if (day >= 1 && day <= daysInMonth) { 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'); const num = document.createElement('span');
num.className = 'cal-daynum'; num.className = 'cal-daynum';
num.textContent = day; num.textContent = day;
cell.appendChild(num); cell.appendChild(num);
const wd = (new Date(year, month, day).getDay() + 6) % 7; // lunes=0 const wd = (new Date(year, month, day).getDay() + 6) % 7;
if (wd === 4) { 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'); const wrap = document.createElement('div');
wrap.className = 'cal-pills'; wrap.className = 'cal-pills';
if (day === secondFri)
if (day === secondFri){ wrap.appendChild(createPill('Art-Lab', COLORS.artlab.bg, COLORS.artlab.fg));
wrap.appendChild(createPill('ART-LAB', '#39FF14', '#ff00aa')); else
} else { wrap.appendChild(createPill('Hacklab', COLORS.hacklab.bg, COLORS.hacklab.fg));
wrap.appendChild(createPill('HACKLAB', '#39FF14', '#000')); if (day === secondFri || day === lastFri)
} wrap.appendChild(createPill('Fridays 🌱', COLORS.fridays.bg, COLORS.fridays.fg));
cell.appendChild(wrap); cell.appendChild(wrap);
} else { } else {
// Resto: semanales normales con sus colores
renderWeeklyPills(cell, wd); renderWeeklyPills(cell, wd);
} }
} else { } else {
@ -242,74 +219,50 @@
} }
} }
function shiftMonth(delta){ function buildLegend() {
view.setMonth(view.getMonth() + delta); legend.innerHTML = '';
buildCalendar(view); ['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', () => shiftMonth(-1)); btnPrev.addEventListener('click', () => { view.setMonth(view.getMonth() - 1); buildCalendar(view); });
btnNext.addEventListener('click', () => shiftMonth(1)); btnNext.addEventListener('click', () => { view.setMonth(view.getMonth() + 1); buildCalendar(view); });
buildCalendar(view); buildCalendar(view);
buildLegend();
})(); })();
</script> </script>
</section> </section>
<section id="feminismos"> <section id="feminismos">
<h2>Feminismos</h2> <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>
<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"> <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"> <img class="colectivo-img" src="/INFO/feminismos_tetuan.jpg" alt="Feminismos Tetuán">
</a> </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>
<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"> <p>Es una asamblea abierta no mixta transinclusiva. <strong>Nos reunimos los jueves a las 20</strong> en el CSO La Enredadera.</p>
LinkTree <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>
</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>
@ -320,20 +273,15 @@
<a class="colectivo-img-link" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener"> <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"> <img class="colectivo-img" src="/INFO/photo_5913560549843653631_y.jpg" alt="Fridays for Future Madrid">
</a> </a>
<a class="colectivo-img-link" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener"> <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"> <img class="colectivo-img" src="/INFO/fridays_madrid.jpg" alt="Fridays for Future Madrid">
</a> </a>
<a class="colectivo-btn" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener"> <a class="colectivo-btn" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">LinkTree</a>
LinkTree <a class="colectivo-btn" href="https://www.instagram.com/fridaysformadrid/" target="_blank" rel="noopener">Instagram</a>
</a>
<a class="colectivo-btn" href="https://www.instagram.com/fridaysformadrid/" target="_blank" rel="noopener">
Instagram
</a>
</section> </section>
<section id="ovt"> <section id="ovt">
<h2>Colectivo de Vivienda</h2> <h2>Colectivo de Vivienda</h2>
<p>Asamblea abierta desde donde defendemos que la vivienda es para quien la habita y no un negocio.</p> <p>Asamblea abierta desde donde defendemos que la vivienda es para quien la habita y no un negocio.</p>
@ -341,77 +289,73 @@
<a class="colectivo-img-link" href="https://www.instagram.com/organizacionviviendatetuan/" 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/ovt.jpg" alt="Organización Vivienda 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>
<a class="colectivo-btn" href="https://www.instagram.com/organizacionviviendatetuan/" target="_blank" rel="noopener">
Instagram
</a>
</section> </section>
<section id="circo"> <section id="circo">
<h2>Circo</h2> <h2>Circo</h2>
<p>Información próximamente.</p> <p>Información próximamente.</p>
</section> </section>
<section id="hacklab"> <section id="hacklab">
<h2>Hacklab</h2> <h2>Hacklab</h2>
<a class="colectivo-img-link" href="https://hacklab.laenre.net" target="_blank" rel="noopener">
<a class="colectivo-img-link" href="html://hacklab.laenre.net" target="_blank" rel="noopener"> <img class="colectivo-img" src="/INFO/hacklab.jpeg" alt="Hacklab La Raíz">
<img class="colectivo-img" src="/INFO/hacklab.jpeg" alt="">
</a> </a>
<a class="colectivo-img-link" href="https://hacklab.laenre.net/eventos.html" target="_blank" rel="noopener"> <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=""> <img class="colectivo-img" src="/INFO/teclado_negro_planta.jpg" alt="">
</a> </a>
<a class="colectivo-btn" href="https://hacklab.laenre.net" target="_blank" rel="noopener">hacklab.laenre.net</a>
<a class="colectivo-btn" href="https://hacklab.laenre.net" target="_blank" rel="noopener">
hacklab.laenre.net
</a>
</section> </section>
<section id="tienda-gratis"> <section id="tienda-gratis">
<h2>Tienda Gratis</h2> <h2>Tienda Gratis</h2>
<p>Información próximamente.</p> <p>Información próximamente.</p>
</section> </section>
<section id="biblioteka"> <section id="biblioteka">
<h2>Biblioteca Libre</h2> <h2>Biblioteca Libre</h2>
<p>Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.</p> <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>
<a class="colectivo-btn" href="/archivos/biblioteca.pdf">
Mas información
</a>
</section> </section>
<section id="warawas"> <section id="warawas">
<h2>Warawas</h2> <h2>Warawas</h2>
<p>Información próximamente.</p> <p>Información próximamente.</p>
</section> </section>
<section id="hongos"> <section id="hongos">
<h2>Hongos</h2> <h2>Hongos</h2>
<p>Información próximamente.</p> <p>Información próximamente.</p>
</section> </section>
<section id="fermentos"> <section id="fermentos">
<h2>Fermentos</h2> <h2>Fermentos</h2>
<p>Información próximamente.</p> <p>Información próximamente.</p>
</section> </section>
<section id="bicilab"> <section id="bicilab">
<h2>BICILAB</h2> <h2>BICILAB</h2>
<p>Bocata de espaguetis todos los domingos a las 17:00 nos engrasamos las manos y recuperamos tu bicicleta!</p> <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>
<a class="colectivo-btn" href="/archivos/asamblea.pdf">
Descargar Actas
</a>
</section> </section>
<footer> <footer>
<p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p> <p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
<p>📌 Calle de la coruña numero 5, Madrid</p> <p>📌 Calle de la Coruña nº5, Madrid</p>
<p>⚡ Mastodon: <a href="masto.es/@csolaenre">@csolaenre</a></p> <p>⚡ Mastodon: <a href="https://masto.es/@csolaenre">@csolaenre</a></p>
</footer> </footer>
</main> </main>
</div> </div>
</body> </body>
</html> </html>