mirror of
https://github.com/NoFxAiOS/nofx.git
synced 2026-07-13 15:57:01 +08:00
feat(web): 重做 #138/#133 的前端改动(LOGO 替换 + Loading Logo + 校验优化保留),尽量不覆盖他人代码
This commit is contained in:
@@ -170,10 +170,7 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center" style={{ background: '#0B0E11' }}>
|
<div className="min-h-screen flex items-center justify-center" style={{ background: '#0B0E11' }}>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center text-3xl animate-spin"
|
<img src="/images/logo.png" alt="NoFx Logo" className="w-16 h-16 mx-auto mb-4 animate-pulse" />
|
||||||
style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
|
|
||||||
⚡
|
|
||||||
</div>
|
|
||||||
<p style={{ color: '#EAECEF' }}>{t('loading', language)}</p>
|
<p style={{ color: '#EAECEF' }}>{t('loading', language)}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ export function Header({ simple = false }: HeaderProps) {
|
|||||||
{/* Left - Logo and Title */}
|
{/* Left - Logo and Title */}
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<img src="/icons/nofx.svg?v=2" alt="NOFX" className="h-10 w-auto" />
|
<img src="/images/logo.png" alt="NoFx Logo" className="w-8 h-8" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
|
<h1 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
|
||||||
@@ -56,4 +56,4 @@ export function Header({ simple = false }: HeaderProps) {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -72,7 +72,7 @@ export function LoginPage() {
|
|||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
<div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
|
<div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
|
||||||
<img src="/icons/nofx.svg?v=2" alt="NOFX" className="w-16 h-16" />
|
<img src="/images/logo.png" alt="NoFx Logo" className="w-16 h-16 object-contain" />
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
|
<h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
|
||||||
{t('loginTitle', language)}
|
{t('loginTitle', language)}
|
||||||
|
|||||||
@@ -92,7 +92,7 @@ export function RegisterPage() {
|
|||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
<div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
|
<div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
|
||||||
<img src="/icons/nofx.svg?v=2" alt="NOFX" className="w-16 h-16" />
|
<img src="/images/logo.png" alt="NoFx Logo" className="w-16 h-16 object-contain" />
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
|
<h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
|
||||||
{t('appTitle', language)}
|
{t('appTitle', language)}
|
||||||
|
|||||||
@@ -8,36 +8,79 @@ export default function AboutSection() {
|
|||||||
<AnimatedSection id='about' backgroundColor='var(--brand-dark-gray)'>
|
<AnimatedSection id='about' backgroundColor='var(--brand-dark-gray)'>
|
||||||
<div className='max-w-7xl mx-auto'>
|
<div className='max-w-7xl mx-auto'>
|
||||||
<div className='grid lg:grid-cols-2 gap-12 items-center'>
|
<div className='grid lg:grid-cols-2 gap-12 items-center'>
|
||||||
<motion.div className='space-y-6' initial={{ opacity: 0, x: -50 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }}>
|
<motion.div
|
||||||
|
className='space-y-6'
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
<motion.div
|
<motion.div
|
||||||
className='inline-flex items-center gap-2 px-4 py-2 rounded-full'
|
className='inline-flex items-center gap-2 px-4 py-2 rounded-full'
|
||||||
style={{ background: 'rgba(240, 185, 11, 0.1)', border: '1px solid rgba(240, 185, 11, 0.2)' }}
|
style={{
|
||||||
|
background: 'rgba(240, 185, 11, 0.1)',
|
||||||
|
border: '1px solid rgba(240, 185, 11, 0.2)',
|
||||||
|
}}
|
||||||
whileHover={{ scale: 1.05 }}
|
whileHover={{ scale: 1.05 }}
|
||||||
>
|
>
|
||||||
<Target className='w-4 h-4' style={{ color: 'var(--brand-yellow)' }} />
|
<Target
|
||||||
<span className='text-sm font-semibold' style={{ color: 'var(--brand-yellow)' }}>
|
className='w-4 h-4'
|
||||||
|
style={{ color: 'var(--brand-yellow)' }}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className='text-sm font-semibold'
|
||||||
|
style={{ color: 'var(--brand-yellow)' }}
|
||||||
|
>
|
||||||
关于 NOFX
|
关于 NOFX
|
||||||
</span>
|
</span>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<h2 className='text-4xl font-bold' style={{ color: 'var(--brand-light-gray)' }}>
|
<h2
|
||||||
|
className='text-4xl font-bold'
|
||||||
|
style={{ color: 'var(--brand-light-gray)' }}
|
||||||
|
>
|
||||||
什么是 NOFX?
|
什么是 NOFX?
|
||||||
</h2>
|
</h2>
|
||||||
<p className='text-lg leading-relaxed' style={{ color: 'var(--text-secondary)' }}>
|
<p
|
||||||
NOFX 不是另一个交易机器人,而是 AI 交易的 'Linux' —— 一个透明、可信任的开源 OS,提供统一的 '决策-风险-执行' 层,支持所有资产类别。
|
className='text-lg leading-relaxed'
|
||||||
|
style={{ color: 'var(--text-secondary)' }}
|
||||||
|
>
|
||||||
|
NOFX 不是另一个交易机器人,而是 AI 交易的 'Linux' ——
|
||||||
|
一个透明、可信任的开源 OS,提供统一的 '决策-风险-执行'
|
||||||
|
层,支持所有资产类别。
|
||||||
</p>
|
</p>
|
||||||
<p className='text-lg leading-relaxed' style={{ color: 'var(--text-secondary)' }}>
|
<p
|
||||||
从加密市场起步(24/7、高波动性完美测试场),未来扩展到股票、期货、外汇。核心:开放架构、AI 达尔文主义(多代理自竞争、策略进化)、CodeFi 飞轮(开发者 PR 贡献获积分奖励)。
|
className='text-lg leading-relaxed'
|
||||||
|
style={{ color: 'var(--text-secondary)' }}
|
||||||
|
>
|
||||||
|
从加密市场起步(24/7、高波动性完美测试场),未来扩展到股票、期货、外汇。核心:开放架构、AI
|
||||||
|
达尔文主义(多代理自竞争、策略进化)、CodeFi 飞轮(开发者 PR
|
||||||
|
贡献获积分奖励)。
|
||||||
</p>
|
</p>
|
||||||
<motion.div className='flex items-center gap-3 pt-4' whileHover={{ x: 5 }}>
|
<motion.div
|
||||||
<div className='w-12 h-12 rounded-full flex items-center justify-center' style={{ background: 'rgba(240, 185, 11, 0.1)' }}>
|
className='flex items-center gap-3 pt-4'
|
||||||
<Shield className='w-6 h-6' style={{ color: 'var(--brand-yellow)' }} />
|
whileHover={{ x: 5 }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className='w-12 h-12 rounded-full flex items-center justify-center'
|
||||||
|
style={{ background: 'rgba(240, 185, 11, 0.1)' }}
|
||||||
|
>
|
||||||
|
<Shield
|
||||||
|
className='w-6 h-6'
|
||||||
|
style={{ color: 'var(--brand-yellow)' }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div className='font-semibold' style={{ color: 'var(--brand-light-gray)' }}>
|
<div
|
||||||
|
className='font-semibold'
|
||||||
|
style={{ color: 'var(--brand-light-gray)' }}
|
||||||
|
>
|
||||||
你 100% 掌控
|
你 100% 掌控
|
||||||
</div>
|
</div>
|
||||||
<div className='text-sm' style={{ color: 'var(--text-secondary)' }}>
|
<div
|
||||||
|
className='text-sm'
|
||||||
|
style={{ color: 'var(--text-secondary)' }}
|
||||||
|
>
|
||||||
完全掌控 AI 提示词和资金
|
完全掌控 AI 提示词和资金
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -45,21 +88,30 @@ export default function AboutSection() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className='relative'>
|
<div className='relative'>
|
||||||
<div className='rounded-2xl p-8' style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)' }}>
|
<div
|
||||||
|
className='rounded-2xl p-8'
|
||||||
|
style={{
|
||||||
|
background: 'var(--brand-black)',
|
||||||
|
border: '1px solid var(--panel-border)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Typewriter
|
<Typewriter
|
||||||
lines={[
|
lines={[
|
||||||
'$ git clone https://github.com/tinkle-community/nofx.git',
|
'$ git clone https://github.com/tinkle-community/nofx.git',
|
||||||
'$ cd nofx',
|
'$ cd nofx',
|
||||||
'$ chmod +x start.sh',
|
'$ chmod +x start.sh',
|
||||||
'$ ./start.sh start --build',
|
'$ ./start.sh start --build',
|
||||||
'🚀 启动自动交易系统...',
|
' 启动自动交易系统...',
|
||||||
'✓ API服务器启动在端口 8080',
|
' API服务器启动在端口 8080',
|
||||||
'🌐 Web 控制台 http://localhost:3000',
|
' Web 控制台 http://localhost:3000',
|
||||||
]}
|
]}
|
||||||
typingSpeed={70}
|
typingSpeed={70}
|
||||||
lineDelay={900}
|
lineDelay={900}
|
||||||
className='text-sm font-mono'
|
className='text-sm font-mono'
|
||||||
style={{ color: '#00FF41', textShadow: '0 0 6px rgba(0,255,65,0.6)' }}
|
style={{
|
||||||
|
color: '#00FF41',
|
||||||
|
textShadow: '0 0 6px rgba(0,255,65,0.6)',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user