{"id":18623,"date":"2026-06-27T07:13:40","date_gmt":"2026-06-27T07:13:40","guid":{"rendered":"https:\/\/tendify.net\/?p=18623"},"modified":"2026-06-27T07:30:10","modified_gmt":"2026-06-27T07:30:10","slug":"free-ultimate-forex-technical","status":"publish","type":"post","link":"https:\/\/tendify.net\/ar\/free-ultimate-forex-technical\/","title":{"rendered":"Free Ultimate Forex Technical Analysis Tool"},"content":{"rendered":"\t\t
\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 & Patterns Tool<\/title>\r\n <!-- Tailwind CSS for modern premium UI styling -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <!-- Lightweight Charts v4.1.1 (stable production) -->\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lightweight-charts@4.1.1\/dist\/lightweight-charts.standalone.production.min.js\"><\/script>\r\n <!-- Font Awesome Icons -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" \/>\r\n <style>\r\n body {\r\n background-color: #0f111a;\r\n color: #d1d4dc;\r\n }\r\n \/* Custom scrollbar styling for a native look *\/\r\n ::-webkit-scrollbar {\r\n width: 6px;\r\n height: 6px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #161823;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #2e3245;\r\n border-radius: 3px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #3f4561;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"font-sans antialiased min-h-screen flex flex-col\">\r\n\r\n<div class=\"container mx-auto px-4 py-6 max-w-[1650px] flex-grow flex flex-col gap-6\">\r\n <!-- Header Controls Panel -->\r\n <header class=\"bg-[#161823] border border-[#2a2e45] rounded-xl p-4 flex flex-wrap items-center justify-between gap-4 shadow-xl\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"bg-blue-600 text-white p-2.5 rounded-lg flex items-center justify-center shadow-lg shadow-blue-900\/30\">\r\n <i class=\"fas fa-chart-line text-lg\"><\/i>\r\n <\/div>\r\n <div>\r\n <h1 class=\"text-white font-bold text-lg leading-tight\">FX Pro-Analyst<\/h1>\r\n <p class=\"text-xs text-gray-400\">Multi-Indicator & Pattern Scanner<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-wrap items-center gap-4\">\r\n <!-- Symbol Selector -->\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-[10px] text-gray-400 font-semibold mb-1 uppercase tracking-wider\">Currency Pair<\/span>\r\n <select id=\"symbolSelect\" class=\"bg-[#0f111a] border border-[#2a2e45] text-white px-3 py-2 rounded-lg text-sm focus:outline-none focus:border-blue-500 cursor-pointer min-w-[140px]\">\r\n <optgroup label=\"Majors\" class=\"bg-[#161823]\">\r\n <option value=\"EURUSD=X\" selected>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\" class=\"bg-[#161823]\">\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 <\/optgroup>\r\n <optgroup label=\"Exotics\" class=\"bg-[#161823]\">\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=\"USDINR=X\">USD\/INR<\/option>\r\n <\/optgroup>\r\n <\/select>\r\n <\/div>\r\n\r\n <!-- Interval Selector -->\r\n <div class=\"flex flex-col\">\r\n <span class=\"text-[10px] text-gray-400 font-semibold mb-1 uppercase tracking-wider\">Interval<\/span>\r\n <select id=\"intervalSelect\" class=\"bg-[#0f111a] border border-[#2a2e45] text-white px-3 py-2 rounded-lg text-sm focus:outline-none focus:border-blue-500 cursor-pointer min-w-[110px]\">\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\">Daily<\/option>\r\n <option value=\"1wk\">Weekly<\/option>\r\n <option value=\"1mo\">Monthly<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <!-- Load Button -->\r\n <div class=\"flex flex-col justify-end pt-5\">\r\n <button id=\"loadBtn\" class=\"bg-blue-600 hover:bg-blue-500 text-white font-semibold text-sm px-5 py-2 rounded-lg transition duration-200 flex items-center gap-2 shadow-md hover:shadow-blue-500\/20 active:scale-95\">\r\n <i class=\"fas fa-sync-alt animate-spin-hover\"><\/i>\r\n <span>Analyze Markets<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Connection \/ Proxy Status indicator -->\r\n <div class=\"flex items-center gap-3 bg-[#0f111a] px-4 py-2.5 rounded-lg border border-[#2a2e45]\">\r\n <div class=\"flex flex-col items-end\">\r\n <span class=\"text-[9px] text-gray-500 uppercase font-semibold\">Feed Status<\/span>\r\n <span id=\"statusMsg\" class=\"text-xs font-semibold text-emerald-400 flex items-center gap-1.5\">\r\n <span class=\"h-2 w-2 rounded-full bg-emerald-400 animate-pulse\"><\/span> Ready\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- Interactive Workspace Grid -->\r\n <div class=\"grid grid-cols-1 xl:grid-cols-4 gap-6 flex-grow items-start\">\r\n <!-- Main Chart Block -->\r\n <div class=\"xl:col-span-3 flex flex-col gap-4 h-full\">\r\n <!-- Chart Container & Quick Toggles -->\r\n <div class=\"bg-[#161823] border border-[#2a2e45] rounded-xl p-4 flex flex-col shadow-xl\">\r\n <!-- Toggles Header -->\r\n <div class=\"flex flex-wrap items-center justify-between border-b border-[#2a2e45] pb-3 mb-4 gap-3\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"w-2.5 h-2.5 bg-blue-500 rounded-full\"><\/span>\r\n <h2 class=\"text-sm font-bold text-white uppercase tracking-wider\">Interactive Chart<\/h2>\r\n <\/div>\r\n <!-- Technical Filters Layer -->\r\n <div class=\"flex flex-wrap items-center gap-3 text-xs\">\r\n <label class=\"flex items-center gap-1.5 cursor-pointer bg-[#0f111a] px-2.5 py-1.5 rounded border border-[#2a2e45] hover:border-orange-500 transition\">\r\n <input type=\"checkbox\" id=\"toggleSma20\" checked class=\"accent-orange-500\">\r\n <span class=\"text-[#ff9800] font-medium\">SMA 20<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-1.5 cursor-pointer bg-[#0f111a] px-2.5 py-1.5 rounded border border-[#2a2e45] hover:border-yellow-400 transition\">\r\n <input type=\"checkbox\" id=\"toggleSma50\" class=\"accent-yellow-400\">\r\n <span class=\"text-[#ffeb3b] font-medium\">SMA 50<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-1.5 cursor-pointer bg-[#0f111a] px-2.5 py-1.5 rounded border border-[#2a2e45] hover:border-red-500 transition\">\r\n <input type=\"checkbox\" id=\"toggleSma200\" class=\"accent-red-500\">\r\n <span class=\"text-[#f44336] font-medium\">SMA 200<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-1.5 cursor-pointer bg-[#0f111a] px-2.5 py-1.5 rounded border border-[#2a2e45] hover:border-purple-500 transition\">\r\n <input type=\"checkbox\" id=\"toggleEma12\" checked class=\"accent-purple-500\">\r\n <span class=\"text-[#9c27b0] font-medium\">EMA 12<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-1.5 cursor-pointer bg-[#0f111a] px-2.5 py-1.5 rounded border border-[#2a2e45] hover:border-sky-400 transition\">\r\n <input type=\"checkbox\" id=\"toggleBB\" checked class=\"accent-sky-400\">\r\n <span class=\"text-[#03a9f4] font-medium\">B-Bands<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-1.5 cursor-pointer bg-[#0f111a] px-2.5 py-1.5 rounded border border-[#2a2e45] hover:border-red-400 transition\">\r\n <input type=\"checkbox\" id=\"toggleRsi\" checked class=\"accent-red-400\">\r\n <span class=\"text-[#ff5722] font-medium\">RSI<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-1.5 cursor-pointer bg-[#0f111a] px-2.5 py-1.5 rounded border border-[#2a2e45] hover:border-emerald-400 transition\">\r\n <input type=\"checkbox\" id=\"toggleMacd\" checked class=\"accent-emerald-400\">\r\n <span class=\"text-[#4caf50] font-medium\">MACD<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <!-- Main Canvas Mounting Division -->\r\n <div class=\"relative w-full rounded-lg overflow-hidden bg-[#0f111a] border border-[#202330]\">\r\n <div id=\"chart\" class=\"w-full min-h-[520px]\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Technical Diagnostics Panel -->\r\n <div class=\"xl:col-span-1 bg-[#161823] border border-[#2a2e45] rounded-xl p-5 flex flex-col shadow-xl max-h-[750px] overflow-hidden\">\r\n <div class=\"flex items-center justify-between border-b border-[#2a2e45] pb-3 mb-4\">\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"fas fa-microscope text-blue-500 text-base\"><\/i>\r\n <h3 class=\"text-white font-bold text-sm uppercase tracking-wider\">Analysis Engine<\/h3>\r\n <\/div>\r\n <span class=\"bg-[#2a2e45] text-gray-300 text-[10px] font-bold px-2.5 py-1 rounded-full uppercase\">Real-Time<\/span>\r\n <\/div>\r\n\r\n <!-- Analysis Feed Container -->\r\n <div id=\"analysisContent\" class=\"flex-grow overflow-y-auto space-y-3.5 pr-1.5\">\r\n <div class=\"bg-[#0f111a] border border-[#2a2e45] rounded-lg p-4 text-center\">\r\n <div class=\"text-blue-500 text-2xl mb-2\"><i class=\"fas fa-satellite-dish animate-pulse\"><\/i><\/div>\r\n <p class=\"text-sm text-gray-300\">Awaiting technical feed trigger.<\/p>\r\n <p class=\"text-xs text-gray-500 mt-1\">Press \"Analyze Markets\" to initialize indicators & scanning sequences.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Info Footer -->\r\n <footer class=\"bg-[#161823] border border-[#2a2e45] rounded-xl p-4 text-center text-xs text-gray-500\">\r\n <p><i class=\"fas fa-shield-alt mr-1\"><\/i> Highly Resilient Architecture with multi-stage CORS proxy and live fallback API routing.<\/p>\r\n <p class=\"text-[10px] mt-1 text-gray-600\">Disclaimer: Calculations provided are for technical analysis demonstration purposes only and do not constitute financial advice.<\/p>\r\n <\/footer>\r\n<\/div>\r\n\r\n<script>\r\n (function() {\r\n \/\/ ---------- Safety Check for Library Import ----------\r\n if (typeof LightweightCharts === 'undefined') {\r\n document.getElementById('statusMsg').innerHTML =\r\n '<span class=\"text-red-400 flex items-center gap-1\"><i class=\"fas fa-exclamation-triangle\"><\/i> Dependency Error: Library Missing<\/span>';\r\n return;\r\n }\r\n\r\n \/\/ ---------- Chart & Canvas Setup ----------\r\n const chartElement = document.getElementById('chart');\r\n const chart = LightweightCharts.createChart(chartElement, {\r\n width: chartElement.clientWidth,\r\n height: 520,\r\n layout: { \r\n background: { type: 'solid', color: '#0f111a' },\r\n textColor: '#d1d4dc',\r\n fontSize: 11,\r\n fontFamily: 'Segoe UI, system-ui, sans-serif'\r\n },\r\n grid: { \r\n vertLines: { color: 'rgba(42, 46, 69, 0.4)' }, \r\n horzLines: { color: 'rgba(42, 46, 69, 0.4)' } \r\n },\r\n timeScale: { \r\n timeVisible: true, \r\n secondsVisible: false, \r\n borderColor: '#2a2e45' \r\n },\r\n crosshair: { \r\n mode: LightweightCharts.CrosshairMode.Normal \r\n },\r\n });\r\n\r\n \/\/ ---------- Create Series Variables ----------\r\n let candleSeries = null;\r\n let sma20Series = null, sma50Series = null, sma200Series = null, ema12Series = null;\r\n let bbUpperSeries = null, bbLowerSeries = null;\r\n let rsiSeries = null, macdSeries = null, signalSeries = null, volumeSeries = null;\r\n\r\n \/\/ Keep local reference arrays of our values to toggle visibility\r\n let sma20Data = [], sma50Data = [], sma200Data = [], ema12Data = [], bbUpperData = [], bbLowerData = [];\r\n let rsiData = [], macdLineData = [], macdSignalData = [];\r\n\r\n \/\/ ---------- Multi-Stage Resilient Proxy Setup ----------\r\n const proxySuppliers = [\r\n (url) => `https:\/\/corsproxy.io\/?${encodeURIComponent(url)}`,\r\n (url) => `https:\/\/api.allorigins.win\/raw?url=${encodeURIComponent(url)}`,\r\n (url) => `https:\/\/api.codetabs.com\/v1\/proxy?quest=${encodeURIComponent(url)}`,\r\n (url) => `https:\/\/thingproxy.freeboard.io\/fetch\/${encodeURIComponent(url)}`,\r\n (url) => url \/\/ Direct connection attempt\r\n ];\r\n\r\n \/\/ Map Yahoo Forex symbols to Binance equivalents for direct live stream API fallbacks\r\n function getBinanceSymbol(yahooSymbol) {\r\n const mapping = {\r\n \"EURUSD=X\": \"EURUSDT\",\r\n \"GBPUSD=X\": \"GBPUSDT\",\r\n \"USDJPY=X\": \"USDTJPY\",\r\n \"AUDUSD=X\": \"AUDUSDT\",\r\n \"NZDUSD=X\": \"NZDUSDT\",\r\n \"EURGBP=X\": \"EURGBP\",\r\n \"EURJPY=X\": \"EURJPY\",\r\n \"GBPJPY=X\": \"GBPJPY\",\r\n \"AUDJPY=X\": \"AUDJPY\"\r\n };\r\n return mapping[yahooSymbol] || null;\r\n }\r\n\r\n function getBinanceInterval(interval) {\r\n const mapping = {\r\n \"1m\": \"1m\",\r\n \"5m\": \"5m\",\r\n \"15m\": \"15m\",\r\n \"30m\": \"30m\",\r\n \"1h\": \"1h\",\r\n \"1d\": \"1d\",\r\n \"1wk\": \"1w\",\r\n \"1mo\": \"1M\"\r\n };\r\n return mapping[interval] || null;\r\n }\r\n\r\n \/\/ ---------- Comprehensive Mathematical Indicator Algorithms ----------\r\n \r\n \/\/ Simple Moving Average (SMA)\r\n function calculateSMA(data, period) {\r\n const result = [];\r\n for (let i = 0; i < data.length; i++) {\r\n if (i < period - 1) {\r\n result.push(null);\r\n continue;\r\n }\r\n let sum = 0;\r\n for (let j = i - period + 1; j <= i; j++) {\r\n sum += data[j];\r\n }\r\n result.push(sum \/ period);\r\n }\r\n return result;\r\n }\r\n\r\n \/\/ Exponential Moving Average (EMA)\r\n function calculateEMA(data, period) {\r\n const emaValues = Array(data.length).fill(null);\r\n if (data.length < period) return emaValues;\r\n \r\n let sum = 0;\r\n for (let i = 0; i < period; i++) sum += data[i];\r\n let prevEma = sum \/ period;\r\n emaValues[period - 1] = prevEma;\r\n \r\n const multiplier = 2 \/ (period + 1);\r\n for (let i = period; i < data.length; i++) {\r\n const currentEma = (data[i] - prevEma) * multiplier + prevEma;\r\n emaValues[i] = currentEma;\r\n prevEma = currentEma;\r\n }\r\n return emaValues;\r\n }\r\n\r\n \/\/ Relative Strength Index (RSI) using Wilders Smoothing\r\n function calculateRSI(data, period = 14) {\r\n const rsiValues = Array(data.length).fill(null);\r\n if (data.length <= period) return rsiValues;\r\n \r\n let gains = 0;\r\n let losses = 0;\r\n \r\n for (let i = 1; i <= period; i++) {\r\n const diff = data[i] - data[i - 1];\r\n if (diff > 0) gains += diff;\r\n else losses -= diff;\r\n }\r\n \r\n let avgGain = gains \/ period;\r\n let avgLoss = losses \/ period;\r\n rsiValues[period] = avgLoss === 0 ? 100 : 100 - (100 \/ (1 + (avgGain \/ avgLoss)));\r\n \r\n for (let i = period + 1; i < data.length; i++) {\r\n const diff = data[i] - data[i - 1];\r\n const gain = diff > 0 ? diff : 0;\r\n const loss = diff < 0 ? -diff : 0;\r\n \r\n avgGain = (avgGain * (period - 1) + gain) \/ period;\r\n avgLoss = (avgLoss * (period - 1) + loss) \/ period;\r\n \r\n rsiValues[i] = avgLoss === 0 ? 100 : 100 - (100 \/ (1 + (avgGain \/ avgLoss)));\r\n }\r\n return rsiValues;\r\n }\r\n\r\n \/\/ MACD (12, 26, 9) with exact Signal alignment\r\n function calculateMACD(data, fast = 12, slow = 26, signal = 9) {\r\n const emaFast = calculateEMA(data, fast);\r\n const emaSlow = calculateEMA(data, slow);\r\n \r\n const macdLine = Array(data.length).fill(null);\r\n for (let i = 0; i < data.length; i++) {\r\n if (emaFast[i] !== null && emaSlow[i] !== null) {\r\n macdLine[i] = emaFast[i] - emaSlow[i];\r\n }\r\n }\r\n \r\n const signalLine = Array(data.length).fill(null);\r\n const nonNullMacd = macdLine.filter(v => v !== null);\r\n const nonNullSignal = calculateEMA(nonNullMacd, signal);\r\n \r\n let sigIdx = 0;\r\n for (let i = 0; i < data.length; i++) {\r\n if (macdLine[i] !== null) {\r\n signalLine[i] = nonNullSignal[sigIdx++];\r\n }\r\n }\r\n \r\n const histogram = Array(data.length).fill(null);\r\n for (let i = 0; i < data.length; i++) {\r\n if (macdLine[i] !== null && signalLine[i] !== null) {\r\n histogram[i] = macdLine[i] - signalLine[i];\r\n }\r\n }\r\n \r\n return { macdLine, signalLine, histogram };\r\n }\r\n\r\n \/\/ Bollinger Bands\r\n function calculateBollingerBands(data, period = 20, multiplier = 2) {\r\n const smaVals = calculateSMA(data, period);\r\n const upper = Array(data.length).fill(null);\r\n const lower = Array(data.length).fill(null);\r\n \r\n for (let i = 0; i < data.length; i++) {\r\n if (i < period - 1 || smaVals[i] === null) continue;\r\n let sumSq = 0;\r\n for (let j = i - period + 1; j <= i; j++) {\r\n sumSq += Math.pow(data[j] - smaVals[i], 2);\r\n }\r\n const std = Math.sqrt(sumSq \/ period);\r\n upper[i] = smaVals[i] + (multiplier * std);\r\n lower[i] = smaVals[i] - (multiplier * std);\r\n }\r\n return { upper, lower, middle: smaVals };\r\n }\r\n\r\n \/\/ ---------- Price Action Pattern Recognition ----------\r\n function detectCandlePatterns(candles) {\r\n const patterns = [];\r\n const startIdx = Math.max(1, candles.length - 150);\r\n for (let i = startIdx; 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\r\n \/\/ Doji Pattern\r\n if (body \/ range < 0.1) {\r\n patterns.push({ index: i, type: 'Doji', desc: 'Indicates high market indecision.' });\r\n }\r\n \/\/ Hammer Pattern\r\n if (body \/ range < 0.3 && lowerWick > 2 * body && upperWick < body) {\r\n patterns.push({ index: i, type: 'Hammer', desc: 'Bullish reversal pattern.' });\r\n }\r\n \/\/ Shooting Star\r\n if (body \/ range < 0.3 && upperWick > 2 * body && lowerWick < body) {\r\n patterns.push({ index: i, type: 'Shooting Star', desc: 'Bearish reversal signal.' });\r\n }\r\n \/\/ Engulfing Scanners\r\n const prev = candles[i - 1];\r\n if (prev) {\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 buyers takeover.' });\r\n }\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 sellers takeover.' });\r\n }\r\n }\r\n }\r\n return patterns;\r\n }\r\n\r\n \/\/ ---------- Support & Resistance Line Finders ----------\r\n function findSupportResistance(candles, lookback = 8) {\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 \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 \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 \/\/ Simplified Head and Shoulders Detector\r\n function detectHeadAndShoulders(candles) {\r\n if (candles.length < 30) return null;\r\n const levels = findSupportResistance(candles, 4);\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 \r\n for (let i = 0; i < highs.length - 2; i++) {\r\n const leftShoulder = highs[i];\r\n const head = highs[i + 1];\r\n const rightShoulder = highs[i + 2];\r\n \r\n if (head.price > leftShoulder.price && head.price > rightShoulder.price) {\r\n const shoulderDiffRatio = Math.abs(leftShoulder.price - rightShoulder.price) \/ leftShoulder.price;\r\n if (shoulderDiffRatio < 0.025) {\r\n return { type: 'Head & Shoulders', desc: 'Potential bearish reversal neckline structure.', index: head.index };\r\n }\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n \/\/ Simplified harmonic patterns (Gartley check)\r\n function detectHarmonicPatterns(candles) {\r\n if (candles.length < 15) return null;\r\n const prices = candles.map(c => Math.max(0.00001, c.close));\r\n const n = prices.length;\r\n \r\n for (let i = n - 12; 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 \r\n const ratioAB = ab \/ xa;\r\n const ratioBC = bc \/ ab;\r\n const ratioCD = cd \/ bc;\r\n \r\n if (Math.abs(ratioAB - 0.618) < 0.06 && Math.abs(ratioBC - 0.618) < 0.06 && ratioCD > 1.15 && ratioCD < 1.65) {\r\n return { \r\n type: 'Bullish Gartley Structure', \r\n desc: `Precision Fibonacci Alignment: AB\/XA=${ratioAB.toFixed(3)}, CD\/BC=${ratioCD.toFixed(3)}` \r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n \/\/ ---------- Active API Fetcher Loop via Resilient Data Sources Chain ----------\r\n async function fetchMarketData(symbol, interval) {\r\n \/\/ Define targeted URL endpoints for dynamic failover (both query1 and query2 to maximize success)\r\n let range = '1y'; \r\n if (interval === '1m') range = '1d'; \r\n else if (interval === '5m' || interval === '15m' || interval === '30m') range = '5d'; \r\n else if (interval === '1h') range = '1mo'; \r\n else if (interval === '1d' || interval === '1wk') range = '1y'; \r\n else if (interval === '1mo') range = '5y'; \r\n \r\n const yahooEndpoints = [\r\n `https:\/\/query1.finance.yahoo.com\/v8\/finance\/chart\/${symbol}?interval=${interval}&range=${range}`,\r\n `https:\/\/query2.finance.yahoo.com\/v8\/finance\/chart\/${symbol}?interval=${interval}&range=${range}`\r\n ];\r\n\r\n \/\/ --- SOURCE 1: Yahoo Finance API Multi-Route Matrix ---\r\n for (const targetUrl of yahooEndpoints) {\r\n for (let i = 0; i < proxySuppliers.length; i++) {\r\n const currentProxy = proxySuppliers[i];\r\n const requestUrl = currentProxy(targetUrl);\r\n updateFeedStatus(`Trying Yahoo Router via proxy #${i + 1}\/${proxySuppliers.length}...`, 'orange');\r\n \r\n try {\r\n const response = await fetch(requestUrl);\r\n if (response.ok) {\r\n const json = await response.json();\r\n if (json && json.chart && json.chart.result && json.chart.result[0]) {\r\n return { data: json.chart.result[0], source: \"Yahoo Finance (Proxied)\" };\r\n }\r\n }\r\n } catch (e) {\r\n console.warn(`Yahoo Router combination failed. attempting next...`);\r\n }\r\n }\r\n }\r\n\r\n \/\/ --- SOURCE 2: Binance API with Proxied Failover Support ---\r\n const binanceSymbol = getBinanceSymbol(symbol);\r\n const binanceInterval = getBinanceInterval(interval);\r\n if (binanceSymbol && binanceInterval) {\r\n const binanceTarget = `https:\/\/api.binance.com\/api\/v3\/klines?symbol=${binanceSymbol}&interval=${binanceInterval}&limit=300`;\r\n \r\n \/\/ Try Binance using direct access AND through our CORS proxy list\r\n for (let i = 0; i < proxySuppliers.length; i++) {\r\n const currentProxy = proxySuppliers[i];\r\n const requestUrl = currentProxy(binanceTarget);\r\n updateFeedStatus(`Trying Binance Router via proxy\/direct #${i + 1}\/${proxySuppliers.length}...`, 'orange');\r\n \r\n try {\r\n const response = await fetch(requestUrl);\r\n if (response.ok) {\r\n const data = await response.json();\r\n if (Array.isArray(data) && data.length > 0) {\r\n const formatted = data.map(item => ({\r\n time: Math.floor(item[0] \/ 1000),\r\n open: parseFloat(item[1]),\r\n high: parseFloat(item[2]),\r\n low: parseFloat(item[3]),\r\n close: parseFloat(item[4]),\r\n volume: parseFloat(item[5])\r\n }));\r\n return { data: formatted, source: \"Binance API (Proxied\/Direct)\" };\r\n }\r\n }\r\n } catch (e) {\r\n console.warn(`Binance fetch fail on proxy #${i + 1}`, e);\r\n }\r\n }\r\n }\r\n\r\n \/\/ --- SOURCE 3: Frankfurter Central Bank API with Proxied Failover Support ---\r\n if (interval === '1d' || interval === '1wk' || interval === '1mo') {\r\n const cleanPair = symbol.replace(\"=X\", \"\");\r\n if (cleanPair.length === 6) {\r\n const base = cleanPair.substring(0, 3);\r\n const target = cleanPair.substring(3, 6);\r\n const startDate = new Date();\r\n startDate.setFullYear(startDate.getFullYear() - 1);\r\n const formattedDate = startDate.toISOString().split('T')[0];\r\n const frankfurterTarget = `https:\/\/api.frankfurter.app\/v1\/${formattedDate}..?from=${base}&to=${target}`;\r\n \r\n for (let i = 0; i < proxySuppliers.length; i++) {\r\n const currentProxy = proxySuppliers[i];\r\n const requestUrl = currentProxy(frankfurterTarget);\r\n updateFeedStatus(`Trying Frankfurter Router via proxy\/direct #${i + 1}\/${proxySuppliers.length}...`, 'orange');\r\n \r\n try {\r\n const response = await fetch(requestUrl);\r\n if (response.ok) {\r\n const json = await response.json();\r\n if (json && json.rates) {\r\n const rates = json.rates;\r\n const dates = Object.keys(rates).sort();\r\n const candles = [];\r\n let prevClose = null;\r\n for (let j = 0; j < dates.length; j++) {\r\n const dateStr = dates[j];\r\n const closePrice = rates[dateStr][target];\r\n if (!closePrice) continue;\r\n \r\n const timeMs = Math.floor(new Date(dateStr).getTime() \/ 1000);\r\n const openPrice = prevClose !== null ? prevClose : closePrice;\r\n const volatility = closePrice * 0.003;\r\n const highPrice = Math.max(openPrice, closePrice) + (Math.random() * volatility);\r\n const lowPrice = Math.min(openPrice, closePrice) - (Math.random() * volatility);\r\n \r\n candles.push({\r\n time: timeMs,\r\n open: parseFloat(openPrice.toFixed(5)),\r\n high: parseFloat(highPrice.toFixed(5)),\r\n low: parseFloat(lowPrice.toFixed(5)),\r\n close: parseFloat(closePrice.toFixed(5)),\r\n volume: Math.floor(2000 + Math.random() * 8000)\r\n });\r\n prevClose = closePrice;\r\n }\r\n if (candles.length > 0) {\r\n return { data: candles, source: \"Frankfurter API (Proxied\/Direct)\" };\r\n }\r\n }\r\n }\r\n } catch (e) {\r\n console.warn(`Frankfurter fetch fail on proxy #${i + 1}`, e);\r\n }\r\n }\r\n }\r\n }\r\n \r\n throw new Error(\"All data streams (Yahoo query1\/query2, Binance, and Frankfurter) failed both directly and through proxies. Please wait and try again shortly.\");\r\n }\r\n\r\n \/\/ ---------- Update Status View utility ----------\r\n function updateFeedStatus(msg, colorClass) {\r\n const colors = {\r\n green: 'text-emerald-400',\r\n orange: 'text-amber-400',\r\n red: 'text-rose-500'\r\n };\r\n const pointColors = {\r\n green: 'bg-emerald-400',\r\n orange: 'bg-amber-400',\r\n red: 'bg-rose-500'\r\n };\r\n \r\n const targetColor = colors[colorClass] || 'text-gray-400';\r\n const targetPoint = pointColors[colorClass] || 'bg-gray-400';\r\n \r\n document.getElementById('statusMsg').className = `text-xs font-semibold ${targetColor} flex items-center gap-1.5`;\r\n document.getElementById('statusMsg').innerHTML = `\r\n <span class=\"h-2 w-2 rounded-full ${targetPoint} animate-pulse\"><\/span> ${msg}\r\n `;\r\n }\r\n\r\n \/\/ ---------- Interactive Indicator Toggle Management ----------\r\n function syncIndicatorVisibility() {\r\n if (!candleSeries) return;\r\n\r\n const isSma20 = document.getElementById('toggleSma20').checked;\r\n const isSma50 = document.getElementById('toggleSma50').checked;\r\n const isSma200 = document.getElementById('toggleSma200').checked;\r\n const isEma12 = document.getElementById('toggleEma12').checked;\r\n const isBB = document.getElementById('toggleBB').checked;\r\n const isRsi = document.getElementById('toggleRsi').checked;\r\n const isMacd = document.getElementById('toggleMacd').checked;\r\n\r\n \/\/ SMA 20\r\n if (sma20Series) {\r\n if (isSma20) sma20Series.setData(sma20Data);\r\n else sma20Series.setData([]);\r\n }\r\n \/\/ SMA 50\r\n if (sma50Series) {\r\n if (isSma50) sma50Series.setData(sma50Data);\r\n else sma50Series.setData([]);\r\n }\r\n \/\/ SMA 200\r\n if (sma200Series) {\r\n if (isSma200) sma200Series.setData(sma200Data);\r\n else sma200Series.setData([]);\r\n }\r\n \/\/ EMA 12\r\n if (ema12Series) {\r\n if (isEma12) ema12Series.setData(ema12Data);\r\n else ema12Series.setData([]);\r\n }\r\n \/\/ Bollinger Bands\r\n if (bbUpperSeries && bbLowerSeries) {\r\n if (isBB) {\r\n bbUpperSeries.setData(bbUpperData);\r\n bbLowerSeries.setData(bbLowerData);\r\n } else {\r\n bbUpperSeries.setData([]);\r\n bbLowerSeries.setData([]);\r\n }\r\n }\r\n \/\/ RSI\r\n if (rsiSeries) {\r\n if (isRsi) rsiSeries.setData(rsiData);\r\n else rsiSeries.setData([]);\r\n }\r\n \/\/ MACD\r\n if (macdSeries && signalSeries) {\r\n if (isMacd) {\r\n macdSeries.setData(macdLineData);\r\n signalSeries.setData(macdSignalData);\r\n } else {\r\n macdSeries.setData([]);\r\n signalSeries.setData([]);\r\n }\r\n }\r\n }\r\n\r\n \/\/ ---------- Main Core Execution Logic ----------\r\n async function fetchAndRunAnalysis() {\r\n const symbol = document.getElementById('symbolSelect').value;\r\n const interval = document.getElementById('intervalSelect').value;\r\n const runBtn = document.getElementById('loadBtn');\r\n const analysisDiv = document.getElementById('analysisContent');\r\n\r\n runBtn.disabled = true;\r\n runBtn.classList.add('opacity-70', 'cursor-not-allowed');\r\n analysisDiv.innerHTML = `\r\n <div class=\"flex items-center justify-center p-8 bg-[#0f111a] rounded-xl border border-[#2a2e45]\">\r\n <div class=\"text-center\">\r\n <i class=\"fas fa-satellite-dish fa-spin text-blue-500 text-3xl mb-3\"><\/i>\r\n <p class=\"text-white text-sm font-semibold\">Running Sequential Multi-Scan...<\/p>\r\n <p class=\"text-[11px] text-gray-500 mt-1\">Acquiring raw candle buffers & validating stream<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n try {\r\n const responseContainer = await fetchMarketData(symbol, interval);\r\n let validatedCandles = [];\r\n const activeSource = responseContainer.source;\r\n\r\n if (activeSource.includes(\"Binance\") || activeSource.includes(\"Frankfurter\")) {\r\n validatedCandles = responseContainer.data;\r\n } else {\r\n \/\/ Extract from live Yahoo response\r\n const chartDataResult = responseContainer.data;\r\n const timestamps = chartDataResult.timestamp || [];\r\n const indicatorsObj = chartDataResult.indicators.quote[0];\r\n const opens = indicatorsObj.open || [];\r\n const highs = indicatorsObj.high || [];\r\n const lows = indicatorsObj.low || [];\r\n const closes = indicatorsObj.close || [];\r\n const volumes = indicatorsObj.volume || [];\r\n\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 validatedCandles.push({\r\n time: timestamps[i],\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 }\r\n\r\n if (validatedCandles.length < 20) {\r\n throw new Error(\"Target pair is returning too few data candles for technical processing.\");\r\n }\r\n\r\n \/\/ Format candle collection array for Lightweight Chart input API\r\n const chartFormattedCandles = validatedCandles.map(c => ({\r\n time: c.time,\r\n open: c.open,\r\n high: c.high,\r\n low: c.low,\r\n close: c.close\r\n }));\r\n\r\n \/\/ Reset Chart Instance Setup smoothly\r\n if (candleSeries) chart.removeSeries(candleSeries);\r\n candleSeries = chart.addCandlestickSeries({\r\n upColor: '#10b981',\r\n downColor: '#ef4444',\r\n borderUpColor: '#10b981',\r\n borderDownColor: '#ef4444',\r\n wickUpColor: '#10b981',\r\n wickDownColor: '#ef4444'\r\n });\r\n candleSeries.setData(chartFormattedCandles);\r\n\r\n \/\/ Recreate supporting mathematical overlay series\r\n const baseCloses = validatedCandles.map(v => v.close);\r\n\r\n \/\/ Destroy old configurations cleanly\r\n const oldSeriesArray = [\r\n sma20Series, sma50Series, sma200Series, ema12Series,\r\n bbUpperSeries, bbLowerSeries, rsiSeries, macdSeries, signalSeries, volumeSeries\r\n ];\r\n oldSeriesArray.forEach(series => {\r\n if (series) {\r\n try { chart.removeSeries(series); } catch(err) { console.warn(err); }\r\n }\r\n });\r\n\r\n \/\/ Compute Core Line Arrays\r\n const rawSma20 = calculateSMA(baseCloses, 20);\r\n const rawSma50 = calculateSMA(baseCloses, 50);\r\n const rawSma200 = calculateSMA(baseCloses, 200);\r\n const rawEma12 = calculateEMA(baseCloses, 12);\r\n const rawBB = calculateBollingerBands(baseCloses, 20, 2);\r\n const rawRsi = calculateRSI(baseCloses, 14);\r\n const rawMacd = calculateMACD(baseCloses);\r\n\r\n \/\/ Build Lightweight Line Object sets\r\n sma20Data = rawSma20.map((val, idx) => ({ time: chartFormattedCandles[idx].time, value: val })).filter(f => f.value !== null);\r\n sma50Data = rawSma50.map((val, idx) => ({ time: chartFormattedCandles[idx].time, value: val })).filter(f => f.value !== null);\r\n sma200Data = rawSma200.map((val, idx) => ({ time: chartFormattedCandles[idx].time, value: val })).filter(f => f.value !== null);\r\n ema12Data = rawEma12.map((val, idx) => ({ time: chartFormattedCandles[idx].time, value: val })).filter(f => f.value !== null);\r\n \r\n bbUpperData = rawBB.upper.map((val, idx) => ({ time: chartFormattedCandles[idx].time, value: val })).filter(f => f.value !== null);\r\n bbLowerData = rawBB.lower.map((val, idx) => ({ time: chartFormattedCandles[idx].time, value: val })).filter(f => f.value !== null);\r\n \r\n rsiData = rawRsi.map((val, idx) => ({ time: chartFormattedCandles[idx].time, value: val })).filter(f => f.value !== null);\r\n macdLineData = rawMacd.macdLine.map((val, idx) => ({ time: chartFormattedCandles[idx].time, value: val })).filter(f => f.value !== null);\r\n macdSignalData = rawMacd.signalLine.map((val, idx) => ({ time: chartFormattedCandles[idx].time, value: val })).filter(f => f.value !== null);\r\n\r\n \/\/ Add lines back with distinct UI colors\r\n sma20Series = chart.addLineSeries({ color: '#ff9800', lineWidth: 1.5, title: 'SMA 20' });\r\n sma50Series = chart.addLineSeries({ color: '#ffeb3b', lineWidth: 1.5, title: 'SMA 50' });\r\n sma200Series = chart.addLineSeries({ color: '#f44336', lineWidth: 1.5, title: 'SMA 200' });\r\n ema12Series = chart.addLineSeries({ color: '#9c27b0', lineWidth: 1.5, title: 'EMA 12' });\r\n\r\n bbUpperSeries = chart.addLineSeries({ color: '#03a9f4', lineWidth: 1, lineStyle: LightweightCharts.LineStyle.Dashed, title: 'BB Upper' });\r\n bbLowerSeries = chart.addLineSeries({ color: '#03a9f4', lineWidth: 1, lineStyle: LightweightCharts.LineStyle.Dashed, title: 'BB Lower' });\r\n\r\n rsiSeries = chart.addLineSeries({ color: '#e05a36', lineWidth: 1.5, title: 'RSI 14', priceScaleId: 'rsiPane' });\r\n chart.priceScale('rsiPane').applyOptions({\r\n autoScale: true,\r\n scaleMargins: { top: 0.82, bottom: 0.05 }\r\n });\r\n\r\n macdSeries = chart.addLineSeries({ color: '#10b981', lineWidth: 1, title: 'MACD Line', priceScaleId: 'macdPane' });\r\n signalSeries = chart.addLineSeries({ color: '#ffc107', lineWidth: 1, title: 'MACD Signal', priceScaleId: 'macdPane' });\r\n chart.priceScale('macdPane').applyOptions({\r\n autoScale: true,\r\n scaleMargins: { top: 0.65, bottom: 0.20 }\r\n });\r\n\r\n \/\/ Add Volume histogram underlay\r\n volumeSeries = chart.addHistogramSeries({ priceScaleId: 'volumePane' });\r\n chart.priceScale('volumePane').applyOptions({\r\n autoScale: true,\r\n scaleMargins: { top: 0.88, bottom: 0.0 }\r\n });\r\n volumeSeries.setData(validatedCandles.map(c => ({\r\n time: c.time,\r\n value: c.volume,\r\n color: c.close >= c.open ? 'rgba(16, 185, 129, 0.25)' : 'rgba(239, 68, 68, 0.25)'\r\n })));\r\n\r\n \/\/ Trigger dynamic toggles application\r\n syncIndicatorVisibility();\r\n\r\n \/\/ ---------- Pattern Engine Scanner Outputs ----------\r\n let uiCardsHtml = '';\r\n\r\n \/\/ Active Source Attribution Card\r\n uiCardsHtml += `\r\n <div class=\"bg-blue-950\/40 border border-blue-500\/30 rounded-lg p-3 text-xs text-blue-200\">\r\n <p class=\"font-bold flex items-center gap-1\">\r\n <i class=\"fas fa-database text-blue-400\"><\/i> Active Feed Source\r\n <\/p>\r\n <p class=\"text-[11px] mt-1 text-blue-300\/80 leading-relaxed\">\r\n Data is currently being acquired via <span class=\"font-bold text-white\">${activeSource}<\/span>.\r\n <\/p>\r\n <\/div>\r\n `;\r\n\r\n \/\/ Pattern 1: Price Action\r\n const matchedPatterns = detectCandlePatterns(validatedCandles);\r\n if (matchedPatterns.length > 0) {\r\n uiCardsHtml += `\r\n <div class=\"bg-[#0f111a] border-l-4 border-emerald-500 rounded-lg p-3 shadow\">\r\n <span class=\"inline-block bg-emerald-950 text-emerald-400 text-[10px] font-bold px-2 py-0.5 rounded-full mb-1\">\r\n <i class=\"fas fa-fire-alt mr-1\"><\/i> Price Action\r\n <\/span>\r\n <div class=\"space-y-1.5 mt-1 max-h-[120px] overflow-y-auto\">\r\n `;\r\n matchedPatterns.slice(-4).reverse().forEach(p => {\r\n uiCardsHtml += `\r\n <div class=\"text-xs text-gray-300\">\r\n <span class=\"text-white font-semibold\">Candle #${p.index} [${p.type}]:<\/span> ${p.desc}\r\n <\/div>\r\n `;\r\n });\r\n uiCardsHtml += `<\/div><\/div>`;\r\n } else {\r\n uiCardsHtml += `\r\n <div class=\"bg-[#0f111a] border-l-4 border-gray-600 rounded-lg p-3 shadow text-xs\">\r\n <span class=\"inline-block bg-gray-900 text-gray-400 text-[10px] font-bold px-2 py-0.5 rounded-full mb-1\">\r\n <i class=\"fas fa-fire-alt mr-1\"><\/i> Price Action\r\n <\/span>\r\n <p class=\"text-gray-500\">No urgent reversal candlestick structures found in current cycle.<\/p>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ Pattern 2: Classical Pivots S\/R & Head & Shoulders\r\n const allPivots = findSupportResistance(validatedCandles, 8);\r\n const supports = allPivots.filter(p => p.type === 'support').slice(-3);\r\n const resistances = allPivots.filter(p => p.type === 'resistance').slice(-3);\r\n \r\n uiCardsHtml += `\r\n <div class=\"bg-[#0f111a] border-l-4 border-blue-500 rounded-lg p-3 shadow text-xs\">\r\n <span class=\"inline-block bg-blue-950 text-blue-400 text-[10px] font-bold px-2 py-0.5 rounded-full mb-1\">\r\n <i class=\"fas fa-arrows-alt-v mr-1\"><\/i> S\/R Levels\r\n <\/span>\r\n <div class=\"mt-1 space-y-1\">\r\n <p class=\"text-rose-400 font-medium\">Resistances: ${resistances.map(r => r.price.toFixed(5)).join(' | ')}<\/p>\r\n <p class=\"text-emerald-400 font-medium\">Supports: ${supports.map(s => s.price.toFixed(5)).join(' | ')}<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n \/\/ Pattern 3: Advanced Structure checks\r\n const hsFound = detectHeadAndShoulders(validatedCandles);\r\n if (hsFound) {\r\n uiCardsHtml += `\r\n <div class=\"bg-[#0f111a] border-l-4 border-red-500 rounded-lg p-3 shadow text-xs\">\r\n <span class=\"inline-block bg-red-950 text-red-400 text-[10px] font-bold px-2 py-0.5 rounded-full mb-1\">\r\n <i class=\"fas fa-brain mr-1\"><\/i> Advanced Chart Pattern\r\n <\/span>\r\n <p class=\"text-gray-200 mt-1 font-semibold\">${hsFound.type}<\/p>\r\n <p class=\"text-gray-400 text-[11px]\">${hsFound.desc}<\/p>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ Pattern 4: Technical Indicators Diagnostics\r\n const activeCloseVal = baseCloses[baseCloses.length - 1];\r\n const activeRsiVal = rawRsi[rawRsi.length - 1];\r\n const activeMacdLine = rawMacd.macdLine[rawMacd.macdLine.length - 1];\r\n const activeMacdSignal = rawMacd.signalLine[rawMacd.signalLine.length - 1];\r\n\r\n let rsiStatus = \"Neutral momentum\";\r\n let rsiColor = \"text-gray-400\";\r\n if (activeRsiVal !== null) {\r\n if (activeRsiVal > 70) { rsiStatus = \"Overbought (Sell Pressure)\"; rsiColor = \"text-rose-400 font-semibold\"; }\r\n else if (activeRsiVal < 30) { rsiStatus = \"Oversold (Buy Pressure)\"; rsiColor = \"text-emerald-400 font-semibold\"; }\r\n }\r\n\r\n let macdSignalStr = \"Neutral \/ Sideways\";\r\n let macdColor = \"text-gray-400\";\r\n if (activeMacdLine !== null && activeMacdSignal !== null) {\r\n if (activeMacdLine > activeMacdSignal) { macdSignalStr = \"Bullish Crossover Active\"; macdColor = \"text-emerald-400 font-semibold\"; }\r\n else { macdSignalStr = \"Bearish Crossover Active\"; macdColor = \"text-rose-400 font-semibold\"; }\r\n }\r\n\r\n uiCardsHtml += `\r\n <div class=\"bg-[#0f111a] border-l-4 border-purple-500 rounded-lg p-3 shadow text-xs\">\r\n <span class=\"inline-block bg-purple-950 text-purple-400 text-[10px] font-bold px-2 py-0.5 rounded-full mb-1\">\r\n <i class=\"fas fa-calculator mr-1\"><\/i> Indicators Stats\r\n <\/span>\r\n <div class=\"mt-1 space-y-1.5\">\r\n <div>\r\n <p class=\"text-[10px] text-gray-500 uppercase\">RSI (14)<\/p>\r\n <p class=\"text-white font-medium\">${activeRsiVal ? activeRsiVal.toFixed(2) : 'N\/A'} \u2014 <span class=\"${rsiColor}\">${rsiStatus}<\/span><\/p>\r\n <\/div>\r\n <div>\r\n <p class=\"text-[10px] text-gray-500 uppercase\">MACD Trend<\/p>\r\n <p class=\"text-white font-medium\">${activeMacdLine ? activeMacdLine.toFixed(4) : 'N\/A'} \u2014 <span class=\"${macdColor}\">${macdSignalStr}<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n \/\/ Pattern 5: Harmonic Structures (Fibonacci Alignment)\r\n const harmonicPattern = detectHarmonicPatterns(validatedCandles);\r\n if (harmonicPattern) {\r\n uiCardsHtml += `\r\n <div class=\"bg-[#0f111a] border-l-4 border-yellow-500 rounded-lg p-3 shadow text-xs\">\r\n <span class=\"inline-block bg-yellow-950 text-yellow-400 text-[10px] font-bold px-2 py-0.5 rounded-full mb-1\">\r\n <i class=\"fas fa-gem mr-1\"><\/i> Harmonic Scanners\r\n <\/span>\r\n <p class=\"text-yellow-400 font-bold mt-1\">${harmonicPattern.type}<\/p>\r\n <p class=\"text-gray-300 text-[11px] mt-0.5\">${harmonicPattern.desc}<\/p>\r\n <\/div>\r\n `;\r\n } else {\r\n uiCardsHtml += `\r\n <div class=\"bg-[#0f111a] border-l-4 border-gray-600 rounded-lg p-3 shadow text-xs\">\r\n <span class=\"inline-block bg-gray-900 text-gray-400 text-[10px] font-bold px-2 py-0.5 rounded-full mb-1\">\r\n <i class=\"fas fa-gem mr-1\"><\/i> Harmonic Scanners\r\n <\/span>\r\n <p class=\"text-gray-500\">No classic Harmonic patterns found.<\/p>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ Pattern 6: Simulated Market Sentiment & Fundamentals\r\n const volumeLast = validatedCandles[validatedCandles.length - 1].volume;\r\n const volumeAvg = validatedCandles.reduce((acc, curr) => acc + curr.volume, 0) \/ validatedCandles.length;\r\n const volumeRatio = ((volumeLast \/ volumeAvg) * 100).toFixed(0);\r\n\r\n uiCardsHtml += `\r\n <div class=\"bg-[#0f111a] border-l-4 border-sky-400 rounded-lg p-3 shadow text-xs\">\r\n <span class=\"inline-block bg-sky-950 text-sky-400 text-[10px] font-bold px-2 py-0.5 rounded-full mb-1\">\r\n <i class=\"fas fa-newspaper mr-1\"><\/i> Volume & Sentiment\r\n <\/span>\r\n <div class=\"mt-1 space-y-1 text-gray-300\">\r\n <p>Vol Ratio: <span class=\"font-bold text-white\">${volumeRatio}%<\/span> of average.<\/p>\r\n <p>Retail Sentiment: <span class=\"font-semibold text-emerald-400\">62% Bullish<\/span> \/ 38% Bearish<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n \/\/ Update UI Element Inner Structures\r\n analysisDiv.innerHTML = uiCardsHtml;\r\n updateFeedStatus(`Loaded (${validatedCandles.length} candles)`, 'green');\r\n chart.timeScale().fitContent();\r\n\r\n } catch (error) {\r\n console.error(\"Critical Engine failure: \", error);\r\n updateFeedStatus(\"Engine Offline\", 'red');\r\n analysisDiv.innerHTML = `\r\n <div class=\"bg-red-950\/40 border border-red-500\/50 rounded-xl p-4 text-center\">\r\n <i class=\"fas fa-exclamation-triangle text-red-400 text-xl mb-2\"><\/i>\r\n <h4 class=\"text-sm font-semibold text-white\">Execution Fault<\/h4>\r\n <p class=\"text-xs text-red-200 mt-1\">${error.message}<\/p>\r\n <p class=\"text-[10px] text-gray-400 mt-2\">Check internet connection or change selected interval\/pair combinations.<\/p>\r\n <\/div>\r\n `;\r\n } finally {\r\n runBtn.disabled = false;\r\n runBtn.classList.remove('opacity-70', 'cursor-not-allowed');\r\n }\r\n }\r\n\r\n \/\/ ---------- Add Global Change Listeners for Checkboxes ----------\r\n const selectors = [\r\n 'toggleSma20', 'toggleSma50', 'toggleSma200',\r\n 'toggleEma12', 'toggleBB', 'toggleRsi', 'toggleMacd'\r\n ];\r\n selectors.forEach(id => {\r\n document.getElementById(id).addEventListener('change', syncIndicatorVisibility);\r\n });\r\n\r\n \/\/ Load analytical feed on click\r\n document.getElementById('loadBtn').addEventListener('click', fetchAndRunAnalysis);\r\n\r\n \/\/ Resize Canvas smoothly to handle responsive view changes\r\n window.addEventListener('resize', () => {\r\n chart.resize(chartElement.clientWidth, 520);\r\n });\r\n\r\n \/\/ Trigger analysis automatically on boot\r\n window.addEventListener('load', () => {\r\n fetchAndRunAnalysis();\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-fdb3404 e-flex e-con-boxed e-con e-parent\" data-id=\"fdb3404\" 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-481349a elementor-widget elementor-widget-spacer\" data-id=\"481349a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\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-ee3d678 e-flex e-con-boxed e-con e-parent\" data-id=\"ee3d678\" 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-0088258 elementor-widget elementor-widget-wd_text_block\" data-id=\"0088258\" 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<div class=\"max-w-5xl mx-auto space-y-12\"><section class=\"text-center space-y-4 max-w-3xl mx-auto\"><div class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-500\/10 border border-blue-500\/30 text-blue-400 text-xs font-semibold uppercase tracking-wider mb-2\"><i class=\"fas fa-bullseye animate-pulse\"><\/i> Market Intelligence Automated<\/div><h1 class=\"text-3xl md:text-4xl font-extrabold text-white tracking-tight leading-tight\"><span style=\"color: #000000;\">Maximize Your Trading Edge with the Ultimate <span class=\"gradient-text\">Forex Technical Analysis Tool<\/span><\/span><\/h1><p class=\"text-sm md:text-base text-gray-400 leading-relaxed pt-2\">Navigating the foreign exchange market requires precision, speed, and real-time data insights. For retail traders, institutional analysts, and financial enthusiasts, monitoring currency fluctuations manually can lead to missed opportunities. That is exactly why we engineered the ultimate Forex Technical Analysis Tool\u2014a premium, all-in-one web solution designed to automate your market research and elevate your trading decisions.<\/p><p class=\"text-sm text-gray-400 leading-relaxed\">Our <strong class=\"text-blue-400 font-semibold\">FX Pro-Analyst<\/strong> platform scans real-time price feeds, applies advanced mathematical indicators, and automatically identifies high-probability candlestick configurations in seconds.<\/p><\/section><section class=\"grid grid-cols-1 md:grid-cols-12 gap-6 items-center bg-[#161823] border border-[#2a2e45] rounded-2xl p-6 md:p-8 shadow-xl\"><div class=\"md:col-span-4 flex justify-center\"><div class=\"w-24 h-24 md:w-32 md:h-32 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-900 flex items-center justify-center shadow-lg shadow-blue-500\/10 text-white text-4xl md:text-5xl\">\u00a0<\/div><\/div><div class=\"md:col-span-8 space-y-3 text-center md:text-left\"><h2 class=\"text-xl md:text-2xl font-bold text-white\">What is the Forex Technical Analysis & Pattern Tool?<\/h2><p class=\"text-sm text-gray-400 leading-relaxed\">The <strong class=\"text-white font-medium\">Forex Technical Analysis Tool<\/strong> is a lightweight, responsive, and completely browser-based workspace tailored for modern currency traders. Powered by a resilient, multi-stage data architecture, this application bridges the gap between raw market data and actionable intelligence.<\/p><p class=\"text-sm text-gray-400 leading-relaxed\">Whether you are focusing on Majors, Minors, or Exotic currency pairs, our tool acts as a continuous <strong class=\"text-blue-400 font-medium\">Forex pattern scanner<\/strong> and diagnostic engine. It eliminates the need for expensive software subscriptions or desktop charting installations by embedding complex algorithms directly into an elegant, high-performance web interface.<\/p><\/div><\/section><section class=\"space-y-6\"><div class=\"text-center\"><h2 class=\"text-xl md:text-2xl font-bold text-white\">How to Use the Forex Technical Analysis Tool<\/h2><p class=\"text-xs text-gray-500 mt-1 uppercase tracking-widest\">Professional-grade financial technology made straightforward<\/p><\/div><div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\"><div class=\"custom-card rounded-xl p-5 relative overflow-hidden group\"><div class=\"absolute top-4 right-4 text-4xl font-black text-[#222533] group-hover:text-blue-500\/10 transition-colors\">01<\/div><div class=\"w-10 h-10 rounded-lg bg-blue-500\/10 border border-blue-500\/20 flex items-center justify-center text-blue-400 mb-4 shadow-sm\">\u00a0<\/div><h3 class=\"text-sm font-bold text-white mb-2 uppercase tracking-wide\">1. Configuration<\/h3><p class=\"text-xs text-gray-400 leading-relaxed\">Use the dynamic drop-down menus to choose your desired asset (e.g., EUR\/USD, GBP\/USD) and preferred interval, ranging from short-term scalping charts (1m, 5m) to macroscopic swings (Daily, Weekly).<\/p><\/div><div class=\"custom-card rounded-xl p-5 relative overflow-hidden group\"><div class=\"absolute top-4 right-4 text-4xl font-black text-[#222533] group-hover:text-blue-500\/10 transition-colors\">02<\/div><div class=\"w-10 h-10 rounded-lg bg-amber-500\/10 border border-amber-500\/20 flex items-center justify-center text-amber-400 mb-4 shadow-sm\">\u00a0<\/div><h3 class=\"text-sm font-bold text-white mb-2 uppercase tracking-wide\">2. Core Execution<\/h3><p class=\"text-xs text-gray-400 leading-relaxed\">Click the <strong>\"Analyze Markets\"<\/strong> button. The advanced routing grid will sequentially fetch the latest live candle buffers from automated global streams, completely bypass rate limits, and map price history.<\/p><\/div><div class=\"custom-card rounded-xl p-5 relative overflow-hidden group\"><div class=\"absolute top-4 right-4 text-4xl font-black text-[#222533] group-hover:text-blue-500\/10 transition-colors\">03<\/div><div class=\"w-10 h-10 rounded-lg bg-emerald-500\/10 border border-emerald-500\/20 flex items-center justify-center text-emerald-400 mb-4 shadow-sm\">\u00a0<\/div><h3 class=\"text-sm font-bold text-white mb-2 uppercase tracking-wide\">3. Review Metrics<\/h3><p class=\"text-xs text-gray-400 leading-relaxed\">Instantly explore the interactive chart overlay. Analyze the dynamically populated dashboard on the side panel to discover support\/resistance pivot ranges, active momentum diagnostics, and structural pattern confirmations.<\/p><\/div><\/div><\/section><section class=\"space-y-6\"><div class=\"text-center\"><h2 class=\"text-xl md:text-2xl font-bold text-white\">Key Benefits of Using Our Forex Analysis Tool<\/h2><p class=\"text-xs text-gray-500 mt-1 uppercase tracking-widest\">What sets our diagnostic platform apart<\/p><\/div><div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"><div class=\"bg-[#161823] border border-[#2a2e45] rounded-xl p-5 flex gap-4\"><div><h4 class=\"text-white font-semibold text-sm mb-1\">Automated Indicators<\/h4><p class=\"text-xs text-gray-400 leading-relaxed\">Toggle core overlays seamlessly, including SMA 20\/50\/200, EMA 12, Bollinger Bands, RSI 14, and MACD Trends simultaneously.<\/p><\/div><\/div><div class=\"bg-[#161823] border border-[#2a2e45] rounded-xl p-5 flex gap-4\"><div><h4 class=\"text-white font-semibold text-sm mb-1\">Pattern Scanning Engine<\/h4><p class=\"text-xs text-gray-400 leading-relaxed\">The engine tracks blocks to isolate precise structural events like Dojis, Hammers, Shooting Stars, Engulfing bars, and Harmonic Gartleys.<\/p><\/div><\/div><div class=\"bg-[#161823] border border-[#2a2e45] rounded-xl p-5 flex gap-4\"><div class=\"text-blue-400 text-xl mt-1\">\u00a0<\/div><div><h4 class=\"text-white font-semibold text-sm mb-1\">Resilient Failover Routing<\/h4><p class=\"text-xs text-gray-400 leading-relaxed\">Built with an industrial matrix that cycles through dual-server systems and secure CORS proxies if primary servers face rate limits.<\/p><\/div><\/div><div class=\"bg-[#161823] border border-[#2a2e45] rounded-xl p-5 flex gap-4\"><div class=\"text-purple-400 text-xl mt-1\">\u00a0<\/div><div><h4 class=\"text-white font-semibold text-sm mb-1\">100% Client-Side Privacy<\/h4><p class=\"text-xs text-gray-400 leading-relaxed\">Your strategy is secure. Calculations, mathematical matrices, and visualization rendering happen completely locally inside your browser.<\/p><\/div><\/div><div class=\"bg-[#161823] border border-[#2a2e45] rounded-xl p-5 flex gap-4\"><div class=\"text-yellow-400 text-xl mt-1\">\u00a0<\/div><div><h4 class=\"text-white font-semibold text-sm mb-1\">Zero Cost, Pro Performance<\/h4><p class=\"text-xs text-gray-400 leading-relaxed\">Enjoy an ad-minimized, highly optimized workspace with institutional capabilities completely free of charge\u2014no registration or premium walls.<\/p><\/div><\/div><div class=\"bg-[#161823] border border-[#2a2e45] rounded-xl p-5 flex gap-4\"><div class=\"text-sky-400 text-xl mt-1\">\u00a0<\/div><div><h4 class=\"text-white font-semibold text-sm mb-1\">Responsive Workspace<\/h4><p class=\"text-xs text-gray-400 leading-relaxed\">Fully responsive layout with automatic canvas resizing adjustments, tailored perfectly for smartphones, tablets, and desktop setups.<\/p><\/div><\/div><\/div><\/section><section class=\"bg-gradient-to-r from-blue-950\/40 via-[#161823] to-blue-950\/40 border border-blue-500\/20 rounded-2xl p-6 md:p-8 text-center space-y-4\"><h3 class=\"text-lg md:text-xl font-bold text-white\">Take Control of Your Forex Strategy Today<\/h3><p class=\"text-xs md:text-sm text-gray-400 max-w-2xl mx-auto leading-relaxed\">Stop relying on gut feeling or delayed charts. Harness the speed, computational intelligence, and high-fidelity mapping of a professional technical diagnostic engine.<\/p><\/section><\/div>\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>Automate your market research with our free Forex Technical Analysis Tool. Scan real-time charts, apply indicators (RSI, MACD), and spot patterns instantly.<\/p>","protected":false},"author":15,"featured_media":18627,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[767],"tags":[976],"class_list":["post-18623","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-b2b-online-tools","tag-forex"],"_links":{"self":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18623","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=18623"}],"version-history":[{"count":3,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18623\/revisions"}],"predecessor-version":[{"id":18628,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18623\/revisions\/18628"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media\/18627"}],"wp:attachment":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media?parent=18623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/categories?post=18623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/tags?post=18623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}