mirror of
https://github.com/chrisnov-it/quantumbotx.git
synced 2026-07-27 18:57:47 +00:00
Add dark mode support with persistent toggle
- Tailwind CDN configured with darkMode: 'class' - Dark mode toggle in header (sun/moon icon), persisted via localStorage - base.html: sidebar, header, search, nav, profile — all dark: variants - index.html: stat cards, chart containers, activities, bot list — all dark: variants - style.css: dark scrollbar styling - Prevents flash by checking localStorage before page render Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
chrisnov-it
@@ -1,4 +1,10 @@
|
||||
.sidebar { transition: all 0.3s ease; }
|
||||
.sidebar.collapsed { width: 70px; }
|
||||
.sidebar.collapsed .sidebar-text, .sidebar.collapsed .logo-text { display: none; }
|
||||
.sidebar.collapsed .nav-item { justify-content: center; }
|
||||
.sidebar.collapsed .nav-item { justify-content: center; }
|
||||
.sidebar.collapsed .nav-item i.w-5 { width: auto; }
|
||||
|
||||
/* Dark mode scrollbar */
|
||||
.dark .overflow-auto::-webkit-scrollbar { width: 6px; }
|
||||
.dark .overflow-auto::-webkit-scrollbar-track { background: #1e293b; }
|
||||
.dark .overflow-auto::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
|
||||
@@ -1,5 +1,25 @@
|
||||
// static/js/main.js
|
||||
|
||||
// --- Dark Mode Toggle ---
|
||||
(function initDarkMode() {
|
||||
const isDark = localStorage.getItem('dark-mode') === 'true';
|
||||
const toggle = document.getElementById('dark-mode-toggle');
|
||||
const icon = document.getElementById('dark-mode-icon');
|
||||
|
||||
if (toggle && icon) {
|
||||
// Set initial icon
|
||||
icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
|
||||
icon.style.color = isDark ? '#fbbf24' : '';
|
||||
|
||||
toggle.addEventListener('click', function() {
|
||||
const isCurrentlyDark = document.documentElement.classList.toggle('dark');
|
||||
localStorage.setItem('dark-mode', isCurrentlyDark);
|
||||
icon.className = isCurrentlyDark ? 'fas fa-sun' : 'fas fa-moon';
|
||||
icon.style.color = isCurrentlyDark ? '#fbbf24' : '';
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// --- Logika untuk Sidebar Toggle ---
|
||||
const sidebarToggle = document.getElementById('sidebar-toggle');
|
||||
|
||||
+45
-31
@@ -5,6 +5,11 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title data-i18n-key="{% block title_key %}dashboard.title{% endblock %}">{% block title %}Dashboard{% endblock %} - QuantumBotX</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
@@ -13,7 +18,13 @@
|
||||
{% block head_extra %}{% endblock %}
|
||||
<style id="holiday-styles"></style>
|
||||
</head>
|
||||
<body class="bg-gray-100 font-sans">
|
||||
<body class="bg-gray-100 dark:bg-slate-900 font-sans">
|
||||
<!-- Theme Toggle Script (must run before page render) -->
|
||||
<script>
|
||||
if (localStorage.getItem('dark-mode') === 'true') {
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
</script>
|
||||
<!-- Holiday Banner -->
|
||||
<div id="holiday-banner" class="hidden bg-gradient-to-r from-blue-500 to-purple-600 text-white py-2 px-4 text-center relative">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
@@ -24,59 +35,62 @@
|
||||
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- SIDEBAR -->
|
||||
<div id="sidebar" class="sidebar bg-white w-64 shadow-lg flex flex-col">
|
||||
<div class="p-4 flex items-center border-b">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold">QT</div>
|
||||
<div id="sidebar" class="sidebar bg-white dark:bg-slate-800 w-64 shadow-lg dark:shadow-slate-900/50 flex flex-col">
|
||||
<div class="p-4 flex items-center border-b dark:border-slate-700">
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-600 to-violet-600 flex items-center justify-center text-white font-bold">QT</div>
|
||||
<div class="ml-3 logo-text">
|
||||
<h1 class="text-xl font-bold text-gray-800">QuantumBotX</h1>
|
||||
<p class="text-xs text-gray-500">The AI-Powered Strategy Platform</p>
|
||||
<h1 class="text-xl font-bold text-gray-800 dark:text-white">QuantumBotX</h1>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">The AI-Powered Strategy Platform</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<nav class="mt-6">
|
||||
<div class="px-4 mb-4"><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text" data-i18n="nav.section.navigation">Navigation</p></div>
|
||||
<a href="/" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'dashboard' %}active{% endif %}"><i class="fas fa-chart-line"></i><span class="ml-3 sidebar-text" data-i18n="nav.dashboard">Dashboard</span></a>
|
||||
<a href="/trading_bots" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'trading_bots' %}active{% endif %}"><i class="fas fa-robot"></i><span class="ml-3 sidebar-text" data-i18n="nav.bots">Trading Bots</span></a>
|
||||
<a href="/portfolio" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'portfolio' %}active{% endif %}"><i class="fas fa-wallet"></i><span class="ml-3 sidebar-text" data-i18n="nav.portfolio">Portfolio</span></a>
|
||||
<a href="/backtesting" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'backtesting' %}active{% endif %}"><i class="fas fa-vial"></i><span class="ml-3 sidebar-text" data-i18n="nav.backtest">Backtester</span></a>
|
||||
<a href="/ai-mentor" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'ai_mentor' %}active{% endif %}"><i class="fas fa-brain"></i><span class="ml-3 sidebar-text" data-i18n="nav.ai_mentor">AI Mentor</span></a>
|
||||
<a href="/strategy-switcher" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'strategy_switcher' %}active{% endif %}"><i class="fas fa-sync-alt"></i><span class="ml-3 sidebar-text" data-i18n="nav.strategy_switcher">Strategy Switcher</span></a>
|
||||
<!-- Ramadan link will only be visible when Ramadan mode is active -->
|
||||
<a href="/ramadan" id="ramadan-nav-link" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'ramadan' %}active{% endif %} hidden"><i class="fas fa-moon"></i><span class="ml-3 sidebar-text" data-i18n="nav.ramadan">Ramadan Mode</span></a>
|
||||
<a href="/history" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'history' %}active{% endif %}"><i class="fas fa-history"></i><span class="ml-3 sidebar-text" data-i18n="nav.history">History</span></a>
|
||||
<a href="/settings" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'settings' %}active{% endif %}"><i class="fas fa-cog"></i><span class="ml-3 sidebar-text" data-i18n="nav.settings">Settings</span></a>
|
||||
<div class="px-4 mt-8 mb-4"><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text" data-i18n="nav.section.market_data">Market Data</p></div>
|
||||
<a href="/stocks" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'stocks' %}active{% endif %}"><i class="fas fa-chart-bar"></i><span class="ml-3 sidebar-text" data-i18n="nav.stocks">Stocks</span></a>
|
||||
<a href="/forex" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 {% if active_page == 'forex' %}active{% endif %}"><i class="fas fa-exchange-alt"></i><span class="ml-3 sidebar-text" data-i18n="nav.forex">Forex</span></a>
|
||||
<div class="px-4 mb-4"><p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider sidebar-text" data-i18n="nav.section.navigation">Navigation</p></div>
|
||||
<a href="/" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'dashboard' %}active{% endif %}"><i class="fas fa-chart-line w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.dashboard">Dashboard</span></a>
|
||||
<a href="/trading_bots" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'trading_bots' %}active{% endif %}"><i class="fas fa-robot w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.bots">Trading Bots</span></a>
|
||||
<a href="/portfolio" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'portfolio' %}active{% endif %}"><i class="fas fa-wallet w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.portfolio">Portfolio</span></a>
|
||||
<a href="/backtesting" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'backtesting' %}active{% endif %}"><i class="fas fa-vial w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.backtest">Backtester</span></a>
|
||||
<a href="/ai-mentor" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'ai_mentor' %}active{% endif %}"><i class="fas fa-brain w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.ai_mentor">AI Mentor</span></a>
|
||||
<a href="/strategy-switcher" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'strategy_switcher' %}active{% endif %}"><i class="fas fa-sync-alt w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.strategy_switcher">Strategy Switcher</span></a>
|
||||
<a href="/ramadan" id="ramadan-nav-link" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'ramadan' %}active{% endif %} hidden"><i class="fas fa-moon w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.ramadan">Ramadan Mode</span></a>
|
||||
<a href="/history" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'history' %}active{% endif %}"><i class="fas fa-history w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.history">History</span></a>
|
||||
<a href="/settings" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'settings' %}active{% endif %}"><i class="fas fa-cog w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.settings">Settings</span></a>
|
||||
<div class="px-4 mt-8 mb-4"><p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider sidebar-text" data-i18n="nav.section.market_data">Market Data</p></div>
|
||||
<a href="/stocks" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'stocks' %}active{% endif %}"><i class="fas fa-chart-bar w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.stocks">Stocks</span></a>
|
||||
<a href="/forex" class="nav-item flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-slate-700/50 {% if active_page == 'forex' %}active{% endif %}"><i class="fas fa-exchange-alt w-5"></i><span class="ml-3 sidebar-text" data-i18n="nav.forex">Forex</span></a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="p-4 border-t">
|
||||
<div class="p-4 border-t dark:border-slate-700">
|
||||
<a href="/profile" class="flex items-center group">
|
||||
<div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center"><i class="fas fa-user text-gray-600"></i></div>
|
||||
<div class="ml-3 sidebar-text "><p class="text-sm font-medium text-gray-800 group-hover:text-blue-600">Reynov Christian</p><p class="text-xs text-gray-500 group-hover:text-blue-600">Developer</p></div>
|
||||
<div class="w-10 h-10 rounded-full bg-gray-200 dark:bg-slate-600 flex items-center justify-center"><i class="fas fa-user text-gray-600 dark:text-gray-300"></i></div>
|
||||
<div class="ml-3 sidebar-text"><p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-indigo-600">Reynov Christian</p><p class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-indigo-600">Developer</p></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div class="flex-1 overflow-auto">
|
||||
<header class="bg-white shadow-sm">
|
||||
<header class="bg-white dark:bg-slate-800 shadow-sm dark:shadow-slate-900/50">
|
||||
<div class="flex items-center justify-between px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<button id="sidebar-toggle" class="text-gray-500 focus:outline-none"><i class="fas fa-bars"></i></button>
|
||||
<button id="sidebar-toggle" class="text-gray-500 dark:text-gray-400 focus:outline-none"><i class="fas fa-bars"></i></button>
|
||||
<div class="ml-4 relative">
|
||||
<input type="text" class="w-64 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Search markets, bots..." />
|
||||
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
|
||||
<input type="text" class="w-64 px-4 py-2 rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Search markets, bots..." />
|
||||
<i class="fas fa-search absolute right-3 top-3 text-gray-400 dark:text-gray-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Dark Mode Toggle -->
|
||||
<button id="dark-mode-toggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-500 dark:text-gray-400 transition-colors" title="Toggle Dark Mode">
|
||||
<i id="dark-mode-icon" class="fas fa-moon"></i>
|
||||
</button>
|
||||
<!-- Global Language Switcher -->
|
||||
<div class="flex items-center space-x-1 bg-white rounded-lg shadow-sm border px-2 py-1">
|
||||
<div class="flex items-center space-x-1 bg-white dark:bg-slate-800 rounded-lg shadow-sm border dark:border-slate-700 px-2 py-1">
|
||||
<button class="lang-btn px-2 py-1 text-xs rounded font-medium hover:bg-gray-100 transition-colors" data-lang="id">ID</button>
|
||||
<button class="lang-btn px-2 py-1 text-xs rounded font-medium hover:bg-gray-100 transition-colors" data-lang="en">EN</button>
|
||||
</div>
|
||||
<a href="/notifications" class="relative text-gray-500 hover:text-blue-600"><i class="fas fa-bell"></i><span id="notification-dot" class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500 hidden"></span></a>
|
||||
<a href="/profile" class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300"><i class="fas fa-user text-gray-600"></i></a>
|
||||
<a href="/notifications" class="relative text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400"><i class="fas fa-bell"></i><span id="notification-dot" class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500 hidden"></span></a>
|
||||
<a href="/profile" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-slate-600 flex items-center justify-center hover:bg-gray-300 dark:hover:bg-slate-500"><i class="fas fa-user text-gray-600 dark:text-gray-300"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
+24
-24
@@ -107,8 +107,8 @@
|
||||
<div class="mb-6">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-gray-800" data-i18n="dashboard.title">Dashboard Trading</h2>
|
||||
<p class="text-gray-600" data-i18n="dashboard.welcome_back">Selamat datang kembali! Berikut ringkasan trading Anda hari ini.</p>
|
||||
<h2 class="text-3xl font-bold text-gray-800 dark:text-white" data-i18n="dashboard.title">Dashboard Trading</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400" data-i18n="dashboard.welcome_back">Selamat datang kembali! Berikut ringkasan trading Anda hari ini.</p>
|
||||
</div>
|
||||
<div class="ai-mentor-widget p-4 text-right">
|
||||
<div class="text-sm opacity-90" data-i18n="dashboard.ai_mentor">🤖 AI Mentor</div>
|
||||
@@ -120,14 +120,14 @@
|
||||
|
||||
<!-- Enhanced STAT CARDS -->
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5 mb-6">
|
||||
<div class="stat-card bg-white rounded-lg shadow p-6">
|
||||
<div class="stat-card bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-500" data-i18n="dashboard.total_equity">Total Saldo (Equity)</h3>
|
||||
<p id="total-equity" class="mt-1 text-2xl font-semibold text-gray-800">
|
||||
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400" data-i18n="dashboard.total_equity">Total Saldo (Equity)</h3>
|
||||
<p id="total-equity" class="mt-1 text-2xl font-semibold text-gray-800 dark:text-white">
|
||||
<i class="fas fa-spinner fa-spin text-gray-400"></i>
|
||||
</p>
|
||||
<p id="equity-source" class="mt-1 text-xs text-gray-500">Source: Loading...</p>
|
||||
<p id="equity-source" class="mt-1 text-xs text-gray-500 dark:text-gray-400">Source: Loading...</p>
|
||||
</div>
|
||||
<div class="text-green-500 text-2xl">
|
||||
<i class="fas fa-wallet"></i>
|
||||
@@ -135,11 +135,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card bg-white rounded-lg shadow p-6">
|
||||
<div class="stat-card bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-500" data-i18n="dashboard.today_profit">Profit Hari Ini</h3>
|
||||
<p id="todays-profit" class="mt-1 text-2xl font-semibold text-gray-800">
|
||||
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400" data-i18n="dashboard.today_profit">Profit Hari Ini</h3>
|
||||
<p id="todays-profit" class="mt-1 text-2xl font-semibold text-gray-800 dark:text-white">
|
||||
<i class="fas fa-spinner fa-spin text-gray-400"></i>
|
||||
</p>
|
||||
</div>
|
||||
@@ -149,11 +149,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card bg-white rounded-lg shadow p-6">
|
||||
<div class="stat-card bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-500" data-i18n="dashboard.active_bots">Bot Aktif</h3>
|
||||
<p id="active-bots-count" class="mt-1 text-2xl font-semibold text-gray-800">
|
||||
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400" data-i18n="dashboard.active_bots">Bot Aktif</h3>
|
||||
<p id="active-bots-count" class="mt-1 text-2xl font-semibold text-gray-800 dark:text-white">
|
||||
<i class="fas fa-spinner fa-spin text-gray-400"></i>
|
||||
</p>
|
||||
</div>
|
||||
@@ -163,11 +163,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card bg-white rounded-lg shadow p-6">
|
||||
<div class="stat-card bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-500" data-i18n="dashboard.total_bots">Total Bot</h3>
|
||||
<p id="total-bots-count" class="mt-1 text-2xl font-semibold text-gray-800">
|
||||
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400" data-i18n="dashboard.total_bots">Total Bot</h3>
|
||||
<p id="total-bots-count" class="mt-1 text-2xl font-semibold text-gray-800 dark:text-white">
|
||||
<i class="fas fa-spinner fa-spin text-gray-400"></i>
|
||||
</p>
|
||||
</div>
|
||||
@@ -194,9 +194,9 @@
|
||||
<!-- Charts Column (2/3 width) -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<!-- Price Chart -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-700" data-i18n="dashboard.price_chart">📈 Grafik Harga EUR/USD</h3>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200" data-i18n="dashboard.price_chart">📈 Grafik Harga EUR/USD</h3>
|
||||
<div class="text-sm text-gray-500" id="last-updated">
|
||||
<i class="fas fa-clock"></i> <span data-i18n="dashboard.loading">Memuat...</span>
|
||||
</div>
|
||||
@@ -207,9 +207,9 @@
|
||||
</div>
|
||||
|
||||
<!-- RSI Chart -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-700" data-i18n="dashboard.rsi_chart">📊 RSI EUR/USD (H1)</h3>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200" data-i18n="dashboard.rsi_chart">📊 RSI EUR/USD (H1)</h3>
|
||||
<div class="text-sm text-gray-500">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800" data-i18n="dashboard.real_time">
|
||||
Real-time
|
||||
@@ -243,7 +243,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Recent Activities -->
|
||||
<div class="bg-white rounded-lg shadow">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50">
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="text-lg font-semibold text-gray-800" data-i18n="dashboard.recent_activities">⚡ Aktivitas Terbaru</h3>
|
||||
</div>
|
||||
@@ -255,14 +255,14 @@
|
||||
</div>
|
||||
|
||||
<!-- BOT AKTIF -->
|
||||
<div class="bg-white rounded-lg shadow">
|
||||
<div class="p-6 border-b">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50">
|
||||
<div class="p-6 border-b dark:border-slate-700">
|
||||
<h3 class="text-lg font-semibold text-gray-800" data-i18n="dashboard.active_trading_bots">Active Trading Bots</h3>
|
||||
</div>
|
||||
<div id="active-bots-list" class="divide-y">
|
||||
<p class="p-4 text-gray-500" data-i18n="dashboard.loading_bot_list">Memuat daftar bot...</p>
|
||||
<p class="p-4 text-gray-500 dark:text-gray-400" data-i18n="dashboard.loading_bot_list">Memuat daftar bot...</p>
|
||||
</div>
|
||||
<div class="p-4 border-t">
|
||||
<div class="p-4 border-t dark:border-slate-700">
|
||||
<a href="/trading_bots" class="block w-full text-center text-blue-600 font-medium hover:text-blue-800 transition" data-i18n="dashboard.view_all_bots">View All Bots</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user