# DIB Solution Center Site MVP Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Build a static DIB 数智桥方案中心 MVP that presents the platform blueprint, “一底座、多专区”建设口径, 医疗专区结构, 一期路线图, 进展时间轴, and leadership reporting materials.

**Architecture:** Use a lightweight static site under `C:\dev\dib-platform\site` with plain HTML, CSS, and JavaScript. Content is embedded for MVP speed, while page structure mirrors the Markdown documents under `C:\dev\dib-platform\docs`.

**Tech Stack:** Static HTML, CSS, vanilla JavaScript, Mermaid CDN for diagrams.

---

### Task 1: Create Static Site Shell

**Files:**
- Create: `C:\dev\dib-platform\site\index.html`
- Create: `C:\dev\dib-platform\site\styles.css`
- Create: `C:\dev\dib-platform\site\app.js`

**Step 1: Create the HTML shell**

Add a single-page static site with sections:

```text
首页
总体架构
一底座多专区
医疗专区
一期路线图
进展时间轴
汇报素材
```

**Step 2: Add stable anchors**

Use section IDs:

```text
home
architecture
foundation
medical
roadmap
timeline
report
```

**Step 3: Add content placeholders**

Use the approved口号:

```text
一桥贯通，多区协同，数智赋能
```

Expected result: opening `index.html` shows all core sections and navigation.

### Task 2: Add Visual Design

**Files:**
- Modify: `C:\dev\dib-platform\site\styles.css`

**Step 1: Define design tokens**

Use a restrained healthcare platform palette:

```text
deep ink
blue green
clear blue
warm white
soft gold accent
```

**Step 2: Build responsive layout**

Desktop:

```text
left/top navigation + full-width content bands
```

Mobile:

```text
stacked navigation + readable cards + no overlapping text
```

**Step 3: Add visual hierarchy**

Use:

```text
hero band
metric cards
architecture panels
timeline cards
comparison table
```

Expected result: site looks suitable for leadership presentation and team synchronization.

### Task 3: Add Interactive Navigation and Timeline

**Files:**
- Modify: `C:\dev\dib-platform\site\app.js`
- Modify: `C:\dev\dib-platform\site\index.html`

**Step 1: Implement active navigation**

Highlight current section based on scroll position.

**Step 2: Add timeline data**

Use entries from:

```text
C:\dev\dib-platform\docs\progress\dib-platform-progress-timeline.md
```

**Step 3: Render timeline cards**

Each entry should show:

```text
date
type
title
summary
status
```

Expected result: timeline can be updated from a simple JavaScript data array.

### Task 4: Verify Static Site

**Files:**
- Verify: `C:\dev\dib-platform\site\index.html`
- Verify: `C:\dev\dib-platform\site\styles.css`
- Verify: `C:\dev\dib-platform\site\app.js`

**Step 1: Inspect files**

Run:

```powershell
Get-ChildItem C:\dev\dib-platform\site -File
```

Expected: `index.html`, `styles.css`, and `app.js` exist and are non-empty.

**Step 2: Check content markers**

Run:

```powershell
rg -n "一桥贯通|山东健康医疗大数据管理中心|一底座|医疗专区|M0|进展时间轴" C:\dev\dib-platform\site
```

Expected: all markers are found.

**Step 3: Browser visual check**

Open:

```text
file:///C:/dev/dib-platform/site/index.html
```

Expected: no blank page, no obvious overlap, navigation works, timeline renders.

### Task 5: Document Site Entry

**Files:**
- Create: `C:\dev\dib-platform\site\README.md`

**Step 1: Add usage notes**

Document:

```text
how to open the site
content source
how to update timeline
security warnings
```

Expected result: future participants know how to maintain the static site.