From 5253c2b788890fadb52a7d3ab617312e70725697 Mon Sep 17 00:00:00 2001
From: John Bampton <jbampton@gmail.com>
Date: Mon, 26 Jan 2026 19:36:29 +1000
Subject: [PATCH] Sys optimize; skill mining; level XP and progress

---
 src/_includes/footer.njk | 86 ++++++++++++++++------------------------
 src/_includes/header.njk | 27 ++++++++-----
 src/assets/css/style.css | 31 +++++++++++++++
 src/assets/js/script.js  | 57 +++++++++++++++++++-------
 4 files changed, 126 insertions(+), 75 deletions(-)

diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk
index 48c38eab..7dd16e69 100644
--- a/src/_includes/footer.njk
+++ b/src/_includes/footer.njk
@@ -45,69 +45,53 @@
   </div>
 </footer>
 
-<div id="dev-tools" class="fixed bottom-6 left-6 z-[5000] hidden bg-slate-900 border-2 border-accent p-6 rounded-2xl shadow-2xl backdrop-blur-xl w-64 font-mono">
-    <div class="flex justify-between items-center mb-4">
-        <h3 class="text-accent text-xs font-black uppercase tracking-tighter">System Override</h3>
-        <span class="text-[9px] bg-accent/20 text-accent px-1.5 py-0.5 rounded">v1.0.4</span>
+<div id="dev-tools" class="fixed bottom-6 left-6 z-[5000] hidden bg-slate-950/90 border border-accent/40 p-3 rounded-xl shadow-2xl backdrop-blur-md w-64 font-mono">
+    <div class="flex justify-between items-center mb-2 pb-2 border-b border-white/10">
+        <h3 class="text-accent text-[9px] font-black uppercase tracking-widest">System Override</h3>
+        <span class="text-[8px] text-white/40">v1.0.4</span>
     </div>
 
-    <div class="space-y-3">
-        <button onclick="triggerSecretUnlock('matrix')" class="w-full py-2 bg-white/5 hover:bg-green-500/20 text-green-500 text-[10px] border border-green-500/30 rounded-lg transition-all flex justify-between px-3">
-            <span>RUN_MATRIX.exe</span>
-            <span class="opacity-50">+1 LVL</span>
+    <div class="grid grid-cols-2 gap-1.5 mb-2">
+        <button onclick="triggerSecretUnlock('matrix')" class="py-1.5 bg-green-500/5 hover:bg-green-500/20 text-green-500 text-[8px] border border-green-500/20 rounded transition-all">
+            MATRIX
         </button>
-
-        <button onclick="triggerSecretUnlock('konami')" class="w-full py-2 bg-white/5 hover:bg-yellow-500/20 text-yellow-500 text-[10px] border border-yellow-500/30 rounded-lg transition-all flex justify-between px-3">
-            <span>TRIGGER_KONAMI</span>
-            <span class="opacity-50">+1 LVL</span>
+        <button onclick="triggerSecretUnlock('konami')" class="py-1.5 bg-yellow-500/5 hover:bg-yellow-500/20 text-yellow-500 text-[8px] border border-yellow-500/20 rounded transition-all">
+            KONAMI
         </button>
-
-        <button onclick="triggerSecretUnlock('gravity')" class="w-full py-2 bg-white/5 hover:bg-red-500/20 text-red-500 text-[10px] border border-red-500/30 rounded-lg transition-all flex justify-between px-3">
-            <span>INIT_GRAVITY</span>
-            <span class="opacity-50">+1 LVL</span>
+        <button onclick="triggerSecretUnlock('gravity')" class="py-1.5 bg-red-500/5 hover:bg-red-500/20 text-red-500 text-[8px] border border-red-500/20 rounded transition-all">
+            GRAVITY
         </button>
-
-        <button onclick="triggerSecretUnlock('badge_click')" class="w-full py-2 bg-white/5 hover:bg-purple-500/20 text-purple-400 text-[10px] border border-purple-500/30 rounded-lg transition-all flex justify-between px-3">
-            <span>UNLOCK_BADGE_XP</span>
-            <span class="opacity-50">+1 LVL</span>
+        <button onclick="triggerSecretUnlock('badge_click')" class="py-1.5 bg-purple-500/5 hover:bg-purple-500/20 text-purple-400 text-[8px] border border-purple-500/20 rounded transition-all">
+            BADGE_XP
         </button>
-
-      <div class="flex flex-col gap-2 mt-4 pt-4 border-t border-white/10">
-            <button
-              onclick="addExperience(5)"
-              class="w-full flex justify-between items-center p-2 rounded-md border border-cyan-500/30 bg-cyan-500/5 text-[10px] font-mono text-cyan-400 hover:bg-cyan-500/20 hover:border-cyan-400 transition-all cursor-pointer"
-            >
-              <span class="flex items-center gap-2">💎 SIMULATE SKILL MINING</span>
-              <span class="opacity-60">+5 XP</span>
-            </button>
-
-            <button
-              onclick="toggleScreenshotMode()"
-              class="w-full flex justify-between items-center p-2 rounded-md border border-white/5 bg-white/5 text-[10px] font-mono text-slate-400 hover:bg-white/10 hover:border-slate-400 transition-all cursor-pointer"
-            >
-              <span class="flex items-center gap-2">📸 SCREENSHOT MODE</span>
-              <span class="opacity-40">[5S]</span>
-            </button>
-        </div>
-
-        <div class="pt-2">
-            <button onclick="localStorage.clear(); location.reload();" class="w-full py-3 bg-blue-600/20 hover:bg-blue-600/40 text-blue-400 text-[10px] font-bold border border-blue-500/30 rounded-lg transition-all">
-                RESET_PLAYER_DATA
-            </button>
-        </div>
     </div>
 
-    <div class="relative group">
-        <button id="self-destruct-btn" onclick="startSelfDestruct()" class="w-full py-2 bg-red-600/20 hover:bg-red-600/40 text-red-500 text-[10px] border border-red-500/50 rounded-lg transition-all flex justify-between px-3 overflow-hidden">
-            <span id="destruct-text">SYS_SELF_DESTRUCT</span>
-            <span id="destruct-timer" class="font-black"></span>
+    <div class="space-y-1 mb-2">
+        <button onclick="addExperience(5)" class="w-full flex justify-between px-2 py-1 bg-cyan-500/5 text-cyan-400 text-[8px] border border-cyan-500/20 rounded">
+            <span>💎 SKILL_MINER</span>
+            <span class="opacity-50">+5</span>
+        </button>
+        <button onclick="addExperience(15); playSound('restore');" class="w-full flex justify-between px-2 py-1 bg-pink-500/5 text-pink-400 text-[8px] border border-pink-500/20 rounded">
+            <span>🛠️ SYS_OPTIMIZE</span>
+            <span class="opacity-50">+15</span>
+        </button>
+        <button onclick="toggleScreenshotMode()" class="w-full flex justify-between px-2 py-1 bg-white/5 text-slate-400 text-[8px] border border-white/10 rounded">
+            <span>📸 SCREENSHOT</span>
+            <span class="opacity-50">5S</span>
         </button>
-        <div id="destruct-bar" class="absolute bottom-0 left-0 h-[2px] bg-red-500 w-0 transition-all"></div>
     </div>
 
-    <div class="mt-4 pt-4 border-t border-white/10">
-        <p class="text-[9px] text-slate-500 leading-tight">Secret Console: <span class="text-white">'D'</span></p>
+    <div class="flex gap-1.5 pt-2 border-t border-white/10">
+        <button id="self-destruct-btn" onclick="startSelfDestruct()" class="flex-1 py-1.5 bg-red-600/10 hover:bg-red-600/30 text-red-500 text-[8px] border border-red-500/30 rounded flex justify-center gap-1">
+            <span id="destruct-text">DESTRUCT</span>
+            <span id="destruct-timer"></span>
+        </button>
+        <button onclick="localStorage.clear(); location.reload();" class="px-2 py-1.5 bg-blue-600/10 hover:bg-blue-600/30 text-blue-400 text-[8px] border border-blue-500/20 rounded uppercase">
+            Reset
+        </button>
     </div>
+
+    <p class="mt-2 text-[7px] text-slate-600 text-center uppercase tracking-tighter">Press <span class="text-slate-400">'D'</span> to toggle</p>
 </div>
 
 <div id="matrix-overlay" class="fixed inset-0 bg-black hidden z-[9999]">
diff --git a/src/_includes/header.njk b/src/_includes/header.njk
index 8861cc3f..17ce047c 100644
--- a/src/_includes/header.njk
+++ b/src/_includes/header.njk
@@ -43,17 +43,24 @@
       {% endif %}
 
       <div id="game-stats" class="flex items-center gap-3 md:gap-4 px-3 py-1.5 md:px-4 md:py-2 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-2xl shadow-sm">
-          <div id="level-badge" onclick="handleLevelClick()" class="w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-xl text-lg md:text-xl bg-black/5 dark:bg-white/5">🐣</div>
+         <div id="level-badge" onclick="handleLevelClick()" class="w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-xl text-lg md:text-xl bg-black/5 dark:bg-white/5 relative">
+            🐣
+        </div>
 
-          <div class="hidden sm:flex flex-col">
-              <div class="flex items-center gap-2">
-                  <span id="level-name" class="text-[9px] md:text-[10px] font-black uppercase tracking-widest text-[var(--text-main)]">Newbie</span>
-                  <span class="text-[8px] md:text-[9px] opacity-60 font-bold bg-black/5 dark:bg-white/10 px-1.5 py-0.5 rounded">LVL <span id="level-number">0</span></span>
-              </div>
-              <div class="w-20 md:w-28 h-1 md:h-1.5 bg-black/10 dark:bg-white/10 rounded-full mt-1.5 md:mt-2 overflow-hidden">
-                  <div id="level-progress" class="h-full bg-accent transition-all duration-1000" style="width: 0%"></div>
-              </div>
-          </div>
+        <div class="hidden sm:flex flex-col">
+            <div class="flex items-center gap-2">
+                <span id="level-name" class="text-[9px] md:text-[10px] font-black uppercase tracking-widest text-[var(--text-main)]">Newbie</span>
+                <span class="text-[8px] font-mono font-bold text-accent bg-accent/10 px-1.5 py-0.5 rounded">
+                    XP: <span id="total-xp-display">0</span>
+                </span>
+                <span class="text-[8px] md:text-[9px] opacity-60 font-bold bg-black/5 dark:bg-white/10 px-1.5 py-0.5 rounded">
+                    LVL <span id="level-number">0</span>
+                </span>
+            </div>
+            <div class="w-20 md:w-28 h-1 md:h-1.5 bg-black/10 dark:bg-white/10 rounded-full mt-1.5 md:mt-2 overflow-hidden">
+                <div id="level-progress" class="h-full bg-accent transition-all duration-1000" style="width: 0%"></div>
+            </div>
+        </div>
 
           <div class="w-px h-6 md:h-8 bg-[var(--border-color)]"></div>
 
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 0a618132..228dbeb6 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -391,3 +391,34 @@ body[data-level="5"] .skill-item {
 .skill-item {
     cursor: crosshair; /* Makes it feel like you are "mining" */
 }
+/* Level 6 Visuals */
+body[data-level="6"] .user-card {
+    border-color: rgba(236, 72, 153, 0.3);
+}
+
+body[data-level="6"]::after {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(
+        rgba(18, 16, 16, 0) 50%,
+        rgba(0, 0, 0, 0.1) 50%
+    );
+    background-size: 100% 4px;
+    z-index: 9999;
+    pointer-events: none;
+    opacity: 0.2; /* Very subtle scanlines */
+}
+#total-xp-display {
+    display: inline-block;
+    transition: transform 0.1s ease;
+}
+
+/* Added via JS when XP increases */
+.xp-pulse {
+    transform: scale(1.3);
+    color: white !important;
+}
diff --git a/src/assets/js/script.js b/src/assets/js/script.js
index d8c05579..d826221c 100644
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
@@ -104,22 +104,26 @@ function updateGameUI() {
     const levelIndex = Math.min(eggCount, LEVELS.length - 1);
     const rank = LEVELS[levelIndex];
 
+    // 1. Level Elements
     const badge = document.getElementById('level-badge');
     const nameLabel = document.getElementById('level-name');
     const numLabel = document.getElementById('level-number');
     const progressBar = document.getElementById('level-progress');
 
+    // 2. XP Display Element
+    const xpDisplay = document.getElementById('total-xp-display');
+    if (xpDisplay) {
+        // Show current XP toward next level (or cumulative if you prefer)
+        xpDisplay.innerText = currentXP;
+    }
+
     if (levelIndex >= 10) {
         document.body.classList.add('level-architect');
-    } else {
-        document.body.classList.remove('level-architect');
     }
 
     if (badge) {
         badge.innerText = rank.emoji;
         badge.style.backgroundColor = rank.color;
-        badge.classList.add('animate-bounce');
-        setTimeout(() => badge.classList.remove('animate-bounce'), 1000);
     }
 
     if (nameLabel) {
@@ -130,7 +134,9 @@ function updateGameUI() {
     if (numLabel) numLabel.innerText = levelIndex;
 
     if (progressBar) {
-        const progressPercent = (levelIndex / (LEVELS.length - 1)) * 100;
+        // Logic for progress bar between levels
+        // currentXP / XP_PER_LEVEL gives the % toward NEXT level
+        const progressPercent = (currentXP / XP_PER_LEVEL) * 100;
         progressBar.style.width = `${progressPercent}%`;
         progressBar.style.backgroundColor = rank.color;
     }
@@ -214,6 +220,9 @@ function toggleTheme() {
     const current = localStorage.getItem('theme') || 'light';
     const next = current === 'light' ? 'dark' : (current === 'dark' ? 'random' : 'light');
     applyTheme(next);
+
+    // Maintenance XP Trigger
+    addMaintenanceXP();
 }
 
 function updateThemeIcon(theme) {
@@ -535,13 +544,19 @@ document.addEventListener('DOMContentLoaded', () => {
  * 9. ENHANCED XP & SKILL MINING SYSTEM
  */
 let currentXP = JSON.parse(localStorage.getItem('userXP')) || 0;
-const XP_PER_LEVEL = 20; // Adjust this to make leveling harder/easier
+const XP_PER_LEVEL = 45; // Adjust this to make leveling harder/easier
 
 function addExperience(amount) {
     // Stop XP if at Max Level or if system is locked (Self-Destruct)
     const isLocked = document.getElementById('dev-tools')?.hasAttribute('data-lock');
     if (unlockedEggs.length >= LEVELS.length - 1 || isLocked) return;
 
+    const xpNum = document.getElementById('total-xp-display');
+    if (xpNum) {
+        xpNum.classList.add('xp-pulse');
+        setTimeout(() => xpNum.classList.remove('xp-pulse'), 100);
+    }
+
     currentXP += amount;
 
     // Check for Level Up
@@ -555,24 +570,24 @@ function addExperience(amount) {
     updateGameUI();
 }
 
-function createFloatingXP(event) {
+function createFloatingXP(event, type = "skill") {
     const float = document.createElement('div');
-    // Color matches Level 5 "Data Miner" Cyan
-    const levelColor = LEVELS[unlockedEggs.length]?.color || '#06b6d4';
+    const levelIndex = unlockedEggs.length;
+    const rankColor = LEVELS[levelIndex]?.color || '#06b6d4';
+
+    float.innerText = type === "maintenance" ? "+5 XP (MAINT)" : "+1 XP";
 
-    float.innerText = '+1 XP';
     float.style.cssText = `
         position: fixed;
         left: ${event.clientX}px;
         top: ${event.clientY}px;
-        color: ${levelColor};
-        font-family: monospace;
+        color: ${rankColor};
+        font-family: 'JetBrains Mono', monospace;
         font-weight: 900;
-        font-size: 14px;
+        font-size: ${type === "maintenance" ? '14px' : '12px'};
         pointer-events: none;
         z-index: 10000;
         animation: float-up 0.8s ease-out forwards;
-        text-shadow: 0 0 10px rgba(0,0,0,0.5);
     `;
 
     document.body.appendChild(float);
@@ -602,3 +617,17 @@ function initSkillXP() {
 
 // Re-initialize skills after Surprise scroll or any DOM changes
 window.addEventListener('DOMContentLoaded', initSkillXP);
+
+/**
+ * SYS ADMIN XP (Level 6 Mechanic)
+ */
+function addMaintenanceXP() {
+    // Sys Admins get more XP for system-level interactions
+    const bonus = unlockedEggs.length >= 6 ? 5 : 2;
+    addExperience(bonus);
+
+    // Console log for that "hacker" feel
+    if (unlockedEggs.length >= 6) {
+        console.log("%c [SYS_ADMIN] System optimized: +5 XP", "color: #ec4899; font-weight: bold;");
+    }
+}