gavindiaz/Apex_AI_MT5_EA_Optimizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: brand UI with real APEX logo + auto-running showcase demo

Browse Source 
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>
This commit is contained in:
LEGSTECH Optimizer
2026-04-25 23:34:25 +00:00
committed by LEGTECH
co-authored by Claude Opus 4.7
parent 96680cde63
commit 33e670aa4c
14 changed files with 295 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/static/img/apex-logo-wide.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1008 KiB

ui/static/img/apex-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

ui/static/img/apex-mark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 397 KiB

ui/static/img/favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 858 KiB

ui/templates/dashboard.html
+42 -56
View File
@@ -4,6 +4,7 @@
<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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@@ -16,16 +17,19 @@
--card-hover: #131d35;
--border: rgba(255,255,255,0.07);
--border-hover: rgba(255,255,255,0.14);
--accent: #4f46e5;
--accent2: #7c6dfa;
--brand-cyan: #00d4ff;
--brand-blue: #4f6cff;
--brand-purple: #9333ea;
--accent: #4f6cff;
--accent2: #8b5cf6;
--teal: #00d4aa;
--text: #e2e8f0;
--muted: #64748b;
--green: #10b981;
--red: #ef4444;
--yellow: #f59e0b;
--nav-active-bg: rgba(79,70,229,0.18);
--nav-active-border: #4f46e5;
--nav-active-bg: rgba(79,108,255,0.18);
--nav-active-border: #4f6cff;
}
/* ── Reset ──────────────────────────────────────────────────── */
@@ -70,11 +74,17 @@
border-bottom: 1px solid var(--border);
margin-bottom: 0.75rem;
}
.logo-mark,
.cmd-mark {
display: block;
flex-shrink: 0;
filter: drop-shadow(0 0 10px rgba(79,108,255,0.3));
}
.logo-text {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 0.12em;
background: linear-gradient(135deg, #7c6dfa, #00d4aa);
background: linear-gradient(180deg, #ffffff 0%, #d4dae6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -82,11 +92,12 @@
.logo-tagline {
font-size: 0.58rem;
color: var(--muted);
font-weight: 400;
letter-spacing: 0.06em;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
display: block;
line-height: 1;
margin-top: -2px;
margin-top: 2px;
-webkit-text-fill-color: var(--muted);
}
@@ -217,7 +228,7 @@
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, rgba(0,229,255,0.45), rgba(79,70,229,0.55), rgba(124,58,237,0.45));
background: linear-gradient(90deg, rgba(0,212,255,0.55), rgba(79,108,255,0.65), rgba(147,51,234,0.55));
}
.cmd-logo {
display: flex;
@@ -234,19 +245,22 @@
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.14em;
background: linear-gradient(135deg, #00e5ff 0%, #4f46e5 50%, #7c3aed 100%);
background: linear-gradient(180deg, #ffffff 0%, #d4dae6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cmd-tagline {
font-size: 0.46rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--muted);
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
-webkit-text-fill-color: var(--muted);
display: inline-flex;
gap: 0.35em;
}
.cmd-tagline .tag-cyan { color: #00d4ff; }
.cmd-tagline .tag-purple { color: #b06bff; }
.cmd-tagline .tag-white { color: #cfd5e0; }
.cmd-sep {
width: 1px;
height: 30px;
@@ -310,7 +324,7 @@
}
.cmd-prog-fill {
height: 100%;
background: linear-gradient(90deg, #00e5ff, #4f46e5);
background: linear-gradient(90deg, #00d4ff, #4f6cff, #9333ea);
border-radius: 999px;
transition: width 0.5s ease;
}
@@ -347,8 +361,9 @@
white-space: nowrap;
}
.cmd-btn-start {
background: linear-gradient(135deg, #4f46e5, #7c6dfa);
background: linear-gradient(135deg, #4f6cff 0%, #9333ea 100%);
color: white;
box-shadow: 0 0 0 1px rgba(147,51,234,0.4), 0 4px 14px rgba(79,108,255,0.25);
}
.cmd-btn-start:hover { opacity: 0.88; }
.cmd-btn-pause {
@@ -399,7 +414,7 @@
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent2));
background: linear-gradient(90deg, #00d4ff, #4f6cff, #9333ea);
opacity: 0;
transition: opacity 0.2s;
}
@@ -1629,27 +1644,10 @@
<!-- Logo -->
<div class="logo-wrap">
<svg width="36" height="40" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00e5ff"/>
<stop offset="45%" stop-color="#4f46e5"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
<clipPath id="sbTriClip">
<polygon points="20,2 39,40 1,40"/>
</clipPath>
</defs>
<polygon points="20,2 39,40 1,40" fill="rgba(79,70,229,0.08)" stroke="url(#logoGrad)" stroke-width="2" stroke-linejoin="round"/>
<line x1="10" y1="30" x2="30" y2="30" stroke="url(#logoGrad)" stroke-width="1.5"/>
<rect x="11" y="31" width="4" height="8" rx="0.8" fill="url(#logoGrad)" opacity="0.5" clip-path="url(#sbTriClip)"/>
<rect x="17" y="24" width="4" height="15" rx="0.8" fill="url(#logoGrad)" opacity="0.75" clip-path="url(#sbTriClip)"/>
<rect x="23" y="18" width="4" height="21" rx="0.8" fill="url(#logoGrad)" clip-path="url(#sbTriClip)"/>
<polyline points="8,38 17,27 22,30 33,16" stroke="#00e5ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" clip-path="url(#sbTriClip)" opacity="0.9"/>
</svg>
<img src="/static/img/apex-mark.png" alt="APEX" class="logo-mark" width="38" height="42">
<div>
<span class="logo-text">APEX</span>
<span class="logo-tagline">AI Optimizer</span>
<span class="logo-tagline">AI Powered Optimizer</span>
</div>
</div>
@@ -1728,27 +1726,15 @@
<!-- Logo -->
<div class="cmd-logo">
<svg width="32" height="36" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="hdrLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00e5ff"/>
<stop offset="45%" stop-color="#4f46e5"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
<clipPath id="hdrTriClip">
<polygon points="20,2 39,40 1,40"/>
</clipPath>
</defs>
<polygon points="20,2 39,40 1,40" fill="rgba(79,70,229,0.09)" stroke="url(#hdrLogoGrad)" stroke-width="1.8" stroke-linejoin="round"/>
<line x1="10" y1="30" x2="30" y2="30" stroke="url(#hdrLogoGrad)" stroke-width="1.4"/>
<rect x="11" y="31" width="4" height="8" rx="0.8" fill="url(#hdrLogoGrad)" opacity="0.5" clip-path="url(#hdrTriClip)"/>
<rect x="17" y="24" width="4" height="15" rx="0.8" fill="url(#hdrLogoGrad)" opacity="0.75" clip-path="url(#hdrTriClip)"/>
<rect x="23" y="18" width="4" height="21" rx="0.8" fill="url(#hdrLogoGrad)" clip-path="url(#hdrTriClip)"/>
<polyline points="8,38 17,27 22,30 33,16" stroke="#00e5ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" clip-path="url(#hdrTriClip)" opacity="0.9"/>
</svg>
<img src="/static/img/apex-mark.png" alt="APEX" class="cmd-mark" width="34" height="38">
<div class="cmd-logo-text">
<span class="cmd-apex">APEX</span>
<span class="cmd-tagline">AI Powered EA Optimizer</span>
<span class="cmd-tagline">
<span class="tag-cyan">AI</span>
<span class="tag-white">POWERED</span>
<span class="tag-purple">EA</span>
<span class="tag-white">OPTIMIZER</span>
</span>
</div>
</div>
ui/templates/index.html
+2 -1
View File
@@ -3,7 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MT5 EA Optimizer — Live Dashboard</title>
<title>APEX — Live Dashboard</title>
<link rel="icon" type="image/png" href="/static/img/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/style.css">
ui/templates/landing.html
+19 -33
View File
@@ -4,12 +4,16 @@
<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;
--accent: #4f46e5;
--accent2: #7c6dfa;
--brand-cyan: #00d4ff;
--brand-blue: #4f6cff;
--brand-purple: #9333ea;
--accent: #4f6cff;
--accent2: #8b5cf6;
--teal: #00d4aa;
--text: #e2e8f0;
--muted: #64748b;
@@ -72,6 +76,15 @@
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;
@@ -145,7 +158,7 @@
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1;
background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #00d4aa 100%);
background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #b06bff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@@ -239,7 +252,7 @@
font-size: 4rem;
font-weight: 900;
letter-spacing: 0.1em;
background: linear-gradient(135deg, #4f46e5, #00d4aa);
background: linear-gradient(135deg, #00d4ff, #4f6cff, #9333ea);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
opacity: 0.15;
pointer-events: none;
@@ -307,20 +320,7 @@
<!-- Navbar -->
<nav class="navbar">
<div class="nav-logo">
<svg width="32" height="32" viewBox="0 0 36 36" fill="none">
<polygon points="18,2 34,32 2,32" fill="url(#logoGradL)" opacity="0.15"/>
<polygon points="18,8 30,30 6,30" fill="url(#logoGradL)" opacity="0.3"/>
<path d="M18 6L22 14H14L18 6Z" fill="url(#logoGradL)"/>
<rect x="11" y="22" width="3" height="8" rx="1" fill="#00d4aa"/>
<rect x="16" y="18" width="3" height="12" rx="1" fill="#00d4aa" opacity="0.8"/>
<rect x="21" y="14" width="3" height="16" rx="1" fill="#00d4aa" opacity="0.6"/>
<defs>
<linearGradient id="logoGradL" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#4f46e5"/>
<stop offset="100%" stop-color="#00d4aa"/>
</linearGradient>
</defs>
</svg>
<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">
@@ -335,21 +335,7 @@
<div class="hero-badge">&#10022; Hackathon Edition 2026</div>
<div class="hero-logo-row">
<svg width="72" height="72" viewBox="0 0 72 72" fill="none">
<polygon points="36,4 68,64 4,64" fill="url(#heroGrad)" opacity="0.12"/>
<polygon points="36,16 60,60 12,60" fill="url(#heroGrad)" opacity="0.25"/>
<path d="M36 12L44 28H28L36 12Z" fill="url(#heroGrad)"/>
<path d="M33 20L36 13L39 20" stroke="#00d4aa" stroke-width="1.5" fill="none" stroke-linecap="round"/>
<rect x="22" y="44" width="6" height="16" rx="2" fill="#00d4aa" opacity="0.9"/>
<rect x="33" y="36" width="6" height="24" rx="2" fill="#00d4aa" opacity="0.7"/>
<rect x="44" y="28" width="6" height="32" rx="2" fill="#00d4aa" opacity="0.5"/>
<defs>
<linearGradient id="heroGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#4f46e5"/>
<stop offset="100%" stop-color="#7c6dfa"/>
</linearGradient>
</defs>
</svg>
<img src="/static/img/apex-mark.png" alt="APEX" class="hero-mark" width="120" height="132">
</div>
<div class="hero-title">APEX</div>
ui/templates/report.html
+2 -1
View File
@@ -2,7 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Run {{ run_id }} — MT5 Optimizer Report</title>
<title>Run {{ run_id }} — APEX Report</title>
<link rel="icon" type="image/png" href="/static/img/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ui/templates/reports_index.html
+1
View File
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Reports — APEX MT5 Optimizer</title>
<link rel="icon" type="image/png" href="/static/img/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ui/templates/setup.html
+2 -1
View File
@@ -3,7 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Optimization — MT5 Smart Optimizer</title>
<title>New Optimization — APEX</title>
<link rel="icon" type="image/png" href="/static/img/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>