Forex Technical Analysis Tool<\/title>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lightweight-charts@4.1.0\/dist\/lightweight-charts.standalone.production.min.js\">\r\n <\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" \/>\r\n <style>\r\n \/* (\u0647\u0645\u0627\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc\u060c \u0628\u062f\u0648\u0646 \u062a\u063a\u06cc\u06cc\u0631) *\/\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: #1e222d;\r\n color: #d1d4dc;\r\n padding: 20px;\r\n }\r\n .container {\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n }\r\n .header {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 10px;\r\n background: #2a2e39;\r\n padding: 12px 20px;\r\n border-radius: 8px;\r\n }\r\n .header label {\r\n color: #b2b5be;\r\n font-weight: bold;\r\n margin-right: 5px;\r\n }\r\n .header select, .header input, .header button {\r\n background: #131722;\r\n border: 1px solid #2a2e39;\r\n color: #d1d4dc;\r\n padding: 6px 12px;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n outline: none;\r\n }\r\n .header button {\r\n background: #2962ff;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: 0.2s;\r\n }\r\n .header button:hover { background: #1e4bd2; }\r\n .header .status { margin-left: auto; font-size: 14px; color: #787b86; }\r\n .main-panel {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n .chart-container {\r\n flex: 3;\r\n min-width: 600px;\r\n background: #2a2e39;\r\n border-radius: 8px;\r\n padding: 10px;\r\n position: relative;\r\n }\r\n #chart {\r\n width: 100%;\r\n height: 500px;\r\n }\r\n .analysis-panel {\r\n flex: 1;\r\n min-width: 280px;\r\n background: #2a2e39;\r\n border-radius: 8px;\r\n padding: 15px;\r\n max-height: 700px;\r\n overflow-y: auto;\r\n }\r\n .analysis-panel h3 {\r\n color: #fff;\r\n border-bottom: 1px solid #3a3e4a;\r\n padding-bottom: 8px;\r\n margin-bottom: 12px;\r\n font-size: 16px;\r\n }\r\n .analysis-item {\r\n background: #1e222d;\r\n margin-bottom: 8px;\r\n padding: 8px 12px;\r\n border-radius: 4px;\r\n border-right: 3px solid #2962ff;\r\n font-size: 13px;\r\n line-height: 1.6;\r\n }\r\n .analysis-item .badge {\r\n display: inline-block;\r\n background: #2962ff;\r\n color: #fff;\r\n padding: 0 8px;\r\n border-radius: 12px;\r\n font-size: 11px;\r\n margin-right: 6px;\r\n }\r\n .analysis-item .positive { color: #26a69a; }\r\n .analysis-item .negative { color: #ef5350; }\r\n .footer {\r\n text-align: center;\r\n font-size: 12px;\r\n color: #787b86;\r\n margin-top: 20px;\r\n }\r\n ::-webkit-scrollbar { width: 6px; }\r\n ::-webkit-scrollbar-track { background: #2a2e39; }\r\n ::-webkit-scrollbar-thumb { background: #4a4e5a; border-radius: 3px; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n \r\n <div class=\"header\">\r\n <label><i class=\"fas fa-chart-line\"><\/i> Symbol:<\/label>\r\n <select id=\"symbolSelect\">\r\n <optgroup label=\"Majors\">\r\n <option value=\"EURUSD=X\">EUR\/USD<\/option>\r\n <option value=\"GBPUSD=X\">GBP\/USD<\/option>\r\n <option value=\"USDJPY=X\">USD\/JPY<\/option>\r\n <option value=\"USDCHF=X\">USD\/CHF<\/option>\r\n <option value=\"AUDUSD=X\">AUD\/USD<\/option>\r\n <option value=\"USDCAD=X\">USD\/CAD<\/option>\r\n <option value=\"NZDUSD=X\">NZD\/USD<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Minors (Crosses)\">\r\n <option value=\"EURGBP=X\">EUR\/GBP<\/option>\r\n <option value=\"EURJPY=X\">EUR\/JPY<\/option>\r\n <option value=\"GBPJPY=X\">GBP\/JPY<\/option>\r\n <option value=\"AUDJPY=X\">AUD\/JPY<\/option>\r\n <option value=\"CADJPY=X\">CAD\/JPY<\/option>\r\n <option value=\"NZDJPY=X\">NZD\/JPY<\/option>\r\n <option value=\"EURCHF=X\">EUR\/CHF<\/option>\r\n <option value=\"GBPCHF=X\">GBP\/CHF<\/option>\r\n <option value=\"AUDCAD=X\">AUD\/CAD<\/option>\r\n <option value=\"AUDCHF=X\">AUD\/CHF<\/option>\r\n <option value=\"CADCHF=X\">CAD\/CHF<\/option>\r\n <option value=\"EURAUD=X\">EUR\/AUD<\/option>\r\n <option value=\"EURNZD=X\">EUR\/NZD<\/option>\r\n <option value=\"GBPAUD=X\">GBP\/AUD<\/option>\r\n <option value=\"GBPNZD=X\">GBP\/NZD<\/option>\r\n <option value=\"NZDCAD=X\">NZD\/CAD<\/option>\r\n <option value=\"NZDCHF=X\">NZD\/CHF<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Exotics\">\r\n <option value=\"USDTRY=X\">USD\/TRY<\/option>\r\n <option value=\"USDZAR=X\">USD\/ZAR<\/option>\r\n <option value=\"USDMXN=X\">USD\/MXN<\/option>\r\n <option value=\"USDSGD=X\">USD\/SGD<\/option>\r\n <option value=\"USDHKD=X\">USD\/HKD<\/option>\r\n <option value=\"USDNOK=X\">USD\/NOK<\/option>\r\n <option value=\"USDSEK=X\">USD\/SEK<\/option>\r\n <option value=\"USDDKK=X\">USD\/DKK<\/option>\r\n <option value=\"USDPLN=X\">USD\/PLN<\/option>\r\n <option value=\"USDCZK=X\">USD\/CZK<\/option>\r\n <option value=\"USDHUF=X\">USD\/HUF<\/option>\r\n <option value=\"USDILS=X\">USD\/ILS<\/option>\r\n <option value=\"USDTHB=X\">USD\/THB<\/option>\r\n <option value=\"USDKRW=X\">USD\/KRW<\/option>\r\n <option value=\"USDINR=X\">USD\/INR<\/option>\r\n <option value=\"USDPHP=X\">USD\/PHP<\/option>\r\n <option value=\"USDTWD=X\">USD\/TWD<\/option>\r\n <\/optgroup>\r\n <\/select>\r\n <label>Interval:<\/label>\r\n <select id=\"intervalSelect\">\r\n <option value=\"1m\">1 min<\/option>\r\n <option value=\"5m\">5 min<\/option>\r\n <option value=\"15m\">15 min<\/option>\r\n <option value=\"30m\">30 min<\/option>\r\n <option value=\"1h\">1 hour<\/option>\r\n <option value=\"1d\" selected>Daily<\/option>\r\n <option value=\"1wk\">Weekly<\/option>\r\n <option value=\"1mo\">Monthly<\/option>\r\n <\/select>\r\n <button id=\"loadBtn\"><i class=\"fas fa-sync-alt\"><\/i> Load & Analyze<\/button>\r\n <span class=\"status\" id=\"statusMsg\">Ready<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"main-panel\">\r\n <div class=\"chart-container\">\r\n <div id=\"chart\"><\/div>\r\n <\/div>\r\n <div class=\"analysis-panel\" id=\"analysisPanel\">\r\n <h3><i class=\"fas fa-microscope\"><\/i> Analysis Results<\/h3>\r\n <div id=\"analysisContent\">\r\n <div class=\"analysis-item\">Press \"Load & Analyze\" to start.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer\">Client-side tool \u00b7 Data from Yahoo Finance \u00b7 All calculations in your browser<\/div>\r\n<\/div>\r\n\r\n<script>\r\n (function() {\r\n \/\/ ---------- Ensure library is loaded ----------\r\n if (typeof LightweightCharts === 'undefined') {\r\n document.getElementById('statusMsg').innerHTML =\r\n '<i class=\"fas fa-exclamation-triangle\" style=\"color:#ef5350;\"><\/i> Error: Lightweight Charts library not loaded. Check internet connection.';\r\n return;\r\n }\r\n\r\n \/\/ ---------- Chart setup ----------\r\n const chartElement = document.getElementById('chart');\r\n const chart = LightweightCharts.createChart(chartElement, {\r\n width: chartElement.clientWidth,\r\n height: 500,\r\n layout: { backgroundColor: '#1e222d', textColor: '#d1d4dc' },\r\n grid: { vertLines: { color: '#2a2e39' }, horzLines: { color: '#2a2e39' } },\r\n timeScale: { timeVisible: true, secondsVisible: false, borderColor: '#2a2e39' },\r\n crosshair: { mode: LightweightCharts.CrosshairMode.Normal },\r\n });\r\n\r\n \/\/ ---------- Create series (will be reused) ----------\r\n let candleSeries = null;\r\n let sma20Series = null,\r\n sma50Series = null,\r\n sma200Series = null,\r\n ema12Series = null;\r\n let bbUpper = null,\r\n bbLower = null;\r\n let rsiSeries = null,\r\n macdSeries = null,\r\n signalSeries = null,\r\n volumeSeries = null;\r\n\r\n \/\/ ---------- Utility math functions (unchanged) ----------\r\n function sma(data, period) {\r\n const result = [];\r\n for (let i = 0; i < data.length; i++) {\r\n if (i < period - 1) { result.push(null); continue; }\r\n let sum = 0;\r\n for (let j = i - period + 1; j <= i; j++) sum += data[j];\r\n result.push(sum \/ period);\r\n }\r\n return result;\r\n }\r\n\r\n function ema(data, period) {\r\n const result = [];\r\n const multiplier = 2 \/ (period + 1);\r\n let prevEma = data[0];\r\n for (let i = 0; i < data.length; i++) {\r\n if (i === 0) { result.push(data[0]); continue; }\r\n const val = data[i] * multiplier + prevEma * (1 - multiplier);\r\n result.push(val);\r\n prevEma = val;\r\n }\r\n return result;\r\n }\r\n\r\n function rsi(data, period = 14) {\r\n const result = [];\r\n let gain = 0,\r\n loss = 0;\r\n for (let i = 1; i < data.length; i++) {\r\n const diff = data[i] - data[i - 1];\r\n if (i <= period) {\r\n if (diff >= 0) gain += diff;\r\n else loss -= diff;\r\n if (i === period) {\r\n let avgGain = gain \/ period,\r\n avgLoss = loss \/ period;\r\n const rs = avgLoss === 0 ? 100 : avgGain \/ avgLoss;\r\n result.push(100 - (100 \/ (1 + rs)));\r\n } else result.push(null);\r\n } else {\r\n const diff2 = data[i] - data[i - 1];\r\n let gain2 = diff2 >= 0 ? diff2 : 0,\r\n loss2 = diff2 < 0 ? -diff2 : 0;\r\n let prevGain = result[result.length - 1] !== null ? gain : 0;\r\n let prevLoss = loss;\r\n let avgGain2 = (prevGain * (period - 1) + gain2) \/ period;\r\n let avgLoss2 = (prevLoss * (period - 1) + loss2) \/ period;\r\n const rs2 = avgLoss2 === 0 ? 100 : avgGain2 \/ avgLoss2;\r\n result.push(100 - (100 \/ (1 + rs2)));\r\n gain = avgGain2;\r\n loss = avgLoss2;\r\n }\r\n }\r\n return result;\r\n }\r\n\r\n function macd(data, fast = 12, slow = 26, signal = 9) {\r\n const emaFast = ema(data, fast);\r\n const emaSlow = ema(data, slow);\r\n const macdLine = emaFast.map((v, i) => (v !== null && emaSlow[i] !== null) ? v - emaSlow[i] : null);\r\n const signalLine = ema(macdLine.filter(v => v !== null), signal);\r\n const fullSignal = [];\r\n let idx = 0;\r\n for (let i = 0; i < macdLine.length; i++) {\r\n if (macdLine[i] === null) fullSignal.push(null);\r\n else fullSignal.push(signalLine[idx++]);\r\n }\r\n const histogram = macdLine.map((v, i) => (v !== null && fullSignal[i] !== null) ? v - fullSignal[i] : null);\r\n return { macdLine, signalLine: fullSignal, histogram };\r\n }\r\n\r\n function bollingerBands(data, period = 20, multiplier = 2) {\r\n const smaVals = sma(data, period);\r\n const upper = [],\r\n lower = [];\r\n for (let i = 0; i < data.length; i++) {\r\n if (i < period - 1) { upper.push(null);\r\n lower.push(null); continue; }\r\n let sumSq = 0;\r\n for (let j = i - period + 1; j <= i; j++) sumSq += (data[j] - smaVals[i]) ** 2;\r\n const std = Math.sqrt(sumSq \/ period);\r\n upper.push(smaVals[i] + multiplier * std);\r\n lower.push(smaVals[i] - multiplier * std);\r\n }\r\n return { upper, lower, middle: smaVals };\r\n }\r\n\r\n \/\/ ---------- Pattern detection (Price Action) ----------\r\n function detectCandlePatterns(candles) {\r\n const patterns = [];\r\n for (let i = 1; i < candles.length; i++) {\r\n const c = candles[i];\r\n const body = Math.abs(c.close - c.open);\r\n const upperWick = c.high - Math.max(c.open, c.close);\r\n const lowerWick = Math.min(c.open, c.close) - c.low;\r\n const range = c.high - c.low;\r\n if (range === 0) continue;\r\n if (body \/ range < 0.1) {\r\n patterns.push({ index: i, type: 'Doji', desc: 'Indecision' });\r\n }\r\n if (body \/ range < 0.3 && lowerWick > 2 * body && upperWick < body) {\r\n patterns.push({ index: i, type: 'Hammer', desc: 'Bullish reversal' });\r\n }\r\n if (body \/ range < 0.3 && upperWick > 2 * body && lowerWick < body) {\r\n patterns.push({ index: i, type: 'Shooting Star', desc: 'Bearish reversal' });\r\n }\r\n if (i > 0) {\r\n const prev = candles[i - 1];\r\n if (prev.close < prev.open && c.close > c.open && c.open < prev.close && c.close > prev.open) {\r\n patterns.push({ index: i, type: 'Bullish Engulfing', desc: 'Strong bullish reversal' });\r\n }\r\n }\r\n if (i > 0) {\r\n const prev = candles[i - 1];\r\n if (prev.close > prev.open && c.close < c.open && c.open > prev.close && c.close < prev.open) {\r\n patterns.push({ index: i, type: 'Bearish Engulfing', desc: 'Strong bearish reversal' });\r\n }\r\n }\r\n }\r\n return patterns;\r\n }\r\n\r\n \/\/ ---------- Support \/ Resistance (Classic) ----------\r\n function findSupportResistance(candles, lookback = 5) {\r\n const levels = [];\r\n for (let i = lookback; i < candles.length - lookback; i++) {\r\n const left = candles.slice(i - lookback, i);\r\n const right = candles.slice(i + 1, i + 1 + lookback);\r\n const high = candles[i].high;\r\n const low = candles[i].low;\r\n const isPivotHigh = left.every(c => c.high < high) && right.every(c => c.high < high);\r\n const isPivotLow = left.every(c => c.low > low) && right.every(c => c.low > low);\r\n if (isPivotHigh) levels.push({ price: high, type: 'resistance', index: i });\r\n if (isPivotLow) levels.push({ price: low, type: 'support', index: i });\r\n }\r\n return levels;\r\n }\r\n\r\n \/\/ ---------- Head & Shoulders (simplified) ----------\r\n function detectHeadAndShoulders(candles) {\r\n if (candles.length < 30) return null;\r\n const levels = findSupportResistance(candles, 3);\r\n const highs = levels.filter(l => l.type === 'resistance').map(l => ({ price: l.price, index: l.index }));\r\n if (highs.length < 3) return null;\r\n for (let i = 0; i < highs.length - 2; i++) {\r\n const a = highs[i],\r\n b = highs[i + 1],\r\n c = highs[i + 2];\r\n if (a.price < b.price && c.price < b.price && Math.abs(a.price - c.price) \/ a.price < 0.02) {\r\n return { type: 'Head and Shoulders', desc: 'Potential bearish reversal', index: b.index };\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n \/\/ ---------- Elliott Wave (simplified) ----------\r\n function elliottWaves(candles) {\r\n if (candles.length < 10) return null;\r\n const closes = candles.map(c => c.close);\r\n const diffs = [];\r\n for (let i = 1; i < closes.length; i++) diffs.push(closes[i] - closes[i - 1]);\r\n let waveCount = 0,\r\n currentDir = 0;\r\n const waves = [];\r\n for (let i = 0; i < diffs.length; i++) {\r\n const d = diffs[i];\r\n if (d === 0) continue;\r\n const dir = d > 0 ? 1 : -1;\r\n if (currentDir === 0) { currentDir = dir;\r\n waveCount = 1; } else if (dir === currentDir) { waveCount++; } else {\r\n waves.push({ dir: currentDir, count: waveCount });\r\n currentDir = dir;\r\n waveCount = 1;\r\n }\r\n }\r\n if (currentDir !== 0) waves.push({ dir: currentDir, count: waveCount });\r\n if (waves.length >= 5) {\r\n let up = 0,\r\n down = 0;\r\n for (let i = 0; i < 5 && i < waves.length; i++) {\r\n if (waves[i].dir === 1) up++;\r\n else down++;\r\n }\r\n if (up === 5) return { type: 'Elliott 5-Wave Up', desc: 'Bullish 5-wave impulse' };\r\n if (down === 5) return { type: 'Elliott 5-Wave Down', desc: 'Bearish 5-wave impulse' };\r\n if (waves.length >= 3 && waves[0].dir !== waves[2].dir) {\r\n return { type: 'Elliott 3-Wave Correction', desc: 'Corrective pattern' };\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n \/\/ ---------- Harmonic (Gartley) ----------\r\n function detectHarmonicPatterns(candles) {\r\n if (candles.length < 10) return null;\r\n const prices = candles.map(c => c.close);\r\n const n = prices.length;\r\n for (let i = n - 10; i < n - 4; i++) {\r\n const x = prices[i],\r\n a = prices[i + 1],\r\n b = prices[i + 2],\r\n c = prices[i + 3],\r\n d = prices[i + 4];\r\n const xa = Math.abs(a - x);\r\n const ab = Math.abs(b - a);\r\n const bc = Math.abs(c - b);\r\n const cd = Math.abs(d - c);\r\n if (xa === 0 || ab === 0 || bc === 0) continue;\r\n const ratioAB = ab \/ xa;\r\n const ratioBC = bc \/ ab;\r\n const ratioCD = cd \/ bc;\r\n if (Math.abs(ratioAB - 0.618) < 0.05 && Math.abs(ratioBC - 0.618) < 0.05 && ratioCD > 1.2 && ratioCD < 1.7) {\r\n return { type: 'Gartley Pattern', desc: `Ratios: AB\/XA=${ratioAB.toFixed(3)}, BC\/AB=${ratioBC.toFixed(3)}, CD\/BC=${ratioCD.toFixed(3)}` };\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n \/\/ ---------- Supply \/ Demand (Volume based) ----------\r\n function supplyDemandZones(candles) {\r\n if (candles.length < 10) return null;\r\n const volumes = candles.map(c => c.volume);\r\n const avgVol = volumes.reduce((a, b) => a + b, 0) \/ volumes.length;\r\n const zones = [];\r\n for (let i = 0; i < candles.length; i++) {\r\n if (candles[i].volume > avgVol * 1.5) {\r\n zones.push({\r\n price: (candles[i].high + candles[i].low) \/ 2,\r\n volume: candles[i].volume,\r\n type: candles[i].close > candles[i].open ? 'demand' : 'supply',\r\n index: i\r\n });\r\n }\r\n }\r\n return zones;\r\n }\r\n\r\n \/\/ ---------- Main fetch & analyze ----------\r\n async function fetchAndAnalyze() {\r\n const symbol = document.getElementById('symbolSelect').value;\r\n const interval = document.getElementById('intervalSelect').value;\r\n const status = document.getElementById('statusMsg');\r\n status.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Fetching data...';\r\n\r\n try {\r\n \/\/ Use a reliable proxy (allorigins)\r\n const proxy = 'https:\/\/api.allorigins.win\/raw?url=';\r\n const url = `https:\/\/query1.finance.yahoo.com\/v8\/finance\/chart\/${symbol}?interval=${interval}&range=1y`;\r\n const response = await fetch(proxy + encodeURIComponent(url));\r\n if (!response.ok) throw new Error(`HTTP error ${response.status}`);\r\n const json = await response.json();\r\n const result = json.chart.result[0];\r\n if (!result) throw new Error('No data returned');\r\n const timestamps = result.timestamp;\r\n const quotes = result.indicators.quote[0];\r\n const closes = quotes.close;\r\n const opens = quotes.open;\r\n const highs = quotes.high;\r\n const lows = quotes.low;\r\n const volumes = quotes.volume;\r\n const rawData = [];\r\n for (let i = 0; i < timestamps.length; i++) {\r\n if (closes[i] !== null && opens[i] !== null && highs[i] !== null && lows[i] !== null) {\r\n rawData.push({\r\n time: new Date(timestamps[i] * 1000),\r\n open: opens[i],\r\n high: highs[i],\r\n low: lows[i],\r\n close: closes[i],\r\n volume: volumes[i] || 0,\r\n });\r\n }\r\n }\r\n if (rawData.length < 10) throw new Error('Insufficient data points');\r\n\r\n const candleData = rawData.map(d => ({\r\n time: d.time.getTime() \/ 1000,\r\n open: d.open,\r\n high: d.high,\r\n low: d.low,\r\n close: d.close,\r\n }));\r\n\r\n \/\/ ---------- Re-create candle series ----------\r\n if (candleSeries) chart.removeSeries(candleSeries);\r\n candleSeries = chart.addCandlestickSeries({\r\n upColor: '#26a69a',\r\n downColor: '#ef5350',\r\n borderUpColor: '#26a69a',\r\n borderDownColor: '#ef5350',\r\n wickUpColor: '#26a69a',\r\n wickDownColor: '#ef5350',\r\n });\r\n candleSeries.setData(candleData);\r\n\r\n \/\/ ---------- Remove old indicator series ----------\r\n const seriesToRemove = [sma20Series, sma50Series, sma200Series, ema12Series,\r\n bbUpper, bbLower, rsiSeries, macdSeries, signalSeries, volumeSeries\r\n ];\r\n seriesToRemove.forEach(s => { if (s) chart.removeSeries(s); });\r\n\r\n const closesArr = rawData.map(d => d.close);\r\n\r\n \/\/ SMA\r\n const sma20 = sma(closesArr, 20);\r\n sma20Series = chart.addLineSeries({ color: '#ff9800', lineWidth: 1, title: 'SMA 20' });\r\n sma20Series.setData(sma20.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n const sma50 = sma(closesArr, 50);\r\n sma50Series = chart.addLineSeries({ color: '#ffeb3b', lineWidth: 1, title: 'SMA 50' });\r\n sma50Series.setData(sma50.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n const sma200 = sma(closesArr, 200);\r\n sma200Series = chart.addLineSeries({ color: '#f44336', lineWidth: 1, title: 'SMA 200' });\r\n sma200Series.setData(sma200.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n \/\/ EMA\r\n const ema12 = ema(closesArr, 12);\r\n ema12Series = chart.addLineSeries({ color: '#9c27b0', lineWidth: 1, title: 'EMA 12' });\r\n ema12Series.setData(ema12.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n \/\/ Bollinger Bands\r\n const bb = bollingerBands(closesArr, 20, 2);\r\n bbUpper = chart.addLineSeries({ color: '#03a9f4', lineWidth: 1, title: 'BB Upper' });\r\n bbUpper.setData(bb.upper.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n bbLower = chart.addLineSeries({ color: '#03a9f4', lineWidth: 1, title: 'BB Lower' });\r\n bbLower.setData(bb.lower.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n \/\/ RSI\r\n const rsiVals = rsi(closesArr, 14);\r\n rsiSeries = chart.addLineSeries({ color: '#ff5722', lineWidth: 1, title: 'RSI 14', priceScaleId: 'rsi' });\r\n chart.priceScale('rsi').applyOptions({ autoScale: true, scaleMargins: { top: 0.8, bottom: 0 } });\r\n rsiSeries.setData(rsiVals.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n \/\/ MACD\r\n const macdRes = macd(closesArr);\r\n macdSeries = chart.addLineSeries({ color: '#4caf50', lineWidth: 1, title: 'MACD', priceScaleId: 'macd' });\r\n chart.priceScale('macd').applyOptions({ autoScale: true, scaleMargins: { top: 0.8, bottom: 0 } });\r\n macdSeries.setData(macdRes.macdLine.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n signalSeries = chart.addLineSeries({ color: '#ffc107', lineWidth: 1, title: 'Signal', priceScaleId: 'macd' });\r\n signalSeries.setData(macdRes.signalLine.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n \/\/ Volume\r\n volumeSeries = chart.addHistogramSeries({ color: '#78909c', priceScaleId: 'volume' });\r\n chart.priceScale('volume').applyOptions({ autoScale: true, scaleMargins: { top: 0.8, bottom: 0 } });\r\n volumeSeries.setData(rawData.map(d => ({ time: d.time.getTime() \/ 1000, value: d.volume, color: d.close > d.open ? '#26a69a' : '#ef5350' })));\r\n\r\n \/\/ ---------- Build analysis HTML (all in English) ----------\r\n const analysisDiv = document.getElementById('analysisContent');\r\n let html = '';\r\n\r\n \/\/ 1. Price Action\r\n const patterns = detectCandlePatterns(rawData);\r\n if (patterns.length) {\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-candle\"><\/i> Price Action<\/span>`;\r\n patterns.slice(0, 5).forEach(p => {\r\n html += `<div>\ud83d\udccd Candle ${p.index}: <strong>${p.type}<\/strong> \u2014 ${p.desc}<\/div>`;\r\n });\r\n html += `<\/div>`;\r\n } else {\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-candle\"><\/i> Price Action<\/span>No patterns detected.<\/div>`;\r\n }\r\n\r\n \/\/ 2. Classic (S\/R + Head & Shoulders)\r\n const levels = findSupportResistance(rawData, 5);\r\n if (levels.length) {\r\n const supports = levels.filter(l => l.type === 'support').slice(0, 3);\r\n const resistances = levels.filter(l => l.type === 'resistance').slice(0, 3);\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-arrow-up\"><\/i> Classic<\/span>`;\r\n if (supports.length) html += `Supports: ${supports.map(s => s.price.toFixed(5)).join(', ')}<br>`;\r\n if (resistances.length) html += `Resistances: ${resistances.map(r => r.price.toFixed(5)).join(', ')}`;\r\n const hs = detectHeadAndShoulders(rawData);\r\n if (hs) html += `<br>\ud83e\udde0 ${hs.type}: ${hs.desc}`;\r\n html += `<\/div>`;\r\n }\r\n\r\n \/\/ 3. Indicators\r\n const lastClose = closesArr[closesArr.length - 1];\r\n const lastRsi = rsiVals[rsiVals.length - 1];\r\n const lastMacd = macdRes.macdLine[macdRes.macdLine.length - 1];\r\n const lastSignal = macdRes.signalLine[macdRes.signalLine.length - 1];\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-calculator\"><\/i> Indicators<\/span>`;\r\n html += `RSI (14): ${lastRsi !== null ? lastRsi.toFixed(2) : 'N\/A'} `;\r\n if (lastRsi !== null && lastRsi > 70) html += `<span class=\"negative\">(Overbought)<\/span>`;\r\n else if (lastRsi !== null && lastRsi < 30) html += `<span class=\"positive\">(Oversold)<\/span>`;\r\n html += `<br>MACD: ${lastMacd !== null ? lastMacd.toFixed(4) : 'N\/A'} | Signal: ${lastSignal !== null ? lastSignal.toFixed(4) : 'N\/A'}`;\r\n if (lastMacd !== null && lastSignal !== null) {\r\n if (lastMacd > lastSignal) html += ` <span class=\"positive\">(Bullish)<\/span>`;\r\n else html += ` <span class=\"negative\">(Bearish)<\/span>`;\r\n }\r\n html += `<\/div>`;\r\n\r\n \/\/ 4. Elliott\r\n const elliott = elliottWaves(rawData);\r\n if (elliott) html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-wave-square\"><\/i> Elliott<\/span>${elliott.type}: ${elliott.desc}<\/div>`;\r\n else html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-wave-square\"><\/i> Elliott<\/span>No clear wave pattern.<\/div>`;\r\n\r\n \/\/ 5. Harmonic\r\n const harmonic = detectHarmonicPatterns(rawData);\r\n if (harmonic) html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-gem\"><\/i> Harmonic<\/span>${harmonic.type}: ${harmonic.desc}<\/div>`;\r\n else html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-gem\"><\/i> Harmonic<\/span>No harmonic pattern found.<\/div>`;\r\n\r\n \/\/ 6. Supply \/ Demand\r\n const zones = supplyDemandZones(rawData);\r\n if (zones && zones.length) {\r\n const supply = zones.filter(z => z.type === 'supply').slice(0, 3);\r\n const demand = zones.filter(z => z.type === 'demand').slice(0, 3);\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-balance-scale\"><\/i> Supply\/Demand<\/span>`;\r\n if (supply.length) html += `Supply at: ${supply.map(z => z.price.toFixed(5)).join(', ')}<br>`;\r\n if (demand.length) html += `Demand at: ${demand.map(z => z.price.toFixed(5)).join(', ')}`;\r\n html += `<\/div>`;\r\n }\r\n\r\n \/\/ 7. Fundamental (simulated)\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-newspaper\"><\/i> Fundamental<\/span>`;\r\n html += `\ud83d\udcf0 (Simulated) Fed rate unchanged. Eurozone inflation 2.1% reported. Next ECB meeting in July.`;\r\n html += `<\/div>`;\r\n\r\n \/\/ 8. Sentiment (simulated)\r\n const sentiment = Math.random() * 100;\r\n const sentimentText = sentiment > 60 ? 'Bullish' : sentiment < 40 ? 'Bearish' : 'Neutral';\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-smile\"><\/i> Sentiment<\/span>`;\r\n html += `Optimism Index: ${sentiment.toFixed(0)}% \u2014 ${sentimentText}`;\r\n html += `<\/div>`;\r\n\r\n \/\/ 9. Volume\r\n const lastVol = rawData[rawData.length - 1].volume;\r\n const avgVol = rawData.reduce((a, b) => a + b.volume, 0) \/ rawData.length;\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-chart-bar\"><\/i> Volume<\/span>`;\r\n html += `Last: ${lastVol.toLocaleString()} | Avg: ${avgVol.toLocaleString()}<br>`;\r\n html += `Ratio: ${((lastVol \/ avgVol) * 100).toFixed(0)}%`;\r\n if (lastVol > avgVol * 1.2) html += ` <span class=\"positive\">(High volume)<\/span>`;\r\n else if (lastVol < avgVol * 0.8) html += ` <span class=\"negative\">(Low volume)<\/span>`;\r\n html += `<\/div>`;\r\n\r\n analysisDiv.innerHTML = html;\r\n status.innerHTML = `<i class=\"fas fa-check-circle\" style=\"color:#26a69a;\"><\/i> Loaded (${rawData.length} candles)`;\r\n\r\n chart.resize(chartElement.clientWidth, 500);\r\n\r\n } catch (error) {\r\n document.getElementById('statusMsg').innerHTML =\r\n `<i class=\"fas fa-exclamation-triangle\" style=\"color:#ef5350;\"><\/i> Error: ${error.message}`;\r\n console.error(error);\r\n }\r\n }\r\n\r\n \/\/ ---------- Event listeners ----------\r\n document.getElementById('loadBtn').addEventListener('click', fetchAndAnalyze);\r\n\r\n window.addEventListener('load', () => {\r\n fetchAndAnalyze();\r\n });\r\n\r\n window.addEventListener('resize', () => {\r\n const container = document.getElementById('chart');\r\n chart.resize(container.clientWidth, 500);\r\n });\r\n\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-56c981b e-flex e-con-boxed e-con e-parent\" data-id=\"56c981b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-09d61a4 elementor-widget elementor-widget-wd_text_block\" data-id=\"09d61a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wd_text_block.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"wd-text-block reset-last-child text-left\">\n\t\t\t\n\t\t\t<p><\/p><section style=\"max-width: 1200px; margin: 40px auto; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #d1d4dc; line-height: 1.7; padding: 0 15px;\"><p><\/p><header style=\"text-align: center; margin-bottom: 40px; padding: 30px 20px; background: linear-gradient(135deg, #1e222d 0%, #2a2e39 100%); border-radius: 12px; border: 1px solid #363a45;\"><span style=\"background: rgba(41, 98, 255, 0.15); color: #2962ff; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 12px;\">All-In-One Trading Suite<\/span><h1 style=\"font-size: 2.2rem; color: #ffffff; margin-bottom: 15px; font-weight: bold;\">Real-Time Forex Technical Analysis Tool<\/h1><p style=\"font-size: 1.05rem; color: #b2b5be; max-width: 800px; margin: 0 auto;\">Analyze major, minor, and exotic currency pairs in seconds. Powered by automated technical indicators, market sentiment evaluation, and price action pattern scanning\u2014100% free and browser-based.<\/p><\/header><p><\/p><div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 50px;\"><div style=\"background: #2a2e39; padding: 24px; border-radius: 10px; border-top: 3px solid #2962ff;\"><h3 style=\"color: #fff; font-size: 1.15rem; margin-bottom: 10px;\">\ud83d\udcc8 Automated Price Action<\/h3><p style=\"font-size: 0.92rem; color: #b2b5be;\">Instantly scans candlesticks for high-probability patterns such as Doji, Hammer, Shooting Star, and Bullish\/Bearish Engulfing signals.<\/p><\/div><div style=\"background: #2a2e39; padding: 24px; border-radius: 10px; border-top: 3px solid #00bcd4;\"><h3 style=\"color: #fff; font-size: 1.15rem; margin-bottom: 10px;\">\u2699\ufe0f Multi-Indicator Engine<\/h3><p style=\"font-size: 0.92rem; color: #b2b5be;\">Integrates SMA (20, 50, 200), EMA 12, Bollinger Bands, RSI (14), and MACD crossovers to give you clear bullish or bearish insights.<\/p><\/div><div style=\"background: #2a2e39; padding: 24px; border-radius: 10px; border-top: 3px solid #26a69a;\"><h3 style=\"color: #fff; font-size: 1.15rem; margin-bottom: 10px;\">\ud83d\udee1\ufe0f Key Levels & Zones<\/h3><p style=\"font-size: 0.92rem; color: #b2b5be;\">Automatically identifies classic Support & Resistance pivot points alongside volume-weighted Supply and Demand zones.<\/p><\/div><\/div><p><\/p><article style=\"background: #2a2e39; padding: 35px; border-radius: 12px; margin-bottom: 40px; border: 1px solid #363a45;\"><h2 style=\"color: #ffffff; font-size: 1.6rem; margin-bottom: 18px; border-bottom: 2px solid #3a3e4a; padding-bottom: 10px;\">How to Use the Technical Scanner for Smarter Forex Trades<\/h2><p style=\"margin-bottom: 15px;\">Navigating volatile foreign exchange markets requires fast, structured data evaluation. Whether you are a day trader scalping 5-minute charts or a swing trader reviewing daily candle formations, this tool consolidates core technical analysis metrics into one interactive interface.<\/p><h3 style=\"color: #2962ff; font-size: 1.25rem; margin-top: 25px; margin-bottom: 10px;\">1. Select Currency Pair and Timeframe<\/h3><p style=\"margin-bottom: 15px;\">Choose from over 30 global Forex pairs grouped into Majors (EUR\/USD, GBP\/USD, USD\/JPY), Crosses, and Exotics. Select your desired candle timeframe ranging from 1-minute intraday charts to daily and monthly trend horizons.<\/p><h3 style=\"color: #2962ff; font-size: 1.25rem; margin-top: 25px; margin-bottom: 10px;\">2. Interpret Technical Analysis Output<\/h3><p style=\"margin-bottom: 15px;\">The right-hand panel automatically evaluates technical factors as soon as price data feeds into the lightweight charting canvas:<\/p><ul style=\"padding-left: 20px; margin-bottom: 20px; color: #b2b5be;\"><li style=\"margin-bottom: 8px;\"><strong style=\"color: #fff;\">Relative Strength Index (RSI):<\/strong> Detects potential market reversals by highlighting overbought conditions (above 70) or oversold levels (below 30).<\/li><li style=\"margin-bottom: 8px;\"><strong style=\"color: #fff;\">Moving Average Convergence Divergence (MACD):<\/strong> Tracks momentum momentum shifts via signal line crossovers.<\/li><li style=\"margin-bottom: 8px;\"><strong style=\"color: #fff;\">Pattern & Harmonic Scans:<\/strong> Scans structure setups including Head & Shoulders formations, Elliott 5-Wave cycles, and Gartley harmonic ratios.<\/li><\/ul><div style=\"background: #1e222d; padding: 20px; border-left: 4px solid #ff9800; border-radius: 4px; margin-top: 25px;\"><strong style=\"color: #ff9800; display: block; margin-bottom: 5px;\">\u26a1 Pro Trader Tip:<\/strong><br \/><span style=\"font-size: 0.95rem; color: #b2b5be;\">Always look for confluence. A buy signal is significantly stronger when an oversold RSI aligns with a major Support level and a Bullish Engulfing candlestick on a higher timeframe.<\/span><\/div><\/article><p><\/p><section style=\"background: #2a2e39; padding: 35px; border-radius: 12px; border: 1px solid #363a45;\"><h2 style=\"color: #ffffff; font-size: 1.6rem; margin-bottom: 20px;\">Frequently Asked Questions (FAQ)<\/h2><div style=\"margin-bottom: 20px;\"><h4 style=\"color: #fff; font-size: 1.1rem; margin-bottom: 5px;\">Is this Forex analysis tool completely free?<\/h4><p style=\"color: #b2b5be; font-size: 0.95rem;\">Yes. The Forex Technical Analysis Tool on Tendify runs entirely in your client web browser with zero API keys or subscriptions required.<\/p><\/div><div style=\"margin-bottom: 20px;\"><h4 style=\"color: #fff; font-size: 1.1rem; margin-bottom: 5px;\">Where does the market chart data come from?<\/h4><p style=\"color: #b2b5be; font-size: 0.95rem;\">Price quotes and historical candle distributions are sourced dynamically from real-time global financial data feeds.<\/p><\/div><div><h4 style=\"color: #fff; font-size: 1.1rem; margin-bottom: 5px;\">Can I use this tool for crypto or stock markets?<\/h4><p style=\"color: #b2b5be; font-size: 0.95rem;\">This specific configuration focuses on major, minor, and exotic foreign exchange pairs. Check our main platform directory on Tendify for equity and crypto analysis suites.<\/p><\/div><\/section><\/section>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Use our free Forex technical analysis tool to scan live charts, detect candlestick patterns, and calculate RSI, MACD, and key levels in real time on Tendify.net.<\/p>","protected":false},"author":15,"featured_media":18976,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[767],"tags":[],"class_list":["post-18972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-b2b-online-tools"],"_links":{"self":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/comments?post=18972"}],"version-history":[{"count":5,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18972\/revisions"}],"predecessor-version":[{"id":18978,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18972\/revisions\/18978"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media\/18976"}],"wp:attachment":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media?parent=18972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/categories?post=18972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/tags?post=18972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Forex Technical Analysis Tool<\/title>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lightweight-charts@4.1.0\/dist\/lightweight-charts.standalone.production.min.js\">\r\n <\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" \/>\r\n <style>\r\n \/* (\u0647\u0645\u0627\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc\u060c \u0628\u062f\u0648\u0646 \u062a\u063a\u06cc\u06cc\u0631) *\/\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: #1e222d;\r\n color: #d1d4dc;\r\n padding: 20px;\r\n }\r\n .container {\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n }\r\n .header {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 10px;\r\n background: #2a2e39;\r\n padding: 12px 20px;\r\n border-radius: 8px;\r\n }\r\n .header label {\r\n color: #b2b5be;\r\n font-weight: bold;\r\n margin-right: 5px;\r\n }\r\n .header select, .header input, .header button {\r\n background: #131722;\r\n border: 1px solid #2a2e39;\r\n color: #d1d4dc;\r\n padding: 6px 12px;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n outline: none;\r\n }\r\n .header button {\r\n background: #2962ff;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: 0.2s;\r\n }\r\n .header button:hover { background: #1e4bd2; }\r\n .header .status { margin-left: auto; font-size: 14px; color: #787b86; }\r\n .main-panel {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n .chart-container {\r\n flex: 3;\r\n min-width: 600px;\r\n background: #2a2e39;\r\n border-radius: 8px;\r\n padding: 10px;\r\n position: relative;\r\n }\r\n #chart {\r\n width: 100%;\r\n height: 500px;\r\n }\r\n .analysis-panel {\r\n flex: 1;\r\n min-width: 280px;\r\n background: #2a2e39;\r\n border-radius: 8px;\r\n padding: 15px;\r\n max-height: 700px;\r\n overflow-y: auto;\r\n }\r\n .analysis-panel h3 {\r\n color: #fff;\r\n border-bottom: 1px solid #3a3e4a;\r\n padding-bottom: 8px;\r\n margin-bottom: 12px;\r\n font-size: 16px;\r\n }\r\n .analysis-item {\r\n background: #1e222d;\r\n margin-bottom: 8px;\r\n padding: 8px 12px;\r\n border-radius: 4px;\r\n border-right: 3px solid #2962ff;\r\n font-size: 13px;\r\n line-height: 1.6;\r\n }\r\n .analysis-item .badge {\r\n display: inline-block;\r\n background: #2962ff;\r\n color: #fff;\r\n padding: 0 8px;\r\n border-radius: 12px;\r\n font-size: 11px;\r\n margin-right: 6px;\r\n }\r\n .analysis-item .positive { color: #26a69a; }\r\n .analysis-item .negative { color: #ef5350; }\r\n .footer {\r\n text-align: center;\r\n font-size: 12px;\r\n color: #787b86;\r\n margin-top: 20px;\r\n }\r\n ::-webkit-scrollbar { width: 6px; }\r\n ::-webkit-scrollbar-track { background: #2a2e39; }\r\n ::-webkit-scrollbar-thumb { background: #4a4e5a; border-radius: 3px; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n \r\n <div class=\"header\">\r\n <label><i class=\"fas fa-chart-line\"><\/i> Symbol:<\/label>\r\n <select id=\"symbolSelect\">\r\n <optgroup label=\"Majors\">\r\n <option value=\"EURUSD=X\">EUR\/USD<\/option>\r\n <option value=\"GBPUSD=X\">GBP\/USD<\/option>\r\n <option value=\"USDJPY=X\">USD\/JPY<\/option>\r\n <option value=\"USDCHF=X\">USD\/CHF<\/option>\r\n <option value=\"AUDUSD=X\">AUD\/USD<\/option>\r\n <option value=\"USDCAD=X\">USD\/CAD<\/option>\r\n <option value=\"NZDUSD=X\">NZD\/USD<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Minors (Crosses)\">\r\n <option value=\"EURGBP=X\">EUR\/GBP<\/option>\r\n <option value=\"EURJPY=X\">EUR\/JPY<\/option>\r\n <option value=\"GBPJPY=X\">GBP\/JPY<\/option>\r\n <option value=\"AUDJPY=X\">AUD\/JPY<\/option>\r\n <option value=\"CADJPY=X\">CAD\/JPY<\/option>\r\n <option value=\"NZDJPY=X\">NZD\/JPY<\/option>\r\n <option value=\"EURCHF=X\">EUR\/CHF<\/option>\r\n <option value=\"GBPCHF=X\">GBP\/CHF<\/option>\r\n <option value=\"AUDCAD=X\">AUD\/CAD<\/option>\r\n <option value=\"AUDCHF=X\">AUD\/CHF<\/option>\r\n <option value=\"CADCHF=X\">CAD\/CHF<\/option>\r\n <option value=\"EURAUD=X\">EUR\/AUD<\/option>\r\n <option value=\"EURNZD=X\">EUR\/NZD<\/option>\r\n <option value=\"GBPAUD=X\">GBP\/AUD<\/option>\r\n <option value=\"GBPNZD=X\">GBP\/NZD<\/option>\r\n <option value=\"NZDCAD=X\">NZD\/CAD<\/option>\r\n <option value=\"NZDCHF=X\">NZD\/CHF<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Exotics\">\r\n <option value=\"USDTRY=X\">USD\/TRY<\/option>\r\n <option value=\"USDZAR=X\">USD\/ZAR<\/option>\r\n <option value=\"USDMXN=X\">USD\/MXN<\/option>\r\n <option value=\"USDSGD=X\">USD\/SGD<\/option>\r\n <option value=\"USDHKD=X\">USD\/HKD<\/option>\r\n <option value=\"USDNOK=X\">USD\/NOK<\/option>\r\n <option value=\"USDSEK=X\">USD\/SEK<\/option>\r\n <option value=\"USDDKK=X\">USD\/DKK<\/option>\r\n <option value=\"USDPLN=X\">USD\/PLN<\/option>\r\n <option value=\"USDCZK=X\">USD\/CZK<\/option>\r\n <option value=\"USDHUF=X\">USD\/HUF<\/option>\r\n <option value=\"USDILS=X\">USD\/ILS<\/option>\r\n <option value=\"USDTHB=X\">USD\/THB<\/option>\r\n <option value=\"USDKRW=X\">USD\/KRW<\/option>\r\n <option value=\"USDINR=X\">USD\/INR<\/option>\r\n <option value=\"USDPHP=X\">USD\/PHP<\/option>\r\n <option value=\"USDTWD=X\">USD\/TWD<\/option>\r\n <\/optgroup>\r\n <\/select>\r\n <label>Interval:<\/label>\r\n <select id=\"intervalSelect\">\r\n <option value=\"1m\">1 min<\/option>\r\n <option value=\"5m\">5 min<\/option>\r\n <option value=\"15m\">15 min<\/option>\r\n <option value=\"30m\">30 min<\/option>\r\n <option value=\"1h\">1 hour<\/option>\r\n <option value=\"1d\" selected>Daily<\/option>\r\n <option value=\"1wk\">Weekly<\/option>\r\n <option value=\"1mo\">Monthly<\/option>\r\n <\/select>\r\n <button id=\"loadBtn\"><i class=\"fas fa-sync-alt\"><\/i> Load & Analyze<\/button>\r\n <span class=\"status\" id=\"statusMsg\">Ready<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"main-panel\">\r\n <div class=\"chart-container\">\r\n <div id=\"chart\"><\/div>\r\n <\/div>\r\n <div class=\"analysis-panel\" id=\"analysisPanel\">\r\n <h3><i class=\"fas fa-microscope\"><\/i> Analysis Results<\/h3>\r\n <div id=\"analysisContent\">\r\n <div class=\"analysis-item\">Press \"Load & Analyze\" to start.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer\">Client-side tool \u00b7 Data from Yahoo Finance \u00b7 All calculations in your browser<\/div>\r\n<\/div>\r\n\r\n<script>\r\n (function() {\r\n \/\/ ---------- Ensure library is loaded ----------\r\n if (typeof LightweightCharts === 'undefined') {\r\n document.getElementById('statusMsg').innerHTML =\r\n '<i class=\"fas fa-exclamation-triangle\" style=\"color:#ef5350;\"><\/i> Error: Lightweight Charts library not loaded. Check internet connection.';\r\n return;\r\n }\r\n\r\n \/\/ ---------- Chart setup ----------\r\n const chartElement = document.getElementById('chart');\r\n const chart = LightweightCharts.createChart(chartElement, {\r\n width: chartElement.clientWidth,\r\n height: 500,\r\n layout: { backgroundColor: '#1e222d', textColor: '#d1d4dc' },\r\n grid: { vertLines: { color: '#2a2e39' }, horzLines: { color: '#2a2e39' } },\r\n timeScale: { timeVisible: true, secondsVisible: false, borderColor: '#2a2e39' },\r\n crosshair: { mode: LightweightCharts.CrosshairMode.Normal },\r\n });\r\n\r\n \/\/ ---------- Create series (will be reused) ----------\r\n let candleSeries = null;\r\n let sma20Series = null,\r\n sma50Series = null,\r\n sma200Series = null,\r\n ema12Series = null;\r\n let bbUpper = null,\r\n bbLower = null;\r\n let rsiSeries = null,\r\n macdSeries = null,\r\n signalSeries = null,\r\n volumeSeries = null;\r\n\r\n \/\/ ---------- Utility math functions (unchanged) ----------\r\n function sma(data, period) {\r\n const result = [];\r\n for (let i = 0; i < data.length; i++) {\r\n if (i < period - 1) { result.push(null); continue; }\r\n let sum = 0;\r\n for (let j = i - period + 1; j <= i; j++) sum += data[j];\r\n result.push(sum \/ period);\r\n }\r\n return result;\r\n }\r\n\r\n function ema(data, period) {\r\n const result = [];\r\n const multiplier = 2 \/ (period + 1);\r\n let prevEma = data[0];\r\n for (let i = 0; i < data.length; i++) {\r\n if (i === 0) { result.push(data[0]); continue; }\r\n const val = data[i] * multiplier + prevEma * (1 - multiplier);\r\n result.push(val);\r\n prevEma = val;\r\n }\r\n return result;\r\n }\r\n\r\n function rsi(data, period = 14) {\r\n const result = [];\r\n let gain = 0,\r\n loss = 0;\r\n for (let i = 1; i < data.length; i++) {\r\n const diff = data[i] - data[i - 1];\r\n if (i <= period) {\r\n if (diff >= 0) gain += diff;\r\n else loss -= diff;\r\n if (i === period) {\r\n let avgGain = gain \/ period,\r\n avgLoss = loss \/ period;\r\n const rs = avgLoss === 0 ? 100 : avgGain \/ avgLoss;\r\n result.push(100 - (100 \/ (1 + rs)));\r\n } else result.push(null);\r\n } else {\r\n const diff2 = data[i] - data[i - 1];\r\n let gain2 = diff2 >= 0 ? diff2 : 0,\r\n loss2 = diff2 < 0 ? -diff2 : 0;\r\n let prevGain = result[result.length - 1] !== null ? gain : 0;\r\n let prevLoss = loss;\r\n let avgGain2 = (prevGain * (period - 1) + gain2) \/ period;\r\n let avgLoss2 = (prevLoss * (period - 1) + loss2) \/ period;\r\n const rs2 = avgLoss2 === 0 ? 100 : avgGain2 \/ avgLoss2;\r\n result.push(100 - (100 \/ (1 + rs2)));\r\n gain = avgGain2;\r\n loss = avgLoss2;\r\n }\r\n }\r\n return result;\r\n }\r\n\r\n function macd(data, fast = 12, slow = 26, signal = 9) {\r\n const emaFast = ema(data, fast);\r\n const emaSlow = ema(data, slow);\r\n const macdLine = emaFast.map((v, i) => (v !== null && emaSlow[i] !== null) ? v - emaSlow[i] : null);\r\n const signalLine = ema(macdLine.filter(v => v !== null), signal);\r\n const fullSignal = [];\r\n let idx = 0;\r\n for (let i = 0; i < macdLine.length; i++) {\r\n if (macdLine[i] === null) fullSignal.push(null);\r\n else fullSignal.push(signalLine[idx++]);\r\n }\r\n const histogram = macdLine.map((v, i) => (v !== null && fullSignal[i] !== null) ? v - fullSignal[i] : null);\r\n return { macdLine, signalLine: fullSignal, histogram };\r\n }\r\n\r\n function bollingerBands(data, period = 20, multiplier = 2) {\r\n const smaVals = sma(data, period);\r\n const upper = [],\r\n lower = [];\r\n for (let i = 0; i < data.length; i++) {\r\n if (i < period - 1) { upper.push(null);\r\n lower.push(null); continue; }\r\n let sumSq = 0;\r\n for (let j = i - period + 1; j <= i; j++) sumSq += (data[j] - smaVals[i]) ** 2;\r\n const std = Math.sqrt(sumSq \/ period);\r\n upper.push(smaVals[i] + multiplier * std);\r\n lower.push(smaVals[i] - multiplier * std);\r\n }\r\n return { upper, lower, middle: smaVals };\r\n }\r\n\r\n \/\/ ---------- Pattern detection (Price Action) ----------\r\n function detectCandlePatterns(candles) {\r\n const patterns = [];\r\n for (let i = 1; i < candles.length; i++) {\r\n const c = candles[i];\r\n const body = Math.abs(c.close - c.open);\r\n const upperWick = c.high - Math.max(c.open, c.close);\r\n const lowerWick = Math.min(c.open, c.close) - c.low;\r\n const range = c.high - c.low;\r\n if (range === 0) continue;\r\n if (body \/ range < 0.1) {\r\n patterns.push({ index: i, type: 'Doji', desc: 'Indecision' });\r\n }\r\n if (body \/ range < 0.3 && lowerWick > 2 * body && upperWick < body) {\r\n patterns.push({ index: i, type: 'Hammer', desc: 'Bullish reversal' });\r\n }\r\n if (body \/ range < 0.3 && upperWick > 2 * body && lowerWick < body) {\r\n patterns.push({ index: i, type: 'Shooting Star', desc: 'Bearish reversal' });\r\n }\r\n if (i > 0) {\r\n const prev = candles[i - 1];\r\n if (prev.close < prev.open && c.close > c.open && c.open < prev.close && c.close > prev.open) {\r\n patterns.push({ index: i, type: 'Bullish Engulfing', desc: 'Strong bullish reversal' });\r\n }\r\n }\r\n if (i > 0) {\r\n const prev = candles[i - 1];\r\n if (prev.close > prev.open && c.close < c.open && c.open > prev.close && c.close < prev.open) {\r\n patterns.push({ index: i, type: 'Bearish Engulfing', desc: 'Strong bearish reversal' });\r\n }\r\n }\r\n }\r\n return patterns;\r\n }\r\n\r\n \/\/ ---------- Support \/ Resistance (Classic) ----------\r\n function findSupportResistance(candles, lookback = 5) {\r\n const levels = [];\r\n for (let i = lookback; i < candles.length - lookback; i++) {\r\n const left = candles.slice(i - lookback, i);\r\n const right = candles.slice(i + 1, i + 1 + lookback);\r\n const high = candles[i].high;\r\n const low = candles[i].low;\r\n const isPivotHigh = left.every(c => c.high < high) && right.every(c => c.high < high);\r\n const isPivotLow = left.every(c => c.low > low) && right.every(c => c.low > low);\r\n if (isPivotHigh) levels.push({ price: high, type: 'resistance', index: i });\r\n if (isPivotLow) levels.push({ price: low, type: 'support', index: i });\r\n }\r\n return levels;\r\n }\r\n\r\n \/\/ ---------- Head & Shoulders (simplified) ----------\r\n function detectHeadAndShoulders(candles) {\r\n if (candles.length < 30) return null;\r\n const levels = findSupportResistance(candles, 3);\r\n const highs = levels.filter(l => l.type === 'resistance').map(l => ({ price: l.price, index: l.index }));\r\n if (highs.length < 3) return null;\r\n for (let i = 0; i < highs.length - 2; i++) {\r\n const a = highs[i],\r\n b = highs[i + 1],\r\n c = highs[i + 2];\r\n if (a.price < b.price && c.price < b.price && Math.abs(a.price - c.price) \/ a.price < 0.02) {\r\n return { type: 'Head and Shoulders', desc: 'Potential bearish reversal', index: b.index };\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n \/\/ ---------- Elliott Wave (simplified) ----------\r\n function elliottWaves(candles) {\r\n if (candles.length < 10) return null;\r\n const closes = candles.map(c => c.close);\r\n const diffs = [];\r\n for (let i = 1; i < closes.length; i++) diffs.push(closes[i] - closes[i - 1]);\r\n let waveCount = 0,\r\n currentDir = 0;\r\n const waves = [];\r\n for (let i = 0; i < diffs.length; i++) {\r\n const d = diffs[i];\r\n if (d === 0) continue;\r\n const dir = d > 0 ? 1 : -1;\r\n if (currentDir === 0) { currentDir = dir;\r\n waveCount = 1; } else if (dir === currentDir) { waveCount++; } else {\r\n waves.push({ dir: currentDir, count: waveCount });\r\n currentDir = dir;\r\n waveCount = 1;\r\n }\r\n }\r\n if (currentDir !== 0) waves.push({ dir: currentDir, count: waveCount });\r\n if (waves.length >= 5) {\r\n let up = 0,\r\n down = 0;\r\n for (let i = 0; i < 5 && i < waves.length; i++) {\r\n if (waves[i].dir === 1) up++;\r\n else down++;\r\n }\r\n if (up === 5) return { type: 'Elliott 5-Wave Up', desc: 'Bullish 5-wave impulse' };\r\n if (down === 5) return { type: 'Elliott 5-Wave Down', desc: 'Bearish 5-wave impulse' };\r\n if (waves.length >= 3 && waves[0].dir !== waves[2].dir) {\r\n return { type: 'Elliott 3-Wave Correction', desc: 'Corrective pattern' };\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n \/\/ ---------- Harmonic (Gartley) ----------\r\n function detectHarmonicPatterns(candles) {\r\n if (candles.length < 10) return null;\r\n const prices = candles.map(c => c.close);\r\n const n = prices.length;\r\n for (let i = n - 10; i < n - 4; i++) {\r\n const x = prices[i],\r\n a = prices[i + 1],\r\n b = prices[i + 2],\r\n c = prices[i + 3],\r\n d = prices[i + 4];\r\n const xa = Math.abs(a - x);\r\n const ab = Math.abs(b - a);\r\n const bc = Math.abs(c - b);\r\n const cd = Math.abs(d - c);\r\n if (xa === 0 || ab === 0 || bc === 0) continue;\r\n const ratioAB = ab \/ xa;\r\n const ratioBC = bc \/ ab;\r\n const ratioCD = cd \/ bc;\r\n if (Math.abs(ratioAB - 0.618) < 0.05 && Math.abs(ratioBC - 0.618) < 0.05 && ratioCD > 1.2 && ratioCD < 1.7) {\r\n return { type: 'Gartley Pattern', desc: `Ratios: AB\/XA=${ratioAB.toFixed(3)}, BC\/AB=${ratioBC.toFixed(3)}, CD\/BC=${ratioCD.toFixed(3)}` };\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n \/\/ ---------- Supply \/ Demand (Volume based) ----------\r\n function supplyDemandZones(candles) {\r\n if (candles.length < 10) return null;\r\n const volumes = candles.map(c => c.volume);\r\n const avgVol = volumes.reduce((a, b) => a + b, 0) \/ volumes.length;\r\n const zones = [];\r\n for (let i = 0; i < candles.length; i++) {\r\n if (candles[i].volume > avgVol * 1.5) {\r\n zones.push({\r\n price: (candles[i].high + candles[i].low) \/ 2,\r\n volume: candles[i].volume,\r\n type: candles[i].close > candles[i].open ? 'demand' : 'supply',\r\n index: i\r\n });\r\n }\r\n }\r\n return zones;\r\n }\r\n\r\n \/\/ ---------- Main fetch & analyze ----------\r\n async function fetchAndAnalyze() {\r\n const symbol = document.getElementById('symbolSelect').value;\r\n const interval = document.getElementById('intervalSelect').value;\r\n const status = document.getElementById('statusMsg');\r\n status.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Fetching data...';\r\n\r\n try {\r\n \/\/ Use a reliable proxy (allorigins)\r\n const proxy = 'https:\/\/api.allorigins.win\/raw?url=';\r\n const url = `https:\/\/query1.finance.yahoo.com\/v8\/finance\/chart\/${symbol}?interval=${interval}&range=1y`;\r\n const response = await fetch(proxy + encodeURIComponent(url));\r\n if (!response.ok) throw new Error(`HTTP error ${response.status}`);\r\n const json = await response.json();\r\n const result = json.chart.result[0];\r\n if (!result) throw new Error('No data returned');\r\n const timestamps = result.timestamp;\r\n const quotes = result.indicators.quote[0];\r\n const closes = quotes.close;\r\n const opens = quotes.open;\r\n const highs = quotes.high;\r\n const lows = quotes.low;\r\n const volumes = quotes.volume;\r\n const rawData = [];\r\n for (let i = 0; i < timestamps.length; i++) {\r\n if (closes[i] !== null && opens[i] !== null && highs[i] !== null && lows[i] !== null) {\r\n rawData.push({\r\n time: new Date(timestamps[i] * 1000),\r\n open: opens[i],\r\n high: highs[i],\r\n low: lows[i],\r\n close: closes[i],\r\n volume: volumes[i] || 0,\r\n });\r\n }\r\n }\r\n if (rawData.length < 10) throw new Error('Insufficient data points');\r\n\r\n const candleData = rawData.map(d => ({\r\n time: d.time.getTime() \/ 1000,\r\n open: d.open,\r\n high: d.high,\r\n low: d.low,\r\n close: d.close,\r\n }));\r\n\r\n \/\/ ---------- Re-create candle series ----------\r\n if (candleSeries) chart.removeSeries(candleSeries);\r\n candleSeries = chart.addCandlestickSeries({\r\n upColor: '#26a69a',\r\n downColor: '#ef5350',\r\n borderUpColor: '#26a69a',\r\n borderDownColor: '#ef5350',\r\n wickUpColor: '#26a69a',\r\n wickDownColor: '#ef5350',\r\n });\r\n candleSeries.setData(candleData);\r\n\r\n \/\/ ---------- Remove old indicator series ----------\r\n const seriesToRemove = [sma20Series, sma50Series, sma200Series, ema12Series,\r\n bbUpper, bbLower, rsiSeries, macdSeries, signalSeries, volumeSeries\r\n ];\r\n seriesToRemove.forEach(s => { if (s) chart.removeSeries(s); });\r\n\r\n const closesArr = rawData.map(d => d.close);\r\n\r\n \/\/ SMA\r\n const sma20 = sma(closesArr, 20);\r\n sma20Series = chart.addLineSeries({ color: '#ff9800', lineWidth: 1, title: 'SMA 20' });\r\n sma20Series.setData(sma20.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n const sma50 = sma(closesArr, 50);\r\n sma50Series = chart.addLineSeries({ color: '#ffeb3b', lineWidth: 1, title: 'SMA 50' });\r\n sma50Series.setData(sma50.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n const sma200 = sma(closesArr, 200);\r\n sma200Series = chart.addLineSeries({ color: '#f44336', lineWidth: 1, title: 'SMA 200' });\r\n sma200Series.setData(sma200.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n \/\/ EMA\r\n const ema12 = ema(closesArr, 12);\r\n ema12Series = chart.addLineSeries({ color: '#9c27b0', lineWidth: 1, title: 'EMA 12' });\r\n ema12Series.setData(ema12.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n \/\/ Bollinger Bands\r\n const bb = bollingerBands(closesArr, 20, 2);\r\n bbUpper = chart.addLineSeries({ color: '#03a9f4', lineWidth: 1, title: 'BB Upper' });\r\n bbUpper.setData(bb.upper.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n bbLower = chart.addLineSeries({ color: '#03a9f4', lineWidth: 1, title: 'BB Lower' });\r\n bbLower.setData(bb.lower.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n \/\/ RSI\r\n const rsiVals = rsi(closesArr, 14);\r\n rsiSeries = chart.addLineSeries({ color: '#ff5722', lineWidth: 1, title: 'RSI 14', priceScaleId: 'rsi' });\r\n chart.priceScale('rsi').applyOptions({ autoScale: true, scaleMargins: { top: 0.8, bottom: 0 } });\r\n rsiSeries.setData(rsiVals.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n \/\/ MACD\r\n const macdRes = macd(closesArr);\r\n macdSeries = chart.addLineSeries({ color: '#4caf50', lineWidth: 1, title: 'MACD', priceScaleId: 'macd' });\r\n chart.priceScale('macd').applyOptions({ autoScale: true, scaleMargins: { top: 0.8, bottom: 0 } });\r\n macdSeries.setData(macdRes.macdLine.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n signalSeries = chart.addLineSeries({ color: '#ffc107', lineWidth: 1, title: 'Signal', priceScaleId: 'macd' });\r\n signalSeries.setData(macdRes.signalLine.map((v, i) => ({ time: candleData[i].time, value: v })).filter(d => d.value !== null));\r\n\r\n \/\/ Volume\r\n volumeSeries = chart.addHistogramSeries({ color: '#78909c', priceScaleId: 'volume' });\r\n chart.priceScale('volume').applyOptions({ autoScale: true, scaleMargins: { top: 0.8, bottom: 0 } });\r\n volumeSeries.setData(rawData.map(d => ({ time: d.time.getTime() \/ 1000, value: d.volume, color: d.close > d.open ? '#26a69a' : '#ef5350' })));\r\n\r\n \/\/ ---------- Build analysis HTML (all in English) ----------\r\n const analysisDiv = document.getElementById('analysisContent');\r\n let html = '';\r\n\r\n \/\/ 1. Price Action\r\n const patterns = detectCandlePatterns(rawData);\r\n if (patterns.length) {\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-candle\"><\/i> Price Action<\/span>`;\r\n patterns.slice(0, 5).forEach(p => {\r\n html += `<div>\ud83d\udccd Candle ${p.index}: <strong>${p.type}<\/strong> \u2014 ${p.desc}<\/div>`;\r\n });\r\n html += `<\/div>`;\r\n } else {\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-candle\"><\/i> Price Action<\/span>No patterns detected.<\/div>`;\r\n }\r\n\r\n \/\/ 2. Classic (S\/R + Head & Shoulders)\r\n const levels = findSupportResistance(rawData, 5);\r\n if (levels.length) {\r\n const supports = levels.filter(l => l.type === 'support').slice(0, 3);\r\n const resistances = levels.filter(l => l.type === 'resistance').slice(0, 3);\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-arrow-up\"><\/i> Classic<\/span>`;\r\n if (supports.length) html += `Supports: ${supports.map(s => s.price.toFixed(5)).join(', ')}<br>`;\r\n if (resistances.length) html += `Resistances: ${resistances.map(r => r.price.toFixed(5)).join(', ')}`;\r\n const hs = detectHeadAndShoulders(rawData);\r\n if (hs) html += `<br>\ud83e\udde0 ${hs.type}: ${hs.desc}`;\r\n html += `<\/div>`;\r\n }\r\n\r\n \/\/ 3. Indicators\r\n const lastClose = closesArr[closesArr.length - 1];\r\n const lastRsi = rsiVals[rsiVals.length - 1];\r\n const lastMacd = macdRes.macdLine[macdRes.macdLine.length - 1];\r\n const lastSignal = macdRes.signalLine[macdRes.signalLine.length - 1];\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-calculator\"><\/i> Indicators<\/span>`;\r\n html += `RSI (14): ${lastRsi !== null ? lastRsi.toFixed(2) : 'N\/A'} `;\r\n if (lastRsi !== null && lastRsi > 70) html += `<span class=\"negative\">(Overbought)<\/span>`;\r\n else if (lastRsi !== null && lastRsi < 30) html += `<span class=\"positive\">(Oversold)<\/span>`;\r\n html += `<br>MACD: ${lastMacd !== null ? lastMacd.toFixed(4) : 'N\/A'} | Signal: ${lastSignal !== null ? lastSignal.toFixed(4) : 'N\/A'}`;\r\n if (lastMacd !== null && lastSignal !== null) {\r\n if (lastMacd > lastSignal) html += ` <span class=\"positive\">(Bullish)<\/span>`;\r\n else html += ` <span class=\"negative\">(Bearish)<\/span>`;\r\n }\r\n html += `<\/div>`;\r\n\r\n \/\/ 4. Elliott\r\n const elliott = elliottWaves(rawData);\r\n if (elliott) html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-wave-square\"><\/i> Elliott<\/span>${elliott.type}: ${elliott.desc}<\/div>`;\r\n else html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-wave-square\"><\/i> Elliott<\/span>No clear wave pattern.<\/div>`;\r\n\r\n \/\/ 5. Harmonic\r\n const harmonic = detectHarmonicPatterns(rawData);\r\n if (harmonic) html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-gem\"><\/i> Harmonic<\/span>${harmonic.type}: ${harmonic.desc}<\/div>`;\r\n else html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-gem\"><\/i> Harmonic<\/span>No harmonic pattern found.<\/div>`;\r\n\r\n \/\/ 6. Supply \/ Demand\r\n const zones = supplyDemandZones(rawData);\r\n if (zones && zones.length) {\r\n const supply = zones.filter(z => z.type === 'supply').slice(0, 3);\r\n const demand = zones.filter(z => z.type === 'demand').slice(0, 3);\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-balance-scale\"><\/i> Supply\/Demand<\/span>`;\r\n if (supply.length) html += `Supply at: ${supply.map(z => z.price.toFixed(5)).join(', ')}<br>`;\r\n if (demand.length) html += `Demand at: ${demand.map(z => z.price.toFixed(5)).join(', ')}`;\r\n html += `<\/div>`;\r\n }\r\n\r\n \/\/ 7. Fundamental (simulated)\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-newspaper\"><\/i> Fundamental<\/span>`;\r\n html += `\ud83d\udcf0 (Simulated) Fed rate unchanged. Eurozone inflation 2.1% reported. Next ECB meeting in July.`;\r\n html += `<\/div>`;\r\n\r\n \/\/ 8. Sentiment (simulated)\r\n const sentiment = Math.random() * 100;\r\n const sentimentText = sentiment > 60 ? 'Bullish' : sentiment < 40 ? 'Bearish' : 'Neutral';\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-smile\"><\/i> Sentiment<\/span>`;\r\n html += `Optimism Index: ${sentiment.toFixed(0)}% \u2014 ${sentimentText}`;\r\n html += `<\/div>`;\r\n\r\n \/\/ 9. Volume\r\n const lastVol = rawData[rawData.length - 1].volume;\r\n const avgVol = rawData.reduce((a, b) => a + b.volume, 0) \/ rawData.length;\r\n html += `<div class=\"analysis-item\"><span class=\"badge\"><i class=\"fas fa-chart-bar\"><\/i> Volume<\/span>`;\r\n html += `Last: ${lastVol.toLocaleString()} | Avg: ${avgVol.toLocaleString()}<br>`;\r\n html += `Ratio: ${((lastVol \/ avgVol) * 100).toFixed(0)}%`;\r\n if (lastVol > avgVol * 1.2) html += ` <span class=\"positive\">(High volume)<\/span>`;\r\n else if (lastVol < avgVol * 0.8) html += ` <span class=\"negative\">(Low volume)<\/span>`;\r\n html += `<\/div>`;\r\n\r\n analysisDiv.innerHTML = html;\r\n status.innerHTML = `<i class=\"fas fa-check-circle\" style=\"color:#26a69a;\"><\/i> Loaded (${rawData.length} candles)`;\r\n\r\n chart.resize(chartElement.clientWidth, 500);\r\n\r\n } catch (error) {\r\n document.getElementById('statusMsg').innerHTML =\r\n `<i class=\"fas fa-exclamation-triangle\" style=\"color:#ef5350;\"><\/i> Error: ${error.message}`;\r\n console.error(error);\r\n }\r\n }\r\n\r\n \/\/ ---------- Event listeners ----------\r\n document.getElementById('loadBtn').addEventListener('click', fetchAndAnalyze);\r\n\r\n window.addEventListener('load', () => {\r\n fetchAndAnalyze();\r\n });\r\n\r\n window.addEventListener('resize', () => {\r\n const container = document.getElementById('chart');\r\n chart.resize(container.clientWidth, 500);\r\n });\r\n\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-56c981b e-flex e-con-boxed e-con e-parent\" data-id=\"56c981b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-09d61a4 elementor-widget elementor-widget-wd_text_block\" data-id=\"09d61a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wd_text_block.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"wd-text-block reset-last-child text-left\">\n\t\t\t\n\t\t\t<p><\/p><section style=\"max-width: 1200px; margin: 40px auto; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #d1d4dc; line-height: 1.7; padding: 0 15px;\"><p><\/p><header style=\"text-align: center; margin-bottom: 40px; padding: 30px 20px; background: linear-gradient(135deg, #1e222d 0%, #2a2e39 100%); border-radius: 12px; border: 1px solid #363a45;\"><span style=\"background: rgba(41, 98, 255, 0.15); color: #2962ff; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 12px;\">All-In-One Trading Suite<\/span><h1 style=\"font-size: 2.2rem; color: #ffffff; margin-bottom: 15px; font-weight: bold;\">Real-Time Forex Technical Analysis Tool<\/h1><p style=\"font-size: 1.05rem; color: #b2b5be; max-width: 800px; margin: 0 auto;\">Analyze major, minor, and exotic currency pairs in seconds. Powered by automated technical indicators, market sentiment evaluation, and price action pattern scanning\u2014100% free and browser-based.<\/p><\/header><p><\/p><div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 50px;\"><div style=\"background: #2a2e39; padding: 24px; border-radius: 10px; border-top: 3px solid #2962ff;\"><h3 style=\"color: #fff; font-size: 1.15rem; margin-bottom: 10px;\">\ud83d\udcc8 Automated Price Action<\/h3><p style=\"font-size: 0.92rem; color: #b2b5be;\">Instantly scans candlesticks for high-probability patterns such as Doji, Hammer, Shooting Star, and Bullish\/Bearish Engulfing signals.<\/p><\/div><div style=\"background: #2a2e39; padding: 24px; border-radius: 10px; border-top: 3px solid #00bcd4;\"><h3 style=\"color: #fff; font-size: 1.15rem; margin-bottom: 10px;\">\u2699\ufe0f Multi-Indicator Engine<\/h3><p style=\"font-size: 0.92rem; color: #b2b5be;\">Integrates SMA (20, 50, 200), EMA 12, Bollinger Bands, RSI (14), and MACD crossovers to give you clear bullish or bearish insights.<\/p><\/div><div style=\"background: #2a2e39; padding: 24px; border-radius: 10px; border-top: 3px solid #26a69a;\"><h3 style=\"color: #fff; font-size: 1.15rem; margin-bottom: 10px;\">\ud83d\udee1\ufe0f Key Levels & Zones<\/h3><p style=\"font-size: 0.92rem; color: #b2b5be;\">Automatically identifies classic Support & Resistance pivot points alongside volume-weighted Supply and Demand zones.<\/p><\/div><\/div><p><\/p><article style=\"background: #2a2e39; padding: 35px; border-radius: 12px; margin-bottom: 40px; border: 1px solid #363a45;\"><h2 style=\"color: #ffffff; font-size: 1.6rem; margin-bottom: 18px; border-bottom: 2px solid #3a3e4a; padding-bottom: 10px;\">How to Use the Technical Scanner for Smarter Forex Trades<\/h2><p style=\"margin-bottom: 15px;\">Navigating volatile foreign exchange markets requires fast, structured data evaluation. Whether you are a day trader scalping 5-minute charts or a swing trader reviewing daily candle formations, this tool consolidates core technical analysis metrics into one interactive interface.<\/p><h3 style=\"color: #2962ff; font-size: 1.25rem; margin-top: 25px; margin-bottom: 10px;\">1. Select Currency Pair and Timeframe<\/h3><p style=\"margin-bottom: 15px;\">Choose from over 30 global Forex pairs grouped into Majors (EUR\/USD, GBP\/USD, USD\/JPY), Crosses, and Exotics. Select your desired candle timeframe ranging from 1-minute intraday charts to daily and monthly trend horizons.<\/p><h3 style=\"color: #2962ff; font-size: 1.25rem; margin-top: 25px; margin-bottom: 10px;\">2. Interpret Technical Analysis Output<\/h3><p style=\"margin-bottom: 15px;\">The right-hand panel automatically evaluates technical factors as soon as price data feeds into the lightweight charting canvas:<\/p><ul style=\"padding-left: 20px; margin-bottom: 20px; color: #b2b5be;\"><li style=\"margin-bottom: 8px;\"><strong style=\"color: #fff;\">Relative Strength Index (RSI):<\/strong> Detects potential market reversals by highlighting overbought conditions (above 70) or oversold levels (below 30).<\/li><li style=\"margin-bottom: 8px;\"><strong style=\"color: #fff;\">Moving Average Convergence Divergence (MACD):<\/strong> Tracks momentum momentum shifts via signal line crossovers.<\/li><li style=\"margin-bottom: 8px;\"><strong style=\"color: #fff;\">Pattern & Harmonic Scans:<\/strong> Scans structure setups including Head & Shoulders formations, Elliott 5-Wave cycles, and Gartley harmonic ratios.<\/li><\/ul><div style=\"background: #1e222d; padding: 20px; border-left: 4px solid #ff9800; border-radius: 4px; margin-top: 25px;\"><strong style=\"color: #ff9800; display: block; margin-bottom: 5px;\">\u26a1 Pro Trader Tip:<\/strong><br \/><span style=\"font-size: 0.95rem; color: #b2b5be;\">Always look for confluence. A buy signal is significantly stronger when an oversold RSI aligns with a major Support level and a Bullish Engulfing candlestick on a higher timeframe.<\/span><\/div><\/article><p><\/p><section style=\"background: #2a2e39; padding: 35px; border-radius: 12px; border: 1px solid #363a45;\"><h2 style=\"color: #ffffff; font-size: 1.6rem; margin-bottom: 20px;\">Frequently Asked Questions (FAQ)<\/h2><div style=\"margin-bottom: 20px;\"><h4 style=\"color: #fff; font-size: 1.1rem; margin-bottom: 5px;\">Is this Forex analysis tool completely free?<\/h4><p style=\"color: #b2b5be; font-size: 0.95rem;\">Yes. The Forex Technical Analysis Tool on Tendify runs entirely in your client web browser with zero API keys or subscriptions required.<\/p><\/div><div style=\"margin-bottom: 20px;\"><h4 style=\"color: #fff; font-size: 1.1rem; margin-bottom: 5px;\">Where does the market chart data come from?<\/h4><p style=\"color: #b2b5be; font-size: 0.95rem;\">Price quotes and historical candle distributions are sourced dynamically from real-time global financial data feeds.<\/p><\/div><div><h4 style=\"color: #fff; font-size: 1.1rem; margin-bottom: 5px;\">Can I use this tool for crypto or stock markets?<\/h4><p style=\"color: #b2b5be; font-size: 0.95rem;\">This specific configuration focuses on major, minor, and exotic foreign exchange pairs. Check our main platform directory on Tendify for equity and crypto analysis suites.<\/p><\/div><\/section><\/section>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Use our free Forex technical analysis tool to scan live charts, detect candlestick patterns, and calculate RSI, MACD, and key levels in real time on Tendify.net.<\/p>","protected":false},"author":15,"featured_media":18976,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[767],"tags":[],"class_list":["post-18972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-b2b-online-tools"],"_links":{"self":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/comments?post=18972"}],"version-history":[{"count":5,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18972\/revisions"}],"predecessor-version":[{"id":18978,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18972\/revisions\/18978"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media\/18976"}],"wp:attachment":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media?parent=18972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/categories?post=18972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/tags?post=18972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}