Primer commit, volcado de todos los archivos

This commit is contained in:
Admin de hacklab 2025-11-04 15:07:37 +01:00
commit 2f96306686
109 changed files with 4567 additions and 0 deletions

0
README.md Normal file
View file

237
arte.html Normal file
View file

@ -0,0 +1,237 @@
<!-- arte.html -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>ART_LAB</title>
<link rel="icon" type="image/png" href="imagenes/hacklab.jpeg">
<link rel="stylesheet" href="subpages.css">
</head>
<body>
<div class="wrapper">
<!-- CABECERA -->
<header class="sub-header">
<div class="inner">
<h1>ART LAB</h1>
<p class="tagline">Deja en casa raton y teclado</p>
<nav class="crumbs">
<a href="index.html">home</a> · arte
</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>
&nbsp;&nbsp;
<a href="#confeccion" class="button">Confección</a>
&nbsp;&nbsp;
<a href="#volumen-3d" class="button">Escultura &amp; Impresión 3D</a>
&nbsp;&nbsp;
<a href="#iluminacion" class="button">Iluminación</a>
&nbsp;&nbsp;
<a href="#edicion" class="button">Edición (Foto/Vídeo)</a>
&nbsp;&nbsp;
<a href="#sonido" class="button">Sonido</a>
&nbsp;&nbsp;
<a href="#pintura" class="button">Pintura y graficos</a>
</p>
</section>
<section id="volumen-3d" class="panel" aria-label="Escultura e Impresión 3D">
<h2>BIENVENIDAS</h2>
<article>
<div class="media-grid">
<figure class="thumb"><img src="imagenes/all_creatures_wellcome.webp" alt="Impresora 3D"></figure>
<figure class="thumb"><img src="imagenes/teclado_negro_planta.jpg" alt="Escultura"></figure>
<figure class="thumb"><img src="imagenes/art_lab_cartel.webp" alt="Escultura"></figure>
</div>
</article>
</section>
<!-- 2) ESCULTURA & IMPRESIÓN 3D -->
<section id="volumen-3d" class="panel" aria-label="Escultura e Impresión 3D">
<h2>Escultura &amp; Impresión 3D</h2>
<article>
<h3 class="title">Volumen, modelado y prototipado</h3>
<p>
Del boceto a la pieza: modelado libre (Blender/FreeCAD), impresión 3D y postprocesos
con <em>finishing</em> de taller. Apuntes: <a href="https://www.blender.org/" target="_blank">Blender</a>,
<a href="https://www.freecad.org/" target="_blank">FreeCAD</a>,
<a href="https://www.prusa3d.com/page/prusaslicer_424/" target="_blank">PrusaSlicer</a>,
<a href="https://ultimaker.com/software/ultimaker-cura" target="_blank">Cura</a>,
<a href="https://openscad.org/" target="_blank">OpenSCAD</a>. En el radar: ferias maker, biofabricación y esculturas cinéticas.
</p>
<ul class="meta-links">
<li><a class="button" href="https://hackaday.com/tag/3d-printing/" target="_blank">Hackaday // 3D Printing</a></li>
<li><a class="button" href="https://wiki.opensourceecology.org/wiki/Category:3D_Printer" target="_blank">OSE 3D Printer</a></li>
<li><a class="button" href="https://www.blendernation.com/" target="_blank">BlenderNation</a></li>
</ul>
<div class="media-grid">
<figure class="thumb"><img src="imagenes/3dprinter.jpg" alt="Impresora 3D"></figure>
<figure class="thumb"><img src="imagenes/escultura.jpg" alt="Escultura"></figure>
<figure class="thumb"><img src="imagenes/lols.jpeg" alt="Escultura"></figure>
</div>
</article>
</section>
<!-- 3) ILUMINACIÓN -->
<section id="iluminacion" class="panel" aria-label="Iluminación">
<h2>Iluminación</h2>
<article>
<h3 class="title">Luz técnica y creativa</h3>
<p>
Diseño escénico, LEDs direccionables y audio-reactivo. Apuntes:
<a href="https://kno.wled.ge/" target="_blank">WLED</a>,
<a href="https://www.qlcplus.org/" target="_blank">QLC+</a>,
<a href="https://www.openlighting.org/ola/" target="_blank">OLA</a>,
<a href="https://hydra.ojack.xyz/" target="_blank">Hydra</a>,
<a href="https://openframeworks.cc/" target="_blank">OpenFrameworks</a>,
<a href="https://derivative.ca/" target="_blank">TouchDesigner</a> (no libre, muy usado en VJ/teatro).
</p>
<ul class="meta-links">
<li><a class="button" href="https://learn.adafruit.com/adafruit-neopixel-uberguide" target="_blank">Guía NeoPixel</a></li>
<li><a class="button" href="https://ofxaddons.com/" target="_blank">ofxAddons</a></li>
<li><a class="button" href="https://obsproject.com/" target="_blank">OBS</a></li>
</ul>
<div class="media-grid">
<figure class="thumb"><img src="imagenes/iluminacion_verde.jpg" alt="Iluminación verde"></figure>
<figure class="thumb"><img src="imagenes/luz_teles.jpg" alt="Pantallas y luces"></figure>
<figure class="thumb"><img src="imagenes/luzes.jpg" alt="Luces variadas"></figure>
</div>
<ul>
</article>
</section>
<!-- 4) EDICIÓN (FOTO/VÍDEO) -->
<section id="edicion" class="panel" aria-label="Edición (Foto/Vídeo)">
<h2>Edición (Foto/Vídeo)</h2>
<article>
<h3 class="title">Imagen fija y en movimiento</h3>
<p>
Flujo ágil: captura, corrección de color y entrega. Apuntes:
<a href="https://www.darktable.org/" target="_blank">darktable</a>,
<a href="https://www.gimp.org/" target="_blank">GIMP</a>,
<a href="https://www.krita.org/" target="_blank">Krita</a>,
<a href="https://kdenlive.org/en/" target="_blank">Kdenlive</a>,
<a href="https://ffmpeg.org/" target="_blank">FFmpeg</a>.
Cultura: fotolibros, zines y screenings DIY.
</p>
<ul class="meta-links">
<li><a class="button" href="https://krita-artists.org/" target="_blank">Krita Artists</a></li>
<li><a class="button" href="https://film.emulsion.io/" target="_blank">Emulsion (filmmaking)</a></li>
<li><a class="button" href="https://pixls.us/" target="_blank">PIXLS.US</a></li>
</ul>
<div class="media-grid">
<figure class="thumb"><img src="imagenes/foto_editing_windows.jpg" alt="Edición foto"></figure>
<figure class="thumb"><img src="imagenes/photoshop.jpg" alt="Retoque y capas"></figure>
<figure class="thumb"><img src="imagenes/photoshop_lulzec.jpeg" alt="Procesos creativos"></figure>
</div>
</article>
</section>
<!-- 5) SONIDO -->
<section id="sonido" class="panel" aria-label="Sonido">
<h2>Sonido</h2>
<article>
<h3 class="title">Grabación, mezcla y directo</h3>
<p>
De la toma al directo con herramientas libres. Apuntes:
<a href="https://ardour.org/" target="_blank">Ardour</a>,
<a href="https://www.audacityteam.org/" target="_blank">Audacity</a>,
<a href="https://supercollider.github.io/" target="_blank">SuperCollider</a>,
<a href="https://puredata.info/" target="_blank">PureData</a>,
<a href="https://sonic-pi.net/" target="_blank">Sonic Pi</a>.
Cultura: <a href="https://algorave.com/" target="_blank">Algorave</a>, netlabels y radio libre.
</p>
<ul class="meta-links">
<li><a class="button" href="https://linuxaudio.org/" target="_blank">Linux Audio</a></li>
<li><a class="button" href="https://freesound.org/" target="_blank">Freesound</a></li>
<li><a class="button" href="https://icecast.org/" target="_blank">Icecast</a></li>
</ul>
<div class="media-grid">
<figure class="thumb"><img src="imagenes/musica_maestro.jpg" alt="Música en directo"></figure>
<figure class="thumb"><img src="imagenes/musicon.jpg" alt="Set musical"></figure>
<figure class="thumb"><img src="imagenes/set_musica_plantas.jpg" alt="Set plantas"></figure>
</div>
</article>
</section>
<!-- 6) PINTA & COLOREA -->
<section id="pinta-colorea" class="panel" aria-label="Pinta & Colorea">
<h2>PINTURA</h2>
<article>
<h3 class="title">Pintura, mural y gráfica</h3>
<p>
Del mural al fanzine: stencil, paste-up y procesos híbridos. Apuntes:
<a href="https://inkscape.org/" target="_blank">Inkscape</a>,
<a href="https://krita.org/" target="_blank">Krita</a>,
<a href="https://gimp.org/" target="_blank">GIMP</a>.
Cultura: ferias de fanzines, talleres de serigrafía y pintura comunitaria.
</p>
<ul class="meta-links">
<li><a class="button" href="https://www.openscreenprint.org/" target="_blank">Open Screenprint</a></li>
<li><a class="button" href="https://www.printedmatter.org/" target="_blank">Printed Matter</a></li>
<li><a class="button" href="https://stencilarchive.org/" target="_blank">Stencil Archive</a></li>
</ul>
<div class="media-grid">
<figure class="thumb"><img src="imagenes/painting.jpg" alt="Pintura"></figure>
<figure class="thumb"><img src="imagenes/banksy_pintura.jpg" alt="Mural/graffiti"></figure>
<figure class="thumb"><img src="imagenes/visuales.jpg" alt="Visuales gráficos"></figure>
</div>
</article>
</section>
<!-- 1) CONFECCIÓN -->
<section id="confeccion" class="panel" aria-label="Confección">
<h2>Confección</h2>
<article>
<h3 class="title">Textil y vestuario</h3>
<p>
Patronaje, arreglos, custom y upcycling. Apuntes:
<a href="https://www.kobakant.at/DIY/" target="_blank">KOBAKANT (e-textiles)</a>,
<a href="https://inkstitch.org/" target="_blank">Ink/Stitch</a>,
<a href="https://www.blender.org/" target="_blank">Blender (patrones 3D)</a>.
Moda lenta, open-source y reparaciones con comunidad.
</p>
<ul class="meta-links">
<li><a class="button" href="https://www.instructables.com/circuits/wearables/" target="_blank">Wearables DIY</a></li>
<li><a class="button" href="https://wiki.opensourceecology.org/wiki/Textiles" target="_blank">OSE Textiles</a></li>
<li><a class="button" href="https://www.makefashion.ca/resources/" target="_blank">MakeFashion</a></li>
</ul>
<div class="media-grid">
<figure class="thumb"><img src="imagenes/confeccion.jpg" alt="Confección"></figure>
<figure class="thumb"><img src="imagenes/confeccion_maquina.jpg" alt="Custom y taller"></figure>
<figure class="thumb"><img src="imagenes/create_art.jpg" alt="Cartelería textil"></figure>
</div>
</article>
</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>

121
artivismo.css Normal file
View file

@ -0,0 +1,121 @@
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
body {
background-color: #000000;
color: #00ff00;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
}
.container {
text-align: center;
max-width: 95%;
width: calc(100% - 40px);
border: 2px solid #00ff00;
padding: 20px;
background-color: #000;
box-shadow: 0 0 20px #00ff00;
position: relative;
z-index: 10;
overflow-y: auto;
max-height: 90vh;
}
header {
text-align: center;
}
header marquee {
font-size: 1.2em;
color: #ff0080;
}
h1 {
font-family: 'Press Start 2P', sans-serif;
margin: 20px 0;
font-size: 2.5em;
text-transform: uppercase;
color: #ff69b4;
text-shadow: 3px 3px 0 #ff0000, -1px -1px 0 #ff0000, 1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px 1px 0 #ff0000;
}
h2 {
margin: 30px 0 10px;
font-size: 1.8em;
text-decoration: underline;
color: #ff0080;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}
.gallery img {
max-width: 30%;
border: 2px solid #00ff00;
box-shadow: 0 0 10px #ff69b4;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery img:hover {
transform: scale(1.1);
box-shadow: 0 0 20px #ff69b4;
}
.downloads {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.download-button {
background-color: #00ff00;
color: #000000;
padding: 10px 20px;
text-decoration: none;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
font-size: 0.8em;
border-radius: 5px;
border: 2px solid #00ff00;
box-shadow: 0 4px #008000;
transition: all 0.3s ease;
}
.download-button:hover {
background-color: #ff69b4;
color: #00ff00;
box-shadow: 0 6px #00ff00, 0 0 10px #ff69b4;
transform: translateY(-2px);
}
footer {
text-align: center;
margin-top: 20px;
padding: 10px;
background-color: #000;
border-top: 2px solid #00ff00;
position: relative;
z-index: 10;
}
.marquee-footer {
background-color: #000;
padding: 5px 0;
border-top: 2px solid #00ff00;
border-bottom: 2px solid #00ff00;
color: #ff69b4;
font-family: 'Press Start 2P', sans-serif;
font-size: 0.8em;
}

49
artivismo.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artivismo - Hacklab la Raíz</title>
<link rel="stylesheet" href="artivismo.css">
</head>
<body>
<div class="container">
<header>
<h1>Artivismo - Hacklab la Raíz</h1>
<marquee>!! Where art meets activism !! ; - )</marquee>
</header>
<main>
<h2>Galería de Graffiti y Murales</h2>
<div class="gallery">
<img src="imagenes/graffiti1.jpg" alt="Graffiti 1">
<img src="imagenes/graffiti2.jpg" alt="Graffiti 2">
<img src="imagenes/mural1.jpg" alt="Mural 1">
<img src="imagenes/mural2.jpg" alt="Mural 2">
</div>
<h2>Galería de Stencils</h2>
<div class="gallery">
<img src="imagenes/stencil1.jpg" alt="Stencil 1">
<img src="imagenes/stencil2.jpg" alt="Stencil 2">
<img src="imagenes/stencil3.jpg" alt="Stencil 3">
<img src="imagenes/stencil4.jpg" alt="Stencil 4">
</div>
<h2>Descarga de Stencils en PDF</h2>
<div class="downloads">
<a href="archivos/artivismo/stencil1.pdf" class="download-button">Descargar Stencil 1</a>
<a href="archivos/artivismo/stencil2.pdf" class="download-button">Descargar Stencil 2</a>
<a href="archivos/artivismo/stencil3.pdf" class="download-button">Descargar Stencil 3</a>
<a href="archivos/artivismo/stencil4.pdf" class="download-button">Descargar Stencil 4</a>
</div>
</main>
<footer>
<div class="marquee-footer">
<marquee behavior="scroll" direction="left">Arte es resistencia, resistencia es arte. Hazlo tú mismo. Libera tu ciudad.</marquee>
</div>
</footer>
</div>
</body>
</html>

127
contacto.html Normal file
View file

@ -0,0 +1,127 @@
<!-- contacto.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 — Contacto</title>
<link rel="icon" type="image/png" href="imagenes/hacklab.jpeg">
<link rel="stylesheet" href="subpages.css">
</head>
<body>
<div class="wrapper">
<!-- CABECERA -->
<header class="sub-header">
<div class="inner">
<h1>HACKLAB LA RAÍZ</h1>
<p class="tagline">Contacto // Cómo llegar // Enlaces</p>
<nav class="crumbs">
<a href="index.html">home</a> · contacto
</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>
&nbsp;&nbsp;
<a href="eventos.html" class="button">Events</a>
&nbsp;&nbsp;
<a href="projects.html" class="button">Projects</a>
&nbsp;&nbsp;
<a href="hacker_types.html" class="button">Tribes</a>
</p>
</section>
<!-- CONTACTO PRINCIPAL -->
<section class="panel" aria-label="Contacto principal">
<h2>Contacto directo</h2>
<p>
Email: <a href="mailto:hacklab-laraiz@riseup.net" class="title">hacklab-laraiz@riseup.net</a>
</p>
<p>
Lugar habitual: <span class="title">CSO La Enredadera (Tetuán)</span><br>
<em>(Ven y llama al timbre — viernes tarde)</em>
</p>
</section>
<!-- HORARIO Y ACTIVIDAD -->
<section class="panel" aria-label="Horario">
<h2>Horario &amp; actividad</h2>
<ul>
<li><strong>Viernes</strong> por la tarde (habitualmente <strong>18:00</strong>).</li>
<li>Consulta la agenda para fechas concretas y cambios.</li>
</ul>
<p style="text-align:center;">
<a href="eventos.html" class="button">Ver agenda de eventos</a>
</p>
</section>
<!-- ENLACES OFICIALES -->
<section class="panel" aria-label="Enlaces">
<h2>Enlaces oficiales</h2>
<ul>
<li>
Agenda en MAD.CONVOCA.LA:
<a href="https://mad.convoca.la/tag/Hacklab" target="_blank" rel="noopener">mad.convoca.la/tag/Hacklab</a>
</li>
<li>
Meetup:
<a href="https://www.meetup.com/hacklab/" target="_blank" rel="noopener">meetup.com/hacklab</a>
</li>
<li>
Canal de Telegram:
<a href="https://t.me/+p4-PzqpNgGQ2Njg0" target="_blank" rel="noopener">t.me/+p4-PzqpNgGQ2Njg0</a>
</li>
<li>
Radar SQUAT (CSO La Enredadera):
<a href="https://radar.squat.net/en/node/4914" target="_blank" rel="noopener">radar.squat.net/en/node/4914</a>
</li>
<li>
Web CSO La Enredadera:
<a href="https://laenredaderadetetuan.wordpress.com/" target="_blank" rel="noopener">laenredaderadetetuan.wordpress.com</a>
</li>
<li>
Eventbrite:
<a href="https://www.eventbrite.com/o/anonymous-organizer-82816283193" target="_blank" rel="noopener">organizer on Eventbrite</a>
</li>
</ul>
</section>
<!-- MENSAJE RÁPIDO -->
<section class="panel" aria-label="Mensaje rápido">
<h2>Escríbenos</h2>
<p>
¿Tienes una idea, propuesta de taller o quieres colaborar? Escríbenos:
</p>
<p style="text-align:center;">
<a href="mailto:hacklab-laraiz@riseup.net" class="button">Enviar email</a>
</p>
</section>
<!-- NOTAS Y LICENCIA -->
<section class="panel" aria-label="Notas y licencia">
<h2>Notas</h2>
<ul>
<li>Respetamos la privacidad y fomentamos el uso de herramientas libres.</li>
<li>Consulta nuestras actividades y materiales en la <strong>Biblioteka</strong> cuando esté disponible.</li>
</ul>
<p style="text-align:center; margin-top:8px;">
Contenido bajo licencia <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.es" target="_blank" rel="noopener">CC BY-NC-SA 4.0</a>
</p>
</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>

281
copia_index.html Executable file
View file

@ -0,0 +1,281 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Hacklab la Raíz</title>
<link rel="icon" type="image/png" href="imágenes/hacklab.jpeg">
<!-- Open Graph meta tags for social media sharing -->
<meta property="og:title" content="Hacklab la Raíz">
<meta property="og:description" content="El hacklab de Tetuan">
<meta property="og:image" content="imágenes/hacklab_laraiz.png">
<meta property="og:url" content="https://hacklab.laraiz">
<meta property="og:type" content="website">
<!-- Twitter Card meta tags for Twitter sharing -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hacklab la Raíz">
<meta name="twitter:description" content="El hacklab de Tetuan">
<meta name="twitter:image" content="imágenes/hacklab_laraiz.png">
</head>
<body>
<div class="vertical-marquee left">
<marquee behavior="scroll" direction="up">NOCK NOCK NEO, THE MATRIX HAS YOU, FOLLOW THE WHITE RABBIT</marquee>
</div>
<div class="container">
<header>
<h1>HACKLAB LA RAIZ</h1>
<marquee> !! Where hackers come to root !! ; - ) </marquee>
</header>
<div class="top-left-buttons">
<a href="hacker_types.html" class="button">tribus hacker</a>
</div>
<main>
<div class="ascii">
==============================================================================================================================================
</div>
<marquee> Bienvenidas a la comunidad B-D </marquee>
<div class="content">
<div class="column-left">
<h2>Contacto</h2>
<p><a>hacklab-laraiz@riseup.net</a></p>
<p><a>Ven y llama al timbre :-)</a></p>
<p><a></a></p>
<div class="ascii">
======================================
</div>
<h2>Actividad</h2>
<p>Todos los viernes de cada mes a las . Solemos hacer los eventos ese día.</p>
<p>MAD.CONVOCA.LA: <a href="https://mad.convoca.la/tag/Hacklab">https://mad.convoca.la/tag/Hacklab</a></p>
<p><a href="https://www.meetup.com/hacklab/"><strong> 18:00 en el CSO La Enredadera</strong></a></p>
<p><a href="https://youtu.be/u3CKgkyc7Qo?feature=shared">CANAL DE TELEGRAM</a></p>
<p>GRUPO DE MEET UP : <a href="https://www.meetup.com/hacklab/">https://www.meetup.com/hacklab/</a></p>
<p>RADAR SQUAT HACKLAB LA RAIZ : <a href="https://radar.squat.net/en/madrid/hacklab-la-raiz">https://radar.squat.net/en/node/4914</a></p>
<div class="ascii">
=======================================
</div>
<h2>Próximos eventos</h2>
<li>
<strong class="title">Taller 2 Inteligencia artificial libre ( automatas y entrenamiento propoio ) </strong><br>
<span class="datetime">Abril - Mayo de 2025</span>
</li>
<li>
<strong class="title">Selfhosting de mensajeria TALLER FINAL ! Resumen de los 3 anteriores + MATRIX & SIMPLEX</strong><br>
<span class="datetime">Abril - Mayo de 2025</span>
</li>
<li>
<strong class="title">CINEROFUM</strong><br>
<span class="datetime">Abril de 2025</span>
</li>
<li>
<strong class="title">Fontaneria de Linux ! SSH y certificados ;-) </strong><br>
<span class="datetime">Abril de 2025</span>
</li>
<li>
<strong class="title">CRYPTOPARTY , El arte del cifrado</strong><br>
<span class="datetime"> Mayo de 2025</span>
</li>
<li>
<strong class="title">Bienvenidas a vuestro OASIS , INSTALL PARTY !</strong><br>
<span class="datetime">Mayo de 2025</span>
</li>
<li>
<strong class="title">Openwrt haz tu wifi libre !</strong>
<span class="datetime">Abril de 2025</span>
</li>
<li>
<strong class="title">Sistemas operativos ;-) abre el capó de tu linux </strong>
<span class="datetime">Mayo de 2025</span>
</li>
</div>
<div class="column-right">
<h2>Eventos anteriores</h2>
<ul>
<li>
<strong class="title">Cineforum: Anonymous - The Story of Anonymous Hacktivist</strong><br>
<span class="datetime">8 de diciembre de 2023</span>
</li>
<li>
<strong class="title">Cineforum: Hackerwars & taller sencillo de Linux</strong><br>
<span class="datetime">22 de diciembre de 2023</span>
</li>
<li>
<strong class="title">Thinktank: Dinámica de grupo, cacharreo HARD-WARES</strong><br>
<span class="datetime">5 de enero de 2024</span>
</li>
<li>
<strong class="title">Cineforum: Aaron Swartz (The Internet's Own Boy)</strong><br>
<span class="datetime">19 de enero de 2024</span>
</li>
<li>
<strong class="title">Taller de privacidad y seguridad para activistas y periodistas (Ordenadores)</strong><br>
<span class="datetime">2 de febrero de 2024</span>
</li>
<li>
<strong class="title">Cineforum: El Quinto Poder (Julian Assange)</strong><br>
<span class="datetime">1 de marzo de 2024</span>
</li>
<li>
<strong class="title">Taller de privacidad y seguridad para activistas y periodistas (Teléfonos)</strong><br>
<span class="datetime">15 de marzo de 2024</span>
</li>
<li>
<strong class="title">Taller de privacidad y seguridad para activistas y periodistas 3</strong><br>
<span class="datetime">5 de abril de 2024</span>
</li>
<li>
<strong class="title">Kaffeta: >_ CYBERPUNK ;-)</strong><br>
<span class="datetime">19 de abril de 2024</span>
</li>
<li>
<strong class="title">Taller de ganzuado y cerraduras esenciales</strong><br>
<span class="datetime">4 de mayo de 2024</span>
</li>
<li>
<strong class="title">Taller autodefensa digital para activistas</strong><br>
<span class="datetime">22 de mayo de 2024</span>
</li>
<li>
<strong class="title">Cineforum: Running with the Devil (John McAfee)</strong><br>
<span class="datetime">27 de junio de 2024</span>
</li>
<li>
<strong class="title">Fiesta Julian Assange</strong><br>
<span class="datetime">3 de julio de 2024</span>
</li>
<li>
<strong class="title">Dia de bienvenida !</strong><br>
<span class="datetime">Septiembre de 2024</span>
</li>
<li>
<strong class="title">Taller de web estaticas en HUGO !</strong><br>
<span class="datetime">ocutbre de 2024</span>
</li>
<li>
<strong class="title">Federa y libera tus comunicaciones FEDIVERSO + XMPP</strong><br>
<span class="datetime">Noviembre de 2024</span>
</li>
<li>
<strong class="title">Install party !fuck systemd!</strong><br>
<span class="datetime">Noviembre de 2024</span>
</li>
<li>
<strong class="title">Cineforum: HACKERWARS</strong><br>
<span class="datetime">Noviembre de 2024</span>
</li>
<li>
<strong class="title"> Libera y securiza tu telefono!</strong><br>
<span class="datetime">Noviembre de 2024</span>
</li>
<li>
<strong class="title">Introducción A la inteligencia artificial libre</strong><br>
<span class="datetime">Diciembre de 2024</span>
</li>
<li>
<strong class="title">Proxmox intall party!</strong><br>
<span class="datetime">Diciembre de 2024</span>
</li>
<li>
<strong class="title">KAFETA CYBERPUNT 2</strong><br>
<span class="datetime">Enero de 2025</span>
</li>
<li>
<strong class="title">Taller proxmox ! ; - )</strong><br>
<span class="datetime">Enero de 2024</span>
</li>
<li>
<strong class="title">Nos vamos juntas ! al fediverso :) [ Mastodon ]</strong><br>
<span class="datetime">Enero de 2024</span>
</li>
<li>
<strong class="title">Charla Antropologia hacker!</strong><br>
<span class="datetime">Enero de 2024</span>
</li>
<li>
<strong class="title">Taller 2 creacion de web estaticas con hugo!</strong><br>
<span class="datetime">Enero de 2024</span>
</li>
<li>
<strong class="title">HACKELARRE</strong><br>
<span class="datetime">Febrero de 2024</span>
</li>
<li>
<strong class="title">Interceptando llamadas de aplicaciones android</strong><br>
<span class="datetime">Marzo de 2024</span>
</li>
<li>
<strong class="title">Taller de impresiones 3D</strong><br>
<span class="datetime">Marzo de 2024</span>
</li>
<li>
<strong class="title">Rebelion de los artefactos</strong><br>
<span class="datetime">Marzo de 2024</span>
</li>
</ul>
</div>
</div>
<div class="ascii">
=======================================================================================================
</div>
<h2>BIBLIOTEKA</h2>
<p> <a href="/books">Dejaremos por aqui los proyectos en los que estamos trabajando , subdominios e informacion importante . </a> </p>
</main>
<div class="ascii">
============================================================================
</div>
<footer>
<div class="footer-left">
<img src="imagenes/enredadera.jpg" alt="Enredadera" class="footer-img">
</div>
<div class="footer-center">
<p><a href="https://mad.convoca.la/event/cineforum-hacklab-la-raiz">Hacklab la Raíz : ------------https://mad.convoca.la/event/hacklab</a></p>
<p><a href="https://radar.squat.net/en/node/4914">RADAR SQUAT CSO LA ENREDADERA : -----------https://radar.squat.net/en/node/4914</a></p>
<p><a href="https://laenredaderadetetuan.wordpress.com/">WEB CSO LA ENREDADERA : -----------https://laenredaderadetetuan.wordpress.com/</a></p>
<p><a href="https://t.me/+p4-PzqpNgGQ2Njg0">CANAL DE TELEGRAM: ------------https://youtu.be/u3CKgkyc7Qo?feature=shared</a></p>
<p><a href="https://www.meetup.com/hacklab/"> GRUPO DE MEET UP -----------https://www.meetup.com/hacklab/</a></p>
<p><a href="https://www.eventbrite.com/o/anonymous-organizer-82816283193">GRUPO EVENT BRITE </a></p>
<p>Contenido bajo licencia <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.es">CC BY-NC-SA 4.0</a></p>
</div>
<div class="footer-right">
<img src="imagenes/hacklab.jpeg" alt="Hacklab" class="footer-img">
</div>
</footer>
<div class="vertical-marquee left">
<div class="scrolling-text">WAKE</div>
<div class="scrolling-text">UP</div>
<div class="scrolling-text">NEO</div>
<div class="scrolling-text">...</div>
<div class="scrolling-text">THE</div>
<div class="scrolling-text">MATRIX</div>
<div class="scrolling-text">HAS</div>
<div class="scrolling-text">YOU</div>
<div class="scrolling-text">...</div>
</div>
<div class="vertical-marquee right">
<div class="scrolling-text">FOLLOW</div>
<div class="scrolling-text">THE</div>
<div class="scrolling-text">WHITE</div>
<div class="scrolling-text">RABBIT</div>
<div class="scrolling-text">.</div>
<div class="scrolling-text">KNOCK</div>
<div class="scrolling-text">KNOCK</div>
<div class="scrolling-text">NEO</div>
<div class="scrolling-text">.</div>
</div>
</body>
</html>

345
copia_styles.css Executable file
View file

@ -0,0 +1,345 @@
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
body {
background-color: #000000;
color: #00ff00;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.vertical-marquee {
position: fixed;
top: 0;
bottom: 0;
width: 20px;
background-color: #000;
color: #00ff40;
font-family: 'Press Start 2P', sans-serif;
font-size: 0.8em;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.vertical-marquee.left {
left: 0;
}
.vertical-marquee.right {
right: 0;
}
.scrolling-text {
writing-mode: vertical-rl;
text-orientation: mixed;
text-align: center;
animation: scrollUp 10s linear infinite;
}
@keyframes scrollUp {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
.container {
text-align: center;
max-width: 95%;
width: calc(100% - 40px); /* Reduce the width by the width of both marquees */
border: 2px solid #00ff00;
padding: 20px;
background-color: #000;
box-shadow: 0 0 20px #00ff00;
position: relative;
z-index: 10;
overflow-y: auto;
max-height: 90vh;
}
header {
text-align: center;
}
header marquee {
font-size: 1.2em;
color: #ff0080;
}
h1 {
font-family: 'Press Start 2P', sans-serif;
margin: 20px 0;
font-size: 3.5em; /* Aumentar el tamaño del título */
text-transform: uppercase;
color: #ff69b4;
text-shadow: 3px 3px 0 #ff0000, -1px -1px 0 #ff0000, 1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px 1px 0 #ff0000;
}
main {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.content {
display: flex;
justify-content: center;
width: 100%;
gap: 20px;
}
.column-left, .column-right {
width: 48%;
text-align: left;
}
h2 {
margin: 30px 0 10px;
font-size: 1.8em;
text-decoration: underline;
color: #ff0080;
}
p, li {
margin: 10px 0;
line-height: 1.6;
}
.datetime {
color: #ff0080;
}
.title {
color: #00ff00;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
}
a {
color: #00ff00;
text-decoration: none;
position: relative;
z-index: 0;
}
a:hover {
color: #000000; /* Cambiar el color de la letra a negro en hover */
text-decoration: none;
}
a::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
top: -3px;
background: #ff0080;
z-index: -1;
transition: transform 0.3s;
transform: scaleX(0);
transform-origin: left;
}
a:hover::before {
transform: scaleX(1);
}
.top-left-buttons {
display: flex;
justify-content: center; /* Centra los botones horizontalmente */
gap: 2em; /* Mantiene la separación entre los botones */
margin-bottom: 20px; /* Espacio entre los botones y el contenido debajo */
}
.top-left-buttons .button {
background-color: #00ff00;
color: #000000;
padding: 15px 30px; /* Aumentar el padding para hacer los botones más grandes */
text-decoration: none;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
font-size: 2em; /* Aumentar el tamaño de la fuente en los botones */
border-radius: 5px;
border: 2px solid #00ff00;
box-shadow: 0 4px #008000;
transition: all 0.3s ease;
}
.top-left-buttons .button:hover {
background-color: #ff69b4; /* Fondo rosa al hacer hover */
color: #00ff00; /* Letra verde al hacer hover */
box-shadow: 0 6px #00ff00, 0 0 10px #ff69b4; /* Sombra verde y resplandor */
transform: translateY(-2px); /* Levemente hacia arriba para el efecto de "sobresalir" */
}
.icons img {
width: 50px;
margin: 0 10px;
}
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
text-align: center;
margin-top: 20px;
font-size: 0.8em;
padding: 10px 0;
}
.footer-left, .footer-right {
flex: 1;
}
.footer-center {
flex: 2;
}
.footer-img {
width: 400px;
height: auto;
}
footer a {
color: #00ff00;
}
footer a:hover {
color: #000000; /* Cambiar el color de la letra a negro en hover */
}
/* ASCII art styles */
.ascii {
font-family: 'Courier New', Courier, monospace;
white-space: pre;
color: #00ff00;
margin: 20px 0;
line-height: 1.2;
}
/* Media Query para móviles (pantallas menores de 768px) */
@media only screen and (max-width: 768px) {
/* Ajusta el cuerpo para móviles */
body {
overflow-x: hidden;
font-size: 0.9em; /* Reduce el tamaño general de la fuente */
}
.container {
max-width: 100%;
padding: 10px;
overflow-x: hidden;
}
/* Títulos más pequeños en móviles */
h1 {
font-size: 1.8em; /* Reduce el tamaño del título */
}
h2 {
font-size: 1.5em; /* Reduce el tamaño de los subtítulos */
}
p, li {
font-size: 0.85em; /* Ajusta el tamaño de texto para mejor legibilidad */
line-height: 1.4;
}
/* Coloca las columnas una debajo de la otra en móviles */
.content {
flex-direction: column;
gap: 10px; /* Espacio entre las columnas al pasar a vertical */
}
.column-left, .column-right {
width: 100%; /* Hacer que cada columna ocupe todo el ancho */
}
/* Ajusta el tamaño de los botones para móviles */
.top-left-buttons {
flex-direction: column; /* Coloca los botones en vertical */
gap: 10px; /* Añade espacio entre los botones */
width: 100%;
}
.top-left-buttons .button {
font-size: 1em; /* Ajusta el tamaño de la fuente en los botones */
padding: 10px 15px; /* Ajuste del padding en móviles */
width: 100%; /* Hacer que el botón ocupe todo el ancho disponible */
}
/* Ajuste de ASCII art (las líneas ===) */
.ascii {
font-size: 0.7em; /* Reduce el tamaño del arte ASCII */
line-height: 0.9; /* Ajusta el espaciado de las líneas */
margin: 10px 0; /* Reduce el margen para móviles */
}
/* Ocultar los marcos laterales en móviles */
.vertical-marquee {
display: none;
}
footer {
font-size: 0.75em; /* Reduce el tamaño del pie de página */
}
/* Ajuste de imágenes en el footer */
.footer-img {
width: 150px; /* Ajustar las imágenes en el pie de página para móviles */
}
}
/* Media Query para pantallas muy pequeñas (menores de 400px) */
@media only screen and (max-width: 400px) {
h1 {
font-size: 1.5em; /* Reduce aún más el tamaño del título */
}
h2 {
font-size: 1.3em; /* Ajusta el subtítulo */
}
p, li {
font-size: 0.75em; /* Texto más pequeño */
}
.ascii {
font-size: 0.6em; /* Ajusta el tamaño de las líneas ASCII */
line-height: 0.8; /* Reduce el espaciado entre las líneas */
}
.top-left-buttons .button {
font-size: 0.8em; /* Botones aún más pequeños */
padding: 8px 12px;
}
footer {
font-size: 0.6em;
}
}

125
documentacion.css Normal file
View file

@ -0,0 +1,125 @@
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
body {
background-color: #000000;
color: #00ff00;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
}
.vertical-marquee {
position: fixed;
top: 0;
bottom: 0;
width: 20px;
background-color: #000;
color: #00ff40;
font-family: 'Press Start 2P', sans-serif;
font-size: 0.8em;
overflow: hidden;
}
.vertical-marquee.left {
left: 0;
}
.vertical-marquee.right {
right: 0;
}
.container {
text-align: center;
max-width: 95%;
width: calc(100% - 40px);
border: 2px solid #00ff00;
padding: 20px;
background-color: #000;
box-shadow: 0 0 20px #00ff00;
position: relative;
z-index: 10;
overflow-y: auto;
max-height: 90vh;
}
header {
text-align: center;
}
header marquee {
font-size: 1.2em;
color: #ff0080;
}
h1 {
font-family: 'Press Start 2P', sans-serif;
margin: 20px 0;
font-size: 2.5em;
text-transform: uppercase;
color: #ff69b4;
text-shadow: 3px 3px 0 #ff0000, -1px -1px 0 #ff0000, 1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px 1px 0 #ff0000;
}
h2 {
margin: 30px 0 10px;
font-size: 1.8em;
text-decoration: underline;
color: #ff0080;
}
.event {
margin-bottom: 20px;
text-align: left;
}
.event h3 {
font-size: 1.5em;
color: #ff69b4;
}
.download-button {
background-color: #00ff00;
color: #000000;
padding: 10px 20px;
margin-right: 10px;
text-decoration: none;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
font-size: 0.8em;
border-radius: 5px;
border: 2px solid #00ff00;
box-shadow: 0 4px #008000;
transition: all 0.3s ease;
}
.download-button:hover {
background-color: #ff69b4;
color: #00ff00;
box-shadow: 0 6px #00ff00, 0 0 10px #ff69b4;
transform: translateY(-2px);
}
footer {
text-align: center;
margin-top: 20px;
padding: 10px;
background-color: #000;
border-top: 2px solid #00ff00;
position: relative;
z-index: 10;
}
.marquee-footer {
background-color: #000;
padding: 5px 0;
border-top: 2px solid #00ff00;
border-bottom: 2px solid #00ff00;
color: #ff69b4;
font-family: 'Press Start 2P', sans-serif;
font-size: 0.8em;
}

150
documentacion.html Normal file
View file

@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documentación - Hacklab la Raíz</title>
<link rel="stylesheet" href="documentacion.css">
</head>
<body>
<div class="vertical-marquee left">
<marquee behavior="scroll" direction="up">SIN MIEDO NO HAY LIMITES, SIN LIMITES NO HAY CONTROL, SIN CONTROL NO HAY MIEDO, SIN MIEDO NO HAY LIMITES</marquee>
</div>
<div class="container">
<header>
<h1>Documentación - Hacklab la Raíz</h1>
<marquee> !! Where hackers come to root !! ; - ) </marquee>
</header>
<main>
<h2>Eventos anteriores</h2>
<!-- Películas y talleres ordenados por fecha -->
<div class="event">
<h3>Cineforum: Anonymous - The Story of Anonymous Hacktivist</h3>
<p>8 de diciembre de 2023</p>
<a href="https://www.youtube.com/results?search_query=Anonymous+-+The+Story+of+Anonymous+Hacktivist+trailer" class="download-button">Ir al Trailer</a>
</div>
<div class="event">
<h3>Cineforum: Hackerwars & taller sencillo de Linux</h3>
<p>22 de diciembre de 2023</p>
<a href="https://www.youtube.com/results?search_query=Hackerwars+trailer" class="download-button">Ir al Trailer</a>
</div>
<div class="event">
<h3>Thinktank: Dinámica de grupo, cacharreo HARD-WARES</h3>
<p>5 de enero de 2024</p>
<a href="archivos/slides/thinktank_slides.pdf" class="download-button">Descargar SLIDES</a>
<a href="archivos/text/thinktank.txt" class="download-button">Descargar TXT</a>
</div>
<div class="event">
<h3>Cineforum: Aaron Swartz (The Internet's Own Boy)</h3>
<p>19 de enero de 2024</p>
<a href="https://www.youtube.com/results?search_query=Aaron+Swartz+The+Internet%27s+Own+Boy+trailer" class="download-button">Ir al Trailer</a>
</div>
<div class="event">
<h3>Taller de privacidad y seguridad para activistas y periodistas (Ordenadores)</h3>
<p>2 de febrero de 2024</p>
<a href="archivos/slides/privacidad_seguridad_ordenadores_slides.pdf" class="download-button">Descargar SLIDES</a>
<a href="archivos/text/privacidad_seguridad_ordenadores.txt" class="download-button">Descargar TXT</a>
</div>
<div class="event">
<h3>Cineforum: El Quinto Poder (Julian Assange)</h3>
<p>1 de marzo de 2024</p>
<a href="https://www.youtube.com/results?search_query=El+Quinto+Poder+trailer" class="download-button">Ir al Trailer</a>
</div>
<div class="event">
<h3>Taller de privacidad y seguridad para activistas y periodistas (Teléfonos)</h3>
<p>15 de marzo de 2024</p>
<a href="archivos/slides/privacidad_seguridad_telefonos_slides.pdf" class="download-button">Descargar SLIDES</a>
<a href="archivos/text/privacidad_seguridad_telefonos.txt" class="download-button">Descargar TXT</a>
</div>
<div class="event">
<h3>Taller de privacidad y seguridad para activistas y periodistas 3</h3>
<p>5 de abril de 2024</p>
<a href="archivos/slides/privacidad_seguridad_3_slides.pdf" class="download-button">Descargar SLIDES</a>
<a href="archivos/text/privacidad_seguridad_3.txt" class="download-button">Descargar TXT</a>
</div>
<div class="event">
<h3>Kaffeta: >_ CYBERPUNK ;-)</h3>
<p>19 de abril de 2024</p>
<a href="archivos/slides/cyberpunk_slides.pdf" class="download-button">Descargar SLIDES</a>
<a href="archivos/text/cyberpunk.txt" class="download-button">Descargar TXT</a>
</div>
<div class="event">
<h3>Taller de ganzuado y cerraduras esenciales</h3>
<p>4 de mayo de 2024</p>
<a href="archivos/slides/ganzuado_slides.pdf" class="download-button">Descargar SLIDES</a>
<a href="archivos/text/ganzuado.txt" class="download-button">Descargar TXT</a>
</div>
<div class="event">
<h3>Taller autodefensa digital para activistas</h3>
<p>22 de mayo de 2024</p>
<a href="archivos/slides/autodefensa_digital_slides.pdf" class="download-button">Descargar SLIDES</a>
<a href="archivos/text/autodefensa_digital.txt" class="download-button">Descargar TXT</a>
</div>
<div class="event">
<h3>Cineforum: Running with the Devil (John McAfee)</h3>
<p>27 de junio de 2024</p>
<a href="https://www.youtube.com/results?search_query=Running+with+the+Devil+John+McAfee+trailer" class="download-button">Ir al Trailer</a>
</div>
<div class="event">
<h3>Fiesta Julian Assange</h3>
<p>3 de julio de 2024</p>
<a href="https://www.youtube.com/results?search_query=Julian+Assange+trailer" class="download-button">Ir al Trailer</a>
</div>
<h2>Manuales de Autogestión y Self-Hosting</h2>
<!-- Manuales de autogestión -->
<div class="event">
<h3>Manual: Self-hosting con Debian</h3>
<a href="archivos/documentacion/selfhosting_debian.pdf" class="download-button">Descargar PDF</a>
</div>
<div class="event">
<h3>Cómo Clusterizar Varias Torres con Linux</h3>
<a href="archivos/documentacion/cluster_linux.pdf" class="download-button">Descargar PDF</a>
</div>
<div class="event">
<h3>Cómo Configurar OpenWRT en tu Red WiFi</h3>
<a href="archivos/documentacion/openwrt_wifi.pdf" class="download-button">Descargar PDF</a>
</div>
<div class="event">
<h3>Configuración de pfSense para Laboratorio Seguro</h3>
<a href="archivos/documentacion/pfsense_laboratorio.pdf" class="download-button">Descargar PDF</a>
</div>
<div class="event">
<h3>Monitorización de Red con Suricata</h3>
<a href="archivos/documentacion/suricata_red.pdf" class="download-button">Descargar PDF</a>
</div>
</main>
<footer>
<div class="marquee-footer">
<marquee behavior="scroll" direction="left">SIN MIEDO NO HAY LIMITES, SIN LIMITES NO HAY CONTROL, SIN CONTROL NO HAY MIEDO, SIN MIEDO NO HAY LIMITES</marquee>
</div>
</footer>
</div>
<div class="vertical-marquee right">
<marquee behavior="scroll" direction="up">SIN MIEDO NO HAY LIMITES</marquee>
</div>
</body>
</html>

470
eventos.html Normal file
View file

@ -0,0 +1,470 @@
<!-- 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>
&nbsp;&nbsp;
<a href="eventos.html" class="button">Events</a>
&nbsp;&nbsp;
<a href="projects.html" class="button">Projects</a>
&nbsp;&nbsp;
<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">&larr;</button>
<div class="cal-title" aria-live="polite"></div>
<button class="button cal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
</div>
<div class="cal" id="cal-root">
<!-- 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 &amp; SimpleX)</h3>
<img class="poster" src="imagenes/xmpp.jpeg" alt="Self-hosting mensajería">
<div class="meta"><span class="datetime">AbrilMayo 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">AbrilMayo 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: &gt;_ 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 &amp; 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>

175
hacker_types.css Normal file
View file

@ -0,0 +1,175 @@
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
body {
background-color: #000000;
color: #00ff00;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.xmind-container {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
max-width: 1400px;
position: relative;
}
.central-button {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.left-column, .right-column {
display: flex;
flex-direction: column;
gap: 3.7em;
}
.xmind-button {
background-color: #00ff00;
color: #000000;
padding: 10px 30px;
text-decoration: none;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
font-size: 2.3em;
border-radius: 5px;
border: 2px solid #00ff00;
box-shadow: 0 4px #008000;
transition: all 0.3s ease;
text-align: center;
}
.xmind-button:hover {
background-color: #ff69b4;
color: #00ff00;
box-shadow: 0 8px #00ff00, 0 0 15px #ff69b4;
transform: translateY(-2px);
}
/* Añadir este CSS para las líneas de conexión */
.horizontal-line {
position: absolute;
width: 100px; /* Puedes ajustar el ancho según lo necesites */
height: 2px;
background-color: #ff69b4;
}
.horizontal-line.left {
left: -100px; /* Ajusta esta posición según el espacio entre el botón central y la columna izquierda */
top: 50%;
transform: translateY(-50%);
}
.horizontal-line.right {
right: -100px; /* Ajusta esta posición según el espacio entre el botón central y la columna derecha */
top: 50%;
transform: translateY(-50%);
}
.info-box {
position: fixed;
top: 0;
left: -100%; /* Posición inicial fuera de pantalla */
width: 50%;
height: 100vh;
background-color: #000000;
color: #00ff00;
border-right: 2px solid #00ff00;
box-shadow: 0 0 20px #00ff00;
padding: 20px;
overflow-y: auto;
transition: left 0.5s ease;
}
.info-box:target {
left: 0; /* Mueve la info-box a la pantalla cuando se selecciona */
}
.info-content {
text-align: left;
}
.info-content h2 {
font-size: 1.8em;
color: #ff69b4;
margin-bottom: 10px;
}
.info-content p {
font-size: 1em;
margin-bottom: 20px;
}
.info-content ul li {
margin-bottom: 10px;
}
.info-content ul li a {
color: #00ff00;
text-decoration: none;
}
.info-content ul li a:hover {
color: #ff69b4;
text-decoration: underline;
}
.close-button {
display: block;
margin-top: 20px;
padding: 10px;
background-color: #00ff00;
color: #000000;
text-align: center;
border-radius: 5px;
text-decoration: none;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
border: 2px solid #00ff00;
box-shadow: 0 4px #008000;
transition: all 0.3s ease;
}
.close-button:hover {
background-color: #ff69b4;
color: #00ff00;
box-shadow: 0 6px #00ff00, 0 0 10px #ff69b4;
transform: translateY(-2px);
}
/* Para pantallas aún más pequeñas, como móviles de hasta 480px */
@media only screen and (max-width: 480px) {
.xmind-container {
flex-direction: row; /* Mantiene la estructura horizontal */
justify-content: space-between;
}
.left-column, .right-column {
gap: 1.2em; /* Reduce el espacio entre los botones */
margin: 0 1em; /* Reduce el margen entre columnas */
}
.xmind-button {
font-size: 1.1em; /* Reduce el tamaño del texto para pantallas pequeñas */
padding: 4px 10px; /* Hace los botones más compactos */
width: auto; /* Mantiene el tamaño automático */
}
.horizontal-line.left, .horizontal-line.right {
width: 40px; /* Hace las líneas más cortas en móviles pequeños */
}
.central-button {
left: 50%;
transform: translateX(-50%);
}
}

355
hacker_types.html Normal file
View file

@ -0,0 +1,355 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hacker Types</title>
<link rel="stylesheet" href="hacker_types.css">
</head>
<body>
<div class="xmind-container">
<div class="central-button">
<a href="#ethics" class="xmind-button">HACKERS</a>
<div class="horizontal-line left"></div>
<div class="horizontal-line right"></div>
</div>
<div class="left-column">
<a href="#pentesters" class="xmind-button">PENTESTERS</a>
<a href="#netactivist" class="xmind-button">NETACTIVIST</a>
<a href="#retrohackers" class="xmind-button">RETROHACKERS</a>
<a href="#biohackers" class="xmind-button">BIOHACKERS</a>
<a href="#warez" class="xmind-button">WAREZ</a>
<a href="#defacers" class="xmind-button">DEFACERS</a>
</div>
<div class="right-column">
<a href="#sneakers" class="xmind-button">SNEAKERS</a>
<a href="#lockpickers" class="xmind-button">LOCKPICKERS</a>
<a href="#zappers" class="xmind-button">ZAPPERS</a>
<a href="#automatas" class="xmind-button">AUTOMATAS</a>
<a href="#dosers" class="xmind-button">DOSERS</a>
<a href="#coders" class="xmind-button">CODERS</a>
</div>
</div>
<!-- ETHICS -->
<div class="info-box" id="ethics">
<div class="info-content">
<h2>ÉTICA HACKER</h2>
<p>El concepto de ética hacker fue popularizado por Steven Levy en su libro "Hackers: Heroes of the Computer Revolution". La ética hacker se basa en la creencia de que la información debe ser libre, que el acceso a computadoras y sus conocimientos debería ser ilimitado, y que los hackers tienen el deber de compartir su conocimiento con la comunidad.</p>
<p>Principios de la ética hacker:</p>
<ul>
<li>El acceso a las computadoras —y a cualquier cosa que pueda enseñarte algo sobre cómo funciona el mundo— debería ser ilimitado y total.</li>
<li>La información debería ser libre.</li>
<li>Desconfía de la autoridad, promueve la descentralización.</li>
<li>Los hackers deberían ser juzgados por su hacking, no por criterios como títulos académicos, edad, raza o posición.</li>
<li>Puedes crear arte y belleza en una computadora.</li>
<li>Las computadoras pueden mejorar tu vida y las de otros.</li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- PENTESTERS -->
<div class="info-box" id="pentesters">
<div class="info-content">
<h2>PENTESTERS</h2>
<p>Pentesters, o hackers éticos, se especializan en identificar y explotar vulnerabilidades en sistemas informáticos. Trabajan para asegurar que las redes, aplicaciones y sistemas sean resistentes a los ataques maliciosos. Su objetivo es encontrar y corregir fallos de seguridad antes de que los atacantes puedan explotarlos.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Auditorías de seguridad en redes corporativas usando <strong>Nmap</strong> para mapeo de redes.</li>
<li>Pruebas de penetración en aplicaciones web con <strong>OWASP ZAP</strong> y <strong>Burp Suite</strong>.</li>
<li>Evaluación de seguridad en infraestructuras Wi-Fi utilizando <strong>aircrack-ng</strong> y <strong>Kismet</strong>.</li>
<li>Uso de <strong>Metasploit Framework</strong> para la explotación de vulnerabilidades conocidas.</li>
<li>Automatización de pruebas de seguridad mediante <strong>Selenium</strong> para pruebas dinámicas.</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/nmap/nmap" target="_blank">Nmap en GitHub</a></li>
<li><a href="https://github.com/zaproxy/zaproxy" target="_blank">OWASP ZAP en GitHub</a></li>
<li><a href="https://github.com/aircrack-ng/aircrack-ng" target="_blank">Aircrack-ng en GitHub</a></li>
<li><a href="https://github.com/rapid7/metasploit-framework" target="_blank">Metasploit Framework en GitHub</a></li>
<li><a href="https://github.com/SeleniumHQ/selenium" target="_blank">Selenium en GitHub</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- NETACTIVIST -->
<div class="info-box" id="netactivist">
<div class="info-content">
<h2>NETACTIVIST</h2>
<p>Netactivists son hackers que luchan por la libertad en la red, la privacidad y los derechos humanos digitales. Su trabajo incluye el desarrollo de herramientas para evitar la censura, proteger la privacidad en línea, y organizar campañas de activismo digital. Son defensores del acceso abierto y la descentralización de la información.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Desarrollo de software de anonimato como <strong>Tor</strong> para proteger la privacidad de los usuarios.</li>
<li>Campañas de concienciación sobre la vigilancia masiva y la importancia de la encriptación.</li>
<li>Participación en proyectos de código abierto para la protección de derechos digitales.</li>
<li>Creación de redes seguras utilizando <strong>VPNs</strong> como <strong>OpenVPN</strong>.</li>
<li>Fomento de la descentralización mediante el uso de tecnologías como <strong>IPFS</strong> (InterPlanetary File System).</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/torproject/tor" target="_blank">Tor Project en GitHub</a></li>
<li><a href="https://github.com/OpenVPN/openvpn" target="_blank">OpenVPN en GitHub</a></li>
<li><a href="https://github.com/ipfs/ipfs" target="_blank">IPFS en GitHub</a></li>
<li><a href="https://protonmail.com/" target="_blank">ProtonMail</a></li>
<li><a href="https://signal.org/" target="_blank">Signal Messenger</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- RETROHACKERS -->
<div class="info-box" id="retrohackers">
<div class="info-content">
<h2>RETROHACKERS</h2>
<p>Retrohackers son apasionados por la tecnología antigua. Se dedican a revivir y reutilizar hardware y software obsoletos. Su trabajo incluye la restauración de computadoras vintage, la programación en lenguajes antiguos y la creación de emuladores para preservar software histórico.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Restauración de computadoras clásicas como el Commodore 64 y la Apple II.</li>
<li>Creación de emuladores para consolas y sistemas operativos antiguos.</li>
<li>Programación en lenguajes como Assembly y BASIC para dispositivos retro.</li>
<li>Desarrollo de nuevos periféricos para hardware antiguo.</li>
<li>Participación en la preservación digital de videojuegos y software antiguos.</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/VICE-Team" target="_blank">VICE - Emulador de Commodore en GitHub</a></li>
<li><a href="https://github.com/apple2online" target="_blank">Apple II Online Repository</a></li>
<li><a href="https://github.com/ZXDunny" target="_blank">ZX Spectrum Tools en GitHub</a></li>
<li><a href="https://www.scummvm.org/" target="_blank">ScummVM - Emulador de Juegos de Aventura</a></li>
<li><a href="https://github.com/qemu/qemu" target="_blank">QEMU - Emulador y Virtualizador</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- BIOHACKERS -->
<div class="info-box" id="biohackers">
<div class="info-content">
<h2>BIOHACKERS</h2>
<p>Biohackers combinan biología y tecnología para modificar o mejorar funciones biológicas. Esto puede incluir desde la modificación genética hasta el uso de dispositivos implantables para monitorizar y mejorar la salud humana. Los biohackers suelen explorar los límites de la biotecnología para mejorar la calidad de vida.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Modificación genética utilizando técnicas como CRISPR para alterar el ADN.</li>
<li>Implantes de chips RFID para control de acceso y otras funcionalidades.</li>
<li>Desarrollo de dispositivos wearable para monitorización continua de la salud.</li>
<li>Investigación en biología sintética para la creación de organismos personalizados.</li>
<li>Uso de dispositivos biométricos para mejorar la seguridad personal.</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/CRISPR" target="_blank">CRISPR Tools en GitHub</a></li>
<li><a href="https://github.com/biopython/biopython" target="_blank">Biopython en GitHub</a></li>
<li><a href="https://github.com/openbci/openbci" target="_blank">OpenBCI - Interfaz Cerebro-Computadora</a></li>
<li><a href="https://github.com/diyhplusbio" target="_blank">DIY Biohacking en GitHub</a></li>
<li><a href="https://www.grindhousewetware.com/" target="_blank">Grindhouse Wetware - Implantes Biomédicos</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- WAREZ -->
<div class="info-box" id="warez">
<div class="info-content">
<h2>WAREZ</h2>
<p>Warez es una subcultura dentro del hacking que se enfoca en la distribución y el intercambio de software, juegos y medios digitales pirateados. Aunque su actividad es ilegal, los warez siguen siendo prevalentes en ciertos círculos de hackers que ven la compartición de software como un derecho.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Cracking de software comercial para eliminar protecciones de copia.</li>
<li>Distribución de juegos y software a través de redes peer-to-peer.</li>
<li>Desarrollo de parches y keygens para habilitar el uso de software pirateado.</li>
<li>Creación de servidores privados para compartir archivos de manera anónima.</li>
<li>Exploración de vulnerabilidades en DRM (Digital Rights Management).</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/pymp/crackme" target="_blank">CrackMe Challenges en GitHub</a></li>
<li><a href="https://github.com/steven-mayall/AlbumArtDownloader" target="_blank">Album Art Downloader</a></li>
<li><a href="https://github.com/qbittorrent/qBittorrent" target="_blank">qBittorrent - Cliente P2P</a></li>
<li><a href="https://github.com/aria2/aria2" target="_blank">Aria2 - Descargador Multi-Protocolo</a></li>
<li><a href="https://github.com/ytdl-org/youtube-dl" target="_blank">youtube-dl - Descargador de Videos</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- DEFACERS -->
<div class="info-box" id="defacers">
<div class="info-content">
<h2>DEFACERS</h2>
<p>Defacers son hackers que alteran el contenido de sitios web, usualmente como forma de protesta o para enviar un mensaje. Estos ataques suelen ser notorios y están diseñados para llamar la atención sobre un tema específico. Aunque muchos defacers lo ven como una forma de activismo, la mayoría de las veces estas actividades son ilegales.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Alteración de la página principal de sitios web gubernamentales o corporativos.</li>
<li>Modificación de contenido web para destacar vulnerabilidades de seguridad.</li>
<li>Creación de scripts automatizados para realizar defacements en masa.</li>
<li>Desarrollo de ataques de desfiguración contra sitios con baja seguridad.</li>
<li>Publicación de mensajes de protesta en sitios web comprometidos.</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/v1s1t0r1sh3r3/airgeddon" target="_blank">Airgeddon</a></li>
<li><a href="https://github.com/sqlmapproject/sqlmap" target="_blank">SQLmap - Inyección SQL</a></li>
<li><a href="https://github.com/maK-/sqlninja" target="_blank">SQLNinja</a></li>
<li><a href="https://github.com/codingo/Reconnoitre" target="_blank">Reconnoitre - Framework de Reconocimiento</a></li>
<li><a href="https://github.com/OJ/gobuster" target="_blank">Gobuster - Fuzzing y Fuerza Bruta</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- SNEAKERS -->
<div class="info-box" id="sneakers">
<div class="info-content">
<h2>SNEAKERS</h2>
<p>Los Sneakers son expertos en ingeniería social y técnicas de intrusión. Se especializan en obtener acceso a sistemas restringidos utilizando métodos no convencionales, como engañar a las personas para que revelen información confidencial o acceder físicamente a lugares seguros.</p>
<p>Proyectos comunes:</p>
<ul>
<a href="ingenieria_social.html" class="button">INGENIERIA SOCIAL</a>
<li>Recopilación de información mediante OSINT (Open Source Intelligence).</li>
<li>Ingeniería social para obtener credenciales de acceso.</li>
<li>Penetración en instalaciones físicas mediante lockpicking y bypass de seguridad.</li>
<li>Creación de escenarios de phishing para capturar credenciales.</li>
<li>Uso de herramientas como Maltego para mapear redes sociales y relaciones.</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/laramies/theHarvester" target="_blank">theHarvester - Recolección de Emails</a></li>
<li><a href="https://github.com/laramies/metagoofil" target="_blank">Metagoofil - Extracción de Metadatos</a></li>
<li><a href="https://github.com/joaomatosf/jexboss" target="_blank">JexBoss - Verificador de Exploits JBoss</a></li>
<li><a href="https://github.com/guelfoweb/knock" target="_blank">Knock - Fuerza Bruta de Subdominios</a></li>
<li><a href="https://github.com/ThreatConnect-Inc/OSINT" target="_blank">OSINT Tools en GitHub</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- LOCKPICKERS -->
<div class="info-box" id="lockpickers">
<div class="info-content">
<h2>LOCKPICKERS</h2>
<p>Lockpickers son hackers que se especializan en el arte de abrir cerraduras sin la llave original. Utilizan herramientas como ganzúas, bump keys y otros dispositivos para sortear sistemas de seguridad física. Su conocimiento es valioso para la evaluación de la seguridad en instalaciones físicas.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Evaluación de cerraduras de alta seguridad para encontrar vulnerabilidades.</li>
<li>Desarrollo de herramientas y técnicas de ganzuado.</li>
<li>Realización de talleres de lockpicking para educar sobre la seguridad física.</li>
<li>Exploración de métodos para bypass de sistemas de seguridad.</li>
<li>Participación en competiciones de lockpicking para mejorar habilidades.</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/jamesst20/SNAP_Pick_Guide" target="_blank">SNAP Lock Pick Guide</a></li>
<li><a href="https://github.com/hahwul/mad-metasploit" target="_blank">Mad Metasploit - Scripts de Hacking</a></li>
<li><a href="https://github.com/hasherezade/malware_training_vol1" target="_blank">Guía de Formación en Malware</a></li>
<li><a href="https://github.com/codingo/reconnoitre" target="_blank">Reconnoitre - Reconocimiento Automático</a></li>
<li><a href="https://github.com/jivoi/awesome-osint" target="_blank">Awesome OSINT - Recursos OSINT</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- ZAPPERS -->
<div class="info-box" id="zappers">
<div class="info-content">
<h2>ZAPPERS</h2>
<p>Zappers son hackers que se centran en la seguridad y el anonimato en línea. Utilizan herramientas avanzadas para evitar la vigilancia, asegurar comunicaciones, y proteger la privacidad en redes hostiles. Son expertos en configurar y mantener entornos seguros para evitar la exposición de información sensible.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Configuración de entornos de navegación anónima utilizando VPNs y Tor.</li>
<li>Desarrollo de herramientas de cifrado para proteger datos sensibles.</li>
<li>Realización de auditorías de seguridad en infraestructuras de red.</li>
<li>Implementación de medidas de seguridad en servidores expuestos a internet.</li>
<li>Creación de túneles seguros para la transferencia de datos confidenciales.</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/veracrypt/VeraCrypt" target="_blank">VeraCrypt en GitHub</a></li>
<li><a href="https://github.com/torproject/tor" target="_blank">Tor Browser en GitHub</a></li>
<li><a href="https://github.com/mullvad/mullvadvpn-app" target="_blank">Mullvad VPN en GitHub</a></li>
<li><a href="https://github.com/cryptomator/cryptomator" target="_blank">Cryptomator - Cifrado de Archivos en la Nube</a></li>
<li><a href="https://github.com/ProtonVPN" target="_blank">ProtonVPN en GitHub</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- AUTOMATAS -->
<div class="info-box" id="automatas">
<div class="info-content">
<h2>AUTOMATAS</h2>
<p>Automatas son hackers que se especializan en la automatización de tareas repetitivas mediante scripts y herramientas automatizadas. Su trabajo incluye desde la automatización de pruebas de seguridad hasta la creación de bots que realizan tareas complejas de forma autónoma, mejorando la eficiencia y precisión en diversas áreas.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Creación de bots para la recolección automática de datos en redes sociales.</li>
<li>Automatización de pruebas de seguridad utilizando scripts en Bash o Python.</li>
<li>Desarrollo de sistemas de automatización para procesos industriales.</li>
<li>Implementación de flujos de trabajo automatizados para DevOps.</li>
<li>Uso de scripts automatizados para realizar auditorías de seguridad.</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/puppeteer/puppeteer" target="_blank">Puppeteer - Automatización de Navegadores</a></li>
<li><a href="https://github.com/ansible/ansible" target="_blank">Ansible - Automatización de Infraestructura</a></li>
<li><a href="https://github.com/SeleniumHQ/selenium" target="_blank">Selenium - Automatización de Pruebas</a></li>
<li><a href="https://github.com/StackStorm/st2" target="_blank">StackStorm - Automatización de DevOps</a></li>
<li><a href="https://github.com/psf/requests" target="_blank">Requests - HTTP para Humanos (Python)</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- DOSERS -->
<div class="info-box" id="dosers">
<div class="info-content">
<h2>DOSERS</h2>
<p>Dosers son hackers que se especializan en ataques de denegación de servicio (DoS). Estos ataques están diseñados para sobrecargar un sistema o red hasta el punto en que los servicios legítimos ya no pueden ser atendidos, causando una interrupción significativa.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Desarrollo de herramientas de DoS y DDoS para pruebas de resistencia en servidores.</li>
<li>Simulación de ataques para evaluar la capacidad de respuesta de sistemas críticos.</li>
<li>Creación de contramedidas para mitigar los efectos de los ataques DoS.</li>
<li>Investigación y desarrollo de técnicas avanzadas para ataques DDoS.</li>
<li>Automatización de ataques DoS en entornos controlados para investigación.</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/gkbrk/slowloris" target="_blank">Slowloris - Ataque de Saturación de Conexiones</a></li>
<li><a href="https://github.com/NewEraCracker/LOIC" target="_blank">LOIC - Low Orbit Ion Cannon</a></li>
<li><a href="https://github.com/grafov/hulk" target="_blank">HULK - Herramienta de Ataque HTTP</a></li>
<li><a href="https://github.com/NodeMixaholic/ddosify" target="_blank">DDoSify - Pruebas de Carga y DoS</a></li>
<li><a href="https://github.com/epsylon/ufonet" target="_blank">UFONet - DDoS contra Aplicaciones Web</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
<!-- CODERS -->
<div class="info-box" id="coders">
<div class="info-content">
<h2>CODERS</h2>
<p>Coders son hackers que se enfocan en la creación de software y scripts para explotar vulnerabilidades o mejorar la seguridad. Son expertos en lenguajes de programación y scripting, y su trabajo es crucial para el desarrollo de herramientas utilizadas por otros hackers.</p>
<p>Proyectos comunes:</p>
<ul>
<li>Desarrollo de exploits para vulnerabilidades descubiertas recientemente.</li>
<li>Contribución a proyectos de código abierto enfocados en la seguridad.</li>
<li>Automatización de tareas de seguridad con scripts en Python, Bash, o PowerShell.</li>
<li>Creación de herramientas personalizadas para pruebas de penetración.</li>
<li>Desarrollo de soluciones innovadoras para problemas de seguridad emergentes.</li>
</ul>
<p>Herramientas recomendadas:</p>
<ul>
<li><a href="https://github.com/rapid7/metasploit-framework" target="_blank">Metasploit Framework</a></li>
<li><a href="https://github.com/rebootuser/LinEnum" target="_blank">LinEnum - Escalada de Privilegios en Linux</a></li>
<li><a href="https://github.com/PowerShellMafia/PowerSploit" target="_blank">PowerSploit - Herramientas de Post-explotación en PowerShell</a></li>
<li><a href="https://github.com/BC-SECURITY/Empire" target="_blank">Empire - Framework de Post-explotación</a></li>
<li><a href="https://github.com/securestate/king-phisher" target="_blank">King Phisher - Framework de Phishing</a></li>
</ul>
<a href="#close" class="close-button">Cerrar</a>
</div>
</div>
</body>
</html>

120
hackers.html Normal file
View file

@ -0,0 +1,120 @@
<!-- hackers.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 — Projects</title>
<link rel="icon" type="image/png" href="imagenes/hacklab.jpeg">
<link rel="stylesheet" href="subpages.css">
</head>
<body>
<div class="wrapper">
<!-- CABECERA -->
<header class="sub-header">
<div class="inner">
<h1>HACKLAB LA RAÍZ</h1>
<p class="tagline">Proyectos activos // En curso // Infraestructura</p>
<nav class="crumbs">
<a href="index.html">home</a> · projects
</nav>
</div>
</header>
<!-- CONTENIDO -->
<main class="content">
<!-- NAV RÁPIDO (como en eventos/contacto) -->
<section class="panel" aria-label="Navegación rápida">
<p style="text-align:center;">
<a href="index.html" class="button">Home</a>
&nbsp;&nbsp;
<a href="eventos.html" class="button">Events</a>
&nbsp;&nbsp;
<a href="projects.html" class="button">Projects</a>
&nbsp;&nbsp;
<a href="hacker_types.html" class="button">Tribes</a>
</p>
</section>
<!-- HACKER ETHIC — Steven Levy -->
<section class="panel" aria-label="Hacker Ethic">
<h2>Hacker Ethic — Steven Levy</h2>
<article>
<h3 class="title">1) El acceso a los ordenadores debe ser ilimitado y total</h3>
<blockquote>
"El acceso a los ordenadores —y a cualquier cosa que pueda enseñarte cómo funciona el mundo— debe ser ilimitado y total. ¡Ríndete siempre al imperativo de aprender haciendo (Hands-On)!"
</blockquote>
<p>
Acceso para desarmar, aprender, reparar y mejorar sistemas. El acceso impulsa la expansión tecnológica.
</p>
</article>
<article>
<h3 class="title">2) Toda la información debería ser libre</h3>
<blockquote>
"Toda la información debería ser libre."
</blockquote>
<p>
Intercambio libre para facilitar la creatividad y la mejora de sistemas. "Libre" como en sin restricciones de acceso (no precio).
</p>
</article>
<article>
<h3 class="title">3) Desconfía de la autoridad — promueve la descentralización</h3>
<blockquote>
"Desconfía de la autoridad — promueve la descentralización."
</blockquote>
<p>
Favorecer sistemas abiertos, sin barreras entre personas y conocimiento; minimizar burocracias y puntos únicos de control.
</p>
</article>
<article>
<h3 class="title">4) Juzga a los hackers por su hacking</h3>
<blockquote>
"A los hackers se les debe juzgar por su hacking, no por criterios falsos como títulos, edad, raza o posición."
</blockquote>
<p>
Mérito técnico por encima de credenciales o rasgos superficiales; comunidad meritocrática orientada a resultados.
</p>
</article>
<article>
<h3 class="title">5) Puedes crear arte y belleza con un ordenador</h3>
<blockquote>
"Puedes crear arte y belleza con un ordenador."
</blockquote>
<p>
El código puede ser bello: soluciones elegantes, eficientes y bien compuestas como forma de arte técnico.
</p>
</article>
<article>
<h3 class="title">6) Los ordenadores pueden cambiar tu vida para mejor</h3>
<blockquote>
"Los ordenadores pueden cambiar tu vida para mejor."
</blockquote>
<p>
Las computadoras amplían posibilidades y autonomía. Compartir esta experiencia mejora a la sociedad en su conjunto.
</p>
</article>
<p style="text-align:center; margin-top:10px;">
<a class="button" href="https://en.wikipedia.org/wiki/Hacker_Ethic" target="_blank" rel="noopener">Más sobre Hacker Ethic</a>
&nbsp;&nbsp;
<a class="button" href="https://en.wikipedia.org/wiki/Steven_Levy" target="_blank" rel="noopener">Steven Levy</a>
</p>
</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>

104
hacklab_laraiz_css Executable file
View file

@ -0,0 +1,104 @@
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
body {
background-color: black;
color: #00ff00;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 20px;
}
.container {
text-align: center;
max-width: 800px;
border: 2px solid #00ff00;
padding: 20px;
background-color: #000;
}
header marquee {
font-size: 1.2em;
color: #ff0000;
}
h1 {
margin: 20px 0;
font-size: 2.5em;
text-transform: uppercase;
}
h2 {
margin: 20px 0;
font-size: 2em;
}
.event {
border: 1px solid #00ff00;
padding: 20px;
margin: 20px 0;
background-color: #111;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
}
a {
color: #00ff00;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.icons img {
width: 50px;
margin: 0 10px;
}
footer {
margin-top: 20px;
font-size: 0.8em;
}
footer a {
color: #00ff00;
}
/* Estilo de los botones en la esquina superior izquierda */
.top-left-buttons {
display: flex;
gap: 20px; /* Aumenta la separación entre los botones */
margin-bottom: 20px; /* Asegura que haya espacio entre los botones y el contenido debajo */
}
.top-left-buttons .button {
background-color: #00ff00; /* Fondo verde */
color: #000000; /* Letra negra */
padding: 10px 20px;
text-decoration: none;
font-family: 'Special Elite', 'Courier New', Courier, monospace;
font-size: 0.8em;
border-radius: 5px;
border: 2px solid #00ff00; /* Borde verde para definir mejor el botón */
box-shadow: 0 4px #008000; /* Sombra inicial para el botón */
transition: all 0.3s ease; /* Transición suave para cambios de estado */
}
.top-left-buttons .button:hover {
background-color: #ff69b4; /* Fondo rosa al hacer hover */
color: #00ff00; /* Letra verde al hacer hover */
box-shadow: 0 6px #00ff00, 0 0 10px #ff69b4; /* Sombra verde y resplandor */
transform: translateY(-2px); /* Levemente hacia arriba para el efecto de "sobresalir" */
}

BIN
imagenes/3dprinter.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 KiB

BIN
imagenes/anon.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

BIN
imagenes/apis_moviles.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

BIN
imagenes/art_lab.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 514 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 514 KiB

BIN
imagenes/art_lab_chess.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
imagenes/art_lab_glitch.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
imagenes/autodefensa.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

BIN
imagenes/banksy_pintura.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

BIN
imagenes/bienvenida.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
imagenes/charla33.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

BIN
imagenes/charla_ia.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

BIN
imagenes/charla_moviles.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

BIN
imagenes/cineforum.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
imagenes/confeccion.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

BIN
imagenes/confeccion.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

BIN
imagenes/craft_night.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 MiB

BIN
imagenes/craftnight.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
imagenes/create_art.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

BIN
imagenes/cyberpunk.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

BIN
imagenes/cyberpunk2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
imagenes/dolphin.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
imagenes/enredadera.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
imagenes/escultura.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

BIN
imagenes/fedi_fun.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

BIN
imagenes/fediverso2.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

BIN
imagenes/fediversoi.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

BIN
imagenes/fw_bcmdhd.bin Normal file

Binary file not shown.

BIN
imagenes/ganzuando.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

BIN
imagenes/ganzuando_2.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

BIN
imagenes/hacklab.jpeg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

BIN
imagenes/hacklab.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 538 KiB

BIN
imagenes/hacklab_foto.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 181 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

BIN
imagenes/hlab.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 KiB

BIN
imagenes/hugo.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 277 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
imagenes/internet_boy.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

BIN
imagenes/julian.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

BIN
imagenes/lel.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 299 KiB

BIN
imagenes/llaves.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

BIN
imagenes/lols.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

BIN
imagenes/luz_teles.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
imagenes/luzes.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
imagenes/musica_maestro.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
imagenes/musica_planta.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

BIN
imagenes/musicon.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
imagenes/need_fotoshop.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

BIN
imagenes/open_day.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
imagenes/page_not_found.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
imagenes/painting.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

BIN
imagenes/photoshop.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

BIN
imagenes/planta_digital.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

BIN
imagenes/primer_taller.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 KiB

BIN
imagenes/product_you.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
imagenes/proxmox.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

BIN
imagenes/pubo_verde.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
imagenes/raspy_planta.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
imagenes/repair_cafe.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
imagenes/revenge.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 271 KiB

BIN
imagenes/setas_luz.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
imagenes/source_ocde.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

BIN
imagenes/visuales.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Some files were not shown because too many files have changed in this diff Show more