EMPIRE TERMINAL | Next-Gen Command Nexus





* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'JetBrains Mono', monospace;
background: radial-gradient(circle at 20% 30%, #0a0a0f, #020202);
color: #f0f3ff;
transition: background 0.4s ease, color 0.3s ease;
min-height: 100vh;
}

/* Light theme override class */
body.light-mode {
background: #f4f7fc;
color: #0a0c12;
}

body.light-mode .glass-card {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

body.light-mode .glow-button {
background: linear-gradient(135deg, #6366f1, #3b82f6);
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

body.light-mode .alert-item {
background: rgba(239, 68, 68, 0.08);
border-left-color: #dc2626;
}

body.light-mode .stuart-response {
background: rgba(0, 0, 0, 0.06);
color: #1e293b;
}

body.light-mode .ticker-bar {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(12px);
border-bottom-color: rgba(0, 0, 0, 0.2);
}

/* Glassmorphic card */
.glass-card {
backdrop-filter: blur(16px);
background: rgba(15, 25, 45, 0.55);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 1.5rem;
transition: transform 0.25s ease, box-shadow 0.3s ease;
box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.4);
}

.glass-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 35px -12px rgba(139, 92, 246, 0.4);
border-color: rgba(139, 92, 246, 0.6);
}

.glow-button {
background: linear-gradient(95deg, #8b5cf6, #3b82f6);
border: none;
border-radius: 2rem;
padding: 0.75rem 1.5rem;
font-weight: 700;
letter-spacing: 0.5px;
color: white;
box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
transition: all 0.2s ease;
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
}

.glow-button:active {
transform: scale(0.97);
}

.glow-button:hover {
box-shadow: 0 0 22px rgba(139, 92, 246, 0.9);
background: linear-gradient(95deg, #9d6eff, #4f8eff);
}

@keyframes tickerScroll {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); }
}

.animate-ticker {
animation: tickerScroll 42s linear infinite;
white-space: nowrap;
display: inline-block;
font-size: 0.9rem;
font-weight: 500;
}

@keyframes softPulse {
0% { text-shadow: 0 0 0px #8b5cf6, 0 0 2px #a855f7; }
100% { text-shadow: 0 0 6px #c084fc, 0 0 12px #a855f7; }
}

.glow-text {
animation: softPulse 1.8s ease-in-out infinite alternate;
}

@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}

.modal-custom {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(12, 18, 34, 0.96);
backdrop-filter: blur(24px);
border-radius: 2rem;
padding: 2rem;
box-shadow: 0 30px 55px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.3);
z-index: 1000;
max-width: 480px;
width: 90%;
animation: fadeSlideUp 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
display: none;
font-family: 'JetBrains Mono', monospace;
}

.modal-custom button {
margin-top: 1.5rem;
}

.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
z-index: 999;
display: none;
}

/* animated pulse for mic */
@keyframes micPulse {
0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
70% { box-shadow: 0 0 0 12px rgba(139, 92, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

.listening-pulse {
animation: micPulse 1.2s infinite;
}

.stuart-response {
background: rgba(0, 0, 0, 0.35);
border-radius: 1.2rem;
padding: 1rem 1.2rem;
border-left: 3px solid #8b5cf6;
font-size: 0.9rem;
line-height: 1.5;
transition: all 0.2s;
}

// ---------- DOM Elements ----------
const themeBtn = document.getElementById('themeSwitchBtn');
const bodyEl = document.body;
const micBtn = document.getElementById('voiceTriggerBtn');
const stuartTextSpan = document.getElementById('stuartText');
const stuartMsgBox = document.getElementById('stuartMessageBox');
const revenueSpan = document.getElementById('revenueValue');
const activeUsersSpan = document.getElementById('activeUsersCount');
const efficiencySpan = document.getElementById('efficiencyValue');
const alertsDiv = document.getElementById('alertsContainer');
const refreshAlertsBtn = document.getElementById('refreshAlertsBtn');

// Theme handler (dark/light with class)
let isDarkMode = true;
function applyTheme() {
if (isDarkMode) {
bodyEl.classList.remove('light-mode');
bodyEl.style.background = "radial-gradient(circle at 20% 30%, #0a0a0f, #020202)";
bodyEl.style.color = "#f0f3ff";
themeBtn.innerHTML = "☀️ LIGHT MODE";
} else {
bodyEl.classList.add('light-mode');
bodyEl.style.background = "#f4f7fc";
bodyEl.style.color = "#0a0c12";
themeBtn.innerHTML = "🌙 DARK MODE";
}
}
themeBtn.onclick = () => {
isDarkMode = !isDarkMode;
applyTheme();
};
applyTheme();

// ---------- Modal Logic (show on load, close with button + overlay) ----------
const modal = document.getElementById('welcomeModal');
const overlay = document.getElementById('modalOverlay');
function closeModal() {
modal.style.display = 'none';
overlay.style.display = 'none';
}
function openModal() {
modal.style.display = 'block';
overlay.style.display = 'block';
}
document.getElementById('closeModalBtn').addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
// show modal after 0.7 sec delay
setTimeout(() => {
openModal();
}, 700);

// ---------- Data simulation helpers ----------
let currentRevenue = 14820;
let currentUsers = 478;
let currentEfficiency = 94.7;
let alertList = [
"📞 Call log missing: Client A — No activity in CRM (critical)",
"✉️ Email not sent: Proposal B — No email log found (escalation)",
"📅 Meeting missing: Client C — Calendar sync failure (high priority)"
];

function updateKPIDisplay() {
revenueSpan.innerText = `$${currentRevenue.toLocaleString()}`;
activeUsersSpan.innerText = currentUsers;
efficiencySpan.innerText = currentEfficiency.toFixed(1) + '%';
}

function renderAlerts() {
alertsDiv.innerHTML = '';
alertList.forEach((alertMsg, idx) => {
const alertDiv = document.createElement('div');
alertDiv.className = "alert-item";
alertDiv.style.cssText = "padding: 0.8rem; background: rgba(239,68,68,0.12); border-left: 3px solid #ef4444; margin-bottom: 0.7rem; border-radius: 0.8rem;";
alertDiv.innerText = alertMsg;
alertsDiv.appendChild(alertDiv);
});
if (alertList.length === 0) {
const emptyDiv = document.createElement('div');
emptyDiv.className = "alert-item";
emptyDiv.style.cssText = "padding: 0.8rem; background: rgba(16,185,129,0.12); border-left: 3px solid #10b981; border-radius: 0.8rem;";
emptyDiv.innerText = "✅ No active conflicts — all systems synced.";
alertsDiv.appendChild(emptyDiv);
}
}

// Simulate resolving random alert when "resync" is clicked
refreshAlertsBtn.addEventListener('click', () => {
if (alertList.length > 0) {
const removed = alertList.shift();
// add a new funny synthetic alert or reduce count
if (Math.random() > 0.4) {
alertList.push(`⚠️ New flag: ${Math.random() > 0.5 ? 'Legacy integration drift' : 'API latency spike'} — Stuart monitoring`);
}
renderAlerts();
// update Stuart response to reflect action
stuartTextSpan.innerText = `Resolved: "${removed.substring(0, 50)}..." ⚡ Remaining issues: ${alertList.length}. System recalibrated.`;
stuartMsgBox.style.borderLeftColor = "#10b981";
setTimeout(() => { stuartMsgBox.style.borderLeftColor = "#8b5cf6"; }, 1800);
} else {
stuartTextSpan.innerText = "Audit complete: Zero conflicts. Empire efficiency at maximum. Want to generate a test alert?";
if (confirm("No conflicts left. Generate a demo alert?")) {
alertList.push("🧪 Demo alert: Unusual outbound traffic detected — review recommended.");
renderAlerts();
stuartTextSpan.innerText = "⚠️ New demo alert generated. Use voice command to investigate.";
}
}
});

// Stuart dynamic responses based on spoken queries (simulated voice recognition with mock)
let isListening = false;
let recognitionActive = false;
// Web Speech API simulation (if browser supports)
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
let recognizer = null;

if (SpeechRecognition) {
recognizer = new SpeechRecognition();
recognizer.lang = 'en-US';
recognizer.interimResults = false;
recognizer.maxAlternatives = 1;
}

function processVoiceCommand(transcript) {
const lowerCmd = transcript.toLowerCase();
let answer = "";
// dynamic response engine
if (lowerCmd.includes('revenue') || lowerCmd.includes('income') || lowerCmd.includes('profit')) {
const newRev = currentRevenue + Math.floor(Math.random() * 800) - 200;
currentRevenue = Math.max(10000, newRev);
updateKPIDisplay();
answer = `📊 Revenue analysis: current total $${currentRevenue.toLocaleString()}. Growth trend +${((currentRevenue-14820)/14820*100).toFixed(1)}% from baseline. Stuart recommends increasing ad sync.`;
}
else if (lowerCmd.includes('users') || lowerCmd.includes('active nodes') || lowerCmd.includes('active users')) {
const delta = Math.floor(Math.random() * 30) - 5;
currentUsers = Math.max(400, currentUsers + delta);
updateKPIDisplay();
answer = `👥 Active nodes: ${currentUsers} live connections. User retention at 94%. Department sync optimal.`;
}
else if (lowerCmd.includes('efficiency') || lowerCmd.includes('ai efficiency') || lowerCmd.includes('performance')) {
const effShift = (Math.random() * 1.2 - 0.2);
currentEfficiency = Math.min(99.9, Math.max(88, currentEfficiency + effShift));
updateKPIDisplay();
answer = `⚙️ AI efficiency rating: ${currentEfficiency.toFixed(1)}%. Core algorithms stable. Predictive analytics active.`;
}
else if (lowerCmd.includes('alert') || lowerCmd.includes('conflict') || lowerCmd.includes('issues')) {
if (alertList.length > 0) {
answer = `⚠️ ${alertList.length} active conflict alerts. Top priority: ${alertList[0].substring(0, 70)}. Recommend resync.`;
} else {
answer = `✅ No unresolved alerts. Empire systems nominal. Do you want to run a diagnostic?`;
}
}
else if (lowerCmd.includes('hello') || lowerCmd.includes('hi stuart') || lowerCmd.includes('greetings')) {
answer = `Greetings, Commander. Stuart online. Ready to execute any business directive. Speak naturally.`;
}
else if (lowerCmd.includes('sync') || lowerCmd.includes('department')) {
answer = `🔄 Department sync at 100%. All clusters green. CRM and calendar integrations aligned. Conflict mitigation active.`;
}
else if (lowerCmd.includes('report') || lowerCmd.includes('summary')) {
answer = `📈 EMPIRE SUMMARY: Revenue $${currentRevenue.toLocaleString()}, Active ${currentUsers} users, Efficiency ${currentEfficiency.toFixed(1)}%, Alerts: ${alertList.length}. Stuart suggests optimizing email outreach.`;
}
else if (lowerCmd.includes('resolve') || lowerCmd.includes('fix alert')) {
if (alertList.length > 0) {
const fixed = alertList.shift();
renderAlerts();
answer = `✔️ Resolved: "${fixed.substring(0, 60)}". Proactive measure taken. ${alertList.length} alerts remaining.`;
} else {
answer = `No active conflicts to resolve. System pristine.`;
}
}
else {
answer = `🤖 Stuart: Command "${transcript.substring(0, 50)}" receive