Implement: Rule page

src/index.css

@@ -84,6 +84,15 @@ td, li {
     margin: 0;
 }
 
+.rule ul li {
+    color: white;
+    margin: 0;
+    font-size: calc(0.8rem + .3vw);
+    font-weight: 300;
+    line-height: 2;
+    margin: 0;
+}
+
 .member p, td, th {
     font-size: calc(0.7rem + .3vw) !important;
 }

src/main.tsx

@@ -15,6 +15,7 @@ import { Experience } from './page/Experience.tsx'
 import { Record } from './page/Records.tsx'
 import { News } from './page/News.tsx'
 import { Activities } from './page/Activities.tsx'
+import { Rule } from './page/Rule.tsx'
 
 const router = createHashRouter(
   createRoutesFromElements(
@@ -29,6 +30,7 @@ const router = createHashRouter(
         <Route path='/Record' element={<Record></Record>}></Route>
         <Route path='/News' element={<News></News>}></Route>
         <Route path='/Activities' element={<Activities></Activities>}></Route>
+        <Route path='/Rules' element={<Rule></Rule>}></Route>
       </Route>
   )
 )

src/page/Rule.tsx

@@ -0,0 +1,54 @@
+export function Rule(){
+    return (
+        <div className="rule">
+            <h4 className="text-center fw-bold">名額限制（113 年）</h4>
+            <ul>
+                <li>4 位資安碩士學位（已額滿）</li>
+                <li>2 位資訊工程系（已額滿）</li>
+                <li>2 組專題大學生</li>
+            </ul>
+            <hr></hr>
+            <h4 className="text-center fw-bold">預先具備能力（加入前）</h4>
+            <ul>
+                <li>具資安比賽經驗者或資安證照者佳</li>
+                <li>具程式競賽經驗者佳</li>
+                <li>具研究經驗（論文發表）者佳</li>
+                <li>若無上述經驗，須具備「積極、學習熱忱」特質</li>
+            </ul>
+            <hr></hr>
+            <h4 className="text-center fw-bold">預先具備能力（加入後）</h4>
+            <ul>
+                <li>滿足國立臺北科技大學資訊工程系修課及畢業門檻</li>
+                <li>至少完成「一篇」國際研討會論文並完成「投稿」動作</li>
+                <li>校內補助的資安證照取得</li>
+                <li>參加資安競賽與相關培訓計畫</li>
+            </ul>
+            <hr></hr>
+            <h4 className="text-center fw-bold">獎助金相關</h4>
+            <ul>
+                <li>（主）國科會計畫</li>
+                <li>（輔）產學合作案、課程獎助金</li>
+                <li>（私人）證照補助、參賽補助</li>
+            </ul>
+            <hr></hr>
+            <h4 className="text-center fw-bold">老師重視</h4>
+            <ul>
+                <li>學術論理</li>
+                <li>誠實（嚴禁考試作弊、作業抄襲、論文報告造假...等）</li>
+                <li>實驗室相關安全與衛生規範（用電安全、環境安全、整潔）</li>
+                <li>實驗室參與度*</li>
+                <li>學校以及實驗室嚴禁挖礦。</li>
+            </ul>
+            <hr></hr>
+            <h4 className="text-center fw-bold">實驗室參與度之定義</h4>
+            <ul>
+                <li>協助實驗室運作</li>
+                <li>協助國科會計畫</li>
+                <li>增強資訊安全領域相關技能</li>
+                <li>參加資安相關活動</li>
+                <li>知識傳承（協助學弟妹）</li>
+                <li>參與 Group Meeting（每週固定）及個人進度約談（非固定）</li>
+            </ul>
+        </div>
+    )
+}