first commit

hieyou1 · Jun 21, 2024 · cb9df64 · cb9df64
commit cb9df64
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 0 deletions.
diff --git a/bootstrap.bundle.min.js b/bootstrap.bundle.min.js
diff --git a/bootstrap.min.css b/bootstrap.min.css
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Startalk Showcase</title>
+    <link href="bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" />
+    <link href="style.css" rel="stylesheet" />
+    <link src="startalk.png" rel="favicon" />
+</head>
+
+<body>
+    <h1 id="title">STARTALK Project Showcase</h1>
+    <div id="showcase-container">
+        Loading...
+    </div>
+    <script src="bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"></script>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/projects.json b/projects.json
@@ -0,0 +1,79 @@
+[
+    {
+        "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+        "title": "White Snake",
+        "description": "Bai She is a story of x, y, and z.",
+        "author": {
+            "hanzi": "李迈克",
+            "pinyin": "Li Mai Ke",
+            "english": "Mikey E"
+        },
+        "url": "https://html-10316539.codehs.me/index.html"
+    },
+    {
+        "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+        "title": "White Snake",
+        "description": "Bai She is a story of x, y, and z.",
+        "author": {
+            "hanzi": "李迈克",
+            "pinyin": "Li Mai Ke",
+            "english": "Mikey E"
+        },
+        "url": "https://html-10316539.codehs.me/index.html"
+    },
+    {
+        "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+        "title": "White Snake",
+        "description": "Bai She is a story of x, y, and z.",
+        "author": {
+            "hanzi": "李迈克",
+            "pinyin": "Li Mai Ke",
+            "english": "Mikey E"
+        },
+        "url": "https://html-10316539.codehs.me/index.html"
+    },
+    {
+        "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+        "title": "White Snake",
+        "description": "Bai She is a story of x, y, and z.",
+        "author": {
+            "hanzi": "李迈克",
+            "pinyin": "Li Mai Ke",
+            "english": "Mikey E"
+        },
+        "url": "https://html-10316539.codehs.me/index.html"
+    },
+    {
+        "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+        "title": "White Snake",
+        "description": "Bai She is a story of x, y, and z.",
+        "author": {
+            "hanzi": "李迈克",
+            "pinyin": "Li Mai Ke",
+            "english": "Mikey E"
+        },
+        "url": "https://html-10316539.codehs.me/index.html"
+    },
+    {
+        "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+        "title": "White Snake",
+        "description": "Bai She is a story of x, y, and z.",
+        "author": {
+            "hanzi": "李迈克",
+            "pinyin": "Li Mai Ke",
+            "english": "Mikey E"
+        },
+        "url": "https://html-10316539.codehs.me/index.html"
+    },
+    {
+        "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+        "title": "White Snake",
+        "description": "Bai She is a story of x, y, and z.",
+        "author": {
+            "hanzi": "李迈克",
+            "pinyin": "Li Mai Ke",
+            "english": "Mikey E"
+        },
+        "url": "https://html-10316539.codehs.me/index.html"
+    }
+]
diff --git a/script.js b/script.js
@@ -0,0 +1,46 @@
+const makeTooltip = (text, tooltip) => {
+    let elem = document.createElement("span");
+    elem.setAttribute("data-bs-toggle", "tooltip");
+    elem.setAttribute("data-bs-title", tooltip);
+    elem.innerText = text;
+    new bootstrap.Tooltip(elem);
+    return elem;
+}
+
+window.onload = async () => {
+    let projects = await (await fetch("/projects.json")).json();
+    document.querySelector("#showcase-container").innerText = "";
+    for (let i of projects) {
+        let card = document.createElement("div");
+        card.classList.add("card", "project");
+        let img = document.createElement("img");
+        img.src = i.picture;
+        img.classList.add("card-img-top");
+        card.appendChild(img);
+        let cardBody = document.createElement("div");
+        cardBody.classList.add("card-body");
+        let title = document.createElement("h5");
+        title.classList.add("card-title");
+        title.innerText = i.title;
+        cardBody.appendChild(title);
+        let subtitle = document.createElement("h6");
+        subtitle.classList.add("card-subtitle", "mb-2", "text-body-secondary");
+        subtitle.appendChild(makeTooltip(i.author.hanzi, i.author.pinyin));
+        let subtitleEng = document.createElement("span");
+        subtitleEng.innerText = ` (${i.author.english})`;
+        subtitle.appendChild(subtitleEng);
+        cardBody.appendChild(subtitle);
+        let desc = document.createElement("p");
+        desc.classList.add("card-text");
+        desc.innerText = i.description;
+        cardBody.appendChild(desc);
+        let open = document.createElement("a");
+        open.classList.add("btn", "btn-primary");
+        open.href = i.url;
+        open.target = "_blank";
+        open.innerText = "Open Project";
+        cardBody.appendChild(open);
+        card.appendChild(cardBody);
+        document.querySelector("#showcase-container").appendChild(card);
+    }
+};
diff --git a/startalk.png b/startalk.png
diff --git a/style.css b/style.css
@@ -0,0 +1,26 @@
+body {
+    height: 100%;
+    width: 100%;
+}
+
+#title {
+    margin: 1rem;
+    text-align: center;
+}
+
+#showcase-container {
+    margin: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+[data-bs-toggle=tooltip] {
+    text-decoration: underline;
+    text-decoration-style: dotted;
+}
+
+.project {
+    width: 18rem;
+    margin: 1rem;
+}