📚 #12 PIRLS 閱讀理解網（read.smes）：石門國小閱推入口網靜態頁 + RGB 漸層動畫標題

黃凱揚（阿凱老師） · 桃園市龍潭區石門國民小學 · 2026-05-21

#12 真實是「**桃園市石門國小閱推入口網**」純靜態 HTML 入口頁，不是工具本身 — 是把 PIRLS 工具 + 閱讀推廣資源整理在一頁的入口網。Tailwind + animate.css + 30 秒 RGB 漸層動畫 H1 標題 + 背景圖（圖書館書本）+ 響應式按鈕區。

#12 跟其他 PIRLS 工具的關係

阿凱有 3 個 PIRLS 相關工具：

#	工具	角色
#4	PIRLS 閱讀理解生成	工具本體（pirlss.smes Firebase Hosting）
#12	PIRLS 閱讀理解網（本篇）	入口網彙整頁
#87	PIRLS QuestionCraft Pro	工具本體（GitHub Pages 版）

#12 不是工具本身，是把 PIRLS + 閱讀推廣資源整理在一頁的入口網。

#12 真實怎麼做？（curl 抓真實 HTML）

真實標題：「桃園市石門國小閱推入口網」

完整視覺設計（從程式碼抽出）：

功能 A：RGB 漸層動畫 H1 標題

標題「桃園市石門國小閱推入口網」
用 background-image: linear-gradient(90deg, 15 個顏色) 漸層
background-size: 1000% 100% + gradientShift 30s linear infinite 動畫
顏色：紅 → 橙 → 黃 → 綠 → 青 → 藍 → 紫 → 粉紅循環
-webkit-background-clip: text 漸層裁切到文字

功能 B：圖書館背景圖

background-image: url('https://read.smes.tyc.edu.tw/book.png')
background-attachment: fixed 固定背景
圖書館「書本」主題

功能 C：響應式按鈕區（hover-effect 動畫）

flex-col sm:flex-row → 手機垂直、平板以上水平
按鈕 hover:scale-1.1 + text-shadow 放大發光效果

功能 D：白色半透明卡片

bg-white bg-opacity-80 rounded-2xl shadow-lg
70% 透明度讓背景書本若隱若現

真實技術棧

純靜態 HTML（6,064 字元）
Tailwind CSS CDN
animate.css 4.1.1
無 LLM、無後端
無 Next.js bundle（跟 #4 #13 #14 不同）
部署：read.smes.tyc.edu.tw Firebase Hosting + 學校自訂域名

RWD 設計細節

從 CSS 抽出的響應式策略：

@media (max-width: 768px) {
  .container {
    height: auto;
    min-height: 100vh;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

→ 手機上自動高度 + 至少滿版 + 增加上下 padding。

<h1 class="text-5xl md:text-7xl mb-12">

→ H1 字級：手機 48px (3rem) / 平板以上 88px (5.5rem)。

教學情境

學校網站「閱讀推動」按鈕：

學校首頁設「閱讀推動」按鈕 → 點過來 #12
集中呈現 PIRLS 工具 + 閱讀資源
比散在各處讓家長找半天好

親職教育日宣傳：

「我們學校有閱讀推動專屬入口網」
家長親身體驗 30 秒漸層動畫 H1 = 視覺記憶點

校際交流：

其他學校教務組長來訪 → 看 #12 → 立刻知道「石門國小重視閱讀」

為什麼用入口網而不是直接連工具？

入口網的價值：

✅ 品牌統一：「閱推 = 石門國小特色」
✅ 多工具彙整：不只 PIRLS，還有其他閱讀資源
✅ 方便維護：要新增工具 → 改一個入口網就好
✅ SEO 集中：學校網站搜尋「石門閱讀」第一個跳出 #12

配對工具推薦

#4 PIRLS 閱讀理解生成 — 入口網內主推工具
#87 PIRLS Pro — GitHub Pages 版
#27 ⬅️好用小工具（許願池） — 同款入口頁概念（swissknife）

適用對象

教務 / 閱推組（想做學校閱讀推動專屬網）
想看「純靜態 + Tailwind + animate.css 入口頁」設計案例的開發者
學習「Firebase Hosting + 學校自訂域名」部署的老師

想試試？

→ 前往 #12 PIRLS 閱讀理解網