網頁製作須知

這些都是已經做好、正在用的網頁，打開來操作一遍最快：

我們做的不是一般網站，而是現場演出的投影道具：在昏暗的場地用投影機打在布幕上、操作的人在側台用延伸螢幕常看不到滑鼠、後排觀眾視線會被擋、演出中沒時間 debug。所以原則是：大、簡單、靠鍵盤、容錯、可現場微調。

1. 畫面佈局與彈性

• 內容別塞滿，用 vh 留白；下方留白要夠大（至少 100vh），捲到底是乾淨的黑、捲到頂才是內容。
• 重點文字用 vw／vh 定大小（如 min(8vw, 13vh)），換投影機解析度時字會自動縮放、不爆版。

2. 全螢幕與快捷鍵

• 要有全螢幕按鈕（用 Fullscreen API，比 F11 穩）。全螢幕只能由使用者點擊／按鍵觸發，不能自動全螢幕。
• iPhone 的 Safari 不支援網頁全螢幕 → 偵測不到時要把按鈕自動藏起來。
• 每個按鈕都要有對應快捷鍵。按鈕是彩排用的，快捷鍵才是正式演出主力。
• 細節：用 !e.repeat 擋按住連發、空白鍵要 preventDefault() 擋捲動、控制台開啟時快捷鍵要暫停。
• 快捷鍵選單一字母或大鍵（空白／Enter／F），別用 Ctrl 組合（會被瀏覽器搶、跨系統行為不一）。

3. 視覺設計

• 背景用黑色：投影幕上黑＝看不見，畫面只剩要給觀眾看的大字。文字用亮色（白、象牙白、亮黃）。
• 其他顏色可以，但以簡潔、不干擾為原則；投影機偏暗偏黃，要用高彩度高對比的顏色。
• 控制台很重要：把要微調的參數做成面板＋localStorage 自動記住；可藏在小字裡點開，觀眾看不到、你隨時叫得出來。

其他實戰經驗

• 單一 HTML 檔、能離線：CSS／JS 都寫在裡面，雙擊就開；現場常沒網路，線上字體一定要設系統字體備援。
• 防呆：自動排除類的邏輯要想「條件太嚴格會不會卡死」並寫退路。
• 手機也要測：排版自動縮、觸控優化。
• 演出前清單：用正式設備＋投影機測、接延伸螢幕、走到最後一排看字、閉眼按快捷鍵、測捲動、斷網測、確認控制台設定有記住。
• 發佈前檢查敏感資訊：API 金鑰、客戶名稱、內部連結、員工真名都不要推上公開 repo。