forked from LengKundee/MQL5-Google-Onedrive
12d17ab97e
- Adds a "Copy" button to "Fly.io App" and "Telegram Bot" status items in `index.html` and `dashboard/index.html`. - Updates `scripts/web_dashboard.py` to include these status rows with the same copy functionality, ensuring consistency across all dashboard views. - Implements visual feedback (icon changes to checkmark) and accessibility support (aria-labels) for the copy action. - Uses inline SVG icons to avoid external dependencies. - Verified with Playwright and existing tests.
402 lines
15 KiB
HTML
402 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MQL5 Trading Automation Dashboard</title>
|
|
<link rel="manifest" href="/manifest.json">
|
|
<meta name="theme-color" content="#4f46e5">
|
|
<meta name="description" content="GenX FX Trading System - SMC + Trend Breakout (MTF) for Exness MT5">
|
|
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: linear-gradient(135deg, #4f46e5 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
color: #333;
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header p {
|
|
color: #666;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.card h2 {
|
|
color: #4f46e5;
|
|
margin-bottom: 15px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.card p {
|
|
color: #666;
|
|
line-height: 1.6;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
background: #4f46e5;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #4338ca;
|
|
}
|
|
|
|
.btn:focus-visible {
|
|
outline: 2px solid #4f46e5;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.status {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.status-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.status-label {
|
|
color: #666;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-value {
|
|
color: #4f46e5;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.copy-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
color: #6b7280;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background-color: #f3f4f6;
|
|
color: #4f46e5;
|
|
}
|
|
|
|
.copy-btn:focus-visible {
|
|
outline: 2px solid #4f46e5;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.badge-success {
|
|
background: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.badge-warning {
|
|
background: #f59e0b;
|
|
color: white;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
color: white;
|
|
margin-top: 40px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
background: #4f46e5;
|
|
color: white;
|
|
padding: 8px;
|
|
z-index: 100;
|
|
transition: top 0.3s;
|
|
text-decoration: none;
|
|
border-radius: 0 0 8px 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
outline: 2px solid white;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Service Worker Toast */
|
|
.toast { position: fixed; bottom: 20px; right: 20px; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(100px); transition: transform 0.3s; z-index: 1000; border-left: 4px solid #4f46e5; display: flex; align-items: center; gap: 10px; }
|
|
.toast.show { transform: translateY(0); }
|
|
.toast-btn { border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: 600; }
|
|
.toast-btn-primary { background: #4f46e5; color: white; }
|
|
.toast-btn-primary:hover { background: #4338ca; }
|
|
.toast-btn-secondary { background: #f3f4f6; color: #333; }
|
|
.toast-btn-secondary:hover { background: #e5e7eb; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="#main-content" class="skip-link">Skip to content</a>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1><span role="img" aria-label="Rocket">🚀</span> MQL5 Trading Automation</h1>
|
|
<p>GenX FX Trading System Dashboard</p>
|
|
</div>
|
|
|
|
<div class="grid" id="main-content">
|
|
<div class="card">
|
|
<h2><span role="img" aria-label="Chart">📊</span> Trading Indicators</h2>
|
|
<p>SMC + Trend Breakout (MTF) indicator with BOS/CHoCH and Donchian breakout signals.</p>
|
|
<a href="#" class="btn" role="button">View Indicators</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2><span role="img" aria-label="Robot">🤖</span> Expert Advisors</h2>
|
|
<p>Automated trading EAs with smart risk management and multi-timeframe confirmation.</p>
|
|
<a href="#" class="btn" role="button">Manage EAs</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2><span role="img" aria-label="Cloud">☁️</span> Cloud Deployment</h2>
|
|
<p>Deploy your trading automation to Fly.io, Render, Railway, or GitHub Pages.</p>
|
|
<a href="#" class="btn" role="button">Deploy Now</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2><span role="img" aria-label="Mobile Phone">📱</span> Telegram Bot</h2>
|
|
<p>Control deployments and monitor trading via @GenX_FX_bot on Telegram.</p>
|
|
<a href="https://t.me/GenX_FX_bot" class="btn" target="_blank" rel="noopener noreferrer" aria-label="Open Bot (opens in new tab)">Open Bot</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2><span role="img" aria-label="Chart Increasing">📈</span> Exness Terminal</h2>
|
|
<p>Connect to Exness MT5 terminal for live trading execution.</p>
|
|
<a href="https://my.exness.global/webtrading/" class="btn" target="_blank" rel="noopener noreferrer" aria-label="Open Terminal (opens in new tab)">Open Terminal</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2><span role="img" aria-label="Wrench">🔧</span> Settings</h2>
|
|
<p>Configure risk parameters, notifications, and automation preferences.</p>
|
|
<a href="#" class="btn" role="button">Configure</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2><span role="img" aria-label="Magnifying Glass">🔍</span> Service Worker</h2>
|
|
<p>Inspect and manage PWA service worker, cache storage, and offline functionality.</p>
|
|
<a href="/sw-inspector.html" class="btn">Inspect Views</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status">
|
|
<h2 style="color: #4f46e5; margin-bottom: 20px;">System Status</h2>
|
|
<div class="status-item">
|
|
<span class="status-label">Deployment Status</span>
|
|
<span class="badge badge-success">Active</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Fly.io App</span>
|
|
<span class="status-value">
|
|
mql5-automation
|
|
<button class="copy-btn" aria-label="Copy Fly.io App name" data-clipboard-text="mql5-automation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Telegram Bot</span>
|
|
<span class="status-value">
|
|
@GenX_FX_bot
|
|
<button class="copy-btn" aria-label="Copy Telegram Bot handle" data-clipboard-text="@GenX_FX_bot">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Last Updated</span>
|
|
<span class="status-value" id="lastUpdate"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>© 2026 GenX FX Trading System | Built with ❤️ for Trading Automation</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Worker Toast Notification -->
|
|
<div id="update-toast" class="toast" role="alert" aria-live="polite">
|
|
<span>New version available!</span>
|
|
<button id="update-btn" class="toast-btn toast-btn-primary" aria-label="Update application to latest version">Update</button>
|
|
<button id="dismiss-btn" class="toast-btn toast-btn-secondary" aria-label="Dismiss">✕</button>
|
|
</div>
|
|
|
|
<script>
|
|
// Set last update time
|
|
document.getElementById('lastUpdate').textContent = new Date().toLocaleString();
|
|
|
|
// Copy to clipboard functionality
|
|
document.querySelectorAll('.copy-btn').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
const text = btn.getAttribute('data-clipboard-text');
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
|
|
// Visual feedback
|
|
const originalHTML = btn.innerHTML;
|
|
btn.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
`;
|
|
btn.setAttribute('aria-label', 'Copied!');
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = originalHTML;
|
|
btn.setAttribute('aria-label', `Copy ${text}`);
|
|
}, 2000);
|
|
} catch (err) {
|
|
console.error('Failed to copy:', err);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add interactivity
|
|
document.querySelectorAll('.card a.btn').forEach(btn => {
|
|
const href = btn.getAttribute('href');
|
|
if (!href || href === '#') {
|
|
btn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const originalText = btn.textContent;
|
|
btn.textContent = 'Coming Soon! 🚧';
|
|
setTimeout(() => {
|
|
btn.textContent = originalText;
|
|
}, 2000);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Register Service Worker for PWA functionality
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('/service-worker.js')
|
|
.then(registration => {
|
|
console.log('Service Worker registered successfully:', registration.scope);
|
|
|
|
// Check for updates
|
|
registration.addEventListener('updatefound', () => {
|
|
const newWorker = registration.installing;
|
|
console.log('Service Worker update found');
|
|
|
|
newWorker.addEventListener('statechange', () => {
|
|
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
|
|
// New service worker available, show toast
|
|
const toast = document.getElementById('update-toast');
|
|
const updateBtn = document.getElementById('update-btn');
|
|
const dismissBtn = document.getElementById('dismiss-btn');
|
|
|
|
if (toast) {
|
|
toast.classList.add('show');
|
|
|
|
updateBtn.onclick = () => {
|
|
newWorker.postMessage({ type: 'SKIP_WAITING' });
|
|
window.location.reload();
|
|
};
|
|
|
|
dismissBtn.onclick = () => {
|
|
toast.classList.remove('show');
|
|
};
|
|
}
|
|
}
|
|
});
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Service Worker registration failed:', error);
|
|
});
|
|
|
|
// Handle service worker controller change
|
|
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
|
window.location.reload();
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|