注册了个edu.kg域名，凌天大学成立了（bushi）

# 任务目标

为面向未来的非传统人工智能与计算机科学大学 —— **LTY University of Technology (lty.edu.kg)** 完善其高保真多页面官网原型。我们需要新建两个高度互动的二级子页面：`curriculum.html`（课程检索器）与 `labs.html`（虚拟实验室控制台），并建立统一的深浅色模式切换与导航系统。



---



## 1. 项目基础与既有设计规范

目前，项目的首页 `index.html` 已经构建完成，整体采用了 **Anthropic/Claude 风格** 的温暖人文与学术沙龙美学。你的后续开发必须与该设计规范**完全一致**。



### 🎨 核心色彩体系与变量合约 (CSS Tokens)

*   **浅色模式 (Light Mode)**：

    *   页面画布 (`--bg`): `#f5f4ed` (温暖的羊皮纸 Parchment 质感，严禁使用纯白 `#ffffff` 作为大背景)

    *   卡片容器 (`--surface`): `#faf9f5` (象牙白 Ivory)

    *   交互元素/次要按钮 (`--surface-warm`): `#e8e6dc` (温暖沙色 Warm Sand)

    *   正文字体 (`--fg`): `#141413` (接近黑色的极深灰)

    *   主品牌色 (`--accent`): `#c96442` (泥瓦红 Terracotta，温暖泥土色，用于主 CTA，严禁使用传统大学的蓝、红大色块)

    *   边框与分割线 (`--border` / `--border-soft`): `#f0eee6` / `#e8e6dc`

*   **深色模式 (Dark Mode - 通过给 `html` 增加 `.dark` 类触发)**：

    *   页面画布 (`--bg`): `#141413` (Near Black 温暖暗炭色)

    *   卡片容器 (`--surface`): `#1c1c1b`

    *   交互元素 (`--surface-warm`): `#2c2b29`

    *   正文字体 (`--fg`): `#f5f4ed`

    *   主品牌色 (`--accent`): `#d97757` (珊瑚橙 Coral)

    *   边框与分割线 (`--border`): `#2c2b29`



### ✍️ 字体规范

*   **标题 (Serif)**: `"Anthropic Serif"`, Georgia, "Times New Roman", serif (彰显人文厚重感)

*   **正文/UI (Sans)**: `"Anthropic Sans"`, system-ui, -apple-system, sans-serif

*   **代码/数值 (Mono)**: `"Anthropic Mono"`, ui-monospace, "JetBrains Mono", monospace (用于统计数值、标签及状态面板)



---



## 2. 待开发页面 1：交互式课程检索中心 (`curriculum.html`)

该页面作为学术探索的核心。排版必须跳出传统列表的死板形式，通过交互卡片与可视化路线图，激发学生探索计算机与 AI 前沿课程的欲望。



### 核心功能与交互要求

1.  **非传统多维过滤器 (Multi-Dimensional Filter)**：

    *   包含一个侧边栏或顶部非对称过滤器，按方向（如：神经网络、分布式系统、形式化方法、人机交互）和级别（如：基石、前沿探索、实验室攻关）分类。

    *   支持基于 Vanilla JS 的**即时搜索栏**，键入时下方卡片无缝过滤。

2.  **可视化学习路径图 (Interactive Path Builder)**：

    *   设计一个交互式“职业/研究方向航线图”（例如："AI 智能体专家路线"、"系统架构师路线"）。

    *   用户点击某条路线时，课程列表会以动画高亮该路线所需的前置与必修课，并展示发展脉络。

3.  **高保真课程卡片与详情抽屉 (Course Cards & Drawer)**：

    *   卡片上展示硬核信息（如：课程编号 `CS-401 Cognitive Agents`、学分、GPU 算力配额、核心实验室）。

    *   点击卡片触发右侧滑动抽屉（Drawer）或无缝弹窗，展示非传统的大纲（例如：“第一周：手写 Transformer”；“期末挑战：让智能体自主通关沙盒游戏”）。



---



## 3. 待开发页面 2：虚拟实验室控制台 & 实时模拟器 (`labs.html`)

这个页面要展示 LTY 极其硬核的科研实力，将枯燥的介绍文案转化为一个“实时运行”的科研控制中心。



### 核心功能与交互要求

1.  **算力集群实时监控面板 (GPU Cluster Monitor)**：

    *   设计一个极富科技感的监控卡片。

    *   使用 JS 模拟**动态变化的数值与图表**（如：LTY-Node-01 占用率：`89.4%`、实时温度、正在训练的模型 `LTY-LLM-v3-Core` 进度条、GPU 算力动态波动）。

2.  **AI 智能体沙盒模拟终端 (AI Agent Sandbox Terminal)**：

    *   内嵌一个复古的仿真命令行终端（Monospace 字体，暗黑背景）。

    *   用户可以输入简单的 Prompt 或选择预设（如：“启动多智能体辩论”，或“分配推理任务”）。

    *   点击运行后，终端以逐行打印的形式模拟输出 AI 智能体的推理链、规划步骤及行动日志，极具极客感与可玩性。

3.  **前沿研究实验室网格 (Lab Console Cards)**：

    *   展示各个特色实验室（如：*认知架构实验室*、*分布式神经网络系统实验室*、*量子计算与形式验证实验室*）。

    *   提供可折叠的“近期高水平论文/开源项目”与“正在进行的硕士/博士论文课题”。



---



## 4. 全局交互整合与质量控制（统一 Chrome 规范）

1.  **双向无缝导航与状态同步**：

    *   所有页面的 Header 需统一，并在右上角包含一个精美的 **Dark/Light Mode 开关**。

    *   **核心逻辑**：切换模式时，需将 `.dark` 类正确应用至 `html` / `body` 元素，并使用 `localStorage` 持久化存储。当用户在 `index.html` 切换为 Dark Mode，点击进入 `curriculum.html` 时，新页面必须自动维持 Dark Mode 状态，反之亦然。

2.  **响应式排版要求 (Responsive Breakpoints)**：

    *   严格适配移动端（`360px - 430px`）、平板（`768px - 1024px`）以及宽屏桌面（`1440px - 1920px`）。

    *   在移动端上，导航菜单自动收缩为汉堡抽屉菜单，卡片布局自动平滑Reflow，不出现任何横向滚动条，触控目标不小于 `44px`。

3.  **反“AI 套路”文案与视觉禁忌 (Anti-AI-Slop)**：

    *   **文案要求**：严禁出现 "10x faster"、"leading the future of education"、"AI-powered tomorrow" 等俗套文案。使用具体的科学名词与富有哲理的学术语言。

    *   **视觉要求**：严禁使用渐变色大卡片、插画小人矢量图、或者标题旁密集堆砌 Emoji（✨, 🚀, 🎯）。全部采用精致的线条、网格布局、以及克制高雅的 Terracotta 单一主品牌色。

    *   **交互技术**：全部交互使用纯原生 CSS 与 Vanilla JS 实现，代码保持在单个 HTML 文件内（如需要可使用内联 `<style>` 与 `<script>`，保证在沙箱预览中开箱即用）。