開源專案 · MIT 授權 · 純 CSS

demodeck

**為你的 demo 準備好的精緻控制台。**

給開源 demo 用的深色精緻控制台外殼，包含分段按鈕、滑桿、顏色欄位、開關、樣式化下拉選單、彈出層、即時主控台與可複製程式碼框。純 CSS 加一層極薄的行為層，零相依。

運作原理

引入樣式表與腳本，在 body 加上 `dd` 類別，就有了深色頁面、精緻頁首與雙欄控制台版面。

從 index.html 複製你需要的元件，包含分段按鈕、滑桿、顏色欄位、開關。腳本會自動接好它們，並發出 `dd:change`、`dd:color` 等乾淨事件。

把你函式庫的即時預覽放進右欄，輸出到內建的主控台終端機，讓訪客自己玩。整體外觀只要覆寫幾個 `--dd-*` CSS 變數即可換膚。

分段按鈕、滑桿、會與 hex 同步的顏色欄位、開關、樣式化下拉選單、彈出層、即時主控台終端機與可複製程式碼框，全部開箱即深色。

所有樣式都是純 CSS；腳本只負責加上互動行為並自動執行。無框架、無建置步驟、不必安裝任何東西。

控制元件會發出乾淨的自訂事件（`dd:change`、`dd:color`），主控台也有一行就能用的 `log()` 輔助函式，接上你的 demo 只要幾行。

在 `:root` 覆寫 `--dd-accent`、`--dd-bg`、`--dd-radius` 等變數就能重新換膚整個面板。與 liquidframe 搭配可呈現行動／網頁 UI 預覽。

打開 live demo、檢視原始碼，把你想要的部分複製走——它把每個元件都接在一張即時預覽卡上。MIT 授權，可自由 fork 與換膚。