229 lines
12 KiB
HTML
229 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>AlphaX</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--yellow: #ffd02f; --yellow-light: #fff4c4; --yellow-dark: #746019;
|
|
--blue: #4262ff;
|
|
--teal: #0fbcb0; --teal-light: #c3faf5; --moss-dark: #187574;
|
|
--coral: #ff9999; --coral-light: #ffc6c6; --coral-dark: #600000;
|
|
--primary: #1c1c1e; --on-primary: #ffffff; --canvas: #ffffff;
|
|
--surface: #f7f8fa; --surface-soft: #fafbfc;
|
|
--hairline: #e0e2e8; --hairline-soft: #eef0f3; --hairline-strong: #c7cad5;
|
|
--ink: #1c1c1e; --ink-deep: #050038;
|
|
--charcoal: #2c2c34; --slate: #555a6a; --steel: #6b6f7e; --stone: #8e91a0; --muted: #a5a8b5;
|
|
--shadow: rgba(5,0,56,.08) 0px 12px 32px -4px;
|
|
--radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-xxxl:28px; --radius-full:9999px;
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
html { overflow-x: hidden; height: 100%; }
|
|
body {
|
|
height: 100%; overflow-x: hidden;
|
|
font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
color: var(--ink); background: var(--canvas);
|
|
line-height: 1.5; -webkit-font-smoothing: antialiased; text-size-adjust: 100%;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
a { color: inherit; text-decoration: none; }
|
|
|
|
/* User menu (from app.html nav pattern) */
|
|
.user-menu { position: relative; }
|
|
.user-trigger {
|
|
display: flex; align-items: center; gap: 6px; padding: 6px 12px;
|
|
border: 1px solid var(--hairline); border-radius: var(--radius-full);
|
|
font-size: 13px; color: var(--slate); cursor: pointer; transition: .15s;
|
|
background: var(--canvas); line-height: 1.4;
|
|
}
|
|
.user-trigger:hover { border-color: var(--hairline-strong); }
|
|
.user-avatar {
|
|
width: 26px; height: 26px; border-radius: 50%;
|
|
background: var(--yellow); color: var(--primary);
|
|
display: grid; place-items: center; font-weight: 700; font-size: 12px;
|
|
}
|
|
.user-dropdown {
|
|
display: none; position: absolute; right: 0; top: 42px;
|
|
background: var(--canvas); border: 1px solid var(--hairline);
|
|
border-radius: var(--radius-lg); box-shadow: var(--shadow);
|
|
min-width: 180px; padding: 4px; z-index: 200;
|
|
}
|
|
.user-dropdown.show { display: block; }
|
|
.user-dropdown .dd-email {
|
|
padding: 10px 14px; font-size: 12px; color: var(--stone);
|
|
border-bottom: 1px solid var(--hairline-soft); margin-bottom: 4px;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.dd-item {
|
|
display: block; width: 100%; padding: 8px 14px; border: 0; background: transparent;
|
|
font-size: 13px; color: var(--slate); text-align: left; cursor: pointer;
|
|
border-radius: var(--radius-sm); transition: .1s;
|
|
}
|
|
.dd-item:hover { background: var(--surface); color: var(--ink); }
|
|
.dd-item.danger { color: var(--red); }
|
|
.dd-item.danger:hover { background: var(--red-light); }
|
|
|
|
/* Auth-dependent visibility */
|
|
.nav-guest { display: flex; align-items: center; gap: 8px; }
|
|
.nav-user { display: none; }
|
|
body.auth .nav-guest { display: none; }
|
|
body.auth .nav-user { display: flex; }
|
|
|
|
/* Shell */
|
|
.shell { flex: 1; width: min(100% - 48px, 960px); margin: 0 auto; padding: 40px 0 0; display: flex; flex-direction: column; }
|
|
|
|
/* Nav */
|
|
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 48px; }
|
|
.nav-left { display: flex; align-items: center; gap: 8px; }
|
|
.brand-mark { width: 22px; height: 22px; background: var(--yellow); border-radius: 5px; display: grid; place-items: center; }
|
|
.brand-mark::after { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--primary); border-radius: 50%; box-shadow: 5px -3px 0 -1.5px var(--primary); }
|
|
.brand-name { font-weight: 500; font-size: 15px; letter-spacing: -.2px; }
|
|
.beta-badge { display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:var(--radius-full); background:var(--surface); border:1px solid var(--hairline); color:var(--steel); font-size:11px; font-weight:600; line-height:1; }
|
|
.hero-brand .beta-badge { margin-left:2px; }
|
|
|
|
/* Buttons */
|
|
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer; font-weight: 500; font-size: 14px; line-height: 1.3; transition: background .15s, transform .15s; text-decoration: none; -webkit-tap-highlight-color: transparent; }
|
|
.btn:active { transform: scale(.98); }
|
|
.btn-primary { background: var(--primary); color: var(--on-primary); border-radius: var(--radius-full); padding: 10px 20px; }
|
|
.btn-primary:active { background: var(--charcoal); }
|
|
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--radius-full); padding: 10px 20px; }
|
|
|
|
/* Hero */
|
|
.hero { padding: 120px 0 0; text-align: center; flex: 1; position: relative; overflow: hidden; }
|
|
.hero-bg {
|
|
position: absolute; inset: 0; pointer-events: none; user-select: none;
|
|
}
|
|
.hero-particle {
|
|
position: absolute; bottom: -40px;
|
|
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
|
font-size: 13px; color: var(--slate);
|
|
opacity: 0; animation: floatUp var(--dur) var(--delay) infinite linear;
|
|
}
|
|
@keyframes floatUp {
|
|
0% { transform: translateY(0) translateX(0); opacity: 0; }
|
|
5% { opacity: var(--a); }
|
|
85% { opacity: var(--a); }
|
|
100% { transform: translateY(calc(-100vh - 80px)) translateX(var(--dx)); opacity: 0; }
|
|
}
|
|
.hero-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px; }
|
|
.hero-mark { width: 36px; height: 36px; background: var(--yellow); border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
|
|
.hero-mark::after { content: ""; width: 12px; height: 12px; border: 2px solid var(--primary); border-radius: 50%; box-shadow: 9px -5px 0 -2.5px var(--primary); }
|
|
.hero-word { font-weight: 450; font-size: 22px; letter-spacing: -0.3px; color: var(--ink); }
|
|
h1 { font-size: clamp(36px, 5.5vw, 56px); font-weight: 500; line-height: 1.1; letter-spacing: -1px; color: var(--ink-deep); max-width: 600px; margin: 0 auto 20px; }
|
|
.hero-lead { font-size: 16px; line-height: 1.6; color: var(--slate); max-width: 440px; margin: 0 auto 32px; }
|
|
.hero-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
|
|
|
|
/* Footer */
|
|
.footer { padding: 32px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--stone); font-size: 13px; border-top: 1px solid var(--hairline-soft); flex-shrink: 0; }
|
|
.footer-copy { color: var(--stone); }
|
|
|
|
@media (max-width: 768px) {
|
|
.shell { width: min(100% - 32px, 960px); padding: 24px 0 0; }
|
|
.hero { padding: 0; display: flex; flex-direction: column; justify-content: center; }
|
|
h1 { letter-spacing: -.5px; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.shell { width: min(100% - 24px, 960px); }
|
|
.hero { padding: 0; display: flex; flex-direction: column; justify-content: center; }
|
|
.hero-actions { flex-direction: column; align-items: center; width: 100%; }
|
|
.hero-actions .btn { width: auto; min-width: 180px; }
|
|
.footer { flex-direction: column; text-align: center; gap: 8px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="shell">
|
|
<nav class="nav">
|
|
<a class="nav-left" href="/">
|
|
<span class="brand-mark"></span>
|
|
<span class="brand-name">AlphaX</span>
|
|
</a>
|
|
<div class="nav-guest">
|
|
<a class="btn btn-secondary" href="/auth?tab=login">登录</a>
|
|
</div>
|
|
<div class="nav-user">
|
|
<div class="user-menu">
|
|
<div class="user-trigger" onclick="toggleUserMenu()">
|
|
<span class="user-avatar" id="userInitial">?</span>
|
|
<span id="userEmailShort">--</span>
|
|
<svg width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="user-dropdown" id="userDropdown">
|
|
<div class="dd-email" id="ddEmail">--</div>
|
|
<a class="dd-item" href="/app">进入看板</a>
|
|
<a class="dd-item danger" href="#" onclick="doLogout()">退出登录</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="hero-bg">
|
|
<span class="hero-particle" style="left:5%;--dur:18s;--delay:-2s;--a:0.18;--dx:20px">01001011</span>
|
|
<span class="hero-particle" style="left:12%;--dur:22s;--delay:-7s;--a:0.13;--dx:-15px">0x7f3a</span>
|
|
<span class="hero-particle" style="left:20%;--dur:20s;--delay:-12s;--a:0.15;--dx:30px">BTC</span>
|
|
<span class="hero-particle" style="left:28%;--dur:25s;--delay:-4s;--a:0.13;--dx:-25px">$48.2K</span>
|
|
<span class="hero-particle" style="left:35%;--dur:17s;--delay:-9s;--a:0.18;--dx:10px">10110110</span>
|
|
<span class="hero-particle" style="left:42%;--dur:23s;--delay:-1s;--a:0.15;--dx:-20px">ETH</span>
|
|
<span class="hero-particle" style="left:50%;--dur:19s;--delay:-14s;--a:0.13;--dx:35px">#d4f0</span>
|
|
<span class="hero-particle" style="left:56%;--dur:26s;--delay:-6s;--a:0.15;--dx:-10px">SOL</span>
|
|
<span class="hero-particle" style="left:63%;--dur:21s;--delay:-11s;--a:0.13;--dx:25px">0.0037</span>
|
|
<span class="hero-particle" style="left:70%;--dur:24s;--delay:-3s;--a:0.18;--dx:-30px">11001010</span>
|
|
<span class="hero-particle" style="left:77%;--dur:18s;--delay:-8s;--a:0.13;--dx:15px">$1.2M</span>
|
|
<span class="hero-particle" style="left:84%;--dur:22s;--delay:-13s;--a:0.15;--dx:-20px">0xa91f</span>
|
|
<span class="hero-particle" style="left:90%;--dur:20s;--delay:-5s;--a:0.13;--dx:40px">XRP</span>
|
|
<span class="hero-particle" style="left:8%;--dur:27s;--delay:-16s;--a:0.10;--dx:-12px">+2.41%</span>
|
|
<span class="hero-particle" style="left:32%;--dur:19s;--delay:-18s;--a:0.13;--dx:22px">0b0101</span>
|
|
<span class="hero-particle" style="left:48%;--dur:24s;--delay:-10s;--a:0.10;--dx:-35px">$0.42</span>
|
|
<span class="hero-particle" style="left:65%;--dur:21s;--delay:-20s;--a:0.13;--dx:18px">BNB</span>
|
|
<span class="hero-particle" style="left:80%;--dur:26s;--delay:-15s;--a:0.10;--dx:-28px">7.13K</span>
|
|
<span class="hero-particle" style="left:15%;--dur:23s;--delay:-22s;--a:0.10;--dx:12px">0b1101</span>
|
|
<span class="hero-particle" style="left:55%;--dur:28s;--delay:-19s;--a:0.13;--dx:-18px">ADA</span>
|
|
</div>
|
|
<div class="hero-brand">
|
|
<span class="hero-mark"></span>
|
|
<span class="hero-word">AlphaX</span>
|
|
<span class="beta-badge">Beta</span>
|
|
</div>
|
|
<h1>AI Market Intelligence.</h1>
|
|
<p class="hero-lead">AI 驱动的 Crypto 市场情报系统，帮助交易者发现机会、验证信号、管理风险。</p>
|
|
<div class="hero-actions">
|
|
<a class="btn btn-primary hero-cta" id="heroCta" href="/auth?tab=login">立刻体验</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<span class="footer-copy">© 2026 AlphaX</span>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
var $ = function(id){ return document.getElementById(id); };
|
|
function toggleUserMenu() { $('userDropdown').classList.toggle('show'); }
|
|
document.addEventListener('click', function(e) { if (!e.target.closest('.user-menu')) $('userDropdown').classList.remove('show'); });
|
|
async function doLogout() { await fetch('/api/auth/logout',{method:'POST'}); window.location.href='/'; }
|
|
|
|
async function checkAuth() {
|
|
try {
|
|
var resp = await fetch('/api/auth/me');
|
|
if (!resp.ok) return;
|
|
var data = await resp.json();
|
|
var email = (data.user && data.user.email) || '';
|
|
if (!email) return;
|
|
document.body.classList.add('auth');
|
|
var cta = $('heroCta');
|
|
if (cta) cta.href = '/app';
|
|
$('userInitial').textContent = email.charAt(0).toUpperCase();
|
|
$('userEmailShort').textContent = email.length > 14 ? email.slice(0,12) + '\u2026' : email;
|
|
$('ddEmail').textContent = email;
|
|
} catch(e) {}
|
|
}
|
|
checkAuth();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|