diff --git a/attached_assets/Pasted-The-Brother-s-Office-concept-is-the-ultimate-storytelli_1765941548294.txt b/attached_assets/Pasted-The-Brother-s-Office-concept-is-the-ultimate-storytelli_1765941548294.txt new file mode 100644 index 0000000..d91807c --- /dev/null +++ b/attached_assets/Pasted-The-Brother-s-Office-concept-is-the-ultimate-storytelli_1765941548294.txt @@ -0,0 +1,111 @@ +The "Brother's Office" concept is the ultimate storytelling device. It turns your OS from a static website into a **narrative engine**. By giving the Corp and Foundation distinct "logins," you allow users (investors or recruits) to physically toggle between the two brains of the company. + +Here is the detailed breakdown of how we implement this split, using your specific color palettes. + +### 1. The Visual Identity: Fire & Ice + +You aren't just changing a hex code; you are changing the emotional temperature of the screen. + +**The Foundation (You / The Architect)** + +* **Palette:** **Crimson Red & Brushed Gold.** +* **The Vibe:** *Revolutionary Luxury.* Think "Iron Man’s HUD" meets "Cyberpunk Resistance." It feels warm, dangerous, and expensive. +* **UI Style:** +* **Borders:** Distressed gold edges. +* **Typography:** Monospace / Terminal fonts (Coder aesthetic). +* **Motion:** Fast, glitchy, energetic animations. +* **Background:** A red/gold nebula or a chaotic workshop bench. + + + +**The Corp (Your Brother / The Executor)** + +* **Palette:** **Deep Navy Blue & Chrome Silver.** +* **The Vibe:** *Absolute Order.* Think "Abstergo" or "The Apple Store." It feels cold, efficient, and massive. +* **UI Style:** +* **Borders:** Clean silver/chrome lines. +* **Typography:** Sleek Sans-Serif (Helvetica/Inter) – very corporate. +* **Motion:** Smooth, slow, "heavy" animations (like a bank vault door opening). +* **Background:** A global wireframe map in silver on a deep blue void. + + + +--- + +### 2. The "Switch User" Experience (The Animation) + +This is the "Wow" moment. You add a specialized button in the Start Menu called **"SWITCH CLEARANCE"**. + +* **When you click it:** +1. The screen "crashes" or creates a warp-speed effect. +2. **Sound Design:** +* *Switching to Foundation:* A distorted electric guitar riff or a synth "power up" sound. +* *Switching to Corp:* A deep bass "thrum" (like a server room humming) or a pristine chime. + + +3. **The Reboot:** The OS reloads with the new color scheme and—crucially—**different desktop icons.** + + + +--- + +### 3. The Two Desktops (Different Tools for Different Jobs) + +This is how you use the OS to sell. You don't just show different colors; you show different *worlds*. + +#### **Login A: The Foundation (Red & Gold)** + +*Target Audience: Talent, Developers, Creatives.* + +* **The Desktop:** Messy. Organized chaos. "Sticky notes" on the screen with ideas. +* **Exclusive Apps:** +* **"The Lab":** Floating code snippets or 3D models of assets you are working on. +* **"Radio AeThex":** Your music player is open and active here. +* **"Manifesto.txt":** The philosophical documents (Axiom) are front and center. +* **"Bounty Board":** The list of active developer challenges. + + +* **The Narrative:** "This is where we dream. This is where we break things to see how they work." + +#### **Login B: The Corp (Blue & Silver)** + +*Target Audience: Investors, Partners, "Suits".* + +* **The Desktop:** Immaculate. Snapped to a grid. Minimalist. +* **Exclusive Apps:** +* **"Global Ops" (The Map):** A blue/silver world map showing where your servers/players are active. +* **"The Ledger":** Real-time graphs of "Revenue," "User Growth," and "Server Uptime" (Mocked up or real). +* **"Asset Library":** A clean gallery of the IP you own (formatted like a stock portfolio). +* **"Contracts":** A folder that (when clicked) opens your standard partnership agreements. + + +* **The Narrative:** "This is where we scale. This is the machine that prints the money." + +--- + +### 4. How to Use This in a Pitch + +Imagine you are in a meeting with a skeptical VC. You have the **Blue & Silver (Corp)** profile open. + +1. **The Corp Pitch:** +* You show the **"Global Ops"** map. You show the growth charts. You speak your brother’s language: *Scale, Infrastructure, Stability.* +* *They think:* "Okay, this is a serious business." + + +2. **The Turn:** +* You pause and say: *"But the numbers are just the result. Let me show you the cause."* +* You click **SWITCH CLEARANCE**. +* *Boom.* The screen turns Red & Gold. The music kicks in. The "code" appears. + + +3. **The Foundation Pitch:** +* Now you show the **"Bounty Board."** You show the **"Manifesto."** You show the passion. +* *You say:* "My brother runs the Blue world to keep us safe. I run the Red world to keep us dangerous. You are investing in both." + + + +### Next Step + +To build this, we need to configure your **Tauri app** to handle "Theming" (CSS Variables). + +**Shall I generate the CSS code block that defines these two specific color themes (Corp Blue/Silver vs. Foundation Red/Gold) so you can drop it into your project?** \ No newline at end of file diff --git a/client/src/pages/os.tsx b/client/src/pages/os.tsx index d67863c..c9a0b7d 100644 --- a/client/src/pages/os.tsx +++ b/client/src/pages/os.tsx @@ -58,6 +58,51 @@ const ACCENT_COLORS = [ { id: 'red', name: 'Red', color: '#ef4444', ring: 'ring-red-400/50', shadow: 'shadow-red-500/20', bg: 'bg-red-500' }, ]; +type ClearanceMode = 'foundation' | 'corp'; + +interface ClearanceTheme { + id: ClearanceMode; + name: string; + title: string; + subtitle: string; + primary: string; + secondary: string; + accent: string; + accentSecondary: string; + wallpaper: string; + borderStyle: string; + fontStyle: string; +} + +const CLEARANCE_THEMES: Record = { + foundation: { + id: 'foundation', + name: 'The Foundation', + title: 'FOUNDATION', + subtitle: 'The Architect\'s Domain', + primary: '#DC2626', + secondary: '#D4AF37', + accent: '#DC2626', + accentSecondary: '#D4AF37', + wallpaper: 'radial-gradient(ellipse at 30% 20%, #4a1515 0%, #1a0505 40%, #0a0202 100%)', + borderStyle: 'border-yellow-600/40', + fontStyle: 'font-mono', + }, + corp: { + id: 'corp', + name: 'The Corp', + title: 'CORPORATION', + subtitle: 'Executive Operations', + primary: '#0F172A', + secondary: '#C0C0C0', + accent: '#3B82F6', + accentSecondary: '#C0C0C0', + wallpaper: 'radial-gradient(ellipse at 70% 80%, #1e3a5f 0%, #0f172a 40%, #050a14 100%)', + borderStyle: 'border-slate-400/30', + fontStyle: 'font-sans', + }, +}; + interface DesktopApp { id: string; title: string; @@ -118,6 +163,12 @@ export default function AeThexOS() { const saved = localStorage.getItem('aethex-layouts'); return saved ? JSON.parse(saved) : []; }); + const [clearanceMode, setClearanceMode] = useState(() => { + const saved = localStorage.getItem('aethex-clearance'); + return (saved as ClearanceMode) || 'foundation'; + }); + const [isSwitchingClearance, setIsSwitchingClearance] = useState(false); + const clearanceTheme = CLEARANCE_THEMES[clearanceMode]; const desktopRef = useRef(null); const idleTimer = useRef(null); const spotlightRef = useRef(null); @@ -148,6 +199,24 @@ export default function AeThexOS() { localStorage.setItem('aethex-layouts', JSON.stringify(savedLayouts)); }, [savedLayouts]); + useEffect(() => { + localStorage.setItem('aethex-clearance', clearanceMode); + }, [clearanceMode]); + + const switchClearance = useCallback(() => { + const newMode: ClearanceMode = clearanceMode === 'foundation' ? 'corp' : 'foundation'; + setIsSwitchingClearance(true); + setShowStartMenu(false); + + setTimeout(() => { + setClearanceMode(newMode); + setTimeout(() => { + setIsSwitchingClearance(false); + addToast(`Switched to ${CLEARANCE_THEMES[newMode].name}`, 'success'); + }, 800); + }, 600); + }, [clearanceMode, addToast]); + useEffect(() => { const bootSequence = async () => { const steps = [ @@ -269,28 +338,35 @@ export default function AeThexOS() { } }, [windows]); - const apps: DesktopApp[] = [ + const foundationApps: DesktopApp[] = [ { id: "terminal", title: "Terminal", icon: , component: "terminal", defaultWidth: 750, defaultHeight: 500 }, + { id: "codeeditor", title: "The Lab", icon: , component: "codeeditor", defaultWidth: 700, defaultHeight: 500 }, + { id: "music", title: "Radio AeThex", icon: , component: "music", defaultWidth: 400, defaultHeight: 350 }, + { id: "notes", title: "Manifesto", icon: , component: "notes", defaultWidth: 400, defaultHeight: 450 }, + { id: "achievements", title: "Bounty Board", icon: , component: "achievements", defaultWidth: 600, defaultHeight: 500 }, { id: "passport", title: "Passport", icon: , component: "passport", defaultWidth: 500, defaultHeight: 600 }, { id: "files", title: "Projects", icon: , component: "files", defaultWidth: 700, defaultHeight: 500 }, - { id: "network", title: "Network", icon: , component: "network", defaultWidth: 700, defaultHeight: 550 }, - { id: "metrics", title: "Metrics", icon: , component: "metrics", defaultWidth: 750, defaultHeight: 550 }, - { id: "codeeditor", title: "Code", icon: , component: "codeeditor", defaultWidth: 700, defaultHeight: 500 }, - { id: "newsfeed", title: "News", icon: , component: "newsfeed", defaultWidth: 450, defaultHeight: 550 }, { id: "arcade", title: "Arcade", icon: , component: "arcade", defaultWidth: 420, defaultHeight: 520 }, - { id: "profiles", title: "Profiles", icon: , component: "profiles", defaultWidth: 650, defaultHeight: 550 }, - { id: "leaderboard", title: "Leaderboard", icon: , component: "leaderboard", defaultWidth: 500, defaultHeight: 550 }, - { id: "calculator", title: "Calculator", icon: , component: "calculator", defaultWidth: 320, defaultHeight: 450 }, - { id: "notes", title: "Notes", icon: , component: "notes", defaultWidth: 400, defaultHeight: 450 }, - { id: "sysmonitor", title: "System", icon: , component: "sysmonitor", defaultWidth: 450, defaultHeight: 400 }, - { id: "webcam", title: "Aegis Cam", icon: , component: "webcam", defaultWidth: 500, defaultHeight: 450 }, - { id: "achievements", title: "Achievements", icon: , component: "achievements", defaultWidth: 600, defaultHeight: 500 }, - { id: "chat", title: "Chat", icon: , component: "chat", defaultWidth: 400, defaultHeight: 500 }, - { id: "music", title: "Ambient", icon: , component: "music", defaultWidth: 400, defaultHeight: 350 }, - { id: "pitch", title: "Pitch Deck", icon: , component: "pitch", defaultWidth: 500, defaultHeight: 400 }, + { id: "profiles", title: "Architects", icon: , component: "profiles", defaultWidth: 650, defaultHeight: 550 }, + { id: "chat", title: "Comms", icon: , component: "chat", defaultWidth: 400, defaultHeight: 500 }, { id: "settings", title: "Settings", icon: , component: "settings", defaultWidth: 550, defaultHeight: 500 }, ]; + const corpApps: DesktopApp[] = [ + { id: "network", title: "Global Ops", icon: , component: "network", defaultWidth: 700, defaultHeight: 550 }, + { id: "metrics", title: "The Ledger", icon: , component: "metrics", defaultWidth: 750, defaultHeight: 550 }, + { id: "files", title: "Asset Library", icon: , component: "files", defaultWidth: 700, defaultHeight: 500 }, + { id: "pitch", title: "Contracts", icon: , component: "pitch", defaultWidth: 500, defaultHeight: 400 }, + { id: "profiles", title: "Personnel", icon: , component: "profiles", defaultWidth: 650, defaultHeight: 550 }, + { id: "sysmonitor", title: "Infrastructure", icon: , component: "sysmonitor", defaultWidth: 450, defaultHeight: 400 }, + { id: "leaderboard", title: "Performance", icon: , component: "leaderboard", defaultWidth: 500, defaultHeight: 550 }, + { id: "newsfeed", title: "Intel Feed", icon: , component: "newsfeed", defaultWidth: 450, defaultHeight: 550 }, + { id: "calculator", title: "Calculator", icon: , component: "calculator", defaultWidth: 320, defaultHeight: 450 }, + { id: "settings", title: "Settings", icon: , component: "settings", defaultWidth: 550, defaultHeight: 500 }, + ]; + + const apps = clearanceMode === 'foundation' ? foundationApps : corpApps; + const playSound = useCallback((type: 'open' | 'close' | 'minimize' | 'click') => { if (!soundEnabled) return; // Visual feedback instead of actual sound @@ -561,8 +637,8 @@ export default function AeThexOS() { return (
+ + {isSwitchingClearance && ( + + + + + {clearanceMode === 'foundation' ? 'Entering Corp' : 'Entering Foundation'} + + + + + )} + + @@ -991,6 +1116,8 @@ interface TaskbarProps { onNavigate: (path: string) => void; currentDesktop: number; onDesktopChange: (d: number) => void; + clearanceTheme: ClearanceTheme; + onSwitchClearance: () => void; } function Skeleton({ className = "", animate = true }: { className?: string; animate?: boolean }) { @@ -1198,7 +1325,7 @@ function OnboardingTour({ step, onNext, onClose }: { step: number; onNext: () => ); } -function Taskbar({ windows, activeWindowId, apps, time, showStartMenu, user, isAuthenticated, notifications, showNotifications, onToggleStartMenu, onToggleNotifications, onWindowClick, onAppClick, onLogout, onNavigate, currentDesktop, onDesktopChange }: TaskbarProps) { +function Taskbar({ windows, activeWindowId, apps, time, showStartMenu, user, isAuthenticated, notifications, showNotifications, onToggleStartMenu, onToggleNotifications, onWindowClick, onAppClick, onLogout, onNavigate, currentDesktop, onDesktopChange, clearanceTheme, onSwitchClearance }: TaskbarProps) { return ( <> @@ -1207,18 +1334,27 @@ function Taskbar({ windows, activeWindowId, apps, time, showStartMenu, user, isA initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 20 }} - className="absolute bottom-12 left-2 w-72 bg-slate-900/95 backdrop-blur-xl border border-white/10 rounded-lg overflow-hidden shadow-2xl" - style={{ zIndex: 9999 }} + className="absolute bottom-12 left-2 w-72 backdrop-blur-xl rounded-lg overflow-hidden shadow-2xl transition-all duration-300" + style={{ + zIndex: 9999, + background: clearanceTheme.id === 'foundation' ? 'rgba(26, 5, 5, 0.95)' : 'rgba(15, 23, 42, 0.95)', + border: `1px solid ${clearanceTheme.id === 'foundation' ? 'rgba(212, 175, 55, 0.3)' : 'rgba(192, 192, 192, 0.2)'}` + }} onClick={(e) => e.stopPropagation()} > -
+
-
+
{isAuthenticated ? : A}
-
{isAuthenticated ? user?.username : 'Guest'}
-
{isAuthenticated ? (user?.isAdmin ? 'Administrator' : 'Architect') : 'Not logged in'}
+
{isAuthenticated ? user?.username : 'Guest'}
+
+ {clearanceTheme.title} +
{isAuthenticated && ( ))}
@@ -1247,16 +1391,61 @@ function Taskbar({ windows, activeWindowId, apps, time, showStartMenu, user, isA
)} + +
+ +
)} -
-