Skip to content

Wangver #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pqusernamepq wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Wangver #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a5a1fa8
initial commit of wang's demo with Gemini
Papaya-Wang Mar 8, 2026
05ccea2
add text in the main page
Papaya-Wang Mar 10, 2026
d701b7c
insert text, may need reviewing
Papaya-Wang Mar 10, 2026
9f15336
fix footer year
Papaya-Wang Mar 10, 2026
625b88d
fix wrong image
Papaya-Wang Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.github/
13 changes: 6 additions & 7 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,23 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>關於協會 | 台灣民團協會</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="favicon.png">
</head>
<body>

<nav>
<a href="index.html" class="logo">T.C.A.</a>
<div class="nav-links">
<div class="nav-external-links">
<a href="index.html">首頁</a>
<a href="about.html" class="active">關於協會</a>
<a href="activities.html">訓練課程</a>
<a href="defence.html">高默防衛</a>
<a href="ilovelinux.html" class="active">民防運作與行動</a>
<a href="reflect.html">行動與省思</a>
</div>
</nav>

<main class="container">
<div class="fade-up">
<h1>我們是誰</h1>
<p style="font-size: 1.2rem;">由台灣愛國者所組成，致力於推廣民防之重要與落實。</p>
<p>由台灣愛國者所組成，致力於推廣民防之重要與落實。</p>
</div>

<div class="grid" style="margin-top: 60px;">
Expand All @@ -42,7 +41,7 @@ <h3>聯絡資訊</h3>
</main>

<footer>
<p>&copy; 2024 Taiwan Civilian Association Cyberfair Project.</p>
<p>&copy; 2026 Taiwan Civilian Association Cyberfair Project.</p>
</footer>

<script src="script.js"></script>
Expand Down
58 changes: 0 additions & 58 deletions activities.html
View file
Open in desktop

This file was deleted.

126 changes: 126 additions & 0 deletions defence.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>專案詳情 | 台灣民團協會</title>
<!-- 引入 Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+TC:wght@400;700;900&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>

<nav id="navbar">
<a href="index.html" class="logo">T.C.A</a>
<div class="nav-title-sticky">高默防衛</div>

<!-- 手機版切換按鈕 -->
<div class="menu-toggle" id="mobile-menu">
<span></span>
<span></span>
<span></span>
</div>

<div class="nav-external-links" id="nav-links">
<a href="index.html">首頁</a>
<a href="defence.html" class="active">高默防衛</a>
<a href="ilovelinux.html">民防運作與行動</a>
<a href="reflect.html">行動與省思</a>
</div>
</nav>

<main>
<!-- Hero Section -->
<section class="hero-section">
<div class="hero-image-container fade-up">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&q=80&w=2000" alt="STA">
</div>

<div class="outline-container fade-up">
<h2 class="outline-title">STA<br>高默防衛</h2>
<div class="outline-desc">
<p>為了深入了解民間防衛的行動面貌，我們團隊專訪了由退役人員組成的「高默 (S.T.A)」。</p>
<p>他們讓我們看見了行動力與危機感知的訓練初衷。</p>
</div>
</div>
</section>

<!-- 圖文並茂的內文 -->
<div class="content-container">

<!-- 第一段落 -->
<section class="content-section fade-up">
<div class="section-header">
<h2>組織初衷：建立危機感知，為社會買一份「保險」</h2>
</div>
<div class="row">
<div class="col-text">
<p>高默（S.T.A）是由台灣退役特戰成員組成的民間訓練團體。在我們的訪談中，教官點出一個關鍵：「台灣人幾乎都經歷過颱風、地震等自然災害，但極少人具備應對複合型極端危機的『臨場感知』。」面對網路上「推廣民防是在製造恐慌」的質疑，創辦人語重心長地向我們比喻：「這就像幫小孩買保險，不是在挑戰死神；做健康檢查，也不是在挑釁病菌。」</p>
<p>追求平安不能只靠口號，提升自身的應變實力，才是面對未知風險的最佳解答。三年來，高默成功帶領跨性別、跨背景的平民克服體能限制，建立起「保護自己、伸出援手」的基礎能力。</p>
</div>
<div class="col-image">
<img src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&q=80&w=800" alt="社區討論圖">
</div>
</div>
</section>

<!-- 第二段落 (反向排版) -->
<section class="content-section fade-up">
<div class="section-header">
<h2>運作模式：從單點突破到系統化教育</h2>
</div>
<div class="row reverse">
<div class="col-text">
<p>高默的訓練與其他單位相比，更強調「精緻化」。教官向我們分享，這三年來，課程從最初每個月一兩次，發展到現在幾乎每週都有課。他們設計了嚴謹的 Level 分級訓練，從單項技術到整體考核，讓學生在循序漸進中獲得成就感。</p>
<p>此外，學員結訓後會形成緊密的支援小組，大家私下甚至會交流睡袋、背包等二手裝備。這種強大的社群凝聚力，讓有志於防災的人不再感到孤單，也破除了外界對於民防團體是「激進好戰分子」的誤解。</p>
</div>
<div class="col-image">
<img src="https://images.unsplash.com/photo-1584263347416-85a18a4524a2?auto=format&fit=crop&q=80&w=800" alt="急救包圖">
</div>
</div>
</section>

<!-- 第三段落 -->
<section class="content-section fade-up">
<div class="section-header">
<h2>社群連結：與地方共榮的智慧</h2>
</div>
<div class="row">
<div class="col-text">
<p>作為扎根地方的社群團體，高默極度重視行動的「合法性」與「在地連結」。</p>
<p>在訪談中我們得知一個生動的幕後故事：為了不讓拿著訓練器材的學員嚇到一般民眾，每次演習前，高默都會與當地村里長及警察單位充分溝通。「剛好我外公以前是那邊的村長，有地緣關係。」創辦人笑著說。更棒的是，高默的訓練活動成功帶動了當地的露營區及住宿業發展。</p>
<p>這種「民防帶動地方產業」的共生模式，不僅讓在地居民從陌生轉為支持，更吸引了許多軍警消人員利用休假以平民身分來進修精進。</p>
</div>
<div class="col-image">
<img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&q=80&w=800" alt="醫療訓練圖">
</div>
</div>
</section>

<!-- 第四段落 -->
<section class="content-section fade-up">
<div class="section-header">
<h2>未來展望：走進社區，內化「不驚慌」的社會文化 </h2>
</div>
<div class="row reverse">
<div class="col-text">
<p>高默的終極願景是將防災觀念深植人心。教官在受訪時生動地比喻：「民防的終極目標就是建立『不要驚慌』的觀念。就像飛機出狀況，你不能尖叫，要聽從空服員指揮；也不能像疫情期間，發燒 39 度就全衝急診，造成醫療資源浪費。」</p>
<p>透過持續的專業推廣，高默期許讓每位公民在天災或緊急狀況發生時，都能具備判斷輕重緩急的能力。學會配合政府專業部門，在自救的同時也成為社會穩定的力量。</p>
<p>這份展望不只是技術傳承，更是對社會責任的承諾，致力於讓每一位民眾都成為強化社會安全防護網中，最堅實且理性的後盾。</p>
</div>
<div class="col-image">
<img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&q=80&w=800" alt="醫療訓練圖">
</div>
</div>
</section>

</div>
</main>

<footer>
<p>&copy; 2026 Taiwan Civilian Association Cyberfair Project.</p>
</footer>

<script src="script.js"></script>
</body>
</html>
Binary file removed favicon.png
View file
Open in desktop
Binary file not shown.
120 changes: 120 additions & 0 deletions ilovelinux.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>專案詳情 | 台灣民團協會</title>
<!-- 引入 Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+TC:wght@400;700;900&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>

<nav id="navbar">
<a href="index.html" class="logo">T.C.A</a>
<div class="nav-title-sticky">民防運作與行動</div>

<!-- 手機版切換按鈕 -->
<div class="menu-toggle" id="mobile-menu">
<span></span>
<span></span>
<span></span>
</div>

<div class="nav-external-links" id="nav-links">
<a href="index.html">首頁</a>
<a href="defence.html">高默防衛</a>
<a href="ilovelinux.html" class="active">民防運作與行動</a>
<a href="reflect.html">行動與省思</a>
</div>
</nav>

<main>
<!-- Hero Section -->
<section class="hero-section">
<div class="hero-image-container fade-up">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&q=80&w=2000" alt="MEETING">
</div>

<div class="outline-container fade-up">
<h2 class="outline-title">民防運作<br>與行動</h2>
<p class="outline-desc">
如果高默防衛展現了民防的「剛」，那麼我們與台灣民防協會劉教授的訪談，則讓我們深刻體會到民防的「柔」。劉教授為我們揭示了老弱婦孺在民防中的關鍵定位，以及不容忽視的「金融韌性」。
</p>
</div>
</section>

<!-- 圖文並茂的內文 -->
<div class="content-container">

<!-- 第一段落 -->
<section class="content-section fade-up">
<div class="section-header">
<h2>平時整備與訓練：建立大腦、身體與資產的防火牆</h2>
</div>
<div class="row">
<div class="col-text">
<p>自主防護與居家堡壘 (Self-Protection and the Home Fortress): 民防的核心在於「主動」。過去我們以為民防需要極佳的體力，但劉教授提出了「居家堡壘」的概念。</p>
<p>對於老弱婦孺或行動不便者，在極端災害發生、交通停擺時移動反而會增加風險。因此，「就地避難」並在家中儲備足夠的糧食與慢性病藥物，就是最安全的選擇。「照顧好自己，不增添避難所與社會的負擔，就是對民防最大的貢獻。」</p>
</div>
<div class="col-image">
<img src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&q=80&w=800" alt="社區討論圖">
</div>
</div>
<div class="row">
<div class="col-text">
<p>建立「金融韌性」 (Building "Financial Resilience"): 錢也是物資的一種。劉教授特別提醒，面對重大無預警危機，我們必須準備「金融避難包」——在家中或身上備妥現金，以應對斷電導致 ATM 停擺或信用卡失效的窘境。</p>
<p>資訊過濾 (Information Filtering): 在假訊息橫行的時代，建立「信任機構名單」是最重要的心防演練，透過理性的訊息過濾機制，我們才能在動盪中保持冷靜。</p>
</div>
</div>
</section>

<!-- 第二段落 (反向排版) -->
<section class="content-section fade-up">
<div class="section-header">
<h2>關鍵時刻的角色：硬中帶柔的社會防護網</h2>
</div>
<div class="row reverse">
<div class="col-text">
<p>打破刻板印象，女性撐起半邊天 (Breaking Stereotypes—Women Hold Up Half the Sky): 過去民防照片總給人強悍的軍警消印象。</p>
<p>然而劉教授指出，當重大危機發生，多數專業救援人力必須投入第一線高強度任務時，社區後方的民防將以女性為核心主力。未來的民防形象應展現「硬中帶柔」的韌性。</p>
</div>
<div class="col-image">
<img src="https://images.unsplash.com/photo-1584263347416-85a18a4524a2?auto=format&fit=crop&q=80&w=800" alt="急救包圖">
</div>
</div>

<div class="row reverse">
<div class="col-text">
<p>聚焦軟性功能與生活化 (Focusing on Soft Functions and Daily Life): 民防不僅是體能訓練，更是維持社會運轉。<br>在真實的「城鎮韌性演習」中，我們看見里長帶著社區婆婆媽媽製作並發送麵包；在平時，我們透過「幼兒園防空避難演練」或發放「寵物避難手冊」，讓民防褪去生硬的色彩，變得親民且貼近生活。CPR 急救、燙傷處理與照顧弱勢，這些軟性工作正是民防最真實的樣貌。</p>
</div>
</div>
</section>

<!-- 第三段落 -->
<section class="content-section fade-up">
<div class="section-header">
<h2>災害應變案例：守護生命的智慧與紅線</h2>
</div>
<div class="row">
<div class="col-text">
<p>積極撤離 (Active Evacuation): 「逃」具有積極的避險意義。有組織地向安全地帶撤離是減少傷亡的首要任務，以保留社區復原的火種。</p>
<p>社區巡守 (Community Patrols): 災害期間，基層巡守隊協助治安與物資調度，在政府資源抵達前，確保鄰里不因恐慌而陷入混亂。</p>
<p>合法授權 (Legal Authorization): 民防運作必須建立在合法性之上。所有救災行為皆須符合內政部規範，避免產生法律爭議，建立大眾信任。</p>
</div>
<div class="col-image">
<img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&q=80&w=800" alt="醫療訓練圖">
</div>
</div>
</section>

</div>
</main>

<footer>
<p>&copy; 2026 Taiwan Civilian Association Cyberfair Project.</p>
</footer>

<script src="script.js"></script>
</body>
</html>
Loading