目標：重要操作都有一致的「小提示泡泡」（收藏/取消、送出、清空）。

要改的檔案：index.html、favorite.html、review.html、style.css、js/app.js、js/favorites.js、js/reviews.js

1.（新增）通用 UI 腳本

在專案新增檔案 js/ui.js，內容如下：

// js/ui.js — 全站通用 UI（Toast）
(function(){
  function ensureToaster(){
    if(document.getElementById('toaster')) return;
    const div=document.createElement('div'); div.id='toaster'; div.className='toaster';
    document.body.appendChild(div);
  }
  function toast(msg,type='info'){
    ensureToaster();
    const $t = $('#toaster');
    const $n = $(`<div class="toast ${type==='warn'?'is-warn':''}">${msg}</div>`);
    $t.append($n);
    setTimeout(()=>{$n.fadeOut(200,()=> $n.remove())}, 1500);
  }
  window.toast = toast;
})();

2. 三個 HTML 頁面都引入 ui.js

在 index.html、favorite.html、review.html 的 最後一個 <script> 前 插入一行：

<script src="js/ui.js"></script>

例（index.html 最底部大致順序）：

  <script src="js/ui.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

3.（追加）style.css：Toast 與空狀態

把以下 CSS 貼到 style.css 底部（或合併到既有樣式）：

/* Day27: Toaster & unified empty states */
.toaster{
  position:fixed; right:16px; bottom:16px;
  display:flex; flex-direction:column; gap:10px; z-index:60;
}
.toast{
  background:rgba(15,21,43,.92);
  border:1px solid var(--y2k-border);
  color:#fff; padding:10px 12px;
  border-radius:12px; box-shadow:var(--shadow-neon);
}
.toast.is-warn{ border-color:#ef4444; box-shadow:0 0 14px rgba(239,68,68,.5); }
.empty{
  text-align:center; color:#c2c7ee; padding:28px 10px;
  border:1px dashed var(--y2k-border); border-radius:var(--radius);
  background:rgba(255,255,255,.02);
}

4. 在互動點呼叫 toast()

4-1 js/app.js（收藏／取消）

找到收藏切換那段（$('.fav').on('click', ...) 或我之前提供的委派版本）；改成這樣（只示範事件處理內容）：

$(document).on('click','.fav', function(){
  const id=$(this).closest('.card').data('id');
  if(favMap.has(id)){ 
    favMap.delete(id); toast('已從收藏移除','warn');
  }else{ 
    favMap.set(id,{id,savedAt:Date.now()}); toast('已加入收藏');
  }
  saveFavMap(favMap); render(applyFilters());
});

4-2 js/favorites.js（取消收藏／清空）

把兩個動作補上 toast：

$(document).on('click', '#favCards .fav', function(){
  const id=$(this).closest('.card').data('id');
  const list=loadFavList().filter(o=>o.id!==id); 
  saveFavList(list); render();
  toast('已從收藏移除','warn');
});
$btnClear.on('click', function(){
  const list=loadFavList(); if(!list.length) return;
  if(!confirm('確定要清空全部收藏嗎？')) return;
  saveFavList([]); render(); toast('已清空收藏','warn');
});

4-3 js/reviews.js（送出／清空）

在成功送出後與清空時加上：

// 送出成功後 …
toast('心得已送出');

// 清空全部心得後 …
toast('已清空全部心得','warn');

驗收

• 收藏、取消、清空等操作都會右下角浮出提示
• 不會擋住操作、1.5 秒自動消失
• 空狀態三頁一致