Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PatternSpotter Pro | MT5 Pattern Detection</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| .pattern-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div id="vanta-bg" class="gradient-bg min-h-screen"> | |
| <header class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="trending-up" class="text-white w-8 h-8"></i> | |
| <h1 class="text-3xl font-bold text-white">PatternSpotter Pro</h1> | |
| </div> | |
| <nav class="hidden md:block"> | |
| <ul class="flex space-x-8"> | |
| <li><a href="#" class="text-white hover:text-blue-200 transition">Home</a></li> | |
| <li><a href="#features" class="text-white hover:text-blue-200 transition">Features</a></li> | |
| <li><a href="#patterns" class="text-white hover:text-blue-200 transition">Patterns</a></li> | |
| <li><a href="#download" class="text-white hover:text-blue-200 transition">Download</a></li> | |
| </ul> | |
| </nav> | |
| <button class="md:hidden text-white"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-12"> | |
| <section class="text-center mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">Revolutionize Your Trading</h2> | |
| <p class="text-xl text-blue-100 max-w-3xl mx-auto mb-8"> | |
| Automated chart pattern detection with real-time alerts for MetaTrader 5 | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#download" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition shadow-lg flex items-center"> | |
| <i data-feather="download" class="mr-2"></i> Get Indicator | |
| </a> | |
| <a href="#demo" class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-6 rounded-lg transition shadow-lg flex items-center"> | |
| <i data-feather="play" class="mr-2"></i> See Demo | |
| </a> | |
| </div> | |
| </section> | |
| <section id="features" class="mb-20"> | |
| <h3 class="text-3xl font-bold text-white mb-10 text-center">Why Choose PatternSpotter Pro?</h3> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white bg-opacity-90 rounded-xl p-6 shadow-lg"> | |
| <div class="text-blue-500 mb-4"> | |
| <i data-feather="bell" class="w-10 h-10"></i> | |
| </div> | |
| <h4 class="text-xl font-bold mb-2">Real-time Alerts</h4> | |
| <p class="text-gray-700">Get instant notifications when patterns form on your charts, so you never miss a trading opportunity.</p> | |
| </div> | |
| <div class="bg-white bg-opacity-90 rounded-xl p-6 shadow-lg"> | |
| <div class="text-blue-500 mb-4"> | |
| <i data-feather="eye" class="w-10 h-10"></i> | |
| </div> | |
| <h4 class="text-xl font-bold mb-2">12+ Patterns Detected</h4> | |
| <p class="text-gray-700">Comprehensive detection of all major chart patterns including wedges, pennants, rectangles, and more.</p> | |
| </div> | |
| <div class="bg-white bg-opacity-90 rounded-xl p-6 shadow-lg"> | |
| <div class="text-blue-500 mb-4"> | |
| <i data-feather="sliders" class="w-10 h-10"></i> | |
| </div> | |
| <h4 class="text-xl font-bold mb-2">Customizable Settings</h4> | |
| <p class="text-gray-700">Adjust sensitivity, alert types, and visual appearance to match your trading style.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="patterns" class="mb-20"> | |
| <h3 class="text-3xl font-bold text-white mb-10 text-center">Recognized Chart Patterns</h3> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Pattern Cards --> | |
| <div class="pattern-card bg-white bg-opacity-90 rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="arrow-up" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-lg font-bold">Falling Wedge</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Bullish reversal pattern with converging downward-sloping trendlines.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Accuracy: 78%</span> | |
| <span>Timeframe: All</span> | |
| </div> | |
| </div> | |
| <div class="pattern-card bg-white bg-opacity-90 rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="arrow-down" class="text-red-600 w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-lg font-bold">Rising Wedge</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Bearish reversal pattern with converging upward-sloping trendlines.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Accuracy: 72%</span> | |
| <span>Timeframe: All</span> | |
| </div> | |
| </div> | |
| <div class="pattern-card bg-white bg-opacity-90 rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="arrow-up" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-lg font-bold">Bullish Pennant</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Continuation pattern with small symmetrical triangle after sharp move.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Accuracy: 81%</span> | |
| <span>Timeframe: H1+</span> | |
| </div> | |
| </div> | |
| <div class="pattern-card bg-white bg-opacity-90 rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="arrow-down" class="text-red-600 w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-lg font-bold">Bearish Pennant</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Continuation pattern with small symmetrical triangle after sharp decline.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Accuracy: 79%</span> | |
| <span>Timeframe: H1+</span> | |
| </div> | |
| </div> | |
| <div class="pattern-card bg-white bg-opacity-90 rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="arrow-up" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-lg font-bold">Bullish Rectangle</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Continuation pattern with parallel support/resistance levels.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Accuracy: 75%</span> | |
| <span>Timeframe: All</span> | |
| </div> | |
| </div> | |
| <div class="pattern-card bg-white bg-opacity-90 rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="arrow-down" class="text-red-600 w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-lg font-bold">Bearish Rectangle</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Continuation pattern with parallel support/resistance levels.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Accuracy: 74%</span> | |
| <span>Timeframe: All</span> | |
| </div> | |
| </div> | |
| <div class="pattern-card bg-white bg-opacity-90 rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="alert-circle" class="text-red-600 w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-lg font-bold">Double Top</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Bearish reversal pattern with two distinct peaks at similar price levels.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Accuracy: 68%</span> | |
| <span>Timeframe: H4+</span> | |
| </div> | |
| </div> | |
| <div class="pattern-card bg-white bg-opacity-90 rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="alert-circle" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| <h4 class="text-lg font-bold">Double Bottom</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Bullish reversal pattern with two distinct troughs at similar price levels.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Accuracy: 70%</span> | |
| <span>Timeframe: H4+</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="demo" class="mb-20 bg-white bg-opacity-90 rounded-xl p-8 shadow-lg"> | |
| <h3 class="text-3xl font-bold text-gray-800 mb-6 text-center">See It In Action</h3> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/finance/1024x576/42" alt="PatternSpotter Pro Demo" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <p class="text-gray-600 mb-4">Watch how PatternSpotter Pro identifies a falling wedge pattern in real-time</p> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition flex items-center mx-auto"> | |
| <i data-feather="play" class="mr-2"></i> Play Video Demo | |
| </button> | |
| </div> | |
| </section> | |
| <section id="download" class="bg-white bg-opacity-90 rounded-xl p-8 shadow-lg max-w-4xl mx-auto"> | |
| <h3 class="text-3xl font-bold text-gray-800 mb-6 text-center">Get PatternSpotter Pro Now</h3> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4 text-gray-700">MT5 Installation Guide</h4> | |
| <ol class="list-decimal pl-5 space-y-3 text-gray-600"> | |
| <li>Download the .ex5 file below</li> | |
| <li>Open MetaTrader 5 platform</li> | |
| <li>Click "File" → "Open Data Folder"</li> | |
| <li>Navigate to MQL5/Indicators</li> | |
| <li>Copy the .ex5 file to this folder</li> | |
| <li>Restart MT5 or refresh indicators</li> | |
| </ol> | |
| <div class="mt-6"> | |
| <h5 class="font-bold mb-2 text-gray-700">System Requirements</h5> | |
| <ul class="space-y-1 text-gray-600"> | |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> MetaTrader 5 Build 2000+</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Windows 8+ / macOS</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> 2GB RAM minimum</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="border-2 border-dashed border-blue-300 rounded-xl p-6 text-center"> | |
| <i data-feather="download" class="w-12 h-12 text-blue-500 mx-auto mb-4"></i> | |
| <h5 class="font-bold text-lg mb-2 text-gray-700">PatternSpotterPro_v1.0.exe5</h5> | |
| <p class="text-gray-500 mb-4">File size: 1.2 MB | Version: 1.0</p> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition w-full"> | |
| Download Now | |
| </button> | |
| <p class="text-xs text-gray-400 mt-2">By downloading, you agree to our Terms of Service</p> | |
| </div> | |
| <div class="mt-4 flex items-center justify-center"> | |
| <i data-feather="shield" class="w-5 h-5 text-green-500 mr-2"></i> | |
| <span class="text-sm text-gray-500">Virus checked. 100% safe download</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-gray-900 bg-opacity-80 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">PatternSpotter Pro</h4> | |
| <p class="text-gray-400">Advanced chart pattern recognition for MetaTrader 5 with real-time alerts.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Video Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community Forum</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Refund Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="discord"></i> | |
| </a> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-400">Subscribe to our newsletter</p> | |
| <div class="flex mt-2"> | |
| <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-3 py-2 rounded-l focus:outline-none w-full"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-r"> | |
| <i data-feather="send"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 PatternSpotter Pro. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x1e3c72, | |
| shininess: 50.00, | |
| waveHeight: 15.00, | |
| waveSpeed: 0.50, | |
| zoom: 0.75 | |
| }); | |
| </script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |