Download index.html from Akademics/https-huggingface-co-spaces-akademics: direct link, hf CLI and curl.
- Browser
- Download file 99.1 kB
-
https://huggingface.co/spaces/Akademics/https-huggingface-co-spaces-akademics/resolve/main/index.html
- Command line
-
hf download hf://spaces/Akademics/https-huggingface-co-spaces-akademics/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Akademics/https-huggingface-co-spaces-akademics/resolve/main/index.html
99.1 kB
| <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 ; | |
| } | |
| .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"> | |
| <!-- Chart Analysis --> | |
| <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> | |
| <!-- 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> | |
| // Chart Analysis Functionality | |
| 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() { | |
| // Show loading state | |
| const analyzeBtn = this; | |
| analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Analyzing...'; | |
| analyzeBtn.disabled = true; | |
| // Get current market data from TradingView widget | |
| 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', | |
| }, '*'); | |
| // Set timeout for cases where widget doesn't respond | |
| const timeout = setTimeout(() => { | |
| window.removeEventListener('message', tradingViewDataHandler); | |
| displayAnalysisFromSimulatedData(); | |
| analyzeBtn.innerHTML = '<i class="fas fa-bolt mr-1"></i>Analyze'; | |
| analyzeBtn.disabled = false; | |
| }, 3000); | |
| // Listen for response | |
| 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)); | |
| // Calculate levels based on actual price action | |
| const prices = { | |
| entry: currentPrice.toFixed(2), | |
| tp: (currentPrice * 1.03).toFixed(2), // +3% take profit | |
| sl: (recentLow * 0.99).toFixed(2), // 1% below recent low | |
| confidence: Math.min(95, Math.floor( | |
| ((currentPrice - recentLow) / (recentHigh - recentLow)) * 100 | |
| )) // Confidence based on position within the range | |
| }; | |
| // Generate dynamic analysis based on actual market conditions | |
| let analysis = []; | |
| // Detect trend | |
| 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."); | |
| } | |
| // Update UI with analysis | |
| 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}%`; | |
| // Show results | |
| document.getElementById('analysis-results').classList.remove('hidden'); | |
| analyzeBtn.innerHTML = '<i class="fas fa-check mr-1"></i>Analysis Complete'; | |
| analyzeBtn.disabled = false; | |
| // Remove the event listener after receiving data | |
| window.removeEventListener('message', tradingViewDataHandler); | |
| // Show notification | |
| 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; | |
| } | |
| }); | |
| // Calculate levels based on actual price action | |
| const prices = { | |
| entry: currentPrice.toFixed(2), | |
| tp: (currentPrice * 1.03).toFixed(2), // +3% take profit | |
| sl: (recentLow * 0.99).toFixed(2), // 1% below recent low | |
| confidence: Math.min(95, Math.floor( | |
| ((currentPrice - recentLow) / (recentHigh - recentLow)) * 100 | |
| )) // Confidence based on position within the range | |
| }; | |
| // Fallback function when TradingView data isn't available | |
| function displayAnalysisFromSimulatedData() { | |
| // Simulate data analysis with random but reasonable values | |
| 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) // 70-95% confidence | |
| }; | |
| // Generate analysis text | |
| const analysis = [ | |
| "Quantum analysis detected potential trading opportunity.", | |
| "Price shows technical patterns matching historical profitable setups." | |
| ]; | |
| // Update UI | |
| 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; | |
| // In a real app, this would copy to clipboard and/or auto-fill trade orders | |
| showTradeNotification(`Trade copied: Entry ${entry}, TP ${tp}, SL ${sl}`, true); | |
| }); | |
| document.getElementById('save-analysis-btn').addEventListener('click', function() { | |
| // In a real app, this would save the analysis to user's history | |
| showTradeNotification("Analysis saved to your trade journal", true); | |
| }); | |
| // 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> |