|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>QuantumTrade AI - Advanced Trading Scanner</title> |
|
|
<script src="https://cdn.tailwindcss.com"></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> |
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#1e40af', |
|
|
secondary: '#1e3a8a', |
|
|
accent: '#3b82f6', |
|
|
dark: '#0f172a', |
|
|
light: '#f8fafc', |
|
|
success: '#10b981', |
|
|
danger: '#ef4444', |
|
|
warning: '#f59e0b', |
|
|
}, |
|
|
screens: { |
|
|
'xs': '475px', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.chart-container { |
|
|
height: 400px; |
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
|
|
|
.signal-buy { |
|
|
animation: pulseBuy 2s infinite; |
|
|
} |
|
|
|
|
|
.signal-sell { |
|
|
animation: pulseSell 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulseBuy { |
|
|
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } |
|
|
} |
|
|
|
|
|
@keyframes pulseSell { |
|
|
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } |
|
|
} |
|
|
|
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.scrollbar-hide { |
|
|
-ms-overflow-style: none; |
|
|
scrollbar-width: none; |
|
|
} |
|
|
|
|
|
.tradingview-widget-container { |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
|
|
|
.optimizer-chart { |
|
|
height: 200px; |
|
|
} |
|
|
|
|
|
.bot-status-active { |
|
|
animation: pulseStatus 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulseStatus { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
|
|
|
|
|
|
.btn { |
|
|
transition: all 0.3s ease; |
|
|
transform: translateY(0); |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
transform: translateY(-1px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.btn:active { |
|
|
transform: translateY(0); |
|
|
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background-color: #1e40af; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background-color: #1e3a8a; |
|
|
} |
|
|
|
|
|
.btn-success { |
|
|
background-color: #10b981; |
|
|
} |
|
|
|
|
|
.btn-success:hover { |
|
|
background-color: #0d9f6e; |
|
|
} |
|
|
|
|
|
.btn-danger { |
|
|
background-color: #ef4444; |
|
|
} |
|
|
|
|
|
.btn-danger:hover { |
|
|
background-color: #dc2626; |
|
|
} |
|
|
|
|
|
.btn-accent { |
|
|
background-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.btn-accent:hover { |
|
|
background-color: #2563eb; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.btn-text { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.btn-icon { |
|
|
margin-right: 0 !important; |
|
|
} |
|
|
|
|
|
.btn-sm { |
|
|
padding: 0.5rem; |
|
|
min-width: auto; |
|
|
} |
|
|
|
|
|
.chart-container { |
|
|
height: 300px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn:focus { |
|
|
outline: 2px solid transparent; |
|
|
outline-offset: 2px; |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-dark py-4 px-6 shadow-lg"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="bg-accent p-2 rounded-lg"> |
|
|
<i class="fas fa-robot text-2xl"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold">QuantumTrade AI</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2 sm:space-x-6"> |
|
|
<div class="relative group"> |
|
|
<button id="connect-exchange-btn" class="btn btn-primary flex items-center space-x-2 px-3 py-2 rounded-lg transition min-w-[150px]"> |
|
|
<span class="btn-text">Connect Exchange</span> |
|
|
<i class="fas fa-exchange-alt btn-icon"></i> |
|
|
</button> |
|
|
<div id="exchange-connect-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-gray-800 rounded-lg p-6 w-96"> |
|
|
<h3 class="text-xl font-bold mb-4">Connect to Exchange</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm mb-1">Exchange</label> |
|
|
<select id="exchange-select" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"> |
|
|
<option value="binance">Binance</option> |
|
|
<option value="coinbase">Coinbase</option> |
|
|
<option value="kraken">Kraken</option> |
|
|
<option value="metatrader5">MetaTrader 5</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm mb-1">API Key</label> |
|
|
<input type="text" id="api-key" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" placeholder="Enter API Key"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm mb-1">API Secret</label> |
|
|
<input type="password" id="api-secret" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" placeholder="Enter API Secret"> |
|
|
</div> |
|
|
<div id="mt5-fields" class="hidden space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm mb-1">MT5 Server</label> |
|
|
<input type="text" id="mt5-server" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" placeholder="Enter MT5 Server"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm mb-1">MT5 Login</label> |
|
|
<input type="text" id="mt5-login" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" placeholder="Enter MT5 Login"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm mb-1">MT5 Password</label> |
|
|
<input type="password" id="mt5-password" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" placeholder="Enter MT5 Password"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<button id="exchange-connect-submit" class="btn btn-primary flex-1 py-2">Connect</button> |
|
|
<button id="exchange-connect-cancel" class="btn btn-danger flex-1 py-2">Cancel</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-xl z-40 hidden group-hover:block"> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded-t-lg"><i class="fab fa-bitcoin mr-2"></i> Binance</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fab fa-ethereum mr-2"></i> Coinbase</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fas fa-chart-line mr-2"></i> Kraken</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fas fa-exchange-alt mr-2"></i> FTX</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fas fa-university mr-2"></i> Interactive Brokers</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fas fa-landmark mr-2"></i> TD Ameritrade</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fab fa-cc-visa mr-2"></i> eToro</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded-b-lg"><i class="fas fa-globe mr-2"></i> MetaTrader 5</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="h-10 w-10 rounded-full bg-accent flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<span class="hidden sm:inline">Trader</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 grid grid-cols-1 lg:grid-cols-4 gap-6 p-4 sm:p-6"> |
|
|
|
|
|
<div class="lg:col-span-1 space-y-6"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-chart-pie mr-2"></i> Asset Classes |
|
|
</h2> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<button class="asset-btn btn btn-primary active py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center"> |
|
|
<i class="fab fa-bitcoin mr-1 sm:mr-2"></i> |
|
|
<span class="hidden xs:inline">Crypto</span> |
|
|
</button> |
|
|
<button class="asset-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-chart-line mr-1 sm:mr-2"></i> |
|
|
<span class="hidden xs:inline">Stocks</span> |
|
|
</button> |
|
|
<button class="asset-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-dollar-sign mr-1 sm:mr-2"></i> |
|
|
<span class="hidden xs:inline">Forex</span> |
|
|
</button> |
|
|
<button class="asset-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-clock mr-1 sm:mr-2"></i> |
|
|
<span class="hidden xs:inline">Futures</span> |
|
|
</button> |
|
|
<button class="asset-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-cog mr-1 sm:mr-2"></i> |
|
|
<span class="hidden xs:inline">Options</span> |
|
|
</button> |
|
|
<button class="asset-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-globe mr-1 sm:mr-2"></i> |
|
|
<span class="hidden xs:inline">All</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-clock mr-2"></i> Timeframes |
|
|
</h2> |
|
|
<div class="grid grid-cols-3 gap-2"> |
|
|
<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">1m</button> |
|
|
<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">5m</button> |
|
|
<button class="timeframe-btn btn btn-primary active py-2 px-2 rounded-lg text-sm">15m</button> |
|
|
<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">1h</button> |
|
|
<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">4h</button> |
|
|
<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">1d</button> |
|
|
<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">1w</button> |
|
|
<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">1M</button> |
|
|
<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">Custom</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-running mr-2"></i> Trading Style |
|
|
</h2> |
|
|
<div class="space-y-2"> |
|
|
<button class="style-btn btn w-full bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-between"> |
|
|
<span class="hidden sm:inline">Scalping</span> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</button> |
|
|
<button class="style-btn btn w-full bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-between"> |
|
|
<span class="hidden sm:inline">Day Trading</span> |
|
|
<i class="fas fa-sun"></i> |
|
|
</button> |
|
|
<button class="style-btn btn btn-primary active w-full py-2 px-2 sm:px-4 rounded-lg flex items-center justify-between"> |
|
|
<span class="hidden sm:inline">Swing Trading</span> |
|
|
<i class="fas fa-wave-square"></i> |
|
|
</button> |
|
|
<button class="style-btn btn w-full bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-between"> |
|
|
<span class="hidden sm:inline">Investing</span> |
|
|
<i class="fas fa-piggy-bank"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-cogs mr-2"></i> Quantum Config |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-1"> |
|
|
<label class="block text-sm">Signal Strength</label> |
|
|
<span id="signal-strength-value" class="text-sm font-bold">87%</span> |
|
|
</div> |
|
|
<input type="range" id="signal-strength" min="0" max="100" value="87" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-accent"> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-1"> |
|
|
<label class="block text-sm">AI Aggressiveness</label> |
|
|
<span id="aggressiveness-value" class="text-sm font-bold">Medium</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-1"> |
|
|
<button class="aggressiveness-btn btn btn-xs bg-danger hover:bg-red-700 py-1" data-value="low">Low</button> |
|
|
<button class="aggressiveness-btn btn btn-xs bg-primary hover:bg-blue-700 active py-1" data-value="medium">Medium</button> |
|
|
<button class="aggressiveness-btn btn btn-xs bg-warning hover:bg-yellow-700 py-1" data-value="high">High</button> |
|
|
<button class="aggressiveness-btn btn btn-xs bg-success hover:bg-green-700 py-1" data-value="extreme">Quantum</button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-1"> |
|
|
<label class="block text-sm">Model Selection</label> |
|
|
<button class="btn btn-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-random"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex space-x-2 overflow-x-auto pb-2 scrollbar-hide"> |
|
|
<button class="model-btn btn btn-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg flex-shrink-0"> |
|
|
<i class="fas fa-brain mr-1"></i> |
|
|
<span>QuantumNet</span> |
|
|
</button> |
|
|
<button class="model-btn btn btn-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg flex-shrink-0"> |
|
|
<i class="fas fa-network-wired mr-1"></i> |
|
|
<span>NeuroLink</span> |
|
|
</button> |
|
|
<button class="model-btn btn btn-xs bg-primary hover:bg-blue-700 px-3 py-1 rounded-lg flex-shrink-0"> |
|
|
<i class="fas fa-atom mr-1"></i> |
|
|
<span>DeepQ</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="btn btn-accent flex-1 py-2 px-4 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-bolt mr-2"></i> |
|
|
<span>Optimize Now</span> |
|
|
</button> |
|
|
<button class="btn btn-success flex-1 py-2 px-4 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-save mr-2"></i> |
|
|
<span>Save</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg flex flex-col sm:flex-row items-center justify-between gap-2"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="h-8 w-8 mr-2"> |
|
|
<span class="font-bold text-xl">BTC/USDT</span> |
|
|
</div> |
|
|
<div class="flex items-center text-success"> |
|
|
<span class="font-bold text-2xl ml-1" id="current-price">42,876.45</span> |
|
|
<span class="text-sm ml-2 px-2 py-0.5 rounded" id="price-change">+2.34%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2 sm:space-x-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="hidden sm:inline">Volume:</span> |
|
|
<span class="font-bold" id="current-volume">24.5K</span> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="btn btn-sm bg-gray-700 hover:bg-gray-600 p-2 rounded-lg"> |
|
|
<i class="fas fa-indicator"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm bg-gray-700 hover:bg-gray-600 p-2 rounded-lg"> |
|
|
<i class="fas fa-drawing"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm bg-gray-700 hover:bg-gray-600 p-2 rounded-lg"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="chart-container p-4 shadow-lg"> |
|
|
|
|
|
<div class="tradingview-widget-container"> |
|
|
<div class="tradingview-widget-container__widget"></div> |
|
|
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async> |
|
|
{ |
|
|
"autosize": true, |
|
|
"symbol": "BINANCE:BTCUSDT", |
|
|
"interval": "15", |
|
|
"timezone": "Etc/UTC", |
|
|
"theme": "dark", |
|
|
"style": "1", |
|
|
"locale": "en", |
|
|
"enable_publishing": false, |
|
|
"hide_top_toolbar": true, |
|
|
"allow_symbol_change": true, |
|
|
"studies": [ |
|
|
"BB@tv-basicstudies", |
|
|
"MAExp@tv-basicstudies", |
|
|
"RSI@tv-basicstudies" |
|
|
], |
|
|
"support_host": "https://www.tradingview.com" |
|
|
} |
|
|
</script> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-robot mr-2"></i> Auto Trading Bot |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="p-4 rounded-lg bg-gray-700"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="font-bold">Bot Status</span> |
|
|
<span id="bot-status" class="px-2 py-1 rounded-full text-xs bg-danger">OFFLINE</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mt-4"> |
|
|
<button id="start-bot" class="btn btn-success hover:bg-green-600 px-3 sm:px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-play mr-1 sm:mr-2"></i> |
|
|
<span class="hidden sm:inline">Start</span> |
|
|
</button> |
|
|
<button id="stop-bot" class="btn btn-danger hover:bg-red-600 px-3 sm:px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-stop mr-1 sm:mr-2"></i> |
|
|
<span class="hidden sm:inline">Stop</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 rounded-lg bg-gray-700"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="font-bold">Trading Mode</span> |
|
|
<i class="fas fa-cog text-accent"></i> |
|
|
</div> |
|
|
<select id="trading-mode" class="w-full mt-4 bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"> |
|
|
<option>Paper Trading</option> |
|
|
<option selected>Live Trading</option> |
|
|
<option>Backtesting</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="p-4 rounded-lg bg-gray-700"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="font-bold">Today's Stats</span> |
|
|
<i class="fas fa-chart-bar text-accent"></i> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2 mt-2 text-sm"> |
|
|
<div>Trades:</div> |
|
|
<div class="font-bold" id="today-trades">12</div> |
|
|
<div>Profit:</div> |
|
|
<div class="font-bold text-success" id="today-profit">+3.2%</div> |
|
|
<div>Win Rate:</div> |
|
|
<div class="font-bold" id="today-winrate">75%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-bell mr-2"></i> Current Signal Details |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="signal-buy p-4 rounded-lg bg-gray-700"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="font-bold">BUY Signal</span> |
|
|
<span class="text-success font-bold">87% Confidence</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2 text-sm"> |
|
|
<div>Entry Price:</div> |
|
|
<div class="font-bold">$42,120.00</div> |
|
|
<div>Stop Loss:</div> |
|
|
<div class="font-bold text-danger">$40,850.00 (-3.0%)</div> |
|
|
<div>Take Profit 1:</div> |
|
|
<div class="font-bold text-success">$43,500.00 (+3.3%)</div> |
|
|
<div>Take Profit 2:</div> |
|
|
<div class="font-bold text-success">$45,200.00 (+7.3%)</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 rounded-lg bg-gray-700"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="font-bold">AI Analysis</span> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button id="refresh-analysis" class="btn btn-xs bg-gray-600 hover:bg-gray-500 p-1 rounded"> |
|
|
<i class="fas fa-sync-alt text-xs"></i> |
|
|
</button> |
|
|
<i class="fas fa-brain text-accent"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between mb-1"> |
|
|
<div class="text-sm font-bold">AI Model: QuantumNet v5 (Enhanced)</div> |
|
|
<div class="flex space-x-1"> |
|
|
<button class="btn btn-xs bg-gray-600 hover:bg-gray-500 p-1 rounded" title="Model Info"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
</button> |
|
|
<button class="btn btn-xs bg-gray-600 hover:bg-gray-500 p-1 rounded" title="Adjust Confidence"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-sm" id="ai-analysis-content"> |
|
|
<div class="flex mb-2"> |
|
|
<div class="w-1 bg-success mr-2 rounded-full"></div> |
|
|
<p>The QuantumNet v5 model identifies institutional accumulation patterns with 92% confidence.</p> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="w-1 bg-warning mr-2 rounded-full"></div> |
|
|
<p>Sentiment analysis shows retail traders are 68% fearful while institutions are accumulating.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 border-t border-gray-600 pt-3"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<button id="show-technical-details" class="btn btn-xs bg-gray-600 hover:bg-gray-500 py-1 px-2 rounded-full text-xs flex items-center"> |
|
|
<i class="fas fa-chevron-down mr-1 text-accent"></i> |
|
|
<span>Advanced Metrics</span> |
|
|
</button> |
|
|
<div class="text-xs text-gray-400">Confidence: <span class="text-success font-bold">92.7%</span></div> |
|
|
</div> |
|
|
<div id="technical-details" class="hidden mt-2"> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<div class="p-2 bg-gray-700 rounded"> |
|
|
<div class="text-xs text-gray-400 mb-1">RSI Divergence</div> |
|
|
<div class="font-bold text-success">Strong Bullish</div> |
|
|
<div class="h-1 bg-gray-600 rounded-full mt-1"> |
|
|
<div class="h-1 bg-success rounded-full" style="width: 92%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2 bg-gray-700 rounded"> |
|
|
<div class="text-xs text-gray-400 mb-1">Volume Spike</div> |
|
|
<div class="font-bold text-warning">+34%</div> |
|
|
<div class="h-1 bg-gray-600 rounded-full mt-1"> |
|
|
<div class="h-1 bg-warning rounded-full" style="width: 68%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2 bg-gray-700 rounded"> |
|
|
<div class="text-xs text-gray-400 mb-1">Order Flow</div> |
|
|
<div class="font-bold text-success">Bid Heavy</div> |
|
|
<div class="h-1 bg-gray-600 rounded-full mt-1"> |
|
|
<div class="h-1 bg-success rounded-full" style="width: 87%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2 bg-gray-700 rounded"> |
|
|
<div class="text-xs text-gray-400 mb-1">Liquidity</div> |
|
|
<div class="font-bold text-success">High</div> |
|
|
<div class="h-1 bg-gray-600 rounded-full mt-1"> |
|
|
<div class="h-1 bg-success rounded-full" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 p-2 bg-gray-700 rounded text-xs"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Model Version:</span> |
|
|
<span class="font-bold">QuantumNet v5 (Multi-Agent)</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Last Retrained:</span> |
|
|
<span class="font-bold">3 hours ago</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 rounded-lg bg-gray-700"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="font-bold">Risk Management</span> |
|
|
<i class="fas fa-shield-alt text-accent"></i> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2 text-sm"> |
|
|
<div>Position Size:</div> |
|
|
<div class="font-bold">2.5% of Portfolio</div> |
|
|
<div>Risk/Reward:</div> |
|
|
<div class="font-bold">1:2.4</div> |
|
|
<div>Volatility:</div> |
|
|
<div class="font-bold">Medium</div> |
|
|
<div>Liquidity:</div> |
|
|
<div class="font-bold">High</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-1 space-y-6"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-chart-candlestick mr-2"></i> AI Chart Analysis |
|
|
</h2> |
|
|
<div class="border-2 border-dashed border-gray-600 rounded-lg p-4 text-center mb-4" id="drop-area"> |
|
|
<input type="file" id="fileInput" accept="image/*" class="hidden" /> |
|
|
<button id="browseBtn" class="btn btn-accent px-4 py-2 mb-2"> |
|
|
<i class="fas fa-upload mr-2"></i>Upload Chart |
|
|
</button> |
|
|
<p class="text-sm text-gray-400">or drag & drop screenshot</p> |
|
|
<div class="mt-4 hidden" id="preview-container"> |
|
|
<img id="preview" class="mx-auto max-h-32 rounded-lg" /> |
|
|
<button id="analyzeBtn" class="btn btn-success mt-2 px-4 py-1 hidden"> |
|
|
<i class="fas fa-bolt mr-1"></i>Analyze |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="analysis-results" class="hidden"> |
|
|
<div class="border-t border-gray-700 pt-4 mb-4"> |
|
|
<h3 class="font-bold mb-2">Quantum Analysis:</h3> |
|
|
<div id="ai-insights" class="text-sm text-gray-300 mb-3"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-700 p-3 rounded-lg"> |
|
|
<h4 class="font-bold text-sm mb-1 text-success">Recommended Entry</h4> |
|
|
<div id="entry-point" class="font-bold text-xl"></div> |
|
|
<div class="text-xs text-gray-400">Optimal zone</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-3 rounded-lg"> |
|
|
<h4 class="font-bold text-sm mb-1 text-success">Take Profit</h4> |
|
|
<div id="take-profit" class="font-bold text-xl"></div> |
|
|
<div class="text-xs text-gray-400">Primary target</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-3 rounded-lg"> |
|
|
<h4 class="font-bold text-sm mb-1 text-danger">Stop Loss</h4> |
|
|
<div id="stop-loss" class="font-bold text-xl"></div> |
|
|
<div class="text-xs text-gray-400">Risk control</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-3 rounded-lg"> |
|
|
<h4 class="font-bold text-sm mb-1 text-accent">Confidence</h4> |
|
|
<div id="confidence-level" class="font-bold text-xl"></div> |
|
|
<div class="text-xs text-gray-400">AI certainty</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 flex space-x-2"> |
|
|
<button id="copy-trade-btn" class="btn btn-primary flex-1 py-2"> |
|
|
<i class="fas fa-copy mr-2"></i>Copy Trade |
|
|
</button> |
|
|
<button id="save-analysis-btn" class="btn btn-accent flex-1 py-2"> |
|
|
<i class="fas fa-save mr-2"></i>Save |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center justify-between"> |
|
|
<span><i class="fas fa-atom mr-2"></i> Quantum Optimizer</span> |
|
|
<div class="flex space-x-1"> |
|
|
<button class="btn btn-xs bg-gray-700 hover:bg-gray-600 p-1 rounded" title="Settings"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
<button class="btn btn-xs bg-gray-700 hover:bg-gray-600 p-1 rounded" title="Help"> |
|
|
<i class="fas fa-question"></i> |
|
|
</button> |
|
|
</div> |
|
|
</h2> |
|
|
<div class="optimizer-chart mb-4 relative"> |
|
|
<canvas id="optimizerChart"></canvas> |
|
|
<div class="absolute top-3 right-3 flex space-x-1"> |
|
|
<span class="text-xs bg-primary px-2 py-1 rounded-full">LIVE</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2 text-sm mb-4"> |
|
|
<div>Current Accuracy:</div> |
|
|
<div class="font-bold text-right flex items-center"> |
|
|
<span class="text-success">92.7%</span> |
|
|
<i class="fas fa-info-circle ml-1 text-gray-400 cursor-help" title="Historical Accuracy: 89.2%"></i> |
|
|
</div> |
|
|
<div>Optimized Accuracy:</div> |
|
|
<div class="font-bold text-right text-success">96.4%</div> |
|
|
<div>Improvement:</div> |
|
|
<div class="font-bold text-right text-success">+3.7%</div> |
|
|
<div>Execution Speed:</div> |
|
|
<div class="font-bold text-right flex items-center"> |
|
|
<span class="text-warning">42ms</span> |
|
|
<span class="text-xs text-gray-400 ml-1">(Quantum)</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="text-xs text-gray-400 mb-1">Optimization Progress</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-1.5"> |
|
|
<div class="bg-success h-1.5 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="run-optimizer" class="btn btn-accent flex-1 py-2 px-4 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-bolt mr-2"></i> |
|
|
<span>Quantum Boost</span> |
|
|
</button> |
|
|
<button class="btn btn-outline flex-1 py-2 px-4 rounded-lg flex items-center justify-center border border-accent text-accent hover:bg-accent hover:text-white"> |
|
|
<i class="fas fa-file-export mr-2"></i> |
|
|
<span>Export</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold flex items-center"> |
|
|
<i class="fas fa-bolt mr-2"></i> Live Signals |
|
|
</h2> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-xs bg-primary px-2 py-1 rounded-full">15 New</span> |
|
|
<button class="btn btn-sm bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded-full text-xs"> |
|
|
<i class="fas fa-filter"></i> |
|
|
<span class="hidden sm:inline">Filter</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-3 max-h-96 overflow-y-auto scrollbar-hide" id="signals-container"> |
|
|
<div class="signal-buy p-3 rounded-lg bg-gray-700"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="font-bold">BTC/USDT</div> |
|
|
<div class="text-xs">15m Chart • Swing Trade</div> |
|
|
</div> |
|
|
<div class="text-success font-bold">BUY</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mt-2 text-sm"> |
|
|
<div>Entry: $42,120</div> |
|
|
<div>TP1: $43,500</div> |
|
|
<button class="auto-trade-btn btn btn-success hover:bg-green-600 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-robot mr-1"></i> |
|
|
<span class="hidden sm:inline">Auto Trade</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="signal-sell p-3 rounded-lg bg-gray-700"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="font-bold">ETH/USDT</div> |
|
|
<div class="text-xs">1h Chart • Day Trade</div> |
|
|
</div> |
|
|
<div class="text-danger font-bold">SELL</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mt-2 text-sm"> |
|
|
<div>Entry: $2,345</div> |
|
|
<div>TP1: $2,280</div> |
|
|
<button class="auto-trade-btn btn btn-danger hover:bg-red-600 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-robot mr-1"></i> |
|
|
<span class="hidden sm:inline">Auto Trade</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="signal-buy p-3 rounded-lg bg-gray-700"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="font-bold">AAPL</div> |
|
|
<div class="text-xs">4h Chart • Swing Trade</div> |
|
|
</div> |
|
|
<div class="text-success font-bold">BUY</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mt-2 text-sm"> |
|
|
<div>Entry: $175.20</div> |
|
|
<div>TP1: $182.50</div> |
|
|
<button class="auto-trade-btn btn btn-success hover:bg-green-600 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-robot mr-1"></i> |
|
|
<span class="hidden sm:inline">Auto Trade</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="signal-buy p-3 rounded-lg bg-gray-700"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="font-bold">EUR/USD</div> |
|
|
<div class="text-xs">1d Chart • Position Trade</div> |
|
|
</div> |
|
|
<div class="text-success font-bold">BUY</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mt-2 text-sm"> |
|
|
<div>Entry: 1.0950</div> |
|
|
<div>TP1: 1.1120</div> |
|
|
<button class="auto-trade-btn btn btn-success hover:bg-green-600 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-robot mr-1"></i> |
|
|
<span class="hidden sm:inline">Auto Trade</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="signal-sell p-3 rounded-lg bg-gray-700"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="font-bold">TSLA</div> |
|
|
<div class="text-xs">1h Chart • Day Trade</div> |
|
|
</div> |
|
|
<div class="text-danger font-bold">SELL</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mt-2 text-sm"> |
|
|
<div>Entry: $265.75</div> |
|
|
<div>TP1: $258.30</div> |
|
|
<button class="auto-trade-btn btn btn-danger hover:bg-red-600 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-robot mr-1"></i> |
|
|
<span class="hidden sm:inline">Auto Trade</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-trophy mr-2"></i> Strategy Performance |
|
|
</h2> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-700 p-3 rounded-lg"> |
|
|
<div class="text-sm mb-1">Win Rate</div> |
|
|
<div class="text-2xl font-bold text-success">72.4%</div> |
|
|
<div class="text-xs text-gray-400">Last 30 Days</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-3 rounded-lg"> |
|
|
<div class="text-sm mb-1">Avg Profit</div> |
|
|
<div class="text-2xl font-bold text-success">+3.2%</div> |
|
|
<div class="text-xs text-gray-400">Per Trade</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-3 rounded-lg"> |
|
|
<div class="text-sm mb-1">Max Drawdown</div> |
|
|
<div class="text-2xl font-bold text-danger">-8.7%</div> |
|
|
<div class="text-xs text-gray-400">Last 90 Days</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-3 rounded-lg"> |
|
|
<div class="text-sm mb-1">Sharpe Ratio</div> |
|
|
<div class="text-2xl font-bold text-success">2.1</div> |
|
|
<div class="text-xs text-gray-400">Risk Adjusted</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold flex items-center"> |
|
|
<i class="fas fa-newspaper mr-2"></i> Market Sentiment |
|
|
</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="sentiment-filter-btn btn btn-xs bg-primary hover:bg-blue-800 px-2 py-1 rounded text-xs" data-filter="all"> |
|
|
All |
|
|
</button> |
|
|
<button class="sentiment-filter-btn btn btn-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs" data-filter="bullish"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> |
|
|
</button> |
|
|
<button class="sentiment-filter-btn btn btn-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs" data-filter="bearish"> |
|
|
<i class="fas fa-arrow-down mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-3" id="sentiment-items"> |
|
|
<div class="sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg" data-sentiment="bullish" onclick="showSentimentDetail('Fed Signals Potential Rate Pause', 'bullish', 'The Federal Reserve has indicated a possible pause in rate hikes for their next meeting, signaling potential relief for markets.')"> |
|
|
<div class="bg-success p-2 rounded-full"> |
|
|
<i class="fas fa-bullhorn text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Fed Signals Potential Rate Pause</div> |
|
|
<div class="text-xs text-gray-400">2 hours ago • Bullish</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg" data-sentiment="bearish" onclick="showSentimentDetail('Binance Regulatory Concerns', 'bearish', 'Increased regulatory scrutiny on Binance has raised concerns about potential impacts on crypto market liquidity.')"> |
|
|
<div class="bg-danger p-2 rounded-full"> |
|
|
<i class="fas fa-exclamation-triangle text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Binance Regulatory Concerns</div> |
|
|
<div class="text-xs text-gray-400">4 hours ago • Bearish</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg" data-sentiment="bullish" onclick="showSentimentDetail('Bitcoin ETF Approval Odds Increase', 'bullish', 'Analysts are increasing their odds of SEC approval for a spot Bitcoin ETF following new filings from major asset managers.')"> |
|
|
<div class="bg-success p-2 rounded-full"> |
|
|
<i class="fas fa-chart-line text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Bitcoin ETF Approval Odds Increase</div> |
|
|
<div class="text-xs text-gray-400">6 hours ago • Bullish</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-dark py-3 px-6 border-t border-gray-800"> |
|
|
<div class="flex flex-col sm:flex-row justify-between items-center text-sm text-gray-400 gap-2"> |
|
|
<div> |
|
|
<span>QuantumTrade AI v4.2.1</span> |
|
|
<span class="mx-2 hidden sm:inline">•</span> |
|
|
<span>Last Updated: <span id="current-time"></span></span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="hidden sm:inline">Server Load: <span id="server-load">24%</span></span> |
|
|
<span>Latency: <span id="server-latency">38ms</span></span> |
|
|
<button class="text-accent hover:text-blue-400"> |
|
|
<i class="fas fa-question-circle"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('browseBtn').addEventListener('click', function() { |
|
|
document.getElementById('fileInput').click(); |
|
|
}); |
|
|
|
|
|
const dropArea = document.getElementById('drop-area'); |
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
dropArea.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
dropArea.addEventListener(eventName, highlight, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
dropArea.addEventListener(eventName, unhighlight, false); |
|
|
}); |
|
|
|
|
|
dropArea.addEventListener('drop', handleDrop, false); |
|
|
document.getElementById('fileInput').addEventListener('change', handleFiles, false); |
|
|
|
|
|
function highlight() { |
|
|
dropArea.classList.add('border-accent'); |
|
|
} |
|
|
|
|
|
function unhighlight() { |
|
|
dropArea.classList.remove('border-accent'); |
|
|
} |
|
|
|
|
|
function handleDrop(e) { |
|
|
const dt = e.dataTransfer; |
|
|
const files = dt.files; |
|
|
handleFiles({target: {files}}); |
|
|
} |
|
|
|
|
|
function handleFiles(e) { |
|
|
const file = e.target.files[0]; |
|
|
if (file && file.type.match('image.*')) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
const preview = document.getElementById('preview'); |
|
|
preview.src = e.target.result; |
|
|
document.getElementById('preview-container').classList.remove('hidden'); |
|
|
document.getElementById('analyzeBtn').classList.remove('hidden'); |
|
|
} |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
} |
|
|
|
|
|
document.getElementById('analyzeBtn').addEventListener('click', function() { |
|
|
|
|
|
const analyzeBtn = this; |
|
|
analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Analyzing...'; |
|
|
analyzeBtn.disabled = true; |
|
|
|
|
|
|
|
|
try { |
|
|
const tvWidget = document.querySelector('.tradingview-widget-container iframe'); |
|
|
if (!tvWidget) { |
|
|
throw new Error('TradingView widget not loaded'); |
|
|
} |
|
|
|
|
|
const activeTimeframe = document.querySelector('button.timeframe-btn.active').textContent; |
|
|
const timeframeMap = { |
|
|
'1m': '1', |
|
|
'5m': '5', |
|
|
'15m': '15', |
|
|
'1h': '60', |
|
|
'4h': '240', |
|
|
'1d': '1D', |
|
|
'1w': '1W', |
|
|
'1M': '1M' |
|
|
}; |
|
|
|
|
|
tvWidget.contentWindow.postMessage({ |
|
|
name: 'exportData', |
|
|
interval: timeframeMap[activeTimeframe] || '15', |
|
|
}, '*'); |
|
|
|
|
|
|
|
|
const timeout = setTimeout(() => { |
|
|
window.removeEventListener('message', tradingViewDataHandler); |
|
|
displayAnalysisFromSimulatedData(); |
|
|
analyzeBtn.innerHTML = '<i class="fas fa-bolt mr-1"></i>Analyze'; |
|
|
analyzeBtn.disabled = false; |
|
|
}, 3000); |
|
|
|
|
|
|
|
|
function tradingViewDataHandler(event) { |
|
|
if (event.data && event.data.name === 'exportDataResponse') { |
|
|
clearTimeout(timeout); |
|
|
const data = event.data.data; |
|
|
const currentPrice = data.close[data.close.length - 1]; |
|
|
const recentLow = Math.min(...data.low.slice(-20)); |
|
|
const recentHigh = Math.max(...data.high.slice(-20)); |
|
|
|
|
|
|
|
|
const prices = { |
|
|
entry: currentPrice.toFixed(2), |
|
|
tp: (currentPrice * 1.03).toFixed(2), |
|
|
sl: (recentLow * 0.99).toFixed(2), |
|
|
confidence: Math.min(95, Math.floor( |
|
|
((currentPrice - recentLow) / (recentHigh - recentLow)) * 100 |
|
|
)) |
|
|
}; |
|
|
|
|
|
|
|
|
let analysis = []; |
|
|
|
|
|
|
|
|
if (currentPrice > recentHigh * 0.95) { |
|
|
analysis.push("The QuantumNet model detects strong bullish momentum approaching recent highs."); |
|
|
} else if (currentPrice < recentLow * 1.05) { |
|
|
analysis.push("The chart shows prices testing recent lows, indicating potential support zone."); |
|
|
} else { |
|
|
analysis.push("Price is consolidating within its recent range, waiting for breakout confirmation."); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('ai-insights').innerHTML = ` |
|
|
<p>Current price: ${prices.entry} | Recent range: ${recentLow.toFixed(2)}-${recentHigh.toFixed(2)}</p> |
|
|
${analysis.map(a => `<p>${a}</p>`).join('')} |
|
|
`; |
|
|
document.getElementById('entry-point').textContent = `${prices.entry} (Current)`; |
|
|
document.getElementById('take-profit').textContent = `${prices.tp} (+${((prices.tp/prices.entry-1)*100).toFixed(1)}%)`; |
|
|
document.getElementById('stop-loss').textContent = `${prices.sl} (${((prices.sl/prices.entry-1)*100).toFixed(1)}%)`; |
|
|
document.getElementById('confidence-level').textContent = `${prices.confidence}%`; |
|
|
|
|
|
|
|
|
document.getElementById('analysis-results').classList.remove('hidden'); |
|
|
analyzeBtn.innerHTML = '<i class="fas fa-check mr-1"></i>Analysis Complete'; |
|
|
analyzeBtn.disabled = false; |
|
|
|
|
|
|
|
|
window.removeEventListener('message', tradingViewDataHandler); |
|
|
|
|
|
|
|
|
showTradeNotification("Chart analysis complete! AI has identified profitable trade setups.", true); |
|
|
} |
|
|
} |
|
|
|
|
|
window.addEventListener('message', tradingViewDataHandler); |
|
|
} catch (error) { |
|
|
console.error("Error analyzing chart:", error); |
|
|
displayAnalysisFromSimulatedData(); |
|
|
analyzeBtn.innerHTML = '<i class="fas fa-bolt mr-1"></i>Analyze'; |
|
|
analyzeBtn.disabled = false; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const prices = { |
|
|
entry: currentPrice.toFixed(2), |
|
|
tp: (currentPrice * 1.03).toFixed(2), |
|
|
sl: (recentLow * 0.99).toFixed(2), |
|
|
confidence: Math.min(95, Math.floor( |
|
|
((currentPrice - recentLow) / (recentHigh - recentLow)) * 100 |
|
|
)) |
|
|
}; |
|
|
|
|
|
|
|
|
function displayAnalysisFromSimulatedData() { |
|
|
|
|
|
const currentPrice = parseFloat(document.getElementById('current-price').textContent.replace(/,/g, '')); |
|
|
const recentLow = currentPrice * 0.97; |
|
|
const recentHigh = currentPrice * 1.03; |
|
|
|
|
|
const prices = { |
|
|
entry: currentPrice.toFixed(2), |
|
|
tp: (currentPrice * 1.03).toFixed(2), |
|
|
sl: (recentLow * 0.99).toFixed(2), |
|
|
confidence: Math.floor(70 + Math.random() * 25) |
|
|
}; |
|
|
|
|
|
|
|
|
const analysis = [ |
|
|
"Quantum analysis detected potential trading opportunity.", |
|
|
"Price shows technical patterns matching historical profitable setups." |
|
|
]; |
|
|
|
|
|
|
|
|
document.getElementById('ai-insights').innerHTML = ` |
|
|
<p>Current price: ${prices.entry} | Simulated range: ${recentLow.toFixed(2)}-${recentHigh.toFixed(2)}</p> |
|
|
${analysis.map(a => `<p>${a}</p>`).join('')} |
|
|
`; |
|
|
document.getElementById('entry-point').textContent = `${prices.entry} (Current)`; |
|
|
document.getElementById('take-profit').textContent = `${prices.tp} (+${((prices.tp/prices.entry-1)*100).toFixed(1)}%)`; |
|
|
document.getElementById('stop-loss').textContent = `${prices.sl} (${((prices.sl/prices.entry-1)*100).toFixed(1)}%)`; |
|
|
document.getElementById('confidence-level').textContent = `${prices.confidence}%`; |
|
|
|
|
|
document.getElementById('analysis-results').classList.remove('hidden'); |
|
|
showTradeNotification("Analysis completed with simulated data", true); |
|
|
} |
|
|
|
|
|
document.getElementById('copy-trade-btn').addEventListener('click', function() { |
|
|
const entry = document.getElementById('entry-point').textContent; |
|
|
const tp = document.getElementById('take-profit').textContent; |
|
|
const sl = document.getElementById('stop-loss').textContent; |
|
|
|
|
|
|
|
|
showTradeNotification(`Trade copied: Entry ${entry}, TP ${tp}, SL ${sl}`, true); |
|
|
}); |
|
|
|
|
|
document.getElementById('save-analysis-btn').addEventListener('click', function() { |
|
|
|
|
|
showTradeNotification("Analysis saved to your trade journal", true); |
|
|
}); |
|
|
|
|
|
|
|
|
function executeTrade(symbol, action, entryPrice) { |
|
|
return new Promise((resolve) => { |
|
|
setTimeout(() => { |
|
|
const isSuccess = Math.random() > 0.1; |
|
|
const priceImpact = (Math.random() * 0.2).toFixed(2); |
|
|
|
|
|
const executedPrice = action === 'BUY' |
|
|
? (parseFloat(entryPrice) * (1 + parseFloat(priceImpact)/100)).toFixed(2) |
|
|
: (parseFloat(entryPrice) * (1 - parseFloat(priceImpact)/100)).toFixed(2); |
|
|
|
|
|
resolve({ |
|
|
success: isSuccess, |
|
|
action, |
|
|
symbol, |
|
|
requestedPrice: entryPrice, |
|
|
executedPrice, |
|
|
timestamp: new Date().toISOString() |
|
|
}); |
|
|
}, 1000); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const ctx = document.getElementById('optimizerChart').getContext('2d'); |
|
|
const optimizerChart = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Before', 'After'], |
|
|
datasets: [{ |
|
|
label: 'Signal Accuracy', |
|
|
data: [82.7, 89.3], |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.2)', |
|
|
borderColor: 'rgba(59, 130, 246, 1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.1, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
min: 80, |
|
|
max: 100 |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function updateTime() { |
|
|
const now = new Date(); |
|
|
const timeString = now.toLocaleTimeString(); |
|
|
document.getElementById('current-time').textContent = timeString; |
|
|
} |
|
|
setInterval(updateTime, 1000); |
|
|
updateTime(); |
|
|
|
|
|
|
|
|
function updatePrice() { |
|
|
|
|
|
const basePrice = 105450.00; |
|
|
const change = (Math.random() - 0.5) * 200; |
|
|
const newPrice = basePrice + change; |
|
|
const percentChange = (change / basePrice * 100).toFixed(2); |
|
|
|
|
|
document.getElementById('current-price').textContent = newPrice.toFixed(2); |
|
|
|
|
|
const priceChangeElement = document.getElementById('price-change'); |
|
|
if (change >= 0) { |
|
|
priceChangeElement.textContent = `+${percentChange}%`; |
|
|
priceChangeElement.className = 'text-sm ml-2 px-2 py-0.5 rounded text-success bg-green-900 bg-opacity-40'; |
|
|
} else { |
|
|
priceChangeElement.textContent = `${percentChange}%`; |
|
|
priceChangeElement.className = 'text-sm ml-2 px-2 py-0.5 rounded text-danger bg-red-900 bg-opacity-40'; |
|
|
} |
|
|
|
|
|
|
|
|
const baseVolume = 24500; |
|
|
const volumeChange = (Math.random() - 0.3) * 5000; |
|
|
const newVolume = baseVolume + volumeChange; |
|
|
document.getElementById('current-volume').textContent = `${(newVolume/1000).toFixed(1)}K`; |
|
|
|
|
|
|
|
|
document.getElementById('server-load').textContent = `${Math.floor(Math.random() * 30) + 10}%`; |
|
|
document.getElementById('server-latency').textContent = `${Math.floor(Math.random() * 50) + 20}ms`; |
|
|
} |
|
|
setInterval(updatePrice, 3000); |
|
|
updatePrice(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.asset-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
document.querySelectorAll('.asset-btn').forEach(b => b.classList.remove('active', 'bg-primary')); |
|
|
document.querySelectorAll('.asset-btn').forEach(b => b.classList.add('bg-gray-700')); |
|
|
this.classList.remove('bg-gray-700'); |
|
|
this.classList.add('active', 'bg-primary'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.timeframe-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
document.querySelectorAll('.timeframe-btn').forEach(b => b.classList.remove('active', 'bg-primary')); |
|
|
document.querySelectorAll('.timeframe-btn').forEach(b => b.classList.add('bg-gray-700')); |
|
|
this.classList.remove('bg-gray-700'); |
|
|
this.classList.add('active', 'bg-primary'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.style-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active', 'bg-primary')); |
|
|
document.querySelectorAll('.style-btn').forEach(b => b.classList.add('bg-gray-700')); |
|
|
this.classList.remove('bg-gray-700'); |
|
|
this.classList.add('active', 'bg-primary'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('start-bot').addEventListener('click', function() { |
|
|
const statusElement = document.getElementById('bot-status'); |
|
|
statusElement.textContent = 'ACTIVE'; |
|
|
statusElement.classList.remove('bg-danger'); |
|
|
statusElement.classList.add('bg-success', 'bot-status-active'); |
|
|
|
|
|
|
|
|
document.getElementById('today-trades').textContent = '0'; |
|
|
document.getElementById('today-profit').textContent = '+0.0%'; |
|
|
document.getElementById('today-winrate').textContent = '0%'; |
|
|
|
|
|
|
|
|
let trades = 0; |
|
|
let profit = 0; |
|
|
let wins = 0; |
|
|
|
|
|
const botInterval = setInterval(() => { |
|
|
trades++; |
|
|
const tradeProfit = (Math.random() * 2).toFixed(2); |
|
|
const isWin = Math.random() > 0.3; |
|
|
|
|
|
if (isWin) { |
|
|
profit += parseFloat(tradeProfit); |
|
|
wins++; |
|
|
} else { |
|
|
profit -= parseFloat(tradeProfit); |
|
|
} |
|
|
|
|
|
document.getElementById('today-trades').textContent = trades; |
|
|
document.getElementById('today-profit').textContent = `${profit >= 0 ? '+' : ''}${profit.toFixed(2)}%`; |
|
|
document.getElementById('today-winrate').textContent = `${Math.round((wins / trades) * 100)}%`; |
|
|
}, 5000); |
|
|
|
|
|
|
|
|
this.dataset.interval = botInterval; |
|
|
}); |
|
|
|
|
|
document.getElementById('stop-bot').addEventListener('click', function() { |
|
|
const statusElement = document.getElementById('bot-status'); |
|
|
statusElement.textContent = 'OFFLINE'; |
|
|
statusElement.classList.remove('bg-success', 'bot-status-active'); |
|
|
statusElement.classList.add('bg-danger'); |
|
|
|
|
|
|
|
|
const startButton = document.getElementById('start-bot'); |
|
|
if (startButton.dataset.interval) { |
|
|
clearInterval(parseInt(startButton.dataset.interval)); |
|
|
delete startButton.dataset.interval; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('run-optimizer').addEventListener('click', function() { |
|
|
const button = this; |
|
|
const originalText = button.innerHTML; |
|
|
|
|
|
|
|
|
button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Optimizing...'; |
|
|
button.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const improvement = (Math.random() * 10).toFixed(1); |
|
|
const newAccuracy = 82.7 + parseFloat(improvement); |
|
|
|
|
|
optimizerChart.data.datasets[0].data = [82.7, newAccuracy]; |
|
|
optimizerChart.update(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.optimizer-chart + div div:nth-child(2)').forEach(el => { |
|
|
el.textContent = `${newAccuracy.toFixed(1)}%`; |
|
|
}); |
|
|
document.querySelectorAll('.optimizer-chart + div div:nth-child(4)').forEach(el => { |
|
|
el.textContent = `+${improvement}%`; |
|
|
}); |
|
|
|
|
|
|
|
|
button.innerHTML = originalText; |
|
|
button.disabled = false; |
|
|
|
|
|
|
|
|
const notification = document.createElement('div'); |
|
|
notification.className = 'fixed bottom-4 right-4 bg-success text-white px-4 py-2 rounded-lg shadow-lg'; |
|
|
notification.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Optimization complete! Signal accuracy improved.'; |
|
|
document.body.appendChild(notification); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.remove(); |
|
|
}, 3000); |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('exchange-select').addEventListener('change', function() { |
|
|
const mt5Fields = document.getElementById('mt5-fields'); |
|
|
if (this.value === 'metatrader5') { |
|
|
mt5Fields.classList.remove('hidden'); |
|
|
} else { |
|
|
mt5Fields.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('connect-exchange-btn').addEventListener('click', function() { |
|
|
document.getElementById('exchange-connect-modal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('exchange-connect-cancel').addEventListener('click', function() { |
|
|
document.getElementById('exchange-connect-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('exchange-connect-submit').addEventListener('click', async function() { |
|
|
const exchange = document.getElementById('exchange-select').value; |
|
|
const apiKey = document.getElementById('api-key').value; |
|
|
const apiSecret = document.getElementById('api-secret').value; |
|
|
|
|
|
if (!apiKey || !apiSecret) { |
|
|
alert('Please enter both API Key and Secret'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Connecting...'; |
|
|
this.disabled = true; |
|
|
|
|
|
try { |
|
|
|
|
|
if (exchange === 'metatrader5') { |
|
|
|
|
|
alert('For MetaTrader 5, please also specify server and login credentials in your broker app'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1500)); |
|
|
|
|
|
|
|
|
document.getElementById('exchange-connect-modal').classList.add('hidden'); |
|
|
const connectBtn = document.getElementById('connect-exchange-btn'); |
|
|
connectBtn.innerHTML = ` |
|
|
<span class="btn-text">Connected to ${exchange}</span> |
|
|
<i class="fas fa-check-circle btn-icon"></i> |
|
|
`; |
|
|
connectBtn.classList.add('bg-success', 'hover:bg-success'); |
|
|
connectBtn.classList.remove('btn-primary'); |
|
|
|
|
|
|
|
|
localStorage.setItem('exchangeConnection', JSON.stringify({ |
|
|
exchange, |
|
|
connected: true, |
|
|
timestamp: new Date().toISOString() |
|
|
})); |
|
|
} catch (error) { |
|
|
alert('Connection failed: ' + (error.message || 'Invalid API credentials')); |
|
|
this.innerHTML = 'Connect'; |
|
|
this.disabled = false; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const savedConnection = localStorage.getItem('exchangeConnection'); |
|
|
if (savedConnection) { |
|
|
const { exchange, connected } = JSON.parse(savedConnection); |
|
|
if (connected) { |
|
|
const connectBtn = document.getElementById('connect-exchange-btn'); |
|
|
connectBtn.innerHTML = ` |
|
|
<span class="btn-text">Connected to ${exchange}</span> |
|
|
<i class="fas fa-check-circle btn-icon"></i> |
|
|
`; |
|
|
connectBtn.classList.add('bg-success', 'hover:bg-success'); |
|
|
connectBtn.classList.remove('btn-primary'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function showTradeNotification(message, isSuccess) { |
|
|
const notification = document.createElement('div'); |
|
|
notification.className = `fixed bottom-4 right-4 ${ |
|
|
isSuccess ? 'bg-success' : 'bg-danger' |
|
|
} text-white px-4 py-2 rounded-lg shadow-lg flex items-center`; |
|
|
notification.innerHTML = ` |
|
|
<i class="fas fa-${isSuccess ? 'check-circle' : 'exclamation-triangle'} mr-2"></i> |
|
|
${message} |
|
|
`; |
|
|
document.body.appendChild(notification); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.remove(); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
|
|
|
const symbols = ['BTC/USDT', 'ETH/USDT', 'AAPL', 'EUR/USD', 'TSLA', 'MSFT', 'XAU/USD', 'AMZN']; |
|
|
const timeframes = ['1m', '5m', '15m', '1h', '4h', '1d']; |
|
|
const strategies = ['Scalping', 'Day Trade', 'Swing Trade', 'Position Trade']; |
|
|
|
|
|
function updateSignals() { |
|
|
const container = document.getElementById('signals-container'); |
|
|
|
|
|
|
|
|
if (Math.random() > 0.7 && container.children.length > 3) { |
|
|
const indexToRemove = Math.floor(Math.random() * container.children.length); |
|
|
container.removeChild(container.children[indexToRemove]); |
|
|
} |
|
|
|
|
|
|
|
|
if (Math.random() > 0.5) { |
|
|
const symbol = symbols[Math.floor(Math.random() * symbols.length)]; |
|
|
const timeframe = timeframes[Math.floor(Math.random() * timeframes.length)]; |
|
|
const strategy = strategies[Math.floor(Math.random() * strategies.length)]; |
|
|
const isBuy = Math.random() > 0.4; |
|
|
|
|
|
const price = isBuy ? |
|
|
(Math.random() * 50000).toFixed(2) : |
|
|
(Math.random() * 1000).toFixed(2); |
|
|
const tp1 = isBuy ? |
|
|
(parseFloat(price) * 1.03).toFixed(2) : |
|
|
(parseFloat(price) * 0.98).toFixed(2); |
|
|
|
|
|
const signal = document.createElement('div'); |
|
|
signal.className = isBuy ? 'signal-buy p-3 rounded-lg bg-gray-700' : 'signal-sell p-3 rounded-lg bg-gray-700'; |
|
|
signal.innerHTML = ` |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="font-bold">${symbol}</div> |
|
|
<div class="text-xs">${timeframe} Chart • ${strategy}</div> |
|
|
</div> |
|
|
<div class="${isBuy ? 'text-success' : 'text-danger'} font-bold">${isBuy ? 'BUY' : 'SELL'}</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mt-2 text-sm"> |
|
|
<div>Entry: $${price}</div> |
|
|
<div>TP1: $${tp1}</div> |
|
|
<button class="btn ${isBuy ? 'btn-success hover:bg-green-600' : 'btn-danger hover:bg-red-600'} px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-robot mr-1"></i> |
|
|
<span class="hidden sm:inline">Auto Trade</span> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
container.insertBefore(signal, container.firstChild); |
|
|
|
|
|
|
|
|
const counter = document.querySelector('.bg-primary.text-xs'); |
|
|
if (counter) { |
|
|
const currentCount = parseInt(counter.textContent); |
|
|
counter.textContent = `${currentCount + 1} New`; |
|
|
} |
|
|
} |
|
|
} |
|
|
setInterval(updateSignals, 8000); |
|
|
</script> |
|
|
|
|
|
|
|
|
<div id="sentiment-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-gray-800 rounded-lg p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 id="sentiment-title" class="text-xl font-bold"></h3> |
|
|
<button onclick="closeSentimentDetail()" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div id="sentiment-icon" class="p-2 rounded-full mr-3"> |
|
|
<i id="sentiment-icon-inner" class="fas"></i> |
|
|
</div> |
|
|
<span id="sentiment-type" class="font-bold"></span> |
|
|
</div> |
|
|
<p id="sentiment-description" class="mb-6 text-gray-300"></p> |
|
|
<div class="flex justify-end"> |
|
|
<button onclick="closeSentimentDetail()" class="btn btn-primary px-4 py-2">Close</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let activeModel = 'QuantumNet'; |
|
|
|
|
|
|
|
|
document.getElementById('show-technical-details').addEventListener('click', function() { |
|
|
const details = document.getElementById('technical-details'); |
|
|
const icon = this.querySelector('i'); |
|
|
|
|
|
details.classList.toggle('hidden'); |
|
|
icon.classList.toggle('fa-chevron-down'); |
|
|
icon.classList.toggle('fa-chevron-up'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.model-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
document.querySelectorAll('.model-btn').forEach(b => { |
|
|
b.classList.remove('bg-primary', 'hover:bg-blue-700'); |
|
|
b.classList.add('bg-gray-700', 'hover:bg-gray-600'); |
|
|
}); |
|
|
this.classList.add('bg-primary', 'hover:bg-blue-700'); |
|
|
this.classList.remove('bg-gray-700', 'hover:bg-gray-600'); |
|
|
activeModel = this.querySelector('span').textContent; |
|
|
updateModelBadge(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.aggressiveness-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
document.querySelectorAll('.aggressiveness-btn').forEach(b => b.classList.remove('active')); |
|
|
this.classList.add('active'); |
|
|
document.getElementById('aggressiveness-value').textContent = |
|
|
this.dataset.value.charAt(0).toUpperCase() + this.dataset.value.slice(1); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('signal-strength').addEventListener('input', function() { |
|
|
document.getElementById('signal-strength-value').textContent = `${this.value}%`; |
|
|
}); |
|
|
|
|
|
|
|
|
function updateModelBadge() { |
|
|
const badges = { |
|
|
'QuantumNet': { color: 'bg-primary', icon: 'fa-atom' }, |
|
|
'NeuroLink': { color: 'bg-purple-600', icon: 'fa-network-wired' }, |
|
|
'DeepQ': { color: 'bg-green-600', icon: 'fa-brain' } |
|
|
}; |
|
|
|
|
|
const badge = document.getElementById('active-model-badge'); |
|
|
if (badge) { |
|
|
badge.className = `${badges[activeModel].color} text-xs px-2 py-1 rounded-full flex items-center`; |
|
|
badge.innerHTML = `<i class="fas ${badges[activeModel].icon} mr-1"></i>${activeModel}`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('run-optimizer').addEventListener('click', function() { |
|
|
const button = this; |
|
|
const originalHTML = button.innerHTML; |
|
|
|
|
|
button.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<div class="w-4 h-4 border-2 border-white border-opacity-50 border-t-transparent rounded-full animate-spin mr-2"></div> |
|
|
<span>Quantum Processing...</span> |
|
|
</div> |
|
|
`; |
|
|
button.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const current = (Math.random() * 5 + 92).toFixed(1); |
|
|
const optimized = (Math.random() * 3 + parseFloat(current)).toFixed(1); |
|
|
const improvement = (optimized - current).toFixed(1); |
|
|
|
|
|
|
|
|
optimizerChart.data.datasets[0].data = [current, optimized]; |
|
|
optimizerChart.update(); |
|
|
|
|
|
document.querySelectorAll('.optimizer-chart + div div:nth-child(2)').forEach(el => { |
|
|
el.textContent = `${current}%`; |
|
|
}); |
|
|
document.querySelectorAll('.optimizer-chart + div div:nth-child(4)').forEach(el => { |
|
|
el.textContent = `${optimized}%`; |
|
|
}); |
|
|
document.querySelectorAll('.optimizer-chart + div div:nth-child(6)').forEach(el => { |
|
|
el.textContent = `+${improvement}%`; |
|
|
}); |
|
|
|
|
|
|
|
|
button.innerHTML = originalHTML; |
|
|
button.disabled = false; |
|
|
|
|
|
|
|
|
showQuantumEffect(); |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
function showQuantumEffect() { |
|
|
const effect = document.createElement('div'); |
|
|
effect.className = 'fixed inset-0 flex items-center justify-center pointer-events-none'; |
|
|
effect.innerHTML = ` |
|
|
<div class="absolute w-64 h-64 rounded-full bg-accent bg-opacity-10" |
|
|
style="animation: quantumPulse 1.5s forwards"></div> |
|
|
<div class="flex items-center justify-center text-white text-xl font-bold"> |
|
|
<i class="fas fa-atom mr-2 animate-spin"></i> |
|
|
Quantum Optimization Complete |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(effect); |
|
|
|
|
|
setTimeout(() => { |
|
|
effect.remove(); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes quantumPulse { |
|
|
0% { transform: scale(0.5); opacity: 1; } |
|
|
100% { transform: scale(3); opacity: 0; } |
|
|
} |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const analysisContent = document.getElementById('ai-analysis-content'); |
|
|
analysisContent.innerHTML = ` |
|
|
<p class="mb-2">${analyses[Math.floor(Math.random() * analyses.length)]}</p> |
|
|
<p>${analyses[Math.floor(Math.random() * analyses.length)]}</p> |
|
|
`; |
|
|
|
|
|
|
|
|
const techDetails = document.getElementById('technical-details'); |
|
|
techDetails.innerHTML = ` |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<div>RSI:</div> |
|
|
<div class="font-bold text-right">${indicators[Math.floor(Math.random() * indicators.length)]}</div> |
|
|
<div>MACD:</div> |
|
|
<div class="font-bold text-right">${indicators[Math.floor(Math.random() * indicators.length)]}</div> |
|
|
<div>Volume:</div> |
|
|
<div class="font-bold text-right">${indicators[Math.floor(Math.random() * indicators.length)]}</div> |
|
|
<div>Order Flow:</div> |
|
|
<div class="font-bold text-right">${indicators[Math.floor(Math.random() * indicators.length)]}</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
this.classList.remove('animate-spin'); |
|
|
|
|
|
|
|
|
showTradeNotification("Analysis refreshed with latest market data", true); |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.sentiment-filter-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const filter = this.dataset.filter; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.sentiment-filter-btn').forEach(b => { |
|
|
b.classList.remove('bg-primary'); |
|
|
b.classList.add('bg-gray-700'); |
|
|
}); |
|
|
this.classList.add('bg-primary'); |
|
|
this.classList.remove('bg-gray-700'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.sentiment-item').forEach(item => { |
|
|
if (filter === 'all' || item.dataset.sentiment === filter) { |
|
|
item.classList.remove('hidden'); |
|
|
} else { |
|
|
item.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function showSentimentDetail(title, type, description) { |
|
|
const modal = document.getElementById('sentiment-detail-modal'); |
|
|
const icon = document.getElementById('sentiment-icon'); |
|
|
const iconInner = document.getElementById('sentiment-icon-inner'); |
|
|
|
|
|
document.getElementById('sentiment-title').textContent = title; |
|
|
document.getElementById('sentiment-type').textContent = type.charAt(0).toUpperCase() + type.slice(1); |
|
|
document.getElementById('sentiment-description').textContent = description; |
|
|
|
|
|
|
|
|
if (type === 'bullish') { |
|
|
icon.className = 'p-2 rounded-full mr-3 bg-success'; |
|
|
iconInner.className = 'fas fa-arrow-up'; |
|
|
} else { |
|
|
icon.className = 'p-2 rounded-full mr-3 bg-danger'; |
|
|
iconInner.className = 'fas fa-arrow-down'; |
|
|
} |
|
|
|
|
|
modal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeSentimentDetail() { |
|
|
document.getElementById('sentiment-detail-modal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const sentiments = ['bullish', 'bearish']; |
|
|
const titles = [ |
|
|
'Institutional Bitcoin Buying Increases', |
|
|
'New Crypto Regulations Proposed', |
|
|
'Ethereum Network Activity Spikes', |
|
|
'Market Liquidity Concerns Grow', |
|
|
'Fed Chair Comments Boost Markets' |
|
|
]; |
|
|
const icons = ['bullhorn', 'chart-line', 'exclamation-triangle', 'university', 'balance-scale']; |
|
|
const descriptions = [ |
|
|
'Large institutional investors are increasing their Bitcoin exposure according to recent filings.', |
|
|
'New regulatory proposals could impact crypto exchange operations in multiple jurisdictions.', |
|
|
'Ethereum network activity has surged to 6-month highs according to on-chain data.', |
|
|
'Analysts warn of decreasing liquidity in some altcoin markets.', |
|
|
'Positive remarks from the Federal Reserve chairman sparked a market rally across assets.' |
|
|
]; |
|
|
|
|
|
const randomIndex = Math.floor(Math.random() * titles.length); |
|
|
const sentiment = sentiments[Math.floor(Math.random() * sentiments.length)]; |
|
|
const icon = icons[Math.floor(Math.random() * icons.length)]; |
|
|
|
|
|
const newItem = document.createElement('div'); |
|
|
newItem.className = `sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg`; |
|
|
newItem.dataset.sentiment = sentiment; |
|
|
newItem.setAttribute('onclick', `showSentimentDetail('${titles[randomIndex]}', '${sentiment}', '${descriptions[randomIndex]}')`); |
|
|
newItem.innerHTML = ` |
|
|
<div class="bg-${sentiment === 'bullish' ? 'success' : 'danger'} p-2 rounded-full"> |
|
|
<i class="fas fa-${icon} text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">${titles[randomIndex]}</div> |
|
|
<div class="text-xs text-gray-400">Just now • ${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)}</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
const container = document.getElementById('sentiment-items'); |
|
|
container.insertBefore(newItem, container.firstChild); |
|
|
|
|
|
|
|
|
if (container.children.length > 5) { |
|
|
container.removeChild(container.lastChild); |
|
|
} |
|
|
}, 15000); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Akademics/https-huggingface-co-spaces-akademics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
