Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuantumTrade AI Scanner</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <style> | |
| .chart-container { | |
| height: 400px; | |
| position: relative; | |
| } | |
| .signal-badge { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .indicator-tab { | |
| transition: all 0.3s ease; | |
| } | |
| .indicator-tab:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .dashboard-card { | |
| transition: all 0.3s ease; | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .drawer { | |
| transition: transform 0.3s ease-out; | |
| } | |
| .drawer.hidden { | |
| transform: translateX(100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-indigo-800 text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 bg-indigo-900"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-atom text-2xl text-blue-300 mr-2"></i> | |
| <span class="text-xl font-bold">QuantumTrade AI</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <nav class="space-y-2"> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-indigo-700"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-search mr-3"></i> | |
| Market Scanner | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-robot mr-3"></i> | |
| Trading Bots | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-book mr-3"></i> | |
| Documentation | |
| </a> | |
| </nav> | |
| <div class="mt-auto pt-4"> | |
| <div class="bg-indigo-700 p-4 rounded-lg"> | |
| <p class="text-sm">Upgrade to Pro to unlock all features</p> | |
| <button class="mt-2 w-full bg-yellow-500 text-indigo-900 font-bold py-2 px-4 rounded-lg text-sm hover:bg-yellow-400 transition"> | |
| Upgrade Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-gradient-to-r from-blue-500 to-indigo-600 shadow-lg z-10 text-white"> | |
| <div class="flex items-center justify-between px-4 py-3"> | |
| <div class="flex items-center md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="hidden md:block"> | |
| <h1 class="text-xl font-semibold text-gray-800">Market Scanner Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="notifications-button" class="text-gray-500 hover:text-gray-600"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center text-white"> | |
| U | |
| </div> | |
| <span class="ml-2 hidden md:inline text-sm font-medium">User</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-4 bg-gray-100"> | |
| <!-- Market Filters --> | |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <h2 class="text-lg font-semibold mb-3 md:mb-0">Market Scanner Configuration</h2> | |
| <div class="flex flex-wrap gap-2"> | |
| <div class="relative"> | |
| <select class="block appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-indigo-500"> | |
| <option>Forex</option> | |
| <option>Crypto</option> | |
| <option>Stocks</option> | |
| <option>Indices</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <select class="block appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-indigo-500"> | |
| <option>1 Minute</option> | |
| <option>5 Minutes</option> | |
| <option>15 Minutes</option> | |
| <option>1 Hour</option> | |
| <option>4 Hours</option> | |
| <option>1 Day</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| </div> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"> | |
| Apply Filters | |
| </button> | |
| <button id="open-bot-settings" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> Bot Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Indicators Dashboard --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <!-- Hull Suite Card --> | |
| <div class="dashboard-card bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-sm p-4 hover:shadow-md border border-blue-100"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-semibold">Hull Suite</h3> | |
| <div class="flex items-center"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| <button class="ml-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-40 bg-gray-100 rounded-lg mb-3 flex items-center justify-center"> | |
| <span class="text-gray-500">Hull MA Visualization</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div> | |
| <p class="text-sm text-gray-500">Current Trend</p> | |
| <p class="text-lg font-semibold text-green-600">Bullish</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Signal Strength</p> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-600">75%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SuperTrend Card --> | |
| <div class="dashboard-card bg-white rounded-xl shadow-sm p-4 hover:shadow-md"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-semibold">SuperTrend</h3> | |
| <div class="flex items-center"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| <button class="ml-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-40 bg-gray-100 rounded-lg mb-3 flex items-center justify-center"> | |
| <span class="text-gray-500">SuperTrend Visualization</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div> | |
| <p class="text-sm text-gray-500">Current Signal</p> | |
| <p class="text-lg font-semibold text-green-600">BUY</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">ATR Strength</p> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-red-500 h-2.5 rounded-full" style="width: 86%"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-600">86%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pivot Points Card --> | |
| <div class="dashboard-card bg-white rounded-xl shadow-sm p-4 hover:shadow-md"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-semibold">Pivot Points</h3> | |
| <div class="flex items-center"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| <button class="ml-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-40 bg-gray-100 rounded-lg mb-3 flex items-center justify-center"> | |
| <span class="text-gray-500">Pivot Points Visualization</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div> | |
| <p class="text-sm text-gray-500">Key Level</p> | |
| <p class="text-lg font-semibold">123.45</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Missed Reversals</p> | |
| <p class="text-lg font-semibold text-red-600">3</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ORB and Volume Profile Combined --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- Opening Range Breakout --> | |
| <div class="bg-white rounded-xl shadow-sm p-4"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-semibold">Opening Range Breakout (ORB)</h3> | |
| <div class="flex items-center"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| <button class="ml-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-64 bg-gray-100 rounded-lg mb-3 flex items-center justify-center"> | |
| <span class="text-gray-500">ORB Visualization</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">High</p> | |
| <p class="text-lg font-semibold">1.2345</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Low</p> | |
| <p class="text-lg font-semibold">1.2301</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Breakout</p> | |
| <p class="text-lg font-semibold text-yellow-600">Pending</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Volume Profile --> | |
| <div class="bg-white rounded-xl shadow-sm p-4"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-semibold">Weighted Volume Profile</h3> | |
| <div class="flex items-center"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| <button class="ml-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-64 bg-gray-100 rounded-lg mb-3 flex items-center justify-center"> | |
| <span class="text-gray-500">Volume Profile Visualization</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">POC</p> | |
| <p class="text-lg font-semibold">1.2320</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Value Area</p> | |
| <p class="text-lg font-semibold">1.2305-1.2335</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Volume Delta</p> | |
| <p class="text-lg font-semibold text-green-600">+24.5K</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Signals and Alerts --> | |
| <div class="bg-white rounded-xl shadow-sm p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Recent Signals & Alerts</h2> | |
| <div class="flex items-center space-x-2"> | |
| <select class="bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 rounded-lg text-sm focus:outline-none focus:bg-white focus:border-indigo-500"> | |
| <option>Last 24h</option> | |
| <option>Today</option> | |
| <option>This Week</option> | |
| <option>All</option> | |
| </select> | |
| <button class="bg-indigo-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-indigo-700"> | |
| Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gradient-to-r from-blue-500 to-indigo-600"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Time</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Instrument</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Signal</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Indicator</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Strength</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="even:bg-blue-50 hover:bg-blue-100 transition-colors duration-200"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">10:45:23 AM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">EUR/USD</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600"> | |
| <span class="signal-badge px-2 py-1 bg-green-100 rounded-full">BUY</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SuperTrend</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 88%"></div> | |
| </div> | |
| <span class="ml-2 text-xs">88%</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-indigo-600 hover:text-indigo-900">View Chart</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">10:30:15 AM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">BTC/USD</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600"> | |
| <span class="signal-badge px-2 py-1 bg-red-100 rounded-full">SELL</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Hull Suite</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 76%"></div> | |
| </div> | |
| <span class="ml-2 text-xs">76%</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-indigo-600 hover:text-indigo-900">View Chart</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">09:55:42 AM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">AAPL</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600"> | |
| <span class="signal-badge px-2 py-1 bg-green-100 rounded-full">BUY</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">ORB Breakout</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| <span class="ml-2 text-xs">92%</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-indigo-600 hover:text-indigo-900">View Chart</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">09:20:18 AM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">GBP/JPY</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600"> | |
| <span class="px-2 py-1 bg-yellow-100 rounded-full">WATCH</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pivot Points</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="ml-2 text-xs">65%</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-indigo-600 hover:text-indigo-900">View Chart</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Bot Settings Drawer --> | |
| <div id="bot-settings-drawer" class="drawer fixed right-0 top-0 h-full w-full md:w-1/2 lg:w-1/3 bg-gradient-to-b from-gray-50 to-blue-50 shadow-xl z-20 transform transition-transform duration-300 ease-in-out hidden" style="overflow-y: auto;"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between border-b pb-4"> | |
| <h2 class="text-xl font-bold">Automated Trading Bot</h2> | |
| <button id="close-bot-settings" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg">Bot Status</h3> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div> | |
| <span class="ml-3 text-sm font-medium text-gray-900">Active</span> | |
| </label> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Exchange Connection</label> | |
| <div class="flex space-x-2"> | |
| <select class="bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 rounded-lg text-sm focus:outline-none focus:bg-white focus:border-indigo-500 flex-grow"> | |
| <option>Binance</option> | |
| <option>Coinbase</option> | |
| <option>Kraken</option> | |
| <option>OANDA</option> | |
| <option>FXCM</option> | |
| </select> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700"> | |
| Connect | |
| </button> | |
| </div> | |
| <p class="mt-1 text-xs text-green-600"><i class="fas fa-check-circle mr-1"></i> Connected successfully</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Risk Management</label> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Risk per Trade (%)</label> | |
| <input type="number" value="2" class="w-full bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 rounded-lg text-sm focus:outline-none focus:bg-white focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Max Daily Trades</label> | |
| <input type="number" value="5" class="w-full bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 rounded-lg text-sm focus:outline-none focus:bg-white focus:border-indigo-500"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Strategy Rules</label> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="confirm-trend" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="confirm-trend" class="ml-2 block text-sm text-gray-700">Require trend confirmation</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="exit-on-reversal" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="exit-on-reversal" class="ml-2 block text-sm text-gray-700">Exit on indicator reversal</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="use-trailing" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="use-trailing" class="ml-2 block text-sm text-gray-700">Use trailing stop loss</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Indicator Weights</label> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Hull Suite</span> | |
| <span>75%</span> | |
| </div> | |
| <input type="range" value="75" min="0" max="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>SuperTrend</span> | |
| <span>85%</span> | |
| </div> | |
| <input type="range" value="85" min="0" max="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Volume Profile</span> | |
| <span>65%</span> | |
| </div> | |
| <input type="range" value="65" min="0" max="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t"> | |
| <button class="w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-3 px-4 rounded-lg font-medium hover:from-green-600 hover:to-emerald-700 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"> | |
| Save & Activate Bot | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| // Implement mobile menu functionality here | |
| alert('Mobile menu will open here'); | |
| }); | |
| // Bot settings drawer toggle | |
| document.getElementById('open-bot-settings').addEventListener('click', function() { | |
| document.getElementById('bot-settings-drawer').classList.remove('hidden'); | |
| }); | |
| document.getElementById('close-bot-settings').addEventListener('click', function() { | |
| document.getElementById('bot-settings-drawer').classList.add('hidden'); | |
| }); | |
| // Notifications button | |
| document.getElementById('notifications-button').addEventListener('click', function() { | |
| alert('Notifications panel would open here'); | |
| }); | |
| // Simulate dynamic signal updates | |
| setInterval(function() { | |
| const signalBadges = document.querySelectorAll('.signal-badge'); | |
| signalBadges.forEach(badge => { | |
| badge.style.animation = 'none'; | |
| void badge.offsetWidth; // Trigger reflow | |
| badge.style.animation = 'pulse 1.5s infinite'; | |
| }); | |
| }, 5000); | |
| </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/qt-ai-scanner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |