Lovable AI 教學＆使用心得｜零程式碼用 AI 做網站！費用、優缺點、操作教學

請建立一個完整、可實際操作、支援桌機與手機版的全中文咖啡廳品牌官網。網站不是線框稿，請直接完成具有完整視覺設計、內容、響應式版面與前端互動功能的正式網站。

# 一、專案基本設定

品牌名稱：LYS 微光咖啡

品牌類型：位於台北的虛構北歐風格獨立咖啡廳

品牌標語：讓一天，在光裡慢下來。

英文輔助標語：A café shaped by light.

品牌核心：光線、咖啡、安靜、北歐日常、慢下來的城市片刻。

目標客群：

* 22–40歲，重視生活質感的城市工作者
* 喜歡咖啡、設計、閱讀與安靜空間的人
* 想短暫工作、閱讀、約會或獨處的客人
* 偏好 Kinfolk、北歐設計與獨立雜誌視覺的人

網站所有主要內容、按鈕、菜單、互動題目與資訊都必須使用繁體中文。只有品牌名稱 LYS、英文標語與必要的咖啡品項名稱可以保留英文。

這是一個純品牌形象與來店資訊網站，不是電商網站。請勿加入：

* 商品購物車
* 線上付款
* 會員登入
* 商品庫存
* 外送點餐
* Supabase
* 外部 API
* AI API
* 後端資料庫
* Light Table／微光選書桌

所有資料使用前端靜態資料，所有互動功能在瀏覽器端完成。請不要建立任何需要持續付費才能運作的功能。

# 二、網站整體形式

請製作成一個完整的單頁式品牌官網，以流暢滾動方式瀏覽。導覽列項目為：

* 首頁
* 菜單
* 今天的停留方式
* 關於微光
* 來店資訊

點擊導覽列項目時，要平滑滾動至對應區塊。

桌機版使用固定在頂部的半透明導覽列，向下滾動後增加淡淡的奶油白背景、細線邊框與 backdrop blur。

手機版使用精簡的頂部導覽列：

* 左側顯示 LYS Logo
* 右側顯示漢堡選單
* 點擊後開啟全螢幕或大面積的米白色選單
* 選單項目垂直排列
* 點擊選項後自動關閉選單並滑到對應區塊
* 不可以出現水平捲動
* 所有按鈕點擊範圍至少44px
* 支援375px寬度的手機畫面

# 三、視覺風格

整體風格：

北歐極簡、Kinfolk雜誌感、自然晨光、安靜而不冷淡、具有高級獨立品牌氣質。

不要做成：

* 大量純黑白的冷淡科技風
* 常見咖啡廳模板
* 奶茶色網美咖啡廳
* 可愛插畫風
* 復古美式餐廳
* 過度商業化的連鎖咖啡品牌
* 大量圓角卡片堆疊的SaaS網站
* 充滿emoji或彩色圖示的網站
* 過度使用動畫、陰影或漸層

主要色彩請使用CSS變數集中管理：

* 象牙白：#F5F1E8
* 溫暖米白：#EAE2D3
* 淡晨光黃：#E8D8AE
* 霧藍灰：#AEBBC1
* 蜂蜜棕：#B78455
* 深咖啡：#3A312B
* 暮色深藍：#273039
* 柔和白：#FBF9F4

字體風格：

* 中文內文使用乾淨、現代、容易閱讀的無襯線中文字體
* 大標題使用帶有編輯感的襯線字體
* 英文品牌名稱 LYS 使用高對比襯線字體，字距稍微拉開
* 不使用過於花俏的手寫字
* 桌機版主標題具有大尺寸雜誌排版感
* 手機版標題必須縮小並妥善換行，不可超出畫面

版面設定：

* 桌機版最大內容寬度約1200px
* 大區塊上下留白充足
* 圖片與文字不要全部置中，適度使用左右錯落的編輯式排版
* 圖片採用自然比例與不規則但平衡的排列
* 邊框細而柔和
* 圓角控制在0–12px，不要每個區塊都是大型圓角卡片
* 陰影非常淡，主要依靠留白、字體與圖片建立層次

圖片方向：

* 清晨自然光灑入咖啡廳
* 淺色木材、亞麻、玻璃與不鏽鋼
* 咖啡蒸氣、窗邊座位、木桌上的光影
* 北歐荳蔻捲、酸種麵包、手沖咖啡
* 人物只出現自然的側身、手部或遠景
* 不要使用明顯擺拍、過度飽和或風格不一致的圖片
* 所有圖片要有適當alt文字
* 圖片延遲載入，避免影響網站速度

# 四、依照時間自動改變網站光線

請根據使用者瀏覽器的本地時間，自動改變首頁主視覺、背景色與文字。此功能完全在前端執行，不呼叫任何API。

時間狀態：

## 晨光｜06:00–10:59

背景：象牙白與淡晨光黃
主標題：早安，從一杯咖啡慢慢開始。
副標題：讓清晨的第一束光，陪你找到今天的節奏。
狀態標籤：此刻・晨光

## 日光｜11:00–15:59

背景：明亮米白與極淡霧藍
主標題：留一點時間，給今天的自己。
副標題：一杯咖啡、一張靠窗的座位，暫時不必急著前往下一站。
狀態標籤：此刻・日光

## 暮光｜16:00–19:59

背景：溫暖蜂蜜色與淺棕色
主標題：讓這一天，在光裡慢下來。
副標題：當午後的光線變得柔和，也讓自己的步調慢一點。
狀態標籤：此刻・暮光

## 夜晚｜20:00–05:59

背景：暮色深藍與柔和暖白
主標題：今天辛苦了，明天再來坐坐。
副標題：LYS已經休息，為下一個有光的早晨準備。
狀態標籤：此刻・夜晚

轉換要求：

* 頁面載入時自動判斷時間
* 色彩變化使用平滑transition
* 不要突然閃爍
* 文字對比必須清楚
* 夜間模式不能黑到看不清楚
* 在導覽列右側加入低調的「光線模式」控制按鈕
* 使用者可手動切換晨光、日光、暮光、夜晚，方便預覽
* 手動選擇後儲存在localStorage
* 提供「跟隨現在時間」選項
* 手機版將此功能放進漢堡選單，不佔用頂部空間

# 五、首頁主視覺

首頁Hero高度：

* 桌機版接近100vh，但不超過900px
* 手機版至少85svh
* 必須考慮手機瀏覽器工具列高度

桌機版採用左右分割排版：

左側：

* 狀態標籤「此刻・晨光／日光／暮光／夜晚」
* LYS 微光咖啡
* 依時間改變的主標題
* 依時間改變的副標題
* 兩個按鈕

主要按鈕：看看今日菜單
次要按鈕：選擇今天的停留方式

右側：

* 一張具有自然窗光的北歐咖啡廳主圖
* 圖片不要完全填滿矩形，可使用稍微錯位的雜誌式構圖
* 圖片旁可以出現一行極小的英文：「Light changes. Coffee remains.」

手機版：

* 主圖放在文字下方
* 主標題最多三至四行
* 兩個按鈕可上下排列或平均分配
* 不可因圖片造成首屏文字被擠出畫面
* 保留足夠左右留白
* 圖片高度約38–44vh
* 按鈕必須容易點擊

Hero下方加入一行簡短介紹：

「LYS在丹麥語裡是光的意思。我們想做的，是一間讓人記得光線如何落下，也記得自己如何慢下來的咖啡廳。」

# 六、品牌理念簡介

建立一個具有編輯式排版的品牌理念區塊。

小標：關於LYS

主標題：

「我們相信，一杯咖啡不必催促你前往下一站。」

內文：

「城市裡的時間總是走得很快。LYS想留下一個稍微不同的空間：清晨可以安靜醒來，午間可以暫時喘息，到了傍晚，也可以看著窗邊的光慢慢變化。」

「我們以淺焙咖啡、季節食材與每日少量烘焙的甜點，陪伴每一種停留。你可以只喝一杯濃縮，也可以帶一本書，坐到午後的光移動到另一張桌子。」

桌機版使用一側大標題、一側兩段內文。手機版改為自然的單欄排列。

# 七、完整菜單區

區塊標題：依著一天的光，選擇今天想喝的味道。

區塊說明：

「從清晨的第一杯手沖，到午後柔和的奶香與甜點，LYS的菜單隨著一天的節奏展開。」

請建立可互動切換的菜單分類：

1. 晨光咖啡
2. 午後飲品
3. 北歐輕食
4. 每日甜點

桌機版使用水平分類標籤；手機版可以使用可橫向滑動但不造成整個頁面水平捲動的分類列，或改用精簡下拉選單。

切換分類時使用淡入淡出動畫，不重新載入頁面。

每個品項顯示：

* 中文名稱
* 必要時顯示英文名稱
* 一至兩句風味或食材說明
* 價格
* 飲食標籤
* 不加入購買按鈕

飲食標籤使用簡潔文字：

* 純素
* 蛋奶素
* 無麩質
* 含堅果
* 可更換燕麥奶

不要使用大量彩色標籤。

## 晨光咖啡

### 微光濃縮 Espresso｜NT$100

帶有黑巧克力、烤杏仁與焦糖尾韻，短而明亮，適合準備開始一天以前的幾分鐘。

### 經典美式 Americano｜NT$120

以當季配方豆製作，口感乾淨平衡，保留可可與柑橘調性。可選熱飲或冰飲。

### 馥芮白 Flat White｜NT$160

雙份濃縮咖啡與細緻奶泡形成溫潤而集中的口感。
標籤：可更換燕麥奶

### 卡布奇諾 Cappuccino｜NT$160

濃縮咖啡、熱牛奶與綿密奶泡比例平衡，灑上極少量可可粉。
標籤：可更換燕麥奶

### 燕麥奶拿鐵 Oat Latte｜NT$180

柔和燕麥香氣襯托咖啡的焦糖甜感，口感圓潤但不過度甜膩。
標籤：純素

### 今日手沖 Filter Coffee｜NT$180起

依當週豆單提供花香、柑橘或莓果調性的單一產區咖啡。請在吧台詢問今日風味。

### 冷萃咖啡 Cold Brew｜NT$170

低溫浸泡十二小時，口感清爽，帶有淡淡的巧克力與熟果香。

備註：植物奶更換加NT$20；手沖咖啡依豆款調整價格。

## 午後飲品

### 桂花冷萃 Osmanthus Cold Brew｜NT$190

冷萃咖啡加入淡雅桂花與少量蜂蜜，保留咖啡本身的乾淨尾韻。

### 微光氣泡咖啡 Coffee Tonic｜NT$190

濃縮咖啡、通寧水與柑橘皮，明亮清爽，適合需要重新清醒的午後。

### 蜂蜜海鹽燕麥拿鐵｜NT$200

燕麥奶、少量蜂蜜與海鹽平衡咖啡苦甜，口感柔和。
標籤：可調整為純素

### 北歐熱可可｜NT$180

使用深色可可與溫熱牛奶，甜度克制，帶有淡淡海鹽香氣。
標籤：可更換燕麥奶

### 洋甘菊蘋果茶｜NT$170

洋甘菊、乾燥蘋果與少量檸檬皮，不含咖啡因，適合傍晚慢慢飲用。
標籤：純素、無咖啡因

### 季節微光｜NT$190

依季節水果與香草調整的限定飲品，請顯示「本季：白桃、接骨木花與氣泡水」。
標籤：純素、無咖啡因

## 北歐輕食

### 酸種麵包與發酵奶油｜NT$140

每日烘焙的酸種麵包，搭配海鹽發酵奶油與當季手工果醬。
標籤：蛋奶素

### 半熟蛋酪梨開放式三明治｜NT$240

酸種麵包、酪梨、半熟蛋、醃漬紅洋蔥與新鮮香草。
標籤：蛋奶素

### 野菇起司開放式三明治｜NT$260

奶油炒綜合野菇、熟成起司、芝麻葉與黑胡椒，搭配烘烤酸種麵包。
標籤：蛋奶素

### 煙燻鮭魚蒔蘿三明治｜NT$290

煙燻鮭魚、蒔蘿奶油乳酪、小黃瓜與檸檬皮，呈現清爽的北歐風味。

### 烤南瓜鷹嘴豆沙拉｜NT$260

烤南瓜、鷹嘴豆、羽衣甘藍、穀物與檸檬芝麻醬。
標籤：純素、含芝麻

### 季節湯與酸種麵包｜NT$220

本季提供烤花椰菜白豆濃湯，搭配一片酸種麵包。
標籤：純素

## 每日甜點

### 北歐荳蔻捲 Cardamom Bun｜NT$130

以荳蔻、奶油與少量糖製作，每日少量烘焙，香氣溫暖但不過甜。
標籤：蛋奶素

### 肉桂捲 Cinnamon Bun｜NT$140

柔軟麵糰加入肉桂、黑糖與發酵奶油，表面不使用厚重糖霜。
標籤：蛋奶素

### 杏仁可頌｜NT$160

層次酥脆的可頌填入杏仁奶油，表面撒上烘烤杏仁片。
標籤：蛋奶素、含堅果

### 檸檬橄欖油蛋糕｜NT$150

帶有清新檸檬香與柔和橄欖油氣息，口感濕潤。
標籤：蛋奶素

### 黑巧克力海鹽蛋糕｜NT$170

使用深色巧克力製作，甜度克制，以少量海鹽收尾。
標籤：蛋奶素

### 季節水果優格碗｜NT$190

無糖優格、當季水果、自製燕麥脆片與少量蜂蜜。
標籤：蛋奶素、含堅果

菜單底部加入小字：

「菜單依季節與當日供應調整。若有食物過敏或特殊飲食需求，點餐前請先告訴我們。」

加入按鈕：「選擇今天的停留方式」，點擊後滑到互動區塊。

# 八、「今天的停留方式」互動區塊

這是網站最重要的互動功能，必須真正可以操作，不只是四張靜態卡片。

區塊名稱：

「今天，想在LYS停留多久？」

說明文字：

「有時候只有十分鐘，有時候不想替午後設定終點。選擇你今天擁有的時間，讓我們替你安排一段剛剛好的咖啡時光。」

互動流程分為兩個步驟，並顯示簡潔的進度提示：

步驟1／2：選擇停留時間
步驟2／2：選擇現在需要的感受

## 步驟一：停留時間

提供四張可點擊的選項卡：

### 十分鐘

副標：在前往下一站以前
簡介：適合匆忙早晨或工作空檔的一次短暫呼吸。

### 三十分鐘

副標：剛剛好的休息
簡介：喝完一杯咖啡，也讓思緒從工作裡稍微離開。

### 一個小時

副標：讓思緒重新展開
簡介：一杯咖啡、一份輕食，以及足夠翻過幾頁書的時間。

### 不趕時間

副標：順著光線生活
簡介：不設定離開時間，讓午餐、甜點與第二杯咖啡自然發生。

選擇後：

* 被選取的卡片要有明顯但優雅的邊框、背景和勾選狀態
* 其他卡片降低一點視覺強度，但仍保持可點擊
* 顯示「下一步」按鈕
* 未選擇前，下一步按鈕維持disabled
* 可以使用鍵盤操作

## 步驟二：現在需要的感受

提供四個選項：

* 清醒一下
* 安靜片刻
* 找回靈感
* 好好犒賞自己

選擇後顯示主要按鈕：

「為我安排這段時光」

同時提供文字按鈕：

「返回修改時間」

## 結果畫面

按下按鈕後，在同一區塊使用柔和淡入動畫顯示完整結果。不要跳轉新頁面，不需要API。

結果卡必須包含：

* 結果標題
* 一句符合情緒的引言
* 今日推薦飲品
* 今日推薦搭配
* 建議座位
* 一個簡短的停留儀式
* 查看完整菜單按鈕
* 重新選擇按鈕

請使用預設規則組合結果，不得隨機產生不存在的菜單品項。

## 時間對應的基本安排

### 十分鐘

標題：短暫醒來
建議座位：靠近吧台的窗邊高腳座
停留儀式：先不要拿出手機，專心感受這杯咖啡的前五口。
基本搭配：單杯飲品，不強制推薦餐點。

### 三十分鐘

標題：剛剛好的休息
建議座位：日光最柔和的窗邊雙人桌
停留儀式：看三分鐘窗外，再決定接下來要做什麼。
基本搭配：一杯飲品加一份小甜點。

### 一個小時

標題：讓思緒重新展開
建議座位：室內深處較安靜的木桌
停留儀式：讀十頁書，或在紙上寫下現在最想記得的三件事。
基本搭配：一杯飲品加一份輕食。

### 不趕時間

標題：順著光線生活
建議座位：靠窗角落、可以看見光線移動的位置
停留儀式：今天先不設定離開時間，也不急著完成任何事情。
基本搭配：飲品、輕食與甜點組合。

## 感受對應的飲品與搭配

### 清醒一下

優先飲品依序：

* 微光濃縮
* 今日手沖
* 微光氣泡咖啡
* 桂花冷萃

文字語氣：明亮、乾淨、重新集中注意力。

### 安靜片刻

優先飲品依序：

* 馥芮白
* 燕麥奶拿鐵
* 洋甘菊蘋果茶
* 北歐熱可可

優先甜點：北歐荳蔻捲
文字語氣：安靜、柔和、不催促。

### 找回靈感

優先飲品依序：

* 今日手沖
* 季節微光
* 桂花冷萃
* 蜂蜜海鹽燕麥拿鐵

優先搭配：檸檬橄欖油蛋糕
文字語氣：好奇、開放、帶有輕盈感。

### 好好犒賞自己

優先飲品依序：

* 蜂蜜海鹽燕麥拿鐵
* 北歐熱可可
* 燕麥奶拿鐵

優先甜點：

* 黑巧克力海鹽蛋糕
* 杏仁可頌
* 肉桂捲

文字語氣：溫暖、豐富，讓人感到被照顧。

請根據「時間＋感受」產生合理的固定組合。例如：

* 十分鐘＋清醒一下：微光濃縮，不搭配餐點
* 三十分鐘＋安靜片刻：馥芮白＋北歐荳蔻捲
* 一個小時＋找回靈感：今日手沖＋半熟蛋酪梨開放式三明治
* 不趕時間＋好好犒賞自己：蜂蜜海鹽燕麥拿鐵＋野菇起司開放式三明治＋黑巧克力海鹽蛋糕

請為所有16種組合建立合理且固定的結果資料，存放在清楚的前端資料結構中，方便日後修改。

結果範例：

「今天適合你的，是一段不被催促的午後。」

「我們推薦蜂蜜海鹽燕麥拿鐵、野菇起司開放式三明治，再留一點位置給黑巧克力海鹽蛋糕。坐在靠窗角落，看著桌面的光慢慢移動。今天不需要很有效率，慢慢喝完就好。」

互動完成後，將使用者最後一次選擇儲存在localStorage。重新造訪網站時可以顯示低調提示：

「上次，你為自己選了一個不趕時間的午後。」

提供「再次查看」與「重新選擇」，但不要自動彈出視窗。

# 九、空間介紹

區塊小標：空間

主標題：光線，是LYS每天最先抵達的客人。

內文：

「LYS以淺色木材、亞麻、玻璃與柔和的不鏽鋼細節構成。座位之間保留適度距離，讓交談、閱讀與獨處都能自然發生。」

「早晨的光從東側窗戶進入，午後則慢慢移向店內深處。沒有一個位置永遠最好，因為光線每個小時都不一樣。」

請使用三至四張照片建立具有雜誌感的圖片編排：

* 大幅窗邊座位
* 木質吧台與咖啡器具
* 陽光落在桌面的細節
* 咖啡與甜點近景

桌機版採用一大兩小或交錯式圖片排列；手機版改為單欄，但保留圖片尺寸變化，不要全部變成一模一樣的卡片。

加入四項簡潔空間資訊：

* 提供免費Wi-Fi
* 部分座位設有插座
* 室外座位可攜帶寵物
* 平日不限制用餐時間，客滿時以兩小時為原則

# 十、關於微光

建立一個品牌故事區塊，使用一張具有自然人物感或咖啡製作過程的圖片。

小標：我們的故事

主標題：從一杯不必急著喝完的咖啡開始。

內文：

「LYS的想法，來自在北歐旅行時看見的日常：人們不把咖啡只當成提神工具，而是讓一天出現停頓的方式。」

「回到台北以後，我們試著把這種感覺留在城市裡。沒有複雜的儀式，也不要求每個人都懂咖啡；只希望每一杯飲品、每一份食物與每一張座位，都讓人願意多停留一會。」

「我們選擇風味乾淨的淺至中焙咖啡豆，搭配季節食材與每日少量製作的甜點。菜單不追求很多，而是讓每個品項都適合在不同時刻被需要。」

加入三個品牌原則：

### 讓風味保持清楚

尊重咖啡產地與季節，避免過度烘焙與不必要的甜味。

### 讓食物跟著季節

使用當季蔬果，以簡單方式呈現食材本身的味道。

### 讓空間不催促人

保留足夠留白、自然光與座位距離，讓每個人找到自己的步調。

# 十一、來店資訊

區塊標題：來微光坐坐

顯示以下示範資訊：

地址：台北市大安區微光路18號
捷運：捷運大安森林公園站2號出口，步行約6分鐘
電話：02-0000-1818
Instagram：@lys.cafe.demo

營業時間：

* 星期一至星期五｜08:00–18:00
* 星期六至星期日｜09:00–19:00
* 每月第一個星期二公休

備註：

* 甜點每日數量有限，售完為止
* 店內不接受一般座位預約
* 六人以上或商業拍攝請提前來信
* 最後點餐時間為閉店前30分鐘

加入兩個按鈕：

* 在地圖上查看
* Instagram

由於這是虛構示範品牌，「在地圖上查看」按鈕不要連向真實店家。可以使用沒有實際導航功能的地圖視覺佔位，點擊後顯示：「LYS為Lovable教學使用的虛構品牌，此地址為示範資訊。」

桌機版使用左側資訊、右側簡潔地圖視覺。手機版先顯示資訊，再顯示地圖。

# 十二、頁尾

頁尾使用深咖啡或暮色深藍背景。

內容包含：

LYS 微光咖啡
讓一天，在光裡慢下來。

導覽連結：

* 菜單
* 今天的停留方式
* 關於微光
* 來店資訊

聯絡資訊：

* Instagram
* Email
* 電話

底部顯示：

「© 2026 LYS Café. All rights reserved.」

以及較小但清楚可讀的示範聲明：

「本網站為Lovable教學示範專案，LYS微光咖啡為虛構品牌，所有地址、價格與營業資訊均為示範內容。」

# 十三、動畫與互動細節

請加入克制而精緻的動畫：

* 頁面載入時，Hero文字依序淡入
* 區塊進入畫面時輕微向上淡入
* 圖片不可使用誇張縮放
* 菜單切換使用短暫淡入淡出
* 停留方式切換使用柔和過場
* 按鈕hover時只做細微色彩與位置變化
* 尊重prefers-reduced-motion
* 使用者關閉動畫時，網站仍可正常操作
* 不使用自動播放影片
* 不使用視差滾動造成閱讀困難
* 不使用會追著滑鼠移動的元素

# 十四、桌機版要求

桌機版請特別確認：

* 1440px與1280px螢幕皆能正常顯示
* 內容最大寬度約1200px
* Hero使用左右分割構圖
* 菜單可使用兩欄，但名稱、描述與價格必須清楚
* 停留方式第一步的四張選項卡可橫向排列
* 結果卡可以使用左右欄呈現文字與推薦內容
* 圖片保持高品質，不可拉伸
* 導覽列滾動後維持清楚可讀
* 頁面不能出現不必要的大片空白
* 所有區塊對齊邏輯一致

# 十五、手機版要求

手機版請特別確認：

* 以375px寬度為主要測試尺寸
* 同時支援320px、390px與430px
* 完全不能出現水平捲動
* Hero文字不得被裁切
* 按鈕可以改為滿寬
* 菜單品項採單欄排列
* 品項名稱與價格在窄螢幕上仍可閱讀
* 菜單分類列若橫向滑動，只能在分類容器內滑動
* 停留方式卡片改為單欄
* 步驟按鈕固定出現在選項下方，不遮擋內容
* 圖片依手機比例裁切，重要主體不能被切掉
* 漢堡選單開啟時鎖定背景捲動
* 關閉選單後恢復原本位置
* 互動結果卡在手機上自然堆疊
* 所有文字至少16px，輔助資訊不得小於13px
* 所有互動元素具有清楚的按下與選取狀態
* 頁尾資訊改為單欄或兩欄，不可擠在同一列

手機版底部可以加入一個低調的浮動按鈕：

「選擇今天的停留方式」

條件：

* 使用者尚未進入互動區塊時顯示
* 滾動到互動區塊後自動隱藏
* 不可遮擋頁尾、菜單或其他按鈕
* 支援iPhone安全區域safe-area-inset-bottom

# 十六、技術與程式品質

請使用：

* React
* TypeScript
* Tailwind CSS
* 可重複使用的元件
* 語意化HTML
* 清楚的資料結構

建議拆分為以下元件：

* Header
* MobileMenu
* TimeThemeController
* Hero
* BrandIntroduction
* MenuSection
* MenuTabs
* StayPlanner
* SpaceGallery
* StorySection
* VisitSection
* Footer

菜單資料、營業資訊、時間主題與16種停留方式結果，請集中存放在獨立資料檔或清楚的常數物件中，不要散落在各元件裡。

請確認：

* 所有按鈕都有實際作用
* 所有導覽連結都能抵達正確區塊
* 沒有空白頁面
* 沒有未完成的TODO
* 沒有Lorem ipsum
* 沒有英文模板殘留
* 沒有購物車或登入圖示
* 沒有外部API請求
* 沒有後端資料庫
* 沒有主控台錯誤
* 網站重新整理後仍可正常運作
* 所有互動功能在桌機與手機都可以操作

# 十七、SEO與可用性

設定以下頁面資訊：

SEO標題：

「LYS微光咖啡｜讓一天，在光裡慢下來」

Meta description：

「LYS微光咖啡是一間以北歐生活、自然光線與慢步調為靈感的城市咖啡廳。查看完整菜單，選擇今天的停留方式，為自己留下一段安靜的咖啡時光。」

請加入：

* 正確的H1、H2、H3層級
* 圖片alt文字
* 鍵盤操作支援
* 清楚的focus狀態
* 足夠的文字對比
* aria-label
* respects prefers-reduced-motion
* 基本Open Graph資訊
* favicon使用極簡的LYS字母標誌

# 十八、完成前自我檢查

完成網站後，請主動檢查並修正以下問題：

1. 桌機版與手機版是否都有完整內容。
2. 375px手機是否出現水平捲動。
3. 導覽列與漢堡選單是否正常。
4. 時間主題是否可自動與手動切換。
5. 所有菜單分類是否有正確內容。
6. 停留方式的兩步驟互動是否可以完成。
7. 16種「時間＋感受」結果是否都存在。
8. 返回、重新選擇、查看菜單是否正常。
9. localStorage是否正確記住光線模式與上次結果。
10. 所有按鈕是否都有作用。
11. 是否完全沒有電商、API與後端功能。
12. 是否已移除Light Table／微光選書桌。
13. 所有文字是否為自然的繁體中文。
14. 是否符合北歐極簡、安靜、具有編輯感的視覺方向。
15. 是否避免常見AI生成網站的大量圓角卡片、漸層與過度動畫。

請直接建立並完成網站，不要只提供設計建議或文字說明。

請先完整檢查目前的 LYS Lumina 咖啡廳網站專案架構、現有元件、路由、樣式系統、色彩變數、字體、資料庫狀態與既有功能，再進行以下修改。 這是針對「現有網站」的增量更新，不是重新建立網站。 請務必遵守： 1. 不要重新設計整個網站。 2. 不要刪除、覆蓋或破壞既有頁面、文字、圖片與互動功能。 3. 延續目前的北歐風格、深藍灰色背景、米杏色點綴、字體、留白、邊框與按鈕設計。 4. 所有新增頁面都必須與現有網站看起來屬於同一個品牌。 5. 完整支援電腦版與手機版。 6. 所有介面文案使用自然、清楚的繁體中文。 7. 不要使用簡體中文。 8. 不要使用 localStorage 模擬正式資料。 9. 不要使用前端假資料冒充真正功能。 10. 預約功能必須使用 Lovable Cloud 的安全資料庫與後端函式。 11. 修改完成後必須實際檢查功能，不要只建立畫面後回覆完成。 ━━━━━━━━━━━━━━━━━━ 第一部分：修改「在地圖上查看」按鈕 ━━━━━━━━━━━━━━━━━━ 請找到目前營業資訊區塊中的「在地圖上查看」按鈕。 將這個按鈕改成真正可以點擊的外部連結，連到 Google Maps 的大安森林公園搜尋結果。 使用以下網址： https://www.google.com/maps/search/?api=1&query=%E5%A4%A7%E5%AE%89%E6%A3%AE%E6%9E%97%E5%85%AC%E5%9C%92 連結行為： * 點擊後在新的瀏覽器分頁開啟 * 使用 target="_blank" * 使用 rel="noopener noreferrer" * 保留按鈕目前的米杏色背景、尺寸、字體與 hover 效果 * 不要改變旁邊 Instagram 按鈕的設計 * 確保手機版按鈕不會超出畫面 * 加入適當的 aria-label，例如「在 Google 地圖查看大安森林公園」 如果目前按鈕是普通 button 元件，請改成具有按鈕外觀的 anchor link，不要使用 JavaScript 模擬跳轉。 ━━━━━━━━━━━━━━━━━━ 第二部分：將示範地圖改為 Google Map ━━━━━━━━━━━━━━━━━━ 請找到目前顯示抽象線條、圓點與「微光路18號・示範地圖」文字的地圖區塊。 移除目前純裝飾性的假地圖內容，但保留： * 地圖區塊原本的尺寸比例 * 圓角 * 邊框 * 深色背景 * 周圍留白 * 現有北歐風格 * 手機版與電腦版的響應式尺寸 將該區塊替換成真正可以操作的 Google Maps 嵌入地圖，地點設定為： 大安森林公園 優先使用不需要管理者另外設定 API Key 的 Google Maps iframe 嵌入方式。 可使用以下嵌入網址： https://www.google.com/maps?q=%E5%A4%A7%E5%AE%89%E6%A3%AE%E6%9E%97%E5%85%AC%E5%9C%92&output=embed iframe 必須： * width 設為100% * height 填滿現有地圖容器 * border 設為0 * 使用 loading="lazy" * 使用適當的 referrerPolicy * 加入 title="大安森林公園 Google 地圖" * 支援縮放、拖曳及開啟 Google Maps * 不要讓 iframe 超出圓角容器 * 地圖載入前顯示與網站一致的深色 loading placeholder * 地圖載入失敗時，顯示「在 Google 地圖查看」的備用連結 將原本的： 「微光路18號・示範地圖」 修改為： 「大安森林公園・示範地圖」 因為 LYS Lumina 是虛構咖啡廳，請繼續清楚保留「示範地圖」字樣，不要讓訪客誤以為咖啡廳真的位於此處。 不要在網站加入虛構街道地址或虛構電話號碼。 ━━━━━━━━━━━━━━━━━━ 第三部分：移除手動時間色彩選擇器 ━━━━━━━━━━━━━━━━━━ 目前網站中有一組時間主題選擇按鈕： * 晨光 * 日光 * 暮光 * 夜晚 * 跟隨時間 請將整組手動選擇器從前台移除。 訪客不需要手動選擇主題，也不要再顯示「跟隨時間」按鈕。 網站應根據「訪客裝置目前的當地時間」自動套用相對應的網站色彩主題。 請使用瀏覽器端的目前時間判斷，不要根據伺服器時區判斷。 時間與主題規則如下： * 05:00–09:59：晨光主題 * 10:00–15:59：日光主題 * 16:00–18:59：暮光主題 * 19:00–04:59：夜晚主題 實作要求： 1. 頁面第一次載入時立即根據訪客時間套用正確主題。 2. 不要先閃出預設顏色再切換，盡量避免 theme flash。 3. 訪客停留在網站期間，每分鐘重新檢查一次時間。 4. 跨過主題時間分界時，自動平順切換。 5. 使用現有 CSS variables 或設計 token 管理顏色。 6. 不要為每個頁面複製一套獨立樣式。 7. 保留目前網站原本安靜、柔和、北歐風格的色彩方向。 8. 所有主題都必須維持清楚的文字對比。 9. 按鈕、表單、邊框、連結與錯誤訊息在所有主題下都必須可辨識。 10. 尊重 prefers-reduced-motion；使用者減少動態效果時，不要執行明顯的顏色動畫。 11. 不要儲存使用者的主題偏好，因為不再提供手動選擇。 12. 不要使用 localStorage 儲存主題。 網站內部仍可保留以下主題名稱作為程式變數： * dawn * daylight * dusk * night 但前台不需要顯示主題名稱或控制按鈕。

請在現有的 LYS Lumina 咖啡廳網站中，新增一套真正可以運作的智慧座位預約系統。請延續網站現有的北歐風格、字體、顏色、留白與互動設計，不要重新設計、覆蓋或刪除其他既有頁面與功能。 這不能只是前端展示表單，也不能使用 localStorage 或假資料模擬預約。請使用 Lovable Cloud 建立安全的資料庫、後端預約函式、逐張實體桌的時間排程、即時可用性計算與預約管理介面。 網站時區統一使用 Asia/Taipei。資料庫時間可以使用 UTC 儲存，但所有客人及管理者看到的日期與時間都必須正確轉換成台灣時間。 一、預約入口與操作流程 在網站主選單及首頁適當位置加入「預約座位」按鈕，連結至完整的預約頁面。 客人的預約步驟依序為： 1. 選擇用餐人數 2. 選擇預約日期 3. 根據人數、日期及現有預約顯示可預約時間 4. 填寫聯絡資料與特殊需求 5. 確認預約內容 6. 建立預約 7. 顯示預約成功頁面 表單欄位包含： * 姓名 * Email * 用餐人數 * 預約日期 * 預約開始時間 * 座位偏好，例如室內、窗邊或無特別偏好 * 特殊需求 * 同意預約、改期及取消規則 所有必填欄位都要有前端與後端驗證，並提供清楚的載入中、可預約、即將額滿、已額滿、成功與錯誤狀態。 二、只開放未來兩週預約 系統只能預約從今天起14個曆日內的日期，包含今天，也就是今天至今天加13天。 這是一個自動滾動的預約區間。每天日期改變時，系統自動增加新的一天，不需要管理者手動建立未來日期或時段，也不需要排程工作每天新增資料。 不得選擇： * 過去的日期 * 超過未來14天的日期 * 已經過去的時間 * 未達最低提前預約時間的時段 * 公休日或被管理者封鎖的日期 * 完整90分鐘內沒有足夠合適桌位的時段 預設最低提前預約時間為60分鐘，並讓管理者可以在後台修改。 三、營業時間、開始時段與用餐時間 預設每天開放以下預約開始時間： 10:00、10:30、11:00、11:30，之後每30分鐘一個開始時間，直到18:30。 請注意： * 每30分鐘只是提供一個新的「預約開始時間」。 * 每組客人的實際用餐時間固定為90分鐘。 * 不可把一筆預約誤認為只占用30分鐘。 例如： * 10:00預約占用桌位至11:30 * 10:30預約占用桌位至12:00 * 11:00預約占用桌位至12:30 * 11:30預約占用桌位至13:00 所有預約時間區間採用「包含開始時間、不包含結束時間」的規則，即 [start_at, end_at)。 因此： * 10:00至11:30的預約會占用10:00、10:30與11:00。 * 該張桌子在11:30準時釋出，可以接受新的11:30預約。 * 10:30至12:00的預約會占用10:30、11:00與11:30。 * 該張桌子在12:00準時釋出，可以接受新的12:00預約。 18:30是最後一個預約開始時間，因此咖啡廳至少營業至20:00。 請建立 weekly_schedule，讓管理者可以分別設定每週各營業日的： * 是否營業 * 開始營業時間 * 最後預約時間 * 每組用餐時間 * 預約開始時間間隔 * 最低提前預約時間 不要要求管理者每天手動建立日期或時段。 四、實體桌位設定 咖啡廳預設共有7張實體桌。 雙人桌共5張： * T01：雙人桌，最多容納2人 * T02：雙人桌，最多容納2人 * T03：雙人桌，最多容納2人 * T04：雙人桌，最多容納2人 * T05：雙人桌，最多容納2人 四人桌共2張： * F01：四人桌，最多容納4人 * F02：四人桌，最多容納4人 請建立 tables 資料表，至少包含： * id * table_name * capacity * table_type * is_active * created_at * updated_at 每筆預約必須實際分配到一張或多張具名的實體桌，不能只從總座位數扣除預約人數。 每組客人獨立使用分配到的桌子，不可將同一張桌子的剩餘座位分配給陌生客人。 例如： * 1位客人仍然占用完整的雙人桌 * 2位客人占用1張雙人桌 * 3位客人占用完整的四人桌 * 4位客人占用1張四人桌 五、先選人數，再顯示可預約時間 預約頁面必須先讓客人選擇人數，再顯示符合該人數的可預約時間。 同一個時間不能一律顯示「有位」或「沒位」，必須依照客人的人數、所需桌型與完整90分鐘內的實體桌狀態個別計算。 例如： 四人桌已滿，但雙人桌仍有空位時： * 選擇1至2人，仍可顯示可預約 * 選擇3至4人，顯示已額滿 雙人桌已滿，但四人桌仍有空位時： * 是否讓1至2人使用四人桌，依照後台的 allow_larger_table_fallback 設定決定 客人只需要選擇人數，不需要自行選擇桌型或桌號。 六、智慧配桌規則 系統必須從完整90分鐘內都沒有被占用的實體桌中，自動尋找能夠容納該組客人的最佳桌位組合。 預設配桌邏輯： * 1至2人：優先使用1張雙人桌 * 3至4人：使用1張四人桌 * 5至6人：優先使用1張四人桌加1張雙人桌 * 7至8人：使用2張四人桌 選擇桌位組合時，依序遵守： 1. 所選桌子必須在客人完整90分鐘內都可使用 2. 優先選擇剩餘空位最少的組合 3. 若空位數相同，優先使用桌數最少的組合 4. 優先保留四人桌給3人以上的預約 5. 同一張實體桌在任何重疊時間內不得分配給兩筆預約 加入「允許使用較大桌型」的管理設定。 預設開啟時，如果雙人桌已滿但四人桌仍有空位，1至2人的客人可以使用四人桌；系統仍須先嘗試分配雙人桌。 如果最理想的桌型組合不可用，系統可以尋找其他可行組合。例如5至6人若無法取得1張四人桌加1張雙人桌，可以在兩張四人桌都完整可用時使用2張四人桌。 客人最多可線上預約8人。選擇9人以上時顯示： 「九人以上的團體預約，請直接與咖啡廳聯絡。」 電話號碼從 cafe_settings 讀取，不要在程式中寫入虛構電話號碼。 七、必須雙向檢查完整90分鐘 桌位可用性必須同時向前與向後檢查，不可只在一筆預約成立後，鎖住它開始時間之後的時段。 當系統判斷一個較早的開始時間是否可預約時，也必須檢查該90分鐘是否會碰到後面已經存在的預約。 例如，一張桌子已經有人預約11:00至12:30，則另一組客人不能再使用同一張桌子預約： * 10:00至11:30，因為與11:00至11:30重疊 * 10:30至12:00，因為與11:00至12:00重疊 * 11:00至12:30 * 11:30至13:00 * 12:00至13:30，因為與12:00至12:30重疊 該桌子直到12:30才可以重新預約。 如果營業時間包含9:30，則9:30至11:00可以預約，因為結束時間剛好等於下一筆預約的開始時間，沒有重疊。 八、正確的時間重疊公式 對每個準備顯示的開始時間，先計算： requested_end_at = requested_start_at + 90分鐘 接著針對每一張實體桌，比較該桌當天所有 status 為 confirmed 的既有預約。 只有符合以下任一條件時，兩個時間區間才算完全沒有重疊： requested_end_at <= existing_start_at 或 requested_start_at>= existing_end_at 只要不符合上述任何一項，就代表時間有重疊，該張實體桌不可使用。 等價的重疊條件為： existing_start_at < requested_end_at 且 existing_end_at> requested_start_at 只要兩個條件同時成立，就必須視為重疊。 系統必須： * 比較當天所有 confirmed 預約 * 不可只檢查開始時間較早的預約 * 不可只檢查開始時間較晚的預約 * 不可依照預約資料的建立順序判斷 * 不可只扣除半小時時段數量 * 不可只扣除總座位數 * 必須逐張實體桌比較完整90分鐘 只有 status 為 confirmed 的預約會占用桌位。cancelled 的預約不得繼續占用桌位。 九、指定的反向封鎖範例 必須正確處理以下情境： F01已有一筆預約： * 3位客人 * 11:00開始 * 12:30結束 * 使用F01 此時F01的狀態必須是： * 10:00不可分配，因為10:00至11:30會與既有預約重疊 * 10:30不可分配，因為10:30至12:00會與既有預約重疊 * 11:00不可分配 * 11:30不可分配 * 12:00不可分配，因為12:00至13:30會與既有預約重疊 * 12:30可以重新分配 一筆11:00開始、用餐90分鐘的預約，不只會阻擋11:00、11:30與12:00，也會反向阻擋同一張桌子的10:00與10:30。 但是，如果F02完整空閒，新的3至4人客人仍然可以使用F02預約上述時間。 只有當F01與F02在客人要求的完整90分鐘內都無法使用時，該開始時間才對3至4人的客人顯示「已額滿」。 十、兩張四人桌錯開釋出的範例 必須正確處理以下兩筆預約： 預約A： * 3位客人 * 10:00開始 * 11:30結束 * 使用F01 預約B： * 4位客人 * 10:30開始 * 12:00結束 * 使用F02 此時： * F01占用10:00至11:30 * F02占用10:30至12:00 對新的3至4人預約，系統必須顯示： * 10:00：已額滿 * 10:30：已額滿 * 11:00：已額滿 * 11:30：可預約，因為F01已於11:30釋出 * 12:00：可預約，而且F01與F02皆已釋出 11:30時只能使用F01，因為F02仍被10:30至12:00的預約占用。 12:00時F02才重新釋出。 不可出現以下錯誤： * 不可讓F01到12:00才釋出 * 不可讓F02在11:30提前釋出 * 不可因為F01在11:30釋出，就錯誤地把兩張四人桌都算成可用 * 不可把10:00、10:30與11:00永久鎖死 * 不可因四人桌額滿，就把仍有雙人桌的1至2人預約也標示為額滿 十一、即時計算時間按鈕 客人選擇日期與人數後，系統即時計算10:00至18:30的所有開始時間。 每個時間按鈕應顯示以下其中一種狀態： * 可預約 * 僅剩少量合適桌位 * 已額滿 * 已過預約時間 * 未達最低提前時間 * 當日不開放 只有完整90分鐘內都有合適桌位組合的開始時間才可以選擇。 「僅剩少量合適桌位」應根據該組人數還能成立的桌位組合數量判斷，不可直接顯示咖啡廳總剩餘座位數。 如果客人更改人數或日期，必須重新查詢並更新所有時間按鈕，不可沿用先前人數的可預約狀態。 十二、安全建立預約與避免超額預約 請在安全的後端函式中完成： * 查詢可預約時間 * 計算 requested_end_at * 檢查每張實體桌的時間重疊 * 尋找最佳桌位組合 * 再次檢查桌位 * 建立預約 * 建立預約與桌位的關聯 * 修改預約 * 取消預約 * 釋放桌位 不可只依靠前端顯示的可用狀態。 客人按下「確認預約」時，後端必須再次檢查完整90分鐘內的實體桌狀態，並使用安全、原子性的資料庫操作，避免兩位客人同時取得最後一張桌。 如果兩位客人同時嘗試預約最後一組可用桌位，只能讓其中一筆成功。另一筆顯示： 「很抱歉，這個時段剛剛已被預約，請重新選擇其他時間。」 失敗的預約不得留下： * 部分預約資料 * 錯誤的桌位關聯 * 被鎖住但沒有成立的桌位 * 已扣除但沒有成功建立的可用容量 十三、資料庫結構 請建立 bookings 資料表，至少包含： * id * booking_code * customer_name * customer_email * party_size * booking_date * start_at * end_at * seating_preference * special_requests * status * manage_token_hash * created_at * updated_at * cancelled_at 預約狀態包含： * confirmed * cancelled * completed 請建立 booking_tables 關聯資料表，至少包含： * id * booking_id * table_id * created_at 請建立 weekly_schedule，用於管理每週固定營業時間與預約規則。 請建立 date_overrides，至少支援： * 特殊公休日 * 包場 * 單日不同營業時間 * 單日不同最後預約時間 * 單日停用部分開始時段 * 單日調整可用桌位 * 單日停用特定實體桌 請建立 booking_change_log，記錄： * booking_id * change_type * 原日期與時間 * 新日期與時間 * 原人數 * 新人數 * 原桌位 * 新桌位 * 變更時間 * 變更來源 請建立 cafe_settings，至少包含： * timezone，預設Asia/Taipei * booking_window_days，預設14 * booking_duration_minutes，預設90 * slot_interval_minutes，預設30 * minimum_lead_minutes，預設60 * modification_cutoff_minutes，預設120 * allow_larger_table_fallback * contact_phone * demo_mode 十四、預約成功頁面 預約成功後，產生容易閱讀但不可作為安全憑證的 booking_code，例如： LYS-260802-A7K9 成功頁面顯示： * 預約編號 * 預約日期 * 開始時間 * 預計結束時間 * 用餐人數 * 座位偏好 * 預約狀態 * 管理預約按鈕 * 複製管理連結按鈕 不要向客人顯示內部桌號。 同時產生一組長度足夠、不可預測的隨機 manage_token。 資料庫只儲存安全雜湊後的 token，不要儲存可直接使用的明文 token。 管理網址格式為： /reservation/manage/{manage_token} 成功頁面須提醒客人妥善儲存管理連結。 十五、客人自行修改與取消 客人透過專屬管理連結，可以： * 查看自己的預約 * 更改預約日期 * 更改開始時間 * 更改用餐人數 * 更改座位偏好 * 更新特殊需求 * 取消預約 不得讓客人透過連續編號、容易猜到的網址或單純 booking_code 查看其他客人的資料。 修改日期、時間或人數時，系統必須重新計算新預約完整90分鐘內所需的雙人桌與四人桌。 修改預約時，檢查新桌位可用性的過程必須暫時排除該預約目前使用的桌位紀錄，避免系統把自己的原預約誤判成衝突；但在新安排確認成功前，不得先釋放原桌位。 修改必須採取安全、原子性的流程： 1. 暫時保留原預約與原桌位 2. 檢查新日期、時間與人數 3. 雙向比較完整90分鐘內的所有其他 confirmed 預約 4. 尋找新的最佳桌位組合 5. 安全保留新桌位 6. 確認新安排成功後，才釋放不再需要的原桌位 7. 更新預約資料 8. 寫入 booking_change_log 如果新時段已滿或更新失敗，原預約與原桌位必須保持不變，並顯示： 「目前無法更改至這個時段，您的原預約仍然保留，請選擇其他時間。」 取消預約前顯示確認視窗。客人確認取消後： * 將狀態改為 cancelled * 記錄 cancelled_at * 立即釋放所有關聯桌位 * 保留原始預約紀錄，不要直接刪除 * 寫入 booking_change_log 取消一筆預約後，只能釋放該筆預約實際使用的桌子與時間區間，不可錯誤釋放其他預約的桌位。 十六、修改與取消期限 預設只能在預約開始前2小時以上自行修改或取消。 距離預約開始少於2小時時，停用線上修改與取消功能，顯示： 「如需臨時更改或取消預約，請致電咖啡廳與我們聯絡。」 如果 cafe_settings 尚未填寫電話號碼，改為顯示： 「如需臨時更改或取消預約，請直接與咖啡廳聯絡。」 管理者可以在後台修改截止時間。 十七、管理後台 建立需要管理者登入才能使用的預約管理頁面。公開訪客不得進入管理後台。 管理者可以： * 查看所有預約 * 依日期、時間、狀態及人數搜尋與篩選 * 查看每個時段剩餘的雙人桌與四人桌 * 查看每筆預約分配到的內部桌號 * 新增、修改及取消預約 * 將預約標示為 completed * 查看預約變更紀錄 * 設定每週固定營業日與營業時間 * 設定30分鐘的預約開始間隔 * 設定90分鐘的用餐時間 * 修改提前預約時間 * 修改線上取消與改期截止時間 * 新增公休日、包場及特殊營業時間 * 調整特定日期的桌位數量 * 啟用或停用個別實體桌 * 開啟或關閉較大桌型替代規則 * 管理咖啡廳電話號碼 * 開啟或關閉 demo mode 管理者不需要每天建立新日期或更新剩餘桌數。系統必須根據 weekly_schedule、date_overrides、每張實體桌及所有 confirmed 預約自動計算。 十八、資料安全 請建立安全的 Row Level Security policies 與後端函式。 公開訪客可以： * 查詢某個日期、人數及開始時間是否可預約 * 透過安全的後端函式建立預約 * 使用正確的 manage_token 管理自己的預約 公開訪客不可： * 直接讀取 bookings 資料表 * 查看其他客人的姓名、Email、特殊需求或預約內容 * 查看內部桌號 * 任意修改或取消其他人的預約 * 直接修改桌位與預約關聯 * 繞過容量與時間重疊檢查 可預約狀態的公開查詢只回傳必要資訊，例如時間是否可預約或是否即將額滿，不得回傳其他客人的個人資料。 所有敏感操作必須在安全後端完成，並驗證： * 輸入資料 * manage_token * 預約狀態 * 修改與取消期限 * 日期是否在未來14天內 * 完整90分鐘的桌位狀態 * 逐張實體桌的雙向重疊時間 * 桌型與容納人數 * 是否存在同時預約競爭 十九、Email確認功能 如果目前工作區已啟用 Lovable 付費Email功能，預約成功後寄出確認信，包含： * 預約編號 * 日期 * 開始與結束時間 * 用餐人數 * 座位偏好 * 修改及取消規則 * 專屬管理預約連結 * 咖啡廳聯絡方式 客人成功修改或取消預約後，也寄出更新通知。 如果付費Email功能尚未啟用，預約功能仍須正常完成，不得因寄信失敗而導致預約失敗。成功頁面必須顯示並提供複製管理連結。 二十、教學示範模式 LYS Lumina 是用於 Lovable教學文章的虛構咖啡廳。demo_mode 預設開啟。 demo_mode 開啟時，在預約表單上方清楚顯示： 「此為 Lovable 教學示範網站，送出的預約不會成立，請勿填寫真實個人資料。」 示範模式不得寄送真實預約確認信，並讓管理者可以一鍵清除測試預約資料。 不要使用虛構電話號碼冒充真實店家資訊。 二十一、介面設計 預約系統需延續 LYS Lumina 現有的北歐風格，保持安靜、自然、簡潔且有質感，不要做成制式企業後台風格。 前台應包含： * 清楚的分步預約流程 * 1至8人的視覺選擇按鈕 * 未來兩週日期選擇器 * 每30分鐘的開始時間按鈕 * 可預約、即將額滿及已額滿狀態 * 預約內容確認卡片 * 預約成功頁面 * 管理預約頁面 * 修改成功與取消成功頁面 完整支援電腦版與手機版，確保手機上的日期、時間按鈕、表單、錯誤訊息與確認視窗都容易閱讀及操作。 介面文案全部使用自然、清楚的繁體中文，不要混用簡體中文。 二十二、必須完成的實際測試 完成後請實際執行以下測試，不要只建立畫面： 1. 今天至未來13天可以選擇，第15天不可選擇。 2. 預約區間每天自動向後延伸。 3. 過去時間與未達60分鐘提前限制的時間不可選擇。 4. 1位客人優先分配雙人桌。 5. 3位客人分配四人桌。 6. 5位客人優先分配四人桌加雙人桌。 7. 7至8位客人需要兩張四人桌。 8. 同一張實體桌在任何重疊時間內不可被重複分配。 9. 10:00至11:30的桌位可以在11:30準時再次預約。 10. 10:30至12:00的桌位只能在12:00再次預約。 11. 已有11:00至12:30預約時，同一張桌的10:00與10:30也必須被反向封鎖。 12. 兩位客人同時搶最後一組桌位時，只能有一筆成功。 13. 額滿時段不得送出預約。 14. 取消預約後，正確的實體桌立即重新開放。 15. 修改成功後，原桌位正確釋放。 16. 修改失敗時，原預約與原桌位保持不變。 17. 錯誤或偽造的 manage_token 無法查看預約。 18. 公開訪客無法直接讀取其他客人的個人資料。 19. date_overrides 可以正確關閉公休日或特殊時段。 20. demo_mode 清楚顯示教學示範提醒。 21. 電腦版與手機版皆可完成完整預約流程。 二十三、指定測試一：反向封鎖 建立測試預約： * 3位客人 * 11:00開始 * 12:30結束 * 使用F01 確認F01： * 10:00不可再次分配 * 10:30不可再次分配 * 11:00不可再次分配 * 11:30不可再次分配 * 12:00不可再次分配 * 12:30重新開放 如果F02完整空閒，3至4人的客人仍可使用F02預約上述時間；只有F01與F02都無法涵蓋完整90分鐘時，該開始時間才顯示已額滿。 二十四、指定測試二：兩張四人桌錯開釋出 建立測試預約A： * 3位客人 * 10:00開始 * 11:30結束 * 使用F01 建立測試預約B： * 4位客人 * 10:30開始 * 12:00結束 * 使用F02 建立後，切換至新的3至4人預約，必須顯示： * 10:00已額滿 * 10:30已額滿 * 11:00已額滿 * 11:30重新顯示可預約，因為F01已釋出 * 12:00仍顯示可預約，而且F01與F02皆已釋出 同時切換至1至2人時，如果T01至T05仍有空桌，10:00、10:30與11:00仍應顯示可預約，不得因四人桌已滿而一起關閉。 測試完成後，請刪除或清除測試預約，不要讓測試資料永久占用正式桌位。 二十五、完成後回報 完成後請清楚說明： * 建立了哪些資料表 * 建立了哪些後端函式 * 設定了哪些安全政策 * 如何進入預約管理後台 * 如何修改雙人桌與四人桌數量 * 如何修改營業時間 * 如何修改未來兩週預約規則 * 如何新增公休日或包場日期 * 如何調整用餐時間與預約間隔 * 反向封鎖測試是否成功 * F01與F02錯開釋出測試是否成功 * 哪些功能已經實際測試 * 是否仍有需要我手動設定的項目 請先檢查現有專案架構，再建立資料庫、後端函式與前端頁面。不要覆蓋現有網站設計。完成後必須實際驗證上述排桌邏輯，不要只回覆「已完成」。