dotlog — Landing Page Demo
一個單檔 HTML 的產品 landing page 範例，遵循 DESIGN.md 中萃取自 clianything.org/zh 的設計規範（極簡、綠色科技感、開發者導向）。
這是一個示範用的假想產品：
dotlog— 一個「一行指令把所有日誌管線串起來」的 CLI 工具。所有文案、統計數字、GitHub 連結皆為虛構，僅作為設計實作的展示。
預覽
| 淺色主題 | 深色主題 |
|---|---|
 |
 |
快速開始
不需要任何 build 工具或 npm 依賴，直接用瀏覽器打開即可：
open index.html
若字體載入遇到 CORS 問題（某些瀏覽器對 file:// 較嚴格），起一個本地靜態伺服器：
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 個區塊：
- Header — Sticky、半透明 +
backdrop-filter、含深色模式 toggle - Hero — 大標 + 副標 + 徽章列 + 雙 CTA，含淡綠 radial gradient 背景
- 為什麼選擇 dotlog — 4 欄特色卡（零配置 / 全格式 / 低資源 / 原生整合）
- 5 分鐘上手 — 4 步驟編號卡，含終端指令 code block
- 應用覆蓋 — 6 類別卡片網格（Web / 容器 / DB / 雲端 / MQ / 監控）
- 7 階段流水線 — 水平時間軸（手機自動翻轉為垂直）
- FAQ — 原生
<details>accordion，+/−圖示切換 - Footer — 4 欄連結 + MIT 版權
技術重點
色彩系統
使用 CSS Variables，對應 DESIGN.md 第 2 節：
: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-visiblering（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）自動產生：
# 需先安裝 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元素加上visibleclass，因為IntersectionObserver只在元素進入視窗時觸發，全頁截圖會從頁頂往下卷，下半部元素在截圖瞬間尚未「進入視窗」，導致底部區塊空白。
授權
本示範專案採 MIT 授權自由使用；DESIGN.md 的靈感來源為 clianything.org 公開網站的觀察萃取，非官方產出。