33e670aa4c
UI: - Embed the real APEX logo PNG (transparent mark) in dashboard sidebar, cmd-header, landing nav, and landing hero (replaces SVG approximations). - Add favicon.png across all six templates. - Nudge color palette to brand cyan→blue→purple gradient and silver-white wordmark; word-by-word coloring on the cmd-header tagline. - Drop-shadow glow on logo marks tuned to the brand-blue. Demo: - python -m demo.run_demo now defaults to an auto-running showcase: opens the dashboard, kicks off a ~3-4 min optimization that exercises every phase, and lands on a verdict modal — no manual setup needed. - Tight per-iteration targets so Phase 2 actually iterates (visible AI loop). - Skip per-run AI analysis during Phase 1 exploration via APEX_DEMO_SKIP_PHASE1_AI=1 to keep total runtime down without losing the headline AI loop in Phase 2. - --quick flag opts back to the original fast/manual flow. - --loop auto-restarts for unattended screen recording. Docs: - README + SUBMISSION updated to describe the new auto-running default. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
443 lines
13 KiB
HTML
443 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>APEX — AI-Powered EA Optimizer</title>
|
|
<link rel="icon" type="image/png" href="/static/img/favicon.png">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #080d1a;
|
|
--brand-cyan: #00d4ff;
|
|
--brand-blue: #4f6cff;
|
|
--brand-purple: #9333ea;
|
|
--accent: #4f6cff;
|
|
--accent2: #8b5cf6;
|
|
--teal: #00d4aa;
|
|
--text: #e2e8f0;
|
|
--muted: #64748b;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Grid overlay */
|
|
body::before {
|
|
content: '';
|
|
position: fixed; inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(0,212,170,0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0,212,170,0.03) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Glow orb */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
top: 20%;
|
|
left: 10%;
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, rgba(79,70,229,0.08) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.page {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
/* Navbar */
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1.5rem 0;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.nav-mark,
|
|
.hero-mark {
|
|
display: block;
|
|
flex-shrink: 0;
|
|
filter: drop-shadow(0 0 14px rgba(79,108,255,0.35));
|
|
}
|
|
.hero-mark {
|
|
filter: drop-shadow(0 0 28px rgba(79,108,255,0.45));
|
|
}
|
|
|
|
.nav-logo-text {
|
|
font-size: 1.25rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.05em;
|
|
background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.status-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 1rem;
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 999px;
|
|
font-size: 0.8rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px; height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--muted);
|
|
flex-shrink: 0;
|
|
}
|
|
.status-dot.running {
|
|
background: var(--teal);
|
|
box-shadow: 0 0 8px var(--teal);
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
.status-dot.idle { background: #475569; }
|
|
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
|
|
|
|
/* Hero */
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
min-height: 70vh;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.35rem 0.9rem;
|
|
background: rgba(79,70,229,0.15);
|
|
border: 1px solid rgba(79,70,229,0.3);
|
|
border-radius: 999px;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
color: var(--accent2);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.hero-logo-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 5rem;
|
|
font-weight: 900;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1;
|
|
background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #b06bff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.hero-subtitle-row {
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: 1.5rem;
|
|
font-weight: 300;
|
|
color: #94a3b8;
|
|
margin-bottom: 2.5rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.hero-tagline strong {
|
|
color: var(--teal);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hero-ctas {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 3rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex; align-items: center; gap: 0.5rem;
|
|
padding: 0.9rem 2rem;
|
|
background: linear-gradient(135deg, var(--accent), var(--accent2));
|
|
color: white; border: none; border-radius: 10px;
|
|
font-size: 0.95rem; font-weight: 700; cursor: pointer;
|
|
text-decoration: none; font-family: inherit;
|
|
box-shadow: 0 4px 24px rgba(79,70,229,0.4);
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(79,70,229,0.5); }
|
|
|
|
.btn-secondary {
|
|
display: inline-flex; align-items: center; gap: 0.5rem;
|
|
padding: 0.9rem 1.75rem;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
color: var(--text); border-radius: 10px;
|
|
font-size: 0.95rem; font-weight: 600;
|
|
text-decoration: none; font-family: inherit;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-secondary:hover { background: rgba(255,255,255,0.1); }
|
|
|
|
.hero-stats {
|
|
display: flex;
|
|
gap: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-stat { display: flex; flex-direction: column; }
|
|
.hero-stat-val {
|
|
font-size: 1.5rem; font-weight: 800;
|
|
background: linear-gradient(135deg, var(--teal), var(--accent2));
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
}
|
|
.hero-stat-lbl {
|
|
font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem;
|
|
}
|
|
|
|
/* Features panel */
|
|
.features-panel {
|
|
background: rgba(15,22,41,0.8);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
backdrop-filter: blur(10px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.features-panel::before {
|
|
content: 'APEX';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 4rem;
|
|
font-weight: 900;
|
|
letter-spacing: 0.1em;
|
|
background: linear-gradient(135deg, #00d4ff, #4f6cff, #9333ea);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
opacity: 0.15;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.features-panel-title {
|
|
font-size: 0.75rem; font-weight: 700;
|
|
text-transform: uppercase; letter-spacing: 0.15em;
|
|
color: var(--muted); margin-bottom: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.features-list { display: flex; flex-direction: column; gap: 1.25rem; }
|
|
|
|
.feature-item { display: flex; align-items: flex-start; gap: 1rem; }
|
|
|
|
.feature-icon-wrap {
|
|
width: 40px; height: 40px;
|
|
border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
flex-shrink: 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
.feature-icon-wrap.purple { background: rgba(79,70,229,0.2); border: 1px solid rgba(79,70,229,0.3); }
|
|
.feature-icon-wrap.teal { background: rgba(0,212,170,0.15); border: 1px solid rgba(0,212,170,0.3); }
|
|
.feature-icon-wrap.blue { background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); }
|
|
.feature-icon-wrap.green { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); }
|
|
|
|
.feature-name {
|
|
font-size: 0.72rem; font-weight: 700;
|
|
letter-spacing: 0.1em; text-transform: uppercase;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
.feature-name.purple { color: var(--accent2); }
|
|
.feature-name.teal { color: var(--teal); }
|
|
.feature-name.blue { color: #60a5fa; }
|
|
.feature-name.green { color: #34d399; }
|
|
|
|
.feature-desc { font-size: 0.8rem; color: #94a3b8; line-height: 1.5; }
|
|
|
|
/* Footer */
|
|
.footer {
|
|
margin-top: 4rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid rgba(255,255,255,0.06);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero { grid-template-columns: 1fr; min-height: auto; }
|
|
.hero-title { font-size: 3rem; }
|
|
.features-panel { display: none; }
|
|
.hero-stats { gap: 1.25rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar">
|
|
<div class="nav-logo">
|
|
<img src="/static/img/apex-mark.png" alt="APEX" class="nav-mark" width="34" height="38">
|
|
<span class="nav-logo-text">APEX</span>
|
|
</div>
|
|
<div class="status-pill" id="status-pill">
|
|
<div class="status-dot idle" id="status-dot"></div>
|
|
<span id="status-text">Ready</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<div class="hero">
|
|
<div class="hero-left">
|
|
<div class="hero-badge">✦ Hackathon Edition 2026</div>
|
|
|
|
<div class="hero-logo-row">
|
|
<img src="/static/img/apex-mark.png" alt="APEX" class="hero-mark" width="120" height="132">
|
|
</div>
|
|
|
|
<div class="hero-title">APEX</div>
|
|
<div class="hero-subtitle-row">AI Powered EA Optimizer</div>
|
|
|
|
<div class="hero-tagline">
|
|
Optimize. <strong>Understand.</strong> Evolve.<br>
|
|
<span style="font-size:1rem">The first optimizer that tells you <em>why</em> — not just what.</span>
|
|
</div>
|
|
|
|
<div class="hero-ctas">
|
|
<a href="/setup" class="btn-primary">⚡ Start Optimizing →</a>
|
|
<a href="/dashboard" class="btn-secondary">📊 Live Dashboard</a>
|
|
<a href="/reports" class="btn-secondary">📋 Reports</a>
|
|
</div>
|
|
|
|
<div class="hero-stats">
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-val">3</div>
|
|
<div class="hero-stat-lbl">Phase Pipeline</div>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-val">AI</div>
|
|
<div class="hero-stat-lbl">Claude-Powered</div>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-val">IS/OOS</div>
|
|
<div class="hero-stat-lbl">Walk-Forward Validated</div>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-val">Any EA</div>
|
|
<div class="hero-stat-lbl">Works with any .set file</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-right">
|
|
<div class="features-panel">
|
|
<div class="features-panel-title">What makes APEX different</div>
|
|
<div class="features-list">
|
|
|
|
<div class="feature-item">
|
|
<div class="feature-icon-wrap purple">🧠</div>
|
|
<div>
|
|
<div class="feature-name purple">AI Reasoning</div>
|
|
<div class="feature-desc">Analyzes results, detects patterns and explains performance in plain language using Claude AI.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<div class="feature-icon-wrap teal">🎯</div>
|
|
<div>
|
|
<div class="feature-name teal">Smart Optimization</div>
|
|
<div class="feature-desc">Finds the best parameters using 3-phase search: broad discovery → refinement → out-of-sample validation.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<div class="feature-icon-wrap blue" style="font-size:0.85rem;font-weight:700;font-family:monospace;color:#60a5fa"></></div>
|
|
<div>
|
|
<div class="feature-name blue">Strategy Evolution</div>
|
|
<div class="feature-desc">Suggests improvements and helps evolve your trading systems based on behavioral pattern analysis.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<div class="feature-icon-wrap green">🛡</div>
|
|
<div>
|
|
<div class="feature-name green">Robust & Reliable</div>
|
|
<div class="feature-desc">Built-in validation (IS/OOS/WFV) and sensitivity testing to ensure real market reliability.</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<span>APEX — AI-Powered EA Optimizer</span>
|
|
<span>Powered by Claude AI + MetaTrader 5</span>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// Fetch optimizer status and update the live pill
|
|
fetch('/api/status')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(s) {
|
|
var dot = document.getElementById('status-dot');
|
|
var txt = document.getElementById('status-text');
|
|
if (s.state === 'running') {
|
|
dot.className = 'status-dot running';
|
|
txt.textContent = 'Running: ' + (s.phase || '') + ' (' + (s.run_count || 0) + ' runs)';
|
|
} else if (s.verdict) {
|
|
dot.className = 'status-dot';
|
|
dot.style.background = '#10b981';
|
|
txt.textContent = 'Last: ' + s.verdict;
|
|
}
|
|
})
|
|
.catch(function() {});
|
|
</script>
|
|
</body>
|
|
</html>
|