# dotlog — Landing Page Demo

一個單檔 HTML 的產品 landing page 範例，遵循 [`DESIGN.md`](./DESIGN.md) 中萃取自 [clianything.org/zh](https://clianything.org/zh) 的設計規範（極簡、綠色科技感、開發者導向）。

> 這是一個**示範用的假想產品**：`dotlog` — 一個「一行指令把所有日誌管線串起來」的 CLI 工具。所有文案、統計數字、GitHub 連結皆為虛構，僅作為設計實作的展示。

---

## 預覽

| 淺色主題 | 深色主題 |
|---------|---------|
| ![Light mode](./screenshot-light.png) | ![Dark mode](./screenshot-dark.png) |

---

## 快速開始

不需要任何 build 工具或 npm 依賴，直接用瀏覽器打開即可：

```bash
open index.html
```

若字體載入遇到 CORS 問題（某些瀏覽器對 `file://` 較嚴格），起一個本地靜態伺服器：

```bash
python3 -m http.server 8000
# 打開 http://localhost:8000
```

---

## 檔案結構

```
.
├── DESIGN.md              # 設計規格（色彩 / 字體 / 版面 / 組件 tokens）
├── index.html             # 單檔實作（HTML + CSS + 最少量 JS）
├── screenshot-light.png   # 淺色主題預覽
├── screenshot-dark.png    # 深色主題預覽
└── README.md              # 你正在看的這個檔案
```

---

## 頁面區塊

照 `DESIGN.md` 第 5 節，共 8 個區塊：

1. **Header** — Sticky、半透明 + `backdrop-filter`、含深色模式 toggle
2. **Hero** — 大標 + 副標 + 徽章列 + 雙 CTA，含淡綠 radial gradient 背景
3. **為什麼選擇 dotlog** — 4 欄特色卡（零配置 / 全格式 / 低資源 / 原生整合）
4. **5 分鐘上手** — 4 步驟編號卡，含終端指令 code block
5. **應用覆蓋** — 6 類別卡片網格（Web / 容器 / DB / 雲端 / MQ / 監控）
6. **7 階段流水線** — 水平時間軸（手機自動翻轉為垂直）
7. **FAQ** — 原生 `<details>` accordion，`+/−` 圖示切換
8. **Footer** — 4 欄連結 + MIT 版權

---

## 技術重點

### 色彩系統

使用 CSS Variables，對應 `DESIGN.md` 第 2 節：

```css
:root {
  --background: #fcfcfc;
  --foreground: #171717;
  --primary:    #00bb7f;   /* 品牌綠，僅用於 CTA、重點、hover */
  --border:     #dfdfdf;
  /* ... */
}

html.dark {
  --background: #121212;
  --foreground: #e2e8f0;
  /* ... */
}
```

### 字體

Google Fonts CDN 載入：

- **Space Grotesk**（400/500/600/700）— 標題與 UI
- **JetBrains Mono**（400/500/600）— 指令、徽章、標籤

（`DESIGN.md` 原規格含 Merriweather，本實作為保持簡單已省略。）

### 互動

| 行為 | 實作 |
|------|------|
| 深色模式 | toggle 按鈕 + `localStorage` 記憶 + 預設跟隨 `prefers-color-scheme` |
| Scroll fade-up | `IntersectionObserver`（threshold 0.08，`rootMargin: -40px bottom`） |
| FAQ 展開 | 原生 `<details>`，無需額外 JS |
| Header 模糊 | `backdrop-filter: blur(10px)`（含 `-webkit-` 前綴） |
| 卡片 hover | `translateY(-2px)` + `shadow-lg` + border 轉綠 |

### 響應式斷點

| 寬度 | 變化 |
|------|------|
| `≥ 1024px` | 4 欄 feature grid、水平 7 階段流水線 |
| `768–1023px` | 2 欄 grid、水平流水線仍保留 |
| `560–767px` | 2 欄 app grid、流水線垂直時間軸 |
| `< 560px` | 單欄、Hero padding 壓縮、Header 僅保留主 CTA |

### 可及性

- 正文對比率 `#171717 on #fcfcfc` ≈ 16:1（WCAG AAA）
- 所有互動元素具備 `focus-visible` ring（`outline: 2px solid var(--ring)`）
- Icon-only 按鈕（主題 toggle）具 `aria-label`
- Accordion 使用語意化 `<details>` / `<summary>`
- `prefers-reduced-motion` 下停用 fade-up 動畫與平滑捲動

---

## 客製化

### 改品牌色

打開 `index.html`，找 `:root { --primary: #00bb7f }`，換成你要的色碼即可。深色主題同時修改 `html.dark { --primary: ... }`。

### 改文案

所有文字寫在 HTML 中（非 JS），直接用編輯器搜尋替換。區塊之間以 HTML 註解 `<!-- ============ Hero ============ -->` 分隔，方便定位。

### 加 / 刪區塊

每個 `<section class="section">` 是一個獨立區塊，直接複製或刪除整個 `<section>` 節點即可，不會影響其他區塊。

### 換字體

修改 `<head>` 內的 Google Fonts `<link>` 與 `--font-sans` / `--font-mono` 變數。

---

## 重新產生截圖

本倉庫內的截圖由 Playwright（Python）自動產生：

```bash
# 需先安裝 playwright
pip install playwright
playwright install chromium

# 截圖腳本（可存為 screenshot.py）
python3 -c "
import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        ctx = await browser.new_context(viewport={'width': 1280, 'height': 900}, device_scale_factor=2)
        page = await ctx.new_page()
        await page.goto('file://$(pwd)/index.html', wait_until='networkidle')
        await page.evaluate(\"document.querySelectorAll('.fade-up').forEach(e => e.classList.add('visible'))\")
        await page.wait_for_timeout(400)
        await page.screenshot(path='screenshot-light.png', full_page=True)
        await page.evaluate(\"document.documentElement.classList.add('dark')\")
        await page.wait_for_timeout(300)
        await page.screenshot(path='screenshot-dark.png', full_page=True)
        await browser.close()

asyncio.run(main())
"
```

> ⚠️ 截圖時需手動將 `.fade-up` 元素加上 `visible` class，因為 `IntersectionObserver` 只在元素進入視窗時觸發，全頁截圖會從頁頂往下卷，下半部元素在截圖瞬間尚未「進入視窗」，導致底部區塊空白。

---

## 授權

本示範專案採 MIT 授權自由使用；DESIGN.md 的靈感來源為 [clianything.org](https://clianything.org) 公開網站的觀察萃取，非官方產出。
