feat: Added New Theme
This commit is contained in:
+2
-1
@@ -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>
|
||||
|
||||
|
||||
+48
@@ -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
|
||||
|
||||
+168
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user