Skip to content

Commit 35a0e56

Browse files
yulin0629yulin0629
committed
feat: 豐富頁面內容和視覺設計
- 增加專案簡介的詳細說明段落 - 為特色卡片加入圖標和子項目列表 - 優化快速開始區塊的內容和排版 - 增強 QR Code 區塊的說明文字 - 豐富頁尾的預期成果展示 - 修復 iPhone 上的卡片邊距問題 - 調整左側漸變寬度避免內容被遮擋
1 parent 7d9709f commit 35a0e56

File tree

1 file changed

+109
-24
lines changed

1 file changed

+109
-24
lines changed

‎index.html‎

Lines changed: 109 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -164,8 +164,8 @@
164164

165165
.scenario-wrapper {
166166
position: relative;
167-
margin: 0 -20px;
168-
padding: 0 20px;
167+
margin: 0;
168+
padding: 0;
169169
}
170170

171171
.scenario-list {
@@ -176,7 +176,7 @@
176176
scroll-behavior: smooth;
177177
-webkit-overflow-scrolling: touch;
178178
padding: 20px 0;
179-
margin: -20px 0;
179+
margin: 0;
180180
cursor: grab;
181181
}
182182

@@ -191,6 +191,25 @@
191191
}
192192
}
193193

194+
/* 確保第一個和最後一個項目有足夠的空間 */
195+
.scenario-item:first-child {
196+
margin-left: 20px;
197+
}
198+
199+
.scenario-item:last-child {
200+
margin-right: 20px;
201+
}
202+
203+
@media (min-width: 769px) {
204+
.scenario-item:first-child {
205+
margin-left: 0;
206+
}
207+
208+
.scenario-item:last-child {
209+
margin-right: 0;
210+
}
211+
}
212+
194213
.scenario-item {
195214
background: #ffffff;
196215
color: #1d1d1f;
@@ -469,7 +488,7 @@
469488
top: 20px;
470489
right: 0;
471490
bottom: 20px;
472-
width: 100px;
491+
width: 60px;
473492
background: linear-gradient(to left, #ffffff 0%, transparent 100%);
474493
pointer-events: none;
475494
z-index: 1;
@@ -483,14 +502,21 @@
483502
top: 20px;
484503
left: 0;
485504
bottom: 20px;
486-
width: 100px;
505+
width: 60px;
487506
background: linear-gradient(to right, #ffffff 0%, transparent 100%);
488507
pointer-events: none;
489508
z-index: 1;
490509
opacity: 0;
491510
transition: opacity 0.3s ease;
492511
}
493512

513+
@media (min-width: 769px) {
514+
.scenario-wrapper::after,
515+
.scenario-wrapper::before {
516+
width: 100px;
517+
}
518+
}
519+
494520
.scenario-wrapper.scrolled::before {
495521
opacity: 1;
496522
}
@@ -512,9 +538,6 @@
512538
grid-template-columns: 1fr;
513539
}
514540

515-
.scenario-wrapper::after {
516-
width: 50px;
517-
}
518541
}
519542
</style>
520543
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
@@ -758,32 +781,63 @@ <h1>GitHub Copilot 教學專案</h1>
758781
<h2 style="font-size: 3.5rem; font-weight: 700; margin-bottom: 48px; text-align: center; letter-spacing: -0.03em;">專案簡介</h2>
759782
<p style="text-align: center; font-size: 1.25rem; color: #6e6e73; max-width: 800px; margin: 0 auto 80px; line-height: 1.6;">這是一個 <strong style="color: #1d1d1f;">2小時精華版</strong> GitHub Copilot 教學專案，專注於 <strong style="color: #1d1d1f;">Agent 模式</strong>的實際應用。<br>透過由淺入深的 8 個場景，讓您快速掌握 AI 驅動的開發流程。</p>
760783

784+
<div style="text-align: center; margin: 0 auto 80px; max-width: 900px;">
785+
<p style="font-size: 1.125rem; color: #515154; line-height: 1.8; margin-bottom: 24px;">
786+
我們將從基礎的對話功能開始，逐步深入到讓 AI Agent 完全主導開發流程。每個場景都包含實際的程式碼範例、詳細的操作步驟，以及立即可見的成果展示。
787+
</p>
788+
<p style="font-size: 1rem; color: #6e6e73; line-height: 1.7;">
789+
無論您是 <strong>產品經理（PM）</strong>想了解 AI 如何加速產品迭代、<strong>系統分析師（SA）</strong>希望掌握 AI 輔助系統設計，還是<strong>程式設計師（PG）</strong>想要提升編碼效率，這個課程都能為您帶來實質的幫助。
790+
</p>
791+
</div>
792+
761793
<div class="features">
762794
<div class="feature-card">
763-
<h3>Agent 模式核心</h3>
764-
<p>學習讓 AI 自主完成複雜開發任務，採用漸進式學習路徑</p>
795+
<h3>🤖 Agent 模式核心</h3>
796+
<p>學習讓 AI 自主完成複雜開發任務，從簡單的程式碼補全到完整的系統架構設計。採用漸進式學習路徑，讓您一步步掌握 Agent 的強大能力。</p>
797+
<ul style="margin-top: 16px; font-size: 0.875rem; color: #6e6e73; list-style: none; padding: 0;">
798+
<li style="margin-bottom: 8px;">✓ 自主分析與決策</li>
799+
<li style="margin-bottom: 8px;">✓ 多檔案協調修改</li>
800+
<li>✓ 完整專案重構</li>
801+
</ul>
765802
</div>
766803

767804
<div class="feature-card">
768-
<h3>目標聽眾</h3>
769-
<p>適合 PM、SA、PG 三種角色，了解 AI 如何提升各自工作效率</p>
805+
<h3>👥 目標聽眾</h3>
806+
<p>適合各種角色的專業人士，每個人都能找到適合自己的應用場景，大幅提升工作效率。</p>
807+
<ul style="margin-top: 16px; font-size: 0.875rem; color: #6e6e73; list-style: none; padding: 0;">
808+
<li style="margin-bottom: 8px;">📊 <strong>PM</strong>：快速原型開發、需求驗證</li>
809+
<li style="margin-bottom: 8px;">🔍 <strong>SA</strong>：系統分析、文檔生成</li>
810+
<li>💻 <strong>PG</strong>：編碼加速、測試自動化</li>
811+
</ul>
770812
</div>
771813

772814
<div class="feature-card">
773-
<h3>2025 最新功能</h3>
774-
<p>涵蓋 Next Edit Suggestions、多指令檔案系統、Prompt Files 等最新特色</p>
815+
<h3>🚀 2025 最新功能</h3>
816+
<p>涵蓋 GitHub Copilot 最新發布的強大功能，讓您站在 AI 輔助開發的最前沿。</p>
817+
<ul style="margin-top: 16px; font-size: 0.875rem; color: #6e6e73; list-style: none; padding: 0;">
818+
<li style="margin-bottom: 8px;">⚡ Next Edit Suggestions</li>
819+
<li style="margin-bottom: 8px;">📁 多指令檔案系統</li>
820+
<li>📝 Prompt Files 模板化</li>
821+
</ul>
775822
</div>
776823
</div>
777824

778825
<div class="quick-start">
779-
<h3 style="font-size: 1.125rem; font-weight: 600; color: #1d1d1f;">快速開始</h3>
780-
<p>1. 安裝 VS Code 和 GitHub Copilot 擴充套件<br>
781-
2. 登入 GitHub 帳號並選擇適合的訂閱方案<br>
782-
3. 設定繁體中文語言環境<br>
783-
4. 開始第一個場景的學習</p>
826+
<h3 style="font-size: 1.25rem; font-weight: 600; color: #1d1d1f; margin-bottom: 20px;">🚀 快速開始</h3>
827+
<p style="font-size: 1rem; line-height: 1.8; margin-bottom: 20px;">準備好開始您的 AI 輔助開發之旅了嗎？只需要簡單幾個步驟：</p>
828+
<ol style="font-size: 0.9375rem; line-height: 1.8; color: #515154; margin-left: 20px;">
829+
<li style="margin-bottom: 12px;"><strong>安裝必要工具</strong><br>
830+
下載並安裝 VS Code，然後從擴充套件市場安裝 GitHub Copilot</li>
831+
<li style="margin-bottom: 12px;"><strong>設定您的帳號</strong><br>
832+
使用 GitHub 帳號登入，選擇個人版（$10/月）或商業版（$19/月）</li>
833+
<li style="margin-bottom: 12px;"><strong>語言環境設定</strong><br>
834+
將 VS Code 設定為繁體中文，獲得更好的學習體驗</li>
835+
<li><strong>開始學習旅程</strong><br>
836+
從場景 1 開始，循序漸進掌握每個功能</li>
837+
</ol>
784838

785-
<details style="margin-top: 20px; background: #f5f5f7; padding: 24px; border-radius: 16px; border: none;">
786-
<summary style="cursor: pointer; font-weight: 600; color: #007aff;">Agent 快速設置指令（點擊展開）</summary>
839+
<details style="margin-top: 28px; background: #f5f5f7; padding: 24px; border-radius: 16px; border: none;">
840+
<summary style="cursor: pointer; font-weight: 600; color: #007aff; font-size: 1rem;">🎯 Agent 快速設置指令（點擊展開）</summary>
787841
<div style="position: relative;">
788842
<button onclick="copyAgentPrompt()" style="position: absolute; top: 15px; right: 15px; padding: 5px 10px; background: #007aff; color: white; border: none; border-radius: 20px; font-size: 12px; cursor: pointer; z-index: 10;">
789843
複製
@@ -825,13 +879,19 @@ <h3 style="font-size: 1.125rem; font-weight: 600; color: #1d1d1f;">快速開始<
825879
</div>
826880

827881
<div class="qr-code-section">
828-
<h3 style="font-size: 1.25rem; font-weight: 600; color: #1d1d1f;">手機掃描 QR Code 快速存取</h3>
882+
<h3 style="font-size: 1.375rem; font-weight: 600; color: #1d1d1f; margin-bottom: 16px;">📱 手機掃描 QR Code 快速存取</h3>
883+
<p style="font-size: 1rem; color: #6e6e73; margin-bottom: 24px; line-height: 1.6;">
884+
想要隨時隨地查看教學內容？掃描下方 QR Code，即可在手機或平板上瀏覽完整的教學資源。
885+
</p>
829886
<div id="qrcode"></div>
830-
<p class="qr-note">掃描 QR Code 即可在手機上瀏覽完整教學內容</p>
887+
<p class="qr-note" style="margin-top: 20px;">支援所有主流瀏覽器，建議使用 Safari 或 Chrome 獲得最佳體驗</p>
831888
</div>
832889

833890
<div class="scenarios">
834891
<h2>8 個學習場景</h2>
892+
<p style="text-align: center; font-size: 1.125rem; color: #6e6e73; max-width: 800px; margin: -8px auto 40px; line-height: 1.6;">
893+
從基礎到進階，每個場景都精心設計，讓您在實作中學習。左右滑動探索所有場景。
894+
</p>
835895
<div class="scenario-wrapper">
836896
<div class="scenario-list">
837897
<div class="scenario-item">
@@ -940,7 +1000,32 @@ <h2>8 個學習場景</h2>
9401000
</div>
9411001

9421002
<div class="footer">
943-
<p>預期成果：完成課程後提升 30-50% 開發效率，建立團隊級 AI 輔助開發流程</p>
1003+
<h3 style="font-size: 1.5rem; font-weight: 600; color: #1d1d1f; margin-bottom: 20px;">🎯 預期成果</h3>
1004+
<p style="font-size: 1.125rem; line-height: 1.8; max-width: 800px; margin: 0 auto 20px;">
1005+
完成這 2 小時的精華課程後，您將能夠：
1006+
</p>
1007+
<div style="display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin: 32px 0;">
1008+
<div style="text-align: center;">
1009+
<div style="font-size: 2.5rem; font-weight: 700; color: #007aff; margin-bottom: 8px;">30-50%</div>
1010+
<div style="font-size: 0.875rem; color: #6e6e73;">開發效率提升</div>
1011+
</div>
1012+
<div style="text-align: center;">
1013+
<div style="font-size: 2.5rem; font-weight: 700; color: #007aff; margin-bottom: 8px;">80%</div>
1014+
<div style="font-size: 0.875rem; color: #6e6e73;">重複工作減少</div>
1015+
</div>
1016+
<div style="text-align: center;">
1017+
<div style="font-size: 2.5rem; font-weight: 700; color: #007aff; margin-bottom: 8px;">10x</div>
1018+
<div style="font-size: 0.875rem; color: #6e6e73;">文檔生成速度</div>
1019+
</div>
1020+
</div>
1021+
<p style="font-size: 1rem; color: #6e6e73; max-width: 700px; margin: 0 auto;">
1022+
更重要的是，您將建立起團隊級的 AI 輔助開發流程，讓整個團隊都能受益於這項革命性的技術。
1023+
</p>
1024+
<div style="margin-top: 40px; padding-top: 32px; border-top: 1px solid #d1d9e0;">
1025+
<p style="font-size: 0.875rem; color: #86868b;">
1026+
Created with ❤️ by Yulin Wang • Powered by GitHub Copilot
1027+
</p>
1028+
</div>
9441029
</div>
9451030
</div>
9461031

0 commit comments

Comments
 (0)