SecHub/index.html at main · vLABonline/SecHub · GitHub

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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>參與社群 - 資安社群嘉年華 2025</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
  --c1: #223744;
  --c2: #b6c83a;
  --bg1: #f7f8fa;
  --bg2: #ffffff;
  --grad: linear-gradient(135deg, #223744 0%, #b6c83a 100%);
  --text: #202124;
  --muted: #5f6368;
  --radius: 12px;
  --shadow: 0 4px 12px rgba(0,0,0,.1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Noto Sans TC', sans-serif;
  background: var(--bg1);
  color: var(--text);
  line-height: 1.7;
}
.header {
  background: var(--grad);
  color: #fff;
  text-align: center;
  padding: 64px 16px;
}
.header h1 { font-size: 2.4rem; margin-bottom: 8px; }
.header p { opacity: .92; }
.container { max-width: 1200px; margin: auto; padding: 48px 16px; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr); align-items: stretch; text-align: center;
  margin-bottom: 48px; background: var(--bg2); border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat-item { padding: 36px 8px; }
.stat-number {
  font-size: 2.1rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { color: var(--muted); font-size: 1.07rem; margin-top: 8px; }

.category { margin-bottom:56px; }
.category h3 {
  border-left:4px solid var(--c2);
  padding-left:8px;
  color:var(--c1);
  margin:32px 0 16px;
}
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:24px;
}
.card {
  background:var(--bg2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  transition:.3s;
  text-align:center;
}
.card:hover { transform:translateY(-5px); }
.logo {
  height:120px; display:flex; align-items:center; justify-content:center; background:var(--bg1);
  border-radius:var(--radius); margin-bottom:16px;
}
.logo img { max-width:80%; max-height:100px; object-fit:contain; }
.name { font-weight:700; margin-bottom:8px; }
.desc { color:var(--muted); font-size:.98rem; margin-bottom:12px; }
.links a {
  display:inline-block; margin-right:8px; padding:4px 10px;
  background:var(--bg1);
  border-radius:20px; font-size:.9rem;
  text-decoration:none; color:var(--muted);
}
.links a:hover {
  background:var(--c1); color:#fff;
}
footer {
  text-align:center; color:#fff; background:#223744;
  padding:18px 4px; margin-top:64px;
}
</style>
</head>

<body>
<header class="header">
  <h1>資安嘉年華 2025 參與社群</h1>
  <p>匯聚全台資安夥伴於沙崙基地，推動創新交流，打造資安新生態</p>
</header>

<main class="container">
  <section class="stats-grid">
    <div class="stat-item"><div class="stat-number">14+</div><div class="stat-label">參與社群</div></div>
    <div class="stat-item"><div class="stat-number">10,000+</div><div class="stat-label">動員社群人數</div></div>
    <div class="stat-item"><div class="stat-number">10+</div><div class="stat-label">社群推廣手</div></div>
    <div class="stat-item"><div class="stat-number">3</div><div class="stat-label">活動主題區</div></div>
  </section>

  <section class="category"><h3>🏛️ 政府組織</h3><div class="grid" id="gov"></div></section>
  <section class="category"><h3>🌐 國際非營利組織</h3><div class="grid" id="intl"></div></section>
  <section class="category"><h3>🎓 教育組織</h3><div class="grid" id="edu"></div></section>
  <section class="category"><h3>🔐 台灣資安社群</h3><div class="grid" id="sec"></div></section>
</main>

<footer> Copyright © 2025 資安社群嘉年華 All Rights Reserved </footer>

<script>
const img = p => `./imges/${p}.png`;
const data = {
  gov:[{n:'ACW SOUTH 數位產業署沙崙資安服務基地',d:'位於臺南沙崙智慧綠能科學城，是臺灣首座結合展示、演訓與實證功能的資安實戰基地，致力於強化產業資安防護、推動跨域合作。',i:'acw-south',link:'https://www.acw.org.tw/ACWSouth/Default.aspx?subID=1055'}],
  intl:[
    {n:'Cloud Security Alliance (CSA) 台灣分會',d:'CSA Taiwan Chapter 為全球非營利組織，成立於 2011 年，推動雲端服務安全與新興資安議題。提升雲端服務的信任度，推廣雲端安全認證 CSA STAR，透過第三方驗證建立公正標準。',i:'csa',link:'https://www.cloudsecurityalliance.org'},
    {n:'ISC2 Taipei Chapter 台灣國際認證資安專家協會',d:'本分會隸屬於全球最大非營利性資訊安全專業組織之一，致力提升資安人員專業能力與推動產業發展。聚集台灣資安專家，提供學習、交流與職涯發展平台，定期舉辦研討會、講座與工作坊，促進知識分享與合作，推動台灣資安領域持續進步。',i:'isc2',link:'https://www.isc2chapter.tw/'},
    {n:'Open Web Application Security Project (OWASP) 台灣分會',d:'OWASP Taiwan Chapter 為全球非營利組織，2017 年重啟的 OWASP 台灣分會，透過社群活動與會議推廣國際資安議題，促進國內資安社群與國際接軌，強化網頁應用程式的防禦能力與產業發展。',i:'owasp',link:'https://owasp.org/'},
    {n:'The Honeynet Project 台灣分會',d:'The Honeynet Project Taiwan Chapter 為專注於誘捕技術與資安研究的非營利組織，自 2013 年起舉辦的 HoneyCon 已成為每年超過 400 人參與的重要資安技術研討會，並透過實務課程推廣最新誘捕技術應用。',i:'honeynet',link:'http://honeynet.org/'}
  ],
  edu:[{n:'Hack The Box',d:'Hack The Box 是一個提供虛擬滲透測試環境的線上平台，讓資安愛好者與專業人士能在合法情境中實戰練習攻防技能。平台提供模擬真實攻擊場景的靶機與挑戰，並設有教育課程與 CTF 活動，協助使用者強化理論與實務能力。',i:'hackthebox',link:'https://www.hackthebox.com'}],
  sec:[
    {n:'Agile HR',d:'Agile HR 是一個以「以人為本的敏捷實踐」為核心的共學社群，聚集人資夥伴、主管與跨領域專業者，透過敏捷思維推動組織轉型與人才成長。',i:'agile-hr',link:'https://ifus.tw/agilehr'},
    {n:'AWS User Group Taiwan',d:'AWS User Group Taiwan 是台灣在地的技術交流社群，專注於 Amazon Web Services（AWS）相關技術與應用，聚集來自新創、科技、金融等領域的愛好者。',i:'aws-ug',link:'https://aws.amazon.com/tw/events/developer-events/aws-user-group/',fb:'https://www.facebook.com/groups/awsugtw'},
    {n:'DevSecOps Taiwan',d:'DevSecOps Taiwan 成立於 2023 年 4 月，是專注於推廣 DevSecOps 與 SSDLC 文化與實務的專業技術社群，倡導將安全融入開發與營運全流程，強化「安全左移」思維。',i:'devsecops',link:'https://www.devsecops.com.tw/'},
    {n:'GDG Kaohsiung',d:'Google Developer Group Kaohsiung 前身是 Android 高雄開發者社群，誕生於 2014 年 3 月，我們每年定期舉辦 Build with AI、 Google I/O Extended、DevFest 和 TOOCON 天黑黑月會，希望讓高雄對軟體開發有興趣的朋友能夠有實體交流的機會，歡迎加入 Google Developer Groups Kaohsiung 粉絲專業頁和 GDG Kaohsiung 臉書社團，掌握最新活動資訊。',i:'gdg-kaohsiung',link:'https://gdg.community.dev/gdg-kaohsiung/',fb:'https://www.facebook.com/GDGKaohsiung'},
    {n:'Taiwan Agile Tribe (TAT) 台灣敏捷部落',d:'台灣敏捷部落（Taiwan Agile Tribe, TAT）成立於 2019 年，是以線上分享為主的敏捷社群，每月邀請專家舉辦講座，並以主題社群機制聚集有共同興趣的成員，形成自組織學習網絡。',i:'tat',link:'https://taiwanagiletribe.com',fb:'https://www.facebook.com/groups/taiwanagiletribe'},
    {n:'TWCSA 台灣數位安全聯盟',d:'台灣數位安全聯盟（TWCSA）成立於 2013 年，前身為「台灣雲端安全聯盟」，致力推動雲端與數位安全技術發展、國際交流與人才培育，協助國內接軌國際資安標準。',i:'twcsa',link:'https://www.twcsa.org/',fb:'https://www.facebook.com/TaiwanCSA'},
    {n:'OCF 開放文化基金會',d:'開放文化基金會（OCF）是非營利組織，致力於推廣開放科技與跨界合作，連結科技社群與公私領域，推動數位人權與透明共創的公民社會。',i:'ocf',link:'https://ocf.tw/',fb:'https://www.facebook.com/www.ocf.tw'},
    {n:'vLAB Online 台灣路由網路實驗中心',d:'vLAB 是由資安從業者、研究員與技術愛好者組成的非營利社群，致力於推動資安知識共享與實務連結。社群重視實作與開放交流，關注資安事件、AI 與安全發展，透過互助學習與經驗累積，打造可信任且具韌性的交流網絡，促進跨域合作與創新。',i:'vlab',link:'https://hackmd.io/@vLAB/rkVcjSp06',fb:'https://www.facebook.com/vLABonline/',ig:'https://www.instagram.com/vlab_ict',tr:'https://www.threads.com/@vlab_ict',lk:'https://www.linkedin.com/company/vlabtw/'},
    {n:'智慧時代新生活AI & 資安玩家村',d:'在萬物聯網的智慧時代，科技深刻改變生活與使用習慣，我們以使用者體驗為核心，持續宣導資訊安全的重要性，讓科技應用更安全、更安心。',i:'smartera',link:'https://linktr.ee/OpenBlue.Link',fb:'https://www.facebook.com/SmartEraNewLife',ig:'https://www.instagram.com/SmartEraNewLife',tr:'https://www.threads.com/@smarteranewlife'},
    {n:'網通人（專管網路通不通）',d:'網通人是專注於網路技術與實務交流的 Facebook 社群，聚集網管工程師、技術愛好者與從業人員，分享網通知識、故障排除經驗與最新產業動態，共同提升專業與技術應用能力。',i:'netman',fb:'https://www.facebook.com/groups/472315702799001/?locale=zh_TW'}
  ]
};

function render(list,id){
  const el=document.getElementById(id);
  el.innerHTML=list.map(o=>`
  <div class='card'>
    <div class='logo'>
      <img loading="lazy" src='${img(o.i)}' alt='${o.n}' onerror="this.src='./imges/placeholder.png'">
    </div>
    <div class='name'>${o.n}</div>
    <div class='desc'>${o.d}</div>
    <div class='links'>
      ${o.link ? `<a href="${o.link}" target="_blank" rel="noopener noreferrer">官網</a>` : ''}
      ${o.fb ? `<a href="${o.fb}" target="_blank" rel="noopener noreferrer">Facebook</a>` : ''}
      ${o.ig ? `<a href="${o.ig}" target="_blank" rel="noopener noreferrer">Instagram</a>` : ''}
      ${o.tr ? `<a href="${o.tr}" target="_blank" rel="noopener noreferrer">Threads</a>` : ''}
      ${o.lk ? `<a href="${o.lk}" target="_blank" rel="noopener noreferrer">Linkedin</a>` : ''}
    </div>
  </div>`).join('');
}

document.addEventListener('DOMContentLoaded',()=>{
  render(data.gov,'gov');
  render(data.intl,'intl');
  render(data.edu,'edu');
  render(data.sec,'sec');
  document.getElementById('communityCount').textContent=(data.gov.length+data.intl.length+data.edu.length+data.sec.length)+'+';
});
</script>
</body>
</html>