Merge pull request #86 from ntut-xuan/add-course-pages

Add course pages
is1ab · Mar 5, 2025 · dcb16b9 · dcb16b9
2 parents e09dc94 + f2e4679
commit dcb16b9
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 0 deletions.
diff --git a/src/course/2023_SP.tsx b/src/course/2023_SP.tsx
@@ -0,0 +1,27 @@
+export function SP_2023() {
+  return (
+    <div className="w-100">
+      <div className="py-3">
+        <iframe
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/GEPhLqwKo6g?si=q7qQfl3ZInTWN8qr"
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+        ></iframe>
+      </div>
+      <div className="py-3">
+        <img
+          className="w-50"
+          src="https://anon-tokyo.com/image?frame=17120&episode=MyGO_01"
+        ></img>
+      </div>
+      <div className="py-3">
+        <p>{"is1abCTF{We1comeT0Jo!nSP2O2S}"}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/course/2024_SP.tsx b/src/course/2024_SP.tsx
@@ -0,0 +1,50 @@
+export function SP_2024() {
+  return (
+    <div className="d-flex flex-column gap-3">
+      <h4 className="text-center">112-2 安全程式設計</h4>
+      <div className="p-3 w-100" style={{ backgroundColor: "#7a1b1b" }}>
+        <h5 className="fw-bold text-white m-0">課程簡介</h5>
+      </div>
+      <div className="py-3 d-flex flex-column gap-3">
+        <p>
+          安全程式設計是資訊安全領域中的關鍵技術。不良的「程式設計習慣」和「不考慮安全保護的程式設計」很容易導致可有心人士所利用。
+          本課程除了建立安全程式設計的基礎知識外，特別著重於同學的實務能力、漏洞測試、與安全程式開發能力。同時，透過分享最新的論文研究與相關技術報告，協助研究生在研究階段獲取最新的領域知識。
+        </p>
+        <p>
+          Security programming is a key technology in the field of information
+          security. “Bad programming habits” and “programming without security
+          consideration” can easily lead to the use of malicious people. Four
+          major themes will be explored.
+        </p>
+        <p>
+          In addition to establishing the basic knowledge of security
+          programming, this course focuses on student's practical ability,
+          vulnerability testing, and security programming development ability.
+          At the same time, by sharing novel research papers and related
+          technical reports, the students can obtain the newest and complete
+          domain knowledge in their research stage.
+        </p>
+      </div>
+      <div className="p-3 w-100" style={{ backgroundColor: "#7a1b1b" }}>
+        <h5 className="fw-bold text-white m-0">IPAS 證照通過率</h5>
+      </div>
+      <div className="py-3 d-flex flex-column gap-3">
+        <li>課程同學通過率 19/22 = 86%</li>
+      </div>
+      <div className="p-3 w-100" style={{ backgroundColor: "#7a1b1b" }}>
+        <h5 className="fw-bold text-white m-0">教學評鑑</h5>
+      </div>
+      <div className="py-3 d-flex flex-column gap-3">
+        <li>教學評鑑：4.65/5</li>
+      </div>
+      <div className="p-3 w-100" style={{ backgroundColor: "#7a1b1b" }}>
+        <h5 className="fw-bold text-white m-0">其他相關教學資源</h5>
+      </div>
+      <div className="py-3 d-flex flex-column gap-3">
+        <li>[Book] Secure Coding: Principles and Practices</li>
+        <li>[Book] Secure Coding in C and C++</li>
+        <li>[Book] Secure Programming Cookbook for C and C++</li>
+      </div>
+    </div>
+  );
+}
diff --git a/src/course/2025_SP.tsx b/src/course/2025_SP.tsx
@@ -0,0 +1,50 @@
+export function SP_2025() {
+  return (
+    <div className="d-flex flex-column gap-3">
+      <h4 className="text-center">113-2 安全程式設計</h4>
+      <div className="p-3 w-100" style={{ backgroundColor: "#7a1b1b" }}>
+        <h5 className="fw-bold text-white m-0">課程簡介</h5>
+      </div>
+      <div className="py-3 d-flex flex-column gap-3">
+        <p>
+          安全程式設計是資訊安全領域中的關鍵技術。不良的「程式設計習慣」和「不考慮安全保護的程式設計」很容易導致可有心人士所利用。
+          本課程除了建立安全程式設計的基礎知識外，特別著重於同學的實務能力、漏洞測試、與安全程式開發能力。同時，透過分享最新的論文研究與相關技術報告，協助研究生在研究階段獲取最新的領域知識。
+        </p>
+        <p>
+          Security programming is a key technology in the field of information
+          security. “Bad programming habits” and “programming without security
+          consideration” can easily lead to the use of malicious people. Four
+          major themes will be explored.
+        </p>
+        <p>
+          In addition to establishing the basic knowledge of security
+          programming, this course focuses on student's practical ability,
+          vulnerability testing, and security programming development ability.
+          At the same time, by sharing novel research papers and related
+          technical reports, the students can obtain the newest and complete
+          domain knowledge in their research stage.
+        </p>
+      </div>
+      <div className="p-3 w-100" style={{ backgroundColor: "#7a1b1b" }}>
+        <h5 className="fw-bold text-white m-0">IPAS 證照通過率</h5>
+      </div>
+      <div className="py-3 d-flex flex-column gap-3">
+        <li>[Pending]</li>
+      </div>
+      <div className="p-3 w-100" style={{ backgroundColor: "#7a1b1b" }}>
+        <h5 className="fw-bold text-white m-0">教學評鑑</h5>
+      </div>
+      <div className="py-3 d-flex flex-column gap-3">
+        <li>[Pending]</li>
+      </div>
+      <div className="p-3 w-100" style={{ backgroundColor: "#7a1b1b" }}>
+        <h5 className="fw-bold text-white m-0">其他相關教學資源</h5>
+      </div>
+      <div className="py-3 d-flex flex-column gap-3">
+        <li>[Book] Secure Coding: Principles and Practices</li>
+        <li>[Book] Secure Coding in C and C++</li>
+        <li>[Book] Secure Programming Cookbook for C and C++</li>
+      </div>
+    </div>
+  );
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -43,6 +43,9 @@ import { CHWMemberPage } from "./member/2023/CHW.tsx";
 import { RavinMemberPage } from "./member/2023/Ravin.tsx";
 import { KunjiliMemberPage } from "./member/2022/Kunjili.tsx";
 import { CliffMemberPage } from "./member/2022/Cliff.tsx";
+import { SP_2023 } from "./course/2023_SP.tsx";
+import { SP_2024 } from "./course/2024_SP.tsx";
+import { SP_2025 } from "./course/2025_SP.tsx";
 import { JunAnMemberPage } from "./member/2025/JunAn.tsx";
 import { YuericMemberPage } from "./member/2025/Yueric.tsx";
 import { RobertLiaoMemberPage } from "./member/2024/RobertLiao.tsx";
@@ -95,6 +98,9 @@ const router = createHashRouter(
       <Route path="/Calendar" element={<Meeting></Meeting>}></Route>
       <Route path="/Activities" element={<Activities></Activities>}></Route>
       <Route path="/Rules" element={<Rule></Rule>}></Route>
+      <Route path="/Course/2023/SP" element={<SP_2023></SP_2023>}></Route>
+      <Route path="/Course/2024/SP" element={<SP_2024></SP_2024>}></Route>
+      <Route path="/Course/2025/SP" element={<SP_2025></SP_2025>}></Route>
     </Route>
   )
 );