<!DOCTYPE html>
<html>
    <!-- Basic Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="un taller/laboratorio/oficina/salón/auditorio/a-veces-sala que alberga no sólo a hackers y sus proyectos, o hacks, sino que además fomenta la generación de nuevas ideas y la exploración de posibilidades varias para proyectos varios. Es un semillero de hacks y un afluente de hackers. Existe para quienes ya son hackers y lo saben, así como para quienes aún no se dan cuenta.">
<meta name="keywords" content="Kernel Panic Room, hackspace, Querétaro, open-source, free software, technology, DIY, workshops, hardware, programming, hacking, FOSS, Linux, hackers, programación, talleres, cultura libre, código libre, software libre, FLOSS">
<meta name="author" content="Kernel Panic Room">

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Kernel Panic Room - Hackspace en Andamaxei">
<meta property="og:description" content="un taller/laboratorio/oficina/salón/auditorio/a-veces-sala que alberga no sólo a hackers y sus proyectos, o hacks, sino que además fomenta la generación de nuevas ideas y la exploración de posibilidades varias para proyectos varios. Es un semillero de hacks y un afluente de hackers. Existe para quienes ya son hackers y lo saben, así como para quienes aún no se dan cuenta.">
<meta property="og:image" content="https://kernelpanic.lol/templo-de-la-entropia/ignucio.png">
<meta property="og:url" content="https://kernelpanic.lol"> 
<meta property="og:type" content="website">

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Kernel Panic Room - Hackspace en Andamaxei">
<meta name="twitter:description" content="Ven por la filosofía del código libre, quédate por la comunidad y la sensación de awesome, en el corazón de Andamaxei">
<meta name="twitter:image" content="https://kernelpanic.lol/templo-de-la-entropia/ignucio.png">

<!-- Additional Tags -->
<meta name="robots" content="index, follow">

<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="/static/style.css" />
    

</head>
<body>
    <canvas id="grid-canvas"></canvas>
    <canvas id="particle-canvas"></canvas>

    <!-- Llegaste al código, a ver cáele al telegram -> [arroba]kprftw -->
    <!-- <div id="banner">
      <a href="{{'flisol2025'|url}}" style=""><img style="max-height:10%" src="/static/bannerflisol.png" alt="Libera tu máquina, tu alma es la siguiente"></a>
    </div> -->
    <div id="topbar">
        {% block topbar %}
        <a href="/"><div class="button">a casa</div></a>
        <!--<a href="/spacestats"><div id="spaceStatusButton" class="button">a casa</div></a>
        <a href="/guatecon-01"><div class="button color-changer" id="colorButton">GuateCON 0.1</div></a> -->
        <a href="{{'/about'|url}}"><div class="button">qué es esto</div></a>
        <a href="{{'/somos/'|url}}"><div class="button">quiénes somos</div></a>
        <a href="{{'/blog'|url}}"><div class="button">blog</div></a>
        <a href="https://eventos.kernelpanic.lol"><div class="button">calendario</div></a>
        <a href="https://box.kernelpanic.lol"><div class="button">proyectos</div></a>
        <!--<a href="/censo-hacker-latinoamericane-2023"><div class="button">participa en el censo</div></a>-->
        <!--<a href="https://pat.kernelpanic.lol/calendar/#/2/calendar/view/CH1zbFeFKLPO5SPle5JNxjKqdSaidbYPYBKFC4PDSus/embed/"><div class="button">calendario</div></a> -->

        <!-- Add more buttons as needed -->
        {% endblock %}
    </div>
    <div class="content">
        <h1>{{ this.title }}</h1>
        {% block body %}{% endblock %}
    </div>

  <script>
        const gridCanvas = document.getElementById('grid-canvas');
const gridCtx = gridCanvas.getContext('2d');

function resizeGridCanvas() {
  gridCanvas.width = window.innerWidth;
  gridCanvas.height = window.innerHeight;
}
resizeGridCanvas();
window.addEventListener('resize', resizeGridCanvas);

function drawGrid(centerX, centerY) {
  const spacing = 180;
  const size = 20;
  const distortion = 10;

  gridCtx.clearRect(0, 0, gridCanvas.width, gridCanvas.height);

  for (let i = 0; i < gridCanvas.width; i += spacing) {
    for (let j = 0; j < gridCanvas.height; j += spacing) {
      let dx = i - centerX;
      let dy = j - centerY;
      let dist = Math.sqrt(dx * dx + dy * dy);
      let offset = dist / distortion;

      let x = i + dx / offset;
      let y = j + dy / offset;

      gridCtx.fillRect(x, y, size, size);

      if (i > 0) {
        gridCtx.beginPath();
        gridCtx.moveTo(x, y + size / 2);
        gridCtx.lineTo(x - spacing, j + dy / (dist / (distortion * spacing)) + size / 2);
        gridCtx.stroke();
      }

      if (j > 0) {
        gridCtx.beginPath();
        gridCtx.moveTo(x + size / 2, y);
        gridCtx.lineTo(i + dx / (dist / (distortion * spacing)) + size / 2, y - spacing);
        gridCtx.stroke();
      }
    }
  }
}

gridCanvas.addEventListener('mousemove', (e) => {
  drawGrid(e.clientX, e.clientY);
});

drawGrid(gridCanvas.width / 2, gridCanvas.height / 2);

  </script>
    <style>
        html, body {
          margin: 0;
          padding: 0;
          height: 100%;
          overflow: hidden;
        }
    
        #vertical-line, #horizontal-line {
          position: fixed;
          background-color: red;
          pointer-events: none;
          z-index: 1000;
        }
    
        #vertical-line {
          width: 1px;
          height: 100%;
          top: 0;
        }
    
        #horizontal-line {
          height: 1px;
          width: 100%;
          left: 0;
        }



    
      </style>

        

    <div id="vertical-line"></div>
    <div id="horizontal-line"></div>
    <div id="coords">ΞX=000000 ΨY=000000</div>
    
    <style>
      #coords {
      position: fixed;
      bottom: 10px;
      right: 10px;
      font-family: monospace;
      color: red;
      background-color: rgba(0, 0, 0, 0.7);
      padding: 5px;
      z-index: 1000;
      }
    </style>
    
    <script>
      // Position the lines correctly
      function positionLines() {
      const banner = document.getElementById('banner');
      const bannerRect = banner.getBoundingClientRect();
      
      // Position horizontal line under the banner
      document.getElementById('horizontal-line').style.top = bannerRect.bottom + 'px';
      
      // Position vertical line at leftmost edge
      document.getElementById('vertical-line').style.left = '0px';
      }
      
      // Run on load and resize
      window.addEventListener('load', positionLines);
      window.addEventListener('resize', positionLines);
      
      // Update coordinates display
      document.addEventListener('mousemove', function(e) {
      document.getElementById('coords').textContent = 
        `ΞX=${e.clientX.toString().padStart(6, '0')} ΨY=${e.clientY.toString().padStart(6, '0')}`;
      });
    </script>

    <div id="footer">
        {% block footer %}
            <p>Por la gracia de San iGNUcio desde el Cuarto de Máquinas @ 2023.</p> 
            <p>Contáctanos en <a href="https://twitter.com/botkernel">el twatter</a> para lo que se ocupe.</p>
        {% endblock %}
    </div>

</body>

<!-- Particles -->
<script>
  const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'xor';
let particles = [];

const glitchColors = ['#00ff00', '#66ff66', '#ccffcc'];
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

resizeCanvas();
window.addEventListener('resize', resizeCanvas);

document.addEventListener('mousemove', (e) => {
for (let i = 0; i < 1; i++) {
  particles.push({
    x: e.clientX,
    y: e.clientY,
    dx: (Math.random() - 0.5) * 1.5,
    dy: (Math.random() - 0.5) * 1.5,
    size: Math.floor(Math.random() * 4 + 2), // Pixel chunk
    alpha: 1,
    color: glitchColors[Math.floor(Math.random() * glitchColors.length)]
  });
}
});

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = particles.length - 1; i >= 0; i--) {
  const p = particles[i];
  p.x += p.dx + (Math.random() - 0.5) * 2; // glitch flicker
  p.y += p.dy + (Math.random() - 0.5) * 2;
  p.alpha -= 0.02;

  if (p.alpha <= 0) {
    particles.splice(i, 1);
  } else {
    ctx.fillStyle = p.color;
    ctx.globalAlpha = p.alpha;
    ctx.fillRect(Math.floor(p.x), Math.floor(p.y), p.size, p.size);
    ctx.globalAlpha = 1;
  }
}

requestAnimationFrame(animate);
}

animate();
</script>


</html>
