-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
153 lines (134 loc) · 8.56 KB
/
about.html
File metadata and controls
153 lines (134 loc) · 8.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title class="lang" data-zh="台灣民防 | 成員介紹" data-en="Taiwan Civil Defense - About Us">台灣民團協會 | 成員介紹</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 class="lang-en">
<nav id="navbar">
<a href="index.html" class="logo lang-text" data-zh="韌性台灣：從你我開始的民防新視角" data-en="Resilient Taiwan">韌性台灣：從你我開始的民防新視角</a>
<!-- 手機版切換按鈕 -->
<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" class="lang-text " data-zh="首頁" data-en="Home">首頁</a>
<a href="defence.html" class="lang-text " data-zh="高默 S.T.A" data-en="S.T.A Defense">高默 S.T.A</a>
<a href="ilovelinux.html" class="lang-text " data-zh="民防運作與行動" data-en="Operations in Action">民防運作與行動</a>
<a href="reflect.html" class="lang-text " data-zh="行動與省思" data-en="Actions and Reflections">行動與省思</a>
<a href="about.html" class="active lang-text " data-zh="成員介紹" data-en="About Us">成員介紹</a>
<a href="bibliography.html" class="lang-text " data-zh="參考文獻" data-en="Bibliography">參考文獻</a>
<button id="lang-btn" class="nav-lang-btn">中</button>
</div>
</nav>
<main>
<div class="content-container">
<section class="content-section fade-up">
<div class="section-header">
<h2 class="lang-text" data-zh="成員介紹" data-en="Member Introduction">成員介紹</h2>
<p class="section-subtitle lang-text" data-zh="（點擊照片可以看更多）" data-en="(Click photo for more details)"></p>
</div>
<div class="member-grid">
<div class="member-card">
<div class="member-name lang-text" data-zh="柳家語" data-en="Liu Chia Yu">柳家語</div>
<div class="member-role lang-text" data-zh="專案統籌、採訪" data-en="Project Coordination, Interviewing">專案統籌、採訪</div>
<img src="/members/liu.jpg" class="member-image">
</div>
<div class="member-card">
<div class="member-name lang-text" data-zh="楊沁" data-en="Yang Chin">楊沁</div>
<div class="member-role lang-text" data-zh="專案統籌、採訪" data-en="Project Coordination, Interviewing">專案統籌、採訪</div>
<img src="/members/yang.jpg" class="member-image">
</div>
</div>
<!-- 修改後的成員卡片結構，使用了樣式類別 -->
<div class="member-grid">
<div class="member-card">
<div class="member-name lang-text" data-zh="曾芮歆" data-en="Tzeng Ruei Shin">曾芮歆</div>
<div class="member-role lang-text" data-zh="資料收集" data-en="Data Collection">資料收集</div>
<img src="/members/tzeng.jpg" class="member-image">
</div>
<div class="member-card">
<div class="member-name lang-text" data-zh="蘇庭湘" data-en="Su Ting Hsiang">蘇庭湘</div>
<div class="member-role lang-text" data-zh="資料收集" data-en="Data Collection">資料收集</div>
<img src="/members/su.jpg" class="member-image">
</div>
<div class="member-card">
<div class="member-name lang-text" data-zh="王薰儀" data-en="Wang Hsun Yi">王薰儀</div>
<div class="member-role lang-text" data-zh="資料收集、採訪" data-en="Data Collection, Interviewing">資料收集、採訪</div>
<img src="/members/wangshun.jpg" class="member-image">
</div>
</div>
<div class="member-grid">
<div class="member-card">
<div class="member-name lang-text" data-zh="王宇吉" data-en="Wang Yu Chi">王宇吉</div>
<div class="member-role lang-text" data-zh="資料收集、採訪" data-en="Data Collection, Interviewing">資料收集、採訪</div>
<img src="/members/wangyu.jpg" class="member-image">
</div>
<div class="member-card">
<div class="member-name lang-text" data-zh="阮瀚葦" data-en="Juan Han Wei">阮瀚葦</div>
<div class="member-role lang-text" data-zh="資料收集、採訪" data-en="Data Collection, Interviewing">資料收集、採訪</div>
<img src="/members/juan.jpg" class="member-image">
</div>
<div class="member-card">
<div class="member-name lang-text" data-zh="張翔太" data-en="Chang Shiang Tai">張翔太</div>
<div class="member-role lang-text" data-zh="資料收集" data-en="Data Collection">資料收集</div>
<img src="/members/chang.jpg" class="member-image">
</div>
</div>
<div class="member-grid">
<div class="member-card">
<div class="member-name lang-text" data-zh="賴奕辰" data-en="Lai Yi Chen">賴奕辰</div>
<div class="member-role lang-text" data-zh="視覺設計" data-en="Visual Design">視覺設計</div>
<img src="/members/lai.jpg" class="member-image">
</div>
<div class="member-card">
<div class="member-name lang-text" data-zh="王伯文" data-en="Wang Po Wen">王伯文</div>
<div class="member-role lang-text" data-zh="視覺設計" data-en="Visual Design">視覺設計</div>
<img src="/members/wangpo.jpg" class="member-image">
</div>
<div class="member-card">
<div class="member-name lang-text" data-zh="孫晟棋" data-en="Sun Cheng Chi">孫晟棋</div>
<div class="member-role lang-text" data-zh="網頁設計" data-en="Web Design">網頁設計</div>
<img src="/members/sun.jpg" class="member-image">
</div>
</div>
</section>
</div>
</main>
<div class="mobile-next-page">
<a href="bibliography.html" class="lang" data-zh="下一頁：參考文獻 ➔" data-en="Next: Bibliography ➔">下一頁：參考文獻 ➔</a>
</div>
<footer>
<div class="footer-logo">
<a href="http://globalschoolnet.org/gsncf/index.cfm"><img src="/cf2026.jpg" class="footer-image"></a>
<a href="https://www.clsh.ntpc.edu.tw"><img src="/school.png" class="footer-image"></a>
</div>
<p>© 2026 Taiwan Civilian Association Cyberfair Project</p>
</footer>
<div class="modal-overlay" id="modalOverlay">
<div class="modal-card">
<button class="modal-close" id="modalClose">×</button>
<div class="modal-body">
<div class="modal-image-container">
<img src="" alt="成員照片" id="modalImg">
</div>
<div class="modal-text-content">
<h3 class="modal-name lang-text" id="modalName" data-zh="成員姓名" data-en="Member Name">成員姓名</h3>
<p class="modal-role lang-text" id="modalRole" data-zh="職位名稱" data-en="Role">職位名稱</p>
<div class="modal-divider"></div>
<p class="modal-desc" id="modalDesc">
這裡是成員的詳細介紹文字。你可以描述他們在專案中的具體貢獻、專業背景，或是對民防議題的看法。
</p>
</div>
</div>
</div>
</div>
<script src="../script.js"></script>
</body>
</html>