docs: 改善使用者體驗和文件結構

- 在 README.md 加入 GitHub Pages 線上教學網站連結
- 將 Agent 快速設置從首頁的快速開始移到底部
- 標示為進階功能，避免干擾初學者

Co-Authored-By: Yulin Wang <yulin@example.com>

Author: yulin0629

README.md

@@ -2,6 +2,12 @@
 
 這是一個 GitHub Copilot 完整教學專案，透過 8 個由淺入深的實作場景，讓您掌握 GitHub Copilot 的各種功能。
 
+## 線上教學網站
+
+**線上瀏覽教學內容**：[https://yulin0629.github.io/github-copilot-tutorial/](https://yulin0629.github.io/github-copilot-tutorial/)
+
+您可以直接透過瀏覽器查看完整的教學內容，無需下載專案即可開始學習。
+
 ## Agent 快速設置 (複製整段給 Agent)
 
 <details>

index.html

@@ -78,34 +78,6 @@ <h3 style="font-size: 1.25rem; font-weight: 600; color: #1d1d1f; margin-bottom:
                         從場景 1 開始，循序漸進掌握每個功能</li>
                 </ol>
 
-                <details style="margin-top: 28px; background: #f5f5f7; padding: 24px; border-radius: 16px; border: none;">
-                    <summary style="cursor: pointer; font-weight: 600; color: #007aff; font-size: 1rem;">Agent 快速設置指令（點擊展開）</summary>
-                    <div style="position: relative;">
-                        <button onclick="copyAgentPrompt()" style="position: fixed; top: auto; bottom: 20px; right: 20px; padding: 8px 16px; background: #007aff; color: white; border: none; border-radius: 20px; font-size: 12px; cursor: pointer; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); display: none;">
-                            複製
-                        </button>
-                        <pre id="agentPrompt" style="margin-top: 10px; background: white; padding: 15px; padding-right: 60px; border-radius: 5px; font-size: 0.9rem; overflow-x: auto;">請幫我設置 GitHub Copilot 教學專案環境：
-
-1. 首先檢查目前位置並決定克隆位置：
-   - 如果在 VS Code 中已有開啟的專案，請詢問我是否要在當前目錄的父目錄克隆
-   - 如果沒有開啟專案，請詢問我想要克隆到哪個目錄
-   - 建議的位置：~/projects/ 或 ~/Github/
-
-2. 克隆專案（包含 submodule）：
-   cd [選定的目錄]
-   git clone --recursive https://github.com/yulin0629/github-copilot-tutorial.git
-   cd github-copilot-tutorial
-
-3. 如果場景 8 的 submodule 沒有正確下載，請執行：
-   git submodule update --init --recursive
-
-4. 檢查專案結構是否完整（應有 8 個場景資料夾）
-
-5. 完成後請使用 VS Code 開啟專案資料夾：
-   - 使用 File > Open Folder 選單
-   - 選擇剛剛克隆的 github-copilot-tutorial 資料夾</pre>
-                    </div>
-                </details>
 
                 <div style="text-align: center; margin-top: 20px; display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
                     <a href="#" onclick="loadMarkdown('./README.md', 'GitHub Copilot 教學專案 - 完整指南'); return false;" class="btn btn-doc btn-primary">
@@ -328,6 +300,40 @@ <h3 style="font-size: 1.5rem; font-weight: 600; color: #1d1d1f; margin-bottom: 2
             <p style="font-size: 1rem; color: #6e6e73; max-width: 700px; margin: 0 auto;">
                 更重要的是，您將建立起團隊級的 AI 輔助開發流程，讓整個團隊都能受益於這項革命性的技術。
             </p>
+            
+            <div class="agent-setup" style="margin-top: 60px; margin-bottom: 60px;">
+                <h3 style="font-size: 1.25rem; font-weight: 600; color: #1d1d1f; margin-bottom: 20px;">進階：Agent 快速設置</h3>
+                <p style="font-size: 0.9375rem; color: #6e6e73; margin-bottom: 20px; line-height: 1.6;">如果您已經熟悉 GitHub Copilot，可以使用以下 Agent 指令快速設置環境：</p>
+                <details style="background: #f5f5f7; padding: 24px; border-radius: 16px; border: none;">
+                    <summary style="cursor: pointer; font-weight: 600; color: #007aff; font-size: 1rem;">Agent 快速設置指令（點擊展開）</summary>
+                    <div style="position: relative;">
+                        <button onclick="copyAgentPrompt()" style="position: fixed; top: auto; bottom: 20px; right: 20px; padding: 8px 16px; background: #007aff; color: white; border: none; border-radius: 20px; font-size: 12px; cursor: pointer; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); display: none;">
+                            複製
+                        </button>
+                        <pre id="agentPrompt" style="margin-top: 10px; background: white; padding: 15px; padding-right: 60px; border-radius: 5px; font-size: 0.9rem; overflow-x: auto;">請幫我設置 GitHub Copilot 教學專案環境：
+
+1. 首先檢查目前位置並決定克隆位置：
+   - 如果在 VS Code 中已有開啟的專案，請詢問我是否要在當前目錄的父目錄克隆
+   - 如果沒有開啟專案，請詢問我想要克隆到哪個目錄
+   - 建議的位置：~/projects/ 或 ~/Github/
+
+2. 克隆專案（包含 submodule）：
+   cd [選定的目錄]
+   git clone --recursive https://github.com/yulin0629/github-copilot-tutorial.git
+   cd github-copilot-tutorial
+
+3. 如果場景 8 的 submodule 沒有正確下載，請執行：
+   git submodule update --init --recursive
+
+4. 檢查專案結構是否完整（應有 8 個場景資料夾）
+
+5. 完成後請使用 VS Code 開啟專案資料夾：
+   - 使用 File > Open Folder 選單
+   - 選擇剛剛克隆的 github-copilot-tutorial 資料夾</pre>
+                    </div>
+                </details>
+            </div>
+            
             <div style="margin-top: 40px; padding-top: 32px; border-top: 1px solid #d1d9e0;">
                 <p style="font-size: 0.875rem; color: #86868b;">
                     Created by Yulin Wang • Powered by GitHub Copilot