181 lines
5.8 KiB
Markdown
181 lines
5.8 KiB
Markdown
# 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** — 原生 `<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) 公開網站的觀察萃取，非官方產出。
|