添加近期活動

official-scint · Dec 1, 2023 · e926e26 · e926e26
1 parent d19ed06
commit e926e26
Show file tree

Hide file tree

Showing 8 changed files with 233 additions and 41 deletions.
diff --git a/components/navbar.html b/components/navbar.html
@@ -1,6 +1,7 @@
 <nav class="navbar">
     <ul>
         <li class="navbar-item"><a href="#about-us">關於我們</a></li>
+        <li class="navbar-item"><a href="#activity">近期活動</a></li>
         <li class="navbar-item"><a href="#clubs">合作社團</a></li>
         <li class="navbar-item"><a href="#sponsors">合作單位</a></li>
         <a target="_blank" class="navbar-item discord-button" href="https://discord.gg/7sgwT3a77Z">

diff --git a/css/global/footer.css b/css/global/footer.css
@@ -6,6 +6,10 @@ footer {
     flex-direction: column;
     padding: 1rem;
     padding-bottom: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
 }
 
 .contact-us {

diff --git a/css/global/navbar.css b/css/global/navbar.css
@@ -1,3 +1,17 @@
+.navbar {
+    -webkit-backdrop-filter:blur(0.5rem);
+    background-color:#5f6771ad;
+    box-shadow:0 0 5px #0000003d;
+    opacity: 0.8;
+    backdrop-filter: blur(1rem);
+    left:0;
+    padding:0 .4rem;
+    position: fixed;
+    right:0;
+    top:0;
+    z-index:5;
+}
+
 .navbar > ul {
     font-weight: bold;
     list-style: none;
@@ -10,7 +24,7 @@
     top: 0;
     left: 0;
     right: 0;
-    z-index: 1;
+    z-index: 6;
     overflow-x: scroll;
 }
 
@@ -25,7 +39,7 @@
 
 .discord-button {
     position: relative;
-    background-color: #3942A8;
+    background-color: #434caf;
     color: var(--font-color);
     padding: 0.5rem 3rem;
     border-radius: 0.5rem;
@@ -47,20 +61,8 @@
     margin-right: 0.7rem;
 }
 
-.discord-button::before {
-    content: "";
-    border-radius: 0.5rem;
-    border: 1px solid #AFA2A2;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    transform: scaleY(0.85) scaleX(0.96);
-}
-
 .discord-button:hover {
-    background-color: #4752c4;
+    background-color: #525bbd;
 }
 
 .discord-button {

diff --git a/css/global/style.css b/css/global/style.css
@@ -4,4 +4,19 @@
 @import "./scrollbar.css";
 @import "./utils.css";
 @import "./navbar.css";
-@import "./footer.css"
+@import "./footer.css";
+
+body {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: overlay;
+    font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei", STXihei, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #e0e2e9;
+    min-height: 100vh;
+    position: relative;
+    padding-bottom: 7rem;
+  }
diff --git a/css/home/events.css b/css/home/events.css
@@ -0,0 +1,144 @@
+.events-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    gap: 2rem;
+}
+
+.event-card {
+    padding: 1rem;
+    border-radius: 1rem;
+    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
+    background-color: #0E1133;
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    transition: 200ms;
+}
+
+.event-card:hover {
+    background-color: var(--bg-secondary-hover);
+    box-shadow: 0 0 1rem rgba(255, 255, 255, 0.2);
+}
+
+.event-card-left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.event-image {
+    height: 10rem;
+    object-fit: cover;
+    border-radius: 1rem;
+}
+
+.event-card-right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.event-title {
+    flex: 1;
+    text-align: center;
+    font-size: 1.5rem;
+    margin: 0;
+}
+
+.event-card pre {
+    margin: 0;
+}
+
+.event-buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 1rem;
+    gap: 1rem;
+    width: 100%;
+}
+
+.event-button {
+    flex: 1;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    border: none;
+    background-color: #2b2f55;
+    color: #e0e2e9;
+    text-decoration: none;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: 200ms;
+}
+
+.event-button {
+    text-align: center;
+}
+
+.event-button:hover {
+    background-color: #3c3f6d;
+}
+
+.event-details {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+@media (max-width: 1050px) {
+    .events-container {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .event-card {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .event-card-left {
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .event-card-right {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .event-title {
+        text-align: left;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .event-buttons {
+        flex-direction: row;
+        width: 100%;
+    }
+
+    .event-button {
+        flex: 1;
+    }
+
+    .event-details {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .event-image {
+        width: 100%;
+        aspect-ratio: 3 / 1;
+    }
+}
diff --git a/css/home/style.css b/css/home/style.css
@@ -5,4 +5,5 @@
 @import "./footer.css";
 @import "./sponsors.css";
 @import "./timeline.css";
-@import "./hehe.css";
+@import "./hehe.css";
+@import "./events.css";
diff --git a/index.html b/index.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="zh-tw">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link type="text/css" rel="stylesheet" href="css/global/style.css">
     <link type="text/css" rel="stylesheet" href="css/home/style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <script defer src="js/hehe.js"></script>
     <script defer src="js/home.js"></script>
@@ -16,6 +19,7 @@
 
     <title>SCINT 北臺灣學生資訊社群</title>
 </head>
+
 <body>
     <template id="navbar"></template>
     <div class="banner">
@@ -45,6 +49,8 @@ <h2>成員組成</h2>
                 <p>Loading...</p>
             </section>
         </div>
+        <h1 class="title" id="activity">近期活動</h1>
+        <div class="fade-up events-container"></div>
         <h1 class="title" id="clubs">合作社團</h1>
         <div class="clubs">
             <div class="fade-up clubs-row">
@@ -99,4 +105,5 @@ <h1 class="title" id="sponsors">合作單位</h1>
     </div>
     <template id="footer"></template>
 </body>
-</html>
+
+</html>
diff --git a/js/home.js b/js/home.js
@@ -20,28 +20,6 @@ fetch("config.json").then(response => response.json()).then(config => {
         clubCardElement.innerHTML = `<img class="club-avatar" src="${image}">`;
         clubGroupElement.appendChild(clubCardElement);
     }
-    // history
-    for (const {title, content, image} of config["history"]) {
-        break;
-        const historyCardElement = document.createElement("div");
-        historyCardElement.classList.add("tl-item");
-
-        const imageDiv = document.createElement("div");
-        imageDiv.classList.add("img");
-        const imageElement = document.createElement("img");
-        imageElement.src = image;
-        const historyTitle = document.createElement("h2");
-        historyTitle.innerText = title;
-        const historyContent = document.createElement("p");
-        historyContent.innerText = content;
-
-        imageDiv.appendChild(imageElement);
-        historyCardElement.appendChild(imageDiv);
-        historyCardElement.appendChild(historyTitle);
-        historyCardElement.appendChild(historyContent);
-
-        document.querySelector(".timeline").appendChild(historyCardElement);
-    }
     // sponsors
     const sponsorGroupElement = document.querySelector(".sponsors");
     for (const {image, url} of config["sponsors"]) {
@@ -162,6 +140,46 @@ for (const element of document.querySelectorAll('.fade-up')) {
     }).observe(element);
 }
 
+const events_container = document.querySelector('.events-container');
+
+function htmlStringToElement(html) {
+    const template = document.createElement('template');
+    html = html.trim();
+    template.innerHTML = html;
+    return template.content.firstChild;
+}
+
+// load events
+fetch("http://server.ouoc.net:20022/events")
+    .then(response => response.json())
+    .then(events => {
+        for (const event of events) {
+            const description = event.description;
+            const start_time = new Date(event.scheduled_start_time);
+            const image_url = `https://cdn.discordapp.com/guild-events/1177270339693203516/${event.image}?size=2048`;
+            const title = event.name;
+            const add_to_calendar_url = `https://www.google.com/calendar/render?action=TEMPLATE&text=${title.replace("#", "")}&dates=${start_time.toISOString().replace(/[-:]/g, "").replace(/\.\d\d\d/g, "")}/${start_time.toISOString().replace(/[-:]/g, "").replace(/\.\d\d\d/g, "")}&details=${description.replace("#", "")}&sf=true&output=xml`;
+            const event_card = htmlStringToElement(`
+            <div class="event-card">
+                <div class="event-card-left">
+                    <div class="event-details">
+                        <h2 class="event-title">${title}</h2>
+                        <pre class="event-description">${description}</pre>
+                    </div>
+                    <div class="event-buttons">
+                        <a target="_blank" href="${add_to_calendar_url}" class="event-button">添加行事曆</a>
+                    </div>
+                </div>
+                <div class="event-card-right">
+                    <img class="event-image"
+                        src="${image_url}" />
+                </div>
+            </div>
+            `);
+            events_container.appendChild(event_card);
+        }
+    });
+
 // fake logo
 const fakeLogoWidth = 447;
 const fakeLogoHeight = 78;