-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
371 lines (358 loc) · 17.8 KB
/
index.html
File metadata and controls
371 lines (358 loc) · 17.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EIP MCP — 企業智慧數據整合平台</title>
<meta name="description" content="EIP MCP 透過 Model Context Protocol 讓 AI 助手直接存取企業數據，提升團隊決策效率。">
<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=Noto+Sans+TC:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
/* ─── HERO ─── */
.hero {
padding: 160px 32px 100px;
text-align: center; position: relative; overflow: hidden;
}
.hero::before {
content: '';
position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
width: 900px; height: 900px;
background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, rgba(6,182,212,0.04) 40%, transparent 70%);
pointer-events: none;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(--primary-50); border: 1px solid var(--primary-100);
padding: 8px 18px; border-radius: 100px;
font-size: 13.5px; font-weight: 600; color: var(--primary);
margin-bottom: 32px;
animation: fadeInUp 0.6s ease both;
}
.hero-badge::before {
content: ''; width: 7px; height: 7px;
background: var(--success); border-radius: 50%;
animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.4); }
}
.hero h1 {
font-size: clamp(36px, 5.5vw, 64px);
font-weight: 900; line-height: 1.15;
letter-spacing: -0.02em; margin-bottom: 24px;
animation: fadeInUp 0.6s 0.1s ease both;
}
.hero h1 .gradient-text {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero p {
font-size: clamp(17px, 2vw, 20px); color: var(--text-secondary);
max-width: 620px; margin: 0 auto 48px; line-height: 1.8;
animation: fadeInUp 0.6s 0.2s ease both;
}
.hero-actions {
display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
animation: fadeInUp 0.6s 0.3s ease both;
}
/* Hero visual */
.hero-visual {
max-width: 960px; margin: 64px auto 0;
border-radius: 20px; overflow: hidden;
box-shadow: var(--shadow-xl); border: 1px solid var(--border);
background: var(--surface-raised);
animation: fadeInUp 0.8s 0.4s ease both;
}
.terminal-bar {
display: flex; align-items: center; gap: 8px;
padding: 14px 20px; background: var(--surface-muted);
border-bottom: 1px solid var(--border);
}
.terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
.terminal-dot:nth-child(1) { background: #f87171; }
.terminal-dot:nth-child(2) { background: #fbbf24; }
.terminal-dot:nth-child(3) { background: #34d399; }
.terminal-bar span {
flex: 1; text-align: center; font-size: 13px;
color: var(--text-muted); font-weight: 500;
}
.terminal-body {
padding: 32px; font-family: 'JetBrains Mono', monospace;
font-size: 14px; line-height: 2; color: var(--text-secondary);
}
.terminal-body .prompt { color: var(--success); font-weight: 500; }
.terminal-body .cmd { color: var(--text); font-weight: 500; }
.terminal-body .output { color: var(--text-muted); }
.terminal-body .highlight { color: var(--primary); font-weight: 500; }
.terminal-body .accent { color: var(--accent); }
/* ─── FEATURES ─── */
.features { padding: 120px 32px; max-width: 1200px; margin: 0 auto; }
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.feature-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 36px 32px;
transition: all 0.3s ease; position: relative; overflow: hidden;
}
.feature-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent));
opacity: 0; transition: opacity 0.3s ease;
}
.feature-card:hover {
border-color: var(--primary-100); box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.feature-card:hover::before { opacity: 1; }
.feature-icon {
width: 52px; height: 52px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 24px; font-size: 24px;
}
.feature-icon.blue { background: #eff6ff; color: var(--primary); }
.feature-icon.cyan { background: #ecfeff; color: var(--accent); }
.feature-icon.green { background: #ecfdf5; color: var(--success); }
.feature-icon.amber { background: #fffbeb; color: var(--warning); }
.feature-icon.violet { background: #f5f3ff; color: #7c3aed; }
.feature-icon.rose { background: #fff1f2; color: #f43f5e; }
.feature-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 12px; }
.feature-card p { font-size: 15px; color: var(--text-secondary); line-height: 1.75; }
/* ─── HOW IT WORKS ─── */
.how-it-works {
padding: 120px 32px; background: var(--surface-raised);
border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
}
.how-inner { max-width: 1200px; margin: 0 auto; }
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 32px; margin-top: 72px;
}
.step { text-align: center; padding: 24px; }
.step-number {
width: 56px; height: 56px; border-radius: 16px;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff; font-size: 22px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 24px; font-family: 'JetBrains Mono', monospace;
}
.step h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.step p { font-size: 15px; color: var(--text-secondary); line-height: 1.75; }
/* ─── CTA ─── */
.cta-section { padding: 120px 32px; text-align: center; }
.cta-box {
max-width: 720px; margin: 0 auto;
background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 50%, var(--accent) 100%);
border-radius: 24px; padding: 72px 48px; color: #fff;
position: relative; overflow: hidden;
}
.cta-box::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.12), transparent 60%);
}
.cta-box h2 {
font-size: clamp(26px, 3.5vw, 36px); font-weight: 800;
margin-bottom: 16px; position: relative;
}
.cta-box p { font-size: 17px; opacity: 0.9; margin-bottom: 40px; position: relative; }
.cta-box .btn {
background: #fff; color: var(--primary); font-weight: 700;
position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.cta-box .btn:hover {
transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
@media (max-width: 640px) {
.hero { padding: 130px 20px 80px; }
.features, .how-it-works, .cta-section { padding: 80px 20px; }
.cta-box { padding: 48px 28px; border-radius: 20px; }
.terminal-body { padding: 20px; font-size: 12.5px; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav id="navbar">
<div class="nav-inner">
<a href="index.html" class="nav-logo">
<div class="nav-logo-icon">MCP</div>
EIP MCP
</a>
<button class="nav-toggle" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="選單">
<span></span><span></span><span></span>
</button>
<div class="nav-links">
<a href="#features">功能介紹</a>
<a href="#how-it-works">使用方式</a>
<a href="privacy.html">隱私權政策</a>
<a href="https://meet.speeding-rocket.com/register" class="nav-cta">免費註冊</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-badge">MCP Protocol 驅動</div>
<h1>讓 AI 助手<br><span class="gradient-text">直接讀懂你的企業數據</span></h1>
<p>EIP MCP 透過 Model Context Protocol，將 Google Analytics 等企業工具無縫接入 Claude、ChatGPT 等 AI 助手，員工用自然語言就能查報表、做分析。</p>
<div class="hero-actions">
<a href="https://meet.speeding-rocket.com/register" class="btn btn-primary">
開始使用
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</a>
<a href="#features" class="btn btn-ghost">了解更多</a>
</div>
<div class="hero-visual">
<div class="terminal-bar">
<div class="terminal-dot"></div>
<div class="terminal-dot"></div>
<div class="terminal-dot"></div>
<span>Claude Desktop — MCP 連線中</span>
</div>
<div class="terminal-body">
<div><span class="prompt">你：</span><span class="cmd">上個月官網的活躍用戶數和跳出率是多少？</span></div>
<br>
<div><span class="prompt">Claude：</span><span class="output">正在查詢 Google Analytics 資料...</span></div>
<div><span class="output">📊 2026 年 2 月 官網報表摘要：</span></div>
<div><span class="output"> 活躍用戶數 </span><span class="highlight">12,847</span><span class="output"> 人（</span><span class="accent">↑ 23%</span><span class="output">）</span></div>
<div><span class="output"> 跳出率 </span><span class="highlight">34.2%</span><span class="output">（</span><span class="accent">↓ 5.1%</span><span class="output">）</span></div>
<div><span class="output"> 平均工作階段 </span><span class="highlight">3 分 42 秒</span></div>
<br>
<div><span class="output">整體趨勢正向，用戶參與度持續提升。需要我進一步分析流量來源嗎？</span></div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="features" id="features">
<div class="section-header reveal">
<div class="section-label">功能介紹</div>
<h2>一個協定，打通所有企業數據</h2>
<p>基於開放的 MCP 協定，安全地將企業資料源接入 AI 助手</p>
</div>
<div class="features-grid">
<div class="feature-card reveal">
<div class="feature-icon blue">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg>
</div>
<h3>Google Analytics 整合</h3>
<p>直接透過 AI 助手查詢 GA4 報表數據，包括即時報表、標準報表、帳戶摘要與自訂維度，不需要再開 GA 介面。</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon cyan">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
</div>
<h3>OAuth 安全授權</h3>
<p>每位員工各自授權自己的 Google 帳號，憑證加密儲存，不共用密碼，符合企業資安要求。</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon green">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/></svg>
</div>
<h3>自然語言查詢</h3>
<p>不用學 GA 介面操作，直接問「上週的轉換率多少？」AI 助手會自動呼叫正確的 API 並整理結果回覆你。</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon amber">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3>權限動態管理</h3>
<p>沒有授權 GA 的員工，AI 助手自動隱藏 GA 相關工具。管理者可隨時開關員工的 MCP 存取權限。</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon violet">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
</div>
<h3>即插即用</h3>
<p>相容 Claude Desktop、Cursor、Windsurf 等所有支援 MCP 的 AI 工具，複製設定 JSON 即可連線使用。</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon rose">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
</div>
<h3>可擴展架構</h3>
<p>目前支援 Google Analytics，未來可擴展 GitHub、AWS、Slack 等更多整合，統一入口管理所有數據工具。</p>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="how-it-works" id="how-it-works">
<div class="how-inner">
<div class="section-header reveal">
<div class="section-label">使用方式</div>
<h2>三步驟開始使用</h2>
<p>從註冊到查詢，只需要幾分鐘</p>
</div>
<div class="steps">
<div class="step reveal">
<div class="step-number">1</div>
<h3>啟用 MCP 並取得金鑰</h3>
<p>登入 EIP 系統，在 MCP 設定頁面啟用功能，系統會自動產生你的專屬認證金鑰。</p>
</div>
<div class="step reveal">
<div class="step-number">2</div>
<h3>授權 Google Analytics</h3>
<p>在整合頁面點擊「連結 Google Analytics」，透過 Google OAuth 安全授權你的 GA 帳號。</p>
</div>
<div class="step reveal">
<div class="step-number">3</div>
<h3>開始對話查詢</h3>
<p>將 MCP 設定 JSON 貼到 Claude Desktop，就能直接用自然語言向 AI 詢問你的 GA 數據。</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<div class="cta-box reveal">
<h2>準備好讓 AI 讀懂你的數據了嗎？</h2>
<p>立即註冊，體驗用自然語言查詢企業數據的全新方式。</p>
<a href="https://meet.speeding-rocket.com/register" class="btn">
免費註冊
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</a>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-inner">
<div class="footer-brand">
<div class="nav-logo-icon">MCP</div>
EIP MCP — 光速火箭股份有限公司
</div>
<div class="footer-links">
<a href="#features">功能介紹</a>
<a href="privacy.html">隱私權政策</a>
<a href="https://www.speeding-rocket.com" target="_blank" rel="noopener">公司官網</a>
</div>
<div class="footer-copy">
Copyright © 2026 光速火箭股份有限公司（SPEEDING ROCKET CO., LTD.）著作權所有<br>
242 新北市新莊區富貴路568號六樓 ｜ +886 2-85228955
</div>
</div>
</footer>
<script>
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
navbar.classList.toggle('scrolled', window.scrollY > 20);
});
const revealEls = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, i) => {
if (entry.isIntersecting) {
setTimeout(() => entry.target.classList.add('visible'), i * 80);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
revealEls.forEach(el => observer.observe(el));
document.querySelectorAll('.nav-links a').forEach(a => {
a.addEventListener('click', () => document.querySelector('.nav-links').classList.remove('open'));
});
</script>
</body>
</html>