From c6f078b5cb5646afde0b93c9e6eb0a32abeeecde Mon Sep 17 00:00:00 2001 From: shinchan-zhai Date: Sun, 22 Mar 2026 22:12:43 +0800 Subject: [PATCH] feat(nofxi): redesign Web UI - professional trading platform style - Dark trading terminal aesthetic (deep black + green/purple accents) - Gradient logo, nav pills, status badge - Sidebar: Quick Trade grid, Portfolio list, Monitor, Strategy - Chat: card bubbles with avatars, timestamps, fade-in animation - Typing indicator with bouncing dots - Glowing input focus, keyboard hints - Inter + JetBrains Mono fonts - Mobile responsive --- nofxi/web/index.html | 704 ++++++++++++++++++++++++++++++------------- 1 file changed, 494 insertions(+), 210 deletions(-) diff --git a/nofxi/web/index.html b/nofxi/web/index.html index 8e8569a6..5f82aa0f 100644 --- a/nofxi/web/index.html +++ b/nofxi/web/index.html @@ -4,332 +4,616 @@ NOFXi β€” AI Trading Agent + + -
-

πŸ€– NOFXi

-
-
+ +
+
+ +
+ + + +
+
+
+
+
Connecting...
+
-
-
-

Quick Actions

- - - - - -

Analysis

- - - - -

Monitor

- - - +
+
+
+
Quick Trade
+
+ + + + +
-
-
-
-
πŸ€–
-
Hey! I'm NOFXi, your AI trading agent. πŸš€ - -Ask me anything about markets, or use quick actions on the left. - -Type /help to see all commands.
-
+
+
Portfolio
+
+ + +
- -
-
- - -
+
+ +
+
Monitor
+
+ + + +
+
+ +
+
Strategy
+
+ +
- +function timeNow() { + return new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }); +} + +function addMsg(role, text) { + const div = document.createElement('div'); + const isUser = role === 'user'; + div.className = 'msg ' + (isUser ? 'user' : 'bot'); + + const avatar = isUser ? 'πŸ‘€' : '⚑'; + const name = isUser ? 'You' : 'NOFXi'; + + div.innerHTML = ` +
${avatar}
+
+
${name}
+
${escHtml(text)}
+
${timeNow()}
+
`; + + messagesEl.appendChild(div); + messagesEl.scrollTop = messagesEl.scrollHeight; +} + +function escHtml(t) { + const d = document.createElement('div'); + d.textContent = t; + return d.innerHTML; +} + +async function send(text) { + if (!text) { + text = inputEl.value.trim(); + if (!text) return; + inputEl.value = ''; + } + + addMsg('user', text); + typingEl.classList.add('active'); + sendBtn.disabled = true; + inputEl.focus(); + + try { + const r = await fetch(API + '/api/chat', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ message: text, user_id: 1 }) + }); + const d = await r.json(); + addMsg('bot', d.response || d.error || 'No response'); + } catch (e) { + addMsg('bot', '⚠️ Connection error: ' + e.message); + } + + typingEl.classList.remove('active'); + sendBtn.disabled = false; + inputEl.focus(); +} + +inputEl.focus(); +