feat: initialize OneOSS Hydrogen Box project

Set up the project structure using Vite, React, and Tailwind CSS. Added initial landing page components, assets, and build configuration for the OneOSS Hydrogen Safety & Carbon Factor Box application.
2026-05-27 16:12:01 +08:00
parent 9f44addf63
commit b1e24bba44
20 changed files with 1080 additions and 9 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,9 @@
+# GEMINI_API_KEY: Required for Gemini AI API calls.
+# AI Studio automatically injects this at runtime from user secrets.
+# Users configure this via the Secrets panel in the AI Studio UI.
+GEMINI_API_KEY="MY_GEMINI_API_KEY"
+
+# APP_URL: The URL where this applet is hosted.
+# AI Studio automatically injects this at runtime with the Cloud Run service URL.
+# Used for self-referential links, OAuth callbacks, and API endpoints.
+APP_URL="MY_APP_URL"
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+build/
+dist/
+coverage/
+.DS_Store
+*.log
+.env*
+!.env.example
--- a/README.md
+++ b/README.md
@@ -1,11 +1,20 @@
 <div align="center">
-
-<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
-
-  <h1>Built with AI Studio</h2>
-
-  <p>The fastest path from prompt to production with Gemini.</p>
-
-  <a href="https://aistudio.google.com/apps">Start building</a>
-
+<img width="1200" height="475" alt="GHBanner" src="https://ai.google.dev/static/site-assets/images/share-ais-513315318.png" />
 </div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/04192c90-3a0d-4b46-b2d6-3ab221401a34
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`
--- a/assets/.aistudio/.gitignore
+++ b/assets/.aistudio/.gitignore
@@ -0,0 +1 @@
+*
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Google AI Studio App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+
--- a/metadata.json
+++ b/metadata.json
@@ -0,0 +1,6 @@
+{
+  "name": "OneOSS Hydrogen Box",
+  "description": "Product landing page for the futuristic OneOSS Hydrogen Safety & Carbon Factor Box.",
+  "requestFramePermissions": [],
+  "majorCapabilities": ["MAJOR_CAPABILITY_SERVER_SIDE_GEMINI_API"]
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3000 --host=0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist server.js",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@google/genai": "^2.4.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@vitejs/plugin-react": "^5.0.4",
+    "lucide-react": "^0.546.0",
+    "react": "^19.0.1",
+    "react-dom": "^19.0.1",
+    "vite": "^6.2.3",
+    "express": "^4.21.2",
+    "dotenv": "^17.2.3",
+    "motion": "^12.23.24"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "autoprefixer": "^10.4.21",
+    "esbuild": "^0.25.0",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.21.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.3",
+    "@types/express": "^4.17.21"
+  }
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,914 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { 
+  Activity, ShieldCheck, Zap, Server, ChevronRight,
+  Database, Cpu, Cloud, Truck, Factory, Building, Target,
+  Leaf, AlertTriangle, Wind, Thermometer, Gauge, Navigation,
+  Settings, Battery, Link2, Share2, Search, LineChart, BarChart,
+  Radio, HardDrive, Network, MapPin, CheckCircle2, Factory as FactoryIcon, ShieldAlert, Workflow,
+  Maximize2, Eye, Sliders, Flame, Compass, RefreshCw
+} from 'lucide-react';
+
+// --- Import assets ---
+import oneossBoxImage from './assets/images/oneoss_box_1779852084134.png';
+import oneossSideFacet from './assets/images/oneoss_side_facet_1779862455874.png';
+import oneossTopFacet from './assets/images/oneos_top_facet_1779864912925.png';
+import scenarioFleetImage from './assets/images/scenario_fleet_1779863559233.png';
+import scenarioStationImage from './assets/images/scenario_station_1779863574991.png';
+import scenarioDatacenterImage from './assets/images/scenario_datacenter_1779863590420.png';
+
+// --- Reusable Compact Architecture Component ---
+
+const CompactArchCard = ({ title, children, className = "", headerClass = "bg-[#121212]" }: { title?: React.ReactNode, children: React.ReactNode, className?: string, headerClass?: string }) => (
+  <div className={`bg-[#0D0D0D]/90 border border-neutral-800/80 rounded shadow-lg flex flex-col overflow-hidden relative transition-all duration-300 hover:border-[#00F2FF]/40 ${className}`}>
+    {/* Decorative micro LED accent on card edge */}
+    <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#00F2FF]/20 to-transparent"></div>
+    {title && (
+      <div className={`${headerClass} px-3 py-1.5 border-b border-neutral-800/60 text-[10px] font-extrabold tracking-wider uppercase text-neutral-300 flex items-center justify-between`}>
+        {title}
+      </div>
+    )}
+    <div className="p-3 flex flex-col gap-2 flex-1 relative z-10 font-sans">
+      {children}
+    </div>
+  </div>
+);
+
+const CompactArchList = ({ items }: { items: { icon?: any, text: string, textEn?: string }[] }) => (
+  <ul className="flex flex-col gap-1.5 text-[10px] text-neutral-400">
+    {items.map((item, i) => {
+      const Icon = item.icon;
+      return (
+        <li key={i} className="flex items-start gap-1.5 leading-tight">
+          {Icon ? (
+            <Icon size={11} className="text-[#00F2FF] shrink-0 mt-[2px]" />
+          ) : (
+            <div className="w-[3px] h-[3px] bg-[#00F2FF] rounded-full shadow-[0_0_4px_#00F2FF] shrink-0 mt-[6px]"></div>
+          )}
+          <div className="flex flex-col">
+            <span className="text-neutral-200">{item.text}</span>
+            {item.textEn && <span className="text-[8px] font-mono text-neutral-600 uppercase tracking-tight">{item.textEn}</span>}
+          </div>
+        </li>
+      );
+    })}
+  </ul>
+);
+
+type StylePreset = 'cyan' | 'amber' | 'crimson';
+
+interface PerspectiveFacet {
+  id: string;
+  nameCn: string;
+  nameEn: string;
+  image: string;
+  descriptionCn: string;
+  descriptionEn: string;
+  specs: { label: string; value: string }[];
+}
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState<'overview' | 'architecture'>('overview');
+  
+  // Custom futuristic theme/preset selector state
+  const [styleTheme, setStyleTheme] = useState<StylePreset>('cyan');
+
+  // Interactive Perspective Switcher State
+  const [activeFacet, setActiveFacet] = useState<string>('top');
+
+  const themes = {
+    cyan: {
+      accent: '#00F2FF',
+      glow: 'shadow-[0_0_20px_rgba(0,242,255,0.25)]',
+      border: 'border-[#00F2FF]/30',
+      textAccent: 'text-[#00F2FF]',
+      bgAccent: 'bg-[#00F2FF]',
+      borderAccent: 'border-[#00F2FF]',
+      gradient: 'from-[#00F2FF] to-[#0066FF]',
+      radialGlow: 'bg-[#00F2FF]/5',
+      nameCn: '极光霓虹',
+      nameEn: 'Aurora Cyan'
+    },
+    amber: {
+      accent: '#FBBF24',
+      glow: 'shadow-[0_0_20px_rgba(251,191,36,0.25)]',
+      border: 'border-[#FBBF24]/30',
+      textAccent: 'text-[#FBBF24]',
+      bgAccent: 'bg-[#FBBF24]',
+      borderAccent: 'border-[#FBBF24]',
+      gradient: 'from-[#FBBF24] to-[#D97706]',
+      radialGlow: 'bg-[#FBBF24]/5',
+      nameCn: '航天鎏金',
+      nameEn: 'Aerospace Amber'
+    },
+    crimson: {
+      accent: '#EF4444',
+      glow: 'shadow-[0_0_20px_rgba(239,68,68,0.25)]',
+      border: 'border-[#EF4444]/30',
+      textAccent: 'text-[#EF4444]',
+      bgAccent: 'bg-[#EF4444]',
+      borderAccent: 'border-[#EF4444]',
+      gradient: 'from-[#EF4444] to-[#991B1B]',
+      radialGlow: 'bg-[#EF4444]/5',
+      nameCn: '聚变红核',
+      nameEn: 'Fusion Crimson'
+    }
+  };
+
+  const activeTheme = themes[styleTheme];
+
+  const facets: PerspectiveFacet[] = [
+    {
+      id: 'iso',
+      nameCn: '立体主视图',
+      nameEn: 'Isometric View',
+      image: oneossBoxImage,
+      descriptionCn: '全铝阳极氧化磨砂太空灰机壳，线条凝练锐利，边缘搭载可变色长条形高精度脉冲 LED 光斑状态指示器，彰显现代工业极简美学。',
+      descriptionEn: 'Anodized sandblasted space-gray aluminum casing with razor-sharp geometric contours, presenting active pulsating high-frequency pulse status LEDs.',
+      specs: [
+        { label: 'Chassis Material', value: 'Anodized Aluminum' },
+        { label: 'Ingress Rating', value: 'IP67 Waterproof' },
+        { label: 'Operating Temp', value: '-40°C to +85°C' }
+      ]
+    },
+    {
+      id: 'side',
+      nameCn: '连接器切面',
+      nameEn: 'Connector Detail',
+      image: oneossSideFacet,
+      descriptionCn: '机身侧部配置重工业级 M12 耐高负载密封金属插座，保障信号链路与大电流供应在多端复杂极端环境下的无损传输。',
+      descriptionEn: 'High-load heavy industrial M12 sealed metal connectors designed to safeguard physical connectivity under extreme multi-node environments.',
+      specs: [
+        { label: 'Interface Type', value: 'M12 Industrial A-Coded' },
+        { label: 'Contact Finish', value: 'Gold-Plated/Copper Alloy' },
+        { label: 'Coupling Method', value: 'Threaded Locking Joint' }
+      ]
+    },
+    {
+      id: 'top',
+      nameCn: '顶板盖透视图',
+      nameEn: 'Holographic Deck',
+      image: oneossTopFacet,
+      descriptionCn: '半透明暗色钢化玻璃盖板板底饰有沉金电路纹章，结合内部微弱背光结构，完美融合未来感科技韵味。',
+      descriptionEn: 'High-strength semi-translucent dark tempered glass with complex circuit tracing architecture embedded under subtle microchips array.',
+      specs: [
+        { label: 'Panel Type', value: 'Corning Gorilla Glass v5' },
+        { label: 'Thermal Shielding', value: 'Aerogel Thermal Layer' },
+        { label: 'Chassis Pressure', value: 'Internal Relief Valves' }
+      ]
+    }
+  ];
+
+  const selectedFacet = facets.find(f => f.id === activeFacet) || facets[0];
+
+  return (
+    <div className="min-h-screen flex flex-col font-sans selection:bg-neutral-800 selection:text-white bg-[#030303] text-[#E5E5E5] overflow-hidden">
+      
+      {/* 1. Header Navigation */}
+      <header className="h-20 flex items-center justify-between px-6 md:px-12 border-b border-neutral-900 bg-[#060606] z-30 sticky top-0 flex-shrink-0">
+        <div className="flex items-center gap-4">
+          <div className="relative group">
+            <div className={`w-9 h-9 rounded-sm bg-gradient-to-br ${activeTheme.gradient} flex items-center justify-center transition-all ${activeTheme.glow}`}>
+              <div className="w-4 h-4 bg-[#030303] rounded-full" />
+            </div>
+          </div>
+          <div className="flex flex-col">
+            <span className="font-sans font-black tracking-[0.25em] text-sm text-white uppercase flex items-center gap-2">
+              OneOS <span className="text-[9px] px-1.5 py-0.5 rounded border border-neutral-800 bg-neutral-950 text-[#fff]">V2.0</span>
+            </span>
+            <span className="text-[9px] text-neutral-500 tracking-[0.15em] uppercase font-mono">Hydrogen Safety Control Matrix</span>
+          </div>
+        </div>
+
+        {/* Tab & Language Header Selector */}
+        <div className="flex items-center gap-2 md:gap-8">
+          <div className="flex items-center rounded-sm bg-neutral-950 p-[3px] border border-neutral-900">
+            <button 
+              onClick={() => setActiveTab('overview')}
+              className={`px-4 py-1.5 rounded-sm text-[11px] font-bold tracking-wider uppercase transition-all duration-300 ${activeTab === 'overview' ? 'bg-[#111111] text-white border border-neutral-800 shadow-inner' : 'text-neutral-500 hover:text-neutral-200'}`}
+            >
+              产品明细 <span className="text-[9px] ml-1 opacity-50">DETAIL</span>
+            </button>
+            <button 
+              onClick={() => setActiveTab('architecture')}
+              className={`px-4 py-1.5 rounded-sm text-[11px] font-bold tracking-wider uppercase transition-all duration-300 ${activeTab === 'architecture' ? 'bg-[#111111] text-white border border-neutral-800 shadow-inner' : 'text-neutral-500 hover:text-neutral-200'}`}
+            >
+              逻辑架构 <span className="text-[9px] ml-1 opacity-50">ARCH</span>
+            </button>
+          </div>
+
+          <div className="h-6 w-px bg-neutral-900 hidden md:block"></div>
+
+          {/* Theme Preset Selector */}
+          <div className="hidden md:flex items-center gap-2">
+            <span className="text-[9px] font-mono text-neutral-500 uppercase tracking-widest mr-1">Style Matrix:</span>
+            {(['cyan', 'amber', 'crimson'] as StylePreset[]).map((themeName) => {
+              const t = themes[themeName];
+              return (
+                <button
+                  key={themeName}
+                  onClick={() => setStyleTheme(themeName)}
+                  className={`w-6 h-6 rounded-full border flex items-center justify-center transition-all ${styleTheme === themeName ? 'border-white scale-110' : 'border-neutral-900 hover:border-neutral-700'}`}
+                  title={`${t.nameCn} / ${t.nameEn}`}
+                >
+                  <span className={`w-3 h-3 rounded-full ${t.bgAccent}`} />
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </header>
+
+      {/* 2. Main Workspace */}
+      <main className="flex-1 w-full bg-[#080808] overflow-y-auto relative h-full">
+        
+        {/* Futuristic Ambient Grid Overlay */}
+        <div className="fixed inset-0 z-0 pointer-events-none opacity-25">
+          <div className="absolute inset-0 bg-[radial-gradient(#1A1A1A_1px,transparent_1px)] [background-size:24px_24px]" />
+          <div className={`absolute top-[10%] right-[15%] w-[650px] h-[650px] ${activeTheme.radialGlow} blur-[180px] rounded-full`} />
+          <div className="absolute bottom-[5%] left-[5%] w-[550px] h-[550px] bg-blue-950/10 blur-[150px] rounded-full" />
+        </div>
+
+        <AnimatePresence mode="wait">
+          
+          {/* =========================================================================
+              TAB: PRODUCT OVERVIEW & CUT SECTIONS (中英双语)
+              ========================================================================= */}
+          {activeTab === 'overview' && (
+            <motion.div 
+              key="overview"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.4 }}
+              className="grid grid-cols-1 xl:grid-cols-12 w-full max-w-[1920px] mx-auto min-h-full divide-y xl:divide-y-0 xl:divide-x divide-neutral-900 relative z-10"
+            >
+              {/* LEFT INTRODUCTORY PANEL (Bilingual, Rich Copy) */}
+              <div className="col-span-1 xl:col-span-6 flex flex-col justify-between p-8 md:p-16 bg-[#090909]/90 relative">
+                
+                {/* Style Palette Mobile Hotbar */}
+                <div className="flex md:hidden items-center justify-between p-3 rounded bg-neutral-950/60 border border-neutral-900 mb-6">
+                  <span className="text-[10px] font-mono text-neutral-400">切换科技氛围</span>
+                  <div className="flex gap-2">
+                    {(['cyan', 'amber', 'crimson'] as StylePreset[]).map((themeName) => {
+                      const t = themes[themeName];
+                      return (
+                        <button
+                          key={themeName}
+                          onClick={() => setStyleTheme(themeName)}
+                          className={`w-5 h-5 rounded-full border flex items-center justify-center transition-all ${styleTheme === themeName ? 'border-white scale-110' : 'border-neutral-900'}`}
+                        >
+                          <span className={`w-2.5 h-2.5 rounded-full ${t.bgAccent}`} />
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-6">
+                  {/* Small tag */}
+                  <div className="flex items-center gap-2">
+                    <span className={`w-2 h-2 rounded-full ${activeTheme.bgAccent} shadow-[0_0_8px_${activeTheme.accent}] animate-pulse`} />
+                    <span className="font-mono text-[10px] tracking-[0.25em] text-neutral-400 uppercase">
+                      OneOS Industrial v6.0 Terminal Protocol
+                    </span>
+                  </div>
+
+                  {/* Title Matrix */}
+                  <div className="space-y-2">
+                    <h1 className="text-4xl md:text-5xl lg:text-6xl font-light tracking-tight text-white leading-[1.15]">
+                      Hydrogen Safety & <br />
+                      <span className="font-extrabold tracking-wide uppercase bg-gradient-to-r from-white via-neutral-100 to-neutral-400 bg-clip-text text-transparent">
+                        Carbon Factor Box
+                      </span>
+                    </h1>
+                    <div className="flex items-center gap-3">
+                      <h2 className={`font-mono text-xl md:text-2xl font-bold tracking-widest ${activeTheme.textAccent}`}>
+                        LNbox 氢能智能终端
+                      </h2>
+                    </div>
+                  </div>
+
+                  {/* Copy Block in Chinese & English */}
+                  <div className="space-y-4 max-w-xl text-neutral-400 text-sm leading-relaxed border-l-2 border-neutral-800 pl-6 py-1">
+                    <p className="font-sans font-light">
+                      OneOS AI 氢能控制终端 (LNbox) 是一款专为工业复杂场景定制的紧凑级高可靠核心控制设备。全机采用微几何立体机架防爆架构，精调极简工艺，支持多点秒级 H2 浓度、管网压力数据采集分析及碳因子追踪。
+                    </p>
+                    <p className="font-mono text-[11px] text-neutral-500 uppercase leading-relaxed">
+                      The LNbox AI-powered telemetry unit encapsulates raw hydrogen safety algorithms and active carbon factor logging. Crafted out of highgrade materials to endure corrosive industrial environments.
+                    </p>
+                  </div>
+
+                  {/* Feature Pillars Highlights (Bilingual) */}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6 border-t border-neutral-900 pt-8">
+                    <div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
+                      <div className="absolute top-0 left-0 w-1 h-full bg-cyan-500/20" />
+                      <div className="flex items-center gap-3 mb-2">
+                        <div className="p-1.5 rounded bg-cyan-950/30 text-cyan-400">
+                          <ShieldAlert size={16} />
+                        </div>
+                        <span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">防爆与泄漏监测</span>
+                      </div>
+                      <p className="text-[11px] text-neutral-400 leading-normal mb-1">精细感知泄漏阀值及车压变化，支持秒级自动气路阻断控制。</p>
+                      <span className="text-[9px] font-mono text-neutral-500 block uppercase">Level 4 Active Isolation Protocol</span>
+                    </div>
+
+                    <div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
+                      <div className="absolute top-0 left-0 w-1 h-full bg-emerald-500/20" />
+                      <div className="flex items-center gap-3 mb-2">
+                        <div className="p-1.5 rounded bg-emerald-950/30 text-emerald-400">
+                          <Leaf size={16} />
+                        </div>
+                        <span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">低碳因子动态上链</span>
+                      </div>
+                      <p className="text-[11px] text-neutral-400 leading-normal mb-1">原生搭载碳估算模型核准装置，提供实时清洁绿氢因子加密认证。</p>
+                      <span className="text-[9px] font-mono text-neutral-500 block uppercase">Encrypted Carbon Ledger Hub</span>
+                    </div>
+
+                    <div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
+                      <div className="absolute top-0 left-0 w-1 h-full bg-amber-500/20" />
+                      <div className="flex items-center gap-3 mb-2">
+                        <div className="p-1.5 rounded bg-amber-950/30 text-amber-400">
+                          <Zap size={16} />
+                        </div>
+                        <span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">能源 AI 智能调度</span>
+                      </div>
+                      <p className="text-[11px] text-neutral-400 leading-normal mb-1">结合边缘端负荷估算与最优分配策略，实现绿电制氢与用能消纳自适应分配。</p>
+                      <span className="text-[9px] font-mono text-neutral-500 block uppercase">Autonomous Energy AI Dispatch</span>
+                    </div>
+
+                    <div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
+                      <div className="absolute top-0 left-0 w-1 h-full bg-[#00F2FF]/20" />
+                      <div className="flex items-center gap-3 mb-2">
+                        <div className="p-1.5 rounded bg-[#00F2FF]/10 text-[#00F2FF]">
+                          <Cpu size={16} />
+                        </div>
+                        <span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">本地自研边缘算力</span>
+                      </div>
+                      <p className="text-[11px] text-neutral-400 leading-normal mb-1">整合轻量级故障预测神经网络，支持离网计算及异常智能判断。</p>
+                      <span className="text-[9px] font-mono text-neutral-500 block uppercase">Intellectual AI Inference Engine</span>
+                    </div>
+                  </div>
+                </div>
+
+
+              </div>
+
+              {/* RIGHT PREMIUM VISUAL PRESENTATION WITH PERSPECTIVE/STYLE SWAPPER */}
+              <div className="col-span-1 xl:col-span-6 flex flex-col justify-start p-8 md:p-12 bg-[#050505] relative overflow-hidden">
+                
+                {/* Absolute status background */}
+                <div className="absolute top-6 right-6 flex items-center gap-2 px-3 py-1 bg-neutral-950 border border-neutral-900 rounded font-mono text-[9px] text-neutral-400">
+                  <span className={`w-1.5 h-1.5 rounded-full ${activeTheme.bgAccent}`} />
+                  ACCENT STATE: {activeTheme.nameEn}
+                </div>
+
+                {/* Main Visual Display Block */}
+                <div className="flex flex-col justify-start items-center pt-2 pb-4">
+                  
+                  {/* Dynamic interactive heading showcasing which viewpoint we're examining */}
+                  <div className="text-center mb-4">
+                    <div className="text-[10px] font-mono tracking-[0.3em] uppercase text-neutral-500">Live Render Viewpoint</div>
+                    <div className="text-xl font-bold tracking-widest text-[#FFF] uppercase mt-1 flex items-center justify-center gap-2">
+                      <span>{selectedFacet.nameCn}</span>
+                      <span className="text-neutral-500">/</span>
+                      <span className={`text-xs ${activeTheme.textAccent} font-mono font-medium`}>{selectedFacet.nameEn}</span>
+                    </div>
+                  </div>
+
+                  <div className="relative w-full max-w-lg mt-2 group flex flex-col justify-center">
+                    {/* Pulsing neon halo under the device frame mirroring styleTheme */}
+                    <div className={`absolute -inset-2 bg-gradient-to-tr ${activeTheme.gradient} opacity-10 blur-xl rounded-xl transition-all duration-700 group-hover:opacity-20`} />
+                    
+                    {/* Device Rendering Box with active styles */}
+                    <div className="relative border border-neutral-800/80 bg-[#0E0E0E]/95 shadow-[0_0_50px_rgba(0,0,0,0.8)] p-8 rounded flex items-center justify-center min-h-[300px] md:min-h-[360px] overflow-hidden transition-all hover:border-neutral-700">
+                      
+                      {/* Compact 2-line floating brand brand overlay as requested: LN on top, ONEOS below */}
+                      <div className="absolute top-6 left-6 z-20 select-none flex flex-col gap-1 text-left">
+                        <div className="font-sans font-black text-3xl md:text-4xl tracking-wider text-[#00F2FF] leading-none drop-shadow-[0_0_10px_rgba(0,242,255,0.5)]">
+                          LN
+                        </div>
+                        <div className="font-sans font-black text-xs md:text-sm tracking-[0.3em] text-white/90 leading-none">
+                          ONEOS
+                        </div>
+                      </div>
+
+                      {/* Interactive image layer with smooth transitions */}
+                      <AnimatePresence mode="wait">
+                        <motion.img 
+                          key={selectedFacet.id}
+                          src={selectedFacet.image}
+                          alt={selectedFacet.nameCn}
+                          initial={{ opacity: 0, scale: 0.95 }}
+                          animate={{ opacity: 1, scale: 1 }}
+                          exit={{ opacity: 0, scale: 0.95 }}
+                          transition={{ duration: 0.4 }}
+                          className="w-full h-auto object-contain max-h-[260px] md:max-h-[300px] object-center opacity-95 brightness-[1.05] group-hover:scale-105 transition-all duration-500"
+                          referrerPolicy="no-referrer"
+                        />
+                      </AnimatePresence>
+
+                      {/* Tech alignment markers representing standard octane studio photo overlays */}
+                      <div className="absolute top-4 right-4 font-mono text-[7px] text-neutral-600 flex flex-col text-right">
+                        <span>OCTANE_RENDER_V6_HD</span>
+                        <span>GRID_LOCK_ALGN [OK]</span>
+                      </div>
+
+                      {/* Accent lighting element overlays that dynamically changes colors based on chosen matrix preset */}
+                      <div className="absolute inset-0 bg-[#00F2FF]/0 pointer-events-none transition-all duration-500" />
+                    </div>
+                  </div>
+
+                  {/* Mini details spec card for active perspective */}
+                  <div className="w-full max-w-lg mt-6 grid grid-cols-3 gap-2 shrink-0">
+                    {selectedFacet.specs.map((item, idx) => (
+                      <div key={idx} className="bg-[#090909] p-2.5 border border-neutral-900 flex flex-col rounded">
+                        <span className="text-[7.5px] font-mono text-neutral-500 uppercase tracking-wider">{item.label}</span>
+                        <span className="text-[10.5px] font-bold text-neutral-200 mt-0.5 truncate">{item.value}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Perspective selector tab featuring three actual small product preview images */}
+                <div className="border-t border-neutral-900/40 pt-4 mt-2 shrink-0">
+                  <div className="grid grid-cols-3 gap-3 max-w-lg mx-auto">
+                    {facets.map((facet) => {
+                      const isSelected = activeFacet === facet.id;
+                      return (
+                        <button
+                          key={facet.id}
+                          onClick={() => setActiveFacet(facet.id)}
+                          className={`group flex flex-col items-center p-1.5 border rounded bg-[#070707] transition-all duration-300 ${isSelected ? `border-white ring-1 ring-white/10 ${activeTheme.glow}` : 'border-neutral-900 hover:border-neutral-700/60'}`}
+                        >
+                          {/* Inner thumbnail photo */}
+                          <div className="w-full aspect-[4/3] rounded bg-[#0A0A0A] border border-neutral-900 overflow-hidden flex items-center justify-center p-1 mb-1.5 group-hover:border-neutral-700">
+                            <img 
+                              src={facet.image} 
+                              alt={facet.nameCn} 
+                              className={`max-h-full max-w-full object-contain filter group-hover:scale-110 transition-transform duration-300 ${isSelected ? 'brightness-[1.1] opacity-100' : 'brightness-90 opacity-70'}`}
+                              referrerPolicy="no-referrer"
+                            />
+                          </div>
+                          <span className={`text-[10px] font-bold tracking-tight leading-tight ${isSelected ? activeTheme.textAccent : 'text-neutral-400'}`}>
+                            {facet.nameCn}
+                          </span>
+                          <span className="text-[7.5px] font-mono text-neutral-500 uppercase tracking-wide mt-0.5">
+                            {facet.nameEn}
+                          </span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+
+              </div>
+            </motion.div>
+          )}
+
+          {/* =========================================================================
+              TAB: CORE LOGICAL ARCHITECTURE FLOW (Bilingual & Exactly Matching Attached Diagram)
+              ========================================================================= */}
+          {activeTab === 'architecture' && (
+            <motion.div 
+              key="architecture"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.4 }}
+              className="w-full h-full xl:max-h-[calc(100vh-140px)] flex flex-col items-center justify-between p-3 md:p-5 lg:p-6 z-10 relative overflow-hidden"
+            >
+              
+              {/* Architecture Title block with both ENG and CN */}
+              <div className="text-center mb-2 md:mb-4 max-w-2xl px-4 flex-shrink-0">
+                <div className="inline-flex items-center gap-2 px-2 py-0.5 bg-[#121212]/80 border border-neutral-800 text-[9px] uppercase tracking-widest text-[#00F2FF] rounded font-mono mb-1">
+                  Logical Data Flow and System Infrastructure
+                </div>
+                <h2 className="text-xl md:text-2xl font-light tracking-tight text-white mb-0.5">
+                  OneOS AI 氢能盒子 - <span className="font-extrabold text-[#00F2FF] tracking-wide">核心逻辑架构图</span>
+                </h2>
+                <p className="text-[9px] font-mono text-neutral-500 uppercase tracking-widest">
+                  BI-LINGUAL SCHEMATIC FLOW CHART • 100% FULL-SCREEN COCKPIT
+                </p>
+              </div>
+
+              {/* Exact column layout with custom bidirectional connectors */}
+              <div className="w-full max-w-[1780px] mx-auto flex flex-col xl:flex-row gap-2.5 items-stretch relative flex-1 min-h-0 min-w-0">
+                
+                {/* COLUMN 1: 数据采集层 (Data Capture Layer, ~18% width) */}
+                <div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
+                  <div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
+                    <div className="text-[10px] font-bold tracking-[0.1em] text-[#00F2FF] uppercase">数据采集层</div>
+                    <div className="text-[7.5px] font-mono text-neutral-500 uppercase">Data Capture Matrix</div>
+                  </div>
+
+                  <CompactArchCard title={<div className="flex items-center gap-1.5"><Settings size={11} className="text-[#00F2FF]"/><span>车辆/设备数据</span></div>} className="flex-[1.3_1.3_0%]">
+                    <CompactArchList items={[
+                      { text: 'OBD/VCU', textEn: 'Vehicle Controller' },
+                      { text: '电池系统', textEn: 'BMS monitoring' },
+                      { text: '氢系统传感器', textEn: 'Hydrogen sensors' },
+                      { text: '压力传感器', textEn: 'Pressure metrics' },
+                      { text: '温度传感器', textEn: 'Temperature status' },
+                      { text: '其他传感器', textEn: 'Auxiliary metrics' },
+                    ]} />
+                  </CompactArchCard>
+                  
+                  <CompactArchCard title={<div className="flex items-center gap-1.5"><Cloud size={11} className="text-[#00F2FF]"/><span>环境数据</span></div>} className="flex-1">
+                    <CompactArchList items={[
+                      { text: '气体浓度', textEn: 'H2 Gas Sniffer' },
+                      { text: '环境温湿度', textEn: 'Cabinet temperature' },
+                      { text: '定位信息', textEn: 'GNSS coordinates' },
+                    ]} />
+                  </CompactArchCard>
+                </div>
+
+                {/* FLOW CONNECTOR 1: Left to Center (Capture <-> AI Core) */}
+                <div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
+                  <div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
+                    {/* Left/Top arrowhead */}
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
+                      <path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                    {/* Glowing vertical path */}
+                    <div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
+                    {/* Right/Bottom arrowhead */}
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
+                      <path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  </div>
+                </div>
+
+                {/* COLUMN 2: ONEOS AI 氢能盒子 (Intelligent Core Box Node, Flex-1) */}
+                <div className="flex-1 flex flex-col gap-2 p-2.5 border border-neutral-800 bg-[#040404]/90 rounded shadow-2xl relative min-w-[320px]">
+                  {/* Glowing halo behind box node */}
+                  <div className={`absolute inset-0 bg-gradient-to-b ${activeTheme.radialGlow} to-transparent rounded z-0 pointer-events-none opacity-20`} />
+                  
+                  <div className="p-1 bg-[#000] border border-neutral-900 rounded text-center z-10 shrink-0">
+                    <div className={`text-[11px] font-extrabold tracking-[0.15em] ${activeTheme.textAccent} uppercase`}>
+                      OneOS AI 氢能盒子
+                    </div>
+                    <div className="text-[7px] font-mono text-neutral-500 uppercase">LNbox Core Hardware Hub</div>
+                  </div>
+
+                  {/* 3-Column Internal Layout: Modules - Central Hardware - Modules */}
+                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-2 items-stretch flex-1 z-10 min-h-0 min-w-0 py-1">
+                    
+                    {/* Left Sub-column: Safety & Carbon */}
+                    <div className="flex flex-col gap-2 h-full justify-between">
+                      <CompactArchCard title={<div className="flex items-center gap-1.5 text-red-400 font-extrabold"><ShieldAlert size={11} /><span>氢安全管理模块</span></div>} className="flex-1">
+                        <CompactArchList items={[
+                          { text: '泄漏监测', textEn: 'Liquid H2 gas leakage' },
+                          { text: '压力监测', textEn: 'Chassis pressure variables' },
+                          { text: '温度监测', textEn: 'Thermal safety telemetry' },
+                          { text: '风险预警', textEn: 'Instant warning algorithms' },
+                          { text: '自动/远程干预 (预留)', textEn: 'Pre-emptive emergency isolation' },
+                        ]} />
+                      </CompactArchCard>
+
+                      <CompactArchCard title={<div className="flex items-center gap-1.5 text-[#00F2FF] font-extrabold"><Leaf size={11} /><span>碳因子管理模块</span></div>} className="flex-1">
+                        <CompactArchList items={[
+                          { text: '碳数据采集', textEn: 'Realtime carbon footprint ingesting' },
+                          { text: '碳因子计算', textEn: 'Bilingual translation analytics' },
+                          { text: '碳资产关联', textEn: 'Clean credits assignment' },
+                          { text: '碳数据上链 (预留)', textEn: 'Secure blockchain accounting' },
+                        ]} />
+                      </CompactArchCard>
+                    </div>
+
+                    {/* Central Sub-column: Interactive Hardware Showcase */}
+                    <div className="flex flex-col border border-neutral-800/80 rounded bg-[#070707] p-2 justify-between gap-2 overflow-hidden relative group">
+                      {/* Interactive circuit-like subtle glow */}
+                      <div className="absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-[#00F2FF]/40 to-transparent"></div>
+                      
+                      <div className="relative w-full flex-1 border border-neutral-900 rounded bg-[#0A0A0A] p-2 flex flex-col items-center justify-center overflow-hidden min-h-[140px]">
+                        <img 
+                          src={oneossTopFacet} 
+                          alt="OneOS AI Hardware cover plate" 
+                          className="w-full h-full max-h-[110px] object-contain opacity-95 brightness-[1.1] hover:scale-105 transition-all duration-300" 
+                          referrerPolicy="no-referrer" 
+                        />
+                        
+                        {/* Custom status overlays */}
+                        <div className="absolute top-1.5 left-2 px-1.5 py-0.5 rounded bg-black/80 border border-neutral-800 text-[8px] font-mono font-extrabold text-[#00F2FF] shadow-[0_0_8px_rgba(0,186,255,0.4)]">
+                          LN
+                        </div>
+                        <div className="absolute bottom-1.5 right-2 px-1.5 py-0.5 rounded bg-neutral-900/90 border border-neutral-800 text-[8px] font-mono font-black text-white tracking-widest leading-none">
+                          ONEOS
+                        </div>
+                      </div>
+                      
+                      {/* Small operational thumbnails */}
+                      <div className="grid grid-cols-3 gap-1 shrink-0">
+                        <div className="border border-[#00F2FF]/40 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF] transition-all cursor-pointer">
+                          <img src={oneossTopFacet} alt="Top Facet" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
+                        </div>
+                        <div className="border border-neutral-800 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF]/50 transition-all cursor-pointer">
+                          <img src={oneossSideFacet} alt="Side Facet" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
+                        </div>
+                        <div className="border border-neutral-800 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF]/50 transition-all cursor-pointer">
+                          <img src={oneossBoxImage} alt="Full Box" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Right Sub-column: AI Analyzers & Device Management */}
+                    <div className="flex flex-col gap-2 h-full justify-between">
+                      <CompactArchCard title={<div className="flex items-center gap-1.5 text-amber-400 font-extrabold"><Cpu size={11} /><span>AI分析决策模块</span></div>} className="flex-1">
+                        <CompactArchList items={[
+                          { text: '数据分析', textEn: 'High freq operational analysis' },
+                          { text: '风险预测', textEn: 'Predictive security forecasting' },
+                          { text: '故障诊断', textEn: 'Automated modular diagnostics' },
+                          { text: '能耗优化', textEn: 'Energy efficient constraints' },
+                          { text: '智能决策', textEn: 'Autonomous hardware decisions' },
+                        ]} />
+                      </CompactArchCard>
+
+                      <CompactArchCard title={<div className="flex items-center gap-1.5 text-neutral-200 font-extrabold"><Sliders size={11} /><span>设备管理模块</span></div>} className="flex-1">
+                        <CompactArchList items={[
+                          { text: '设备状态监控', textEn: 'Node integrity health checks' },
+                          { text: '远程升级', textEn: 'Over-The-Air OTA flash' },
+                          { text: '故障告警', textEn: 'Telemetry fault alerting' },
+                          { text: '运行日志管理', textEn: 'Secure operational metrics logs' },
+                        ]} />
+                      </CompactArchCard>
+                    </div>
+
+                  </div>
+
+                  {/* Vertical flow connector pointing up from Data Security to Central Hardware (Modification 1) */}
+                  <div className="flex lg:grid lg:grid-cols-3 shrink-0 h-4 lg:h-5 justify-center items-center relative select-none z-10 -my-1">
+                    <div className="hidden lg:block"></div> {/* Left empty */}
+                    <div className="flex flex-col items-center justify-center text-[#00F2FF] animate-pulse">
+                      {/* Arrowhead pointing UP */}
+                      <svg width="10" height="7" viewBox="0 0 10 7" fill="none" className="rotate-180 mb-[2px]">
+                        <path d="M5 0L10 7H0L5 0Z" fill="#00F2FF" />
+                      </svg>
+                      {/* Vertical line with glow */}
+                      <div className="w-[1.5px] h-3 lg:h-4 bg-gradient-to-t from-[#00F2FF]/10 via-[#00F2FF]/80 to-[#00F2FF] shadow-[0_0_8px_rgba(0,242,255,0.8)]" />
+                    </div>
+                    <div className="hidden lg:block"></div> {/* Right empty */}
+                  </div>
+
+                  {/* Stretching bottom card: 数据安全模块 */}
+                  <div className="border border-neutral-900 bg-neutral-950/80 rounded p-2 z-10 shrink-0">
+                    <div className="text-[8px] font-mono font-bold uppercase tracking-widest text-[#00F2FF]/70 text-center mb-1 bg-black/40 py-0.5 rounded border border-neutral-900">
+                      数据安全模块 (Data Security Framework)
+                    </div>
+                    <div className="grid grid-cols-4 gap-2">
+                      <div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
+                        <ShieldCheck size={11} className="text-[#00F2FF] mb-0.5" />
+                        <span className="text-[9px] font-extrabold text-neutral-200">数据加密</span>
+                        <span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">AES/ECC</span>
+                      </div>
+                      <div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
+                        <Settings size={11} className="text-[#00F2FF] mb-0.5" />
+                        <span className="text-[9px] font-extrabold text-neutral-200">权限管理</span>
+                        <span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">RBAC Mode</span>
+                      </div>
+                      <div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
+                        <Database size={11} className="text-[#00F2FF] mb-0.5" />
+                        <span className="text-[9px] font-extrabold text-neutral-200">安全存储</span>
+                        <span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">Enclave Vault</span>
+                      </div>
+                      <div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
+                        <Link2 size={11} className="text-[#00F2FF] mb-0.5" />
+                        <span className="text-[9px] font-extrabold text-neutral-200">可信通信</span>
+                        <span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">TLS Tunneling</span>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+
+                {/* FLOW CONNECTOR 2: Center to Cloud (AI Core <-> Cloud AIoT) */}
+                <div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
+                  <div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
+                      <path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                    <div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
+                      <path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  </div>
+                </div>
+
+                {/* COLUMN 3: OneOS 云平台 (OneOS AIoT Cloud Platform, ~18% width) */}
+                <div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
+                  <div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
+                    <div className="text-[10px] font-bold tracking-[0.1em] text-[#00F2FF] uppercase">OneOS 云平台</div>
+                    <div className="text-[7.5px] font-mono text-neutral-500 uppercase">Core AIoT Cloud</div>
+                  </div>
+
+                  <CompactArchCard title={<div className="flex items-center gap-1.5"><Cloud size={11} className="text-[#00F2FF]"/><span>OneOS AIoT 平台</span></div>} className="flex-1">
+                    {/* Futuristic Large Cloud core visualization panel (Modification 2) */}
+                    <div className="h-[120px] lg:h-[155px] w-full border border-cyan-500/20 bg-gradient-to-b from-[#080E16] to-[#040609] rounded-lg relative flex flex-col items-center justify-center mb-2.5 p-3 overflow-hidden group shadow-[inset_0_1px_12px_rgba(0,242,255,0.08)] shrink-0">
+                      {/* Abstract grid matrix */}
+                      <div className="absolute inset-0 opacity-[0.06] bg-[linear-gradient(to_right,#00F2FF_1px,transparent_1px),linear-gradient(to_bottom,#00F2FF_1px,transparent_1px)] bg-[size:10px_10px]" />
+                      
+                      {/* Pulsing orbital rings */}
+                      <div className="absolute w-20 h-20 rounded-full border border-[#00F2FF]/5 animate-[spin_12s_linear_infinite]" />
+                      <div className="absolute w-24 h-24 rounded-full border border-dashed border-[#00F2FF]/5 animate-[spin_24s_linear_infinite]" />
+                      
+                      {/* Main cloud glowing structure */}
+                      <div className="relative flex items-center justify-center text-[#00F2FF] p-3 bg-[#0c1a24]/45 border border-cyan-400/20 rounded-xl shadow-[0_0_15px_rgba(0,242,255,0.1)] mb-1.5 hover:scale-105 transition-transform duration-300">
+                        <Cloud size={28} className="animate-pulse duration-1000" />
+                        <div className="absolute inset-0 bg-[#00F2FF] opacity-15 blur-md rounded-full" />
+                        <div className="absolute -top-1 -right-1 w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping" />
+                      </div>
+                      
+                      {/* Description & name */}
+                      <span className="text-[9px] font-extrabold text-cyan-400 tracking-widest font-mono uppercase">OneOS Cloud Hub</span>
+                      <span className="text-[7px] font-mono text-neutral-500 tracking-wider text-center max-w-[85%] mt-0.5 uppercase">Omni AIoT Control Core</span>
+                      
+                      {/* Flowing particle stream */}
+                      <div className="flex gap-1.5 mt-2 items-center justify-center">
+                        <div className="w-[3px] h-[3px] rounded-full bg-cyan-400 animate-bounce" />
+                        <div className="w-4 h-[1px] bg-gradient-to-r from-cyan-500/20 via-cyan-400 to-cyan-500/20" />
+                        <div className="w-[3px] h-[3px] rounded-full bg-cyan-400 animate-bounce delay-150" />
+                      </div>
+                    </div>
+
+                    <CompactArchList items={[
+                      { text: '数据存储与计算', textEn: 'Storage & Distributed computing' },
+                      { text: 'AI模型训练与优化', textEn: 'Neural model continuous training' },
+                      { text: '可视化监控大屏', textEn: 'Omni-channel control boards' },
+                      { text: '运营管理系统', textEn: 'Integrated management suite' },
+                      { text: '开放API服务', textEn: 'Standard programmatic endpoint' },
+                    ]} />
+                  </CompactArchCard>
+                </div>
+
+                {/* FLOW CONNECTOR 3: Cloud to Applications (Cloud AIoT <-> Scenario Scopes) */}
+                <div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
+                  <div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
+                      <path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                    <div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
+                      <path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  </div>
+                </div>
+
+                {/* COLUMN 4: 应用场景 (Operational Scenarios Layer, ~18% width) */}
+                <div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
+                  <div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
+                    <div className="text-[10px] font-bold tracking-[0.15em] text-white uppercase">应用场景</div>
+                    <div className="text-[7.5px] font-mono text-neutral-500 uppercase">Operational Scenarios</div>
+                  </div>
+
+                  {/* Scenario 1: Fleet Operations (Modification 3) */}
+                  <div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-[#00F2FF]/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
+                    <div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
+                      <div className="w-[15px] h-[15px] bg-cyan-950/45 border border-cyan-900/45 rounded flex items-center justify-center text-cyan-400">
+                        <Truck size={9} />
+                      </div>
+                      <span className="text-[9px] font-extrabold text-neutral-200">氢能车队运营</span>
+                      <span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Fleet</span>
+                    </div>
+                    {/* Horizontal split body */}
+                    <div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
+                      {/* Left: Thumbnail */}
+                      <div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
+                        <img src={scenarioFleetImage} alt="Fleet" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
+                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
+                      </div>
+                      {/* Right: Combined bullet checks */}
+                      <div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
+                        <div className="flex items-center gap-1 truncate">
+                          <div className="w-[3px] h-[3px] rounded-full bg-[#00F2FF] shadow-[0_0_3px_#00F2FF] shrink-0" />
+                          <span className="text-neutral-200 font-sans">车辆监控 • 运营调度</span>
+                        </div>
+                        <div className="flex items-center gap-1 truncate">
+                          <div className="w-[3px] h-[3px] rounded-full bg-[#00F2FF]/30 shrink-0" />
+                          <span className="text-neutral-400 font-sans">能耗管理 • 安全预警</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Scenario 2: Refueling Station Operations (Modification 3) */}
+                  <div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-amber-400/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
+                    <div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
+                      <div className="w-[15px] h-[15px] bg-amber-950/45 border border-amber-900/45 rounded flex items-center justify-center text-amber-400">
+                        <FactoryIcon size={9} />
+                      </div>
+                      <span className="text-[9px] font-extrabold text-neutral-200">加氢站运营</span>
+                      <span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Station</span>
+                    </div>
+                    {/* Horizontal split body */}
+                    <div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
+                      {/* Left: Thumbnail */}
+                      <div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
+                        <img src={scenarioStationImage} alt="Station" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
+                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
+                      </div>
+                      {/* Right: Combined bullet checks */}
+                      <div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
+                        <div className="flex items-center gap-1 truncate">
+                          <div className="w-[3px] h-[3px] rounded-full bg-amber-400 shadow-[0_0_3px_#fbbf24] shrink-0" />
+                          <span className="text-neutral-200 font-sans">氢源调度 • 加氢优化</span>
+                        </div>
+                        <div className="flex items-center gap-1 truncate">
+                          <div className="w-[3px] h-[3px] rounded-full bg-amber-400/30 shrink-0" />
+                          <span className="text-neutral-400 font-sans">库存管理 • 安全监管</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Scenario 3: Energy & Data Center Computes (Modification 3) */}
+                  <div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-red-400/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
+                    <div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
+                      <div className="w-[15px] h-[15px] bg-red-950/45 border border-red-900/45 rounded flex items-center justify-center text-red-500">
+                        <Server size={9} />
+                      </div>
+                      <span className="text-[9px] font-extrabold text-neutral-200">能源/算力中心</span>
+                      <span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Center</span>
+                    </div>
+                    {/* Horizontal split body */}
+                    <div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
+                      {/* Left: Thumbnail */}
+                      <div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
+                        <img src={scenarioDatacenterImage} alt="Data Center" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
+                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
+                      </div>
+                      {/* Right: Combined bullet checks */}
+                      <div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
+                        <div className="flex items-center gap-1 truncate">
+                          <div className="w-[3px] h-[3px] rounded-full bg-red-400 shadow-[0_0_3px_#f87171] shrink-0" />
+                          <span className="text-neutral-200 font-sans">能耗优化 • 安全监测</span>
+                        </div>
+                        <div className="flex items-center gap-1 truncate">
+                          <div className="w-[3px] h-[3px] rounded-full bg-red-400/30 shrink-0" />
+                          <span className="text-neutral-400 font-sans">运维管理 • 智能决策</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+
+              {/* Bottom value matrix (价值输出层 中英双语 - Extremely Compact Layout for Full screen) */}
+              <div className="w-full bg-[#070707] border border-neutral-800/80 border-l-4 border-l-[#00F2FF] rounded shrink-0 relative overflow-hidden py-3 px-6 mt-4 flex items-center justify-between">
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#00F2FF]/5 to-transparent pointer-events-none" />
+                
+                <div className="hidden xl:block shrink-0 font-extrabold text-[#E5E5E5] tracking-widest text-[11px] uppercase mr-6">
+                  价值输出层 <br />
+                  <span className="text-[8px] font-mono text-neutral-500 font-light block">VALUE MATRIX SYSTEM</span>
+                </div>
+
+                <div className="flex-1 grid grid-cols-2 md:grid-cols-5 gap-4 divide-y md:divide-y-0 md:divide-x divide-neutral-900">
+                  {[
+                    { title: '强化安全减灾', sub: '极速预警防爆泄漏风险', icon: ShieldCheck, subEn: 'RISK CONTROL' },
+                    { title: '显著降本增益', sub: '优化气耗能耗控制开支', icon: Search, subEn: 'COST MINIMIZE' },
+                    { title: '多端业务提效', sub: '云端统筹告别积料负压', icon: Activity, subEn: 'EFFICIENT ROUTING' },
+                    { title: '绿氢数据资产', sub: '实时认证双碳属性归集', icon: Leaf, subEn: 'CARBON CERTIFIED' },
+                    { title: 'AI边算一体化', sub: '全面释放物联数据潜能', icon: LineChart, subEn: 'DATA ASSET INFERENCE' },
+                  ].map((val, i) => {
+                    const Icon = val.icon;
+                    return (
+                      <div key={i} className="flex items-center gap-2 px-1 xl:px-4 w-full pt-2 md:pt-0">
+                        <div className="text-[#00F2FF] bg-[#00F2FF]/10 p-1.5 rounded shrink-0 border border-[#00F2FF]/20 shadow-[0_0_10px_rgba(0,242,255,0.05)]">
+                          <Icon size={13} />
+                        </div>
+                        <div className="flex flex-col items-start min-w-0">
+                           <span className="text-[11px] font-semibold text-white tracking-wider truncate max-w-[130px]">{val.title}</span>
+                           <span className="text-[9px] text-neutral-400 truncate max-w-[130px]">{val.sub}</span>
+                           <span className="text-[8px] font-mono text-neutral-600 uppercase tracking-widest font-bold">{val.subEn}</span>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+      </main>
+      
+      {/* 3. Global Dashboard Footer Accent */}
+      <footer className="w-full bg-[#050505] border-t border-neutral-900 relative flex-shrink-0 z-30">
+        <div className="absolute top-0 left-0 right-0 h-0.5 overflow-hidden">
+          <div className="absolute inset-0 bg-[#00F2FF] opacity-10 animate-pulse" />
+          <div className={`absolute left-0 top-0 h-full w-[45%] bg-gradient-to-r ${activeTheme.gradient} shadow-[0_0_15px_${activeTheme.accent}]`} />
+        </div>
+        <div className="py-5 px-6 md:px-12 flex flex-col md:flex-row items-center justify-between gap-4">
+          <span className="text-[10px] tracking-[0.25em] text-neutral-600 font-mono uppercase text-center md:text-left">
+            © 2026 OneOSS. ALL INDUSTRIAL TELEMETRY AND FACTOR ASSURANCE SYSTEMS REGISTERED.
+          </span>
+          <div className="flex items-center gap-6 text-[9px] font-mono text-neutral-500 uppercase tracking-[0.15em]">
+            <span>Secured Node ID: OOSS-LNBOX-999-ACTIVE</span>
+            <span className="hidden md:inline">•</span>
+            <span>Link Strength: 100% SECURE</span>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
--- a/src/assets/images/oneos_top_facet_1779864912925.png
+++ b/src/assets/images/oneos_top_facet_1779864912925.png
--- a/src/assets/images/oneoss_box_1779852084134.png
+++ b/src/assets/images/oneoss_box_1779852084134.png
--- a/src/assets/images/oneoss_side_facet_1779862455874.png
+++ b/src/assets/images/oneoss_side_facet_1779862455874.png
--- a/src/assets/images/oneoss_top_facet_1779862470957.png
+++ b/src/assets/images/oneoss_top_facet_1779862470957.png
--- a/src/assets/images/scenario_datacenter_1779863590420.png
+++ b/src/assets/images/scenario_datacenter_1779863590420.png
--- a/src/assets/images/scenario_fleet_1779863559233.png
+++ b/src/assets/images/scenario_fleet_1779863559233.png
--- a/src/assets/images/scenario_station_1779863574991.png
+++ b/src/assets/images/scenario_station_1779863574991.png
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+}
+
+body {
+  background-color: #080808;
+  color: #E5E5E5;
+  font-family: var(--font-sans);
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,22 @@
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig} from 'vite';
+
+export default defineConfig(() => {
+  return {
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      // HMR is disabled in AI Studio via DISABLE_HMR env var.
+      // Do not modifyâfile watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+      // Disable file watching when DISABLE_HMR is true to save CPU during agent edits.
+      watch: process.env.DISABLE_HMR === 'true' ? null : {},
+    },
+  };
+});