# dotlog — Landing Page Demo
一個單檔 HTML 的產品 landing page 範例，遵循 [`DESIGN.md`](./DESIGN.md) 中萃取自 [clianything.org/zh](https://clianything.org/zh) 的設計規範（極簡、綠色科技感、開發者導向）。
> 這是一個**示範用的假想產品**：`dotlog` — 一個「一行指令把所有日誌管線串起來」的 CLI 工具。所有文案、統計數字、GitHub 連結皆為虛構，僅作為設計實作的展示。
---
## 預覽
| 淺色主題 | 深色主題 |
|---------|---------|
|  |  |
---
## 快速開始
不需要任何 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** — 原生 `` 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 展開 | 原生 ``，無需額外 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 使用語意化 `` / ``
- `prefers-reduced-motion` 下停用 fade-up 動畫與平滑捲動
---
## 客製化
### 改品牌色
打開 `index.html`，找 `:root { --primary: #00bb7f }`，換成你要的色碼即可。深色主題同時修改 `html.dark { --primary: ... }`。
### 改文案
所有文字寫在 HTML 中（非 JS），直接用編輯器搜尋替換。區塊之間以 HTML 註解 `` 分隔，方便定位。
### 加 / 刪區塊
每個 `` 是一個獨立區塊，直接複製或刪除整個 `` 節點即可，不會影響其他區塊。
### 換字體
修改 `` 內的 Google Fonts `` 與 `--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) 公開網站的觀察萃取，非官方產出。