JARVIS SERVER
165.22.1.228
-
+
@@ -1015,6 +1075,131 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
+// ── MOUSE PARALLAX — panels tilt toward cursor ────────────────────────
+(function initParallax() {
+ const MAX_TILT = 3.5; // degrees
+ let mouseX = 0, mouseY = 0, raf = null;
+
+ window.addEventListener('mousemove', e => {
+ mouseX = e.clientX / window.innerWidth - 0.5; // -0.5 to 0.5
+ mouseY = e.clientY / window.innerHeight - 0.5;
+ if (!raf) raf = requestAnimationFrame(applyTilt);
+ });
+
+ function applyTilt() {
+ raf = null;
+ const rx = mouseY * MAX_TILT;
+ const ry = -mouseX * MAX_TILT;
+ document.querySelectorAll('.panel').forEach(p => {
+ p.style.setProperty('--prx', rx.toFixed(2) + 'deg');
+ p.style.setProperty('--pry', ry.toFixed(2) + 'deg');
+ });
+ // Column-level parallax (skip in focus mode)
+ if (!document.getElementById('mainLayout')?.classList.contains('focus-mode')) {
+ const lp = document.getElementById('leftPanel');
+ const rp = document.getElementById('rightPanel');
+ const cp = document.getElementById('centerPanel');
+ if (lp) lp.style.transform = `translateX(${mouseX * 5}px) translateY(${mouseY * 3}px)`;
+ if (rp) rp.style.transform = `translateX(${-mouseX * 5}px) translateY(${mouseY * 3}px)`;
+ if (cp) cp.style.transform = `translateX(${mouseX * 2}px)`;
+ }
+ }
+})();
+
+// ── SPARKLINES ────────────────────────────────────────────────────────
+const _sparkData = {cpu: [], mem: [], disk: []};
+const SPARK_MAX = 25;
+
+function pushSparkData(key, val) {
+ _sparkData[key].push(val);
+ if (_sparkData[key].length > SPARK_MAX) _sparkData[key].shift();
+}
+
+function drawSparkline(canvasId, data, color) {
+ const canvas = document.getElementById(canvasId);
+ if (!canvas || !data.length) return;
+ const wrap = canvas.parentElement;
+ canvas.width = wrap.clientWidth || 240;
+ canvas.height = 32;
+ const ctx = canvas.getContext('2d');
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ const W = canvas.width, H = canvas.height;
+ const min = 0, max = 100;
+ const step = W / (SPARK_MAX - 1);
+
+ // Fill area under line
+ const grad = ctx.createLinearGradient(0, 0, 0, H);
+ grad.addColorStop(0, color.replace(')', ',0.35)').replace('rgb','rgba'));
+ grad.addColorStop(1, color.replace(')', ',0)').replace('rgb','rgba'));
+ ctx.beginPath();
+ data.forEach((v, i) => {
+ const x = i * step;
+ const y = H - ((v - min) / (max - min)) * H;
+ i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+ });
+ ctx.lineTo((data.length - 1) * step, H);
+ ctx.lineTo(0, H);
+ ctx.closePath();
+ ctx.fillStyle = grad;
+ ctx.fill();
+
+ // Line
+ ctx.beginPath();
+ data.forEach((v, i) => {
+ const x = i * step;
+ const y = H - ((v - min) / (max - min)) * H;
+ i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+ });
+ ctx.strokeStyle = color;
+ ctx.lineWidth = 1.5;
+ ctx.stroke();
+
+ // Current value dot
+ if (data.length > 1) {
+ const last = data[data.length - 1];
+ const x = (data.length - 1) * step;
+ const y = H - ((last - min) / (max - min)) * H;
+ ctx.beginPath();
+ ctx.arc(x, y, 2.5, 0, Math.PI * 2);
+ ctx.fillStyle = color;
+ ctx.fill();
+ ctx.strokeStyle = 'rgba(0,0,0,0.5)';
+ ctx.lineWidth = 1;
+ ctx.stroke();
+ }
+}
+
+// ── PANEL DATA FLASH ──────────────────────────────────────────────────
+function flashPanel(panelEl) {
+ if (!panelEl) return;
+ panelEl.classList.remove('data-flash');
+ void panelEl.offsetWidth; // reflow to restart animation
+ panelEl.classList.add('data-flash');
+ setTimeout(() => panelEl.classList.remove('data-flash'), 600);
+}
+
+// ── ALERT PULSE ───────────────────────────────────────────────────────
+function setAlertState(hasAlerts) {
+ const ov = document.getElementById('alertOverlay');
+ if (!ov) return;
+ ov.style.display = hasAlerts ? 'block' : 'none';
+}
+
+// ── GLITCH EFFECT ─────────────────────────────────────────────────────
+(function initGlitch() {
+ function triggerGlitch() {
+ const el = document.querySelector('.tb-logo-text');
+ if (!el) return;
+ el.classList.add('glitching');
+ setTimeout(() => el.classList.remove('glitching'), 280);
+ // Schedule next glitch: 35-60s random interval
+ setTimeout(triggerGlitch, 35000 + Math.random() * 25000);
+ }
+ // First glitch after 20s
+ setTimeout(triggerGlitch, 20000);
+})();
+
// ── GLOBALS ──────────────────────────────────────────────────────────
let sessionToken = '';
let sessionUser = '';
@@ -1382,6 +1567,17 @@ function renderSystem(s) {
tickTo('cpu-val', cpu);
tickTo('mem-val', mem);
tickTo('disk-val', disk);
+
+ // Sparklines
+ pushSparkData('cpu', cpu);
+ pushSparkData('mem', mem);
+ pushSparkData('disk', disk);
+ drawSparkline('spark-cpu', _sparkData.cpu, 'rgb(0,212,255)');
+ drawSparkline('spark-mem', _sparkData.mem, 'rgb(0,255,136)');
+ drawSparkline('spark-disk', _sparkData.disk, 'rgb(255,166,0)');
+
+ // Flash the system panel on data arrival
+ flashPanel(document.querySelector('#leftPanel .panel'));
document.getElementById('uptime-val').textContent = s.uptime || '--';
document.getElementById('load-val').textContent = s.load?.['1m'] || '--';
document.getElementById('host-val').textContent = s.hostname || 'jarvis';
@@ -1735,11 +1931,13 @@ async function loadAlerts() {
if (!alerts.length) {
el.innerHTML = '
✓ NO ACTIVE ALERTS
';
tb.textContent='NO ALERTS'; tb.className='text-green';
+ setAlertState(false);
return;
}
tb.textContent=alerts.length+' ALERT'+(alerts.length>1?'S':'');
tb.className='text-red';
+ setAlertState(true);
el.innerHTML = alerts.map(a => {
const ctxKey = 'alert_' + a.id;