mirror of
https://github.com/AeThex-Corporation/AeThex-OS.git
synced 2026-04-18 06:27:20 +00:00
Update website to reflect the AeThex Ecosystem and its core components
Refactors meta tags, font imports, and application routing to establish the AeThex brand and introduce new pages for Home, Passport, and Terminal, with updated CSS variables for theming. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 279f1558-c0e3-40e4-8217-be7e9f4c6eca Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 31e97b59-1441-4f4c-9700-6e0eae6ae016 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
6f54713012
commit
42c20b010d
10 changed files with 516 additions and 352 deletions
3
.replit
3
.replit
|
|
@ -37,3 +37,6 @@ author = "agent"
|
|||
task = "shell.exec"
|
||||
args = "npm run dev:client"
|
||||
waitForPort = 5000
|
||||
|
||||
[agent]
|
||||
mockupState = "MOCKUP"
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 943 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 545 KiB |
|
|
@ -4,23 +4,24 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
|
||||
|
||||
<meta property="og:title" content="Replit Design" />
|
||||
<meta property="og:description" content="A website made with Replit Design" />
|
||||
<meta property="og:title" content="AeThex Ecosystem" />
|
||||
<meta property="og:description" content="The Operating System for the Metaverse. Axiom, Codex, Aegis." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://replit.com/public/images/opengraph.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@replit" />
|
||||
<meta name="twitter:title" content="Replit Design" />
|
||||
<meta name="twitter:description" content="A website made with Replit Design" />
|
||||
<meta name="twitter:title" content="AeThex Ecosystem" />
|
||||
<meta name="twitter:description" content="The Operating System for the Metaverse. Axiom, Codex, Aegis." />
|
||||
<meta name="twitter:image" content="https://replit.com/public/images/opengraph.png" />
|
||||
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fira+Code:wght@300..700&family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Oxanium:wght@200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||||
<!-- Importing Oxanium (Tech/Display) and JetBrains Mono (Code/UI) and Share Tech Mono -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Orbitron:wght@400..900&family=Oxanium:wght@200..800&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
BIN
client/public/opengraph.jpg
Normal file
BIN
client/public/opengraph.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -2,15 +2,17 @@ import { Switch, Route } from "wouter";
|
|||
import { queryClient } from "./lib/queryClient";
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import NotFound from "@/pages/not-found";
|
||||
import Home from "@/pages/home";
|
||||
import Passport from "@/pages/passport";
|
||||
import Terminal from "@/pages/terminal";
|
||||
|
||||
function Router() {
|
||||
return (
|
||||
<Switch>
|
||||
{/* Add pages below */}
|
||||
{/* <Route path="/" component={Home}/> */}
|
||||
{/* Fallback to 404 */}
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/passport" component={Passport} />
|
||||
<Route path="/terminal" component={Terminal} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
);
|
||||
|
|
@ -19,10 +21,8 @@ function Router() {
|
|||
function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<Toaster />
|
||||
<Router />
|
||||
</TooltipProvider>
|
||||
<Toaster />
|
||||
<Router />
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,264 +8,92 @@
|
|||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--color-background: hsl(var(--background));
|
||||
--color-foreground: hsl(var(--foreground));
|
||||
|
||||
--color-card: hsl(var(--card));
|
||||
--color-card-foreground: hsl(var(--card-foreground));
|
||||
|
||||
--color-popover: hsl(var(--popover));
|
||||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||||
|
||||
--color-primary: hsl(var(--primary));
|
||||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||
|
||||
--color-secondary: hsl(var(--secondary));
|
||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||
|
||||
--color-muted: hsl(var(--muted));
|
||||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||||
|
||||
--color-accent: hsl(var(--accent));
|
||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||
|
||||
--color-destructive: hsl(var(--destructive));
|
||||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||||
|
||||
--color-border: hsl(var(--border));
|
||||
--color-primary-border: hsl(var(--primary-border));
|
||||
--color-accent-border: hsl(var(--accent-border));
|
||||
--color-card-border: hsl(var(--card-border));
|
||||
--color-input: hsl(var(--input));
|
||||
--color-ring: hsl(var(--ring));
|
||||
|
||||
--color-chart-1: hsl(var(--chart-1));
|
||||
--color-chart-2: hsl(var(--chart-2));
|
||||
--color-chart-3: hsl(var(--chart-3));
|
||||
--color-chart-4: hsl(var(--chart-4));
|
||||
--color-chart-5: hsl(var(--chart-5));
|
||||
--color-sidebar: hsl(var(--sidebar));
|
||||
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
||||
--color-sidebar-primary: hsl(var(--sidebar-primary));
|
||||
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
|
||||
--color-sidebar-accent: hsl(var(--sidebar-accent));
|
||||
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
|
||||
--color-sidebar-border: hsl(var(--sidebar-border));
|
||||
--color-sidebar-ring: hsl(var(--sidebar-ring));
|
||||
|
||||
/* Automatically computed borders: They're already hsl() wrapped. That's okay.
|
||||
* The only reason you don't want to wrap them in hsl() in theme tokens is so that
|
||||
* tailwind can create opacity utilities based on them, which is not important for
|
||||
* borders usually. */
|
||||
--color-sidebar-primary-border: var(--sidebar-primary-border);
|
||||
|
||||
--color-sidebar-accent-border: var(--sidebar-accent-border);
|
||||
|
||||
--color-primary-border: var(--primary-border);
|
||||
|
||||
--color-secondary-border: var(--secondary-border);
|
||||
|
||||
--color-muted-border: var(--muted-border);
|
||||
|
||||
--color-accent-border: var(--accent-border);
|
||||
|
||||
--color-destructive-border: var(--destructive-border);
|
||||
|
||||
|
||||
--font-display: 'Oxanium', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
--font-tech: 'Share Tech Mono', monospace;
|
||||
|
||||
--radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* LIGHT MODE */
|
||||
/* DARK MODE DEFAULT - AE-THEX THEME */
|
||||
:root {
|
||||
--button-outline: rgba(0,0,0, .10);
|
||||
--badge-outline: rgba(0,0,0, .05);
|
||||
|
||||
/* Automatic computation of border around primary / danger buttons */
|
||||
--opaque-button-border-intensity: -8; /* In terms of percentages */
|
||||
|
||||
/* Backgrounds applied on top of other backgrounds when hovered/active */
|
||||
--elevate-1: rgba(0,0,0, .03);
|
||||
--elevate-2: rgba(0,0,0, .08);
|
||||
|
||||
--background: red; /*replace with H S L */
|
||||
|
||||
--foreground: red; /*replace with H S L */
|
||||
|
||||
--border: red; /*replace with H S L */
|
||||
|
||||
--card: red; /*replace with H S L */
|
||||
|
||||
--card-foreground: red; /*replace with H S L */
|
||||
|
||||
--card-border: red; /*replace with H S L */
|
||||
|
||||
--sidebar: red; /*replace with H S L */
|
||||
|
||||
--sidebar-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-border: red; /*replace with H S L */
|
||||
|
||||
--sidebar-primary: red; /*replace with H S L */
|
||||
|
||||
--sidebar-primary-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-accent: red; /*replace with H S L */
|
||||
|
||||
--sidebar-accent-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-ring: red; /*replace with H S L */
|
||||
|
||||
--popover: red; /*replace with H S L */
|
||||
|
||||
--popover-foreground: red; /*replace with H S L */
|
||||
|
||||
--popover-border: red; /*replace with H S L */
|
||||
|
||||
--primary: red; /*replace with H S L */
|
||||
|
||||
--primary-foreground: red; /*replace with H S L */
|
||||
|
||||
--secondary: red; /*replace with H S L */
|
||||
|
||||
--secondary-foreground: red; /*replace with H S L */
|
||||
|
||||
--muted: red; /*replace with H S L */
|
||||
|
||||
--muted-foreground: red; /*replace with H S L */
|
||||
|
||||
--accent: red; /*replace with H S L */
|
||||
|
||||
--accent-foreground: red; /*replace with H S L */
|
||||
|
||||
--destructive: red; /*replace with H S L */
|
||||
|
||||
--destructive-foreground: red; /*replace with H S L */
|
||||
|
||||
--input: red; /*replace with H S L */
|
||||
--ring: red; /*replace with H S L */
|
||||
--chart-1: red; /*replace with H S L */
|
||||
--chart-2: red; /*replace with H S L */
|
||||
--chart-3: red; /*replace with H S L */
|
||||
--chart-4: red; /*replace with H S L */
|
||||
--chart-5: red; /*replace with H S L */
|
||||
|
||||
--font-sans: 'Inter', sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: Menlo, monospace;
|
||||
--radius: .5rem; /* 8px */
|
||||
--shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00); /*replace with H S L */
|
||||
--shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00); /*replace with H S L */
|
||||
--shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
/* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--sidebar-primary-border: hsl(var(--sidebar-primary));
|
||||
--sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--sidebar-accent-border: hsl(var(--sidebar-accent));
|
||||
--sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--primary-border: hsl(var(--primary));
|
||||
--primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--secondary-border: hsl(var(--secondary));
|
||||
--secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--muted-border: hsl(var(--muted));
|
||||
--muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--accent-border: hsl(var(--accent));
|
||||
--accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--destructive-border: hsl(var(--destructive));
|
||||
--destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--button-outline: rgba(255,255,255, .10);
|
||||
--badge-outline: rgba(255,255,255, .05);
|
||||
|
||||
--opaque-button-border-intensity: 9; /* In terms of percentages */
|
||||
|
||||
/* Backgrounds applied on top of other backgrounds when hovered/active */
|
||||
--elevate-1: rgba(255,255,255, .04);
|
||||
--elevate-2: rgba(255,255,255, .09);
|
||||
|
||||
--background: red; /*replace with H S L */
|
||||
|
||||
--foreground: red; /*replace with H S L */
|
||||
|
||||
--border: red; /*replace with H S L */
|
||||
|
||||
--card: red; /*replace with H S L */
|
||||
|
||||
--card-foreground: red; /*replace with H S L */
|
||||
|
||||
--card-border: red; /*replace with H S L */
|
||||
|
||||
--sidebar: red; /*replace with H S L */
|
||||
|
||||
--sidebar-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-border: red; /*replace with H S L */
|
||||
|
||||
--sidebar-primary: red; /*replace with H S L */
|
||||
|
||||
--sidebar-primary-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-accent: red; /*replace with H S L */
|
||||
|
||||
--sidebar-accent-foreground: red; /*replace with H S L */
|
||||
|
||||
--sidebar-ring: red; /*replace with H S L */
|
||||
|
||||
--popover: red; /*replace with H S L */
|
||||
|
||||
--popover-foreground: red; /*replace with H S L */
|
||||
|
||||
--popover-border: red; /*replace with H S L */
|
||||
|
||||
--primary: red; /*replace with H S L */
|
||||
|
||||
--primary-foreground: red; /*replace with H S L */
|
||||
|
||||
--secondary: red; /*replace with H S L */
|
||||
|
||||
--secondary-foreground: red; /*replace with H S L */
|
||||
|
||||
--muted: red; /*replace with H S L */
|
||||
|
||||
--muted-foreground: red; /*replace with H S L */
|
||||
|
||||
--accent: red; /*replace with H S L */
|
||||
|
||||
--accent-foreground: red; /*replace with H S L */
|
||||
|
||||
--destructive: red; /*replace with H S L */
|
||||
|
||||
--destructive-foreground: red; /*replace with H S L */
|
||||
|
||||
/* Used as the border around inputs. Dark mode: Should be a border that is light enough to have high contrast when rendered on a --card background. More contrast than standard --border */
|
||||
--input: red; /*replace with H S L */
|
||||
--ring: red; /*replace with H S L */
|
||||
--chart-1: red; /*replace with H S L */
|
||||
--chart-2: red; /*replace with H S L */
|
||||
--chart-3: red; /*replace with H S L */
|
||||
--chart-4: red; /*replace with H S L */
|
||||
--chart-5: red; /*replace with H S L */
|
||||
|
||||
--shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
--shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
|
||||
|
||||
/* Dark Void Background */
|
||||
--background: 240 10% 4%;
|
||||
--foreground: 240 5% 90%;
|
||||
|
||||
/* UI Card - Darker Grey */
|
||||
--card: 240 10% 6%;
|
||||
--card-foreground: 240 5% 90%;
|
||||
|
||||
--popover: 240 10% 6%;
|
||||
--popover-foreground: 240 5% 90%;
|
||||
|
||||
/* Primary - Neon Gold / Amber */
|
||||
--primary: 45 100% 50%;
|
||||
--primary-foreground: 240 10% 4%;
|
||||
|
||||
/* Secondary - System Cyan */
|
||||
--secondary: 180 100% 40%;
|
||||
--secondary-foreground: 240 10% 4%;
|
||||
|
||||
/* Muted - Utility Grey */
|
||||
--muted: 240 5% 15%;
|
||||
--muted-foreground: 240 5% 60%;
|
||||
|
||||
/* Accent - High Tech Blue highlight */
|
||||
--accent: 200 90% 20%;
|
||||
--accent-foreground: 200 100% 80%;
|
||||
|
||||
/* Destructive - Alert Red */
|
||||
--destructive: 0 90% 40%;
|
||||
--destructive-foreground: 0 100% 95%;
|
||||
|
||||
--border: 240 5% 20%;
|
||||
--input: 240 5% 20%;
|
||||
--ring: 45 100% 50%; /* Gold Ring */
|
||||
|
||||
--radius: 0.25rem;
|
||||
|
||||
--chart-1: 45 100% 50%;
|
||||
--chart-2: 180 100% 50%;
|
||||
--chart-3: 200 100% 50%;
|
||||
--chart-4: 280 100% 50%;
|
||||
--chart-5: 0 100% 50%;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
|
@ -273,118 +101,30 @@
|
|||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
@apply font-mono antialiased bg-background text-foreground;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-display tracking-wide uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Using the elevate system.
|
||||
* Automatic contrast adjustment.
|
||||
*
|
||||
* <element className="hover-elevate" />
|
||||
* <element className="active-elevate-2" />
|
||||
*
|
||||
* // Using the tailwind utility when a data attribute is "on"
|
||||
* <element className="toggle-elevate data-[state=on]:toggle-elevated" />
|
||||
* // Or manually controlling the toggle state
|
||||
* <element className="toggle-elevate toggle-elevated" />
|
||||
*
|
||||
* Elevation systems have to handle many states.
|
||||
* - not-hovered, vs. hovered vs. active (three mutually exclusive states)
|
||||
* - toggled or not
|
||||
* - focused or not (this is not handled with these utilities)
|
||||
*
|
||||
* Even without handling focused or not, this is six possible combinations that
|
||||
* need to be distinguished from eachother visually.
|
||||
*/
|
||||
@layer utilities {
|
||||
|
||||
/* Hide ugly search cancel button in Chrome until we can style it properly */
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
@apply hidden;
|
||||
.text-glow {
|
||||
text-shadow: 0 0 10px currentColor;
|
||||
}
|
||||
|
||||
/* Placeholder styling for contentEditable div */
|
||||
[contenteditable][data-placeholder]:empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: hsl(var(--muted-foreground));
|
||||
.box-glow {
|
||||
box-shadow: 0 0 20px -5px currentColor;
|
||||
}
|
||||
.scanline {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255,255,255,0),
|
||||
rgba(255,255,255,0) 50%,
|
||||
rgba(0,0,0,0.1) 50%,
|
||||
rgba(0,0,0,0.1)
|
||||
);
|
||||
background-size: 100% 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
|
||||
* buttons/badges can remove the automatic brightness adjustment on interactions
|
||||
* and program their own. */
|
||||
.no-default-hover-elevate {}
|
||||
|
||||
.no-default-active-elevate {}
|
||||
|
||||
|
||||
/**
|
||||
* Toggleable backgrounds go behind the content. Hoverable/active goes on top.
|
||||
* This way they can stack/compound. Both will overlap the parent's borders!
|
||||
* So borders will be automatically adjusted both on toggle, and hover/active,
|
||||
* and they will be compounded.
|
||||
*/
|
||||
.toggle-elevate::before,
|
||||
.toggle-elevate-2::before {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
/*border-radius: inherit; match rounded corners */
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
/* sits behind content but above backdrop */
|
||||
}
|
||||
|
||||
.toggle-elevate.toggle-elevated::before {
|
||||
background-color: var(--elevate-2);
|
||||
}
|
||||
|
||||
/* If there's a 1px border, adjust the inset so that it covers that parent's border */
|
||||
.border.toggle-elevate::before {
|
||||
inset: -1px;
|
||||
}
|
||||
|
||||
/* Does not work on elements with overflow:hidden! */
|
||||
.hover-elevate:not(.no-default-hover-elevate),
|
||||
.active-elevate:not(.no-default-active-elevate),
|
||||
.hover-elevate-2:not(.no-default-hover-elevate),
|
||||
.active-elevate-2:not(.no-default-active-elevate) {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hover-elevate:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate:not(.no-default-active-elevate)::after,
|
||||
.hover-elevate-2:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate-2:not(.no-default-active-elevate)::after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
/*border-radius: inherit; match rounded corners */
|
||||
border-radius: inherit;
|
||||
z-index: 999;
|
||||
/* sits in front of content */
|
||||
}
|
||||
|
||||
.hover-elevate:hover:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate:active:not(.no-default-active-elevate)::after {
|
||||
background-color: var(--elevate-1);
|
||||
}
|
||||
|
||||
.hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate-2:active:not(.no-default-active-elevate)::after {
|
||||
background-color: var(--elevate-2);
|
||||
}
|
||||
|
||||
/* If there's a 1px border, adjust the inset so that it covers that parent's border */
|
||||
.border.hover-elevate:not(.no-hover-interaction-elevate)::after,
|
||||
.border.active-elevate:not(.no-active-interaction-elevate)::after,
|
||||
.border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
|
||||
.border.active-elevate-2:not(.no-active-interaction-elevate)::after,
|
||||
.border.hover-elevate:not(.no-hover-interaction-elevate)::after {
|
||||
inset: -1px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
110
client/src/pages/home.tsx
Normal file
110
client/src/pages/home.tsx
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import { motion } from "framer-motion";
|
||||
import { Link } from "wouter";
|
||||
import { Shield, FileCode, Terminal as TerminalIcon, ChevronRight } from "lucide-react";
|
||||
import gridBg from '@assets/generated_images/dark_subtle_digital_grid_texture.png';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground font-mono selection:bg-primary selection:text-background relative overflow-hidden">
|
||||
{/* Background Texture */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-20 pointer-events-none z-0"
|
||||
style={{ backgroundImage: `url(${gridBg})`, backgroundSize: 'cover' }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 container mx-auto px-4 py-20 flex flex-col items-center justify-center min-h-screen">
|
||||
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-center mb-16 space-y-4"
|
||||
>
|
||||
<div className="inline-block border border-primary/30 px-3 py-1 text-xs text-primary tracking-widest uppercase mb-4 bg-primary/5">
|
||||
System Online: v4.2
|
||||
</div>
|
||||
<h1 className="text-6xl md:text-8xl font-display font-bold tracking-tighter uppercase text-white mb-2 text-glow">
|
||||
AeThex
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-lg md:text-xl max-w-2xl mx-auto font-tech">
|
||||
The Operating System for the Metaverse.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* 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">
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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.
|
||||
</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>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Aegis (Link to 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"
|
||||
>
|
||||
<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.
|
||||
</p>
|
||||
<div className="flex items-center text-destructive hover:text-destructive/80 text-sm font-bold uppercase tracking-wider">
|
||||
Launch Terminal <ChevronRight className="w-4 h-4 ml-1" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="mt-24 text-center text-xs text-muted-foreground/50 uppercase tracking-widest"
|
||||
>
|
||||
AeThex Foundry © 2025 // Authorized Personnel Only
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
130
client/src/pages/passport.tsx
Normal file
130
client/src/pages/passport.tsx
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
import { motion } from "framer-motion";
|
||||
import { Link } from "wouter";
|
||||
import { ArrowLeft, CheckCircle2, ShieldCheck, Fingerprint } from "lucide-react";
|
||||
import sealImg from '@assets/generated_images/holographic_digital_security_seal_for_certification.png';
|
||||
import gridBg from '@assets/generated_images/dark_subtle_digital_grid_texture.png';
|
||||
|
||||
export default function Passport() {
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-foreground font-mono relative flex items-center justify-center p-4">
|
||||
{/* Background */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-10 pointer-events-none z-0"
|
||||
style={{ backgroundImage: `url(${gridBg})`, backgroundSize: 'cover' }}
|
||||
/>
|
||||
|
||||
<Link href="/">
|
||||
<button className="absolute top-8 left-8 text-muted-foreground hover:text-primary transition-colors flex items-center gap-2 uppercase text-xs tracking-widest z-50">
|
||||
<ArrowLeft className="w-4 h-4" /> Return to Axiom
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="relative w-full max-w-2xl bg-card border border-primary/20 shadow-[0_0_50px_-12px_rgba(234,179,8,0.2)] overflow-hidden"
|
||||
>
|
||||
{/* Holographic Overlay Effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-primary/5 via-transparent to-secondary/5 pointer-events-none z-10" />
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-primary/50 z-20" />
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-black/40 p-6 border-b border-primary/20 flex justify-between items-start relative z-20">
|
||||
<div>
|
||||
<h1 className="text-xl md:text-2xl font-display font-bold text-white tracking-widest uppercase">
|
||||
AeThex Foundry
|
||||
</h1>
|
||||
<p className="text-primary text-xs uppercase tracking-[0.2em] mt-1">
|
||||
Architect Credential
|
||||
</p>
|
||||
</div>
|
||||
<img src={sealImg} alt="Seal" className="w-16 h-16 opacity-80 animate-pulse" />
|
||||
</div>
|
||||
|
||||
{/* Content Grid */}
|
||||
<div className="p-8 grid grid-cols-1 md:grid-cols-2 gap-8 relative z-20">
|
||||
|
||||
{/* Left Column: ID Info */}
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] text-muted-foreground uppercase tracking-widest">ID Number</label>
|
||||
<div className="text-xl font-tech text-white tracking-wider">AX-2025-001-GLD</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] text-muted-foreground uppercase tracking-widest">Name</label>
|
||||
<div className="text-lg font-bold text-white uppercase">Alex "Cipher" Chen</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] text-muted-foreground uppercase tracking-widest">Rank</label>
|
||||
<div className="flex items-center gap-2 text-primary font-bold uppercase tracking-wider">
|
||||
<ShieldCheck className="w-4 h-4" /> Architect (Gold Stamp)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] text-muted-foreground uppercase tracking-widest">Clearance</label>
|
||||
<div className="inline-block bg-primary/10 text-primary border border-primary/30 px-3 py-1 text-xs font-bold uppercase tracking-wider">
|
||||
Level 5 (Full Trust)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Certification */}
|
||||
<div className="space-y-6 border-l border-white/10 md:pl-8">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-sm font-bold text-white uppercase tracking-widest border-b border-white/10 pb-2 mb-4">
|
||||
The Codex Standard v1.0
|
||||
</h3>
|
||||
|
||||
<ul className="space-y-3">
|
||||
<li className="flex justify-between items-center text-sm">
|
||||
<span className="text-muted-foreground">Data Ethics & PII Law</span>
|
||||
<span className="text-secondary font-bold flex items-center gap-1 text-xs uppercase tracking-wider">
|
||||
<CheckCircle2 className="w-3 h-3" /> Passed
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex justify-between items-center text-sm">
|
||||
<span className="text-muted-foreground">Input Sanitization</span>
|
||||
<span className="text-secondary font-bold flex items-center gap-1 text-xs uppercase tracking-wider">
|
||||
<CheckCircle2 className="w-3 h-3" /> Passed
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex justify-between items-center text-sm">
|
||||
<span className="text-muted-foreground">The Kill-Gate Protocol</span>
|
||||
<span className="text-secondary font-bold flex items-center gap-1 text-xs uppercase tracking-wider">
|
||||
<CheckCircle2 className="w-3 h-3" /> Passed
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-white/10 opacity-70">
|
||||
<div className="flex items-center gap-3">
|
||||
<Fingerprint className="w-8 h-8 text-primary/50" />
|
||||
<div className="text-[10px] text-muted-foreground font-tech">
|
||||
<div className="uppercase">Immutable Ledger Hash</div>
|
||||
<div className="truncate w-32">0x7f23b9c02a9</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-[10px] italic text-muted-foreground/60 text-right">
|
||||
Verified by The AeThex Foundry
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer Bar */}
|
||||
<div className="bg-primary/5 p-2 text-center border-t border-primary/20">
|
||||
<div className="text-[10px] text-primary/60 tracking-[0.3em] uppercase">
|
||||
Official Certification Document // Do Not Copy
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
180
client/src/pages/terminal.tsx
Normal file
180
client/src/pages/terminal.tsx
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
import { useState, useEffect } 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";
|
||||
|
||||
export default function Terminal() {
|
||||
const [logs, setLogs] = useState<string[]>([
|
||||
"> SYSTEM DIAGNOSTICS...",
|
||||
"> CHECKING DEPENDENCIES...",
|
||||
"> AEGIS CORE: ........................... [ ACTIVE ]",
|
||||
"> PII SCRUBBER: ......................... [ ENGAGED ]",
|
||||
"> SHADOW LOGGING: ....................... [ RECORDING ]"
|
||||
]);
|
||||
|
||||
const [showError, setShowError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate typing/loading effect
|
||||
const timer = setTimeout(() => {
|
||||
setLogs(prev => [...prev, "! WARNING: Line 45 detects potential phone number input."]);
|
||||
setShowError(true);
|
||||
}, 2000);
|
||||
|
||||
const timer2 = setTimeout(() => {
|
||||
if(showError) {
|
||||
setLogs(prev => [...prev, "> AEGIS INTERVENTION: Input blocked."]);
|
||||
}
|
||||
}, 3500);
|
||||
|
||||
return () => { clearTimeout(timer); clearTimeout(timer2); };
|
||||
}, [showError]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0a0c] text-[#a9b7c6] font-mono flex flex-col overflow-hidden">
|
||||
|
||||
{/* 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="flex items-center gap-4">
|
||||
<Link href="/">
|
||||
<button className="text-muted-foreground hover:text-white transition-colors">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 bg-[#1e1f22] border-r border-[#2b2d30] hidden md:flex flex-col">
|
||||
<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">
|
||||
<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="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Editor Area */}
|
||||
<div className="flex-1 flex flex-col 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">
|
||||
{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">
|
||||
<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>
|
||||
<div className="pl-8 text-gray-500"># Validate input length</div>
|
||||
<div className="pl-8"><span className="text-purple-400">if</span> (Input.Length > 100):</div>
|
||||
<div className="pl-12"><span className="text-purple-400">return</span></div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Terminal Output */}
|
||||
<div className="h-48 bg-[#0f1011] border-t border-[#2b2d30] p-4 font-mono text-xs overflow-y-auto">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
{logs.map((log, i) => (
|
||||
<motion.div
|
||||
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"}`}
|
||||
>
|
||||
{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>
|
||||
</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