CRYPTO COMMAND CENTER
Monitor • Analyze • Trade • Automate
SYSTEM: ONLINE
TRADING: ACTIVE
MODE: MOCK
MARKET WATCH
Live
Add Coin to Watchlist
PORTFOLIO
Mock Data
TOTAL PORTFOLIO VALUE
$10,427.85
+$427.85 (+4.28%) Today
TRADING CONTROLS
Manual & Auto Trading
BUY
SELL
AUTO TRADE: OFF
STRATEGY
Risk Settings
Max Position Size
2%
Stop Loss
5%
Take Profit
10%
Daily Loss Limit
10%
SYSTEM INTELLIGENCE
Performance Metrics
Total Trades
0
All Time
Win Rate
0%
Last 30 Days
Avg Profit
$0
Per Trade
Active Positions
0
Currently Open
Trading Engine Status
Running • Mock Mode • Connected to DB & Redis
NOTIFICATIONS FEED
Real-time Alerts
Place Trade
Coin
Bitcoin (BTC)
Ethereum (ETH)
Solana (SOL)
Dogecoin (DOGE)
Amount ($)
Confirm
Cancel
// ===== SHARED THEME SYSTEM ===== // This works across both Command Center and Game Page const CRYPTO_THEME_KEY = 'crypto-platform-theme'; let isDarkMode = true; // Theme configuration const themes = { dark: { name: 'dark', bgPrimary: '#0a0e17', bgSecondary: '#1a1f2e', bgTertiary: '#2a2f40', textPrimary: '#ffffff', textSecondary: '#8a8fa3', cardBg: 'rgba(255, 255, 255, 0.03)', cardBorder: 'rgba(255, 255, 255, 0.05)', accentPrimary: '#00c9ff', accentSuccess: '#00ff88', accentDanger: '#ff416c', shadowColor: 'rgba(0, 0, 0, 0.3)', buttonBuy: 'linear-gradient(135deg, #00ff88, #00cc66)', buttonSell: 'linear-gradient(135deg, #ff416c, #ff4b2b)', buttonPrimary: 'linear-gradient(135deg, #00c9ff, #0072ff)' }, light: { name: 'light', bgPrimary: '#f8f9fa', bgSecondary: '#ffffff', bgTertiary: '#e9ecef', textPrimary: '#212529', textSecondary: '#6c757d', cardBg: 'rgba(255, 255, 255, 0.9)', cardBorder: 'rgba(0, 0, 0, 0.1)', accentPrimary: '#007bff', accentSuccess: '#28a745', accentDanger: '#dc3545', shadowColor: 'rgba(0, 0, 0, 0.1)', buttonBuy: 'linear-gradient(135deg, #28a745, #1e7e34)', buttonSell: 'linear-gradient(135deg, #dc3545, #c82333)', buttonPrimary: 'linear-gradient(135deg, #007bff, #0056b3)' } }; // Initialize theme function initTheme() { const savedTheme = localStorage.getItem(CRYPTO_THEME_KEY); if (savedTheme === 'light') { isDarkMode = false; applyTheme('light'); } else { isDarkMode = true; applyTheme('dark'); } } // Toggle theme function toggleTheme() { isDarkMode = !isDarkMode; const newTheme = isDarkMode ? 'dark' : 'light'; applyTheme(newTheme); localStorage.setItem(CRYPTO_THEME_KEY, newTheme); // Update toggle button if it exists updateThemeToggleButton(); // Dispatch event for other components to react window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: newTheme } })); } // Apply theme to page function applyTheme(themeName) { const theme = themes[themeName]; if (!theme) return; // Apply CSS variables document.documentElement.style.setProperty('--crypto-bg-primary', theme.bgPrimary); document.documentElement.style.setProperty('--crypto-bg-secondary', theme.bgSecondary); document.documentElement.style.setProperty('--crypto-bg-tertiary', theme.bgTertiary); document.documentElement.style.setProperty('--crypto-text-primary', theme.textPrimary); document.documentElement.style.setProperty('--crypto-text-secondary', theme.textSecondary); document.documentElement.style.setProperty('--crypto-card-bg', theme.cardBg); document.documentElement.style.setProperty('--crypto-card-border', theme.cardBorder); document.documentElement.style.setProperty('--crypto-accent-primary', theme.accentPrimary); document.documentElement.style.setProperty('--crypto-accent-success', theme.accentSuccess); document.documentElement.style.setProperty('--crypto-accent-danger', theme.accentDanger); document.documentElement.style.setProperty('--crypto-shadow-color', theme.shadowColor); // Add/remove body class for CSS targeting document.body.classList.remove('crypto-theme-dark', 'crypto-theme-light'); document.body.classList.add(`crypto-theme-${themeName}`); // Apply specific styles for game page applyGamePageTheme(theme); console.log(`Theme applied: ${themeName}`); } // Game page specific theme adjustments function applyGamePageTheme(theme) { // These are game-page specific adjustments const isGamePage = document.querySelector('.trading-panel') !== null; if (!isGamePage) return; // Update trading panel const panels = document.querySelectorAll('.trading-panel'); panels.forEach(panel => { panel.style.background = theme.cardBg; panel.style.borderColor = theme.cardBorder; }); // Update buttons const logoutBtn = document.querySelector('.logout-btn'); if (logoutBtn) { logoutBtn.style.background = theme.buttonPrimary; logoutBtn.style.color = theme.name === 'dark' ? '#fff' : '#000'; } const debugBtn = document.querySelector('.debug-btn'); if (debugBtn) { debugBtn.style.background = theme.buttonPrimary; debugBtn.style.color = theme.name === 'dark' ? '#fff' : '#000'; } // Update admin links const adminLinks = document.querySelectorAll('.admin-link'); adminLinks.forEach(link => { link.style.background = theme.name === 'dark' ? 'rgba(0, 255, 136, 0.2)' : 'rgba(40, 167, 69, 0.2)'; link.style.color = theme.name === 'dark' ? '#00ff88' : '#28a745'; link.style.borderColor = theme.name === 'dark' ? 'rgba(0, 255, 136, 0.3)' : 'rgba(40, 167, 69, 0.3)'; }); // Update coin buttons const coinBtns = document.querySelectorAll('.coin-btn'); coinBtns.forEach(btn => { btn.style.background = theme.name === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)'; btn.style.color = theme.textPrimary; btn.style.borderColor = theme.cardBorder; }); // Update progress bar const xpFill = document.getElementById('xp-fill'); if (xpFill) { xpFill.style.background = theme.accentPrimary; } } // Create theme toggle button function createThemeToggleButton() { const btn = document.createElement('button'); btn.id = 'crypto-theme-toggle'; btn.className = 'theme-toggle-btn'; btn.title = isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'; btn.onclick = toggleTheme; // Style the button btn.style.cssText = ` background: var(--crypto-card-bg, rgba(255, 255, 255, 0.03)); color: var(--crypto-text-primary, #ffffff); border: 1px solid var(--crypto-card-border, rgba(255, 255, 255, 0.05)); border-radius: 5px; padding: 6px 12px; font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.3s; margin-left: 8px; `; btn.innerHTML = isDarkMode ? '
LIGHT' : '
DARK'; return btn; } // Update toggle button appearance function updateThemeToggleButton() { const btn = document.getElementById('crypto-theme-toggle'); if (!btn) return; btn.innerHTML = isDarkMode ? '
LIGHT' : '
DARK'; btn.title = isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'; // Update button colors based on theme btn.style.background = `var(--crypto-card-bg, ${isDarkMode ? 'rgba(255, 255, 255, 0.03)' : 'rgba(255, 255, 255, 0.9)'})`; btn.style.color = `var(--crypto-text-primary, ${isDarkMode ? '#ffffff' : '#212529'})`; btn.style.borderColor = `var(--crypto-card-border, ${isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.1)'})`; } // Add toggle button to page function addThemeToggleToPage() { // Check if button already exists if (document.getElementById('crypto-theme-toggle')) return; const toggleBtn = createThemeToggleButton(); // Try to add to command center header const commandHeader = document.querySelector('.command-header'); if (commandHeader) { const systemStatus = document.querySelector('.system-status'); if (systemStatus) { commandHeader.insertBefore(toggleBtn, systemStatus.nextSibling); } else { commandHeader.appendChild(toggleBtn); } return; } // Try to add to game page user panel const userPanel = document.querySelector('.user-panel'); if (userPanel) { // Find the logout button container const logoutContainer = userPanel.querySelector('button.logout-btn')?.parentElement; if (logoutContainer) { logoutContainer.insertBefore(toggleBtn, logoutContainer.firstChild); } else { // Create a container for theme toggle const container = document.createElement('div'); container.style.display = 'flex'; container.style.gap = '8px'; container.style.marginTop = '8px'; container.appendChild(toggleBtn); userPanel.appendChild(container); } return; } // Fallback: add to body toggleBtn.style.position = 'fixed'; toggleBtn.style.top = '20px'; toggleBtn.style.right = '20px'; toggleBtn.style.zIndex = '1000'; document.body.appendChild(toggleBtn); } // Initialize everything function initSharedThemeSystem() { // Add base CSS variables const style = document.createElement('style'); style.textContent = ` :root { --crypto-bg-primary: #0a0e17; --crypto-bg-secondary: #1a1f2e; --crypto-bg-tertiary: #2a2f40; --crypto-text-primary: #ffffff; --crypto-text-secondary: #8a8fa3; --crypto-card-bg: rgba(255, 255, 255, 0.03); --crypto-card-border: rgba(255, 255, 255, 0.05); --crypto-accent-primary: #00c9ff; --crypto-accent-success: #00ff88; --crypto-accent-danger: #ff416c; --crypto-shadow-color: rgba(0, 0, 0, 0.3); } .crypto-theme-dark { /* Dark theme is default */ } .crypto-theme-light { /* Light theme variables will be set by JavaScript */ } .theme-toggle-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px var(--crypto-shadow-color); } .theme-toggle-btn:active { transform: translateY(0); } `; document.head.appendChild(style); // Initialize theme initTheme(); // Add toggle button addThemeToggleToPage(); // Listen for theme changes from other pages/windows window.addEventListener('storage', function(e) { if (e.key === CRYPTO_THEME_KEY) { const newTheme = e.newValue; isDarkMode = newTheme === 'dark'; applyTheme(newTheme); updateThemeToggleButton(); } }); // Also listen for custom events window.addEventListener('themeChanged', function(e) { if (e.detail && e.detail.theme) { isDarkMode = e.detail.theme === 'dark'; applyTheme(e.detail.theme); updateThemeToggleButton(); } }); } // Start the shared theme system if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initSharedThemeSystem); } else { initSharedThemeSystem(); }