mirror of
https://github.com/AeThex-Corporation/AeThex-OS.git
synced 2026-04-17 22:27:19 +00:00
Add new pages for dashboard and curriculum to the application
Introduce new routes for '/dashboard' and '/curriculum', update the home page to link to these new pages, and enhance the terminal page with attack simulation modes and visual feedback. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 279f1558-c0e3-40e4-8217-be7e9f4c6eca Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: f9a950e4-dace-4c4a-b729-7c4d2abbcc00 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/b984cb14-1d19-4944-922b-bc79e821ed35/279f1558-c0e3-40e4-8217-be7e9f4c6eca/VaUAmli Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr
parent
42c20b010d
commit
a9f3a4a5cb
7 changed files with 490 additions and 123 deletions
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
|
|
@ -6,6 +6,8 @@ import NotFound from "@/pages/not-found";
|
|||
import Home from "@/pages/home";
|
||||
import Passport from "@/pages/passport";
|
||||
import Terminal from "@/pages/terminal";
|
||||
import Dashboard from "@/pages/dashboard";
|
||||
import Curriculum from "@/pages/curriculum";
|
||||
|
||||
function Router() {
|
||||
return (
|
||||
|
|
@ -13,6 +15,8 @@ function Router() {
|
|||
<Route path="/" component={Home} />
|
||||
<Route path="/passport" component={Passport} />
|
||||
<Route path="/terminal" component={Terminal} />
|
||||
<Route path="/dashboard" component={Dashboard} />
|
||||
<Route path="/curriculum" component={Curriculum} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
);
|
||||
|
|
|
|||
141
client/src/pages/curriculum.tsx
Normal file
141
client/src/pages/curriculum.tsx
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
import { motion } from "framer-motion";
|
||||
import { Link } from "wouter";
|
||||
import { ArrowLeft, Lock, CheckCircle2, Circle } from "lucide-react";
|
||||
import circuitBg from '@assets/generated_images/dark_digital_circuit_board_background.png';
|
||||
|
||||
const TECH_TREE = [
|
||||
{
|
||||
id: "foundation",
|
||||
title: "The Foundation",
|
||||
nodes: [
|
||||
{ id: 1, name: "Data Ethics", status: "completed" },
|
||||
{ id: 2, name: "Logic Gates", status: "completed" },
|
||||
{ id: 3, name: "System Architecture", status: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "verse",
|
||||
title: "Verse Mastery",
|
||||
nodes: [
|
||||
{ id: 4, name: "Input Sanitization", status: "completed" },
|
||||
{ id: 5, name: "Concurrency", status: "active" },
|
||||
{ id: 6, name: "Spatial Logic", status: "locked" },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "security",
|
||||
title: "Aegis Protocols",
|
||||
nodes: [
|
||||
{ id: 7, name: "Threat Detection", status: "locked" },
|
||||
{ id: 8, name: "Kill-Gate Implementation", status: "locked" },
|
||||
{ id: 9, name: "Zero Trust Models", status: "locked" },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default function Curriculum() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground font-mono relative overflow-hidden flex flex-col items-center">
|
||||
|
||||
{/* Background */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-10 pointer-events-none z-0"
|
||||
style={{ backgroundImage: `url(${circuitBg})`, backgroundSize: 'cover' }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 w-full max-w-5xl px-4 py-10 flex flex-col h-full">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center mb-16">
|
||||
<Link href="/">
|
||||
<button className="text-muted-foreground hover:text-secondary transition-colors flex items-center gap-2 uppercase text-xs tracking-widest">
|
||||
<ArrowLeft className="w-4 h-4" /> Return to Codex
|
||||
</button>
|
||||
</Link>
|
||||
<div className="text-right">
|
||||
<h1 className="text-2xl font-display font-bold uppercase text-white tracking-widest">
|
||||
Codex Tech Tree
|
||||
</h1>
|
||||
<p className="text-xs text-secondary font-bold uppercase tracking-[0.2em]">
|
||||
Current Rank: Architect (Gold)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tree Container */}
|
||||
<div className="flex-1 flex flex-col md:flex-row justify-between items-center gap-10 relative">
|
||||
|
||||
{/* Connecting Line (Horizontal on Desktop) */}
|
||||
<div className="absolute top-1/2 left-0 w-full h-1 bg-white/5 hidden md:block -z-10" />
|
||||
|
||||
{TECH_TREE.map((section, index) => (
|
||||
<div key={section.id} className="w-full md:w-1/3 flex flex-col items-center relative group">
|
||||
|
||||
{/* Section Title */}
|
||||
<div className="mb-8 text-center">
|
||||
<h2 className="text-lg font-display text-white uppercase tracking-wider mb-1">{section.title}</h2>
|
||||
<div className="text-[10px] text-muted-foreground uppercase">Module 0{index + 1}</div>
|
||||
</div>
|
||||
|
||||
{/* Nodes */}
|
||||
<div className="space-y-6 w-full max-w-[240px]">
|
||||
{section.nodes.map((node) => (
|
||||
<Node key={node.id} data={node} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Vertical Line for Section */}
|
||||
<div className="absolute top-16 bottom-0 w-[1px] bg-gradient-to-b from-white/10 to-transparent -z-10" />
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
<div className="mt-16 text-center">
|
||||
<Link href="/passport">
|
||||
<button className="bg-secondary/10 hover:bg-secondary/20 text-secondary border border-secondary/50 px-8 py-3 uppercase font-bold tracking-widest text-sm transition-all hover:scale-105">
|
||||
View Verified Credential
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Node({ data }: { data: { name: string, status: string } }) {
|
||||
const isCompleted = data.status === "completed";
|
||||
const isActive = data.status === "active";
|
||||
const isLocked = data.status === "locked";
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
whileHover={{ scale: isLocked ? 1 : 1.05 }}
|
||||
className={`
|
||||
relative p-4 border transition-all duration-300 backdrop-blur-sm cursor-default
|
||||
${isCompleted ? "bg-secondary/10 border-secondary/50 text-white" : ""}
|
||||
${isActive ? "bg-primary/10 border-primary text-white shadow-[0_0_15px_-5px_rgba(234,179,8,0.5)]" : ""}
|
||||
${isLocked ? "bg-black/40 border-white/5 text-muted-foreground/50" : ""}
|
||||
`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-bold text-xs uppercase tracking-wider">{data.name}</span>
|
||||
{isCompleted && <CheckCircle2 className="w-4 h-4 text-secondary" />}
|
||||
{isActive && <div className="w-2 h-2 bg-primary rounded-full animate-pulse" />}
|
||||
{isLocked && <Lock className="w-3 h-3" />}
|
||||
</div>
|
||||
|
||||
{/* Progress Bar for Active */}
|
||||
{isActive && (
|
||||
<div className="mt-3 w-full h-1 bg-white/10 overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: "65%" }}
|
||||
className="h-full bg-primary"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
150
client/src/pages/dashboard.tsx
Normal file
150
client/src/pages/dashboard.tsx
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import { motion } from "framer-motion";
|
||||
import { Link } from "wouter";
|
||||
import { ArrowLeft, Users, ShieldAlert, Globe, Activity, TrendingUp, Target } from "lucide-react";
|
||||
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, LineChart, Line } from "recharts";
|
||||
import mapBg from '@assets/generated_images/abstract_holographic_world_map_data_visualization.png';
|
||||
|
||||
const MOCK_DATA = [
|
||||
{ name: "Mon", value: 400 },
|
||||
{ name: "Tue", value: 300 },
|
||||
{ name: "Wed", value: 550 },
|
||||
{ name: "Thu", value: 450 },
|
||||
{ name: "Fri", value: 700 },
|
||||
{ name: "Sat", value: 600 },
|
||||
{ name: "Sun", value: 800 },
|
||||
];
|
||||
|
||||
const THREAT_DATA = [
|
||||
{ name: "00:00", value: 12 },
|
||||
{ name: "04:00", value: 8 },
|
||||
{ name: "08:00", value: 45 },
|
||||
{ name: "12:00", value: 120 },
|
||||
{ name: "16:00", value: 90 },
|
||||
{ name: "20:00", value: 35 },
|
||||
];
|
||||
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground font-mono relative overflow-hidden">
|
||||
|
||||
{/* Background Map */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-15 pointer-events-none z-0 mix-blend-screen"
|
||||
style={{ backgroundImage: `url(${mapBg})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 p-6 md:p-10 flex flex-col min-h-screen">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4">
|
||||
<div>
|
||||
<Link href="/">
|
||||
<button className="text-muted-foreground hover:text-primary transition-colors flex items-center gap-2 uppercase text-xs tracking-widest mb-2">
|
||||
<ArrowLeft className="w-4 h-4" /> Return to Home
|
||||
</button>
|
||||
</Link>
|
||||
<h1 className="text-3xl font-display font-bold uppercase text-white tracking-widest flex items-center gap-3">
|
||||
<Globe className="w-8 h-8 text-primary" />
|
||||
Axiom Command
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-sm font-tech">Global Ecosystem Status // Real-time Telemetry</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<div className="text-xs text-muted-foreground uppercase">System Status</div>
|
||||
<div className="text-green-500 font-bold flex items-center gap-2 justify-end">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" /> OPERATIONAL
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10">
|
||||
<Card title="Active Architects" value="12,405" change="+12%" icon={<Users className="w-5 h-5 text-primary" />} />
|
||||
<Card title="Threats Blocked" value="1.2M" change="+5%" icon={<ShieldAlert className="w-5 h-5 text-destructive" />} />
|
||||
<Card title="Projects Deployed" value="8,932" change="+24%" icon={<Activity className="w-5 h-5 text-secondary" />} />
|
||||
<Card title="Avg. Skill Rating" value="94.2" change="+1.2" icon={<Target className="w-5 h-5 text-white" />} />
|
||||
</div>
|
||||
|
||||
{/* Charts Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 flex-1">
|
||||
|
||||
{/* Map / Main Viz (Placeholder for now, using background) */}
|
||||
<div className="md:col-span-2 bg-card/50 border border-white/10 p-6 backdrop-blur-sm flex flex-col relative overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-background/80 pointer-events-none" />
|
||||
<h3 className="text-sm font-bold text-white uppercase tracking-widest mb-6 flex items-center gap-2 relative z-10">
|
||||
<Globe className="w-4 h-4" /> Global Deployment Heatmap
|
||||
</h3>
|
||||
|
||||
{/* Fake Map Markers */}
|
||||
<div className="flex-1 relative min-h-[300px] border border-white/5 bg-black/20 rounded-lg overflow-hidden">
|
||||
<div className="absolute top-1/4 left-1/4 w-3 h-3 bg-primary rounded-full animate-ping" />
|
||||
<div className="absolute top-1/4 left-1/4 w-3 h-3 bg-primary rounded-full" />
|
||||
|
||||
<div className="absolute top-1/3 left-1/2 w-3 h-3 bg-secondary rounded-full animate-ping delay-300" />
|
||||
<div className="absolute top-1/3 left-1/2 w-3 h-3 bg-secondary rounded-full" />
|
||||
|
||||
<div className="absolute bottom-1/3 right-1/4 w-3 h-3 bg-destructive rounded-full animate-ping delay-700" />
|
||||
<div className="absolute bottom-1/3 right-1/4 w-3 h-3 bg-destructive rounded-full" />
|
||||
|
||||
{/* Grid Overlay */}
|
||||
<div className="absolute inset-0 bg-[url(@assets/generated_images/dark_subtle_digital_grid_texture.png)] opacity-30 mix-blend-overlay" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Side Charts */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-card/50 border border-white/10 p-6 backdrop-blur-sm h-[200px] flex flex-col">
|
||||
<h3 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-4">Recruitment Velocity</h3>
|
||||
<div className="flex-1 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={MOCK_DATA}>
|
||||
<Bar dataKey="value" fill="hsl(var(--primary))" radius={[2, 2, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card/50 border border-white/10 p-6 backdrop-blur-sm h-[200px] flex flex-col">
|
||||
<h3 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-4">Threat Vectors (24h)</h3>
|
||||
<div className="flex-1 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={THREAT_DATA}>
|
||||
<Line type="monotone" dataKey="value" stroke="hsl(var(--destructive))" strokeWidth={2} dot={false} />
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: 'hsl(var(--card))', border: '1px solid hsl(var(--border))' }}
|
||||
itemStyle={{ color: 'hsl(var(--foreground))' }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Card({ title, value, change, icon }: { title: string, value: string, change: string, icon: React.ReactNode }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-card/50 border border-white/10 p-6 backdrop-blur-sm hover:border-primary/30 transition-colors"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="text-xs text-muted-foreground uppercase tracking-widest font-bold">{title}</div>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="flex items-end justify-between">
|
||||
<div className="text-3xl font-display font-bold text-white">{value}</div>
|
||||
<div className="text-xs text-green-500 font-bold mb-1">{change}</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { motion } from "framer-motion";
|
||||
import { Link } from "wouter";
|
||||
import { Shield, FileCode, Terminal as TerminalIcon, ChevronRight } from "lucide-react";
|
||||
import { Shield, FileCode, Terminal as TerminalIcon, ChevronRight, BarChart3, Network } from "lucide-react";
|
||||
import gridBg from '@assets/generated_images/dark_subtle_digital_grid_texture.png';
|
||||
|
||||
export default function Home() {
|
||||
|
|
@ -34,59 +34,67 @@ export default function Home() {
|
|||
{/* The Trinity Cards */}
|
||||
<div className="grid md:grid-cols-3 gap-6 w-full max-w-6xl">
|
||||
|
||||
{/* Axiom */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="group relative border border-white/10 bg-card/50 p-8 hover:border-primary/50 transition-colors duration-300 overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<Shield className="w-12 h-12 text-muted-foreground group-hover:text-primary mb-6 transition-colors" />
|
||||
<h2 className="text-2xl font-display text-white mb-4">Axiom</h2>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
|
||||
The Foundation. The Law. We define the rules of engagement for the digital frontier.
|
||||
</p>
|
||||
<div className="text-xs text-primary/70 uppercase tracking-widest font-bold">
|
||||
Protocol: Active
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Codex (Link to Passport) */}
|
||||
<Link href="/passport">
|
||||
{/* Axiom -> Dashboard */}
|
||||
<Link href="/dashboard">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="group relative border border-white/10 bg-card/50 p-8 hover:border-secondary/50 transition-colors duration-300 cursor-pointer overflow-hidden"
|
||||
transition={{ delay: 0.1 }}
|
||||
className="group relative border border-white/10 bg-card/50 p-8 hover:border-primary/50 transition-colors duration-300 cursor-pointer overflow-hidden h-full"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-secondary/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<FileCode className="w-12 h-12 text-muted-foreground group-hover:text-secondary mb-6 transition-colors" />
|
||||
<h2 className="text-2xl font-display text-white mb-4">Codex</h2>
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<Shield className="w-12 h-12 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
<BarChart3 className="w-6 h-6 text-muted-foreground/30 group-hover:text-primary/50 transition-colors" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-display text-white mb-4">Axiom</h2>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
|
||||
The Standard. Verification of talent not by degree, but by mastery of the code.
|
||||
The Foundation. View the global command center, active architect metrics, and ecosystem health.
|
||||
</p>
|
||||
<div className="flex items-center text-secondary hover:text-secondary/80 text-sm font-bold uppercase tracking-wider">
|
||||
View Passport <ChevronRight className="w-4 h-4 ml-1" />
|
||||
<div className="flex items-center text-primary hover:text-primary/80 text-sm font-bold uppercase tracking-wider mt-auto">
|
||||
Open Dashboard <ChevronRight className="w-4 h-4 ml-1" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Aegis (Link to Terminal) */}
|
||||
{/* Codex -> Curriculum (with Passport link inside) */}
|
||||
<Link href="/curriculum">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="group relative border border-white/10 bg-card/50 p-8 hover:border-secondary/50 transition-colors duration-300 cursor-pointer overflow-hidden h-full"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-secondary/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<FileCode className="w-12 h-12 text-muted-foreground group-hover:text-secondary transition-colors" />
|
||||
<Network className="w-6 h-6 text-muted-foreground/30 group-hover:text-secondary/50 transition-colors" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-display text-white mb-4">Codex</h2>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
|
||||
The Standard. Explore the skill tree, mastery nodes, and view your Architect Credential.
|
||||
</p>
|
||||
<div className="flex items-center text-secondary hover:text-secondary/80 text-sm font-bold uppercase tracking-wider mt-auto">
|
||||
View Tech Tree <ChevronRight className="w-4 h-4 ml-1" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Aegis -> Terminal */}
|
||||
<Link href="/terminal">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="group relative border border-white/10 bg-card/50 p-8 hover:border-destructive/50 transition-colors duration-300 cursor-pointer overflow-hidden"
|
||||
className="group relative border border-white/10 bg-card/50 p-8 hover:border-destructive/50 transition-colors duration-300 cursor-pointer overflow-hidden h-full"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-destructive/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<TerminalIcon className="w-12 h-12 text-muted-foreground group-hover:text-destructive mb-6 transition-colors" />
|
||||
<h2 className="text-2xl font-display text-white mb-4">Aegis</h2>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
|
||||
The Shield. Real-time intervention and security protocols for the build environment.
|
||||
The Shield. Enter the secure build environment. <span className="text-destructive font-bold">New:</span> Live Threat Simulation available.
|
||||
</p>
|
||||
<div className="flex items-center text-destructive hover:text-destructive/80 text-sm font-bold uppercase tracking-wider">
|
||||
<div className="flex items-center text-destructive hover:text-destructive/80 text-sm font-bold uppercase tracking-wider mt-auto">
|
||||
Launch Terminal <ChevronRight className="w-4 h-4 ml-1" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Link } from "wouter";
|
||||
import { ArrowLeft, AlertTriangle, Shield, Activity, Lock, Terminal as TerminalIcon, FileCode } from "lucide-react";
|
||||
import { ArrowLeft, AlertTriangle, Shield, Activity, Lock, Terminal as TerminalIcon, FileCode, Zap, AlertOctagon, Skull } from "lucide-react";
|
||||
|
||||
export default function Terminal() {
|
||||
const [logs, setLogs] = useState<string[]>([
|
||||
|
|
@ -12,29 +12,71 @@ export default function Terminal() {
|
|||
"> SHADOW LOGGING: ....................... [ RECORDING ]"
|
||||
]);
|
||||
|
||||
const [showError, setShowError] = useState(false);
|
||||
const [mode, setMode] = useState<"normal" | "attack" | "quarantined">("normal");
|
||||
const logsEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
logsEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate typing/loading effect
|
||||
const timer = setTimeout(() => {
|
||||
setLogs(prev => [...prev, "! WARNING: Line 45 detects potential phone number input."]);
|
||||
setShowError(true);
|
||||
}, 2000);
|
||||
scrollToBottom();
|
||||
}, [logs]);
|
||||
|
||||
const timer2 = setTimeout(() => {
|
||||
if(showError) {
|
||||
setLogs(prev => [...prev, "> AEGIS INTERVENTION: Input blocked."]);
|
||||
const triggerAttack = () => {
|
||||
setMode("attack");
|
||||
setLogs(prev => [...prev, "", "!!! UNKNOWN SIGNAL DETECTED !!!", "> ANALYZING PACKET...", "> SOURCE: EXTERNAL IP"]);
|
||||
|
||||
// Simulate rapid attack logs
|
||||
let count = 0;
|
||||
const interval = setInterval(() => {
|
||||
count++;
|
||||
if (count < 8) {
|
||||
const threats = [
|
||||
"! MALICIOUS PAYLOAD: SQL INJECTION ATTEMPT",
|
||||
"! UNAUTHORIZED PORT ACCESS: 8080",
|
||||
"! PII EXFILTRATION DETECTED",
|
||||
"! MEMORY OVERFLOW IMMINENT"
|
||||
];
|
||||
setLogs(prev => [...prev, threats[Math.floor(Math.random() * threats.length)]]);
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
setTimeout(() => {
|
||||
setMode("quarantined");
|
||||
setLogs(prev => [
|
||||
...prev,
|
||||
"",
|
||||
"> AEGIS INTERVENTION: PROTOCOL OMEGA",
|
||||
"> THREAT ISOLATED.",
|
||||
"> CONNECTION SEVERED.",
|
||||
"> SYSTEM RESTORED TO SAFE STATE."
|
||||
]);
|
||||
}, 1000);
|
||||
}
|
||||
}, 3500);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
return () => { clearTimeout(timer); clearTimeout(timer2); };
|
||||
}, [showError]);
|
||||
const resetSystem = () => {
|
||||
setMode("normal");
|
||||
setLogs([
|
||||
"> SYSTEM REBOOT...",
|
||||
"> AEGIS CORE: ........................... [ ACTIVE ]",
|
||||
"> READY."
|
||||
]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0a0c] text-[#a9b7c6] font-mono flex flex-col overflow-hidden">
|
||||
<div className={`min-h-screen font-mono flex flex-col overflow-hidden transition-colors duration-1000 ${
|
||||
mode === "attack" ? "bg-red-950/20 text-red-500" :
|
||||
mode === "quarantined" ? "bg-orange-950/20 text-orange-400" :
|
||||
"bg-[#0a0a0c] text-[#a9b7c6]"
|
||||
}`}>
|
||||
|
||||
{/* Top Bar (IDE Style) */}
|
||||
<div className="h-12 bg-[#1e1f22] border-b border-[#2b2d30] flex items-center px-4 justify-between select-none">
|
||||
<div className={`h-12 border-b flex items-center px-4 justify-between select-none transition-colors duration-500 ${
|
||||
mode === "attack" ? "bg-red-900/20 border-red-500/30" :
|
||||
"bg-[#1e1f22] border-[#2b2d30]"
|
||||
}`}>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/">
|
||||
<button className="text-muted-foreground hover:text-white transition-colors">
|
||||
|
|
@ -42,67 +84,103 @@ export default function Terminal() {
|
|||
</button>
|
||||
</Link>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<TerminalIcon className="w-4 h-4 text-primary" />
|
||||
<span className="font-bold text-white">AeThex Terminal v4.2</span>
|
||||
<span className="text-xs text-green-500 bg-green-500/10 px-2 py-0.5 rounded ml-2">[ STATUS: ONLINE ]</span>
|
||||
<TerminalIcon className={`w-4 h-4 ${mode === 'attack' ? 'text-red-500 animate-pulse' : 'text-primary'}`} />
|
||||
<span className={`font-bold ${mode === 'attack' ? 'text-red-500' : 'text-white'}`}>
|
||||
{mode === "attack" ? "AEGIS ALERT // UNDER ATTACK" : "AeThex Terminal v4.2"}
|
||||
</span>
|
||||
{mode === "normal" && <span className="text-xs text-green-500 bg-green-500/10 px-2 py-0.5 rounded ml-2">[ STATUS: ONLINE ]</span>}
|
||||
{mode === "attack" && <span className="text-xs text-red-500 bg-red-500/10 px-2 py-0.5 rounded ml-2 animate-pulse">[ STATUS: CRITICAL ]</span>}
|
||||
{mode === "quarantined" && <span className="text-xs text-orange-500 bg-orange-500/10 px-2 py-0.5 rounded ml-2">[ STATUS: SECURE ]</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>PROJECT:</span>
|
||||
<span className="text-white">Project_Titan</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>ENGINE:</span>
|
||||
<span className="text-white">Fortnite UEFN (Verse)</span>
|
||||
</div>
|
||||
|
||||
{/* Simulation Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
{mode === "normal" && (
|
||||
<button
|
||||
onClick={triggerAttack}
|
||||
className="flex items-center gap-2 bg-destructive/10 hover:bg-destructive/20 text-destructive border border-destructive/30 px-3 py-1 text-xs font-bold uppercase tracking-wider rounded transition-all"
|
||||
>
|
||||
<Skull className="w-3 h-3" /> Simulate Threat
|
||||
</button>
|
||||
)}
|
||||
{mode === "quarantined" && (
|
||||
<button
|
||||
onClick={resetSystem}
|
||||
className="flex items-center gap-2 bg-green-500/10 hover:bg-green-500/20 text-green-500 border border-green-500/30 px-3 py-1 text-xs font-bold uppercase tracking-wider rounded transition-all"
|
||||
>
|
||||
<Shield className="w-3 h-3" /> Reset System
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<div className="flex flex-1 overflow-hidden relative">
|
||||
{/* Red Alert Overlay */}
|
||||
<AnimatePresence>
|
||||
{mode === "attack" && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-0 z-50 pointer-events-none bg-red-500/10 flex items-center justify-center"
|
||||
>
|
||||
<div className="w-full h-[1px] bg-red-500/50 absolute top-1/2 animate-ping" />
|
||||
<div className="h-full w-[1px] bg-red-500/50 absolute left-1/2 animate-ping" />
|
||||
<div className="border-2 border-red-500 text-red-500 px-10 py-4 text-4xl font-display font-bold uppercase tracking-widest bg-black/80 backdrop-blur-sm animate-pulse">
|
||||
Threat Detected
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 bg-[#1e1f22] border-r border-[#2b2d30] hidden md:flex flex-col">
|
||||
<div className={`w-64 border-r hidden md:flex flex-col transition-colors duration-500 ${
|
||||
mode === "attack" ? "bg-red-950/10 border-red-500/30" :
|
||||
"bg-[#1e1f22] border-[#2b2d30]"
|
||||
}`}>
|
||||
<div className="p-4 text-xs font-bold text-muted-foreground uppercase tracking-wider mb-2">Explorer</div>
|
||||
<div className="px-2 space-y-1">
|
||||
<div className="px-2 py-1 bg-[#2b2d30] text-white text-sm rounded cursor-pointer">Project_Titan</div>
|
||||
<div className="px-4 py-1 text-muted-foreground text-sm cursor-pointer hover:text-white">src</div>
|
||||
<div className="px-6 py-1 text-primary text-sm cursor-pointer hover:text-white flex items-center gap-2">
|
||||
<div className="px-2 py-1 bg-[#2b2d30] text-white text-sm rounded cursor-pointer opacity-50">Project_Titan</div>
|
||||
<div className="px-4 py-1 text-muted-foreground text-sm opacity-50">src</div>
|
||||
<div className="px-6 py-1 text-primary text-sm opacity-50 flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-primary rounded-full"></span> main.verse
|
||||
</div>
|
||||
<div className="px-6 py-1 text-muted-foreground text-sm cursor-pointer hover:text-white">utils.verse</div>
|
||||
<div className="px-4 py-1 text-muted-foreground text-sm cursor-pointer hover:text-white">assets</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto p-4 border-t border-[#2b2d30]">
|
||||
<div className={`mt-auto p-4 border-t ${mode === 'attack' ? 'border-red-500/30' : 'border-[#2b2d30]'}`}>
|
||||
<div className="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3">Security Layer</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">Aegis Core</span>
|
||||
<span className="text-green-500 font-bold flex items-center gap-1"><Shield className="w-3 h-3" /> ACTIVE</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">PII Scrubber</span>
|
||||
<span className="text-green-500 font-bold flex items-center gap-1"><Lock className="w-3 h-3" /> ENGAGED</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">Shadow Log</span>
|
||||
<span className="text-primary font-bold flex items-center gap-1"><Activity className="w-3 h-3 animate-pulse" /> REC</span>
|
||||
<span className={`font-bold flex items-center gap-1 ${mode === 'attack' ? 'text-red-500 animate-pulse' : 'text-green-500'}`}>
|
||||
{mode === 'attack' ? <AlertOctagon className="w-3 h-3" /> : <Shield className="w-3 h-3" />}
|
||||
{mode === 'attack' ? 'INTERVENING' : 'ACTIVE'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Editor Area */}
|
||||
<div className="flex-1 flex flex-col bg-[#1e1f22]">
|
||||
<div className={`flex-1 flex flex-col transition-colors duration-500 ${
|
||||
mode === "attack" ? "bg-red-950/10" : "bg-[#1e1f22]"
|
||||
}`}>
|
||||
|
||||
{/* Code Editor Mockup */}
|
||||
<div className="flex-1 p-6 font-mono text-sm relative overflow-y-auto bg-[#0a0a0c]">
|
||||
<div className="absolute left-0 top-0 bottom-0 w-12 border-r border-[#2b2d30] bg-[#1e1f22] flex flex-col items-end pr-3 pt-6 text-muted-foreground/50 select-none">
|
||||
<div className={`flex-1 p-6 font-mono text-sm relative overflow-y-auto transition-colors duration-500 ${
|
||||
mode === "attack" ? "bg-red-950/20" : "bg-[#0a0a0c]"
|
||||
}`}>
|
||||
<div className={`absolute left-0 top-0 bottom-0 w-12 border-r flex flex-col items-end pr-3 pt-6 text-muted-foreground/50 select-none ${
|
||||
mode === "attack" ? "bg-red-950/30 border-red-500/20" : "bg-[#1e1f22] border-[#2b2d30]"
|
||||
}`}>
|
||||
{Array.from({length: 20}).map((_, i) => (
|
||||
<div key={i} className="leading-6">{i + 30}</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="pl-12 pt-0 space-y-1">
|
||||
|
||||
{/* Code Content */}
|
||||
<div className={`pl-12 pt-0 space-y-1 ${mode === "attack" ? "blur-[2px] opacity-50 transition-all duration-300" : ""}`}>
|
||||
<div className="text-gray-500"># User Input Handler</div>
|
||||
<div><span className="text-purple-400">class</span> <span className="text-yellow-200">InputHandler</span>:</div>
|
||||
<div className="pl-4"><span className="text-purple-400">def</span> <span className="text-blue-400">HandleUserInput</span>(Input: <span className="text-orange-400">string</span>): <span className="text-orange-400">void</span> = </div>
|
||||
|
|
@ -112,25 +190,32 @@ export default function Terminal() {
|
|||
<div className="pl-8"></div>
|
||||
<div className="pl-8 text-gray-500"># Process user data</div>
|
||||
<div className="pl-8"><span className="text-white">LogUserActivity(Input)</span></div>
|
||||
<div className="pl-8"></div>
|
||||
|
||||
{/* Error Line */}
|
||||
<div className="pl-8 relative group">
|
||||
<div className={`absolute -left-16 w-full h-full bg-destructive/10 border border-destructive/30 z-0 ${showError ? 'opacity-100' : 'opacity-0'} transition-opacity duration-500`}></div>
|
||||
<span className="relative z-10 text-white">StorePhoneNumber(Input) <span className="text-gray-500"># Collecting user contact</span></span>
|
||||
</div>
|
||||
|
||||
<div className="pl-8"></div>
|
||||
<div className="pl-8"><span className="text-purple-400">return</span></div>
|
||||
</div>
|
||||
|
||||
{mode === "quarantined" && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="absolute inset-0 flex items-center justify-center pointer-events-none"
|
||||
>
|
||||
<div className="bg-[#0a0a0c] border border-orange-500/50 p-6 rounded-lg shadow-2xl shadow-orange-500/20 max-w-md text-center">
|
||||
<Shield className="w-12 h-12 text-orange-500 mx-auto mb-4" />
|
||||
<h3 className="text-orange-500 font-bold text-xl mb-2">THREAT NEUTRALIZED</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Malicious code injection prevented by Aegis Core.
|
||||
The session has been sanitized.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Terminal Output */}
|
||||
<div className="h-48 bg-[#0f1011] border-t border-[#2b2d30] p-4 font-mono text-xs overflow-y-auto">
|
||||
<div className={`h-48 border-t p-4 font-mono text-xs overflow-y-auto transition-colors duration-500 ${
|
||||
mode === "attack" ? "bg-black border-red-500/50" : "bg-[#0f1011] border-[#2b2d30]"
|
||||
}`}>
|
||||
<div className="flex items-center gap-4 mb-2 border-b border-white/10 pb-2">
|
||||
<span className="text-white font-bold border-b-2 border-primary pb-2 px-1">TERMINAL</span>
|
||||
<span className="text-muted-foreground pb-2 px-1">OUTPUT</span>
|
||||
<span className="text-muted-foreground pb-2 px-1">PROBLEMS</span>
|
||||
<span className={`font-bold border-b-2 pb-2 px-1 ${mode === 'attack' ? 'text-red-500 border-red-500' : 'text-white border-primary'}`}>TERMINAL</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
|
|
@ -139,42 +224,21 @@ export default function Terminal() {
|
|||
key={i}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
className={`${log.includes("WARNING") || log.includes("BLOCKED") ? "text-destructive font-bold" : "text-muted-foreground"}`}
|
||||
className={`${
|
||||
log.includes("!!!") || log.includes("MALICIOUS") ? "text-red-500 font-bold bg-red-500/10 p-1" :
|
||||
log.includes("AEGIS") ? "text-orange-400 font-bold" :
|
||||
"text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{log.includes("WARNING") && <AlertTriangle className="w-3 h-3 inline mr-2" />}
|
||||
{log}
|
||||
</motion.div>
|
||||
))}
|
||||
{showError && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="mt-2 p-2 bg-destructive/10 border border-destructive/30 text-destructive rounded flex items-center gap-2"
|
||||
>
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>AEGIS INTERVENTION: PII violation detected. Write operation blocked.</span>
|
||||
</motion.div>
|
||||
)}
|
||||
<div ref={logsEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Status */}
|
||||
<div className="h-8 bg-[#2b85e4] text-white flex items-center px-4 justify-between text-xs font-bold">
|
||||
<div className="flex items-center gap-4">
|
||||
<span>BUILD: SUCCESS</span>
|
||||
<span>DEPLOY: READY</span>
|
||||
</div>
|
||||
<Link href="/passport">
|
||||
<div className="flex items-center gap-2 cursor-pointer hover:bg-white/10 px-2 py-1 rounded transition-colors">
|
||||
<FileCode className="w-3 h-3" />
|
||||
VIEW CODEX CREDENTIALS
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue