Café Aurora

挑戰

在介面開發課上，同一個要求交給了三個 AI：ChatGPT、Gemini 和 DeepSeek。任務是選出最好的頁面、看懂每一行，再親手重寫程式碼，一個效果都不能少。

做了什麼

• 一間賽博龐克咖啡館，有開場畫面、專屬游標、粒子背景、菜單，以及調配飲料的實驗室，杯子只用 CSS 畫成。
• 早上 6 點到晚上 6 點，網站會變成歐若拉麵包店：顏色、菜單都換了，實驗室也變成做麵包。在頁面出現之前，依訪客的時鐘決定。
• 同一個頁面做成三個版本：純 CSS、Bootstrap 和 Tailwind，比較每種寫 CSS 的方式改變了什麼。
• 它是 Linu Sites 模擬器裡的範例網站：每個部分都能在那裡開關，價格也跟著變。

背後的技術

• 從同一個範本產生 13 種語言，字型由網站自己提供，不用 CDN。
• 白天和夜晚都達到 AA 對比，點擊目標至少 24 px，都用 axe 檢查過；開啟「減少動態效果」時，動畫會停止。
• 只接受來自 Linu Sites 網址的模擬器指令。