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.
This commit is contained in:
pazz09adk-glitch
9
.env.example
Normal file
9
.env.example
Normal file
@@ -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"
|
||||||
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
node_modules/
|
||||||
|
build/
|
||||||
|
dist/
|
||||||
|
coverage/
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
.env*
|
||||||
|
!.env.example
|
||||||
27
README.md
27
README.md
@@ -1,11 +1,20 @@
|
|||||||
<div align="center">
|
<div align="center">
|
||||||
|
<img width="1200" height="475" alt="GHBanner" src="https://ai.google.dev/static/site-assets/images/share-ais-513315318.png" />
|
||||||
<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>
|
|
||||||
|
|
||||||
</div>
|
</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`
|
||||||
|
|||||||
1
assets/.aistudio/.gitignore
vendored
Normal file
1
assets/.aistudio/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
*
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -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>
|
||||||
|
|
||||||
6
metadata.json
Normal file
6
metadata.json
Normal file
@@ -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"]
|
||||||
|
}
|
||||||
35
package.json
Normal file
35
package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
914
src/App.tsx
Normal file
914
src/App.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
BIN
src/assets/images/oneos_top_facet_1779864912925.png
Normal file
BIN
src/assets/images/oneos_top_facet_1779864912925.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 796 KiB |
BIN
src/assets/images/oneoss_box_1779852084134.png
Normal file
BIN
src/assets/images/oneoss_box_1779852084134.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 676 KiB |
BIN
src/assets/images/oneoss_side_facet_1779862455874.png
Normal file
BIN
src/assets/images/oneoss_side_facet_1779862455874.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 697 KiB |
BIN
src/assets/images/oneoss_top_facet_1779862470957.png
Normal file
BIN
src/assets/images/oneoss_top_facet_1779862470957.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 796 KiB |
BIN
src/assets/images/scenario_datacenter_1779863590420.png
Normal file
BIN
src/assets/images/scenario_datacenter_1779863590420.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1021 KiB |
BIN
src/assets/images/scenario_fleet_1779863559233.png
Normal file
BIN
src/assets/images/scenario_fleet_1779863559233.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
BIN
src/assets/images/scenario_station_1779863574991.png
Normal file
BIN
src/assets/images/scenario_station_1779863574991.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 776 KiB |
14
src/index.css
Normal file
14
src/index.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@@ -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>,
|
||||||
|
);
|
||||||
4
src/types.d.ts
vendored
Normal file
4
src/types.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
declare module '*.png' {
|
||||||
|
const value: string;
|
||||||
|
export default value;
|
||||||
|
}
|
||||||
26
tsconfig.json
Normal file
26
tsconfig.json
Normal file
@@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
22
vite.config.ts
Normal file
22
vite.config.ts
Normal file
@@ -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 : {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user