51 lines
1.7 KiB
HTML
51 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Scert 首次初始化向导 - 全 4 步骤 UI 设计方案选型</title>
|
|
<link rel="icon" type="image/png" href="/Scert.png" />
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<!-- 顶栏导航与方案切换 -->
|
|
<header class="top-nav">
|
|
<div class="brand">
|
|
<img src="/Scert.png" alt="Scert Logo" />
|
|
<span>Scert 初始化向导 • 4步骤设计方案选型</span>
|
|
</div>
|
|
|
|
<!-- 方案选择器 -->
|
|
<div class="nav-center">
|
|
<div class="nav-group">
|
|
<button class="nav-btn active" data-theme="deck" onclick="switchTheme('deck')">
|
|
<span class="badge-tag">方案 A</span>
|
|
<span class="btn-label">卡片分体与状态联运流 (Card-Deck)</span>
|
|
</button>
|
|
<button class="nav-btn" data-theme="ops" onclick="switchTheme('ops')">
|
|
<span class="badge-tag">方案 B</span>
|
|
<span class="btn-label">沉浸式专业运维仪表板 (Ops-Console)</span>
|
|
</button>
|
|
<button class="nav-btn" data-theme="minimal" onclick="switchTheme('minimal')">
|
|
<span class="badge-tag">方案 C</span>
|
|
<span class="btn-label">极简轻奢分步引导台 (Minimalist Focus)</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meta-badge">
|
|
<span class="meta-dot"></span>
|
|
<span>受保护的本地 IPC 重置体系</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 页面主体容器 -->
|
|
<main class="viewport">
|
|
<div class="preview-frame" id="preview-frame">
|
|
<!-- 由 app.js 动态渲染 -->
|
|
</div>
|
|
</main>
|
|
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html> |