470 lines
19 KiB
HTML
470 lines
19 KiB
HTML
<!-- eventos.html -->
|
||
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Hacklab la Raíz — Eventos</title>
|
||
<link rel="icon" type="image/png" href="imagenes/hacklab.jpeg">
|
||
<link rel="stylesheet" href="subpages.css">
|
||
</head>
|
||
<body class="page-eventos-wide">
|
||
<div class="wrapper">
|
||
|
||
<!-- CABECERA -->
|
||
<header class="sub-header">
|
||
<div class="inner">
|
||
<h1>HACKLAB LA RAÍZ</h1>
|
||
<p class="tagline">Agenda // Próximos // Históricos</p>
|
||
<nav class="crumbs">
|
||
<a href="index.html">home</a> · eventos
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- CONTENIDO -->
|
||
<main class="content">
|
||
|
||
<!-- NAV RÁPIDO -->
|
||
<section class="panel" aria-label="Navegación rápida">
|
||
<p style="text-align:center;">
|
||
<a href="index.html" class="button">Home</a>
|
||
•
|
||
<a href="eventos.html" class="button">Events</a>
|
||
•
|
||
<a href="projects.html" class="button">Projects</a>
|
||
•
|
||
<a href="hacker_types.html" class="button">Tribes</a>
|
||
</p>
|
||
</section>
|
||
|
||
|
||
<!-- 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">←</button>
|
||
<div class="cal-title" aria-live="polite"></div>
|
||
<button class="button cal-next" type="button" aria-label="Mes siguiente">→</button>
|
||
</div>
|
||
|
||
<div class="cal" id="cal-root">
|
||
<!-- JS insertará aquí el calendario -->
|
||
</div>
|
||
|
||
<p class="cal-legend">
|
||
<strong>Viernes:</strong>
|
||
<span class="badge">1º OPEN DAY</span> ·
|
||
<span class="badge">2º ARTLAB</span> ·
|
||
<span class="badge">3º CRAFT NIGHT</span> ·
|
||
<span class="badge">Último DÍA EN BLANCO</span>
|
||
</p>
|
||
|
||
<!-- Posters destacados (2 arriba, 1 abajo) -->
|
||
<div class="poster-grid">
|
||
<figure class="poster-card">
|
||
<img src="imagenes/open_day.png" alt="OPEN DAY">
|
||
</figure>
|
||
|
||
<figure class="poster-card">
|
||
<img src="imagenes/craft_night.png" alt="CRAFT NIGHT">
|
||
</figure>
|
||
|
||
<figure class="poster-card poster-span">
|
||
<img src="imagenes/art_lab_glitch.png" alt="ART LAB">
|
||
</figure>
|
||
</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)
|
||
const IMAGES = {
|
||
OPENDAY: 'archivos/calendarios/openday.jpg',
|
||
ARTLAB: 'archivos/calendarios/artlab.jpg',
|
||
CRAFT: 'archivos/calendarios/craftnight.jpg',
|
||
BLANCO: 'archivos/calendarios/dia_en_blanco.jpg'
|
||
};
|
||
|
||
const root = document.getElementById('cal-root');
|
||
const title = document.querySelector('.cal-title');
|
||
const btnPrev = document.querySelector('.cal-prev');
|
||
const btnNext = document.querySelector('.cal-next');
|
||
|
||
let view = new Date(); // hoy
|
||
view.setDate(1); // primer día del mes
|
||
|
||
function buildCalendar(date){
|
||
// limpiar
|
||
root.innerHTML = '';
|
||
|
||
const year = date.getFullYear();
|
||
const month = date.getMonth();
|
||
title.textContent = monthNames[month] + ' ' + year;
|
||
|
||
// semanas empiezan en lunes
|
||
const first = new Date(year, month, 1);
|
||
let startIndex = (first.getDay() + 6) % 7; // convertir domingo=0 a final
|
||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||
|
||
// encontrar todos los viernes del mes (viernes = 4 si lunes es 0)
|
||
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 firstFri = fridays[0];
|
||
const secondFri = fridays[1];
|
||
const thirdFri = fridays[2];
|
||
const lastFri = fridays[fridays.length - 1];
|
||
|
||
// cabecera de días
|
||
const head = document.createElement('div');
|
||
head.className = 'cal-row cal-head';
|
||
weekdayNames.forEach(w => {
|
||
const cell = document.createElement('div');
|
||
cell.className = 'cal-cell cal-head-cell';
|
||
cell.textContent = w;
|
||
head.appendChild(cell);
|
||
});
|
||
root.appendChild(head);
|
||
|
||
// grid de días (6 filas x 7 cols para estabilidad)
|
||
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);
|
||
|
||
// etiquetar eventos de los viernes
|
||
const isFriday = ((new Date(year, month, day).getDay() + 6) % 7) === 4;
|
||
if (isFriday){
|
||
let kind = '';
|
||
if (day === firstFri){ kind = 'OPENDAY'; }
|
||
else if (day === secondFri){ kind = 'ARTLAB'; }
|
||
else if (day === thirdFri){ kind = 'CRAFT'; }
|
||
else if (day === lastFri){ kind = 'BLANCO'; }
|
||
|
||
if (kind){
|
||
cell.classList.add('cal-event');
|
||
cell.dataset.kind = kind;
|
||
cell.style.setProperty('--bgimg', `url("${IMAGES[kind]}")`);
|
||
|
||
const label = document.createElement('span');
|
||
label.className = 'cal-label';
|
||
label.textContent = (
|
||
kind === 'OPENDAY' ? 'OPEN DAY' :
|
||
kind === 'ARTLAB' ? 'ARTLAB' :
|
||
kind === 'CRAFT' ? 'CRAFT NIGHT' :
|
||
'DÍA EN BLANCO'
|
||
);
|
||
cell.appendChild(label);
|
||
}
|
||
}
|
||
} 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>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- PRÓXIMOS EVENTOS (3 huecos vacíos) -->
|
||
<section class="panel" aria-label="Próximos eventos">
|
||
<h2>Próximos eventos</h2>
|
||
<ul class="event-list">
|
||
<li class="event">
|
||
<h3 class="title">TBA #1</h3>
|
||
<img class="poster" src="imagenes/" alt="Evento por anunciar">
|
||
<div class="meta"><span class="datetime">por anunciar — 2025</span></div>
|
||
</li>
|
||
<li class="event">
|
||
<h3 class="title">TBA #2</h3>
|
||
<img class="poster" src="imagenes/" alt="Evento por anunciar">
|
||
<div class="meta"><span class="datetime">por anunciar — 2025</span></div>
|
||
</li>
|
||
<li class="event">
|
||
<h3 class="title">TBA #3</h3>
|
||
<img class="poster" src="imagenes/lel.jpeg" alt="Evento por anunciar">
|
||
<div class="meta"><span class="datetime">por anunciar — 2025</span></div>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- EVENTOS REALIZADOS (del más reciente al más antiguo) -->
|
||
<section class="panel" aria-label="Eventos realizados">
|
||
<h2>Eventos realizados</h2>
|
||
|
||
<ul class="event-list">
|
||
|
||
<!-- 2025 -->
|
||
<li class="event">
|
||
<h3 class="title">CRYPTOPARTY — El arte del cifrado</h3>
|
||
<img class="poster" src="imagenes/" alt="Cryptoparty">
|
||
<div class="meta"><span class="datetime">Mayo 2025</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Sistemas operativos — abre el capó de tu Linux</h3>
|
||
<img class="poster" src="imagenes/" alt="Sistemas operativos Linux">
|
||
<div class="meta"><span class="datetime">Mayo 2025</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Bienvenidas a vuestro OASIS — INSTALL PARTY</h3>
|
||
<img class="poster" src="imagenes/" alt="Install party OASIS">
|
||
<div class="meta"><span class="datetime">Mayo 2025</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">OpenWrt — ¡haz tu Wi-Fi libre!</h3>
|
||
<img class="poster" src="imagenes/" alt="OpenWrt Wi-Fi libre">
|
||
<div class="meta"><span class="datetime">Abril 2025</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">CINEFORUM</h3>
|
||
<img class="poster" src="imagenes/" alt="Cineforum">
|
||
<div class="meta"><span class="datetime">Abril 2025</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Fontanería de Linux — SSH y certificados</h3>
|
||
<img class="poster" src="imagenes/" alt="Fontanería Linux">
|
||
<div class="meta"><span class="datetime">Abril 2025</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Self-hosting de mensajería — Taller final (Matrix & SimpleX)</h3>
|
||
<img class="poster" src="imagenes/xmpp.jpeg" alt="Self-hosting mensajería">
|
||
<div class="meta"><span class="datetime">Abril–Mayo 2025</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">IA libre — Autómatas y entrenamiento propio (Taller 2)</h3>
|
||
<img class="poster" src="imagenes/charla_ia.jpg" alt="IA libre taller">
|
||
<div class="meta"><span class="datetime">Abril–Mayo 2025</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">KAFETA CYBERPUNK 2</h3>
|
||
<img class="poster" src="imagenes/cyberpunk2.jpg" alt="Kafeta cyberpunk 2">
|
||
<div class="meta"><span class="datetime">Enero 2025</span></div>
|
||
</li>
|
||
|
||
<!-- 2024 -->
|
||
<li class="event">
|
||
<h3 class="title">Proxmox install party!</h3>
|
||
<img class="poster" src="imagenes/proxmox.jpeg" alt="Proxmox install party">
|
||
<div class="meta"><span class="datetime">Diciembre 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Introducción a la inteligencia artificial libre</h3>
|
||
<img class="poster" src="imagenes/charla_ia.jpg" alt="Introducción IA libre">
|
||
<div class="meta"><span class="datetime">Diciembre 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Cineforum: HACKERWARS</h3>
|
||
<img class="poster" src="imagenes/cineforum.jpeg" alt="Hackerwars cineforum">
|
||
<div class="meta"><span class="datetime">Noviembre 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Install party — ¡fuck systemd!</h3>
|
||
<img class="poster" src="imagenes/charla33.jpg" alt="Install party systemd">
|
||
<div class="meta"><span class="datetime">Noviembre 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Libera y securiza tu teléfono</h3>
|
||
<img class="poster" src="imagenes/charla_moviles.jpg" alt="Privacidad en teléfonos">
|
||
<div class="meta"><span class="datetime">Noviembre 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Federa y libera tus comunicaciones — Fediverso + XMPP</h3>
|
||
<img class="poster" src="imagenes/fedi_fun.jpeg" alt="Fediverso y XMPP">
|
||
<div class="meta"><span class="datetime">Noviembre 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Taller de webs estáticas en HUGO</h3>
|
||
<img class="poster" src="imagenes/hugo.jpeg" alt="Taller HUGO">
|
||
<div class="meta"><span class="datetime">Octubre 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Día de bienvenida</h3>
|
||
<img class="poster" src="imagenes/bienvenida.jpg" alt="Día de bienvenida">
|
||
<div class="meta"><span class="datetime">Septiembre 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Fiesta Julian Assange</h3>
|
||
<img class="poster" src="imagenes/julian.jpeg" alt="Fiesta Julian Assange">
|
||
<div class="meta"><span class="datetime">3 de julio de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Cineforum: Running with the Devil (John McAfee)</h3>
|
||
<img class="poster" src="imagenes/" alt="McAfee cineforum">
|
||
<div class="meta"><span class="datetime">27 de junio de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Taller de autodefensa digital para activistas</h3>
|
||
<img class="poster" src="imagenes/autodefensa.jpeg" alt="Autodefensa digital">
|
||
<div class="meta"><span class="datetime">22 de mayo de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Taller de ganzuado y cerraduras esenciales</h3>
|
||
<img class="poster" src="imagenes/ganzuando.jpeg" alt="Ganzuado y cerraduras">
|
||
<div class="meta"><span class="datetime">4 de mayo de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Kaffeta: >_ CYBERPUNK ;-)</h3>
|
||
<img class="poster" src="imagenes/cyberpunk.jpeg" alt="Kafeta Cyberpunk">
|
||
<div class="meta"><span class="datetime">19 de abril de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Taller de privacidad y seguridad — sesión 3</h3>
|
||
<img class="poster" src="imagenes/defensa_personal3.jpeg" alt="Privacidad y seguridad 3">
|
||
<div class="meta"><span class="datetime">5 de abril de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Interceptando llamadas de aplicaciones Android</h3>
|
||
<img class="poster" src="imagenes/apis_moviles.jpeg" alt="APIs móviles / Android">
|
||
<div class="meta"><span class="datetime">Marzo 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Taller de impresiones 3D</h3>
|
||
<img class="poster" src="imagenes/llaves.jpeg" alt="Impresiones 3D">
|
||
<div class="meta"><span class="datetime">Marzo 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Rebelión de los artefactos</h3>
|
||
<img class="poster" src="imagenes/lols.jpeg" alt="Rebelión de los artefactos">
|
||
<div class="meta"><span class="datetime">Marzo 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Cineforum: El Quinto Poder (Julian Assange)</h3>
|
||
<img class="poster" src="imagenes/julian_cineforum.jpeg" alt="El Quinto Poder">
|
||
<div class="meta"><span class="datetime">1 de marzo de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">HACKELARRE</h3>
|
||
<img class="poster" src="imagenes/hacklab_foto.jpeg" alt="Hackelarre">
|
||
<div class="meta"><span class="datetime">Febrero 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Taller de privacidad y seguridad (Ordenadores)</h3>
|
||
<img class="poster" src="imagenes/defensa_personal2.jpeg" alt="Privacidad Ordenadores">
|
||
<div class="meta"><span class="datetime">2 de febrero de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Taller de privacidad y seguridad (Teléfonos)</h3>
|
||
<img class="poster" src="imagenes/defensa_personal3.jpeg" alt="Privacidad Teléfonos">
|
||
<div class="meta"><span class="datetime">15 de marzo de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Cineforum: Aaron Swartz (The Internet's Own Boy)</h3>
|
||
<img class="poster" src="imagenes/internet_boy.jpeg" alt="Aaron Swartz cineforum">
|
||
<div class="meta"><span class="datetime">19 de enero de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Thinktank: Dinámica de grupo, cacharreo HARD-WARES</h3>
|
||
<img class="poster" src="imagenes/primer_taller.jpeg" alt="Thinktank cacharreo">
|
||
<div class="meta"><span class="datetime">5 de enero de 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Nos vamos juntas al fediverso (Mastodon)</h3>
|
||
<img class="poster" src="imagenes/fediversoi.jpeg" alt="Nos vamos al fediverso">
|
||
<div class="meta"><span class="datetime">Enero 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Charla: Antropología hacker</h3>
|
||
<img class="poster" src="imagenes/charla33.jpg" alt="Antropología hacker">
|
||
<div class="meta"><span class="datetime">Enero 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Taller 2 — creación de webs estáticas con Hugo</h3>
|
||
<img class="poster" src="imagenes/hugo.jpeg" alt="Hugo estáticas">
|
||
<div class="meta"><span class="datetime">Enero 2024</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Taller Proxmox</h3>
|
||
<img class="poster" src="imagenes/proxmox.jpeg" alt="Taller Proxmox">
|
||
<div class="meta"><span class="datetime">Enero 2024</span></div>
|
||
</li>
|
||
|
||
<!-- 2023 -->
|
||
<li class="event">
|
||
<h3 class="title">Cineforum: Hackerwars & taller sencillo de Linux</h3>
|
||
<img class="poster" src="imagenes/cineforum.jpg" alt="Hackerwars & Linux">
|
||
<div class="meta"><span class="datetime">22 de diciembre de 2023</span></div>
|
||
</li>
|
||
|
||
<li class="event">
|
||
<h3 class="title">Cineforum: Anonymous — The Story of Anonymous Hacktivist</h3>
|
||
<img class="poster" src="imagenes/" alt="Anonymous cineforum">
|
||
<div class="meta"><span class="datetime">8 de diciembre de 2023</span></div>
|
||
</li>
|
||
|
||
</ul>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="sub-footer">
|
||
<div class="inner">© Hacklab la Raíz — CC BY-NC-SA 4.0</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|