Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TradeGenius Nexus - Settings</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .gradient-text { | |
| background: linear-gradient(45deg, #3B82F6, #10B981); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .ai-gradient-text { | |
| background: linear-gradient(45deg, #9333EA, #3B82F6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .spinner { | |
| border: 4px solid rgba(0,0,0,0.1); | |
| border-top-color: #3B82F6; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #10B981; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #10B981; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="trending-up" class="text-primary h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold gradient-text">TradeGenius</span> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Home | |
| </a> | |
| <a href="library.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Library | |
| </a> | |
| <a href="analyzer.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Analyzer | |
| </a> | |
| <a href="#" class="border-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Settings | |
| </a> | |
| <button id="dark-mode-toggle" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"> | |
| 🌙 Dark Mode | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"> | |
| <i data-feather="menu" class="block h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="flex-1 min-w-0"> | |
| <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"> | |
| Account Settings | |
| </h2> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <div class="space-y-8 divide-y divide-gray-200"> | |
| <div class="space-y-8 divide-y divide-gray-200"> | |
| <div> | |
| <div> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Data Sources | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Connect your accounts to automatically import trading strategies and content | |
| </p> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-6"> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Telegram Integration | |
| </h3> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-900">Advanced Telegram Integration</h4> | |
| <p class="text-sm text-gray-500"> | |
| Bulk download and analyze Telegram channels with AI-powered troubleshooting | |
| </p> | |
| </div> | |
| <button type="button" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i data-feather="link" class="-ml-1 mr-2 h-4 w-4"></i> | |
| Configure API | |
| </button> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-6"> | |
| <label for="telegram-api-id" class="block text-sm font-medium text-gray-700">Telegram API ID</label> | |
| <input type="password" id="telegram-api-id" name="telegram-api-id" class="mt-1 block w-full shadow-sm sm:text-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <label for="telegram-api-hash" class="block text-sm font-medium text-gray-700">Telegram API Hash</label> | |
| <input type="password" id="telegram-api-hash" name="telegram-api-hash" class="mt-1 block w-full shadow-sm sm:text-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <label for="telegram-session" class="block text-sm font-medium text-gray-700">Session File (optional)</label> | |
| <input type="file" id="telegram-session" name="telegram-session" class="mt-1 block w-full shadow-sm sm:text-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="button" onclick="startAutoDownload()" | |
| class="w-full px-6 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-lg font-bold text-white transition-all transform hover:scale-105 shadow-lg"> | |
| <i data-feather="download-cloud" class="inline mr-2 w-5 h-5"></i> | |
| Start Automatic Data Download | |
| </button> | |
| </div> | |
| <!-- Download Status (Hidden by default) --> | |
| <div id="download-status" class="hidden mt-6"> | |
| <div class="bg-gray-100 rounded-lg p-4"> | |
| <h4 class="font-semibold text-gray-900 mb-3">Download Progress</h4> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Account Validation</span> | |
| <span id="status-validation" class="text-sm font-medium">⏳ Pending</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Channels Discovered</span> | |
| <span id="status-channels" class="text-sm font-medium">⏳ Pending</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Messages Downloaded</span> | |
| <span id="status-messages" class="text-sm font-medium">⏳ Pending</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Media Files</span> | |
| <span id="status-media" class="text-sm font-medium">⏳ Pending</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Strategies Extracted</span> | |
| <span id="status-strategies" class="text-sm font-medium">⏳ Pending</span> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="w-full bg-gray-300 rounded-full h-2"> | |
| <div id="download-progress" class="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full transition-all duration-500" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-green-50 border-l-4 border-green-400 p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="check-circle" class="h-5 w-5 text-green-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-sm font-medium text-green-800">✨ AI Handles Everything</h3> | |
| <div class="mt-2 text-sm text-green-700"> | |
| <p class="font-semibold mb-2">No manual setup required:</p> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li>🤖 AI auto-generates API credentials</li> | |
| <li>🔍 Automatically discovers all linked channels</li> | |
| <li>📥 Downloads complete message history</li> | |
| <li>🎯 Extracts every trading strategy</li> | |
| <li>⚡ Processes all media files and links</li> | |
| <li>🛡️ Built-in error handling & retries</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| TradingView Integration | |
| </h3> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-900">Advanced Bulk Download</h4> | |
| <p class="text-sm text-gray-500"> | |
| Configure parallel processing and error handling | |
| </p> | |
| </div> | |
| <button type="button" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500"> | |
| <i data-feather="settings" class="-ml-1 mr-2 h-4 w-4"></i> | |
| Configure | |
| </button> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-3"> | |
| <label for="worker-count" class="block text-sm font-medium text-gray-700">Parallel Workers</label> | |
| <input type="number" id="worker-count" name="worker-count" min="1" max="10" value="3" class="mt-1 block w-full shadow-sm sm:text-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="retry-attempts" class="block text-sm font-medium text-gray-700">Retry Attempts</label> | |
| <input type="number" id="retry-attempts" name="retry-attempts" min="0" max="10" value="2" class="mt-1 block w-full shadow-sm sm:text-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <label for="error-handling" class="block text-sm font-medium text-gray-700">Error Handling</label> | |
| <select id="error-handling" name="error-handling" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md"> | |
| <option value="skip">Skip failed channels</option> | |
| <option value="retry" selected>Retry with backoff</option> | |
| <option value="pause">Pause and alert</option> | |
| </select> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="enable-fallback" name="enable-fallback" type="checkbox" checked class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="enable-fallback" class="font-medium text-gray-700">Enable Fallback Mode</label> | |
| <p class="text-gray-500">Use alternative methods when API fails</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8"> | |
| <div> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Analysis Preferences | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Configure how the AI analyzes trading strategies | |
| </p> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-6"> | |
| <fieldset> | |
| <legend class="text-base font-medium text-gray-900">Analysis Depth</legend> | |
| <div class="mt-4 space-y-4"> | |
| <div class="flex items-center"> | |
| <input id="depth-basic" name="depth-preference" type="radio" class="focus:ring-primary h-4 w-4 text-primary border-gray-300"> | |
| <label for="depth-basic" class="ml-3 block text-sm font-medium text-gray-700">Basic (Keyword Analysis)</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="depth-standard" name="depth-preference" type="radio" checked class="focus:ring-primary h-4 w-4 text-primary border-gray-300"> | |
| <label for="depth-standard" class="ml-3 block text-sm font-medium text-gray-700">Standard (NLP + Sentiment)</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="depth-advanced" name="depth-preference" type="radio" class="focus:ring-primary h-4 w-4 text-primary border-gray-300"> | |
| <label for="depth-advanced" class="ml-3 block text-sm font-medium text-gray-700">Advanced (LLM Analysis)</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="depth-custom" name="depth-preference" type="radio" class="focus:ring-primary h-4 w-4 text-primary border-gray-300"> | |
| <label for="depth-custom" class="ml-3 block text-sm font-medium text-gray-700">Custom Configuration</label> | |
| </div> | |
| </div> | |
| </fieldset> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="backtesting" name="backtesting" type="checkbox" checked class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="backtesting" class="font-medium text-gray-700">Automatic Backtesting</label> | |
| <p class="text-gray-500">Run backtests on all imported strategies</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="optimization" name="optimization" type="checkbox" checked class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="optimization" class="font-medium text-gray-700">Parameter Optimization</label> | |
| <p class="text-gray-500">Find optimal parameters for each strategy</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="sentiment-analysis" name="sentiment-analysis" type="checkbox" checked class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="sentiment-analysis" class="font-medium text-gray-700">Sentiment Analysis</label> | |
| <p class="text-gray-500">Analyze market sentiment from messages</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="pattern-detection" name="pattern-detection" type="checkbox" checked class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="pattern-detection" class="font-medium text-gray-700">Pattern Detection</label> | |
| <p class="text-gray-500">Identify repeating market patterns</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-start"> | |
| <div class="flex-shrink-0 relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in"> | |
| <input type="checkbox" name="auto-update" id="auto-update" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> | |
| <label for="auto-update" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| <div class="ml-1 text-sm"> | |
| <label for="auto-update" class="font-medium text-gray-700">Auto-update Strategies</label> | |
| <p class="text-gray-500">Check for updates to existing strategies</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8"> | |
| <div> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 ai-gradient-text"> | |
| AI Integration | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Enable powerful AI features to enhance your trading analysis | |
| </p> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-6"> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| AI Configuration | |
| </h3> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="mb-4"> | |
| <label for="ai-api-key" class="block text-sm font-medium text-gray-700">AI API Key</label> | |
| <input type="password" id="ai-api-key" name="ai-api-key" | |
| class="mt-1 block w-full shadow-sm sm:text-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md" | |
| placeholder="Enter your AI service API key"> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <input id="ai-summarizer" name="ai-summarizer" type="checkbox" | |
| class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| <label for="ai-summarizer" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Strategy Summarizer | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="ai-backtest" name="ai-backtest" type="checkbox" | |
| class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| <label for="ai-backtest" class="ml-3 block text-sm font-medium text-gray-700"> | |
| AI Backtesting | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="ai-optimizer" name="ai-optimizer" type="checkbox" | |
| class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| <label for="ai-optimizer" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Parameter Optimizer | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="button" id="test-ai-btn" | |
| class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| <span id="test-ai-text">Test AI Connection</span> | |
| <div id="test-ai-spinner" class="ml-2 hidden spinner"></div> | |
| </button> | |
| <p id="ai-status" class="mt-2 text-sm text-gray-600"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8"> | |
| <div> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Notification Settings | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| How should we notify you about important updates? | |
| </p> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="email-notifications" name="email-notifications" type="checkbox" checked class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="email-notifications" class="font-medium text-gray-700">Email Notifications</label> | |
| <p class="text-gray-500">Get weekly digest of new strategies</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="browser-notifications" name="browser-notifications" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="browser-notifications" class="font-medium text-gray-700">Browser Notifications</label> | |
| <p class="text-gray-500">Get real-time alerts for important updates</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label for="notification-email" class="block text-sm font-medium text-gray-700">Notification Email</label> | |
| <input type="email" name="notification-email" id="notification-email" autocomplete="email" class="mt-1 block w-full shadow-sm sm:text-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md" value="user@example.com"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-5"> | |
| <div class="flex justify-end"> | |
| <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| Cancel | |
| </button> | |
| <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-white border-t border-gray-200 mt-12"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> | |
| <p class="text-center text-base text-gray-500"> | |
| © 2023 TradeGenius Nexus. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Dark mode toggle | |
| const darkModeToggle = document.getElementById('dark-mode-toggle'); | |
| darkModeToggle.addEventListener('click', () => { | |
| document.documentElement.classList.toggle('dark'); | |
| localStorage.setItem('darkMode', document.documentElement.classList.contains('dark')); | |
| }); | |
| if (localStorage.getItem('darkMode') === 'true') { | |
| document.documentElement.classList.add('dark'); | |
| } | |
| // AI Connection Test | |
| const testAiBtn = document.getElementById('test-ai-btn'); | |
| const aiStatus = document.getElementById('ai-status'); | |
| const aiSpinner = document.getElementById('test-ai-spinner'); | |
| const aiText = document.getElementById('test-ai-text'); | |
| testAiBtn.addEventListener('click', async () => { | |
| const apiKey = document.getElementById('ai-api-key').value.trim(); | |
| if (!apiKey) { | |
| aiStatus.textContent = 'Please enter an API key first'; | |
| return; | |
| } | |
| aiSpinner.classList.remove('hidden'); | |
| aiText.textContent = 'Testing...'; | |
| // Simulate API call - replace with actual fetch to your backend | |
| await new Promise(resolve => setTimeout(resolve, 1500)); | |
| aiSpinner.classList.add('hidden'); | |
| aiText.textContent = 'Test AI Connection'; | |
| aiStatus.textContent = '✅ AI connection successful'; | |
| localStorage.setItem('ai-api-key', apiKey); | |
| }); | |
| // Load saved API key if exists | |
| const savedKey = localStorage.getItem('ai-api-key'); | |
| if (savedKey) { | |
| document.getElementById('ai-api-key').value = savedKey; | |
| aiStatus.textContent = '✔ Using saved API key'; | |
| } | |
| // Auto Download Function | |
| function startAutoDownload() { | |
| const accountInput = document.getElementById('target-account').value.trim(); | |
| if (!accountInput) { | |
| alert('Please enter a Telegram account link'); | |
| return; | |
| } | |
| // Show download status | |
| document.getElementById('download-status').classList.remove('hidden'); | |
| // Simulate download process | |
| const steps = [ | |
| { id: 'validation', text: '✅ Validated', delay: 1000 }, | |
| { id: 'channels', text: '✅ 247 channels found', delay: 2000 }, | |
| { id: 'messages', text: '✅ 50,000+ messages', delay: 3000 }, | |
| { id: 'media', text: '✅ 1,200+ files', delay: 4000 }, | |
| { id: 'strategies', text: '✅ 89 strategies extracted', delay: 5000 } | |
| ]; | |
| steps.forEach((step, index) => { | |
| setTimeout(() => { | |
| document.getElementById(`status-${step.id}`).textContent = step.text; | |
| document.getElementById('download-progress').style.width = `${(index + 1) * 20}%`; | |
| }, step.delay); | |
| }); | |
| // Complete after all steps | |
| setTimeout(() => { | |
| alert('🎉 Download Complete! All trading strategies have been extracted and are ready for analysis.'); | |
| }, 6000); | |
| } | |
| </script> | |
| </body> | |
| </html> | |