2023-06-24 06:08:37 +00:00
<!DOCTYPE html>
< html >
2024-11-30 23:21:11 +00:00
<!-- 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" > <!-- Replace with your logo URL -->
< meta property = "og:url" content = "https://kernelpanic.lol" > <!-- Replace with your URL -->
< 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" > <!-- Replace with your logo URL -->
<!-- Additional Tags -->
< meta name = "robots" content = "index, follow" >
2023-06-24 06:08:37 +00:00
< head >
2023-07-26 23:50:55 +00:00
< meta charset = "UTF-8" >
2023-06-26 01:34:19 +00:00
< title > {% block title %}{% endblock %}< / title >
2024-08-14 21:24:36 +00:00
< link rel = "stylesheet" type = "text/css" href = "/static/style.css" / >
2023-09-13 22:28:13 +00:00
2023-08-16 07:39:28 +00:00
2023-06-24 06:08:37 +00:00
< / head >
2023-06-21 17:30:48 +00:00
< body >
2025-04-16 18:41:23 +00:00
< canvas id = "grid-canvas" > < / canvas >
< canvas id = "particle-canvas" > < / canvas >
2023-09-13 22:28:13 +00:00
<!-- Llegaste al código, a ver cáele al telegram - > [arroba]kprftw -->
2025-04-16 18:41:23 +00:00
< div id = "banner" >
< a href = "{{'flisol2025'|url}}" style = "max-width:100%" > < img style = "max-width: inherit;" src = "/static/bannerflisol.png" alt = "Libera tu máquina, tu alma es la siguiente" > < / a >
< / div >
2023-06-24 06:08:37 +00:00
< div id = "topbar" >
2023-06-26 01:34:19 +00:00
{% block topbar %}
2023-09-19 09:05:38 +00:00
< a href = "/" > < div class = "button" > a casa< / div > < / a >
2024-08-14 21:24:36 +00:00
<!-- <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 >
2024-08-27 19:20:20 +00:00
< a href = "{{'/somos/'|url}}" > < div class = "button" > quiénes somos< / div > < / a >
2024-08-14 21:24:36 +00:00
< a href = "{{'/blog'|url}}" > < div class = "button" > blog< / div > < / a >
2025-04-16 18:41:23 +00:00
< a href = "https://eventos.kernelpanic.lol" > < div class = "button" > calendario< / div > < / a >
2023-12-03 01:06:13 +00:00
< a href = "https://box.kernelpanic.lol" > < div class = "button" > proyectos< / div > < / a >
2024-08-14 21:24:36 +00:00
<!-- <a href="/censo - hacker - latinoamericane - 2023"><div class="button">participa en el censo</div></a> -->
2023-10-20 02:20:13 +00:00
<!-- <a href="https://pat.kernelpanic.lol/calendar/#/2/calendar/view/CH1zbFeFKLPO5SPle5JNxjKqdSaidbYPYBKFC4PDSus/embed/"><div class="button">calendario</div></a> -->
2023-08-10 23:57:27 +00:00
2023-06-24 06:08:37 +00:00
<!-- Add more buttons as needed -->
2023-06-26 01:34:19 +00:00
{% endblock %}
2023-06-24 06:08:37 +00:00
< / div >
< div class = "content" >
< h1 > {{ this.title }}< / h1 >
2023-06-26 01:34:19 +00:00
{% block body %}{% endblock %}
2023-06-24 06:08:37 +00:00
< / div >
2025-04-16 18:41:23 +00:00
< 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();
}
2023-12-03 01:06:13 +00:00
}
2025-04-16 18:41:23 +00:00
}
}
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 >
< 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;
2023-12-03 01:06:13 +00:00
}
2025-04-16 18:41:23 +00:00
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)]
});
}
2023-12-03 01:06:13 +00:00
});
2025-04-16 18:41:23 +00:00
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);
2023-12-03 01:06:13 +00:00
} else {
2025-04-16 18:41:23 +00:00
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;
2023-12-03 01:06:13 +00:00
}
2025-04-16 18:41:23 +00:00
}
requestAnimationFrame(animate);
2023-12-03 01:06:13 +00:00
}
2025-04-16 18:41:23 +00:00
animate();
< / script >
2024-08-14 21:24:36 +00:00
2025-04-16 18:41:23 +00:00
< div id = "vertical-line" > < / div >
< div id = "horizontal-line" > < / div >
< div id = "coords" > ΞX=000000 ΨY=000000< / div >
< script >
const coordsDisplay = document.getElementById('coords');
let isDecrypted = false;
2024-08-14 21:24:36 +00:00
2025-04-16 18:41:23 +00:00
const glitchGlyphs = ['Ξ','∆','⟁','✷','∞','ƒ','ꙮ','⊗','✦','Ψ','⧖','λ','β','µ','∇','Ω','⎊','₿','≡','╳ ╱
const hex = '0123456789ABCDEF';
2024-08-14 21:24:36 +00:00
2025-04-16 18:41:23 +00:00
function rand(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
2024-08-14 21:24:36 +00:00
2025-04-16 18:41:23 +00:00
function generateGlitchString(prefix, realVal) {
const hexVal = realVal.toString(16).toUpperCase().padStart(3, '0');
let str = `${prefix}=`;
for (let i = 0; i < 4 ; i + + ) {
str += Math.random() > 0.5 & & i < hexVal.length
? hexVal[i]
: rand(glitchGlyphs);
}
return str;
}
document.addEventListener('mousemove', (e) => {
if (isDecrypted) return;
const glitchX = generateGlitchString('ΞX', e.clientX);
const glitchY = generateGlitchString('ΨY', e.clientY);
coordsDisplay.textContent = `${glitchX} ${glitchY}`;
});
// Decrypt on hover
coordsDisplay.addEventListener('mouseenter', () => {
isDecrypted = true;
coordsDisplay.classList.add('decrypted');
});
coordsDisplay.addEventListener('mousemove', (e) => {
if (!isDecrypted) return;
coordsDisplay.textContent = `X: ${e.clientX} Y: ${e.clientY}`;
});
coordsDisplay.addEventListener('mouseleave', () => {
isDecrypted = false;
coordsDisplay.classList.remove('decrypted');
});
const vLine = document.getElementById('vertical-line');
const hLine = document.getElementById('horizontal-line');
// Background color change on click
// document.body.addEventListener('click', () => {
// document.body.style.backgroundColor = `hsl(${Math.random()}, 70%, 80%)`;
// });
// Update crosshairs and coords
document.addEventListener('mousemove', (e) => {
vLine.style.left = `${e.clientX}px`;
hLine.style.top = `${e.clientY}px`;
});
< / script >
2023-07-26 23:50:55 +00:00
< 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 >
2025-04-16 18:41:23 +00:00
2023-06-21 17:30:48 +00:00
< / body >
2024-08-14 21:24:36 +00:00
< / html >
