changed the red lines

kernelpanic.lol/templates/layout.html

@@ -139,127 +139,55 @@ drawGrid(gridCanvas.width / 2, gridCanvas.height / 2);
           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>
     
+    <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>
-     const coordsDisplay = document.getElementById('coords');
+      // Position the lines correctly
-    let isDecrypted = false;
+      function positionLines() {
-
+      const banner = document.getElementById('banner');
-    const glitchGlyphs = ['Ξ','∆','⟁','✷','∞','ƒ','ꙮ','⊗','✦','Ψ','⧖','λ','β','µ','∇','Ω','⎊','₿','≡','╳','▒','░','✗','╱','⧘'];
+      const bannerRect = banner.getBoundingClientRect();
-    const hex = '0123456789ABCDEF';
+      
-
+      // Position horizontal line under the banner
-    function rand(arr) {
+      document.getElementById('horizontal-line').style.top = bannerRect.bottom + 'px';
-    return arr[Math.floor(Math.random() * arr.length)];
+      
-    }
+      // Position vertical line at leftmost edge
-
+      document.getElementById('vertical-line').style.left = '0px';
-    function generateGlitchString(prefix, realVal) {
+      }
-    const hexVal = realVal.toString(16).toUpperCase().padStart(3, '0');
+      
-    let str = `${prefix}=`;
+      // Run on load and resize
-    for (let i = 0; i < 4; i++) {
+      window.addEventListener('load', positionLines);
-        str += Math.random() > 0.5 && i < hexVal.length
+      window.addEventListener('resize', positionLines);
-        ? hexVal[i]
+      
-        : rand(glitchGlyphs);
+      // Update coordinates display
-    }
+      document.addEventListener('mousemove', function(e) {
-    return str;
+      document.getElementById('coords').textContent = 
-    }
+        `ΞX=${e.clientX.toString().padStart(6, '0')} ΨY=${e.clientY.toString().padStart(6, '0')}`;
-
-    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> 
@@ -268,4 +196,61 @@ drawGrid(gridCanvas.width / 2, gridCanvas.height / 2);
     </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>