MonteWalk / ui /components.py
Obotu's picture
final touches
dc45523
"""
Shared UI Components
"""
def render_header() -> str:
return """
<div style="padding: 1rem 0; border-bottom: 1px solid var(--fill-primary); margin-bottom: 2rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
<div style="display: flex; align-items: center; gap: 1rem;">
<div style="width: 32px; height: 32px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div>
<h1 style="margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--text-primary);">
MonteWalk
</h1>
</div>
</div>
<div style="display: flex; gap: 0.75rem; align-items: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--success);">
<span style="height: 8px; width: 8px; background-color: var(--success); border-radius: 50%; box-shadow: 0 0 8px var(--success);"></span>
SYSTEM ONLINE
</div>
</div>
<!-- Tagline -->
<div style="font-size: 1rem; color: #60a5fa; font-weight: 500; margin-bottom: 1rem; letter-spacing: -0.01em;">
Transform your AI into an institutional trading agent
</div>
<!-- MCP Server Stats -->
<div style="display: inline-flex; gap: 1rem; align-items: center; background: rgba(15, 23, 42, 0.4); padding: 0.75rem 1.5rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 1rem;">
<span style="color: #94a3b8; font-size: 0.85rem; font-weight: 500;">MCP Server:</span>
<span style="color: #f1f5f9; font-weight: 600; font-size: 0.85rem;">🛠️ 25+ Tools</span>
<span style="color: #475569;">|</span>
<span style="color: #f1f5f9; font-weight: 600; font-size: 0.85rem;">📡 4 Resources</span>
<span style="color: #475569;">|</span>
<span style="color: #f1f5f9; font-weight: 600; font-size: 0.85rem;">🎯 6 Prompts</span>
</div>
<!-- Technology Badges -->
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<span style="background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); color: #000; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px;">Gradio 6</span>
<span style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px;">Modal GPU</span>
<span style="background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px;">FinBERT</span>
<span style="background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px;">Alpaca</span>
</div>
</div>
"""
def render_footer() -> str:
return ""