Fix console position CSS (NextCommunity#241)

Author: jbampton

src/assets/css/style.css

@@ -148,17 +148,26 @@ html, body {
   transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
 }
 
-/* NUCLEAR LOCK: Override during Self Destruct */
+/* NUCLEAR LOCK: Forces console to stay in your literal eyeballs */
 html body #dev-tools[data-lock="true"] {
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
-    top: 1rem !important;
-    right: 1rem !important;
-    border-left-color: var(--danger) !important;
-    box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
-    animation: none !important; /* Prevent it from shaking with the body */
+
+    /* Stick to the screen, not the page content */
+    position: fixed !important;
+    top: 20px !important;
+    right: 20px !important;
+
+    /* Ensure it is ABOVE the glitch/shake layers */
+    z-index: 2147483647 !important;
+
+    /* Stop it from flying away or shaking */
     transform: none !important;
+    animation: none !important;
+
+    border-color: #ef4444 !important;
+    box-shadow: 0 0 40px rgba(239, 68, 68, 0.6) !important;
 }
 
 /* Custom Scrollbar for the console */

src/assets/js/script.js

@@ -370,54 +370,63 @@ function closeMatrix() {
 window.startSelfDestruct = function() {
     const btn = document.getElementById('self-destruct-btn');
     const devPanel = document.getElementById('dev-tools');
-    const timerDisplay = document.getElementById('destruct-timer');
-    const progressBar = document.getElementById('destruct-bar');
-    const statusText = document.getElementById('destruct-text');
 
     if (destructInterval) return;
 
     initAudio();
-    document.body.appendChild(devPanel);
+
+    // Move to HTML tag so it ignores Body shakes and stays at top of screen
+    document.documentElement.appendChild(devPanel);
     devPanel.setAttribute('data-lock', 'true');
+    devPanel.classList.remove('hidden');
+
     btn.classList.add('is-destructing');
 
     let timeLeft = 10;
 
     destructInterval = setInterval(() => {
         timeLeft--;
 
+        // RE-FETCH elements inside the panel to ensure they aren't null
+        const timerDisplay = document.getElementById('destruct-timer');
+        const progressBar = document.getElementById('destruct-bar');
+        const statusText = document.getElementById('destruct-text');
+
+        // Update the numerical text
         if (timerDisplay) {
             timerDisplay.innerText = `${timeLeft}s`;
-            timerDisplay.style.color = "#fff";
         }
 
+        // Update the progress bar logic
         if (progressBar) {
             const percent = ((10 - timeLeft) / 10) * 100;
             progressBar.style.width = `${percent}%`;
+
+            // Color Shift
             if (timeLeft > 5) progressBar.style.backgroundColor = "#22c55e";
             else if (timeLeft > 2) progressBar.style.backgroundColor = "#eab308";
             else progressBar.style.backgroundColor = "#ef4444";
         }
 
+        // Audio Pitch Increase
         if (audioCtx) {
             const osc = audioCtx.createOscillator();
             const g = audioCtx.createGain();
             osc.connect(g); g.connect(audioCtx.destination);
-            osc.frequency.setValueAtTime(300 + (10 - timeLeft) * 50, audioCtx.currentTime);
+            osc.frequency.setValueAtTime(300 + (10 - timeLeft) * 60, audioCtx.currentTime);
             g.gain.setValueAtTime(0.1, audioCtx.currentTime);
             g.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.1);
             osc.start(); osc.stop(audioCtx.currentTime + 0.1);
         }
 
         if (timeLeft <= 4) {
             document.body.classList.add('glitch-shake');
-            if (statusText) statusText.innerText = "SYSTEM_FAILURE_IMMINENT";
+            if (statusText) statusText.innerText = "CRITICAL_FAILURE";
         }
 
         if (timeLeft <= 0) {
             clearInterval(destructInterval);
             destructInterval = null;
-            devPanel.setAttribute('data-lock', 'false');
             triggerSecretUnlock('gravity');
         }
     }, 1000);