CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 🚀 Features
 
 - Added Auto Labeling to Montior Tab. When sending hosts from the scan tab, it will bring their hostnames over to the label section. When adding a one off host to the montior tab, it will auto query it's hostname. You can also edit labels by double clicking. Closes #3
+- Added Always on Top Toggle. Closes #5
 
 ### 🐛 Bug Fixes
 

src/index.html

@@ -210,6 +210,7 @@
       <option value="dracula">Dracula</option>
       <option value="nord">Nord</option>
       <option value="solarized">Solarized Dark</option>
+      <option value="mocha">Catppuccin Mocha</option>
     </select>
     <span class="status-bar-item" id="privilege-status">unprivileged</span>
   </div>
@@ -247,7 +248,7 @@
     <button class="ctx-item" data-action="send-monitor">Send to Monitor</button>
     <button class="ctx-item" data-action="send-nmap">Send to Nmap</button>
   </div>
-
+  <div id="crt-overlay"></div>
   <script src="main.js"></script>
 </body>
 

src/main.js

@@ -22,15 +22,63 @@ var theme = (() => {
     } catch (e) { }
   }
 
+  var HACKER_KEY = 'argus-hacker-unlocked';
+
+  function isHackerUnlocked() {
+    try {
+      return localStorage.getItem(HACKER_KEY) === 'true';
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function unlockHacker() {
+    try {
+      localStorage.setItem(HACKER_KEY, 'true');
+    } catch (e) { }
+    addHackerOption();
+  }
+
+  function addHackerOption() {
+    var picker = document.getElementById('theme-picker');
+    if (!picker.querySelector('option[value="hacker"]')) {
+      var opt = document.createElement('option');
+      opt.value = 'hacker';
+      opt.textContent = '\u2588 H4CK3R';
+      picker.appendChild(opt);
+    }
+  }
+
   function init() {
     var saved = get();
     set(saved);
 
+    // Add hacker option if previously unlocked
+    if (isHackerUnlocked()) {
+      addHackerOption();
+    }
+
     var picker = document.getElementById('theme-picker');
     picker.value = saved;
     picker.addEventListener('change', function () {
       set(picker.value);
     });
+
+    // Easter egg: listen on the scan input
+    var scanInput = document.getElementById('ip-range-input');
+    scanInput.addEventListener('input', function () {
+      var val = scanInput.value.toLowerCase().trim();
+      if (val === 'all your base are belong to us') {
+        if (!isHackerUnlocked()) {
+          unlockHacker();
+          set('hacker');
+          picker.value = 'hacker';
+          scanInput.value = '';
+          console.log('%c> ACCESS GRANTED', 'color: #00ff41; font-size: 20px; font-family: monospace;');
+          console.log('%c> HACKER THEME UNLOCKED', 'color: #00ff41; font-size: 14px; font-family: monospace;');
+        }
+      }
+    });
   }
 
   // Apply immediately (before DOMContentLoaded) to prevent flash

src/styles.css

@@ -1478,6 +1478,174 @@ body {
   --danger-hover: #c62825;
 }
 
+/* ===== Theme: Catppuccin Mocha ===== */
+
+:root[data-theme="mocha"] {
+  --bg-primary: #1e1e2e;
+  --bg-secondary: #181825;
+  --bg-tertiary: #313244;
+  --bg-hover: #45475a;
+  --bg-active: #585b70;
+  --border: #313244;
+  --border-bright: #45475a;
+
+  --text-primary: #cdd6f4;
+  --text-secondary: #a6adc8;
+  --text-muted: #6c7086;
+
+  --cyan: #89b4fa;
+  --cyan-hover: #7ba4eb;
+  --cyan-dim: rgba(137, 180, 250, 0.08);
+  --cyan-glow: rgba(137, 180, 250, 0.2);
+  --cyan-subtle: rgba(137, 180, 250, 0.03);
+
+  --status-up: #a6e3a1;
+  --status-up-glow: rgba(166, 227, 161, 0.15);
+  --status-down: #f38ba8;
+  --status-down-glow: rgba(243, 139, 168, 0.15);
+  --status-filtered: #f9e2af;
+  --status-filtered-glow: rgba(249, 226, 175, 0.15);
+  --status-unknown: #6c7086;
+
+  --danger: #f38ba8;
+  --danger-hover: #e57a97;
+}
+
+:root[data-theme="mocha"] .toolbar-circuit {
+  filter: hue-rotate(40deg) saturate(0.6) brightness(0.9);
+}
+
+:root[data-theme="latte"] .port-tag {
+  background: rgba(30, 102, 245, 0.1);
+  border-color: rgba(30, 102, 245, 0.2);
+}
+
+:root[data-theme="latte"] #privilege-status::before {
+  background: var(--status-up);
+  box-shadow: 0 0 4px rgba(64, 160, 43, 0.3);
+}
+
+:root[data-theme="latte"] ::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+:root[data-theme="latte"] ::-webkit-scrollbar-thumb {
+  background: var(--border-bright);
+}
+
+/* ===== Theme: Hacker (Easter Egg) ===== */
+
+:root[data-theme="hacker"] {
+  --bg-primary: #000000;
+  --bg-secondary: #0a0a0a;
+  --bg-tertiary: #0d0d0d;
+  --bg-hover: #1a1a1a;
+  --bg-active: #222222;
+  --border: #0a3a0a;
+  --border-bright: #0f4f0f;
+
+  --text-primary: #00ff41;
+  --text-secondary: #00cc33;
+  --text-muted: #006b1d;
+
+  --cyan: #00ff41;
+  --cyan-hover: #00dd38;
+  --cyan-dim: rgba(0, 255, 65, 0.06);
+  --cyan-glow: rgba(0, 255, 65, 0.3);
+  --cyan-subtle: rgba(0, 255, 65, 0.02);
+
+  --status-up: #00ff41;
+  --status-up-glow: rgba(0, 255, 65, 0.2);
+  --status-down: #ff0040;
+  --status-down-glow: rgba(255, 0, 64, 0.2);
+  --status-filtered: #ffff00;
+  --status-filtered-glow: rgba(255, 255, 0, 0.15);
+  --status-unknown: #006b1d;
+
+  --danger: #ff0040;
+  --danger-hover: #dd0038;
+
+  --font-mono: "Courier New", "Lucida Console", monospace;
+  --font-sans: "Courier New", "Lucida Console", monospace;
+}
+
+:root[data-theme="hacker"] .toolbar-circuit {
+  filter: hue-rotate(-60deg) saturate(3) brightness(0.8);
+}
+
+:root[data-theme="hacker"] body {
+  font-family: "Courier New", "Lucida Console", monospace;
+}
+
+:root[data-theme="hacker"] .app-title {
+  letter-spacing: 5px;
+}
+
+:root[data-theme="hacker"] .btn-primary {
+  text-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
+}
+
+:root[data-theme="hacker"] #results-table td,
+:root[data-theme="hacker"] #monitor-table td {
+  text-shadow: 0 0 3px rgba(0, 255, 65, 0.15);
+}
+
+#crt-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+:root[data-theme="hacker"] #crt-overlay {
+  display: block;
+  background:
+    repeating-linear-gradient(0deg,
+      rgba(0, 0, 0, 0.4) 0px,
+      rgba(0, 0, 0, 0.4) 1px,
+      transparent 1px,
+      transparent 4px),
+    linear-gradient(180deg,
+      transparent 0%,
+      rgba(0, 255, 65, 0.03) 50%,
+      transparent 100%);
+  animation: crt-flicker 3s infinite;
+}
+
+@keyframes crt-flicker {
+  0% {
+    opacity: 1;
+  }
+
+  5% {
+    opacity: 0.85;
+  }
+
+  10% {
+    opacity: 1;
+  }
+
+  40% {
+    opacity: 0.95;
+  }
+
+  45% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0.9;
+  }
+
+  85% {
+    opacity: 1;
+  }
+}
+
 /* ===== Circuit art theme tinting ===== */
 
 :root[data-theme="dracula"] .toolbar-circuit {