zlcsc_GDGoC公益營任務進度
# 活動前
## 教學組
- ☑教學簡報
- 試教 ( 彩排取消 )
## 公活組
- ☑宣傳文案
- ☑報名表單
- ☑便當決定 ( 八方雲集 )
- ☑錄取通知信
- ☑活動取消信
- 團康遊戲細項
## 美宣組
- ☑宣傳文案
- ☑網頁 ( 淺色模式 )
- ☑海報
- 獎狀證書文字、排版
## 總務組
- ☑估預算
- ☑找保險公司
- ☑支付民宿訂金
- ☑保險公司確定
- ☑民宿退款
- 申辦保險 ( 國泰產險 ) **等報名截止**
- 訂臺鐵票
- 訂便當
- 總預算表
# 活動中
## 教學組
- 同活動前
- 教學 ( DAY_1：胡妘婕 | DAY_2：甄秉序 | DAY_3：陳湛方)
## 隊輔組
- 行前訓練 ( 同教學組，彩排取消 )
- 帶領小隊員
- 帶領團康活動
- 發便當
- 處理小隊員突發狀況
## 機動組
- 行前訓練 ( 同教學組，彩排取消 )
- 處理活動中突發狀況
- 拿便當
## Misc
### 海報
~~難過了檔案超過限制~~
裡面的poster
https://drive.google.com/drive/folders/1tLq6If0IVmvH58EBWibiy1UIPNPJ1SJh?usp=drive_link
### 表單
報名截止：12/25 22:00
https://forms.gle/c99YU9s1TrbLPyND7
### 淺色網頁
*有使用AI輔助但我不是AI生完就~~直接丟上來交差~~
~~我有把code看完還修改了不下20次~~
網頁會用到的圖片們
https://drive.google.com/drive/folders/1tLq6If0IVmvH58EBWibiy1UIPNPJ1SJh?usp=drive_link
html
```
<!DOCTYPE html>
<html lang="zh-Hant" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>zlcsc×GDGoC_AI程式公益營</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="zlcscgdgoc.css">
</head>
<body class="text-gray-800 font-sans bg-gradient-to-br from-blue-50 via-white to-blue-100 min-h-screen">
<nav class="fixed top-0 w-full bg-[#000080]/60 backdrop-blur-md text-white shadow-lg z-50">
<div class="max-w-6xl mx-auto px-6 py-3 flex justify-between items-center">
<div class="flex items-center gap-4">
<img src="X.png" alt="zlcsc×GDGoC Logo" class="h-10 w-auto md:h-12 object-contain" />
<div class="text-lg md:text-xl font-bold tracking-wider hidden xs:block">
zlcsc × GDGoC
</div>
</div>
<ul class="hidden md:flex space-x-8 items-center">
<li><a href="#about" class="hover:text-[#000080] transition duration-300 font-medium"><strong>活動簡介</strong></a></li>
<li><a href="#event" class="hover:text-[#000080] transition duration-300 font-medium"><strong>活動資訊</strong></a></li>
<li><a href="#faq" class="hover:text-[#000080] transition duration-300 font-medium"><strong>常見問題</strong></a></li>
<li><a href="#contact" class="hover:text-[#000080] transition duration-300 font-medium"><strong>聯絡我們</strong></a></li>
</ul>
<button id="menu-btn" class="md:hidden text-white focus:outline-none p-1 hover:bg-white/10 rounded transition">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-[#000080]/60 border-t border-[#000080] shadow-2xl">
<ul class="flex flex-col py-2">
<li><a href="#about" class="block py-4 px-8 hover:bg-[#000080] text-left text-base font-medium border-b border-blue-500/30"><strong>活動簡介</strong></a></li>
<li><a href="#event" class="block py-4 px-8 hover:bg-[#000080] text-left text-base font-medium border-b border-blue-500/30"><strong>活動資訊</strong></a></li>
<li><a href="#faq" class="block py-4 px-8 hover:bg-[#000080] text-left text-base font-medium border-b border-blue-500/30"><strong>常見問題</strong></a></li>
<li><a href="#contact" class="block py-4 px-8 hover:bg-[#000080] text-left text-base font-medium"><strong>聯絡我們</strong></a></li>
</ul>
</div>
</nav>
<div class="h-20 md:h-24"></div>
<section class="px-4 mb-16 pt-6">
<div class="glass-card relative rounded-2xl mx-auto max-w-5xl px-6 py-12 md:py-20 text-center overflow-hidden hover-trigger">
<h1 class="text-4xl md:text-6xl font-extrabold mb-6 text-blue-900 tracking-tight">
AI 程式公益營
</h1>
<p class="text-xl md:text-2xl mb-8 font-medium text-gray-700 leading-relaxed">
中崙高中 <span class="text-blue-500 mx-2">×</span> GDGoC NCUE
</p>
<a href="https://forms.gle/c99YU9s1TrbLPyND7" target="_blank"
class="inline-block bg-gray-900 text-white font-bold py-3 px-10 rounded-full shadow-lg hover:bg-blue-700 hover:shadow-blue-500/30 transition-all duration-300 transform hover:-translate-y-1">
立即報名 ➜
</a>
<div class="highlight-effect pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300"></div>
</div>
</section>
<section id="about" class="my-16 scroll-mt-24 px-4">
<div class="max-w-4xl mx-auto">
<div class="glass-card relative rounded-2xl p-8 md:p-10 overflow-hidden hover-trigger">
<h2 class="text-3xl font-bold mb-6 text-blue-800 border-l-4 border-[#000080] pl-4">活動簡介</h2>
<div class="space-y-4 text-lg text-gray-700 leading-relaxed">
<p>🚀 你準備好和 AI <span class="text-[#000080] font-bold">『碼』</span>上結盟了嗎?</p>
<p>在這個 AI 席捲全球的時代，想親手打造屬於自己的智慧應用嗎?</p>
<p>無論你是零基礎的初心者，還是已經在程式世界裡遨遊的探索者，我們都邀請你一同踏上這場<strong>「從無到有」</strong>的旅程。</p>
<p>讓程式在靜謐間展翅翱翔，讓創意與 AI 一起發光！💡</p>
<p class="text-xl font-bold text-[#000080] mt-6">🔥 快來和我們一起「碼」上改變世界!</p>
</div>
<div class="flex flex-wrap gap-2 mt-8">
<span class="bg-blue-100 text-blue-800 text-sm font-semibold px-4 py-1.5 rounded-full"># AI公益營</span>
<span class="bg-blue-100 text-blue-800 text-sm font-semibold px-4 py-1.5 rounded-full"># 從零開始的AI開發生活</span>
<span class="bg-blue-100 text-blue-800 text-sm font-semibold px-4 py-1.5 rounded-full"># 寒假不迷路</span>
</div>
<div class="highlight-effect pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300"></div>
</div>
</div>
</section>
<section class="my-12 px-4">
<div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-6">
<div class="glass-card rounded-xl p-6 hover:shadow-lg transition-shadow">
<h2 class="text-2xl font-bold mb-4 text-blue-800 flex items-center">
🔔 最新消息
</h2>
<div class="mb-3 flex justify-between items-end border-b pb-2 border-gray-300/50">
<p class="text-lg font-semibold text-red-500">報名截止：12/25</p>
<p class="text-xs text-gray-500">2025/12/05 公告</p>
</div>
<p class="text-gray-700">名額有限，欲報名者請從速！</p>
</div>
<div class="glass-card rounded-xl p-6 hover:shadow-lg transition-shadow">
<h2 class="text-2xl font-bold mb-4 text-blue-800 flex items-center">
📌 提醒事項
</h2>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start"><span class="mr-2">✔️</span> 請務必填寫正確的聯絡方式。</li>
<li class="flex items-start"><span class="mr-2">✔️</span> 活動當天請攜帶學生證以便入場。</li>
<li class="flex items-start"><span class="mr-2">✔️</span> 建議提前 15 分鐘到場簽到。</li>
</ul>
</div>
</div>
</section>
<section id="event" class="py-12 scroll-mt-24 px-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-center text-blue-900">活動資訊</h2>
<details class="bg-white/90 backdrop-blur rounded-xl shadow-sm p-2 mb-4 group open:ring-2 open:ring-[#000080] transition-all duration-300">
<summary class="cursor-pointer font-bold text-gray-800 text-lg p-4 rounded-lg hover:bg-blue-50 flex items-center justify-between select-none">
<span>👥 參加對象</span>
<svg class="w-6 h-6 transform group-open:rotate-180 transition-transform text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 pt-2 text-gray-700 border-t border-gray-100 mt-2">
<ul class="list-disc list-inside ml-2">
<li>全國各級國民中學在學學生。</li>
<li>對程式設計、人工智慧有興趣者。</li>
</ul>
</div>
</details>
<details class="bg-white/90 backdrop-blur rounded-xl shadow-sm p-2 mb-4 group open:ring-2 open:ring-[#000080] transition-all duration-300">
<summary class="cursor-pointer font-bold text-gray-800 text-lg p-4 rounded-lg hover:bg-blue-50 flex items-center justify-between select-none">
<span>📅 日期與地點</span>
<svg class="w-6 h-6 transform group-open:rotate-180 transition-transform text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 pt-2 text-gray-700 border-t border-gray-100 mt-2 space-y-2">
<p><strong>📅 日期：</strong> 2026年 1月26日 ( 一 ) 至 1月28日 ( 三 )</p>
<p><strong>📍 地點：</strong> 彰化師範大學 進德校區 電腦教室二 <br><span class="text-sm text-gray-500 ml-6">(彰化市進德路1號)</span></p>
<p><strong>💲 費用：</strong> <span class="text-green-600 font-bold">全程免費</span></p>
<p class="text-sm bg-yellow-50 p-2 rounded text-yellow-800 mt-2 border border-yellow-200">
⚠️ 注意：如需訂便當，請攜帶 <strong>$300 元</strong>，於首日報到時繳交給工作人員。
</p>
</div>
</details>
<details class="bg-white/90 backdrop-blur rounded-xl shadow-sm p-2 mb-4 group open:ring-2 open:ring-[#000080] transition-all duration-300" open>
<summary class="cursor-pointer font-bold text-gray-800 text-lg p-4 rounded-lg hover:bg-blue-50 flex items-center justify-between select-none">
<span>🕒 行程表</span>
<svg class="w-6 h-6 transform group-open:rotate-180 transition-transform text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="mt-4 px-2 pb-4 overflow-x-auto">
<table class="min-w-full border-collapse bg-white rounded-lg overflow-hidden shadow-sm text-sm md:text-base">
<thead>
<tr class="bg-[#000080]/60 text-white">
<th class="px-4 py-3 text-center w-1/4">時間</th>
<th class="px-4 py-3 text-center w-1/4">1/26 ( Day 1 )</th>
<th class="px-4 py-3 text-center w-1/4">1/27 ( Day 2 )</th>
<th class="px-4 py-3 text-center w-1/4">1/28 ( Day 3 )</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="bg-gray-50">
<td class="px-2 py-3 text-center font-mono font-bold text-gray-600">09:30-10:00</td>
<td class="px-2 py-3 text-center">集合、隊輔時間</td>
<td class="px-2 py-3 text-center">集合、隊輔時間</td>
<td class="px-2 py-3 text-center">集合、隊輔時間</td>
</tr>
<tr>
<td class="px-2 py-3 text-center font-mono font-bold text-gray-600">10:00-10:45</td>
<td class="px-2 py-3 text-center font-semibold text-blue-700">營隊開幕式</td>
<td class="px-2 py-3 text-center">5. Python 輸入</td>
<td class="px-2 py-3 text-center">8. AI 操作</td>
</tr>
<tr class="bg-gray-50">
<td class="px-2 py-3 text-center font-mono font-bold text-gray-600">11:00-11:45</td>
<td class="px-2 py-3 text-center">破冰、1. 認識編譯器</td>
<td class="px-2 py-3 text-center">6. 迴圈 (while)</td>
<td class="px-2 py-3 text-center">9. GDGoC 業界小分享</td>
</tr>
<tr class="bg-yellow-50 text-yellow-800">
<td class="px-2 py-3 text-center font-mono font-bold">11:45-13:00</td>
<td colspan="3" class="px-2 py-3 text-center font-bold tracking-widest">🍽️ 午餐與午休時光</td>
</tr>
<tr>
<td class="px-2 py-3 text-center font-mono font-bold text-gray-600">13:00-13:45</td>
<td class="px-2 py-3 text-center">2. 變數與資料型別</td>
<td class="px-2 py-3 text-center">團康時間</td>
<td class="px-2 py-3 text-center">10. 遊戲常見函數</td>
</tr>
<tr class="bg-gray-50">
<td class="px-2 py-3 text-center font-mono font-bold text-gray-600">14:00-14:45</td>
<td class="px-2 py-3 text-center">3. 輸出與基本運算</td>
<td class="px-2 py-3 text-center">6. 迴圈 (for)</td>
<td class="px-2 py-3 text-center">11. 小遊戲實作</td>
</tr>
<tr>
<td class="px-2 py-3 text-center font-mono font-bold text-gray-600">15:00-15:45</td>
<td class="px-2 py-3 text-center">4. 如何使用 Github</td>
<td class="px-2 py-3 text-center">7. 條件判斷式</td>
<td class="px-2 py-3 text-center font-semibold text-blue-700">12. 成果發表、結業</td>
</tr>
</tbody>
</table>
</div>
</details>
</div>
</section>
<section id="past" class="py-12 scroll-mt-24 px-4 bg-white/40">
<section class="px-4 mb-16 pt-6">
<div class="glass-card relative rounded-2xl mx-auto max-w-5xl px-6 py-12 md:py-12 overflow-hidden hover-trigger">
<h2 class="text-3xl font-bold mb-8 text-center text-blue-900">歷屆活動成果</h2>
<div class="flex overflow-x-auto gap-4 snap-x snap-mandatory pb-4 scroll-smooth scrollbar-hide">
<img src="chairman.jpeg" alt="活動照片1"
class="flex-none w-[80%] md:w-[45%] h-64 md:h-80 object-cover rounded-xl shadow-sm snap-center transition-transform hover:scale-[1.02]">
<img src="guide.jpeg" alt="活動照片2"
class="flex-none w-[80%] md:w-[45%] h-64 md:h-80 object-cover rounded-xl shadow-sm snap-center transition-transform hover:scale-[1.02]">
<img src="hand.jpeg" alt="活動照片3"
class="flex-none w-[80%] md:w-[45%] h-64 md:h-80 object-cover rounded-xl shadow-sm snap-center transition-transform hover:scale-[1.02]">
<img src="awards.jpg" alt="活動照片4"
class="flex-none w-[80%] md:w-[45%] h-64 md:h-80 object-cover rounded-xl shadow-sm snap-center transition-transform hover:scale-[1.02]">
<div class="flex-none w-4"></div>
</div>
<div class="highlight-effect pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300"></div>
</div>
</section>
</section>
<section id="faq" class="py-12 scroll-mt-24 px-4 bg-white/40">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-center text-blue-900">常見問題</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-[#000080]">
<h3 class="font-bold text-lg mb-2 flex items-center">
何時開始報名？
</h3>
<p class="text-gray-700">即日起至 <span class="font-bold text-red-500">12/25 22:00</span> 止。</p>
</div>
<div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-[#000080]">
<h3 class="font-bold text-lg mb-2 flex items-center">
如何知道是否報名成功？
</h3>
<p class="text-gray-700">我們將於 <span class="font-bold">12/28 17:00 前</span> 寄發錄取通知信至您填寫的信箱，請密切留意。</p>
</div>
</div>
</div>
</section>
<section class="bg-blue-100/80 py-12 px-4 mt-12">
<div class="max-w-4xl mx-auto text-center md:text-left grid md:grid-cols-2 gap-8">
<div>
<h4 class="font-bold text-xl mb-4 text-blue-900 border-b-2 border-blue-300 inline-block pb-1">主辦單位</h4>
<ul class="space-y-2 text-gray-800">
<li class="font-medium">中崙高中資訊研習社</li>
<li class="font-medium">GDGoC NCUE</li>
</ul>
</div>
<div>
<h4 class="font-bold text-xl mb-4 text-blue-900 border-b-2 border-blue-300 inline-block pb-1">協辦單位</h4>
<p class="text-gray-800 font-medium">中華民國大腦智能發展協會</p>
</div>
</div>
</section>
<footer id="contact" class="bg-gray-900 text-white py-8 scroll-mt-24">
<div class="max-w-4xl mx-auto px-4 text-center">
<p class="mb-2 text-lg font-semibold">聯絡我們</p>
<a href="mailto:zlcsc23rd@gmail.com" class="text-blue-200 hover:text-white hover:underline transition-colors text-xl">
zlcsc23rd@gmail.com
</a>
</div>
</footer>
<script src="zlcscgdgoc.js"></script>
</body>
</html>
```
css
```
/* 自定義捲軸樣式 (全域) */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #93c5fd;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #3b82f6;
}
/* 玻璃擬態通用類別 */
.glass-card {
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* 隱藏 Chrome, Safari 和 Opera 的滾動條 (配合 HTML 中的 scrollbar-hide) */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/* 隱藏 IE, Edge 和 Firefox 的滾動條 */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
```
js
```
// === 手機版選單邏輯 ===
const menuBtn = document.getElementById("menu-btn");
const mobileMenu = document.getElementById("mobile-menu");
// 點擊漢堡按鈕切換選單顯示
menuBtn.addEventListener("click", () => {
mobileMenu.classList.toggle("hidden");
});
// 點擊選單項目後自動收合選單
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// === 卡片滑鼠跟隨聚光燈特效 (Spotlight Effect) ===
const hoverBoxes = document.querySelectorAll(".hover-trigger");
hoverBoxes.forEach(box => {
const highlight = box.querySelector(".highlight-effect");
// 滑鼠移動時計算位置並改變光暈位置
box.addEventListener("mousemove", (e) => {
const rect = box.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
highlight.style.background = `radial-gradient(600px circle at ${x}px ${y}px, rgba(255,255,255,0.6), transparent 80%)`;
highlight.style.opacity = 1;
});
// 滑鼠離開時隱藏光暈
box.addEventListener("mouseleave", () => {
highlight.style.opacity = 0;
});
});
```
Google Drive
Gist
Clipboard
Sign in with Wallet
