803 lines
27 KiB
TypeScript
803 lines
27 KiB
TypeScript
/**
|
|
* Alpha-Go - Hyper-Futuristic AI Platform (MCP-2099 Style)
|
|
*
|
|
* Theme: High-End Cyberpunk / Scientific Visualization
|
|
* Colors: Cyber-black (#050505) + Neon Orange (#ff4d00) + Neon Blue (#00f3ff)
|
|
* Fonts: Inter (UI), JetBrains Mono (data)
|
|
*
|
|
* Single-file implementation showcasing:
|
|
* - Particle sphere with breathing animation
|
|
* - Sentient core with distort material
|
|
* - Live terminal feed
|
|
* - Dashboard with Recharts
|
|
* - Cinematic loader with text scramble
|
|
*/
|
|
|
|
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
|
|
import { Canvas, useFrame } from '@react-three/fiber';
|
|
import { Stars, MeshDistortMaterial, Float, OrbitControls } from '@react-three/drei';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import {
|
|
AreaChart, Area, BarChart, Bar, XAxis, YAxis,
|
|
ResponsiveContainer, Tooltip, LineChart, Line
|
|
} from 'recharts';
|
|
import {
|
|
Cpu, Brain, Terminal, BarChart3, Shield, Activity,
|
|
Zap, Network, Database, Lock, Sun, Moon, ChevronRight,
|
|
Play, Pause, Settings, Bell, User
|
|
} from 'lucide-react';
|
|
import * as THREE from 'three';
|
|
|
|
// ============================================
|
|
// TYPES & INTERFACES
|
|
// ============================================
|
|
type ViewState = 'HERO' | 'NEURAL' | 'DASHBOARD' | 'LOGS';
|
|
|
|
interface LogEntry {
|
|
id: string;
|
|
timestamp: string;
|
|
level: 'INFO' | 'WARN' | 'SEC' | 'SYS' | 'DEBUG';
|
|
message: string;
|
|
}
|
|
|
|
interface MetricData {
|
|
time: string;
|
|
cpu: number;
|
|
memory: number;
|
|
network: number;
|
|
gpu: number;
|
|
}
|
|
|
|
// ============================================
|
|
// CONSTANTS
|
|
// ============================================
|
|
const COLORS = {
|
|
cyberBlack: '#050505',
|
|
surface: '#0a0a0a',
|
|
neonOrange: '#ff4d00',
|
|
neonBlue: '#00f3ff',
|
|
neonPurple: '#a855f7',
|
|
glass: 'rgba(255, 255, 255, 0.05)',
|
|
border: 'rgba(255, 255, 255, 0.1)',
|
|
};
|
|
|
|
const SCRAMBLE_CHARS = '!<>-_\\/[]{}—=+*^?#________';
|
|
|
|
const LOG_TEMPLATES: Omit<LogEntry, 'id' | 'timestamp'>[] = [
|
|
{ level: 'SYS', message: 'Neural mesh synchronization: 847ms' },
|
|
{ level: 'INFO', message: 'Quantum buffer allocated: 2.4TB' },
|
|
{ level: 'WARN', message: 'Thermal threshold approaching' },
|
|
{ level: 'SEC', message: 'Encryption layer refreshed' },
|
|
{ level: 'DEBUG', message: 'GC pause: 12ms' },
|
|
{ level: 'INFO', message: 'Model inference: 3.2ms avg' },
|
|
{ level: 'SYS', message: 'Cache invalidation complete' },
|
|
{ level: 'SEC', message: 'Token rotation successful' },
|
|
];
|
|
|
|
// Generate mock performance data
|
|
const generateMetricData = (): MetricData[] => {
|
|
return Array.from({ length: 24 }, (_, i) => ({
|
|
time: `${i.toString().padStart(2, '0')}:00`,
|
|
cpu: 30 + Math.random() * 50,
|
|
memory: 40 + Math.random() * 40,
|
|
network: 10 + Math.random() * 70,
|
|
gpu: 20 + Math.random() * 60,
|
|
}));
|
|
};
|
|
|
|
// ============================================
|
|
// HOOKS
|
|
// ============================================
|
|
const useTextScramble = (text: string, active: boolean, speed: number = 30) => {
|
|
const [output, setOutput] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (!active) {
|
|
setOutput('');
|
|
return;
|
|
}
|
|
|
|
let iteration = 0;
|
|
const interval = setInterval(() => {
|
|
setOutput(
|
|
text.split('').map((char, i) => {
|
|
if (char === ' ') return ' ';
|
|
if (i < iteration) return char;
|
|
return SCRAMBLE_CHARS[Math.floor(Math.random() * SCRAMBLE_CHARS.length)];
|
|
}).join('')
|
|
);
|
|
|
|
if (iteration >= text.length) clearInterval(interval);
|
|
iteration += 1/3;
|
|
}, speed);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [text, active, speed]);
|
|
|
|
return output;
|
|
};
|
|
|
|
const useTerminal = (maxLogs: number = 50) => {
|
|
const [logs, setLogs] = useState<LogEntry[]>([]);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
const template = LOG_TEMPLATES[Math.floor(Math.random() * LOG_TEMPLATES.length)];
|
|
const newLog: LogEntry = {
|
|
id: `${Date.now()}-${Math.random()}`,
|
|
timestamp: new Date().toISOString().split('T')[1].split('.')[0],
|
|
...template,
|
|
};
|
|
setLogs(prev => [...prev.slice(-maxLogs + 1), newLog]);
|
|
}, 1200);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [maxLogs]);
|
|
|
|
return logs;
|
|
};
|
|
|
|
// ============================================
|
|
// 3D COMPONENTS
|
|
// ============================================
|
|
const BreathingParticleSphere: React.FC<{ color?: string; count?: number }> = ({
|
|
color = '#ff4d00',
|
|
count = 3000
|
|
}) => {
|
|
const pointsRef = useRef<THREE.Points>(null);
|
|
|
|
const { positions, originalPositions } = useMemo(() => {
|
|
const pos = new Float32Array(count * 3);
|
|
const orig = new Float32Array(count * 3);
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const theta = Math.random() * Math.PI * 2;
|
|
const phi = Math.acos(Math.random() * 2 - 1);
|
|
const r = 2;
|
|
|
|
const x = r * Math.sin(phi) * Math.cos(theta);
|
|
const y = r * Math.sin(phi) * Math.sin(theta);
|
|
const z = r * Math.cos(phi);
|
|
|
|
pos[i * 3] = x;
|
|
pos[i * 3 + 1] = y;
|
|
pos[i * 3 + 2] = z;
|
|
|
|
orig[i * 3] = x;
|
|
orig[i * 3 + 1] = y;
|
|
orig[i * 3 + 2] = z;
|
|
}
|
|
|
|
return { positions: pos, originalPositions: orig };
|
|
}, [count]);
|
|
|
|
useFrame((state) => {
|
|
if (pointsRef.current) {
|
|
const time = state.clock.elapsedTime;
|
|
const positions = pointsRef.current.geometry.attributes.position.array as Float32Array;
|
|
|
|
// Breathing effect
|
|
const breathe = 1 + Math.sin(time * 0.5) * 0.1;
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
positions[i * 3] = originalPositions[i * 3] * breathe;
|
|
positions[i * 3 + 1] = originalPositions[i * 3 + 1] * breathe;
|
|
positions[i * 3 + 2] = originalPositions[i * 3 + 2] * breathe;
|
|
}
|
|
|
|
pointsRef.current.geometry.attributes.position.needsUpdate = true;
|
|
pointsRef.current.rotation.y += 0.001;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<points ref={pointsRef}>
|
|
<bufferGeometry>
|
|
<bufferAttribute
|
|
attach="attributes-position"
|
|
count={count}
|
|
array={positions}
|
|
itemSize={3}
|
|
/>
|
|
</bufferGeometry>
|
|
<pointsMaterial
|
|
size={0.015}
|
|
color={color}
|
|
transparent
|
|
opacity={0.8}
|
|
sizeAttenuation
|
|
/>
|
|
</points>
|
|
);
|
|
};
|
|
|
|
const SentientCore: React.FC = () => {
|
|
const meshRef = useRef<THREE.Mesh>(null);
|
|
|
|
useFrame((state) => {
|
|
if (meshRef.current) {
|
|
meshRef.current.rotation.y += 0.003;
|
|
meshRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.3) * 0.2;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<group>
|
|
{/* Main core */}
|
|
<Float speed={1.5} rotationIntensity={0.3} floatIntensity={0.3}>
|
|
<mesh ref={meshRef}>
|
|
<sphereGeometry args={[1.5, 64, 64]} />
|
|
<MeshDistortMaterial
|
|
color="#00f3ff"
|
|
wireframe
|
|
distort={0.4}
|
|
speed={2}
|
|
roughness={0}
|
|
/>
|
|
</mesh>
|
|
</Float>
|
|
|
|
{/* Inner glow sphere */}
|
|
<mesh>
|
|
<sphereGeometry args={[1.2, 32, 32]} />
|
|
<meshBasicMaterial color="#00f3ff" transparent opacity={0.1} />
|
|
</mesh>
|
|
|
|
{/* Orbital rings */}
|
|
<OrbitalRings />
|
|
</group>
|
|
);
|
|
};
|
|
|
|
const OrbitalRings: React.FC = () => {
|
|
const ring1Ref = useRef<THREE.Mesh>(null);
|
|
const ring2Ref = useRef<THREE.Mesh>(null);
|
|
|
|
useFrame((state) => {
|
|
if (ring1Ref.current) {
|
|
ring1Ref.current.rotation.z += 0.005;
|
|
}
|
|
if (ring2Ref.current) {
|
|
ring2Ref.current.rotation.x += 0.003;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<mesh ref={ring1Ref} rotation={[Math.PI / 4, 0, 0]}>
|
|
<torusGeometry args={[2.5, 0.02, 16, 100]} />
|
|
<meshBasicMaterial color="#ff4d00" transparent opacity={0.5} />
|
|
</mesh>
|
|
<mesh ref={ring2Ref} rotation={[0, Math.PI / 3, Math.PI / 6]}>
|
|
<torusGeometry args={[2.8, 0.015, 16, 100]} />
|
|
<meshBasicMaterial color="#00f3ff" transparent opacity={0.3} />
|
|
</mesh>
|
|
</>
|
|
);
|
|
};
|
|
|
|
// ============================================
|
|
// UI COMPONENTS
|
|
// ============================================
|
|
const GlassCard: React.FC<{
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
hover?: boolean;
|
|
}> = ({ children, className = '', hover = false }) => (
|
|
<motion.div
|
|
whileHover={hover ? { scale: 1.02, boxShadow: '0 0 30px rgba(255,77,0,0.2)' } : undefined}
|
|
className={`
|
|
bg-white/5 backdrop-blur-xl border border-white/10 rounded-lg
|
|
${className}
|
|
`}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
|
|
const StatCard: React.FC<{
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
value: string;
|
|
change?: string;
|
|
color?: string;
|
|
}> = ({ icon, label, value, change, color = '#ff4d00' }) => (
|
|
<GlassCard hover className="p-4">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="p-2 rounded-lg bg-white/5" style={{ color }}>
|
|
{icon}
|
|
</div>
|
|
{change && (
|
|
<span className={`text-xs font-mono ${change.startsWith('+') ? 'text-green-400' : 'text-red-400'}`}>
|
|
{change}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="font-mono text-2xl font-bold text-white">{value}</div>
|
|
<div className="font-mono text-xs text-zinc-500 uppercase mt-1">{label}</div>
|
|
</GlassCard>
|
|
);
|
|
|
|
const Terminal: React.FC<{ logs: LogEntry[]; expanded?: boolean }> = ({ logs, expanded = false }) => {
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (scrollRef.current) {
|
|
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
|
}
|
|
}, [logs]);
|
|
|
|
const levelColors: Record<LogEntry['level'], string> = {
|
|
INFO: 'text-[#00f3ff]',
|
|
WARN: 'text-yellow-400',
|
|
SEC: 'text-[#ff4d00]',
|
|
SYS: 'text-purple-400',
|
|
DEBUG: 'text-zinc-500',
|
|
};
|
|
|
|
return (
|
|
<GlassCard className={expanded ? 'h-full' : 'h-72'}>
|
|
<div className="flex items-center gap-2 px-4 py-3 border-b border-white/10">
|
|
<Terminal className="w-4 h-4 text-[#ff4d00]" />
|
|
<span className="font-mono text-xs uppercase tracking-wider text-zinc-400">
|
|
System Logs
|
|
</span>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
|
<span className="font-mono text-xs text-zinc-500">LIVE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
ref={scrollRef}
|
|
className="p-3 h-[calc(100%-48px)] overflow-y-auto font-mono text-xs space-y-1 scrollbar-hide"
|
|
>
|
|
{logs.map(log => (
|
|
<div key={log.id} className="flex gap-2 hover:bg-white/5 px-1 rounded">
|
|
<span className="text-zinc-600 w-16 shrink-0">{log.timestamp}</span>
|
|
<span className={`w-14 shrink-0 ${levelColors[log.level]}`}>[{log.level}]</span>
|
|
<span className="text-zinc-300">{log.message}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</GlassCard>
|
|
);
|
|
};
|
|
|
|
// ============================================
|
|
// CINEMATIC LOADER
|
|
// ============================================
|
|
const CinematicLoader: React.FC<{ onComplete: () => void }> = ({ onComplete }) => {
|
|
const [progress, setProgress] = useState(0);
|
|
const [phase, setPhase] = useState(0);
|
|
const finalText = useTextScramble('ALPHA-GO READY', progress >= 100);
|
|
|
|
const phases = [
|
|
'INITIALIZING KERNEL...',
|
|
'LOADING NEURAL MESH...',
|
|
'DECRYPTING CORE...',
|
|
'SYNCHRONIZING...',
|
|
];
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setProgress(prev => {
|
|
if (prev >= 100) {
|
|
clearInterval(interval);
|
|
setTimeout(onComplete, 800);
|
|
return 100;
|
|
}
|
|
return prev + 1;
|
|
});
|
|
}, 25);
|
|
return () => clearInterval(interval);
|
|
}, [onComplete]);
|
|
|
|
useEffect(() => {
|
|
if (progress < 100) {
|
|
const interval = setInterval(() => {
|
|
setPhase(p => (p + 1) % phases.length);
|
|
}, 600);
|
|
return () => clearInterval(interval);
|
|
}
|
|
}, [progress]);
|
|
|
|
return (
|
|
<motion.div
|
|
className="fixed inset-0 bg-[#050505] z-50 flex items-center justify-center"
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
{/* Background particles */}
|
|
<div className="absolute inset-0 opacity-20">
|
|
<Canvas camera={{ position: [0, 0, 5] }}>
|
|
<BreathingParticleSphere color="#ff4d00" count={1000} />
|
|
</Canvas>
|
|
</div>
|
|
|
|
{/* Scanlines */}
|
|
<div className="scanlines" />
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 text-center">
|
|
{/* Holographic ring */}
|
|
<div className="relative w-40 h-40 mx-auto mb-8">
|
|
<motion.div
|
|
className="absolute inset-0 border-2 border-[#ff4d00] rounded-full"
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
|
|
/>
|
|
<motion.div
|
|
className="absolute inset-3 border border-[#00f3ff] rounded-full"
|
|
animate={{ rotate: -360 }}
|
|
transition={{ duration: 4, repeat: Infinity, ease: 'linear' }}
|
|
/>
|
|
<motion.div
|
|
className="absolute inset-6 border border-white/20 rounded-full"
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 5, repeat: Infinity, ease: 'linear' }}
|
|
/>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="font-mono text-3xl font-bold text-[#ff4d00]">{progress}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Phase text */}
|
|
<div className="font-mono text-sm text-zinc-500 mb-6 h-5">
|
|
{progress < 100 ? phases[phase] : finalText}
|
|
</div>
|
|
|
|
{/* Progress bar */}
|
|
<div className="w-72 h-1 bg-zinc-900 rounded-full overflow-hidden mx-auto">
|
|
<motion.div
|
|
className="h-full bg-gradient-to-r from-[#ff4d00] to-[#00f3ff]"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
// ============================================
|
|
// VIEW COMPONENTS
|
|
// ============================================
|
|
const HeroView: React.FC = () => {
|
|
const titleText = useTextScramble('ALPHA-GO', true);
|
|
|
|
return (
|
|
<div className="relative min-h-screen flex items-center justify-center">
|
|
{/* 3D Background */}
|
|
<div className="absolute inset-0">
|
|
<Canvas camera={{ position: [0, 0, 6] }}>
|
|
<ambientLight intensity={0.2} />
|
|
<pointLight position={[10, 10, 10]} intensity={0.5} color="#ff4d00" />
|
|
<BreathingParticleSphere />
|
|
<Stars radius={100} depth={50} count={2000} factor={3} />
|
|
</Canvas>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="relative z-10 text-center max-w-4xl px-6"
|
|
>
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-6">
|
|
<Zap className="w-4 h-4 text-[#ff4d00]" />
|
|
<span className="font-mono text-xs uppercase tracking-wider">MCP-2099 PLATFORM</span>
|
|
</div>
|
|
|
|
<h1 className="text-6xl md:text-8xl font-bold tracking-tighter mb-4">
|
|
<span className="bg-gradient-to-r from-white via-zinc-300 to-zinc-500 bg-clip-text text-transparent">
|
|
{titleText}
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-zinc-400 mb-8 max-w-xl mx-auto">
|
|
Next-generation AI infrastructure. Engineering the future, one neural connection at a time.
|
|
</p>
|
|
|
|
<div className="flex gap-4 justify-center">
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="px-8 py-4 bg-[#ff4d00] text-white font-mono uppercase tracking-wider rounded-lg flex items-center gap-2"
|
|
>
|
|
Initialize <ChevronRight className="w-5 h-5" />
|
|
</motion.button>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="px-8 py-4 bg-white/5 border border-white/10 text-white font-mono uppercase tracking-wider rounded-lg"
|
|
>
|
|
Documentation
|
|
</motion.button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const NeuralView: React.FC = () => (
|
|
<div className="relative min-h-screen flex items-center justify-center">
|
|
{/* 3D Background */}
|
|
<div className="absolute inset-0">
|
|
<Canvas camera={{ position: [0, 0, 7] }}>
|
|
<ambientLight intensity={0.3} />
|
|
<pointLight position={[5, 5, 5]} intensity={1} color="#00f3ff" />
|
|
<pointLight position={[-5, -5, -5]} intensity={0.5} color="#ff4d00" />
|
|
<SentientCore />
|
|
<Stars radius={100} depth={50} count={1000} factor={2} />
|
|
<OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.5} />
|
|
</Canvas>
|
|
</div>
|
|
|
|
{/* Floating stats */}
|
|
<GlassCard className="absolute top-32 left-8 p-4 max-w-xs">
|
|
<div className="font-mono text-xs text-zinc-500 uppercase mb-1">Neural Activity</div>
|
|
<div className="font-mono text-3xl text-[#00f3ff]">847.3k</div>
|
|
<div className="font-mono text-xs text-zinc-400">connections/sec</div>
|
|
</GlassCard>
|
|
|
|
<GlassCard className="absolute bottom-32 right-8 p-4 max-w-xs">
|
|
<div className="font-mono text-xs text-zinc-500 uppercase mb-1">Processing Power</div>
|
|
<div className="font-mono text-3xl text-[#ff4d00]">2.4 PF</div>
|
|
<div className="font-mono text-xs text-zinc-400">petaflops</div>
|
|
</GlassCard>
|
|
|
|
{/* Center label */}
|
|
<div className="absolute bottom-20 left-1/2 -translate-x-1/2 text-center">
|
|
<div className="font-mono text-xs uppercase tracking-[0.3em] text-zinc-500 mb-2">
|
|
Sentient Core
|
|
</div>
|
|
<div className="font-mono text-lg text-[#00f3ff]">
|
|
Model: ALPHA-GO-2099
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const DashboardView: React.FC<{ logs: LogEntry[] }> = ({ logs }) => {
|
|
const [metricData] = useState(generateMetricData);
|
|
|
|
return (
|
|
<div className="min-h-screen pt-20 pb-8 px-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-white">Mission Control</h1>
|
|
<p className="text-zinc-400">Real-time system monitoring</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button className="p-2 rounded-lg bg-white/5 text-zinc-400 hover:text-white transition-colors">
|
|
<Bell className="w-5 h-5" />
|
|
</button>
|
|
<button className="p-2 rounded-lg bg-white/5 text-zinc-400 hover:text-white transition-colors">
|
|
<Settings className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bento Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<StatCard icon={<Cpu className="w-5 h-5" />} label="CPU Load" value="67.3%" change="+2.4%" color="#00f3ff" />
|
|
<StatCard icon={<Database className="w-5 h-5" />} label="Memory" value="12.4 GB" change="-0.8%" color="#ff4d00" />
|
|
<StatCard icon={<Network className="w-5 h-5" />} label="Network" value="847 MB/s" change="+12%" color="#00f3ff" />
|
|
<StatCard icon={<Lock className="w-5 h-5" />} label="Security" value="ACTIVE" color="#22c55e" />
|
|
|
|
{/* Network Chart */}
|
|
<div className="lg:col-span-2">
|
|
<GlassCard className="p-4">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Activity className="w-4 h-4 text-[#ff4d00]" />
|
|
<span className="font-mono text-xs uppercase tracking-wider text-zinc-400">Network Traffic</span>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={150}>
|
|
<AreaChart data={metricData.slice(-12)}>
|
|
<defs>
|
|
<linearGradient id="networkGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#ff4d00" stopOpacity={0.3} />
|
|
<stop offset="95%" stopColor="#ff4d00" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<XAxis dataKey="time" tick={{ fill: '#71717a', fontSize: 10 }} axisLine={false} />
|
|
<Tooltip contentStyle={{ background: '#0a0a0a', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '8px' }} />
|
|
<Area type="monotone" dataKey="network" stroke="#ff4d00" fill="url(#networkGrad)" />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</GlassCard>
|
|
</div>
|
|
|
|
{/* Resource Chart */}
|
|
<div className="lg:col-span-2">
|
|
<GlassCard className="p-4">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<BarChart3 className="w-4 h-4 text-[#00f3ff]" />
|
|
<span className="font-mono text-xs uppercase tracking-wider text-zinc-400">Resource Usage</span>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={150}>
|
|
<BarChart data={metricData.slice(-8)}>
|
|
<XAxis dataKey="time" tick={{ fill: '#71717a', fontSize: 10 }} axisLine={false} />
|
|
<Tooltip contentStyle={{ background: '#0a0a0a', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '8px' }} />
|
|
<Bar dataKey="cpu" fill="#00f3ff" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="memory" fill="#ff4d00" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</GlassCard>
|
|
</div>
|
|
|
|
{/* Terminal */}
|
|
<div className="md:col-span-2 lg:col-span-3">
|
|
<Terminal logs={logs} />
|
|
</div>
|
|
|
|
{/* Security Widget */}
|
|
<GlassCard className="p-4">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Shield className="w-4 h-4 text-green-400" />
|
|
<span className="font-mono text-xs uppercase tracking-wider text-zinc-400">Security</span>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{[
|
|
{ label: 'Threats Blocked', value: '2,847', color: 'text-[#ff4d00]' },
|
|
{ label: 'Uptime', value: '99.99%', color: 'text-green-400' },
|
|
{ label: 'Sessions', value: '1,203', color: 'text-[#00f3ff]' },
|
|
].map(item => (
|
|
<div key={item.label} className="flex justify-between items-center">
|
|
<span className="font-mono text-xs text-zinc-500">{item.label}</span>
|
|
<span className={`font-mono text-sm font-bold ${item.color}`}>{item.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const LogsView: React.FC<{ logs: LogEntry[] }> = ({ logs }) => (
|
|
<div className="min-h-screen pt-20 pb-8 px-6">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-white">System Logs</h1>
|
|
<p className="text-zinc-400">Real-time event monitoring and diagnostics</p>
|
|
</div>
|
|
<Terminal logs={logs} expanded />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// ============================================
|
|
// NAVBAR
|
|
// ============================================
|
|
const Navbar: React.FC<{
|
|
currentView: ViewState;
|
|
onViewChange: (view: ViewState) => void;
|
|
darkMode: boolean;
|
|
onToggleTheme: () => void;
|
|
}> = ({ currentView, onViewChange, darkMode, onToggleTheme }) => {
|
|
const navItems: { id: ViewState; label: string; icon: React.ReactNode }[] = [
|
|
{ id: 'HERO', label: 'Home', icon: <Zap className="w-4 h-4" /> },
|
|
{ id: 'NEURAL', label: 'Neural', icon: <Brain className="w-4 h-4" /> },
|
|
{ id: 'DASHBOARD', label: 'Dashboard', icon: <BarChart3 className="w-4 h-4" /> },
|
|
{ id: 'LOGS', label: 'Logs', icon: <Terminal className="w-4 h-4" /> },
|
|
];
|
|
|
|
return (
|
|
<nav className="fixed top-4 left-1/2 -translate-x-1/2 z-50">
|
|
<GlassCard className="px-2 py-2 flex items-center gap-1 rounded-full">
|
|
{navItems.map(item => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => onViewChange(item.id)}
|
|
className={`
|
|
flex items-center gap-2 px-4 py-2 rounded-full font-mono text-sm transition-all
|
|
${currentView === item.id
|
|
? 'bg-[#ff4d00] text-white'
|
|
: 'text-zinc-400 hover:text-white hover:bg-white/5'
|
|
}
|
|
`}
|
|
>
|
|
{item.icon}
|
|
<span className="hidden md:inline">{item.label}</span>
|
|
</button>
|
|
))}
|
|
|
|
<div className="w-px h-6 bg-white/10 mx-2" />
|
|
|
|
<button
|
|
onClick={onToggleTheme}
|
|
className="p-2 rounded-full text-zinc-400 hover:text-white hover:bg-white/5 transition-colors"
|
|
>
|
|
{darkMode ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
|
</button>
|
|
</GlassCard>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
// ============================================
|
|
// MAIN APP
|
|
// ============================================
|
|
export default function AlphaGoPlatform() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [currentView, setCurrentView] = useState<ViewState>('HERO');
|
|
const [darkMode, setDarkMode] = useState(true);
|
|
const logs = useTerminal();
|
|
|
|
return (
|
|
<>
|
|
{/* Global Styles */}
|
|
<style>{`
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: #050505;
|
|
color: white;
|
|
margin: 0;
|
|
}
|
|
|
|
.font-mono { font-family: 'JetBrains Mono', monospace; }
|
|
|
|
.scanlines::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.1) 0px,
|
|
rgba(0, 0, 0, 0.1) 1px,
|
|
transparent 1px,
|
|
transparent 2px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
|
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
|
`}</style>
|
|
|
|
<div className="scanlines" />
|
|
|
|
<AnimatePresence mode="wait">
|
|
{loading && (
|
|
<CinematicLoader onComplete={() => setLoading(false)} />
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{!loading && (
|
|
<>
|
|
<Navbar
|
|
currentView={currentView}
|
|
onViewChange={setCurrentView}
|
|
darkMode={darkMode}
|
|
onToggleTheme={() => setDarkMode(!darkMode)}
|
|
/>
|
|
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={currentView}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
{currentView === 'HERO' && <HeroView />}
|
|
{currentView === 'NEURAL' && <NeuralView />}
|
|
{currentView === 'DASHBOARD' && <DashboardView logs={logs} />}
|
|
{currentView === 'LOGS' && <LogsView logs={logs} />}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|