gavindiaz/quantumbotx
1
0
Fork 0
mirror of https://github.com/chrisnov-it/quantumbotx.git synced 2026-07-27 18:57:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add CLAUDE.md + dark mode sweep across all 12 remaining templates

Browse Source 
- CLAUDE.md: project overview, architecture, conventions, key files
- Dark mode now covers: trading_bots, portfolio, backtesting, history,
  bot_detail, backtest_history, settings, notifications, profile,
  ramadan, forex, stocks — all 12 templates
- Consistent dark:bg-slate-800/700/900 + dark:text-gray-*/white patterns

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
chrisnov-it
2026-06-23 13:33:04 +08:00
parent 90feaad23e
commit f930f26839
13 changed files with 280 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+65
View File
@@ -0,0 +1,65 @@
# CLAUDE.md — QuantumBotX
## Project Overview
AI-powered modular trading bot built with Python & Flask.
Supports MetaTrader 5 + CCXT with backtesting, strategy testing, and web dashboard.
## Architecture
```
Flask Web UI (Jinja2 + Tailwind CSS + Chart.js)
↓
API Routes (core/routes/ — 21 endpoints)
↓
Controller (core/bots/controller.py)
↓
TradingBot / CCXTTradingBot (core/bots/)
↓
23 Strategies (core/strategies/)
↓
BrokerFactory (core/brokers/broker_factory.py)
↓
10 Broker Adapters (MT5, Binance, cTrader, IBKR...)
↓
BrokerInterface (core/interfaces/broker_interface.py)
```
## Branches
- `main` — MT5-only, stable, working
- `refactor/universal-architecture` — active development, CCXT + broker-agnostic
## Key Files
| File | Purpose |
|------|---------|
| `run.py` | App entry point |
| `core/bots/controller.py` | Bot lifecycle (start/stop/update) |
| `core/brokers/broker_factory.py` | Broker instantiation |
| `core/interfaces/broker_interface.py` | Broker abstraction contract |
| `core/strategies/` | 23 trading strategies |
| `core/backtesting/enhanced_engine.py` | Backtesting engine |
| `templates/base.html` | Main layout (sidebar + header + dark mode) |
| `static/js/main.js` | Dark mode toggle + notification system |
## UI Conventions
- Dark mode: Tailwind `class` strategy, localStorage `dark-mode` key
- Icons: Font Awesome 6 via CDN
- Charts: Chart.js via CDN
- i18n: Custom system (ID/EN toggle in header)
## Commands
```bash
python run.py # Start dev server
python testing/ccxt_smoke_test.py # Test CCXT connection
```
## VPS / Deploy
- Docker setup: `docker compose up` (Python 3.13)
- No automated CI/CD yet (unlike `landing` repo)
## Docs (excluded from git — in .gitignore)
- `TASKS.md` — sprint tasks
- `MEMORY.md` — product memory
- `WALKTHROUGH.md` — daily guide
- `RETROSPECT.md` — decision log
## Memory
Stored at `C:\Users\umeck\.claude\projects\D--dev-chrisnov-it-chrisnov-landing\memory\quantumbotx\`
templates/backtest_history.html
+6 -6
View File
@@ -3,12 +3,12 @@
{% block title %}Backtest History{% endblock %}
{% block content %}
<h2 class="text-2xl font-bold text-gray-800 mb-4">Riwayat Hasil Backtest</h2>
<p class="text-gray-600 mb-6">Daftar semua simulasi backtest yang telah dijalankan dan disimpan.</p>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Riwayat Hasil Backtest</h2>
<p class="text-gray-600 dark:text-gray-300 mb-6">Daftar semua simulasi backtest yang telah dijalankan dan disimpan.</p>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Kolom Daftar Riwayat -->
<div class="lg:col-span-1 bg-white p-4 rounded-lg shadow">
<div class="lg:col-span-1 bg-white dark:bg-slate-800 p-4 rounded-lg shadow dark:shadow-slate-900/50">
<h3 class="font-bold text-lg mb-2">Daftar Pengujian</h3>
<div id="history-list-container" class="max-h-[600px] overflow-y-auto">
<!-- Daftar akan dimuat di sini oleh JavaScript -->
@@ -17,10 +17,10 @@
</div>
<!-- Kolom Detail Hasil -->
<div id="detail-container" class="lg:col-span-2 bg-white p-6 rounded-lg shadow">
<div id="detail-container" class="lg:col-span-2 bg-white dark:bg-slate-800 p-6 rounded-lg shadow dark:shadow-slate-900/50">
<div id="detail-view" class="hidden">
<h3 class="text-xl font-bold mb-2">Detail Hasil Backtest</h3>
<p class="text-sm text-gray-500 mb-4">ID: <span id="detail-id"></span> | Tanggal: <span id="detail-timestamp"></span></p>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">ID: <span id="detail-id"></span> | Tanggal: <span id="detail-timestamp"></span></p>
<div id="detail-summary" class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6"></div>
@@ -31,7 +31,7 @@
<div id="detail-params"></div>
<div id="detail-log"></div>
</div>
<div id="detail-placeholder" class="text-center text-gray-500 py-10">
<div id="detail-placeholder" class="text-center text-gray-500 dark:text-gray-400 py-10">
<i class="fas fa-search-plus text-4xl mb-4"></i>
<p>Pilih salah satu hasil dari daftar di samping untuk melihat detailnya.</p>
</div>
templates/backtesting.html
+20 -20
View File
@@ -6,23 +6,23 @@
{% block content %}
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-gray-800" data-i18n="nav.backtest">Strategy Backtester</h2>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="nav.backtest">Strategy Backtester</h2>
<div class="flex space-x-2">
<a href="{{ url_for('backtest_history_page') }}" class="bg-gray-200 text-gray-800 py-2 px-4 rounded-lg font-medium hover:bg-gray-300">
<a href="{{ url_for('backtest_history_page') }}" class="bg-gray-200 dark:bg-slate-700 text-gray-800 dark:text-white py-2 px-4 rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-slate-600">
<i class="fas fa-history mr-2"></i><span data-i18n="action.view">Lihat Riwayat</span>
</a>
</div>
</div>
<!-- Enhanced Engine Info -->
<div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
<div class="mb-6 p-4 bg-blue-50 dark:bg-slate-700 border border-blue-200 dark:border-slate-600 rounded-lg">
<div class="flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-rocket text-blue-600 text-xl"></i>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-blue-800" data-i18n="backtest.enhanced_engine_active">🚀 Enhanced Backtesting Engine Active</h3>
<div class="mt-1 text-sm text-blue-700">
<h3 class="text-sm font-medium text-blue-800 dark:text-blue-300" data-i18n="backtest.enhanced_engine_active">🚀 Enhanced Backtesting Engine Active</h3>
<div class="mt-1 text-sm text-blue-700 dark:text-blue-200">
<p data-i18n="backtest.includes">Your backtesting now includes:</p>
<ul class="mt-1 list-disc list-inside text-xs space-y-1">
<li>✅ <strong data-i18n="backtest.realistic_spread">Realistic spread costs</strong> - <span data-i18n="backtest.actual_costs">Actual trading costs deducted</span></li>
@@ -37,41 +37,41 @@
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Kolom Konfigurasi -->
<div class="lg:col-span-1 bg-white p-6 rounded-lg shadow">
<div class="lg:col-span-1 bg-white dark:bg-slate-800 p-6 rounded-lg shadow">
<form id="backtest-form">
<div class="space-y-4">
<div>
<label for="strategy-select" class="block text-sm font-medium text-gray-700" data-i18n="label.strategy">Pilih Strategi</label>
<select id="strategy-select" name="strategy" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"></select>
<label for="strategy-select" class="block text-sm font-medium text-gray-700 dark:text-gray-200" data-i18n="label.strategy">Pilih Strategi</label>
<select id="strategy-select" name="strategy" class="mt-1 block w-full rounded-md border-gray-300 dark:border-slate-600 shadow-sm"></select>
</div>
<div>
<label for="data-file" class="block text-sm font-medium text-gray-700" data-i18n="backtest.upload_data">Unggah Data Historis (CSV)</label>
<input type="file" id="data-file" name="file" accept=".csv" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" required>
<label for="data-file" class="block text-sm font-medium text-gray-700 dark:text-gray-200" data-i18n="backtest.upload_data">Unggah Data Historis (CSV)</label>
<input type="file" id="data-file" name="file" accept=".csv" class="mt-1 block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 dark:file:bg-slate-600 file:text-blue-700 dark:file:text-blue-300 hover:file:bg-blue-100 dark:hover:file:bg-slate-500" required>
</div>
<!-- Risk Management Inputs (Enhanced Engine) -->
<div class="grid grid-cols-2 gap-4 pt-4 border-t">
<div class="grid grid-cols-2 gap-4 pt-4 border-t border-gray-200 dark:border-slate-700">
<div>
<label for="sl_atr_multiplier" class="block text-sm font-medium text-gray-700">
<label for="sl_atr_multiplier" class="block text-sm font-medium text-gray-700 dark:text-gray-200">
<span data-i18n="label.sl_atr">SL (ATR Multiplier)</span>
<span class="text-xs text-blue-600" data-i18n="backtest.enhanced">🚀 Enhanced</span>
</label>
<input type="number" name="sl_atr_multiplier" id="sl_atr_multiplier" value="2.0" step="0.1" min="0.5" max="5.0"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<p class="text-xs text-gray-500 mt-1" data-i18n="backtest.dynamic_sl">Dynamic SL based on volatility</p>
class="mt-1 block w-full rounded-md border-gray-300 dark:border-slate-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1" data-i18n="backtest.dynamic_sl">Dynamic SL based on volatility</p>
</div>
<div>
<label for="tp_atr_multiplier" class="block text-sm font-medium text-gray-700">
<label for="tp_atr_multiplier" class="block text-sm font-medium text-gray-700 dark:text-gray-200">
<span data-i18n="label.tp_atr">TP (ATR Multiplier)</span>
<span class="text-xs text-blue-600" data-i18n="backtest.enhanced">🚀 Enhanced</span>
</label>
<input type="number" name="tp_atr_multiplier" id="tp_atr_multiplier" value="4.0" step="0.1" min="1.0" max="10.0"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<p class="text-xs text-gray-500 mt-1" data-i18n="backtest.dynamic_tp">Dynamic TP based on volatility</p>
class="mt-1 block w-full rounded-md border-gray-300 dark:border-slate-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1" data-i18n="backtest.dynamic_tp">Dynamic TP based on volatility</p>
</div>
</div>
<div id="params-container" class="space-y-4 pt-4 border-t">
<div id="params-container" class="space-y-4 pt-4 border-t border-gray-200 dark:border-slate-700">
<!-- Parameter akan dimuat di sini -->
<span data-i18n="bots.strategy_params_loaded">Parameter strategi akan dimuat di sini</span>
</div>
@@ -83,7 +83,7 @@
</div>
<!-- Kolom Hasil -->
<div id="results-container" class="lg:col-span-2 bg-white p-6 rounded-lg shadow hidden">
<div id="results-container" class="lg:col-span-2 bg-white dark:bg-slate-800 p-6 rounded-lg shadow hidden">
<h3 class="text-xl font-bold mb-4" data-i18n="backtest.results">Hasil Backtest</h3>
<div id="results-summary" class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6"></div>
<div class="mb-6">
@@ -93,7 +93,7 @@
</div>
<div id="loading-spinner" class="lg:col-span-2 flex items-center justify-center hidden">
<i class="fas fa-spinner fa-spin text-blue-500 text-4xl"></i>
<p class="ml-4 text-gray-600" data-i18n="backtest.running">Menjalankan simulasi...</p>
<p class="ml-4 text-gray-600 dark:text-gray-300" data-i18n="backtest.running">Menjalankan simulasi...</p>
</div>
</div>
{% endblock %}
templates/bot_detail.html
+14 -14
View File
@@ -6,39 +6,39 @@
{% block content %}
<!-- Header Halaman -->
<div class="flex justify-between items-start mb-6 bg-white p-4 rounded-lg shadow">
<div class="flex justify-between items-start mb-6 bg-white dark:bg-slate-800 p-4 rounded-lg shadow dark:shadow-slate-900/50">
<div>
<h2 id="bot-name-header" class="text-2xl font-bold text-gray-800">Memuat...</h2>
<p id="bot-market-header" class="text-gray-600">Memuat detail bot...</p>
<h2 id="bot-name-header" class="text-2xl font-bold text-gray-800 dark:text-white">Memuat...</h2>
<p id="bot-market-header" class="text-gray-600 dark:text-gray-300">Memuat detail bot...</p>
</div>
<div id="bot-status-badge" class="px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-800">Memuat Status...</div>
<div id="bot-status-badge" class="px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-800 dark:text-white">Memuat Status...</div>
</div>
<!-- Layout Grid Utama -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Kolom Kiri (Log Aktivitas) -->
<div class="lg:col-span-2 bg-white rounded-lg shadow">
<div class="p-4 border-b"><h3 class="text-lg font-semibold text-gray-800">Log Aktivitas</h3></div>
<div class="lg:col-span-2 bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50">
<div class="p-4 border-b dark:border-slate-700"><h3 class="text-lg font-semibold text-gray-800 dark:text-white">Log Aktivitas</h3></div>
<div id="history-log-container" class="overflow-y-auto" style="max-height: 60vh;">
<p class="text-center text-gray-500 p-4">Memuat riwayat...</p>
<p class="text-center text-gray-500 dark:text-gray-400 p-4">Memuat riwayat...</p>
</div>
</div>
<!-- Kolom Kanan (Info & Analisis) -->
<div class="space-y-6">
<div class="bg-white rounded-lg shadow p-4">
<h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-3">Parameter</h3>
<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-2 mb-3">Parameter</h3>
<div id="bot-parameters-container" class="text-sm space-y-2">
<p class="text-center text-gray-500">Memuat...</p>
<p class="text-center text-gray-500 dark:text-gray-400">Memuat...</p>
</div>
</div>
<div class="bg-white rounded-lg shadow p-4">
<h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-3">Analisis Real-Time</h3>
<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-2 mb-3">Analisis Real-Time</h3>
<div id="bot-analysis-container" class="text-sm space-y-2">
<p class="text-center text-gray-500">Memuat...</p>
<p class="text-center text-gray-500 dark:text-gray-400">Memuat...</p>
</div>
<div id="analysis-signal" class="mt-4 text-center font-bold text-lg p-2 rounded-md bg-gray-100 text-gray-600">-</div>
<div id="analysis-signal" class="mt-4 text-center font-bold text-lg p-2 rounded-md bg-gray-100 text-gray-600 dark:text-gray-300">-</div>
</div>
</div>
</div>
templates/forex.html
+13 -13
View File
@@ -7,35 +7,35 @@
{% block content %}
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800" data-i18n="market.forex_title">Pasar Forex</h2>
<p class="text-gray-600" data-i18n="market.forex_description">Data harga real-time dari pasar valuta asing.</p>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="market.forex_title">Pasar Forex</h2>
<p class="text-gray-600 dark:text-gray-300" data-i18n="market.forex_description">Data harga real-time dari pasar valuta asing.</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-x-auto">
<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.pair">Pasangan</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.bid_price">Harga Bid</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.ask_price">Harga Ask</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.spread">Spread</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="action.view">Aksi</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.pair">Pasangan</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.bid_price">Harga Bid</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.ask_price">Harga Ask</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.spread">Spread</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="action.view">Aksi</th>
</tr>
</thead>
<tbody id="forex-table-body" class="bg-white divide-y divide-gray-200">
<tr><td colspan="5" class="p-4 text-center text-gray-500" data-i18n="market.loading">Memuat data forex...</td></tr>
<tbody id="forex-table-body" class="bg-white dark:bg-slate-800 divide-y divide-gray-200">
<tr><td colspan="5" class="p-4 text-center text-gray-500 dark:text-gray-400" data-i18n="market.loading">Memuat data forex...</td></tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div id="forex-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
<div class="relative top-20 mx-auto p-5 border w-1/2 shadow-lg rounded-md bg-white">
<div class="relative top-20 mx-auto p-5 border dark:border-slate-700 w-1/2 shadow-lg dark:shadow-slate-900/50 rounded-md bg-white dark:bg-slate-800">
<div class="mt-3 text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"></h3>
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title"></h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500" id="modal-content"></p>
<p class="text-sm text-gray-500 dark:text-gray-400" id="modal-content"></p>
</div>
<div class="items-center px-4 py-3">
<button id="close-modal" class="px-4 py-2 bg-gray-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-300">
templates/history.html
+13 -13
View File
@@ -7,26 +7,26 @@
{% block content %}
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800" data-i18n="history.title">Riwayat Transaksi Global</h2>
<p class="text-gray-600" data-i18n="history.description">Semua transaksi yang telah ditutup dari akun MetaTrader 5.</p>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="history.title">Riwayat Transaksi Global</h2>
<p class="text-gray-600 dark:text-gray-300" data-i18n="history.description">Semua transaksi yang telah ditutup dari akun MetaTrader 5.</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<div class="bg-white dark:bg-slate-800 rounded-lg shadow overflow-hidden">
<table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
<thead class="bg-gray-50 dark:bg-slate-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('symbol')"><span data-i18n="history.symbol">Simbol</span> <span id="symbol-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('type')"><span data-i18n="history.type">Tipe</span> <span id="type-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('volume')"><span data-i18n="history.volume">Volume</span> <span id="volume-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('profit')"><span data-i18n="history.profit">Profit</span> <span id="profit-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('time')"><span data-i18n="history.close_time">Waktu Penutupan</span> <span id="time-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortTable('magic')"><span data-i18n="history.magic">Magic Number</span> <span id="magic-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('symbol')"><span data-i18n="history.symbol">Simbol</span> <span id="symbol-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('type')"><span data-i18n="history.type">Tipe</span> <span id="type-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('volume')"><span data-i18n="history.volume">Volume</span> <span id="volume-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('profit')"><span data-i18n="history.profit">Profit</span> <span id="profit-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('time')"><span data-i18n="history.close_time">Waktu Penutupan</span> <span id="time-sort-icon"></span></th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50" onclick="sortTable('magic')"><span data-i18n="history.magic">Magic Number</span> <span id="magic-sort-icon"></span></th>
</tr>
</thead>
<tbody id="history-table-body" class="bg-white divide-y divide-gray-200">
<tbody id="history-table-body" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
<!-- Data akan dimuat di sini oleh JavaScript -->
<tr><td colspan="6" class="p-4 text-center text-gray-500" data-i18n="history.loading">Memuat riwayat...</td></tr>
<tr><td colspan="6" class="p-4 text-center text-gray-500 dark:text-gray-400" data-i18n="history.loading">Memuat riwayat...</td></tr>
</tbody>
</table>
</div>
templates/notifications.html
+3 -3
View File
@@ -5,11 +5,11 @@
{% block title %}Notifikasi{% endblock %}
{% block content %}
<h2 class="text-2xl font-bold text-gray-800 mb-6" data-i18n="nav.notifications">Notifikasi</h2>
<div class="bg-white rounded-lg shadow">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6" data-i18n="nav.notifications">Notifikasi</h2>
<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50">
<!-- Kontainer ini akan diisi oleh JavaScript -->
<div id="notifications-container" class="divide-y divide-gray-200">
<p class="p-6 text-center text-gray-500" data-i18n="notifications.loading">Memuat notifikasi...</p>
<p class="p-6 text-center text-gray-500 dark:text-gray-400" data-i18n="notifications.loading">Memuat notifikasi...</p>
</div>
</div>
{% endblock %}
templates/portfolio.html
+17 -17
View File
@@ -6,8 +6,8 @@
{% block content %}
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800" data-i18n="portfolio.title">Portfolio Real-Time</h2>
<p class="text-gray-600" data-i18n="portfolio.description">Posisi trading yang sedang terbuka di akun broker aktif.</p>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="portfolio.title">Portfolio Real-Time</h2>
<p class="text-gray-600 dark:text-gray-300" data-i18n="portfolio.description">Posisi trading yang sedang terbuka di akun broker aktif.</p>
</div>
<div id="portfolio-summary" class="text-right">
<!-- Summary akan dimuat di sini -->
@@ -17,33 +17,33 @@
<!-- Grid untuk menampung dua chart -->
<div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-6">
<!-- Chart P/L (lebih lebar) -->
<div class="lg:col-span-3 bg-white rounded-lg shadow p-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2" data-i18n="portfolio.pnl_chart">Grafik Profit/Loss Terbuka (Real-Time)</h3>
<div class="lg:col-span-3 bg-white dark:bg-slate-800 rounded-lg shadow p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2" data-i18n="portfolio.pnl_chart">Grafik Profit/Loss Terbuka (Real-Time)</h3>
<div style="height: 250px;"><canvas id="pnlChart"></canvas></div>
</div>
<!-- Chart Alokasi Aset (lebih kecil) -->
<div class="lg:col-span-2 bg-white rounded-lg shadow p-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2" data-i18n="portfolio.allocation_chart">Alokasi Aset</h3>
<div class="lg:col-span-2 bg-white dark:bg-slate-800 rounded-lg shadow p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2" data-i18n="portfolio.allocation_chart">Alokasi Aset</h3>
<div style="height: 250px;"><canvas id="assetAllocationChart"></canvas></div>
</div>
</div>
<!-- Tabel Posisi Terbuka -->
<table class="min-w-full bg-white rounded-lg shadow overflow-hidden">
<thead class="bg-gray-50">
<table class="min-w-full bg-white dark:bg-slate-800 rounded-lg shadow overflow-hidden">
<thead class="bg-gray-50 dark:bg-slate-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.symbol">Simbol</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.type">Tipe</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.volume">Volume</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.open_price">Harga Buka</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Price</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.profit_loss">Profit/Loss</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="portfolio.magic">Magic Number</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.symbol">Simbol</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.type">Tipe</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.volume">Volume</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.open_price">Harga Buka</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Current Price</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.profit_loss">Profit/Loss</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="portfolio.magic">Magic Number</th>
</tr>
</thead>
<tbody id="portfolio-table-body" class="bg-white divide-y divide-gray-200">
<tr><td colspan="7" class="p-4 text-center text-gray-500" data-i18n="portfolio.loading">Memuat posisi terbuka...</td></tr>
<tbody id="portfolio-table-body" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
<tr><td colspan="7" class="p-4 text-center text-gray-500 dark:text-gray-400" data-i18n="portfolio.loading">Memuat posisi terbuka...</td></tr>
</tbody>
</table>
templates/profile.html
+12 -12
View File
@@ -5,34 +5,34 @@
{% block title %}Profil{% endblock %}
{% block content %}
<h2 class="text-2xl font-bold text-gray-800 mb-6" data-i18n="profile.my_profile">Profil Saya</h2>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6" data-i18n="profile.my_profile">Profil Saya</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-1">
<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 flex-col items-center">
<div class="w-24 h-24 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-4xl font-bold mb-4">RC</div>
<h3 id="profile-display-name" class="text-xl font-bold text-gray-800" data-i18n="profile.loading">Memuat...</h3>
<h3 id="profile-display-name" class="text-xl font-bold text-gray-800 dark:text-white" data-i18n="profile.loading">Memuat...</h3>
<p id="profile-join-date" class="text-xs text-gray-400 mt-2" data-i18n="profile.joined_since">Bergabung sejak: Juli 2025</p>
</div>
</div>
</div>
<div class="lg:col-span-2">
<div class="bg-white rounded-lg shadow">
<div class="p-6 border-b">
<h3 class="text-lg font-semibold text-gray-800" data-i18n="settings.profile">Profil</h3>
<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 dark:text-white" data-i18n="settings.profile">Profil</h3>
</div>
<form id="profile-form" class="p-6 space-y-4">
<div>
<label for="profile-name" class="text-sm font-medium text-gray-700" data-i18n="label.full_name">Nama Lengkap</label>
<input type="text" id="profile-name" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required>
<label for="profile-name" class="text-sm font-medium text-gray-700 dark:text-gray-200" data-i18n="label.full_name">Nama Lengkap</label>
<input type="text" id="profile-name" class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500" required>
</div>
<div>
<label for="profile-email" class="text-sm font-medium text-gray-700" data-i18n="label.email">Alamat Email</label>
<input type="email" id="profile-email" class="mt-1 block w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required readonly>
<label for="profile-email" class="text-sm font-medium text-gray-700 dark:text-gray-200" data-i18n="label.email">Alamat Email</label>
<input type="email" id="profile-email" class="mt-1 block w-full px-3 py-2 bg-gray-100 border border-gray-300 dark:border-slate-700 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500" required readonly>
</div>
<div>
<label for="profile-password" class="text-sm font-medium text-gray-700" data-i18n="label.password">Ganti Password (kosongkan jika tidak ingin diubah)</label>
<input type="password" id="profile-password" data-i18n-placeholder="profile.password_placeholder" placeholder="••••••••" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<label for="profile-password" class="text-sm font-medium text-gray-700 dark:text-gray-200" data-i18n="label.password">Ganti Password (kosongkan jika tidak ingin diubah)</label>
<input type="password" id="profile-password" data-i18n-placeholder="profile.password_placeholder" placeholder="••••••••" class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500">
</div>
<button type="submit" id="save-profile-btn" class="bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700" data-i18n="msg.save_changes">Simpan Perubahan</button>
</form>
templates/ramadan.html
+42 -42
View File
@@ -7,8 +7,8 @@
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<div class="mb-8 text-center">
<h1 class="text-3xl font-bold text-gray-800 mb-2" data-i18n="ramadan.title">🌙 Ramadan Trading Mode</h1>
<p class="text-gray-600" data-i18n="ramadan.subtitle">Bulan suci dengan fitur trading yang menghormati ibadah puasa</p>
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-2" data-i18n="ramadan.title">🌙 Ramadan Trading Mode</h1>
<p class="text-gray-600 dark:text-gray-300" data-i18n="ramadan.subtitle">Bulan suci dengan fitur trading yang menghormati ibadah puasa</p>
<div class="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
<p class="text-blue-800">
<i class="fas fa-info-circle"></i> <span data-i18n="ramadan.info">Mode ini aktif secara otomatis selama bulan Ramadan dan akan menyesuaikan pengaturan trading Anda untuk menghormati waktu ibadah. Anda tidak perlu mengaktifkannya secara manual.</span>
@@ -17,24 +17,24 @@
</div>
<!-- Current Status Card -->
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-slate-900/50 dark:shadow-slate-900/50 p-6 mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-800" data-i18n="ramadan.status">Status Ramadan</h2>
<h2 class="text-xl font-semibold text-gray-800 dark:text-white" data-i18n="ramadan.status">Status Ramadan</h2>
<span id="ramadan-status" class="px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800" data-i18n="ramadan.loading">
Loading...
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border rounded-lg p-4">
<div class="text-sm text-gray-500 mb-1" data-i18n="ramadan.period">Periode Ramadan</div>
<div class="border dark:border-slate-700 rounded-lg p-4">
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1" data-i18n="ramadan.period">Periode Ramadan</div>
<div id="ramadan-period" class="text-lg font-semibold text-blue-600" data-i18n="ramadan.loading">
Loading...
</div>
</div>
<div class="border rounded-lg p-4">
<div class="text-sm text-gray-500 mb-1" data-i18n="ramadan.greeting">Salam Ramadan</div>
<div class="border dark:border-slate-700 rounded-lg p-4">
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1" data-i18n="ramadan.greeting">Salam Ramadan</div>
<div id="ramadan-greeting" class="text-lg font-semibold text-green-600" data-i18n="ramadan.loading">
Loading...
</div>
@@ -43,80 +43,80 @@
</div>
<!-- Iftar Countdown -->
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.iftar_countdown">⏱️ Hitung Mundur Iftar</h2>
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-slate-900/50 dark:shadow-slate-900/50 p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4" data-i18n="ramadan.iftar_countdown">⏱️ Hitung Mundur Iftar</h2>
<div class="flex justify-center items-center">
<div class="text-center mx-4">
<div id="iftar-hours" class="text-4xl font-bold text-gray-800">00</div>
<div class="text-sm text-gray-500" data-i18n="ramadan.hours">Jam</div>
<div id="iftar-hours" class="text-4xl font-bold text-gray-800 dark:text-white">00</div>
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.hours">Jam</div>
</div>
<div class="text-4xl font-bold text-gray-300">:</div>
<div class="text-center mx-4">
<div id="iftar-minutes" class="text-4xl font-bold text-gray-800">00</div>
<div class="text-sm text-gray-500" data-i18n="ramadan.minutes">Menit</div>
<div id="iftar-minutes" class="text-4xl font-bold text-gray-800 dark:text-white">00</div>
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.minutes">Menit</div>
</div>
</div>
<div class="text-center mt-4 text-gray-600">
<div class="text-center mt-4 text-gray-600 dark:text-gray-300">
<span data-i18n="ramadan.until">Sampai</span> <span id="next-prayer" data-i18n="ramadan.iftar">Iftar</span>
</div>
</div>
<!-- Trading Adjustments -->
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.trading_adjustments">⚙️ Penyesuaian Trading</h2>
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-slate-900/50 dark:shadow-slate-900/50 p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4" data-i18n="ramadan.trading_adjustments">⚙️ Penyesuaian Trading</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.fasting_times">Waktu Istirahat Puasa</h3>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3" data-i18n="ramadan.fasting_times">Waktu Istirahat Puasa</h3>
<div class="space-y-3">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-3"></div>
<div>
<div class="font-medium" data-i18n="ramadan.suhoor">Sahur</div>
<div class="text-sm text-gray-500" data-i18n="ramadan.suhoor_time">03:30 - 05:00 WIB</div>
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.suhoor_time">03:30 - 05:00 WIB</div>
</div>
</div>
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-orange-500 mr-3"></div>
<div>
<div class="font-medium" data-i18n="ramadan.iftar_time">Iftar</div>
<div class="text-sm text-gray-500" data-i18n="ramadan.iftar_time_range">18:00 - 19:30 WIB</div>
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.iftar_time_range">18:00 - 19:30 WIB</div>
</div>
</div>
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-purple-500 mr-3"></div>
<div>
<div class="font-medium" data-i18n="ramadan.tarawih">Tarawih</div>
<div class="text-sm text-gray-500" data-i18n="ramadan.tarawih_time">20:00 - 21:30 WIB</div>
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.tarawih_time">20:00 - 21:30 WIB</div>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.risk_adjustments">Penyesuaian Risiko</h3>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3" data-i18n="ramadan.risk_adjustments">Penyesuaian Risiko</h3>
<div class="space-y-3">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-red-500 mr-3"></div>
<div>
<div class="font-medium" data-i18n="ramadan.reduced_risk_mode">Reduced Risk Mode</div>
<div class="text-sm text-gray-500" data-i18n="ramadan.reduced_risk_description">20% pengurangan risiko selama puasa</div>
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.reduced_risk_description">20% pengurangan risiko selama puasa</div>
</div>
</div>
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-blue-500 mr-3"></div>
<div>
<div class="font-medium" data-i18n="ramadan.patience_mode">Patience Mode</div>
<div class="text-sm text-gray-500" data-i18n="ramadan.patience_mode_description">Fokus pada kualitas bukan kuantitas</div>
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.patience_mode_description">Fokus pada kualitas bukan kuantitas</div>
</div>
</div>
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-green-500 mr-3"></div>
<div>
<div class="font-medium" data-i18n="ramadan.optimal_hours">Optimal Hours</div>
<div class="text-sm text-gray-500" data-i18n="ramadan.optimal_hours_time">22:00 - 03:00 WIB</div>
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.optimal_hours_time">22:00 - 03:00 WIB</div>
</div>
</div>
</div>
@@ -125,32 +125,32 @@
</div>
<!-- Zakat Calculator -->
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.zakat_calculator">💰 Kalkulator Zakat Trading</h2>
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-slate-900/50 dark:shadow-slate-900/50 p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4" data-i18n="ramadan.zakat_calculator">💰 Kalkulator Zakat Trading</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.zakat_information">Informasi Zakat</h3>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3" data-i18n="ramadan.zakat_information">Informasi Zakat</h3>
<div class="space-y-3">
<div class="border rounded-lg p-3">
<div class="text-sm text-gray-500" data-i18n="ramadan.gold_nisab">Nisab Emas</div>
<div class="border dark:border-slate-700 rounded-lg p-3">
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.gold_nisab">Nisab Emas</div>
<div class="text-lg font-semibold">85 gram</div>
</div>
<div class="border rounded-lg p-3">
<div class="text-sm text-gray-500" data-i18n="ramadan.silver_nisab">Nisab Perak</div>
<div class="border dark:border-slate-700 rounded-lg p-3">
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.silver_nisab">Nisab Perak</div>
<div class="text-lg font-semibold">595 gram</div>
</div>
<div class="border rounded-lg p-3">
<div class="text-sm text-gray-500" data-i18n="ramadan.zakat_percentage">Persentase Zakat</div>
<div class="border dark:border-slate-700 rounded-lg p-3">
<div class="text-sm text-gray-500 dark:text-gray-400" data-i18n="ramadan.zakat_percentage">Persentase Zakat</div>
<div class="text-lg font-semibold">2.5%</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-700 mb-3" data-i18n="ramadan.zakat_reminder">Pengingat Zakat</h3>
<div class="border rounded-lg p-4 bg-blue-50">
<p class="text-gray-700">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3" data-i18n="ramadan.zakat_reminder">Pengingat Zakat</h3>
<div class="border dark:border-slate-700 rounded-lg p-4 bg-blue-50">
<p class="text-gray-700 dark:text-gray-200">
<span data-i18n="ramadan.zakat_trading_reminder">Zakat perdagangan: 2.5% dari profit trading selama 1 tahun hijriah. Jangan lupa menghitung zakat dari profit trading Anda selama Ramadan.</span>
</p>
</div>
@@ -159,11 +159,11 @@
</div>
<!-- Patience Reminder -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 mb-4" data-i18n="ramadan.patience_reminder">🧘‍♂️ Pengingat Kesabaran</h2>
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-slate-900/50 dark:shadow-slate-900/50 p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4" data-i18n="ramadan.patience_reminder">🧘‍♂️ Pengingat Kesabaran</h2>
<div class="border rounded-lg p-6 bg-green-50 text-center">
<div id="patience-reminder" class="text-lg text-gray-700 italic" data-i18n="ramadan.loading">
<div class="border dark:border-slate-700 rounded-lg p-6 bg-green-50 text-center">
<div id="patience-reminder" class="text-lg text-gray-700 dark:text-gray-200 italic" data-i18n="ramadan.loading">
Loading...
</div>
</div>
@@ -185,7 +185,7 @@ function updateRamadanStatus(status) {
periodElement.textContent = `${status.start_date} sampai ${status.end_date}`;
greetingElement.textContent = status.greeting;
} else {
statusElement.className = 'px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800';
statusElement.className = 'px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:text-white';
statusElement.textContent = 'Tidak Aktif';
periodElement.textContent = 'Bukan periode Ramadan';
greetingElement.textContent = 'Saatnya berpuasa, saatnya trading dengan berkah';
templates/settings.html
+23 -23
View File
@@ -5,38 +5,38 @@
{% block title %}Pengaturan{% endblock %}
{% block content %}
<h2 class="text-2xl font-bold text-gray-800 mb-6" data-i18n="settings.title">Pengaturan</h2>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6" data-i18n="settings.title">Pengaturan</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 space-y-6">
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-semibold text-gray-800 border-b pb-4 mb-4" id="profile-title" data-i18n="settings.profile">Profil</h3>
<div class="bg-white dark:bg-slate-800 p-6 rounded-lg shadow dark:shadow-slate-900/50">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-4 mb-4" id="profile-title" data-i18n="settings.profile">Profil</h3>
<div class="space-y-4">
<div>
<label class="text-sm font-medium text-gray-700" id="full-name-label" data-i18n="label.full_name">Nama Lengkap</label>
<input type="text" value="Reynov Christian" id="full-name-input" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<label class="text-sm font-medium text-gray-700 dark:text-gray-200" id="full-name-label" data-i18n="label.full_name">Nama Lengkap</label>
<input type="text" value="Reynov Christian" id="full-name-input" class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 border-gray-300 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500">
</div>
<div>
<label class="text-sm font-medium text-gray-700" id="email-label" data-i18n="label.email">Alamat Email</label>
<input type="email" value="contact@chrisnov.com" id="email-input" class="mt-1 block w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md shadow-sm" readonly>
<label class="text-sm font-medium text-gray-700 dark:text-gray-200" id="email-label" data-i18n="label.email">Alamat Email</label>
<input type="email" value="contact@chrisnov.com" id="email-input" class="mt-1 block w-full px-3 py-2 bg-gray-100 border dark:border-slate-700 border-gray-300 rounded-md shadow dark:shadow-slate-900/50-sm" readonly>
</div>
<button id="save-profile-btn" class="bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700" data-i18n="msg.save_changes">Simpan Perubahan</button>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-semibold text-gray-800 border-b pb-4 mb-4" id="preferences-title" data-i18n="settings.preferences">Preferensi</h3>
<div class="bg-white dark:bg-slate-800 p-6 rounded-lg shadow dark:shadow-slate-900/50">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-4 mb-4" id="preferences-title" data-i18n="settings.preferences">Preferensi</h3>
<div class="space-y-4">
<div>
<label class="text-sm font-medium text-gray-700" id="language-label" data-i18n="settings.language">Bahasa</label>
<select id="language-select" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<label class="text-sm font-medium text-gray-700 dark:text-gray-200" id="language-label" data-i18n="settings.language">Bahasa</label>
<select id="language-select" class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 border-gray-300 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500">
<option value="id" data-i18n="settings.indonesian">Indonesia</option>
<option value="en" data-i18n="settings.english">English</option>
</select>
<p class="text-xs text-gray-500 mt-1">Application language settings</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Application language settings</p>
</div>
<div>
<label class="text-sm font-medium text-gray-700" id="theme-label" data-i18n="settings.theme">Tema</label>
<select id="theme-select" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<label class="text-sm font-medium text-gray-700 dark:text-gray-200" id="theme-label" data-i18n="settings.theme">Tema</label>
<select id="theme-select" class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border dark:border-slate-700 border-gray-300 rounded-md shadow dark:shadow-slate-900/50-sm focus:outline-none focus:ring-blue-500 focus:border-b dark:border-slate-700lue-500">
<option value="light" data-i18n="settings.light">Terang</option>
<option value="dark" data-i18n="settings.dark">Gelap (Segera Hadir)</option>
</select>
@@ -45,8 +45,8 @@
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-semibold text-gray-800 border-b pb-4 mb-4" id="api-keys-title" data-i18n="settings.api_keys">API Keys Bursa</h3>
<div class="bg-white dark:bg-slate-800 p-6 rounded-lg shadow dark:shadow-slate-900/50">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-4 mb-4" id="api-keys-title" data-i18n="settings.api_keys">API Keys Bursa</h3>
<div class="space-y-4">
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<div class="flex">
@@ -60,7 +60,7 @@
</div>
</div>
</div>
<div class="text-sm text-gray-600" id="api-placeholder-text" data-i18n="settings.api_placeholder">
<div class="text-sm text-gray-600 dark:text-gray-300" id="api-placeholder-text" data-i18n="settings.api_placeholder">
Fitur ini akan tersedia di QuantumBotX API versi mendatang.
</div>
</div>
@@ -68,23 +68,23 @@
</div>
<div class="lg:col-span-1 space-y-6">
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-semibold text-gray-800 border-b pb-4 mb-4" id="quick-settings-title" data-i18n="settings.quick_settings">Pengaturan Cepat</h3>
<div class="bg-white dark:bg-slate-800 p-6 rounded-lg shadow dark:shadow-slate-900/50">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white border-b dark:border-slate-700 pb-4 mb-4" id="quick-settings-title" data-i18n="settings.quick_settings">Pengaturan Cepat</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-700" id="notifications-label" data-i18n="settings.email_notifications">Notifikasi Email</span>
<span class="text-sm text-gray-700 dark:text-gray-200" id="notifications-label" data-i18n="settings.email_notifications">Notifikasi Email</span>
<input type="checkbox" id="email-notifications" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-700" id="auto-update-label" data-i18n="settings.auto_update">Update Otomatis Strategi</span>
<span class="text-sm text-gray-700 dark:text-gray-200" id="auto-update-label" data-i18n="settings.auto_update">Update Otomatis Strategi</span>
<input type="checkbox" id="auto-update" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-700" id="demo-mode-label" data-i18n="settings.demo_mode">Mode Demo</span>
<span class="text-sm text-gray-700 dark:text-gray-200" id="demo-mode-label" data-i18n="settings.demo_mode">Mode Demo</span>
<input type="checkbox" id="demo-mode" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
</div>
<hr class="my-4">
<div class="text-sm text-gray-600" id="version-info">
<div class="text-sm text-gray-600 dark:text-gray-300" id="version-info">
<strong data-i18n="settings.version">Versi:</strong> 2.0.0<br>
<strong data-i18n="settings.last_updated">Terakhir Update:</strong> September 2025
</div>
templates/stocks.html
+13 -13
View File
@@ -7,35 +7,35 @@
{% block content %}
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800" data-i18n="market.stocks_title">Pasar Saham</h2>
<p class="text-gray-600" data-i18n="market.stocks_description">Data harga real-time dari pasar saham global.</p>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="market.stocks_title">Pasar Saham</h2>
<p class="text-gray-600 dark:text-gray-300" data-i18n="market.stocks_description">Data harga real-time dari pasar saham global.</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-x-auto">
<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50 overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.stock">Saham</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.price">Harga</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.change_24h">Perubahan 24j</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="market.time">Waktu</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="action.view">Aksi</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.stock">Saham</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.price">Harga</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.change_24h">Perubahan 24j</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="market.time">Waktu</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="action.view">Aksi</th>
</tr>
</thead>
<tbody id="stocks-table-body" class="bg-white divide-y divide-gray-200">
<tr><td colspan="5" class="p-4 text-center text-gray-500" data-i18n="market.loading_stocks">Memuat data saham...</td></tr>
<tbody id="stocks-table-body" class="bg-white dark:bg-slate-800 divide-y divide-gray-200">
<tr><td colspan="5" class="p-4 text-center text-gray-500 dark:text-gray-400" data-i18n="market.loading_stocks">Memuat data saham...</td></tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div id="stock-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
<div class="relative top-20 mx-auto p-5 border w-1/2 shadow-lg rounded-md bg-white">
<div class="relative top-20 mx-auto p-5 border dark:border-slate-700 w-1/2 shadow-lg dark:shadow-slate-900/50 rounded-md bg-white dark:bg-slate-800">
<div class="mt-3 text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"></h3>
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title"></h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500" id="modal-content"></p>
<p class="text-sm text-gray-500 dark:text-gray-400" id="modal-content"></p>
</div>
<div class="items-center px-4 py-3">
<button id="close-modal" class="px-4 py-2 bg-gray-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-300">
templates/trading_bots.html
+39 -39
View File
@@ -11,8 +11,8 @@
<!-- Header Halaman: Judul di kiri, tombol di kanan -->
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800" data-i18n="bots.title">Trading Bots</h2>
<p class="text-gray-600" data-i18n="bots.manage">Kelola semua bot dan strategi Anda.</p>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white" data-i18n="bots.title">Trading Bots</h2>
<p class="text-gray-600 dark:text-gray-300" data-i18n="bots.manage">Kelola semua bot dan strategi Anda.</p>
</div>
<div class="flex items-center space-x-2">
<button id="start-all-btn" class="bg-green-500 text-white py-2 px-4 rounded-lg font-medium hover:bg-green-600 transition flex items-center" data-i18n-title="bots.start_all_title" title="Jalankan semua bot yang dijeda">
@@ -22,35 +22,35 @@
<button id="create-bot-btn" class="bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700 transition flex items-center"><i class="fas fa-plus mr-2"></i> <span data-i18n="action.create_new_bot">Buat Bot Baru</span></button>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<table class="min-w-full divide-y divide-gray-200" aria-label="Trading Bots Table">
<thead class="bg-gray-50">
<div class="bg-white dark:bg-slate-800 rounded-lg shadow overflow-hidden">
<table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700" aria-label="Trading Bots Table">
<thead class="bg-gray-50 dark:bg-slate-700">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.name_market">Nama / Pasar</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.parameters">Parameter</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.configuration">Konfigurasi</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="label.status">Status</th>
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.actions">Aksi</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="bots.name_market">Nama / Pasar</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="bots.parameters">Parameter</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="bots.configuration">Konfigurasi</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="label.status">Status</th>
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" data-i18n="bots.actions">Aksi</th>
</tr>
</thead>
<tbody id="bots-table-body" class="bg-white divide-y divide-gray-200"></tbody>
<tbody id="bots-table-body" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700"></tbody>
</table>
</div>
<!-- Modal untuk Membuat/Mengedit Bot -->
<div id="create-bot-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50 p-4">
<!-- PERBAIKAN: Panel modal kini menggunakan flexbox vertikal dan tinggi maksimal -->
<div class="relative bg-white rounded-lg shadow-xl w-full max-w-2xl flex flex-col max-h-[90vh]">
<div class="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-2xl flex flex-col max-h-[90vh]">
<!-- Loading Overlay -->
<div id="modal-loading-overlay" class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10 hidden">
<div id="modal-loading-overlay" class="absolute inset-0 bg-white dark:bg-slate-800 bg-opacity-75 flex items-center justify-center z-10 hidden">
<i class="fas fa-spinner fa-spin text-blue-600 text-4xl"></i>
</div>
<!-- Header Modal (Tidak akan ikut ter-scroll) -->
<div class="flex-shrink-0 flex items-start justify-between p-5 border-b rounded-t">
<h3 id="modal-title" class="text-xl font-semibold text-gray-900" data-i18n="bots.create_new">
<div class="flex-shrink-0 flex items-start justify-between p-5 border-b border-gray-200 dark:border-slate-700 rounded-t">
<h3 id="modal-title" class="text-xl font-semibold text-gray-900 dark:text-white" data-i18n="bots.create_new">
🚀 Buat Bot Baru
</h3>
<button type="button" id="cancel-create" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
<button type="button" id="cancel-create" class="text-gray-400 bg-transparent hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-white rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
<i class="fas fa-times"></i>
<span class="sr-only" data-i18n="bots.close_modal">Tutup modal</span>
</button>
@@ -62,34 +62,34 @@
<!-- Baris 1: Nama & Pasar -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.bot_name">Nama Bot</label>
<input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" data-i18n-placeholder="bots.example_name" placeholder="Contoh: XAUUSD Hybrid H1" required>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.bot_name">Nama Bot</label>
<input type="text" name="name" id="name" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" data-i18n-placeholder="bots.example_name" placeholder="Contoh: XAUUSD Hybrid H1" required>
</div>
<div>
<label for="market" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.market">Pasar</label>
<input type="text" name="market" id="market" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" data-i18n-placeholder="bots.example_market" placeholder="Contoh: XAUUSD atau EURUSD" required>
<label for="market" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.market">Pasar</label>
<input type="text" name="market" id="market" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" data-i18n-placeholder="bots.example_market" placeholder="Contoh: XAUUSD atau EURUSD" required>
</div>
</div>
<!-- Baris 2: Lot, SL, TP -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label for="risk_percent" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.risk_per_trade">Risk per Trade (%)</label>
<input type="number" name="risk_percent" id="risk_percent" value="1.0" step="0.1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
<label for="risk_percent" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.risk_per_trade">Risk per Trade (%)</label>
<input type="number" name="risk_percent" id="risk_percent" value="1.0" step="0.1" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
</div>
<div>
<label for="sl_atr_multiplier" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.sl_atr">SL (ATR Multiplier)</label>
<input type="number" name="sl_atr_multiplier" id="sl_atr_multiplier" value="2.0" step="0.1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
<label for="sl_atr_multiplier" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.sl_atr">SL (ATR Multiplier)</label>
<input type="number" name="sl_atr_multiplier" id="sl_atr_multiplier" value="2.0" step="0.1" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
</div>
<div>
<label for="tp_atr_multiplier" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.tp_atr">TP (ATR Multiplier)</label>
<input type="number" name="tp_atr_multiplier" id="tp_atr_multiplier" value="4.0" step="0.1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
<label for="tp_atr_multiplier" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.tp_atr">TP (ATR Multiplier)</label>
<input type="number" name="tp_atr_multiplier" id="tp_atr_multiplier" value="4.0" step="0.1" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
</div>
</div>
<!-- Baris 3: Timeframe & Interval -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="timeframe" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.timeframe">Timeframe</label>
<select id="timeframe" name="timeframe" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<label for="timeframe" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.timeframe">Timeframe</label>
<select id="timeframe" name="timeframe" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option value="M1" data-i18n="bots.timeframe_1m">1 Menit</option>
<option value="M5" data-i18n="bots.timeframe_5m">5 Menit</option>
<option value="M15" data-i18n="bots.timeframe_15m">15 Menit</option>
@@ -100,26 +100,26 @@
</select>
</div>
<div>
<label for="check_interval_seconds" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.check_interval">Interval Cek (detik)</label>
<input type="number" name="check_interval_seconds" id="check_interval_seconds" value="60" step="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
<label for="check_interval_seconds" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.check_interval">Interval Cek (detik)</label>
<input type="number" name="check_interval_seconds" id="check_interval_seconds" value="60" step="1" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
</div>
</div>
<!-- Strategy Switching Option -->
<div class="border-t pt-4">
<div class="border-t border-gray-200 dark:border-slate-700 pt-4">
<div class="flex items-center">
<input type="checkbox" id="enable_strategy_switching" name="enable_strategy_switching" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="enable_strategy_switching" class="ml-2 text-sm font-medium text-gray-900" data-i18n="bots.enable_strategy_switching">Aktifkan Automatic Strategy Switching</label>
<input type="checkbox" id="enable_strategy_switching" name="enable_strategy_switching" class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-slate-600 border-gray-300 dark:border-slate-600 rounded focus:ring-blue-500">
<label for="enable_strategy_switching" class="ml-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="bots.enable_strategy_switching">Aktifkan Automatic Strategy Switching</label>
</div>
<p class="mt-1 text-xs text-gray-500" data-i18n="bots.strategy_switching_info">Jika diaktifkan, bot akan secara otomatis beralih ke strategi terbaik berdasarkan kinerja terkini.</p>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400" data-i18n="bots.strategy_switching_info">Jika diaktifkan, bot akan secara otomatis beralih ke strategi terbaik berdasarkan kinerja terkini.</p>
</div>
<!-- Baris 4: Strategi & Parameternya -->
<div>
<label for="strategy" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.strategy">Strategi</label>
<select id="strategy" name="strategy" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
<label for="strategy" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" data-i18n="label.strategy">Strategi</label>
<select id="strategy" name="strategy" class="bg-gray-50 dark:bg-slate-700 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
<option value="" disabled selected data-i18n="bots.select_strategy">Pilih sebuah strategi</option>
</select>
</div>
<div id="strategy-params-container" class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t">
<div id="strategy-params-container" class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-gray-200 dark:border-slate-700">
<!-- Parameter strategi akan dimuat di sini oleh JavaScript -->
<span data-i18n="bots.strategy_params_loaded">Parameter strategi akan dimuat di sini oleh JavaScript</span>
</div>
@@ -127,9 +127,9 @@
</form>
<!-- Footer Modal (Tidak akan ikut ter-scroll) -->
<div class="flex-shrink-0 flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b">
<div class="flex-shrink-0 flex items-center p-6 space-x-2 border-t border-gray-200 dark:border-slate-700 rounded-b">
<button type="submit" id="submit-bot-btn" form="create-bot-form" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center" data-i18n="bots.create_bot">Buat Bot</button>
<button type="button" id="cancel-create-footer" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10" data-i18n="bots.cancel">Batal</button>
<button type="button" id="cancel-create-footer" class="text-gray-500 dark:text-gray-400 bg-white dark:bg-slate-800 hover:bg-gray-100 dark:hover:bg-slate-700/50 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 dark:border-slate-700 text-sm font-medium px-5 py-2.5 hover:text-gray-900 dark:hover:text-white focus:z-10" data-i18n="bots.cancel">Batal</button>
</div>
</div>
</div>