Hugging Face's logo

Spaces:
Akademics
/
https-huggingface-co-spaces-akademics
Running

App Files Community
https-huggingface-co-spaces-akademics / index.html
Akademics's picture
Akademics
Upscale the AI model of this scanner and make every area of the scanner interactive - Follow Up Deployment
9cc458f verified
raw
history blame
84.5 kB
 <!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; }
}
/* Enhanced Button Styles */
.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;
}
/* Responsive adjustments */
@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;
}
}
/* Button focus states */
.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 -->
<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 Content -->
<main class="flex-1 grid grid-cols-1 lg:grid-cols-4 gap-6 p-4 sm:p-6">
<!-- Left Sidebar -->
<div class="lg:col-span-1 space-y-6">
<!-- Asset Class Selector -->
<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>
<!-- Timeframe Selector -->
<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>
<!-- Trading Style Selector -->
<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>
<!-- Strategy Configuration -->
<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>
<!-- Main Chart Area -->
<div class="lg:col-span-2 space-y-6">
<!-- Chart Header -->
<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>
<!-- Main Chart -->
<div class="chart-container p-4 shadow-lg">
<!-- TradingView Widget -->
<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>
<!-- Trading Bot Controls -->
<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>
<!-- Signal Details -->
<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>
<!-- Right Sidebar -->
<div class="lg:col-span-1 space-y-6">
<!-- Quantum Optimizer -->
<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>
<!-- Real-time Signals -->
<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>
<!-- Performance Metrics -->
<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>
<!-- News & Sentiment -->
<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 -->
<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>
// Trade execution simulation
function executeTrade(symbol, action, entryPrice) {
return new Promise((resolve) => {
setTimeout(() => {
const isSuccess = Math.random() > 0.1; // 90% success rate
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);
});
}
// Initialize Chart.js for ML Optimizer
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
}
}
}
});
// Update current time
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('current-time').textContent = timeString;
}
setInterval(updateTime, 1000);
updateTime();
// Simulate live price updates
function updatePrice() {
// In a real app, you would fetch this from an API
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';
}
// Update volume randomly
const baseVolume = 24500;
const volumeChange = (Math.random() - 0.3) * 5000;
const newVolume = baseVolume + volumeChange;
document.getElementById('current-volume').textContent = `${(newVolume/1000).toFixed(1)}K`;
// Update server metrics
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();
// Button interactions
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');
});
});
// Trading Bot Controls
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');
// Update today's stats
document.getElementById('today-trades').textContent = '0';
document.getElementById('today-profit').textContent = '+0.0%';
document.getElementById('today-winrate').textContent = '0%';
// Simulate bot activity
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);
// Store interval so we can clear it when stopping
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');
// Clear the bot interval if it exists
const startButton = document.getElementById('start-bot');
if (startButton.dataset.interval) {
clearInterval(parseInt(startButton.dataset.interval));
delete startButton.dataset.interval;
}
});
// ML Optimizer Button
document.getElementById('run-optimizer').addEventListener('click', function() {
const button = this;
const originalText = button.innerHTML;
// Show loading state
button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Optimizing...';
button.disabled = true;
// Simulate optimization process
setTimeout(() => {
// Update chart with new optimized values
const improvement = (Math.random() * 10).toFixed(1);
const newAccuracy = 82.7 + parseFloat(improvement);
optimizerChart.data.datasets[0].data = [82.7, newAccuracy];
optimizerChart.update();
// Update text displays
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}%`;
});
// Restore button
button.innerHTML = originalText;
button.disabled = false;
// Show notification
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);
});
// Show/hide MT5 specific fields
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');
}
});
// Exchange Connection Handling
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;
}
// Show loading state
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Connecting...';
this.disabled = true;
try {
// Handle MT5 differently since it requires server/password
if (exchange === 'metatrader5') {
// MT5 requires server, username and password fields
alert('For MetaTrader 5, please also specify server and login credentials in your broker app');
return;
}
// For other exchanges, verify credentials
// In a real app, this would call your backend API to verify credentials
await new Promise(resolve => setTimeout(resolve, 1500));
// Update UI to show connected state
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');
// Store connection status (in real app would use proper state management)
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;
}
});
// Check for existing connection on page load
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');
}
}
});
// Show trade notification
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);
}
// Simulate real-time signal updates
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');
// Randomly remove some signals
if (Math.random() > 0.7 && container.children.length > 3) {
const indexToRemove = Math.floor(Math.random() * container.children.length);
container.removeChild(container.children[indexToRemove]);
}
// Randomly add new signals
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>
`;
// Add to top of container
container.insertBefore(signal, container.firstChild);
// Update counter
const counter = document.querySelector('.bg-primary.text-xs');
if (counter) {
const currentCount = parseInt(counter.textContent);
counter.textContent = `${currentCount + 1} New`;
}
}
}
setInterval(updateSignals, 8000);
</script>
<!-- Sentiment Detail Modal -->
<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>
// Enhanced AI Analysis Interactivity
let activeModel = 'QuantumNet';
// Technical details toggle
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');
});
// Model selection
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();
});
});
// Aggressiveness selection
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);
});
});
// Signal strength slider
document.getElementById('signal-strength').addEventListener('input', function() {
document.getElementById('signal-strength-value').textContent = `${this.value}%`;
});
// Update model badge
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}`;
}
}
// Quantum Optimizer Boost
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;
// Simulate quantum processing
setTimeout(() => {
// Generate improved numbers
const current = (Math.random() * 5 + 92).toFixed(1);
const optimized = (Math.random() * 3 + parseFloat(current)).toFixed(1);
const improvement = (optimized - current).toFixed(1);
// Update displays
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}%`;
});
// Restore button
button.innerHTML = originalHTML;
button.disabled = false;
// Show quantum completion effect
showQuantumEffect();
}, 3000);
});
// Show quantum completion effect
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);
}
// Add to CSS section:
// Insert after existing @keyframes
@keyframes quantumPulse {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(3); opacity: 0; }
}
setTimeout(() => {
// Update main analysis
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>
`;
// Update technical details
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');
// Show notification
showTradeNotification("Analysis refreshed with latest market data", true);
}, 1000);
});
// Sentiment filtering functionality
document.querySelectorAll('.sentiment-filter-btn').forEach(btn => {
btn.addEventListener('click', function() {
const filter = this.dataset.filter;
// Update active button
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');
// Filter items
document.querySelectorAll('.sentiment-item').forEach(item => {
if (filter === 'all' || item.dataset.sentiment === filter) {
item.classList.remove('hidden');
} else {
item.classList.add('hidden');
}
});
});
});
// Sentiment detail display
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;
// Set icon and color based on sentiment type
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');
}
// Simulate adding new sentiment items
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);
// Remove oldest item if we have more than 5
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>