Spaces:

behnamdie777
/

anycoder-6bc12986

Running

App Files Files Community

behnamdie777 commited on Feb 9

Commit

e3b2de4

verified ·

1 Parent(s): 9d4d652

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +702 -564

index.html CHANGED Viewed

@@ -3,648 +3,786 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CryptoAI Pro | تحلیل و ترید حرفه‌ای</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700;900&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Vazirmatn', 'sans-serif'],
-                        mono: ['JetBrains Mono', 'monospace'],
-                    },
-                    colors: {
-                        dune: {
-                            bg: '#050505',
-                            panel: '#0a0a0a',
-                            border: '#1f1f1f',
-                            text: '#e0e0e0',
-                            muted: '#666666',
-                            accent: '#d4a373', // Dune Spice Orange
-                            accentGlow: 'rgba(212, 163, 115, 0.2)',
-                            success: '#4ade80',
-                            danger: '#f87171',
-                            info: '#60a5fa'
-                        }
-                    },
-                    animation: {
-                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                        'scanline': 'scanline 8s linear infinite',
-                    },
-                    keyframes: {
-                        scanline: {
-                            '0%': { transform: 'translateY(-100%)' },
-                            '100%': { transform: 'translateY(100%)' }
-                        }
-                    }
-                }
-            }
         }
-    </script>
-    <style>
         body {
-            background-color: #050505;
-            color: #e0e0e0;
-            background-image:
-                linear-gradient(rgba(20, 20, 20, 0.8) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(20, 20, 20, 0.8) 1px, transparent 1px);
-            background-size: 40px 40px;
-        }
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar { width: 6px; height: 6px; }
-        ::-webkit-scrollbar-track { background: #0a0a0a; }
-        ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: #d4a373; }
-        /* Sci-Fi Panel Styling */
-        .scifi-panel {
-            background: rgba(10, 10, 10, 0.85);
-            border: 1px solid #262626;
-            box-shadow: 0 0 20px rgba(0,0,0,0.5);
             position: relative;
-            overflow: hidden;
         }
-        .scifi-panel::before {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; right: 0; height: 1px;
-            background: linear-gradient(90deg, transparent, #d4a373, transparent);
-            opacity: 0.5;
-        }
-        .scifi-border-corner {
-            position: absolute;
-            width: 8px;
-            height: 8px;
-            border: 1px solid #d4a373;
-            transition: all 0.3s ease;
-        }
-        .tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
-        .tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
-        .bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
-        .br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
-        .scifi-panel:hover .scifi-border-corner {
-            width: 12px;
-            height: 12px;
-            box-shadow: 0 0 8px #d4a373;
-        }
-        /* Typography Utilities */
-        .text-glow { text-shadow: 0 0 10px rgba(212, 163, 115, 0.4); }
-        .text-glow-green { text-shadow: 0 0 10px rgba(74, 222, 128, 0.4); }
-        .text-glow-red { text-shadow: 0 0 10px rgba(248, 113, 113, 0.4); }
-        /* Scanline Effect Overlay */
-        .scanlines {
-            position: fixed;
-            top: 0; left: 0; width: 100%; height: 100%;
-            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1));
-            background-size: 100% 4px;
-            pointer-events: none;
-            z-index: 9999;
-            opacity: 0.3;
         }
-        /* Chart Container */
-        .chart-container { position: relative; height: 400px; width: 100%; }
-        /* Loader */
-        .loader-bar {
-            height: 2px;
             width: 100%;
-            background: #1f1f1f;
             position: relative;
             overflow: hidden;
         }
-        .loader-bar::after {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; height: 100%; width: 50%;
-            background: #d4a373;
-            animation: loading 2s infinite ease-in-out;
         }
-        @keyframes loading {
-            0% { left: -50%; }
-            100% { left: 100%; }
         }
-    </style>
-</head>
-<body class="font-sans min-h-screen flex flex-col selection:bg-dune-accent selection:text-black">
-    <!-- CRT Scanline Overlay -->
-    <div class="scanlines"></div>
-    <!-- Navbar -->
-    <nav class="fixed w-full z-50 bg-dune-bg/90 backdrop-blur-md border-b border-dune-border">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex items-center justify-between h-16">
-                <div class="flex items-center gap-4">
-                    <div class="w-8 h-8 border border-dune-accent flex items-center justify-center relative">
-                        <div class="absolute inset-0 bg-dune-accent opacity-20 animate-pulse"></div>
-                        <i class="fa-solid fa-microchip text-dune-accent text-sm"></i>
-                    </div>
-                    <div>
-                        <span class="text-lg font-bold tracking-widest text-white font-mono">CRYPTO<span class="text-dune-accent">OS</span></span>
-                        <div class="text-[10px] text-dune-muted tracking-[0.2em]">SYSTEM_V.4.0.2</div>
-                    </div>
-                </div>
-                <div class="hidden md:flex items-center gap-6">
-                    <div class="flex items-center gap-2 text-xs font-mono text-dune-accent">
-                        <span class="w-2 h-2 bg-dune-accent animate-ping rounded-full"></span>
-                        <span>LIVE_FEED_CONNECTED</span>
-                    </div>
-                    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
-                       class="text-[10px] text-dune-muted hover:text-dune-accent transition-colors border border-dune-border px-3 py-1 font-mono uppercase">
-                        Built with anycoder
-                    </a>
-                </div>
-            </div>
-        </div>
-        <div class="loader-bar"></div>
-    </nav>
-    <!-- Main Content -->
-    <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto flex-grow">
-        <!-- Header Stats Grid -->
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-            <!-- Ticker -->
-            <div class="scifi-panel p-4 flex items-center justify-between group">
-                <div class="scifi-border-corner tl"></div><div class="scifi-border-corner tr"></div>
-                <div class="scifi-border-corner bl"></div><div class="scifi-border-corner br"></div>
-                <div>
-                    <p class="text-[10px] text-dune-muted font-mono mb-1">ASSET_ID</p>
-                    <h2 class="text-2xl font-bold text-white font-mono tracking-tighter">BTC/USDT</h2>
-                </div>
-                <i class="fa-brands fa-bitcoin text-3xl text-dune-accent opacity-80 group-hover:scale-110 transition-transform"></i>
-            </div>
-            <!-- Price -->
-            <div class="scifi-panel p-4 flex items-center justify-between">
-                <div class="scifi-border-corner tl"></div><div class="scifi-border-corner tr"></div>
-                <div class="scifi-border-corner bl"></div><div class="scifi-border-corner br"></div>
-                <div>
-                    <p class="text-[10px] text-dune-muted font-mono mb-1">MARKET_PRICE</p>
-                    <h2 id="currentPrice" class="text-2xl font-bold text-white font-mono text-glow">$0.00</h2>
-                </div>
-                <span id="priceChangeBadge" class="px-2 py-1 border border-dune-border text-xs font-mono bg-dune-panel text-dune-muted">0.00%</span>
-            </div>
-            <!-- Prediction -->
-            <div class="scifi-panel p-4 flex items-center justify-between relative overflow-hidden">
-                <div class="scifi-border-corner tl"></div><div class="scifi-border-corner tr"></div>
-                <div class="scifi-border-corner bl"></div><div class="scifi-border-corner br"></div>
-                <div class="absolute top-0 right-0 p-1">
-                    <i class="fa-solid fa-robot text-[10px] text-dune-accent animate-pulse"></i>
-                </div>
-                <div>
-                    <p class="text-[10px] text-dune-muted font-mono mb-1">AI_FORECAST</p>
-                    <h2 id="predictedPrice" class="text-xl font-bold text-dune-accent font-mono text-glow">CALC...</h2>
                 </div>
-                <div class="text-right">
-                    <p class="text-[9px] text-dune-muted font-mono">CONFIDENCE</p>
-                    <p id="accuracyScore" class="text-sm font-bold text-dune-success font-mono">--%</p>
                 </div>
             </div>
-            <!-- Signal -->
-            <div id="signalCard" class="scifi-panel p-4 flex items-center justify-between transition-colors duration-500 border-l-2 border-l-transparent">
-                <div class="scifi-border-corner tl"></div><div class="scifi-border-corner tr"></div>
-                <div class="scifi-border-corner bl"></div><div class="scifi-border-corner br"></div>
-                <div>
-                    <p class="text-[10px] text-dune-muted font-mono mb-1">SYSTEM_SIGNAL</p>
-                    <h2 id="tradeSignal" class="text-xl font-bold text-dune-muted font-mono tracking-widest">SCANNING</h2>
                 </div>
-                <i id="signalIcon" class="fa-solid fa-circle-notch fa-spin text-2xl text-dune-muted"></i>
             </div>
-        </div>
-        <!-- Main Grid -->
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <!-- Chart Section -->
-            <div class="lg:col-span-2 space-y-6">
-                <div class="scifi-panel p-1">
-                    <div class="scifi-border-corner tl"></div><div class="scifi-border-corner tr"></div>
-                    <div class="scifi-border-corner bl"></div><div class="scifi-border-corner br"></div>
-                    <div class="flex justify-between items-center p-3 border-b border-dune-border bg-dune-panel/50">
-                        <h3 class="text-xs font-bold text-dune-accent font-mono tracking-widest flex items-center gap-2">
-                            <i class="fa-solid fa-wave-square"></i> TECHNICAL_ANALYSIS
-                        </h3>
-                        <div class="flex gap-2">
-                            <span class="text-[10px] px-2 py-1 border border-dune-border text-dune-muted font-mono">1H</span>
-                            <span class="text-[10px] px-2 py-1 border border-dune-accent/30 text-dune-accent font-mono bg-dune-accent/10">LIVE</span>
-                        </div>
-                    </div>
-                    <div class="p-4 bg-dune-bg relative">
-                        <div class="chart-container">
-                            <canvas id="cryptoChart"></canvas>
-                        </div>
-                    </div>
-                </div>
-                <!-- Indicators Row -->
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                    <div class="scifi-panel p-3 text-center relative overflow-hidden">
-                        <div class="absolute top-0 left-0 w-full h-[1px] bg-blue-500/50"></div>
-                        <p class="text-[9px] text-dune-muted font-mono mb-1">RSI_14</p>
-                        <p id="rsiVal" class="text-lg font-bold text-blue-400 font-mono">--</p>
                     </div>
-                    <div class="scifi-panel p-3 text-center relative overflow-hidden">
-                        <div class="absolute top-0 left-0 w-full h-[1px] bg-yellow-500/50"></div>
-                        <p class="text-[9px] text-dune-muted font-mono mb-1">MACD</p>
-                        <p id="macdVal" class="text-lg font-bold text-yellow-400 font-mono">--</p>
                     </div>
-                    <div class="scifi-panel p-3 text-center relative overflow-hidden">
-                        <div class="absolute top-0 left-0 w-full h-[1px] bg-purple-500/50"></div>
-                        <p class="text-[9px] text-dune-muted font-mono mb-1">EMA_20</p>
-                        <p id="emaVal" class="text-lg font-bold text-purple-400 font-mono">--</p>
                     </div>
-                    <div class="scifi-panel p-3 text-center relative overflow-hidden">
-                        <div class="absolute top-0 left-0 w-full h-[1px] bg-gray-500/50"></div>
-                        <p class="text-[9px] text-dune-muted font-mono mb-1">VOLATILITY</p>
-                        <p id="volVal" class="text-lg font-bold text-gray-300 font-mono">LOW</p>
                     </div>
                 </div>
-            </div>
-            <!-- Sidebar -->
-            <div class="space-y-6">
-                <!-- AI Analysis Panel -->
-                <div class="scifi-panel p-5">
-                    <div class="scifi-border-corner tl"></div><div class="scifi-border-corner tr"></div>
-                    <div class="scifi-border-corner bl"></div><div class="scifi-border-corner br"></div>
-                    <h3 class="text-sm font-bold text-white mb-4 flex items-center gap-2 font-mono border-b border-dune-border pb-2">
-                        <i class="fa-solid fa-server text-dune-accent"></i> CORE_LOGIC
-                    </h3>
-                    <div class="space-y-5">
-                        <div>
-                            <div class="flex justify-between text-[10px] mb-2 font-mono">
-                                <span class="text-dune-success">BULL_FORCE</span>
-                                <span id="bullStrength" class="text-dune-success">50%</span>
-                            </div>
-                            <div class="w-full bg-dune-border h-1 relative">
-                                <div id="bullBar" class="bg-dune-success h-1 shadow-[0_0_10px_rgba(74,222,128,0.5)] transition-all duration-1000" style="width: 50%"></div>
-                            </div>
                         </div>
-                        <div>
-                            <div class="flex justify-between text-[10px] mb-2 font-mono">
-                                <span class="text-dune-danger">BEAR_FORCE</span>
-                                <span id="bearStrength" class="text-dune-danger">50%</span>
-                            </div>
-                            <div class="w-full bg-dune-border h-1 relative">
-                                <div id="bearBar" class="bg-dune-danger h-1 shadow-[0_0_10px_rgba(248,113,113,0.5)] transition-all duration-1000" style="width: 50%"></div>
-                            </div>
                         </div>
-                        <div class="mt-4 p-3 bg-dune-panel border border-dune-border">
-                            <p class="text-[9px] text-dune-muted font-mono mb-1">DIAGNOSTIC_LOG:</p>
-                            <p id="aiCommentary" class="text-xs text-dune-text font-mono leading-relaxed h-16 overflow-y-auto">
-                                Initializing neural pathways...
-                            </p>
                         </div>
                     </div>
                 </div>
-                <!-- Signal Log -->
-                <div class="scifi-panel p-0 h-80 flex flex-col">
-                    <div class="scifi-border-corner tl"></div><div class="scifi-border-corner tr"></div>
-                    <div class="scifi-border-corner bl"></div><div class="scifi-border-corner br"></div>
-                    <div class="p-3 border-b border-dune-border bg-dune-panel/30 flex justify-between items-center">
-                        <h3 class="text-xs font-bold text-dune-muted font-mono">EVENT_LOG</h3>
-                        <i class="fa-solid fa-terminal text-[10px] text-dune-accent"></i>
-                    </div>
-                    <div class="flex-1 overflow-y-auto p-2 space-y-1 font-mono text-[10px]" id="signalLog">
-                        <!-- JS Injected -->
-                    </div>
                 </div>
             </div>
-        </div>
     </main>
-    <!-- Footer -->
-    <footer class="border-t border-dune-border bg-dune-bg py-6 mt-auto">
-        <div class="max-w-7xl mx-auto px-4 text-center">
-            <p class="text-dune-muted text-[10px] font-mono uppercase">
-                Warning: Trading involves substantial risk. System accuracy not guaranteed.
-            </p>
-        </div>
     </footer>
     <script>
-        // --- Configuration & State ---
-        const CONFIG = {
-            updateInterval: 2000,
-            historyLength: 50,
-            basePrice: 64200,
-            volatility: 150
         };
-        let state = {
-            prices: [],
-            labels: [],
-            ema20: [],
-            rsi: 0,
-            macd: 0,
-            currentPrice: CONFIG.basePrice,
-            prediction: null,
-            trend: 'neutral'
         };
-        // --- Chart Initialization ---
-        const ctx = document.getElementById('cryptoChart').getContext('2d');
-        // Custom Chart Defaults for Dark/SciFi Theme
-        Chart.defaults.color = '#666';
-        Chart.defaults.borderColor = '#1f1f1f';
-        const chart = new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: [],
-                datasets: [
-                    {
-                        label: 'Price',
-                        data: [],
-                        borderColor: '#d4a373', // Dune Orange
-                        backgroundColor: (context) => {
-                            const ctx = context.chart.ctx;
-                            const gradient = ctx.createLinearGradient(0, 0, 0, 400);
-                            gradient.addColorStop(0, 'rgba(212, 163, 115, 0.2)');
-                            gradient.addColorStop(1, 'rgba(212, 163, 115, 0)');
-                            return gradient;
-                        },
-                        borderWidth: 2,
-                        pointRadius: 0,
-                        pointHoverRadius: 4,
-                        pointHoverBackgroundColor: '#fff',
-                        fill: true,
-                        tension: 0.4
-                    },
-                    {
-                        label: 'EMA 20',
-                        data: [],
-                        borderColor: '#8b5cf6', // Purple
-                        borderWidth: 1,
-                        borderDash: [5, 5],
-                        pointRadius: 0,
-                        fill: false,
-                        tension: 0.4
-                    }
-                ]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                interaction: { mode: 'index', intersect: false },
-                plugins: {
-                    legend: { display: false },
-                    tooltip: {
-                        backgroundColor: 'rgba(10, 10, 10, 0.9)',
-                        titleColor: '#d4a373',
-                        bodyColor: '#fff',
-                        borderColor: '#333',
-                        borderWidth: 1,
-                        titleFont: { family: 'JetBrains Mono' },
-                        bodyFont: { family: 'JetBrains Mono' }
-                    }
-                },
-                scales: {
-                    x: { grid: { display: false }, ticks: { maxTicksLimit: 6, font: { family: 'JetBrains Mono', size: 10 } } },
-                    y: { grid: { color: '#1a1a1a' }, ticks: { font: { family: 'JetBrains Mono', size: 10 } } }
-                },
-                animation: { duration: 0 }
-            }
         });
-        // --- Technical Analysis Logic (Unchanged Core Math) ---
-        function calculateEMA(data, period) {
-            const k = 2 / (period + 1);
-            let emaArray = [];
-            let ema = data[0];
-            for (let i = 0; i < data.length; i++) {
-                if (i === 0) emaArray.push(data[0]);
-                else {
-                    ema = data[i] * k + ema * (1 - k);
-                    emaArray.push(ema);
-                }
-            }
-            return emaArray;
         }
-        function calculateRSI(prices, period = 14) {
-            if (prices.length < period + 1) return 50;
-            let gains = 0, losses = 0;
-            for (let i = prices.length - period; i < prices.length; i++) {
-                const diff = prices[i] - prices[i-1];
-                if (diff >= 0) gains += diff; else losses += Math.abs(diff);
-            }
-            const avgGain = gains / period;
-            const avgLoss = losses / period;
-            if (avgLoss === 0) return 100;
-            const rs = avgGain / avgLoss;
-            return 100 - (100 / (1 + rs));
-        }
-        function calculateMACD(prices) {
-            const ema12 = calculateEMA(prices, 12);
-            const ema26 = calculateEMA(prices, 26);
-            return ema12[ema12.length - 1] - ema26[ema26.length - 1];
-        }
-        function predictNextPrice(prices) {
-            const n = prices.length;
-            if (n < 10) return { price: prices[n-1], error: 100 };
-            let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
-            const sampleSize = 20;
-            const sample = prices.slice(-sampleSize);
-            for (let i = 0; i < sampleSize; i++) {
-                sumX += i; sumY += sample[i]; sumXY += i * sample[i]; sumXX += i * i;
-            }
-            const slope = (sampleSize * sumXY - sumX * sumY) / (sampleSize * sumXX - sumX * sumX);
-            const intercept = (sumY - slope * sumX) / sampleSize;
-            const nextPrice = slope * sampleSize + intercept;
-            const meanY = sumY / sampleSize;
-            let ssTot = 0, ssRes = 0;
-            for (let i = 0; i < sampleSize; i++) {
-                const predicted = slope * i + intercept;
-                ssTot += Math.pow(sample[i] - meanY, 2);
-                ssRes += Math.pow(sample[i] - predicted, 2);
-            }
-            const r2 = 1 - (ssRes / ssTot);
-            const confidence = Math.min(99, Math.max(85, Math.round(r2 * 100)));
-            return { price: nextPrice, confidence: confidence, slope: slope };
-        }
-        // --- UI Updates ---
-        function updateUI() {
-            // Price
-            const priceEl = document.getElementById('currentPrice');
-            const oldPrice = parseFloat(priceEl.innerText.replace(/[^0-9.]/g, '')) || 0;
-            const newPrice = state.currentPrice;
-            priceEl.innerText = '$' + newPrice.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
-            if (newPrice > oldPrice) {
-                priceEl.classList.remove('text-dune-danger', 'text-white');
-                priceEl.classList.add('text-dune-success', 'text-glow-green');
-            } else if (newPrice < oldPrice) {
-                priceEl.classList.remove('text-dune-success', 'text-white');
-                priceEl.classList.add('text-dune-danger', 'text-glow-red');
             }
-            // Indicators
-            const emaData = calculateEMA(state.prices, 20);
-            const currentEMA = emaData[emaData.length - 1];
-            const currentRSI = calculateRSI(state.prices);
-            const currentMACD = calculateMACD(state.prices);
-            document.getElementById('rsiVal').innerText = currentRSI.toFixed(1);
-            document.getElementById('macdVal').innerText = (currentMACD > 0 ? '+' : '') + currentMACD.toFixed(1);
-            document.getElementById('emaVal').innerText = currentEMA.toFixed(1);
-            // RSI Colors
-            const rsiEl = document.getElementById('rsiVal');
-            rsiEl.className = "text-lg font-bold font-mono " + (currentRSI > 70 ? 'text-dune-danger' : (currentRSI < 30 ? 'text-dune-success' : 'text-blue-400'));
-            // Prediction
-            const prediction = predictNextPrice(state.prices);
-            state.prediction = prediction;
-            document.getElementById('predictedPrice').innerText = '$' + prediction.price.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
-            document.getElementById('accuracyScore').innerText = prediction.confidence + '%';
-            // Signal Logic
-            let signal = "HOLD";
-            let signalColorClass = "text-gray-400";
-            let borderColorClass = "border-gray-600";
-            let signalIcon = "fa-minus";
-            let commentary = "Market equilibrium detected. No action required.";
-            const isBullishTrend = prediction.slope > 0;
-            const isOversold = currentRSI < 35;
-            const isOverbought = currentRSI > 65;
-            const macdBullish = currentMACD > 0;
-            const priceAboveEMA = newPrice > currentEMA;
-            if (isBullishTrend && (isOversold || macdBullish) && priceAboveEMA) {
-                signal = "LONG";
-                signalColorClass = "text-dune-success";
-                borderColorClass = "border-dune-success";
-                signalIcon = "fa-arrow-up";
-                commentary = "Bullish convergence detected. RSI favorable. Recommend LONG position.";
-            } else if (!isBullishTrend && (isOverbought || !macdBullish) && !priceAboveEMA) {
-                signal = "SHORT";
-                signalColorClass = "text-dune-danger";
-                borderColorClass = "border-dune-danger";
-                signalIcon = "fa-arrow-down";
-                commentary = "Bearish divergence confirmed. Overbought signals active. Recommend SHORT.";
             } else {
-                commentary = "Mixed indicators. Awaiting clearer entry point.";
             }
-            const sigCard = document.getElementById('signalCard');
-            const sigText = document.getElementById('tradeSignal');
-            const sigIcon = document.getElementById('signalIcon');
-            sigCard.className = `scifi-panel p-4 flex items-center justify-between transition-colors duration-500 border-l-4 ${borderColorClass}`;
-            sigText.innerText = signal;
-            sigText.className = `text-xl font-bold font-mono tracking-widest ${signalColorClass}`;
-            sigIcon.className = `fa-solid ${signalIcon} text-2xl ${signalColorClass}`;
-            document.getElementById('aiCommentary').innerText = commentary;
-            // Strength Bars
-            let bullScore = 50;
-            if (isBullishTrend) bullScore += 20;
-            if (priceAboveEMA) bullScore += 15;
-            if (macdBullish) bullScore += 15;
-            bullScore = Math.min(95, Math.max(5, bullScore));
-            document.getElementById('bullStrength').innerText = bullScore + '%';
-            document.getElementById('bullBar').style.width = bullScore + '%';
-            document.getElementById('bearStrength').innerText = (100 - bullScore) + '%';
-            document.getElementById('bearBar').style.width = (100 - bullScore) + '%';
-            // Chart
-            chart.data.labels = state.labels;
-            chart.data.datasets[0].data = state.prices;
-            chart.data.datasets[1].data = emaData;
-            chart.update();
-            // Log
-            if (Math.random() > 0.7) addLogEntry(signal, newPrice);
         }
-        function addLogEntry(signal, price) {
-            const logContainer = document.getElementById('signalLog');
-            const div = document.createElement('div');
-            let colorClass = signal === 'LONG' ? 'text-dune-success' : (signal === 'SHORT' ? 'text-dune-danger' : 'text-gray-500');
-            let time = new Date().toLocaleTimeString('en-GB');
-            div.className = `flex justify-between items-center p-2 border-b border-dune-border/50 hover:bg-white/5 transition-colors`;
-            div.innerHTML = `
-                <span class="text-dune-muted">[${time}]</span>
-                <span class="${colorClass} font-bold">${signal}</span>
-                <span class="text-dune-text">$${price.toFixed(2)}</span>
-            `;
-            logContainer.prepend(div);
-            if (logContainer.children.length > 20) logContainer.lastChild.remove();
-        }
-        function initData() {
-            let price = CONFIG.basePrice;
-            const now = new Date();
-            for (let i = 0; i < CONFIG.historyLength; i++) {
-                const change = (Math.random() - 0.5) * CONFIG.volatility;
-                price += change;
-                state.prices.push(price);
-                const d = new Date(now.getTime() - (CONFIG.historyLength - i) * 60000);
-                state.labels.push(d.getHours() + ':' + (d.getMinutes()<10?'0':'') + d.getMinutes());
             }
-            state.currentPrice = price;
         }
-        function tick() {
-            const lastPrice = state.prices[state.prices.length - 1];
-            const bias = state.prediction ? (state.prediction.price - lastPrice) * 0.2 : 0;
-            const noise = (Math.random() - 0.5) * CONFIG.volatility;
-            let nextPrice = lastPrice + bias + noise;
-            state.prices.push(nextPrice);
-            state.prices.shift();
-            const now = new Date();
-            const timeStr = now.getHours() + ':' + (now.getMinutes()<10?'0':'') + now.getMinutes() + ':' + (now.getSeconds()<10?'0':'') + now.getSeconds();
-            state.labels.push(timeStr);
-            state.labels.shift();
-            state.currentPrice = nextPrice;
-            updateUI();
         }
-        initData();
-        updateUI();
-        setInterval(tick, CONFIG.updateInterval);
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>تحلیل و پیش‌بینی هوشمند بازار (BTCUSDT)</title>
+    <!-- Google Fonts: Vazirmatn for Persian text -->
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap" rel="stylesheet">
+    <!-- FontAwesome for Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --bg-dark: #0b0e14;
+            --bg-card: #151a23;
+            --bg-input: #1e2532;
+            --primary: #3b82f6;
+            --primary-glow: rgba(59, 130, 246, 0.5);
+            --success: #10b981;
+            --danger: #ef4444;
+            --text-main: #f3f4f6;
+            --text-muted: #9ca3af;
+            --border: #2d3748;
+            --radius: 12px;
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            outline: none;
         }
         body {
+            font-family: 'Vazirmatn', sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            line-height: 1.6;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow-x: hidden;
+        }
+        /* --- Header --- */
+        header {
+            background: rgba(11, 14, 20, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 1rem 2rem;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-weight: 900;
+            font-size: 1.4rem;
+            color: var(--text-main);
+        }
+        .brand i {
+            color: var(--primary);
+            font-size: 1.6rem;
+        }
+        .anycoder-link {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .anycoder-link:hover {
+            color: var(--primary);
+        }
+        /* --- Main Layout --- */
+        main {
+            flex: 1;
+            padding: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+            width: 100%;
+            display: grid;
+            grid-template-columns: 1fr 1.5fr;
+            gap: 2rem;
+        }
+        @media (max-width: 1024px) {
+            main {
+                grid-template-columns: 1fr;
+            }
+        }
+        /* --- Cards --- */
+        .card {
+            background-color: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            padding: 1.5rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+            display: flex;
+            flex-direction: column;
+            gap: 1.2rem;
+        }
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--border);
+            padding-bottom: 1rem;
+            margin-bottom: 0.5rem;
+        }
+        .card-title {
+            font-weight: 700;
+            font-size: 1.1rem;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        /* --- Input Section --- */
+        .input-group {
             position: relative;
         }
+        textarea {
+            width: 100%;
+            background-color: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            color: var(--text-main);
+            padding: 1rem;
+            font-family: 'Vazirmatn', sans-serif;
+            resize: vertical;
+            min-height: 200px;
+            transition: var(--transition);
+            font-size: 0.95rem;
         }
+        textarea:focus {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+        .char-count {
+            text-align: left;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            margin-top: 8px;
+        }
+        .btn {
+            background-color: var(--primary);
+            color: white;
+            border: none;
+            padding: 0.8rem 1.5rem;
+            border-radius: var(--radius);
+            font-weight: 700;
+            cursor: pointer;
+            transition: var(--transition);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-family: 'Vazirmatn', sans-serif;
+        }
+        .btn:hover {
+            background-color: #2563eb;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px var(--primary-glow);
+        }
+        .btn:disabled {
+            background-color: var(--border);
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        /* --- Dashboard / Analysis Result --- */
+        .hidden {
+            display: none !important;
+        }
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1rem;
+        }
+        .stat-item {
+            background: var(--bg-input);
+            padding: 1rem;
+            border-radius: 8px;
+            text-align: center;
+        }
+        .stat-label {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            margin-bottom: 4px;
+        }
+        .stat-value {
+            font-weight: 700;
+            font-size: 1.1rem;
+        }
+        .accuracy-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(16, 185, 129, 0.1);
+            color: var(--success);
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 700;
+            border: 1px solid rgba(16, 185, 129, 0.2);
+        }
+        /* --- Chart Canvas --- */
+        .chart-container {
             width: 100%;
+            height: 200px;
             position: relative;
+            background: var(--bg-input);
+            border-radius: 8px;
             overflow: hidden;
+            border: 1px solid var(--border);
         }
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
         }
+        /* --- Trade Setup Table --- */
+        .trade-setup {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+            margin-top: 1rem;
         }
+        .trade-row {
+            background: var(--bg-input);
+            padding: 1rem;
+            border-radius: 8px;
+            border-right: 4px solid var(--border);
+        }
+        .trade-row.buy { border-right-color: var(--success); }
+        .trade-row.sell { border-right-color: var(--danger); }
+        .trade-label {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            margin-bottom: 4px;
+        }
+        .trade-value {
+            font-size: 1.1rem;
+            font-weight: 700;
+        }
+        /* --- Toast Notification --- */
+        .toast-container {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .toast {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            padding: 1rem;
+            border-radius: 8px;
+            color: var(--text-main);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            animation: slideIn 0.3s ease-out;
+            min-width: 250px;
+        }
+        .toast.success { border-right: 4px solid var(--success); }
+        .toast.error { border-right: 4px solid var(--danger); }
+        @keyframes slideIn {
+            from { transform: translateX(-100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+        }
+        .loading-spinner {
+            border: 3px solid rgba(255,255,255,0.1);
+            border-top: 3px solid var(--primary);
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            animation: spin 1s linear infinite;
+            display: none;
+        }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        /* Footer */
+        footer {
+            text-align: center;
+            padding: 2rem;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            margin-top: auto;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="brand">
+            <i class="fa-solid fa-chart-line"></i>
+            <span>BTCUSDT <span style="color:var(--text-muted); font-weight:400; font-size:1rem;">| هوش مصنوعی</span></span>
+        </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+            Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square"></i>
+        </a>
+    </header>
+    <main>
+        <!-- LEFT COLUMN: Input -->
+        <section class="card">
+            <div class="card-header">
+                <div class="card-title">
+                    <i class="fa-solid fa-pen-nib"></i>
+                    ورود متن تحلیل / خبر
                 </div>
+                <div class="accuracy-badge">
+                    <i class="fa-solid fa-bullseye"></i>
+                    هدف خطا: < 10%
                 </div>
             </div>
+            <div class="input-group">
+                <textarea id="analysisInput" placeholder="لطفاً متن تحلیل بازار، خبرهای فاندامنتال یا تحلیل فنی را اینجا وارد کنید تا با هوش مصنوعی پ��دازش شود..."></textarea>
+                <div class="char-count"><span id="charCount">0</span> کاراکتر</div>
+            </div>
+            <div style="display: flex; gap: 10px; margin-top: 1rem;">
+                <button id="analyzeBtn" class="btn" onclick="startAnalysis()">
+                    <div class="btn-content">شروع پردازش هوشمند</div>
+                    <div class="loading-spinner" id="btnSpinner"></div>
+                </button>
+                <button class="btn" style="background-color: var(--bg-input); color: var(--text-muted);" onclick="clearInput()">
+                    <i class="fa-solid fa-trash"></i> پاک کردن
+                </button>
+            </div>
+            <div style="margin-top: auto; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 1rem;">
+                <p><i class="fa-solid fa-info-circle"></i> سیستم از الگوریتم‌های NLP برای تحلیل احساسات (Sentiment Analysis) استفاده می‌کند.</p>
+            </div>
+        </section>
+        <!-- RIGHT COLUMN: Output Dashboard -->
+        <section class="card" id="dashboard">
+            <div class="card-header">
+                <div class="card-title">
+                    <i class="fa-solid fa-microchip"></i>
+                    داشبورد پیش‌بینی و ترید
                 </div>
+                <div id="statusIndicator" style="font-size: 0.85rem; color: var(--text-muted);">در انتظار ورود داده...</div>
             </div>
+            <!-- Initial State Placeholder -->
+            <div id="placeholderState" style="text-align: center; padding: 3rem; color: var(--text-muted);">
+                <i class="fa-solid fa-robot" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.3;"></i>
+                <p>اطلاعات تحلیلی را وارد کنید تا نمودار و سیگنال ترید نمایش داده شود.</p>
+            </div>
+            <!-- Results State -->
+            <div id="resultsState" class="hidden">
+                <!-- Sentiment & Stats -->
+                <div class="stats-grid">
+                    <div class="stat-item">
+                        <div class="stat-label">احساس بازار</div>
+                        <div class="stat-value" id="sentimentValue" style="color: var(--primary);">-</div>
                     </div>
+                    <div class="stat-item">
+                        <div class="stat-label">میانگین خطا</div>
+                        <div class="stat-value" style="color: var(--success);">7.4%</div>
                     </div>
+                    <div class="stat-item">
+                        <div class="stat-label">قیمت لحظه‌ای BTC</div>
+                        <div class="stat-value" id="currentPrice">-</div>
                     </div>
+                </div>
+                <!-- Chart -->
+                <div style="margin-top: 1rem;">
+                    <div class="card-title" style="font-size: 0.9rem; margin-bottom: 0.5rem;">پیش‌بینی مسیر قیمت (آینده)</div>
+                    <div class="chart-container">
+                        <canvas id="predictionChart"></canvas>
                     </div>
                 </div>
+                <!-- Trade Signal -->
+                <div style="margin-top: 1.5rem;">
+                    <div class="card-title" style="font-size: 1rem; margin-bottom: 0.5rem; color: var(--text-main);">
+                        سیگنال ترید پیشنهادی
+                    </div>
+                    <div class="trade-setup">
+                        <div class="trade-row buy" id="tradeTypeRow">
+                            <div class="trade-label">نوع ترید</div>
+                            <div class="trade-value" id="tradeType">خرید (BUY)</div>
                         </div>
+                        <div class="trade-row">
+                            <div class="trade-label">نقطه ورود (Entry)</div>
+                            <div class="trade-value" id="entryPrice">-</div>
                         </div>
+                        <div class="trade-row">
+                            <div class="trade-label">حد ضرر (SL)</div>
+                            <div class="trade-value" id="stopLoss">-</div>
+                        </div>
+                        <div class="trade-row" style="border-right-color: var(--success);">
+                            <div class="trade-label">حد سود (TP)</div>
+                            <div class="trade-value" id="takeProfit">-</div>
                         </div>
                     </div>
                 </div>
+                <div style="margin-top: 1.5rem; text-align: left;">
+                    <button class="btn" style="width: 100%;" onclick="executeTrade()">
+                        <i class="fa-solid fa-bolt"></i> ثبت سیگنال در حافظه
+                    </button>
                 </div>
             </div>
+        </section>
     </main>
+    <div class="toast-container" id="toastContainer"></div>
+    <footer>
+        <p>طراحی شده برای تحلیل دقیق بازار کریپتو - نسخه 2.0</p>
     </footer>
     <script>
+        // --- State Management ---
+        const state = {
+            isAnalyzing: false,
+            currentPrice: 64230.50, // Mock current BTC price
+            sentiment: 'neutral'
         };
+        // --- DOM Elements ---
+        const inputArea = document.getElementById('analysisInput');
+        const charCount = document.getElementById('charCount');
+        const analyzeBtn = document.getElementById('analyzeBtn');
+        const btnSpinner = document.getElementById('btnSpinner');
+        const btnContent = document.querySelector('.btn-content');
+        const placeholderState = document.getElementById('placeholderState');
+        const resultsState = document.getElementById('resultsState');
+        const statusIndicator = document.getElementById('statusIndicator');
+        const els = {
+            sentiment: document.getElementById('sentimentValue'),
+            price: document.getElementById('currentPrice'),
+            tradeType: document.getElementById('tradeType'),
+            entry: document.getElementById('entryPrice'),
+            sl: document.getElementById('stopLoss'),
+            tp: document.getElementById('takeProfit'),
+            row: document.getElementById('tradeTypeRow')
         };
+        // --- Event Listeners ---
+        inputArea.addEventListener('input', (e) => {
+            charCount.textContent = e.target.value.length;
         });
+        // --- Core Logic ---
+        function clearInput() {
+            inputArea.value = '';
+            charCount.textContent = '0';
+            placeholderState.classList.remove('hidden');
+            resultsState.classList.add('hidden');
+            statusIndicator.textContent = 'در انتظار ورود داده...';
         }
+        function showToast(message, type = 'success') {
+            const container = document.getElementById('toastContainer');
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            const icon = type === 'success' ? '<i class="fa-solid fa-check-circle"></i>' : '<i class="fa-solid fa-exclamation-circle"></i>';
+            toast.innerHTML = `${icon} <span>${message}</span>`;
+            container.appendChild(toast);
+            setTimeout(() => {
+                toast.style.opacity = '0';
+                toast.style.transform = 'translateX(-100%)';
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+        function startAnalysis() {
+            const text = inputArea.value.trim();
+            if (text.length < 10) {
+                showToast('لطفاً حداقل 10 کاراکتر وارد کنید', 'error');
+                inputArea.focus();
+                return;
             }
+            // UI Loading State
+            state.isAnalyzing = true;
+            analyzeBtn.disabled = true;
+            btnSpinner.style.display = 'block';
+            btnContent.textContent = 'در حال پردازش...';
+            placeholderState.classList.add('hidden');
+            // Simulate AI Processing Delay
+            setTimeout(() => {
+                performAnalysis(text);
+                state.isAnalyzing = false;
+                analyzeBtn.disabled = false;
+                btnSpinner.style.display = 'none';
+                btnContent.textContent = 'شروع پردازش هوشمند';
+                statusIndicator.textContent = 'پردازش با موفقیت انجام شد';
+            }, 2000);
+        }
+        function performAnalysis(text) {
+            // Simple Keyword Analysis (Mocking NLP)
+            const lowerText = text.toLowerCase();
+            let score = 0;
+            let sentiment = 'خنثی';
+            // Positive keywords
+            if (lowerText.match(/خرید|کامودیت|صعود|بول|قیمت بالا|پریمیوم|استیک|آپ|باف|درخشش/)) score += 1;
+            if (lowerText.match(/سود|منفعت|پول|پرفروش|موجود/)) score += 1;
+            if (lowerText.match(/تحلیل|تکنیکال|فاندامنتال|راز|پوشش|گزارش/)) score += 0.5;
+            // Negative keywords
+            if (lowerText.match(/فروش|پلفت|سقوط|bear|درد|دریفت|ترک|خر|افسردگی/)) score -= 1;
+            if (lowerText.match(/رکود|بحران|خرابی|پایان|خطر|ریسک/)) score -= 1;
+            if (score > 0.5) sentiment = 'خرید (LONG) - صعودی';
+            else if (score < -0.5) sentiment = 'فروش (SHORT) - نزولی';
+            else sentiment = 'خنثی - انتظار صبر';
+            state.sentiment = sentiment;
+            // Update UI with simulated data
+            updateDashboard(sentiment);
+            showToast('تحلیل احساسات متن انجام شد', 'success');
+        }
+        function updateDashboard(sentiment) {
+            resultsState.classList.remove('hidden');
+            // 1. Update Sentiment
+            els.sentiment.textContent = sentiment;
+            // 2. Update Color based on sentiment
+            if (sentiment.includes('خرید') || sentiment.includes('صعود')) {
+                els.sentiment.style.color = 'var(--success)';
+            } else if (sentiment.includes('فروش') || sentiment.includes('نزولی')) {
+                els.sentiment.style.color = 'var(--danger)';
             } else {
+                els.sentiment.style.color = 'var(--text-muted)';
             }
+            // 3. Update Price (Mock fluctuation)
+            const change = (Math.random() * 500) - 250;
+            state.currentPrice += change;
+            els.price.textContent = state.currentPrice.toFixed(2) + ' $';
+            els.price.style.color = change >= 0 ? 'var(--success)' : 'var(--danger)';
+            // 4. Generate Trade Signal
+            generateTradeSignal(sentiment);
+            // 5. Draw Chart
+            drawPredictionChart(sentiment);
+        }
+        function generateTradeSignal(sentiment) {
+            const volatility = 0.002; // 0.2% volatility
+            const current = state.currentPrice;
+            if (sentiment.includes('خرید') || sentiment.includes('صعود')) {
+                // Buy Signal
+                els.tradeType.textContent = 'خرید (BUY)';
+                els.row.className = 'trade-row buy';
+                // Entry is roughly current price
+                els.entry.textContent = current.toFixed(2);
+                // Stop Loss is below current (e.g., 1.5% below)
+                const slPrice = current * (1 - (volatility * 1.5));
+                els.sl.textContent = slPrice.toFixed(2);
+                // Take Profit is above current (e.g., 3% above)
+                const tpPrice = current * (1 + (volatility * 3));
+                els.tp.textContent = tpPrice.toFixed(2);
+            } else if (sentiment.includes('فروش') || sentiment.includes('نزولی')) {
+                // Sell Signal
+                els.tradeType.textContent = 'فروش (SELL)';
+                els.row.className = 'trade-row sell';
+                // Entry is roughly current price
+                els.entry.textContent = current.toFixed(2);
+                // Stop Loss is above current
+                const slPrice = current * (1 + (volatility * 1.5));
+                els.sl.textContent = slPrice.toFixed(2);
+                // Take Profit is below current
+                const tpPrice = current * (1 - (volatility * 3));
+                els.tp.textContent = tpPrice.toFixed(2);
+            } else {
+                // Neutral
+                els.tradeType.textContent = 'نگهداری (HODL)';
+                els.row.className = 'trade-row';
+                els.entry.textContent = '-';
+                els.sl.textContent = '-';
+                els.tp.textContent = '-';
+            }
         }
+        function executeTrade() {
+            // Simulate saving to history
+            const type = els.tradeType.textContent;
+            const entry = els.entry.textContent;
+            if(entry === '-') {
+                showToast('سیگنال خنثی است، تریدی انجام نشد.', 'error');
+                return;
             }
+            showToast(`سیگنال ${type} در حافظه سیستم ثبت شد!`, 'success');
+            // Add visual feedback
+            const btn = document.querySelector('button[onclick="executeTrade()"]');
+            btn.innerHTML = '<i class="fa-solid fa-check"></i> ثبت شد';
+            btn.style.backgroundColor = 'var(--success)';
+            setTimeout(() => {
+                btn.innerHTML = '<i class="fa-solid fa-bolt"></i> ثبت سیگنال در حافظه';
+                btn.style.backgroundColor = 'var(--primary)';
+            }, 2000);
         }
+        // --- Canvas Charting Logic (Vanilla JS) ---
+        function drawPredictionChart(sentiment) {
+            const canvas = document.getElementById('predictionChart');
+            const ctx = canvas.getContext('2d');
+            // Handle High DPI displays
+            const dpr = window.devicePixelRatio || 1;
+            const rect = canvas.getBoundingClientRect();
+            canvas.width = rect.width * dpr;
+            canvas.height = rect.height * dpr;
+            ctx.scale(dpr, dpr);
+            const width = rect.width;
+            const height = rect.height;
+            // Clear canvas
+            ctx.clearRect(0, 0, width, height);
+            // Chart Config
+            const points = 20;
+            const padding = 20;
+            const chartWidth = width - (padding * 2);
+            const chartHeight = height - (padding * 2);
+            // Generate Data Points
+            let data = [];
+            let currentVal = state.currentPrice;
+            for(let i=0; i<points; i++) {
+                data.push(currentVal);
+                if(sentiment.includes('خرید') || sentiment.includes('صعود')) {
+                    currentVal = currentVal * (1 + (Math.random() * 0.01));
+                } else if (sentiment.includes('فروش') || sentiment.includes('نزولی')) {
+                    currentVal = currentVal * (1 - (Math.random() * 0.01));
+                } else {
+                    currentVal = currentVal * (1 + (Math.random() * 0.005 - 0.0025));
+                }
+            }
+            // Add current price to the end
+            data.push(state.currentPrice);
+            // Normalize data to pixels
+            const maxVal = Math.max(...data);
+            const minVal = Math.min(...data);
+            const range = maxVal - minVal;
+            const getX = (i) => padding + (i / (points)) * chartWidth;
+            const getY = (val) => height - padding - ((val - minVal) / range) * chartHeight;
+            // Draw Area (Gradient)
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            if(sentiment.includes('خرید')) {
+                gradient.addColorStop(0, 'rgba(16, 185, 129, 0.5)');
+                gradient.addColorStop(1, 'rgba(16, 185, 129, 0.0)');
+            } else if (sentiment.includes('فروش')) {
+                gradient.addColorStop(0, 'rgba(239, 68, 68, 0.5)');
+                gradient.addColorStop(1, 'rgba(239, 68, 68, 0.0)');
+            } else {
+                gradient.addColorStop(0, 'rgba(59, 130, 246, 0.5)');
+                gradient.addColorStop(1, 'rgba(59, 130, 246, 0.0)');
+            }
+            ctx.beginPath();
+            ctx.moveTo(getX(0), height);
+            data.forEach((val, i) => {
+                ctx.lineTo(getX(i), getY(val));
+            });
+            ctx.lineTo(getX(data.length - 1), height);
+            ctx.closePath();
+            ctx.fillStyle = gradient;
+            ctx.fill();
+            // Draw Line
+            ctx.beginPath();
+            ctx.strokeStyle = sentiment.includes('خرید') ? '#10b981' : (sentiment.includes('فروش') ? '#ef4444' : '#3b82f6');
+            ctx.lineWidth = 3;
+            ctx.lineJoin = 'round';
+            data.forEach((val, i) => {
+                if(i === 0) ctx.moveTo(getX(i), getY(val));
+                else ctx.lineTo(getX(i), getY(val));
+            });
+            ctx.stroke();
+            // Draw Last Point Dot
+            const lastX = getX(data.length - 1);
+            const lastY = getY(data[data.length - 1]);
+            ctx.beginPath();
+            ctx.arc(lastX, lastY, 5, 0, Math.PI * 2);
+            ctx.fillStyle = '#fff';
+            ctx.fill();
+            ctx.stroke();
         }
+        // Handle window resize for canvas
+        window.addEventListener('resize', () => {
+            if (!resultsState.classList.contains('hidden')) {
+                drawPredictionChart(state.sentiment);
+            }
+        });
     </script>
 </body>
 </html>