Skip to content

Commit 3b033d1

Browse files
refraction-rayrefraction-ray
committed
add agent landing page in doc?
1 parent 4f31d9a commit 3b033d1

6 files changed

Lines changed: 399 additions & 0 deletions

File tree

‎doc/marketing/xalpha_agent/hero.png‎

591 KB
Loading

‎doc/marketing/xalpha_agent/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>xalpha | Agent Native Quant Platform</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Fira+Code&display=swap" rel="stylesheet">
11+
</head>
12+
<body>
13+
<section class="hero">
14+
<div class="hero-bg"></div>
15+
<div class="hero-content">
16+
<h1>xalpha: Agent Native</h1>
17+
<p>自然语言驱动的量化金融智核。从数据获取、智能选股到策略回测，AI Agent 为您全程护航。</p>
18+
<a href="#demo" class="cta-button">立即探索智能指令</a>
19+
</div>
20+
</section>
21+
22+
<section id="demo" class="chat-demo">
23+
<h2 style="text-align: center; font-size: 2.5rem; margin-bottom: 50px;">自然语言，即是量化能力</h2>
24+
<div class="chat-container">
25+
<div class="chat-header">
26+
<div class="status-dot"></div>
27+
<span style="font-weight: 600; letter-spacing: 1px;">XALPHA CO-PILOT</span>
28+
</div>
29+
30+
<div id="chat-flow">
31+
<!-- Messages will be injected by JS -->
32+
</div>
33+
</div>
34+
</section>
35+
36+
<section class="features">
37+
<div class="feature-card">
38+
<span class="feature-icon">🔍</span>
39+
<h3>全自动数据处理</h3>
40+
<p>自动从 Investing, 雪球, 及各大金融 API 抓取数据，智能清洗并对齐。您只需开口，Agent 帮您搞定底层繁杂细节。</p>
41+
</div>
42+
<div class="feature-card">
43+
<span class="feature-icon">🎯</span>
44+
<h3>智能选股选基</h3>
45+
<p>基于 LLM 的逻辑推理与 xalpha 的量化指标。您可以指令：“找出过去三年回撤小于10%且Alpha最高的5只500增强基金”。</p>
46+
</div>
47+
<div class="feature-card">
48+
<span class="feature-icon">📈</span>
49+
<h3>秒级回测分析</h3>
50+
<p>自然语言描述策略，Agent 自动编写回测脚本并生成可视化报告。涵盖 XIRR、胜率、波动率等全方位维度。</p>
51+
</div>
52+
</section>
53+
54+
<footer style="padding: 50px; text-align: center; color: var(--text-dim); border-top: 1px solid rgba(255,255,255,0.05);">
55+
<p>© 2026 xalpha Team. Powering the future of Agentic Quant Finance.</p>
56+
</footer>
57+
58+
<script src="main.js"></script>
59+
</body>
60+
</html>

‎doc/marketing/xalpha_agent/main.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
const chatFlow = document.getElementById('chat-flow');
2+
3+
const messages = [
4+
{
5+
type: 'user',
6+
label: 'Investor',
7+
text: '帮我分析一下 500 增强基金里，哪些在 2023 年这种震荡市表现最好？回撤要控制在 15% 以内。'
8+
},
9+
{
10+
type: 'agent',
11+
label: 'xalpha Agent',
12+
text: '好的，正在扫描全市场中证 500 指数增强型基金... 我将通过 xalpha 获取 2023 年全年的回测数据，并按卡玛比率进行排序。'
13+
},
14+
{
15+
type: 'agent',
16+
label: 'Executing System',
17+
isCode: true,
18+
text: `import xalpha as xa
19+
df = xa.universal.get_enhanced_funds("CSI500")
20+
results = []
21+
for code in df['code']:
22+
bt = xa.trade.backtest(code, start="20230101", end="20231231")
23+
if bt.max_drawdown < 0.15:
24+
results.append(bt.summary())
25+
print(xa.misc.format_report(results))`
26+
},
27+
{
28+
type: 'agent',
29+
label: 'xalpha Agent',
30+
text: '分析完成！表现最优的前三名分别是：景顺长城 500 增强 (000311)、博道 500 增强 (006593) 以及 华夏 500 增强。它们的平均超额收益达到了 8.2%，且回撤均成功控制在 12% 左右。需要我生成完整的 HTML 分析报告吗？'
31+
}
32+
];
33+
34+
function createMessage(msg) {
35+
const div = document.createElement('div');
36+
div.className = `message ${msg.type}`;
37+
38+
let content = `
39+
<span class="label">${msg.label}</span>
40+
<div class="bubble">
41+
${msg.isCode ? `<pre class="code-block">${msg.text}</pre>` : msg.text}
42+
</div>
43+
`;
44+
45+
div.innerHTML = content;
46+
return div;
47+
}
48+
49+
async function startChat() {
50+
for (const msg of messages) {
51+
const msgEl = createMessage(msg);
52+
chatFlow.appendChild(msgEl);
53+
54+
// Small delay for natural feel
55+
await new Promise(resolve => setTimeout(resolve, 500));
56+
msgEl.classList.add('visible');
57+
58+
// Wait longer before next message
59+
await new Promise(resolve => setTimeout(resolve, msg.isCode ? 3000 : 2000));
60+
}
61+
}
62+
63+
// Start animation when scrolled into view
64+
const observer = new IntersectionObserver((entries) => {
65+
if (entries[0].isIntersecting) {
66+
startChat();
67+
observer.disconnect();
68+
}
69+
}, { threshold: 0.5 });
70+
71+
observer.observe(document.getElementById('demo'));

‎doc/marketing/xalpha_agent/style.css‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
:root {
2+
--primary: #00f2ff;
3+
--secondary: #7000ff;
4+
--bg-dark: #0a0b10;
5+
--card-bg: rgba(255, 255, 255, 0.05);
6+
--text-main: #e0e0e0;
7+
--text-dim: #a0a0a0;
8+
--accent-glow: rgba(0, 242, 255, 0.3);
9+
}
10+
11+
* {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
16+
}
17+
18+
body {
19+
background-color: var(--bg-dark);
20+
color: var(--text-main);
21+
overflow-x: hidden;
22+
line-height: 1.6;
23+
}
24+
25+
/* Scrollbar */
26+
::-webkit-scrollbar {
27+
width: 10px;
28+
}
29+
::-webkit-scrollbar-track {
30+
background: var(--bg-dark);
31+
}
32+
::-webkit-scrollbar-thumb {
33+
background: #333;
34+
border-radius: 5px;
35+
}
36+
::-webkit-scrollbar-thumb:hover {
37+
background: #444;
38+
}
39+
40+
/* Hero Section */
41+
.hero {
42+
position: relative;
43+
height: 100vh;
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
text-align: center;
48+
padding: 0 20px;
49+
background: radial-gradient(circle at 50% 50%, rgba(112, 0, 255, 0.1) 0%, transparent 70%);
50+
}
51+
52+
.hero-bg {
53+
position: absolute;
54+
top: 0;
55+
left: 0;
56+
width: 100%;
57+
height: 100%;
58+
background-image: url('hero.png');
59+
background-size: cover;
60+
background-position: center;
61+
opacity: 0.3;
62+
z-index: -1;
63+
filter: blur(5px);
64+
}
65+
66+
.hero-content h1 {
67+
font-size: 4.5rem;
68+
font-weight: 800;
69+
letter-spacing: -2px;
70+
margin-bottom: 20px;
71+
background: linear-gradient(to right, #fff, var(--primary));
72+
-webkit-background-clip: text;
73+
background-clip: text;
74+
-webkit-text-fill-color: transparent;
75+
animation: fadeInDown 1s ease-out;
76+
}
77+
78+
.hero-content p {
79+
font-size: 1.5rem;
80+
color: var(--text-dim);
81+
max-width: 800px;
82+
margin: 0 auto 40px;
83+
animation: fadeInUp 1s ease-out 0.3s forwards;
84+
opacity: 0;
85+
}
86+
87+
.cta-button {
88+
display: inline-block;
89+
padding: 18px 40px;
90+
font-size: 1.1rem;
91+
font-weight: 600;
92+
text-decoration: none;
93+
color: var(--bg-dark);
94+
background: var(--primary);
95+
border-radius: 50px;
96+
box-shadow: 0 0 25px var(--accent-glow);
97+
transition: all 0.3s ease;
98+
animation: fadeInUp 1s ease-out 0.6s forwards;
99+
opacity: 0;
100+
}
101+
102+
.cta-button:hover {
103+
transform: translateY(-3px) scale(1.05);
104+
box-shadow: 0 0 40px var(--primary);
105+
}
106+
107+
/* Chat Section */
108+
.chat-demo {
109+
padding: 100px 20px;
110+
max-width: 1200px;
111+
margin: 0 auto;
112+
}
113+
114+
.chat-container {
115+
background: var(--card-bg);
116+
backdrop-filter: blur(20px);
117+
border: 1px solid rgba(255, 255, 255, 0.1);
118+
border-radius: 20px;
119+
padding: 30px;
120+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
121+
position: relative;
122+
overflow: hidden;
123+
}
124+
125+
.chat-container::before {
126+
content: '';
127+
position: absolute;
128+
top: 0;
129+
left: 0;
130+
width: 4px;
131+
height: 100%;
132+
background: var(--primary);
133+
}
134+
135+
.chat-header {
136+
display: flex;
137+
align-items: center;
138+
margin-bottom: 20px;
139+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
140+
padding-bottom: 15px;
141+
}
142+
143+
.status-dot {
144+
width: 10px;
145+
height: 10px;
146+
background: #00ff88;
147+
border-radius: 50%;
148+
margin-right: 15px;
149+
box-shadow: 0 0 10px #00ff88;
150+
}
151+
152+
.message {
153+
margin-bottom: 25px;
154+
opacity: 0;
155+
transform: translateX(-20px);
156+
transition: all 0.5s ease;
157+
}
158+
159+
.message.visible {
160+
opacity: 1;
161+
transform: translateX(0);
162+
}
163+
164+
.message.user .bubble {
165+
background: rgba(255, 255, 255, 0.1);
166+
color: #fff;
167+
margin-left: auto;
168+
border-bottom-right-radius: 0;
169+
}
170+
171+
.message.agent .bubble {
172+
background: linear-gradient(135deg, rgba(0, 242, 255, 0.1), rgba(112, 0, 255, 0.1));
173+
border: 1px solid rgba(0, 242, 255, 0.2);
174+
border-bottom-left-radius: 0;
175+
}
176+
177+
.bubble {
178+
max-width: 80%;
179+
padding: 15px 25px;
180+
border-radius: 18px;
181+
font-size: 1.1rem;
182+
position: relative;
183+
}
184+
185+
.label {
186+
font-size: 0.8rem;
187+
color: var(--text-dim);
188+
margin-bottom: 5px;
189+
display: block;
190+
}
191+
192+
.code-block {
193+
background: #000;
194+
padding: 15px;
195+
border-radius: 10px;
196+
font-family: 'Fira Code', 'Courier New', monospace;
197+
font-size: 0.9rem;
198+
color: #00ff88;
199+
margin-top: 15px;
200+
white-space: pre-wrap;
201+
border: 1px solid #222;
202+
}
203+
204+
/* Features Grid */
205+
.features {
206+
padding: 100px 20px;
207+
display: grid;
208+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
209+
gap: 30px;
210+
max-width: 1200px;
211+
margin: 0 auto;
212+
}
213+
214+
.feature-card {
215+
background: var(--card-bg);
216+
padding: 40px;
217+
border-radius: 20px;
218+
border: 1px solid rgba(255, 255, 255, 0.05);
219+
transition: all 0.3s ease;
220+
cursor: default;
221+
}
222+
223+
.feature-card:hover {
224+
background: rgba(255, 255, 255, 0.08);
225+
transform: translateY(-10px);
226+
border-color: var(--primary);
227+
}
228+
229+
.feature-icon {
230+
font-size: 2.5rem;
231+
margin-bottom: 20px;
232+
display: block;
233+
}
234+
235+
.feature-card h3 {
236+
font-size: 1.5rem;
237+
margin-bottom: 15px;
238+
color: var(--primary);
239+
}
240+
241+
.feature-card p {
242+
color: var(--text-dim);
243+
}
244+
245+
/* Animations */
246+
@keyframes fadeInDown {
247+
from { opacity: 0; transform: translateY(-30px); }
248+
to { opacity: 1; transform: translateY(0); }
249+
}
250+
251+
@keyframes fadeInUp {
252+
from { opacity: 0; transform: translateY(30px); }
253+
to { opacity: 1; transform: translateY(0); }
254+
}
255+
256+
@media (max-width: 768px) {
257+
.hero-content h1 { font-size: 3rem; }
258+
.hero-content p { font-size: 1.1rem; }
259+
.bubble { max-width: 90%; }
260+
}

0 commit comments

Comments
 (0)