257 lines
8.7 KiB
HTML
257 lines
8.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>
|
|
|
|
|
|
|
|
<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>
|