CampusSyncUp · Vianpyro · Jan 13, 2025 · Jan 13, 2025 · Jan 13, 2025
diff --git a/src/assets/bell.svg b/src/assets/bell.svg
diff --git a/src/assets/copy-plus.svg b/src/assets/copy-plus.svg
diff --git a/src/assets/feed.svg b/src/assets/feed.svg
diff --git a/src/assets/heart-handshake.svg b/src/assets/heart-handshake.svg
diff --git a/src/assets/message.svg b/src/assets/message.svg
diff --git a/src/assets/search.svg b/src/assets/search.svg
diff --git a/src/assets/user-circle.svg b/src/assets/user-circle.svg
diff --git a/src/components/LoadingSpinner.astro b/src/components/LoadingSpinner.astro
@@ -10,6 +10,7 @@ const { size = "10px" } = Astro.props;
         border: calc(var(--spinner-size) / 2) solid #f3f3f375;
         border-radius: 50%;
         border-top: calc(var(--spinner-size) / 2) solid white;
+        box-sizing: content-box;
         height: var(--spinner-size);
         width: var(--spinner-size);
     }

diff --git a/src/components/Post.astro b/src/components/Post.astro
@@ -0,0 +1,83 @@
+---
+import Icon from "./Icon.astro";
+
+export interface Props {
+    title: string;
+    description: string;
+}
+
+const { title, description } = Astro.props as Props;
+
+const randomMinutes = Math.floor(Math.random() * 60);
+const randomHours = Math.floor(Math.random() * 24);
+const randomDays = Math.floor(Math.random() * 7);
+
+const now = new Date();
+now.setMinutes(now.getMinutes() - randomMinutes);
+now.setHours(now.getHours() - randomHours);
+now.setDate(now.getDate() - randomDays);
+
+const formattedDate = now.toLocaleString();
+---
+
+<Fragment>
+    <article>
+        <div>
+            <img src="https://thispersondoesnotexist.com/" alt="Author" />
+            <figcaption>Username</figcaption>
+        </div>
+        <div>
+            <h2>{title}</h2>
+            <p>{description}</p>
+            <a href="#">Read more</a>
+            <img src="https://picsum.photos/200" alt="" />
+        </div>
+        <time>{formattedDate}</time>
+        <div>
+            <span>Like</span>
+            <span>Comment</span>
+            <span>Repost</span>
+            <span>Send</span>
+        </div>
+    </article>
+</Fragment>
+
+<style>
+    * {
+        color: black;
+    }
+
+    article {
+        display: flex;
+        gap: 1rem;
+        padding: 1rem;
+        border-top: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        border-radius: 0.5rem;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    article > div:first-child {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    article > div:first-child > img {
+        border-radius: 50%;
+        width: 2rem;
+        height: 2rem;
+    }
+
+    article > div:nth-child(2) {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    article > div:last-child {
+        display: flex;
+        justify-content: space-between;
+    }
+</style>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -0,0 +1,74 @@
+---
+import Icon from "../components/Icon.astro";
+import "../styles/global.css";
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/ets.svg" />
+        <meta name="generator" content={Astro.generator} />
+        <title>{title}</title>
+    </head>
+    <body>
+        <main>
+            <slot />
+        </main>
+        <nav>
+            <ul>
+                <li>
+                    <a href="feed.html" title="Feed">
+                        <Icon icon="feed" />
+                    </a>
+                </li>
+                <li>
+                    <a href="search.html" title="Search">
+                        <Icon icon="search" />
+                    </a>
+                </li>
+                <li>
+                    <a href="post.html" title="Post">
+                        <Icon icon="copy-plus" />
+                    </a>
+                </li>
+                <li>
+                    <a href="matches.html" title="Matches">
+                        <Icon icon="heart-handshake" />
+                    </a>
+                </li>
+                <li>
+                    <a href="profile.html" title="Profile">
+                        <Icon icon="user-circle" />
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </body>
+</html>
+
+<style>
+    main {
+        background-color: var(--font-color);
+        flex: 1;
+        overflow-y: auto;
+        width: 100%;
+    }
+
+    nav {
+        width: 100%;
+    }
+
+    nav > ul {
+        background-color: var(--font-color);
+        display: flex;
+        justify-content: space-around;
+    }
+
+    nav > ul > li {
+        display: inline;
+    }
+</style>
diff --git a/src/layouts/Layout.astro → src/layouts/MenuLayout.astro b/src/layouts/Layout.astro → src/layouts/MenuLayout.astro
diff --git a/src/pages/feed.astro b/src/pages/feed.astro
@@ -0,0 +1,86 @@
+---
+import Icon from "../components/Icon.astro";
+import Post from "../components/Post.astro";
+import MainLayout from "../layouts/MainLayout.astro";
+
+const components = [
+    {
+        title: "This is a post",
+        description: "This is the prototype for the feed.",
+    },
+    {
+        title: "This is another post",
+        description: "The feed will be like LinkedIn's feed.",
+        date: "2021-10-02",
+    },
+    {
+        title: "This is a third post",
+        description: "Users will share their projects, thoughts, and more.",
+        date: "2021-10-03",
+    },
+    {
+        title: "This is a fourth post",
+        description: "Users will be able to like, comment, and share posts.",
+    },
+];
+---
+
+<MainLayout title="Feed">
+    <nav>
+        <span><Icon icon="ets" /></span>
+        <div>
+            <span><Icon icon="bell" /></span>
+            <span><Icon icon="message" /></span>
+        </div>
+    </nav>
+    <div id="feed-content">
+        {
+            components.map((component) => (
+                <Post
+                    title={component.title}
+                    description={component.description}
+                    date={component.date}
+                />
+            ))
+        }
+    </div>
+</MainLayout>
+
+<style>
+    #feed-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        gap: 1rem;
+        overflow-y: auto;
+    }
+
+    * {
+        color: black;
+    }
+
+    #feed {
+        flex: 1;
+    }
+
+    nav {
+        display: flex;
+        justify-content: space-between;
+        height: 2rem;
+        position: sticky;
+        top: 0;
+        background-color: white;
+    }
+
+    nav > span:first-child {
+        width: 2rem;
+        height: 2rem;
+    }
+
+    nav > div {
+        display: flex;
+        justify-content: space-between;
+        gap: 1rem;
+    }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,13 +1,10 @@
 ---
-import Icon from "../components/icon.astro";
-import Layout from "../layouts/Layout.astro";
+import Icon from "../components/Icon.astro";
+import MenuLayout from "../layouts/MenuLayout.astro";
 import LoadingSpinner from "../components/LoadingSpinner.astro";
-
-// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
-// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
 ---
 
-<Layout title="Welcome to TindÉTS">
+<MenuLayout title="Welcome to TindÉTS">
     <div id="loading-screen">
         <div id="logo-ets">
             <Icon icon="ets" />
@@ -20,7 +17,7 @@ import LoadingSpinner from "../components/LoadingSpinner.astro";
             window.location.href = "login.html";
         }, 1000);
     </script>
-</Layout>
+</MenuLayout>
 
 <style>
     #loading-screen {

diff --git a/src/pages/login.astro b/src/pages/login.astro
@@ -1,9 +1,9 @@
 ---
-import Icon from "../components/icon.astro";
-import Layout from "../layouts/Layout.astro";
+import Icon from "../components/Icon.astro";
+import MenuLayout from "../layouts/MenuLayout.astro";
 ---
 
-<Layout title="Login">
+<MenuLayout title="Login">
     <div id="login-page">
         <div id="logo-ets">
             <Icon icon="ets" />
@@ -16,19 +16,17 @@ import Layout from "../layouts/Layout.astro";
         </form>
         <a>Need help?</a>
     </div>
-</Layout>
+</MenuLayout>
 
 <script>
-    document.addEventListener("DOMContentLoaded", () => {
-        const form = document.getElementById("login-form");
+    const form = document.getElementById("login-form");
 
-        if (form) {
-            form.addEventListener("submit", (event) => {
-                event.preventDefault();
-                alert("Redirecting to the feed...");
-            });
-        }
-    });
+    if (form) {
+        form.addEventListener("submit", (event) => {
+            event.preventDefault();
+            window.location.href = "feed.html";
+        });
+    }
 </script>
 
 <style>
@@ -48,7 +46,6 @@ import Layout from "../layouts/Layout.astro";
     }
 
     input {
-        box-sizing: border-box;
         width: 90vw;
         padding: 1rem;
         border: 1px solid var(--font-color);

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -9,6 +9,11 @@
     margin: 0;
     padding: 0;
     transition-duration: .5s;
+    box-sizing: border-box;
+}
+
+a {
+    text-decoration: none;
 }
 
 body {
@@ -20,3 +25,7 @@ body {
     margin: 0;
     width: 100%;
 }
+
+span {
+    height: fit-content;
+}