272 lines
9.7 KiB
HTML
272 lines
9.7 KiB
HTML
<!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"> <!-- 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">
|
||
|
||
<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="max-width:100%"><img style="max-width: inherit;" 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>
|
||
<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>
|
||
|
||
|
||
<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;
|
||
|
||
const glitchGlyphs = ['Ξ','∆','⟁','✷','∞','ƒ','ꙮ','⊗','✦','Ψ','⧖','λ','β','µ','∇','Ω','⎊','₿','≡','╳','▒','░','✗','╱','⧘'];
|
||
const hex = '0123456789ABCDEF';
|
||
|
||
function rand(arr) {
|
||
return arr[Math.floor(Math.random() * arr.length)];
|
||
}
|
||
|
||
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>
|
||
<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>
|
||
</html>
|