laoxong/nofx
1
0
Fork 0
mirror of https://github.com/laoxong/nofx.git synced 2026-06-04 01:48:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve landing page UI and add pprof port mapping

Browse Source
This commit is contained in:
tinkle-community
2026-01-01 13:09:54 +08:00
parent 13bc752e82
commit 74adedbc64
8 changed files with 676 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/server.go
+9 -11
View File
@@ -14,9 +14,6 @@ import (
"nofx/manager"
"nofx/market"
"nofx/provider/alpaca"
"nofx/provider/coinank/coinank_api"
"nofx/provider/coinank/coinank_enum"
"nofx/provider/hyperliquid"
"nofx/provider/twelvedata"
"nofx/store"
"nofx/trader"
@@ -125,6 +122,7 @@ func (s *Server) setupRoutes() {
// Market data (no authentication required)
api.GET("/klines", s.handleKlines)
api.GET("/klines", s.handleKlines)
api.GET("/symbols", s.handleSymbols)
// Authentication related routes (no authentication required)
@@ -197,7 +195,7 @@ func (s *Server) setupRoutes() {
protected.GET("/positions", s.handlePositions)
protected.GET("/positions/history", s.handlePositionHistory)
protected.GET("/trades", s.handleTrades)
protected.GET("/orders", s.handleOrders) // Order list (all orders)
protected.GET("/orders", s.handleOrders) // Order list (all orders)
protected.GET("/orders/:id/fills", s.handleOrderFills) // Order fill details
protected.GET("/decisions", s.handleDecisions)
protected.GET("/decisions/latest", s.handleLatestDecisions)
@@ -2175,9 +2173,9 @@ func (s *Server) handlePositionHistory(c *gin.Context) {
directionStats, _ := store.Position().GetDirectionStats(trader.GetID())
c.JSON(http.StatusOK, gin.H{
"positions": positions,
"stats": stats,
"symbol_stats": symbolStats,
"positions": positions,
"stats": stats,
"symbol_stats": symbolStats,
"direction_stats": directionStats,
})
}
@@ -2556,8 +2554,8 @@ func (s *Server) getKlinesFromAlpaca(symbol, interval string, limit int) ([]mark
High: bar.High,
Low: bar.Low,
Close: bar.Close,
Volume: float64(bar.Volume), // 股数
QuoteVolume: float64(bar.Volume) * bar.Close, // 成交额 = 股数 * 收盘价 (USD)
Volume: float64(bar.Volume), // 股数
QuoteVolume: float64(bar.Volume) * bar.Close, // 成交额 = 股数 * 收盘价 (USD)
CloseTime: bar.Timestamp.UnixMilli(),
}
}
@@ -2638,8 +2636,8 @@ func (s *Server) getKlinesFromHyperliquid(symbol, interval string, limit int) ([
High: high,
Low: low,
Close: close,
Volume: volume, // 合约数量
QuoteVolume: volume * close, // 成交额 (USD)
Volume: volume, // 合约数量
QuoteVolume: volume * close, // 成交额 (USD)
CloseTime: candle.CloseTime,
}
}
docker-compose.yml
+1
View File
@@ -9,6 +9,7 @@ services:
stop_grace_period: 30s # 允许应用有 30 秒时间优雅关闭
ports:
- "${NOFX_BACKEND_PORT:-8080}:8080"
- "6060:6060" # pprof profiling
volumes:
- ./data:/app/data
- /etc/localtime:/etc/localtime:ro
web/src/components/landing/core/AgentGrid.tsx
+102 -59
View File
@@ -1,83 +1,126 @@
import { motion } from 'framer-motion'
import { Bot, TrendingUp, Layers } from 'lucide-react'
import { Bot, TrendingUp, Layers, Zap, Hexagon, Crosshair } from 'lucide-react'
const agents = [
{ name: "Alpha-1", type: "Scalper", apy: "142%", winRate: "68%", exposure: "Low", avatar: "/images/nofx_mascot.png", color: "text-nofx-gold" },
{ name: "Beta-X", type: "Swing", apy: "89%", winRate: "55%", exposure: "Med", icon: TrendingUp, color: "text-blue-400" },
{ name: "Gamma-Ray", type: "Arbitrage", apy: "24%", winRate: "99%", exposure: "Zero", icon: Layers, color: "text-purple-400" },
{
name: "ALPHA-1",
class: "SCALPER",
desc: "High-frequency microstructure exploitation.",
apy: "142%",
winRate: "68%",
risk: "HIGH",
color: "text-nofx-gold",
border: "border-nofx-gold/50",
bg_glow: "shadow-[0_0_30px_rgba(240,185,11,0.1)]",
icon: Zap
},
{
name: "BETA-X",
class: "SWING_OPS",
desc: "Multi-day trend extraction engine.",
apy: "89%",
winRate: "55%",
risk: "MED",
color: "text-blue-400",
border: "border-blue-400/30",
bg_glow: "shadow-[0_0_30px_rgba(96,165,250,0.1)]",
icon: TrendingUp
},
{
name: "GAMMA-RAY",
class: "ARBITRAGE",
desc: "Risk-free spatial price equalization.",
apy: "24%",
winRate: "99%",
risk: "ZERO",
color: "text-purple-400",
border: "border-purple-400/30",
bg_glow: "shadow-[0_0_30px_rgba(192,132,252,0.1)]",
icon: Layers
},
]
export default function AgentGrid() {
return (
<section id="market-scanner" className="py-24 bg-nofx-bg relative">
<div className="max-w-7xl mx-auto px-6">
<section id="market-scanner" className="py-24 bg-nofx-bg relative overflow-hidden">
<div className="flex items-center gap-4 mb-12">
<div className="w-2 h-8 bg-nofx-gold" />
<h2 className="text-3xl font-black text-white uppercase tracking-tighter">
Deployable <span className="text-nofx-gold">Agents</span>
</h2>
{/* Background Details */}
<div className="absolute top-0 right-0 p-10 opacity-20 pointer-events-none">
<Hexagon className="w-64 h-64 text-zinc-800" strokeWidth={0.5} />
</div>
<div className="max-w-7xl mx-auto px-6 relative z-10">
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
<div>
<div className="flex items-center gap-2 text-nofx-gold font-mono text-xs mb-2 tracking-widest uppercase">
<Crosshair className="w-4 h-4" /> Operator Select
</div>
<h2 className="text-4xl md:text-5xl font-black text-white uppercase tracking-tighter">
Available <span className="text-transparent bg-clip-text bg-gradient-to-r from-nofx-gold to-white">Units</span>
</h2>
</div>
<div className="font-mono text-right text-xs text-zinc-500 max-w-xs">
SELECT AN AUTONOMOUS AGENT TO BEGIN DEPLOYMENT. UNITS ARE PRE-TRAINED ON HISTORICAL TICKS.
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{agents.map((agent, i) => {
const Icon = agent.icon
return (
<motion.div
key={i}
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.1 }}
className={`relative bg-zinc-900/50 border border-zinc-800 p-6 overflow-hidden hover:border-zinc-600 transition-colors group ${i === 0 ? 'border-nofx-gold/50 shadow-[0_0_30px_rgba(240,185,11,0.1)]' : ''}`}
className={`group relative bg-black/40 backdrop-blur-sm border ${agent.border} overflow-hidden hover:bg-zinc-900/40 transition-all duration-300 ${agent.bg_glow}`}
style={{ clipPath: 'polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%)' }}
>
{/* Header */}
<div className="flex justify-between items-start mb-6">
<div>
<div className="text-zinc-400 text-xs font-mono uppercase mb-1">{agent.type} CLASS</div>
<div className="text-2xl font-bold text-white flex items-center gap-2">
{agent.name}
{i === 0 && <span className="text-[10px] bg-nofx-gold text-black px-1.5 py-0.5 rounded font-bold">TOP RATED</span>}
{/* Top "Hinge" decoration */}
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
<div className="p-8 relative z-10">
{/* Header */}
<div className="flex justify-between items-start mb-6">
<div className="p-3 bg-zinc-900/80 rounded border border-zinc-700">
<Icon className={`w-8 h-8 ${agent.color}`} />
</div>
<div className="text-right">
<div className="text-[10px] font-mono text-zinc-500 uppercase">Class</div>
<div className={`font-bold font-mono tracking-wider ${agent.color}`}>{agent.class}</div>
</div>
</div>
<Bot className={`w-8 h-8 ${agent.color}`} />
{/* Name & Desc */}
<h3 className="text-3xl font-bold text-white mb-2 tracking-tight group-hover:text-nofx-accent transition-colors">{agent.name}</h3>
<p className="text-zinc-500 text-sm mb-8 leading-relaxed h-10">{agent.desc}</p>
{/* Stats Grid */}
<div className="grid grid-cols-3 gap-px bg-zinc-800/50 border border-zinc-800 rounded overflow-hidden mb-8">
<div className="bg-black/60 p-3 text-center group-hover:bg-zinc-900/60 transition-colors">
<div className="text-[10px] text-zinc-500 uppercase font-mono mb-1">APY</div>
<div className="text-green-400 font-bold">{agent.apy}</div>
</div>
<div className="bg-black/60 p-3 text-center group-hover:bg-zinc-900/60 transition-colors">
<div className="text-[10px] text-zinc-500 uppercase font-mono mb-1">Win %</div>
<div className="text-white font-bold">{agent.winRate}</div>
</div>
<div className="bg-black/60 p-3 text-center group-hover:bg-zinc-900/60 transition-colors">
<div className="text-[10px] text-zinc-500 uppercase font-mono mb-1">Risk</div>
<div className={`${agent.color} font-bold`}>{agent.risk}</div>
</div>
</div>
{/* Action Btn */}
<button className={`w-full py-4 text-xs font-bold font-mono uppercase tracking-[0.2em] border border-zinc-700 hover:border-${agent.color === 'text-nofx-gold' ? 'nofx-gold' : 'white'} hover:bg-white/5 transition-all flex items-center justify-center gap-2 group-hover:text-white`}>
<span className={agent.color}>[</span> INITIALIZE <span className={agent.color}>]</span>
</button>
</div>
{/* Stats Grid */}
<div className="grid grid-cols-3 gap-2 mb-6 font-mono text-sm">
<div className="bg-black/40 p-2 rounded border border-zinc-800 group-hover:border-zinc-700 transition-colors">
<div className="text-zinc-500 text-[10px] uppercase">APY</div>
<div className="text-green-400 font-bold">{agent.apy}</div>
</div>
<div className="bg-black/40 p-2 rounded border border-zinc-800 group-hover:border-zinc-700 transition-colors">
<div className="text-zinc-500 text-[10px] uppercase">Win Rate</div>
<div className={`font-bold ${agent.color}`}>{agent.winRate}</div>
</div>
<div className="bg-black/40 p-2 rounded border border-zinc-800 group-hover:border-zinc-700 transition-colors">
<div className="text-zinc-500 text-[10px] uppercase">Risk</div>
<div className="text-white font-bold">{agent.exposure}</div>
</div>
</div>
{/* Visual Asset (Avatar or Abstract Icon) */}
<div className="absolute right-[-20px] bottom-[-20px] opacity-10 group-hover:opacity-20 transition-all duration-500 group-hover:scale-110 pointer-events-none">
{agent.avatar ? (
<img
src={agent.avatar}
alt="Agent"
className="w-40 h-40 object-cover grayscale mix-blend-screen"
/>
) : (
Icon && <Icon strokeWidth={1} className={`w-40 h-40 ${agent.color}`} />
)}
</div>
{/* Action */}
<button className={`w-full py-3 font-bold uppercase tracking-wider text-sm transition-colors ${i === 0
? 'bg-nofx-gold text-black hover:bg-white'
: 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700'
}`}>
Initialize Agent
</button>
{/* Decorative Background Elements */}
<div className="absolute -right-10 -bottom-10 w-40 h-40 bg-gradient-to-br from-white/5 to-transparent rounded-full blur-2xl group-hover:opacity-50 transition-opacity opacity-20"></div>
<div className="absolute inset-0 bg-scanlines opacity-20 pointer-events-none"></div>
</motion.div>
)
web/src/components/landing/core/LiveFeed.tsx
+93 -44
View File
@@ -1,63 +1,112 @@
import { motion } from 'framer-motion'
import { Activity, BarChart3, Globe } from 'lucide-react'
import { Activity, BarChart3, Globe, Wifi, Server, Database, Lock } from 'lucide-react'
import { useState, useEffect } from 'react'
// Mock Data for "Live" Feed
const logs = [
{ time: "14:02:23", type: "EXE", msg: "Bot-Alpha executed BUY BTC-USDT @ 64230.50", color: "text-green-500" },
{ time: "14:02:24", type: "SIG", msg: "High vol detected in ETH-PERP. Signal strength: 0.89", color: "text-nofx-gold" },
{ time: "14:02:25", type: "NET", msg: "Block propagation delay < 2ms", color: "text-zinc-500" },
{ time: "14:02:27", type: "EXE", msg: "Bot-Beta executed SELL SOL-USDT @ 145.20", color: "text-red-500" },
{ time: "14:02:28", type: "SYS", msg: "Memory pool optimization complete.", color: "text-nofx-accent" },
{ time: "14:02:30", type: "ARB", msg: "Arbitrage opportunity found: BINANCE vs BYBIT (0.4%)", color: "text-blue-400" },
]
const generateLog = (id) => {
const types = ['EXE', 'ARB', 'LIQ', 'NET', 'SYS']
const pairs = ['BTC-USDT', 'ETH-PERP', 'SOL-USDT', 'BNB-BUSD']
const actions = ['BUY', 'SELL', 'SHORT', 'LONG']
const type = types[Math.floor(Math.random() * types.length)]
let msg = ''
let color = ''
switch (type) {
case 'EXE':
msg = `BOT-${Math.floor(Math.random() * 99)} ${actions[Math.floor(Math.random() * 4)]} ${pairs[Math.floor(Math.random() * 4)]} @ ${Math.floor(Math.random() * 60000)}`
color = 'text-green-500'
break;
case 'ARB':
msg = `Spread detected: BINANCE <> BYBIT (${(Math.random()).toFixed(3)}%)`
color = 'text-nofx-gold'
break;
case 'LIQ':
msg = `Liquidation Alert: ${pairs[Math.floor(Math.random() * 4)]} $${Math.floor(Math.random() * 100)}k REKT`
color = 'text-red-500'
break;
case 'NET':
msg = `Block propagation latency < ${Math.floor(Math.random() * 10)}ms`
color = 'text-zinc-500'
break;
default:
msg = `System optimization cycle complete. Allocating resources.`
color = 'text-blue-400'
}
return { id, time: new Date().toLocaleTimeString('en-US', { hour12: false }) + '.' + Math.floor(Math.random() * 999), type, msg, color }
}
export default function LiveFeed() {
return (
<section className="w-full bg-black border-y border-zinc-800 py-4 overflow-hidden">
<div className="max-w-[1920px] mx-auto px-6 flex flex-col md:flex-row gap-6">
const [logs, setLogs] = useState([])
{/* Left Status Panel */}
<div className="w-full md:w-1/3 flex items-center justify-between md:justify-start gap-8 text-xs font-mono text-zinc-500 border-b md:border-b-0 md:border-r border-zinc-900 pb-4 md:pb-0">
<div className="flex items-center gap-3">
<Activity className="w-4 h-4 text-nofx-gold" />
<div>
<div className="text-zinc-300 font-bold">SYSTEM LOAD</div>
<div className="text-nofx-gold">42%</div>
</div>
useEffect(() => {
// Initial population
const initialLogs = Array.from({ length: 8 }).map((_, i) => generateLog(i))
setLogs(initialLogs)
const interval = setInterval(() => {
setLogs(prev => {
const newLog = generateLog(Date.now())
return [newLog, ...prev.slice(0, 7)]
})
}, 800) // Fast 800ms updates for HFT feel
return () => clearInterval(interval)
}, [])
return (
<section className="w-full bg-[#020304] border-y border-zinc-800 py-1 overflow-hidden relative">
<div className="absolute inset-0 bg-scanlines opacity-10 pointer-events-none"></div>
<div className="max-w-[1920px] mx-auto px-4 flex flex-col md:flex-row gap-0 md:gap-8 items-stretch h-[320px] md:h-12 text-xs font-mono">
{/* Left Status Bar (Static) */}
<div className="hidden md:flex items-center gap-6 text-zinc-600 border-r border-zinc-900 pr-6 shrink-0">
<div className="flex items-center gap-2">
<div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
<span className="font-bold text-zinc-400">WS_CONN: STABLE</span>
</div>
<div className="flex items-center gap-3">
<Globe className="w-4 h-4 text-nofx-accent" />
<div>
<div className="text-zinc-300 font-bold">ACTIVE NODES</div>
<div className="text-nofx-accent">8,249</div>
</div>
</div>
<div className="flex items-center gap-3">
<BarChart3 className="w-4 h-4 text-green-500" />
<div>
<div className="text-zinc-300 font-bold">24H VOL</div>
<div className="text-green-500">$4.2B</div>
</div>
<div className="flex items-center gap-2">
<span className="text-nofx-gold">TPS: 48,291</span>
</div>
</div>
{/* Right Scrolling Log */}
<div className="flex-1 font-mono text-xs md:text-sm h-32 md:h-12 overflow-hidden relative mask-image-b">
<div className="absolute inset-0 flex flex-col gap-1 animate-slide-up">
{logs.map((log, i) => (
{/* Right Scrolling Log - Vertical on mobile, Single line ticker on Desktop */}
<div className="flex-1 overflow-hidden relative font-mono text-[10px] md:text-sm h-full flex items-center">
{/* Desktop View: Single Line Fade */}
<div className="hidden md:block w-full h-full relative">
{logs.slice(0, 1).map((log) => (
<motion.div
key={i}
initial={{ opacity: 0, x: -10 }}
key={log.id}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: i * 0.2 }}
className="flex gap-4"
className="absolute inset-0 flex items-center gap-4"
>
<span className="text-zinc-600">[{log.time}]</span>
<span className="text-zinc-400 font-bold w-8">{log.type}</span>
<span className={log.color}>{log.msg}</span>
<span className={`font-bold w-10 ${log.type === 'LIQ' ? 'text-red-500 bg-red-500/10 px-1 rounded' :
log.type === 'ARB' ? 'text-nofx-gold bg-nofx-gold/10 px-1 rounded' :
log.type === 'EXE' ? 'text-green-500' : 'text-zinc-500'
}`}>{log.type}</span>
<span className={`${log.color}`}>{log.msg}</span>
</motion.div>
))}
</div>
{/* Mobile View: Vertical Stack */}
<div className="md:hidden flex flex-col gap-2 w-full p-4 h-full overflow-hidden">
{logs.map((log) => (
<div key={log.id} className="flex gap-2 w-full truncate border-b border-zinc-900/50 pb-1 last:border-0">
<span className="text-zinc-700 w-16 shrink-0">{log.time.split('.')[0]}</span>
<span className={`font-bold w-8 shrink-0 ${log.type === 'LIQ' ? 'text-red-500' :
log.type === 'ARB' ? 'text-nofx-gold' :
'text-zinc-500'
}`}>{log.type}</span>
<span className={`${log.color} truncate`}>{log.msg}</span>
</div>
))}
</div>
</div>
</div>
web/src/components/landing/core/TerminalHero.tsx
+284 -184
View File
@@ -1,224 +1,324 @@
import { motion } from 'framer-motion'
import { ArrowRight, Terminal as TerminalIcon, Star, GitFork, Users, Activity, Layers, Cpu, Network } from 'lucide-react'
import { ArrowRight, Shield, Activity, CircuitBoard, Cpu, Wifi, Globe, Lock, Zap, Star, GitFork, Users, MessageCircle } from 'lucide-react'
import { useState, useEffect } from 'react'
import { OFFICIAL_LINKS } from '../../../constants/branding'
import { httpClient } from '../../../lib/httpClient'
import { useGitHubStats } from '../../../hooks/useGitHubStats'
export default function TerminalHero() {
const [text, setText] = useState('')
const [githubData, setGithubData] = useState({ stars: '9.4k', forks: '2.4k', subscribers: '74' })
const fullText = "INITIALIZING NOFX KERNEL... CRYPTO | STOCKS | FOREX | METALS... SYSTEM READY."
// Real-time price state
const [prices, setPrices] = useState<Record<string, string>>({
BTC: '...',
ETH: '...',
SOL: '...',
BNB: '...',
XRP: '...',
DOGE: '...',
ADA: '...',
AVAX: '...'
})
useEffect(() => {
// Typing effect
let i = 0
const timer = setInterval(() => {
setText(fullText.slice(0, i))
i++
if (i > fullText.length) clearInterval(timer)
}, 30)
const fetchPrices = async () => {
const symbols = ['BTC', 'ETH', 'SOL', 'BNB', 'XRP', 'DOGE', 'ADA', 'AVAX']
// Fetch GitHub Data
fetch('https://api.github.com/repos/NoFxAiOS/nofx')
.then(res => res.json())
.then(data => {
if (data.stargazers_count) {
setGithubData({
stars: (data.stargazers_count / 1000).toFixed(1) + 'k',
forks: (data.forks_count / 1000).toFixed(1) + 'k',
subscribers: data.subscribers_count?.toString() || '74'
})
}
})
.catch(err => console.error("Failed to fetch GitHub stats", err))
// We use Promise.all to fetch them in parallel for now, or sequentially if rate limited.
// Parallel is better for UI responsiveness.
try {
const results = await Promise.all(symbols.map(async (sym) => {
try {
const res = await httpClient.get(`/api/klines?symbol=${sym}USDT&interval=1m&limit=1`)
if (res.success && res.data?.length > 0) {
const closePrice = parseFloat(res.data[0].close)
// Format price: < 1 use 4 decimals, > 1 use 2
const formatted = closePrice < 1
? closePrice.toFixed(4)
: closePrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
return { symbol: sym, price: formatted }
}
} catch (err) {
// ignore individual failures
}
return null
}))
return () => clearInterval(timer)
const newPrices: Record<string, string> = {}
results.forEach(r => {
if (r) newPrices[r.symbol] = r.price
})
setPrices(prev => ({ ...prev, ...newPrices }))
} catch (e) {
console.error("Failed to fetch market prices", e)
}
}
fetchPrices()
const interval = setInterval(fetchPrices, 5000)
return () => clearInterval(interval)
}, [])
return (
<section className="relative w-full min-h-screen bg-nofx-bg text-nofx-text overflow-hidden flex flex-col items-center justify-center pt-20">
<section className="relative w-full min-h-screen bg-nofx-bg text-nofx-text overflow-hidden flex flex-col pt-20">
{/* 1. ARCHITECTURAL BACKGROUND / HOLOGRAPHIC CONSTRUCT */}
<div className="absolute inset-0 z-0 overflow-hidden pointer-events-none select-none">
{/* BACKGROUND LAYERS */}
{/* 1. Grid */}
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-soft-light pointer-events-none"></div>
<div className="absolute inset-0 bg-grid-pattern opacity-[0.03] pointer-events-none"></div>
{/* The Mascot "Ghost" in the Machine - PREMIUM & CLEAN */}
<div className="absolute right-0 bottom-0 w-[80vw] lg:w-[45vw] h-[85vh] opacity-90 mix-blend-normal flex items-end justify-end">
<div className="relative w-full h-full">
<img
src="/images/nofx_mascot.png"
alt=""
className="w-full h-full object-contain object-bottom drop-shadow-[0_0_50px_rgba(240,185,11,0.2)]"
style={{
maskImage: 'linear-gradient(to top, black 60%, transparent 100%)',
filter: 'grayscale(100%) contrast(110%) brightness(110%) sepia(20%) hue-rotate(320deg)'
}}
/>
{/* 2. World Map / Data Viz Background (Abstract) */}
<div className="absolute inset-0 flex items-center justify-center opacity-10 pointer-events-none">
<div className="w-[80vw] h-[80vw] rounded-full border border-nofx-gold/20 animate-pulse-slow"></div>
<div className="absolute w-[60vw] h-[60vw] rounded-full border border-dashed border-nofx-accent/20 animate-[spin_60s_linear_infinite]"></div>
</div>
{/* Clean Horizontal Scanline Overlay */}
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSIxIiBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuMykiIC8+Cjwvc3ZnPg==')] opacity-50 mix-blend-overlay pointer-events-none" />
{/* 3. Gradient Spots */}
<div className="absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-nofx-gold/10 rounded-full blur-[120px] pointer-events-none"></div>
<div className="absolute bottom-[-10%] right-[-10%] w-[40vw] h-[40vw] bg-nofx-accent/5 rounded-full blur-[120px] pointer-events-none"></div>
{/* Subtle Glow Behind */}
<div className="absolute right-10 bottom-10 w-64 h-64 bg-nofx-gold/20 rounded-full blur-[100px] -z-10" />
{/* CONTENT GRID */}
<div className="relative z-10 flex-1 grid grid-cols-1 lg:grid-cols-12 gap-0 lg:gap-8 max-w-[1800px] mx-auto w-full px-6 h-full pb-20 pt-10 pointer-events-none">
{/* LEFT COLUMN: TELEMETRY & STATUS */}
<div className="hidden lg:flex col-span-3 flex-col justify-between h-full border-r border-white/5 pr-8 py-10 pointer-events-auto">
{/* Top: System Health */}
<div className="space-y-6">
<div className="tech-border p-4 bg-black/40 backdrop-blur-sm">
<h3 className="text-xs font-mono text-nofx-gold mb-4 flex items-center gap-2">
<Activity className="w-3 h-3" /> SYSTEM_DIAGNOSTICS
</h3>
<div className="space-y-3 font-mono text-[10px] text-zinc-400">
<div className="flex justify-between items-center">
<span>KERNEL_LATENCY</span>
<span className="text-nofx-accent">12ms</span>
</div>
<div className="w-full h-1 bg-zinc-800 rounded-full overflow-hidden">
<div className="w-[90%] h-full bg-nofx-accent/50"></div>
</div>
<div className="flex justify-between items-center">
<span>MEMORY_INTEGRITY</span>
<span className="text-nofx-success">100%</span>
</div>
<div className="w-full h-1 bg-zinc-800 rounded-full overflow-hidden">
<div className="w-full h-full bg-nofx-success/50"></div>
</div>
<div className="flex justify-between items-center">
<span>UPTIME</span>
<span className="text-white">99.999%</span>
</div>
</div>
</div>
<div className="p-4 border border-zinc-800/50 rounded bg-zinc-900/20">
<div className="flex items-center gap-3 text-zinc-500 mb-2">
<Shield className="w-4 h-4" />
<span className="text-[10px] font-mono tracking-widest">SECURITY PROTOCOLS</span>
</div>
<div className="flex gap-1">
<div className="h-1 flex-1 bg-nofx-gold"></div>
<div className="h-1 flex-1 bg-nofx-gold"></div>
<div className="h-1 flex-1 bg-nofx-gold"></div>
<div className="h-1 flex-1 bg-zinc-800"></div>
</div>
<div className="mt-2 text-right text-[10px] text-nofx-gold/80 font-mono">LEVEL 3 ACTIVATE</div>
</div>
</div>
{/* Bottom: Network Log */}
<div className="font-mono text-[10px] text-zinc-600 space-y-1 opacity-70">
<div>&gt; CONNECTING TO MAINNET... OK</div>
<div>&gt; SYNCING NODES (424/424)... OK</div>
<div>&gt; LOADING ASSETS... DONE</div>
<div className="animate-pulse">&gt; AWAITING USER INPUT_</div>
</div>
</div>
{/* Clean Geometric Grid */}
<svg className="absolute inset-0 w-full h-full opacity-10" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-zinc-500" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
</div>
{/* CENTER COLUMN: MAIN ACTION */}
<div className="col-span-1 lg:col-span-6 flex flex-col items-center justify-center text-center relative z-20 pointer-events-auto">
<div className="relative z-10 flex flex-col items-center text-center max-w-[1400px] px-6 w-full h-full justify-center">
{/* Project Identity Chip */}
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
className="mb-8 inline-flex items-center gap-3 px-4 py-2 rounded-full border border-nofx-gold/20 bg-nofx-gold/5 backdrop-blur-md"
>
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-nofx-gold opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-nofx-gold"></span>
</span>
<span className="text-xs font-mono text-nofx-gold tracking-widest">NOFX OPEN-SOURCE AGENTIC OS</span>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-center">
{/* Main Title - Massive & Impactful */}
<h1 className="text-6xl md:text-8xl lg:text-9xl font-black tracking-tighter leading-[0.8] mb-6 select-none bg-clip-text text-transparent bg-gradient-to-b from-white via-white to-zinc-600">
AGENTIC<br />
<span className="text-stroke-1 text-transparent bg-clip-text bg-gradient-to-r from-nofx-gold via-white to-nofx-gold animate-shimmer bg-[length:200%_auto]">TRADING</span>
</h1>
{/* LEFT COLUMN: Main System Interface */}
<div className="col-span-1 lg:col-span-8 text-left z-30 flex flex-col justify-center h-full">
<p className="max-w-xl text-zinc-400 text-lg mb-10 font-light leading-relaxed">
The World's First Open-Source Agentic Trading OS.
Deploy autonomous high-frequency trading agents powered by advanced LLMs.
</p>
{/* System Status Tag */}
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="flex flex-wrap items-center gap-3 mb-8"
{/* Command Line Input Simulation */}
<div className="w-full max-w-lg h-12 bg-black/50 border border-zinc-800 rounded flex items-center px-4 mb-10 font-mono text-sm shadow-2xl backdrop-blur-sm group hover:border-nofx-gold/50 transition-colors cursor-text" onClick={() => document.getElementById('market-scanner')?.scrollIntoView({ behavior: 'smooth' })}>
<span className="text-nofx-success mr-2">➜</span>
<span className="text-nofx-accent mr-2">~</span>
<span className="text-zinc-500">deploy agent --strategy=hft</span>
<span className="w-2 h-4 bg-nofx-gold ml-1 animate-pulse"></span>
</div>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4 w-full justify-center">
<button
onClick={() => document.getElementById('market-scanner')?.scrollIntoView({ behavior: 'smooth' })}
className="group relative overflow-hidden bg-nofx-gold text-black px-8 py-4 font-bold font-mono tracking-wider hover:scale-105 transition-transform duration-200"
style={{ clipPath: 'polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%)' }}
>
<div className="px-3 py-1 border border-nofx-gold/30 bg-nofx-gold/5 rounded-sm text-nofx-gold text-xs font-mono flex items-center gap-2 shadow-[0_0_15px_rgba(240,185,11,0.2)]">
<div className="w-1.5 h-1.5 bg-nofx-gold rounded-full animate-pulse" />
SYSTEM ONLINE
</div>
</motion.div>
<span className="relative z-10 flex items-center gap-2">
INITIALIZE PROTOCOL <ArrowRight className="w-4 h-4" />
</span>
<div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
</button>
</div>
{/* Main Headline with Project Specifics */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.2 }}
className="relative"
>
<h1 className="text-6xl md:text-8xl xl:text-9xl font-black tracking-tighter leading-[0.85] mb-8 text-white">
AGENTIC <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-nofx-gold via-white to-nofx-gold animate-shimmer bg-[length:200%_100%]">TRADING OS</span>
</h1>
{/* Community Stats Row */}
<CommunityStats />
{/* SVG Connector Line */}
<div className="absolute -left-10 top-2 bottom-2 w-px bg-zinc-800 hidden lg:block">
<div className="absolute top-0 left-[-1px] w-[3px] h-8 bg-nofx-gold" />
<div className="absolute bottom-0 left-[-1px] w-[3px] h-8 bg-zinc-600" />
</div>
</motion.div>
</div>
</div>
{/* Typing Terminal Output */}
<div className="h-24 mb-10 font-mono text-zinc-400 text-sm flex flex-col justify-start gap-3 max-w-2xl border-l-2 border-zinc-800 pl-6">
<div className="flex items-center gap-2 text-nofx-gold">
<span>&gt;</span> {text}<span className="animate-pulse bg-nofx-gold w-2 h-4 block"></span>
</div>
{/* RIGHT COLUMN: HOLOGRAPHIC DISPLAY - Absolute Overlay for "Far Right" Effect */}
<div className="absolute top-0 right-0 h-full w-[45vw] hidden lg:flex pointer-events-none items-center justify-center z-0">
<div className="relative w-full h-full flex items-center justify-center perspective-1000">
{/* 3D Hologram Effect Container */}
<div className="relative w-full h-[90%] flex items-center justify-center transform-style-3d rotate-y-[-12deg]">
{/* Clean Markets Row */}
<div className="flex gap-6 text-[10px] md:text-xs text-zinc-500 font-bold tracking-widest uppercase">
<span className="flex items-center gap-2 hover:text-white transition-colors"><Network className="w-3 h-3" /> CRYPTO</span>
<span className="flex items-center gap-2 hover:text-white transition-colors"><Activity className="w-3 h-3" /> STOCKS</span>
<span className="flex items-center gap-2 hover:text-white transition-colors"><Layers className="w-3 h-3" /> FOREX</span>
<span className="flex items-center gap-2 hover:text-white transition-colors"><Cpu className="w-3 h-3" /> METALS</span>
</div>
</div>
{/* Scanning Grid behind Mascot */}
<div className="absolute inset-x-0 top-[10%] bottom-[10%] bg-[linear-gradient(rgba(0,240,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.05)_1px,transparent_1px)] bg-[size:20px_20px] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_80%)]"></div>
{/* Primary Actions */}
<div className="flex flex-col sm:flex-row gap-4 w-full max-w-lg">
<button
onClick={() => document.getElementById('market-scanner')?.scrollIntoView({ behavior: 'smooth' })}
className="group relative px-8 py-4 bg-nofx-gold text-black font-bold font-mono hover:bg-white transition-all flex items-center justify-between min-w-[200px] hover:shadow-[0_0_20px_rgba(240,185,11,0.4)]"
style={{ clipPath: 'polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0% 100%)' }}
>
<span>DEPLOY TRADERS</span>
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</button>
<a
href={OFFICIAL_LINKS.github}
target="_blank"
rel="noreferrer"
className="px-8 py-4 border border-zinc-700 bg-black/50 backdrop-blur-sm text-zinc-300 font-mono hover:border-nofx-accent hover:text-nofx-accent transition-all flex items-center justify-between min-w-[200px]"
style={{ clipPath: 'polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0% 80%)' }}
>
<span>SOURCE CODE</span>
<TerminalIcon className="w-4 h-4" />
</a>
{/* The Mascot Image with Glitch/Holo Effects */}
<div className="relative z-10 w-full h-full opacity-90 transition-all duration-500 hover:opacity-100 group flex flex-col justify-end pointer-events-auto">
<div className="absolute inset-0 bg-nofx-accent/10 blur-[80px] rounded-full animate-pulse-slow transition-colors duration-500 group-hover:bg-nofx-gold/40"></div>
<img
src="/images/nofx_mascot.png"
alt="Agent NoFX"
className="w-full h-full object-contain object-bottom filter drop-shadow-[0_0_25px_rgba(0,240,255,0.2)] contrast-110 saturate-0 group-hover:saturate-100 group-hover:drop-shadow-[0_0_35px_rgba(234,179,8,0.5)] transition-all duration-500"
style={{ maskImage: 'linear-gradient(to bottom, black 90%, transparent 100%)' }}
/>
{/* Holo Scan Line */}
<div className="absolute w-full h-2 bg-nofx-accent/30 drop-shadow-[0_0_10px_rgba(0,240,255,0.8)] top-0 animate-scan-fast pointer-events-none"></div>
</div>
</div>
{/* RIGHT COLUMN: Modules & Data HUD */}
<div className="col-span-1 lg:col-span-4 flex flex-col gap-6 mt-12 lg:mt-0 z-20">
{/* Floating Data Widgets around Hologram */}
<motion.div
animate={{ y: [0, -10, 0] }}
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
className="absolute top-[30%] left-[10%] bg-black/80 border border-nofx-accent/30 p-2 rounded backdrop-blur-md shadow-neon-blue"
>
<Cpu className="w-5 h-5 text-nofx-accent" />
</motion.div>
{/* Module 1: GitHub Intelligence */}
<div className="border border-zinc-800 bg-black/80 backdrop-blur-md p-6 relative group overflow-hidden">
<div className="absolute top-0 right-0 w-20 h-20 bg-nofx-gold/5 rounded-bl-full -mr-10 -mt-10 transition-transform group-hover:scale-150" />
<div className="flex justify-between items-start mb-4">
<div className="text-xs font-mono text-zinc-500 flex items-center gap-2">
<Users className="w-4 h-4 text-nofx-gold" /> COMMUNITY UPLINK
</div>
<div className="flex gap-1">
<div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" />
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<div className="text-2xl font-bold text-white flex items-center gap-1">
{githubData.stars} <Star className="w-3 h-3 text-nofx-gold fill-nofx-gold" />
</div>
<div className="text-[10px] text-zinc-500 uppercase tracking-wider">Active Star-gazers</div>
</div>
<div>
<div className="text-2xl font-bold text-white flex items-center gap-1">
{githubData.forks} <GitFork className="w-3 h-3 text-zinc-500" />
</div>
<div className="text-[10px] text-zinc-500 uppercase tracking-wider">Protocol Forks</div>
</div>
</div>
</div>
{/* Module 2: System Capabilities (Specific to NoFX) */}
<div className="border border-zinc-800 bg-black/60 backdrop-blur-sm p-6 space-y-3 hidden md:block">
<div className="text-xs font-mono text-zinc-500 mb-2">ACTIVE MODULES</div>
<div className="flex justify-between items-center text-sm font-mono border-b border-zinc-900 pb-2">
<span className="text-zinc-300">STRATEGY STUDIO</span>
<span className="text-green-500 text-xs">READY</span>
</div>
<div className="flex justify-between items-center text-sm font-mono border-b border-zinc-900 pb-2">
<span className="text-zinc-300">DEBATE ARENA</span>
<span className="text-green-500 text-xs text-nofx-accent animate-pulse">Running</span>
</div>
<div className="flex justify-between items-center text-sm font-mono pb-2">
<span className="text-zinc-300">BACKTEST LAB</span>
<span className="text-zinc-500 text-xs">Idle</span>
</div>
</div>
</div>
<motion.div
animate={{ y: [0, 10, 0] }}
transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 1 }}
className="absolute bottom-[20%] right-[20%] bg-black/80 border border-nofx-gold/30 p-2 rounded backdrop-blur-md shadow-neon"
>
<Lock className="w-5 h-5 text-nofx-gold" />
</motion.div>
</div>
</div>
{/* Decorative Footer */}
<div className="absolute bottom-0 w-full border-t border-zinc-800 bg-black/90 backdrop-blur-md p-3 flex flex-wrap justify-between items-center text-[10px] md:text-xs text-zinc-500 font-mono z-20">
<div className="flex gap-6 px-4">
<span className="flex items-center gap-2">
<div className="w-2 h-2 bg-nofx-gold/50 rounded-full" />
NOFX-OS
</span>
<span className="hidden sm:inline">24H VOL: $42.8M</span>
<span className="hidden sm:inline">ACTIVE AGENTS: 1,024</span>
</div>
<div className="px-4 flex gap-4">
<span className="text-nofx-gold">ENCRYPTED CONNECTION</span>
{/* FLOATING TICKER FOOTER */}
<div className="absolute bottom-0 w-full bg-black/80 border-t border-zinc-800/50 backdrop-blur-md z-30 overflow-hidden py-2 flex items-center">
<div className="flex animate-marquee whitespace-nowrap gap-12 text-xs font-mono text-zinc-500 px-4">
<span className="flex items-center gap-2"><Globe className="w-3 h-3 text-zinc-600" /> GLOBAL MARKET ACCESS</span>
<span className="flex items-center gap-2 text-nofx-gold"><Zap className="w-3 h-3" /> FLASH LOANS ENABLED</span>
<span className="flex items-center gap-2"><Wifi className="w-3 h-3 text-green-500" /> LOW LATENCY LINK: 12ms</span>
{/* Dynamic Coins */}
{Object.entries(prices).map(([symbol, price]) => (
<span key={symbol} className="flex items-center gap-2">
{symbol.toUpperCase()}/USDT <span className="text-nofx-success">${price}</span>
</span>
))}
<span className="flex items-center gap-2"><CircuitBoard className="w-3 h-3 text-nofx-accent" /> AI MODEL: GEMINI-PRO-1.5</span>
{/* Duplicate sequence for seamless loop effect (basic set) */}
{Object.entries(prices).map(([symbol, price]) => (
<span key={`${symbol} -dup`} className="flex items-center gap-2 md:hidden">
{symbol.toUpperCase()}/USDT <span className="text-nofx-success">${price}</span>
</span>
))}
</div>
</div>
</section>
{/* CRT OVERLAY (Global) */}
<div className="absolute inset-0 crt-overlay pointer-events-none z-50 opacity-40"></div>
</section >
)
}
import { OFFICIAL_LINKS } from '../../../constants/branding'
function CommunityStats() {
const { stars, forks, contributors, isLoading, error } = useGitHubStats('tinkle-community', 'nofx')
const stats = [
{
label: 'GITHUB STARS',
value: isLoading ? '...' : (error ? '1.2k+' : stars.toLocaleString()),
icon: Star,
color: 'text-yellow-400',
href: OFFICIAL_LINKS.github
},
{
label: 'FORKS',
value: isLoading ? '...' : (error ? '240+' : forks.toLocaleString()),
icon: GitFork,
color: 'text-blue-400',
href: `${OFFICIAL_LINKS.github}/fork`
},
{
label: 'CONTRIBUTORS',
value: isLoading ? '...' : (contributors > 0 ? contributors : '50+'),
icon: Users,
color: 'text-green-400',
href: `${OFFICIAL_LINKS.github}/graphs/contributors`
},
{
label: 'DEV COMMUNITY',
value: '5,800+', // Hardcoded as per user request
icon: MessageCircle,
color: 'text-blue-500',
href: OFFICIAL_LINKS.telegram
}
]
return (
<div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-4 w-full max-w-4xl">
{stats.map((stat, i) => (
<a
key={i}
href={stat.href}
target="_blank"
rel="noopener noreferrer"
className="flex flex-col items-center justify-center p-3 rounded bg-black/40 border border-zinc-800/50 backdrop-blur-sm group hover:border-nofx-gold/30 transition-all cursor-pointer hover:bg-white/5"
>
<div className="flex items-center gap-2 mb-1">
<stat.icon className={`w-4 h-4 ${stat.color}`} />
<span className="text-[10px] font-mono text-zinc-500 tracking-wider">{stat.label}</span>
</div>
<span className="text-xl font-bold font-mono text-white group-hover:text-nofx-gold transition-colors">{stat.value}</span>
</a>
))}
</div>
)
}
web/src/hooks/useGitHubStats.ts
+39 -11
View File
@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react'
interface GitHubStats {
stars: number
forks: number
contributors: number
createdAt: string
daysOld: number
isLoading: boolean
@@ -13,6 +14,7 @@ export function useGitHubStats(owner: string, repo: string): GitHubStats {
const [stats, setStats] = useState<GitHubStats>({
stars: 0,
forks: 0,
contributors: 0,
createdAt: '',
daysOld: 0,
isLoading: true,
@@ -22,26 +24,52 @@ export function useGitHubStats(owner: string, repo: string): GitHubStats {
useEffect(() => {
const fetchGitHubStats = async () => {
try {
const response = await fetch(
`https://api.github.com/repos/${owner}/${repo}`
)
// Fetch basic repo info
const repoRes = await fetch(`https://api.github.com/repos/${owner}/${repo}`)
if (!repoRes.ok) throw new Error('Failed to fetch GitHub stats')
const repoData = await repoRes.json()
if (!response.ok) {
throw new Error('Failed to fetch GitHub stats')
// Fetch contributors count (using Link header trick for large numbers, or length for small)
// Since we can't easily parse Link header in client-side without exposing logic,
// we'll try a rough count or just a list length valid for first page (max 30 or 100).
// For a more accurate count without pagination, we often check the 'Link' header of:
// https://api.github.com/repos/{owner}/{repo}/contributors?per_page=1&anon=true
let contributorsCount = 0
try {
const contribRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors?per_page=1&anon=true`)
const linkHeader = contribRes.headers.get('Link')
if (linkHeader) {
const match = linkHeader.match(/page=(\d+)>; rel="last"/)
if (match) {
contributorsCount = parseInt(match[1])
}
}
// If no link header, it means 1 page.
if (contributorsCount === 0 && contribRes.ok) {
// Fetch list to count (default page size 30)
// actually per_page=1 returns 1.
// We should fetch with per_page=100 to get exact count if <100.
const listRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors?per_page=100&anon=true`)
if (listRes.ok) {
const list = await listRes.json()
contributorsCount = list.length
}
}
} catch (e) {
console.warn('Failed to fetch contributors:', e)
}
const data = await response.json()
// Calculate days since creation
const createdDate = new Date(data.created_at)
const createdDate = new Date(repoData.created_at)
const now = new Date()
const diffTime = Math.abs(now.getTime() - createdDate.getTime())
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
setStats({
stars: data.stargazers_count,
forks: data.forks_count,
createdAt: data.created_at,
stars: repoData.stargazers_count,
forks: repoData.forks_count,
contributors: contributorsCount > 0 ? contributorsCount : 0, // Fallback
createdAt: repoData.created_at,
daysOld: diffDays,
isLoading: false,
error: null,
web/src/index.css
+86 -23
View File
@@ -13,21 +13,27 @@ html {
:root {
/* NoFX Neo-Gold Design System */
--nofx-gold: #F0B90B;
--nofx-bg: #0B0E11;
--nofx-bg: #05070A;
--nofx-accent: #00F0FF;
--nofx-glass: rgba(30, 35, 41, 0.6);
--nofx-glass: rgba(5, 7, 10, 0.7);
--nofx-border: rgba(240, 185, 11, 0.2);
--background: #0B0E11;
--header-bg: rgba(11, 14, 17, 0.9);
/* Glass header */
--glass-bg: rgba(11, 14, 17, 0.6);
--glass-border: rgba(240, 185, 11, 0.1);
/* Cinematic Glows */
--glow-primary: 0 0 20px rgba(240, 185, 11, 0.3);
--glow-accent: 0 0 20px rgba(0, 240, 255, 0.3);
--glow-text: 0 0 10px rgba(240, 185, 11, 0.5);
--panel-bg: #15181D;
--panel-bg-hover: #1E2329;
--panel-border: rgba(255, 255, 255, 0.08);
--panel-border-hover: rgba(240, 185, 11, 0.4);
--background: #05070A;
--header-bg: rgba(2, 3, 4, 0.85);
/* Deep Abyssal */
--glass-bg: rgba(5, 7, 10, 0.4);
--glass-border: rgba(255, 255, 255, 0.08);
--panel-bg: rgba(14, 18, 23, 0.6);
--panel-bg-hover: rgba(20, 24, 29, 0.8);
--panel-border: rgba(255, 255, 255, 0.1);
--panel-border-hover: rgba(240, 185, 11, 0.5);
--foreground: #EAECEF;
--text-primary: #EAECEF;
@@ -42,19 +48,15 @@ html {
--binance-red: #F6465D;
--binance-red-bg: rgba(246, 70, 93, 0.12);
--binance-red-border: rgba(246, 70, 93, 0.3);
--binance-yellow: #F0B90B;
/* Shadows */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-glow: 0 0 20px rgba(240, 185, 11, 0.2);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
--shadow-glow: 0 0 30px rgba(240, 185, 11, 0.15);
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif;
font-family: 'IBM Plex Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
font-weight: 400;
color-scheme: dark;
@@ -64,8 +66,69 @@ html {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'tnum';
font-variant-numeric: tabular-nums;
}
/* CRT & Tech Effects */
.crt-overlay {
background:
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
.tech-border {
position: relative;
background: rgba(5, 7, 10, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tech-border::before,
.tech-border::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 1px solid var(--nofx-gold);
transition: all 0.3s ease;
}
.tech-border::before {
top: -1px;
left: -1px;
border-right: none;
border-bottom: none;
}
.tech-border::after {
bottom: -1px;
right: -1px;
border-left: none;
border-top: none;
}
.tech-border:hover::before,
.tech-border:hover::after {
width: 100%;
height: 100%;
opacity: 0.5;
}
.bg-vignette {
background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.6) 80%, #000000 100%);
pointer-events: none;
}
.text-glow {
text-shadow: 0 0 10px rgba(240, 185, 11, 0.6);
}
.text-glow-accent {
text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}
.border-glow {
box-shadow: 0 0 15px rgba(240, 185, 11, 0.2);
}
body {
@@ -73,7 +136,7 @@ body {
min-width: 320px;
min-height: 100vh;
background-color: var(--background);
background-image: none;
background-image: radial-gradient(circle at 50% 0%, #151921 0%, #05070a 60%);
background-attachment: fixed;
}
web/tailwind.config.js
+62 -5
View File
@@ -7,11 +7,68 @@ export default {
theme: {
extend: {
colors: {
'nofx-gold': '#F0B90B',
'nofx-gold-dim': 'rgba(240, 185, 11, 0.15)',
'nofx-bg': '#0B0E11',
'nofx-accent': '#00F0FF',
'nofx-text': '#EAECEF',
'nofx-gold': {
DEFAULT: '#F0B90B',
dim: 'rgba(240, 185, 11, 0.1)',
glow: 'rgba(240, 185, 11, 0.5)',
highlight: '#FFD700',
},
'nofx-bg': {
DEFAULT: '#05070A', // Deep Void
deeper: '#020304', // Abyssal
lighter: '#0E1217', // Surface
},
'nofx-accent': '#00F0FF', // Cyan Cyber
'nofx-text': {
DEFAULT: '#EAECEF',
muted: '#848E9C',
},
'nofx-success': '#0ECB81',
'nofx-danger': '#F6465D',
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui'],
mono: ['JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', 'monospace'],
},
backgroundImage: {
'gradient-radial': 'radial-gradient(circle at center, var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
'scanlines': "url(\"data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H4V2H0V0Z' fill='rgba(0,0,0,0.4)'/%3E%3C/svg%3E\")",
'grid-pattern': "linear-gradient(to right, #1f2937 1px, transparent 1px), linear-gradient(to bottom, #1f2937 1px, transparent 1px)",
},
animation: {
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'scan': 'scan 8s linear infinite',
'scan-fast': 'scan 2s linear infinite',
'float': 'float 6s ease-in-out infinite',
'glitch': 'glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite',
'shimmer': 'shimmer 2s linear infinite',
},
keyframes: {
scan: {
'0%': { backgroundPosition: '0 0' },
'100%': { backgroundPosition: '0 100%' },
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
},
glitch: {
'0%': { transform: 'translate(0)' },
'20%': { transform: 'translate(-2px, 2px)' },
'40%': { transform: 'translate(-2px, -2px)' },
'60%': { transform: 'translate(2px, 2px)' },
'80%': { transform: 'translate(2px, -2px)' },
'100%': { transform: 'translate(0)' },
},
shimmer: {
'0%': { backgroundPosition: '-200% 0' },
'100%': { backgroundPosition: '200% 0' },
},
},
boxShadow: {
'neon': '0 0 5px theme("colors.nofx-gold.DEFAULT"), 0 0 20px theme("colors.nofx-gold.dim")',
'neon-blue': '0 0 5px theme("colors.nofx-accent"), 0 0 20px rgba(0, 240, 255, 0.2)',
},
},
},