🏳️‍🌈 什麼是女同志？

給第一次認識這個詞的你

---

她們是誰

女同志（Lesbian），指的是對女性產生情感與愛慕的女性。

這不是選擇，不是流行，也不是階段。
這是一種真實存在的情感傾向，就像異性戀一樣自然。

---

常見的誤解

誤解	事實
「只是還沒遇到對的男人」	性向不因關係而改變
「一定要有人扮演男生」	兩個人都是女生，不需要誰「當男的」
「這是一時的叛逆」	性向是穩定的自我認同，不是情緒或叛逆
「出櫃就是要讓所有人知道」	出不出櫃、跟誰說，是每個人自己的選擇與步調

---

T、婆、不分——圈內的多元樣貌

女同志社群裡，有些人會用這些詞描述自己的性別氣質與偏好，但這不是必填欄位：

• T（Tomboy）：外表或氣質偏中性、陽剛
• 婆（Po）：外表或氣質偏女性化
• 不分：不特別傾向任何一側，或不在乎這個分類

很多人不套用任何標籤，標籤是工具，不是框架。

---

在台灣

台灣於 2019 年 成為亞洲第一個同婚合法化的國家。
法律是起點，但日常生活中的理解與尊重，需要每一個人一起建立。

---

💬 你不需要完全理解，才能給予尊重。

💻 天菜分類器是怎麼做的？

一個網頁遊戲背後的技術故事

---

三種語言，一個網頁

所有你看到的這個網頁，都只用三種東西組成——

🧱 HTML　骨架

負責「放什麼東西、放在哪裡」。

按鈕、圖片、文字、每一個畫面，都是 HTML 寫出來的結構。

<button class="btn btn-yes">我的菜 💘</button>

🎨 CSS　外觀

負責「長什麼樣子」。

顏色、字型、圓角、陰影、動畫，全部由 CSS 控制。

/* 手繪風按鈕：粗邊框 + 偏移陰影 */
.btn {
  border: 3px solid #1a1a1a;
  box-shadow: 5px 5px 0px #1a1a1a;
  border-radius: 50px;
}

⚙️ JavaScript　邏輯

負責「做什麼事」。

點了按鈕要發生什麼、照片怎麼切換、票數怎麼記錄，全是 JS 的工作。

// 點「我的菜」→ 記錄票數、卡片向右飛出
function vote(choice) {
  if (choice === 'yes') recordVote(photo.id, userType);
  card.classList.add('anim-exit-right');
}

---

照片怎麼存進去的？

你把照片拖進網頁的瞬間，瀏覽器做了這件事：

你的照片檔案
    ↓ FileReader API 讀取
base64 字串（文字形式的圖片）
    ↓ 存入 localStorage
瀏覽器記住了，重新整理也不消失

base64 是一種把任何檔案（圖片、音樂）轉成純文字的方式。

文字可以存進瀏覽器的小型資料庫 localStorage，這樣就不需要伺服器了。

---

卡片怎麼會「飛」起來？

純粹是 CSS 動畫。

/* 向右飛出 */
@keyframes exitRight {
  to {
    transform: translateX(115%); /* 往右移動超出畫面 */
    opacity: 0;                  /* 同時淡出 */
  }
}

點擊「我的菜」時，JS 只做一件事：幫卡片加上 anim-exit-right 這個 class。

CSS 偵測到這個 class，動畫自動觸發。

---

統計數據怎麼不會消失？

瀏覽器有一個叫做 localStorage 的空間，就像一個小筆記本：

存進去：localStorage.setItem('票數', JSON.stringify(data))
讀出來：JSON.parse(localStorage.getItem('票數'))

每次有人按「我的菜」，資料就寫一次進這個筆記本。

關掉網頁、重新整理，資料還在——直到你手動清除為止。

---

不需要伺服器？

一般的網站需要「伺服器」處理資料，就像這樣：

你的電腦 ←→ 網路 ←→ 伺服器（存資料的地方）

這個網頁把資料存在你的瀏覽器裡，完全不需要網路傳輸：

你的電腦（瀏覽器 = 伺服器 + 資料庫，全包了）

所以它只是一個 .html 檔，雙擊就能開，帶著走。

---

總結：這個小遊戲用到的技術

技術	用途
HTML	四個畫面的結構與按鈕
CSS Keyframes	卡片滑入滑出動畫
CSS Grid	結果縮圖的排列
CSS Variables	統一管理顏色與字型
FileReader API	讀取本地圖片轉 base64
Drag & Drop API	拖曳上傳照片
localStorage	照片與票數的永久儲存
Fisher-Yates 演算法	每局照片隨機洗牌

---

🛠️ 從想法到網頁，你也可以。

HTML、CSS、JavaScript 都是免費、開放的技術，任何人都能學。