|
|
| document.addEventListener('DOMContentLoaded', function() { |
| |
| feather.replace(); |
|
|
| |
| const darkModeToggle = document.createElement('button'); |
| darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50'; |
| darkModeToggle.innerHTML = '<i data-feather="moon"></i>'; |
| document.body.appendChild(darkModeToggle); |
| |
| darkModeToggle.addEventListener('click', function() { |
| document.documentElement.classList.toggle('dark'); |
| const icon = darkModeToggle.querySelector('i'); |
| if (document.documentElement.classList.contains('dark')) { |
| icon.setAttribute('data-feather', 'sun'); |
| } else { |
| icon.setAttribute('data-feather', 'moon'); |
| } |
| feather.replace(); |
| }); |
| |
| const outputConsole = document.getElementById('output-console'); |
| if (outputConsole) { |
| |
| const clearBtn = outputConsole.closest('.rounded-lg').previousElementSibling.querySelector('button:has(i[data-feather="trash-2"])'); |
| clearBtn.addEventListener('click', () => { |
| outputConsole.innerHTML = ''; |
| }); |
|
|
| |
| const copyBtn = outputConsole.closest('.rounded-lg').previousElementSibling.querySelector('button:has(i[data-feather="copy"])'); |
| copyBtn.addEventListener('click', () => { |
| const range = document.createRange(); |
| range.selectNode(outputConsole); |
| window.getSelection().removeAllRanges(); |
| window.getSelection().addRange(range); |
| document.execCommand('copy'); |
| window.getSelection().removeAllRanges(); |
| |
| |
| const feedback = document.createElement('div'); |
| feedback.className = 'absolute bg-gray-800 text-white px-2 py-1 rounded text-xs'; |
| feedback.textContent = 'Copied!'; |
| copyBtn.appendChild(feedback); |
| setTimeout(() => feedback.remove(), 1000); |
| }); |
|
|
| |
| const compileButton = document.querySelector('button:has(i[data-feather="play"])'); |
| if (compileButton) { |
| compileButton.addEventListener('click', function() { |
| const messages = [ |
| {text: '> Code compiled successfully!', color: 'text-green-400'}, |
| {text: '> No errors found', color: 'text-green-400'}, |
| {text: '> Expert Advisor initialized', color: 'text-blue-400'}, |
| {text: '> Waiting for market data...', color: 'text-yellow-400'} |
| ]; |
| |
| messages.forEach((msg, i) => { |
| setTimeout(() => { |
| const newEntry = document.createElement('div'); |
| newEntry.className = msg.color; |
| newEntry.textContent = msg.text; |
| outputConsole.appendChild(newEntry); |
| outputConsole.scrollTop = outputConsole.scrollHeight; |
| }, i * 300); |
| }); |
| }); |
| } |
| } |
| |
| const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])'); |
| if (mobileMenuButton) { |
| mobileMenuButton.addEventListener('click', function() { |
| const nav = document.querySelector('nav'); |
| if (nav) { |
| nav.classList.toggle('hidden'); |
| nav.classList.toggle('flex'); |
| } |
| }); |
| } |
|
|
| |
| const tooltipElements = document.querySelectorAll('[data-tooltip]'); |
| tooltipElements.forEach(el => { |
| el.addEventListener('mouseenter', function() { |
| const tooltip = document.createElement('div'); |
| tooltip.className = 'absolute z-50 px-2 py-1 text-xs text-white bg-gray-800 rounded'; |
| tooltip.textContent = this.getAttribute('data-tooltip'); |
| this.appendChild(tooltip); |
| |
| this.addEventListener('mouseleave', function() { |
| tooltip.remove(); |
| }); |
| }); |
| }); |
|
|
| |
| const codeBlocks = document.querySelectorAll('code.language-mql5'); |
| codeBlocks.forEach(block => { |
| const code = block.innerHTML; |
| let highlighted = code; |
| |
| |
| const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', |
| 'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick']; |
| keywords.forEach(keyword => { |
| const regex = new RegExp(`\\b${keyword}\\b`, 'g'); |
| highlighted = highlighted.replace(regex, `<span class="text-pink-400">${keyword}</span>`); |
| }); |
| |
| |
| const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble']; |
| functions.forEach(func => { |
| const regex = new RegExp(`\\b${func}\\b`, 'g'); |
| highlighted = highlighted.replace(regex, `<span class="text-blue-400">${func}</span>`); |
| }); |
| |
| |
| highlighted = highlighted.replace(/"([^"]*)"/g, `<span class="text-green-400">"$1"</span>`); |
| |
| |
| highlighted = highlighted.replace(/\b(\d+\.?\d*)\b/g, `<span class="text-yellow-400">$1</span>`); |
| |
| |
| highlighted = highlighted.replace(/\/\/.*$/gm, `<span class="text-gray-500 italic"> |
| document.addEventListener('DOMContentLoaded', function() { |
| // Initialize feather icons |
| feather.replace(); |
| |
| // Toggle dark mode |
| const darkModeToggle = document.createElement('button'); |
| darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50'; |
| darkModeToggle.innerHTML = '<i data-feather="moon"></i>'; |
| document.body.appendChild(darkModeToggle); |
| |
| darkModeToggle.addEventListener('click', function() { |
| document.documentElement.classList.toggle('dark'); |
| const icon = darkModeToggle.querySelector('i'); |
| if (document.documentElement.classList.contains('dark')) { |
| icon.setAttribute('data-feather', 'sun'); |
| } else { |
| icon.setAttribute('data-feather', 'moon'); |
| } |
| feather.replace(); |
| }); |
| |
| // Simulate code editor functionality |
| const compileButton = document.querySelector('button:has(i[data-feather="play"])'); |
| if (compileButton) { |
| compileButton.addEventListener('click', function() { |
| const outputConsole = document.querySelector('.bg-gray-900.text-gray-300'); |
| if (outputConsole) { |
| const newEntry = document.createElement('div'); |
| newEntry.className = 'text-green-400'; |
| newEntry.textContent = '> Code compiled successfully!'; |
| outputConsole.appendChild(newEntry); |
| outputConsole.scrollTop = outputConsole.scrollHeight; |
| } |
| }); |
| } |
| |
| // Mobile menu toggle |
| const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])'); |
| if (mobileMenuButton) { |
| mobileMenuButton.addEventListener('click', function() { |
| const nav = document.querySelector('nav'); |
| if (nav) { |
| nav.classList.toggle('hidden'); |
| nav.classList.toggle('flex'); |
| } |
| }); |
| } |
| |
| // Initialize tooltips |
| const tooltipElements = document.querySelectorAll('[data-tooltip]'); |
| tooltipElements.forEach(el => { |
| el.addEventListener('mouseenter', function() { |
| const tooltip = document.createElement('div'); |
| tooltip.className = 'absolute z-50 px-2 py-1 text-xs text-white bg-gray-800 rounded'; |
| tooltip.textContent = this.getAttribute('data-tooltip'); |
| this.appendChild(tooltip); |
| |
| this.addEventListener('mouseleave', function() { |
| tooltip.remove(); |
| }); |
| }); |
| }); |
| |
| // Highlight MQL5 code |
| const codeBlocks = document.querySelectorAll('code.language-mql5'); |
| codeBlocks.forEach(block => { |
| const code = block.innerHTML; |
| let highlighted = code; |
| |
| // Highlight keywords |
| const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', |
| 'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick']; |
| keywords.forEach(keyword => { |
| const regex = new RegExp(`\\b${keyword}\\b`, 'g'); |
| highlighted = highlighted.replace(regex, `<span class="text-pink-400">${keyword}</span>`); |
| }); |
| |
| // Highlight functions |
| const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble']; |
| functions.forEach(func => { |
| const regex = new RegExp(`\\b${func}\\b`, 'g'); |
| highlighted = highlighted.replace(regex, `<span class="text-blue-400">${func}</span>`); |
| }); |
| |
| // Highlight strings |
| highlighted = highlighted.replace(/"([^"]*)"/g, `<span class="text-green-400">"$1"</span>`); |
| |
| // Highlight numbers |
| highlighted = highlighted.replace(/\b(\d+\.?\d*)\b/g, `<span class="text-yellow-400">$1</span>`); |
| |
| // Highlight comments |
| highlighted = highlighted.replace(/\/\/.*$/gm, `<span class="text-gray-500 italic">document.addEventListener('DOMContentLoaded', function() { |
| |
| const darkModeToggle = document.createElement('button'); |
| darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50'; |
| darkModeToggle.innerHTML = '<i data-feather="moon"></i>'; |
| document.body.appendChild(darkModeToggle); |
| |
| darkModeToggle.addEventListener('click', function() { |
| document.documentElement.classList.toggle('dark'); |
| const icon = darkModeToggle.querySelector('i'); |
| if (document.documentElement.classList.contains('dark')) { |
| icon.setAttribute('data-feather', 'sun'); |
| } else { |
| icon.setAttribute('data-feather', 'moon'); |
| } |
| feather.replace(); |
| }); |
|
|
| |
| const compileButton = document.querySelector('button:has(i[data-feather="play"])'); |
| if (compileButton) { |
| compileButton.addEventListener('click', function() { |
| const outputConsole = document.querySelector('.bg-gray-900.text-gray-300'); |
| if (outputConsole) { |
| const newEntry = document.createElement('div'); |
| newEntry.className = 'text-green-400'; |
| newEntry.textContent = '> Code compiled successfully!'; |
| outputConsole.appendChild(newEntry); |
| outputConsole.scrollTop = outputConsole.scrollHeight; |
| } |
| }); |
| } |
|
|
| |
| const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])'); |
| if (mobileMenuButton) { |
| mobileMenuButton.addEventListener('click', function() { |
| |
| alert('Mobile menu would open here in a full implementation'); |
| }); |
| } |
|
|
| |
| const tooltipElements = document.querySelectorAll('[data-tooltip]'); |
| tooltipElements.forEach(el => { |
| el.addEventListener('mouseenter', function() { |
| |
| }); |
| }); |
|
|
| |
| feather.replace(); |
| }); |
|
|
| |
| function highlightMQL5Code() { |
| const codeBlocks = document.querySelectorAll('code.language-mql5'); |
| codeBlocks.forEach(block => { |
| const code = block.textContent; |
| let highlighted = code; |
| |
| |
| const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', |
| 'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick']; |
| keywords.forEach(keyword => { |
| const regex = new RegExp(`\\b${keyword}\\b`, 'g'); |
| highlighted = highlighted.replace(regex, `<span class="keyword">${keyword}</span>`); |
| }); |
| |
| |
| const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble']; |
| functions.forEach(func => { |
| const regex = new RegExp(`\\b${func}\\b`, 'g'); |
| highlighted = highlighted.replace(regex, `<span</span>`); |
| |
| block.innerHTML = highlighted; |
| }); |
| }); |
| </span>`); |
| highlighted = highlighted.replace(/\/\*[\s\S]*?\*\//g, `<span class="text-gray-500 italic"> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| feather.replace(); |
|
|
| |
| const darkModeToggle = document.createElement('button'); |
| darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50'; |
| darkModeToggle.innerHTML = '<i data-feather="moon"></i>'; |
| document.body.appendChild(darkModeToggle); |
| |
| darkModeToggle.addEventListener('click', function() { |
| document.documentElement.classList.toggle('dark'); |
| const icon = darkModeToggle.querySelector('i'); |
| if (document.documentElement.classList.contains('dark')) { |
| icon.setAttribute('data-feather', 'sun'); |
| } else { |
| icon.setAttribute('data-feather', 'moon'); |
| } |
| feather.replace(); |
| }); |
|
|
| |
| const compileButton = document.querySelector('button:has(i[data-feather="play"])'); |
| if (compileButton) { |
| compileButton.addEventListener('click', function() { |
| const outputConsole = document.querySelector('.bg-gray-900.text-gray-300'); |
| if (outputConsole) { |
| const newEntry = document.createElement('div'); |
| newEntry.className = 'text-green-400'; |
| newEntry.textContent = '> Code compiled successfully!'; |
| outputConsole.appendChild(newEntry); |
| outputConsole.scrollTop = outputConsole.scrollHeight; |
| } |
| }); |
| } |
|
|
| |
| const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])'); |
| if (mobileMenuButton) { |
| mobileMenuButton.addEventListener('click', function() { |
| const nav = document.querySelector('nav'); |
| if (nav) { |
| nav.classList.toggle('hidden'); |
| nav.classList.toggle('flex'); |
| } |
| }); |
| } |
|
|
| |
| const tooltipElements = document.querySelectorAll('[data-tooltip]'); |
| tooltipElements.forEach(el => { |
| el.addEventListener('mouseenter', function() { |
| const tooltip = document.createElement('div'); |
| tooltip.className = 'absolute z-50 px-2 py-1 text-xs text-white bg-gray-800 rounded'; |
| tooltip.textContent = this.getAttribute('data-tooltip'); |
| this.appendChild(tooltip); |
| |
| this.addEventListener('mouseleave', function() { |
| tooltip.remove(); |
| }); |
| }); |
| }); |
|
|
| |
| const codeBlocks = document.querySelectorAll('code.language-mql5'); |
| codeBlocks.forEach(block => { |
| const code = block.innerHTML; |
| let highlighted = code; |
| |
| |
| const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', |
| 'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick']; |
| keywords.forEach(keyword => { |
| const regex = new RegExp(`\\b${keyword}\\b`, 'g'); |
| highlighted = highlighted.replace(regex, `<span class="text-pink-400">${keyword}</span>`); |
| }); |
| |
| |
| const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble']; |
| functions.forEach(func => { |
| const regex = new RegExp(`\\b${func}\\b`, 'g'); |
| highlighted = highlighted.replace(regex, `<span class="text-blue-400">${func}</span>`); |
| }); |
| |
| |
| highlighted = highlighted.replace(/"([^"]*)"/g, `<span class="text-green-400">"$1"</span>`); |
| |
| |
| highlighted = highlighted.replace(/\b(\d+\.?\d*)\b/g, `<span class="text-yellow-400">$1</span>`); |
| |
| |
| highlighted = highlighted.replace(/\/\/.*$/gm, `<span class="text-gray-500 italic">document.addEventListener('DOMContentLoaded', function() { |
| // Toggle dark mode |
| const darkModeToggle = document.createElement('button'); |
| darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50'; |
| darkModeToggle.innerHTML = '<i data-feather="moon"></i>'; |
| document.body.appendChild(darkModeToggle); |
| |
| darkModeToggle.addEventListener('click', function() { |
| document.documentElement.classList.toggle('dark'); |
| const icon = darkModeToggle.querySelector('i'); |
| if (document.documentElement.classList.contains('dark')) { |
| icon.setAttribute('data-feather', 'sun'); |
| } else { |
| icon.setAttribute('data-feather', 'moon'); |
| } |
| feather.replace(); |
| }); |
| |
| // Simulate code editor functionality |
| const compileButton = document.querySelector('button:has(i[data-feather="play"])'); |
| if (compileButton) { |
| compileButton.addEventListener('click', function() { |
| const outputConsole = document.querySelector('.bg-gray-900.text-gray-300'); |
| if (outputConsole) { |
| const newEntry = document.createElement('div'); |
| newEntry.className = 'text-green-400'; |
| newEntry.textContent = '> Code compiled successfully!'; |
| outputConsole.appendChild(newEntry); |
| outputConsole.scrollTop = outputConsole.scrollHeight; |
| } |
| }); |
| } |
| |
| // Mobile menu toggle |
| const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])'); |
| if (mobileMenuButton) { |
| mobileMenuButton.addEventListener('click', function() { |
| // This would toggle a mobile menu in a real implementation |
| alert('Mobile menu would open here in a full implementation'); |
| }); |
| } |
| |
| // Initialize tooltips |
| const tooltipElements = document.querySelectorAll('[data-tooltip]'); |
| tooltipElements.forEach(el => { |
| el.addEventListener('mouseenter', function() { |
| // Tooltip display logic would go here |
| }); |
| }); |
| |
| // Re-initialize feather icons after dynamic content changes |
| feather.replace(); |
| }); |
| |
| // Syntax highlighting for MQL5 code |
| function highlightMQL5Code() { |
| const codeBlocks = document.querySelectorAll('code.language-mql5'); |
| codeBlocks.forEach(block => { |
| const code = block.textContent; |
| let highlighted = code; |
| |
| // Highlight keywords |
| const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', |
| 'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick']; |
| keywords.forEach(keyword => { |
| const regex = new RegExp(`\\b${keyword}\\b`, 'g'); |
| highlighted = highlighted.replace(regex, `<span class="keyword">${keyword}</span>`); |
| }); |
| |
| // Highlight functions |
| const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble']; |
| functions.forEach(func => { |
| const regex = new RegExp(`\\b${func}\\b`, 'g'); |
| highlighted = highlighted.replace(regex, `<span</span>`); |
| |
| block.innerHTML = highlighted; |
| }); |
| }); |
| </span>`); |
| |
| block.innerHTML = highlighted; |
| }); |
| }); |
|
|
