198 lines
7.6 KiB
HTML
198 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{% block title %}{% endblock %}</title>
|
|
<link rel="stylesheet" type="text/css" href="/static/style.css" />
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<!-- Llegaste al código, a ver cáele al telegram -> [arroba]kprftw -->
|
|
<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://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>
|
|
document.body.addEventListener('click', function () {
|
|
var randomColor = 'rgb(' +
|
|
Math.floor(Math.random() * 256) + ',' +
|
|
Math.floor(Math.random() * 256) + ',' +
|
|
Math.floor(Math.random() * 256) + ')';
|
|
document.body.style.backgroundColor = randomColor;
|
|
document.getElementById('topbar').style.backgroundColor = randomColor;
|
|
var rgb = randomColor.match(/\d+/g).map(Number);
|
|
|
|
// Calculate the brightness of the color
|
|
var brightness = Math.round((parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000);
|
|
|
|
// Choose black or white for the font color based on the brightness
|
|
var randomFontColor = brightness > 150 ? 'black' : 'white';
|
|
document.body.style.color = randomFontColor;
|
|
});
|
|
var buttons = document.querySelectorAll('.button');
|
|
buttons.forEach(function(button) {
|
|
button.addEventListener('mouseover', function() {
|
|
var randomColor = 'rgb(' +
|
|
Math.floor(Math.random() * 256) + ',' +
|
|
Math.floor(Math.random() * 256) + ',' +
|
|
Math.floor(Math.random() * 256) + ')';
|
|
|
|
// Convert the RGB color to an array of numbers
|
|
var rgb = randomColor.match(/\d+/g).map(Number);
|
|
|
|
// Calculate the brightness of the color
|
|
var brightness = Math.round((parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000);
|
|
|
|
// Choose black or white for the font color based on the brightness
|
|
var randomFontColor = brightness > 150 ? 'black' : 'white';
|
|
|
|
this.style.backgroundColor = randomColor;
|
|
this.style.color = randomFontColor;
|
|
});
|
|
});
|
|
</script>
|
|
<!-- THIS IS THE GRADIENT MORPHING BUTTON
|
|
<script>
|
|
const button = document.getElementById('colorButton');
|
|
let t = 0;
|
|
|
|
function generateColor(t, phase) {
|
|
return Math.floor((Math.sin(t + phase) + 1) * 128);
|
|
}
|
|
|
|
function updateGradient() {
|
|
const r1 = generateColor(t, 0);
|
|
const g1 = generateColor(t, 2);
|
|
const b1 = generateColor(t, 4);
|
|
const color1 = `rgb(${r1}, ${g1}, ${b1})`;
|
|
|
|
const r2 = generateColor(t, 6);
|
|
const g2 = generateColor(t, 8);
|
|
const b2 = generateColor(t, 10);
|
|
const color2 = `rgb(${r2}, ${g2}, ${b2})`;
|
|
|
|
button.style.background = `linear-gradient(to right, ${color1}, ${color2})`;
|
|
|
|
t += 0.01;
|
|
}
|
|
|
|
setInterval(updateGradient, 1000 / 600); // 60 frames per second for a smooth transition
|
|
</script>-->
|
|
<!--<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const endpoint = "https://kernelpanic.lol/spacestats"; // Replace with your actual endpoint
|
|
const button = document.getElementById('spaceStatusButton');
|
|
|
|
fetch(endpoint)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
updateButtonStatus(button, data.state.open);
|
|
})
|
|
.catch(error => {
|
|
console.error('There has been a problem with your fetch operation:', error);
|
|
button.textContent = 'Error fetching status';
|
|
});
|
|
});
|
|
|
|
function updateButtonStatus(button, status) {
|
|
if (status === 'true') {
|
|
button.textContent = 'Estamos aquí';
|
|
button.style.backgroundColor = 'green';
|
|
} else if (status === 'false') {
|
|
button.textContent = 'No estamos';
|
|
button.style.backgroundColor = 'red';
|
|
} else {
|
|
button.textContent = 'Algo raro sucede';
|
|
button.style.backgroundColor = 'grey';
|
|
}
|
|
}
|
|
|
|
</script>-->
|
|
<script>
|
|
var canvas = document.getElementById('body');
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
var gridSpacing = 180; // --s: 80px; /* control the size of the grid */
|
|
var gridSize = 20;
|
|
var distortionFactor = 10;
|
|
|
|
function drawGrid(centerX, centerY) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
for (var i = 0; i < canvas.width; i += gridSpacing) {
|
|
for (var j = 0; j < canvas.height; j += gridSpacing) {
|
|
var dx = i - centerX;
|
|
var dy = j - centerY;
|
|
var dist = Math.sqrt(dx*dx + dy*dy);
|
|
var offset = dist / distortionFactor;
|
|
|
|
var x = i + dx / offset;
|
|
var y = j + dy / offset;
|
|
|
|
ctx.fillRect(x, y, gridSize, gridSize);
|
|
|
|
// Connect the points with lines
|
|
if (i > 0) {
|
|
// Horizontal line
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y + gridSize / 2);
|
|
ctx.lineTo(x - gridSpacing, j + dy / (dist / (distortionFactor * gridSpacing)) + gridSize / 2);
|
|
ctx.stroke();
|
|
}
|
|
|
|
if (j > 0) {
|
|
// Vertical line
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + gridSize / 2, y);
|
|
ctx.lineTo(i + dx / (dist / (distortionFactor * gridSpacing)) + gridSize / 2, y - gridSpacing);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
|
|
window.onresize = resizeCanvas;
|
|
resizeCanvas();
|
|
|
|
canvas.onmousemove = function(e) {
|
|
drawGrid(e.clientX, e.clientY);
|
|
};
|
|
|
|
drawGrid(canvas.width / 2, canvas.height / 2);
|
|
</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>
|