changed the red lines

kernelpanic.lol/templates/layout.html

@@ -140,7 +140,64 @@ drawGrid(gridCanvas.width / 2, gridCanvas.height / 2);
           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');
@@ -196,76 +253,4 @@ drawGrid(gridCanvas.width / 2, gridCanvas.height / 2);
 </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>