KPR/kernel_panic_web
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed the red lines

Browse Source
This commit is contained in:
Orson 2025-04-16 14:14:48 -06:00
parent 00f54327d5
commit 70d96c309c
1 changed files with 94 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
kernelpanic.lol/templates/layout.html
View File

@ -140,24 +140,81 @@ drawGrid(gridCanvas.width / 2, gridCanvas.height / 2);
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;
</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';
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// Run on load and resize
window.addEventListener('load', positionLines);
window.addEventListener('resize', positionLines);
document.addEventListener('mousemove', (e) => {
for (let i = 0; i < 1; i++) {
// 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,
@ -167,13 +224,13 @@ drawGrid(gridCanvas.width / 2, gridCanvas.height / 2);
alpha: 1,
color: glitchColors[Math.floor(Math.random() * glitchColors.length)]
});
}
});
}
});
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = particles.length - 1; i >= 0; i--) {
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;
@ -187,85 +244,13 @@ drawGrid(gridCanvas.width / 2, gridCanvas.height / 2);
ctx.fillRect(Math.floor(p.x), Math.floor(p.y), p.size, p.size);
ctx.globalAlpha = 1;
}
}
}
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
}
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>