hacklab/ENRE_WEB
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ENRE_WEB/index.html
SITO ce3127baff Sección «Pedir evento» con gestor de reservas y calendario legible en móvil 
- /pedir/: calendario de fechas pedidas (negro) y confirmadas (verde),
  findes tranqui y con ruido, solo findes por defecto con opción de ver la
  semana entera. Se pincha un día libre y, sin sesión, se pide entrar y se
  vuelve al formulario con la fecha puesta.
- Gestor en Go (gestor/): cuentas por colectivo con argon2id, sesiones y
  CSRF, cupo y ventana de la asamblea, caducidades, registro append-only.
- La cuenta de la asamblea confirma, rechaza, cambia turnos de finde y en
  «Todas las fechas» quita o modifica cualquier evento.
- Orden «cuenta» y «clave» con -clave y -definitiva para fijar contraseñas
  desde el servidor; ninguna contraseña va en el repositorio.
- Botón «Pedir evento» arriba de la barra lateral en todas las páginas.
- Calendario semanal en móvil: lista de días con nombre y hora de cada cita.
- Fuentes servidas desde fuentes/: fuera Google Fonts en todas las páginas.
2026-09-23 11:32:25 +02:00

181 lines
8.5 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Enredadera de Tetuán</title>
<meta name="description" content="CSO La Enredadera de Tetuán. Centro Social Autogestionado en la Calle de la Coruña 5, Madrid. Haciendo barrio desde 2009.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="La Enredadera de Tetuán">
<meta property="og:description" content="CSO La Enredadera de Tetuán. Centro Social Autogestionado en la Calle de la Coruña 5, Madrid. Haciendo barrio desde 2009.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/index.css">
</head>
<body>
<!-- Menú lateral: checkbox + label, sin una línea de JavaScript -->
<input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir o cerrar el menú">☰</label>
<label for="nav-toggle" class="sb-overlay" aria-hidden="true"></label>
<!-- ==========================================================
LA FORMA DE LA HOJA. Se define una sola vez por página y
cada hoja la reutiliza con <use>. Los colores salen de las
variables --limbo, --borde y --nervio, que pone el CSS.
========================================================== -->
<svg class="defs" aria-hidden="true" focusable="false" width="0" height="0">
<symbol id="hoja-forma" viewBox="0 0 100 132">
<!-- Volteada: el rabillo queda arriba y la hoja cuelga. Así el punto por
el que se agarra a la raíz es la esquina superior del recuadro, y el
giro no depende de ningún porcentaje. -->
<g transform="translate(0,132) scale(1,-1)" fill="none" stroke-linejoin="round" stroke-linecap="round">
<!-- Rabillo, en marrón: es la parte leñosa que engancha con el tallo.
Mide 42 y no 24: con el corto, el limbo nacía pegado a la raíz y
la cruzaba. El recuadro crece con él (114 -> 132) para que la caja
siga midiendo lo que se dibuja; el limbo no cambia de tamaño. -->
<path stroke="var(--rabillo)" stroke-width="3.2" d="M50 88 L50 130"/>
<!-- Zarcillo verde. Sale solo en algunas hojas: el CSS enciende
--zarcillo en una de cada tres para que no salgan calcadas. -->
<path stroke="var(--nervio)" stroke-width="1.9" stroke-opacity="var(--zarcillo,0)"
d="M50 100 C38 98 32 90 36 84 C39 80 45 82 44 88 C43 94 36 96 30 92"/>
<!-- Contorno de hoja de hiedra, en rosa -->
<path stroke="var(--trazo)" stroke-width="2.7"
d="M50 5 C56 20 61 36 65 48 C76 44 89 40 96 45 C96 62 84 74 70 80 C62 84 56 83 50 88 C44 83 38 84 30 80 C16 74 4 62 4 45 C11 40 24 44 35 48 C39 36 44 20 50 5 Z"/>
<!-- Nervadura palmada, en verde: los cinco nervios salen del rabillo -->
<g stroke="var(--nervio)" stroke-width="1.5">
<path d="M50 86 L50 13"/>
<path d="M50 86 C59 72 78 56 90 48"/>
<path d="M50 86 C41 72 22 56 10 48"/>
<path d="M50 86 C57 84 65 81 71 77"/>
<path d="M50 86 C43 84 35 81 29 77"/>
</g>
</g>
</symbol>
</svg>
<div class="container">
<aside class="sidebar">
<!-- El botón va antes que el logo: es lo primero que se ve al abrir el
menú, y la asamblea lo quiso arriba del todo. -->
<a class="sb-pedir" href="/pedir/">Pedir evento</a>
<img src="/INFO/logo_enre_negro.png" alt="" class="logo" width="96" height="96">
<!-- Es la marca del panel, no un encabezado de sección: como el panel
va ANTES del <main>, un <h2> aquí hacía que el primer encabezado
del documento fuera de nivel 2 y el <h1> viniera después. -->
<p class="sb-marca">La Enredadera</p>
<p class="lema">Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav" aria-label="Secciones">
<ul>
<li><a href="/colectivos.html">Colectivos</a></li>
<li><a href="/calendario.html">Calendario</a></li>
<li><a href="/eventos.html">Eventos</a></li>
<li><a href="/subdir/campa.html">Campañas</a></li>
<li><a href="/subdir/sobre_nosotrxs.html">La Enre</a></li>
<li><a href="/subdir/contacto.html">Contacto</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</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">
<header class="cabecera">
<h1>La Enredadera</h1>
<!-- El espacio antes de cada «·» es duro: sin esto, al partir en dos
líneas la segunda empezaba por el separador. -->
<p class="sub">Centro social autogestionado&nbsp;· Tetuán, Madrid&nbsp;· desde 2009</p>
</header>
<!-- ======================================================
LA ENREDADERA.
Para añadir una hoja: copia un <li> entero y cambia el
href y el texto. La posición y el ángulo salen solos.
====================================================== -->
<div class="enredadera-wrap">
<ul class="enredadera">
<li>
<a class="hoja" href="/colectivos.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Colectivos</span>
</a>
</li>
<li>
<a class="hoja" href="/calendario.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Calendario</span>
</a>
</li>
<li>
<a class="hoja" href="/eventos.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Eventos</span>
</a>
</li>
<!-- REDES: al pulsarla brotan tres hojas con las redes. Todo con un
checkbox y CSS, ni una línea de JavaScript. -->
<li class="li-redes">
<input type="checkbox" id="redes-toggle" class="sr-only">
<label class="hoja" for="redes-toggle">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Redes</span>
</label>
<ul class="brotes">
<li>
<a class="hoja hoja-brote" href="https://masto.es/@csolaenre" rel="me">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Mastodon</span>
</a>
</li>
<li>
<a class="hoja hoja-brote" href="https://t.me/laenredadera">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Telegram</span>
</a>
</li>
<li>
<a class="hoja hoja-brote" href="https://www.instagram.com/la_enredadera_de_tetuan/">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Instagram</span>
</a>
</li>
</ul>
</li>
<li>
<a class="hoja" href="/subdir/campa.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Campañas</span>
</a>
</li>
<li>
<a class="hoja" href="/subdir/sobre_nosotrxs.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">La Enre</span>
</a>
</li>
</ul>
</div>
</main>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink