start backend

12 files changed, 515 insertions, 40 deletions

diff --git a/public/css/header.css b/public/css/header.css
index 77f0d1e..a491f33 100644
--- a/public/css/header.css
+++ b/public/css/header.css
@@ -1,12 +1,17 @@
 #header {
     height: 3.5em;
     background-color: white;
-    position: absolute;
+    position: fixed;
     width: 100vw;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 16px rgba(0, 0, 0, .05);
     display: flex;
     align-items: center;
     justify-content: space-between;
+    z-index: 5;
+}
+
+.spacer {
+    margin-bottom: 5em;
 }
 
 #header .logo {
@@ -34,7 +39,17 @@
     color: #606770;
 }
 
+#header .buttons a:hover {
+    background-color: #dddfe2;
+}
+
 .selected {
     color: #1778f2 !important;
     border-bottom: 3px solid #1778f2;
+}
+
+#header .pfp, #header .pfp img {
+    position: absolute;
+    right: 1em;
+    top: .5em;
 }
\ No newline at end of file
diff --git a/public/css/home.css b/public/css/home.css
index 70db81f..de0c2d0 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -1,3 +1,177 @@
 body {
     background-color: #f0f2f5;
+}
+
+#posts {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.post, .create {
+    width: 40em;
+    height: fit-content;
+    background-color: white;
+    border-radius: 10px;
+    padding: 15px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
+    margin-bottom: 1.5em;
+}
+
+.post {
+    padding-bottom: 0;
+}
+
+.create {
+    display: flex;
+    flex-direction: row;
+}
+
+.create button {
+    all: unset;
+    background-color: #f0f2f5;
+    border-radius: 3em;
+    margin-left: 1em;
+    flex: 1;
+}
+
+.create button:hover {
+    background-color: #e4e6e8;
+    cursor: pointer;
+}
+
+.create button  p {
+    margin-left: 1em;
+    font-size: 18px;
+}
+
+.postheader {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: .5em;
+}
+
+.postbuttons {
+    display: flex;
+    flex-direction: row;
+}
+
+.postbuttons>span {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 7px;
+    border-radius: 5px;
+    color: #606770;
+    margin: 3px
+}
+
+.postbuttons>span:hover {
+    background-color: #e4e6e8;
+}
+
+.postname {
+    margin-left: 1em;
+    display: flex;
+    flex-direction: column;
+}
+
+.icons {
+    background-image: url('data:image/png;base64,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');
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    background-size: auto;
+    background-repeat: no-repeat;
+    margin-right: .5em;
+    filter: invert(39%) sepia(21%) saturate(200%) saturate(109.5%) hue-rotate(174deg) brightness(94%) contrast(86%);
+}
+
+.blue {
+    filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%);
+}
+
+.like {
+    background-position: 0px -132px;
+}
+
+.comm {
+    background-position: 0px -113px;
+}
+
+.createpost {
+    position: relative;
+    background-color: white;
+    width: 450px;
+    padding: 20px;
+    border-radius: .5em;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
+}
+
+.createpost .postheader {
+    margin-top: 20px;
+}
+
+.createpost textarea {
+    border: none;
+    resize: none;
+    outline: none;
+    font-family: sfpro;
+    font-size: 24px;
+    margin-top: 10px;
+    width: 100%;
+    height: 120px;
+    margin-bottom: 20px;
+}
+
+.createpost>span {
+    margin-top: -10px;
+}
+
+.primary {
+    margin: 0;
+    width: calc(100% - 20px);
+    font-family: sfprobold;
+    height: 15px;
+}
+
+.close {
+    top: 1em;
+    right: 1em;
+}
+
+.comment {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+}
+
+.comment>span {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+    background-color: #f0f2f5;
+    border-radius: 10px;
+    padding: 10px;
+    padding-right: 10px;
+}
+
+.larger {
+    font-size: 18px;
+}
+
+.newcomment {
+    display: flex;
+    flex-direction: row;
+}
+
+#comments input {
+    all: unset;
+    padding: 10px;
+    border-radius: 10px;
+    width: calc(100% - 20px);
+    background-color: #f0f2f5;
+    font-family: sfpro;
 }
\ No newline at end of file
diff --git a/public/css/main.css b/public/css/main.css
index 8fa4b85..9d2fe1d 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -56,10 +56,22 @@ body {
 }
 
 .stext {
+    font-family: sfpro;
     font-size: 10px;
 }
 
+.mtext {
+    font-family: sfpro;
+    font-size: 15px;
+}
+
+.ltext {
+    font-family: sfpro;
+    font-size: 22px;
+}
+
 .ctext {
+    display: block;
     font-family: sfpro;
     text-align: center;
 }
@@ -251,4 +263,24 @@ footer {
 .hidden {
     visibility: hidden;
     pointer-events: none;
+}
+
+.pfp, .pfp img {
+    display: block;
+    width: 2.5em;
+    height: 2.5em;
+    border-radius: 3em;
+    background-color: #e4e6e8;
+    flex-shrink: 0;
+}
+
+.nb {
+    margin-bottom: 0;
+}
+
+form {
+    all: unset;
+    border-radius: 10px;
+    margin-left: 10px;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/public/css/people.css b/public/css/people.css
new file mode 100644
index 0000000..70db81f
--- /dev/null
+++ b/public/css/people.css
@@ -0,0 +1,3 @@
+body {
+    background-color: #f0f2f5;
+}
\ No newline at end of file
diff --git a/public/css/profile.css b/public/css/profile.css
new file mode 100644
index 0000000..70db81f
--- /dev/null
+++ b/public/css/profile.css
@@ -0,0 +1,3 @@
+body {
+    background-color: #f0f2f5;
+}
\ No newline at end of file
diff --git a/public/home.html b/public/home.html
index 3fb3df9..6035fc4 100644
--- a/public/home.html
+++ b/public/home.html
@@ -2,28 +2,14 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="css/header.css">
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/home.css">
-    <link rel="stylesheet" href="css/header.css">
     <title>XSSBook - Home</title>
 </head>
 <body>
-    <div id="header">
-        <span class="logo">xssbook</span>
-        <div class="buttons">
-            <a id="home" class="selected" href="home">
-                <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
-                    <path d="M25.825 12.29C25.824 12.289 25.823 12.288 25.821 12.286L15.027 2.937C14.752 2.675 14.392 2.527 13.989 2.521 13.608 2.527 13.248 2.675 13.001 2.912L2.175 12.29C1.756 12.658 1.629 13.245 1.868 13.759 2.079 14.215 2.567 14.479 3.069 14.479L5 14.479 5 23.729C5 24.695 5.784 25.479 6.75 25.479L11 25.479C11.552 25.479 12 25.031 12 24.479L12 18.309C12 18.126 12.148 17.979 12.33 17.979L15.67 17.979C15.852 17.979 16 18.126 16 18.309L16 24.479C16 25.031 16.448 25.479 17 25.479L21.25 25.479C22.217 25.479 23 24.695 23 23.729L23 14.479 24.931 14.479C25.433 14.479 25.921 14.215 26.132 13.759 26.371 13.245 26.244 12.658 25.825 12.29"></path>
-                </svg>
-            </a>
-            <a id="people" href="people">
-                <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
-                    <path d="M10.5 4.5c-2.272 0-2.75 1.768-2.75 3.25C7.75 9.542 8.983 11 10.5 11s2.75-1.458 2.75-3.25c0-1.482-.478-3.25-2.75-3.25zm0 8c-2.344 0-4.25-2.131-4.25-4.75C6.25 4.776 7.839 3 10.5 3s4.25 1.776 4.25 4.75c0 2.619-1.906 4.75-4.25 4.75zm9.5-6c-1.41 0-2.125.841-2.125 2.5 0 1.378.953 2.5 2.125 2.5 1.172 0 2.125-1.122 2.125-2.5 0-1.659-.715-2.5-2.125-2.5zm0 6.5c-1.999 0-3.625-1.794-3.625-4 0-2.467 1.389-4 3.625-4 2.236 0 3.625 1.533 3.625 4 0 2.206-1.626 4-3.625 4zm4.622 8a.887.887 0 00.878-.894c0-2.54-2.043-4.606-4.555-4.606h-1.86c-.643 0-1.265.148-1.844.413a6.226 6.226 0 011.76 4.336V21h5.621zm-7.122.562v-1.313a4.755 4.755 0 00-4.749-4.749H8.25A4.755 4.755 0 003.5 20.249v1.313c0 .518.421.938.937.938h12.125c.517 0 .938-.42.938-.938zM20.945 14C24.285 14 27 16.739 27 20.106a2.388 2.388 0 01-2.378 2.394h-5.81a2.44 2.44 0 01-2.25 1.5H4.437A2.44 2.44 0 012 21.562v-1.313A6.256 6.256 0 018.25 14h4.501a6.2 6.2 0 013.218.902A5.932 5.932 0 0119.084 14h1.861z"></path>
-                </svg>
-            </a>
-        </div>
-    </div>
-    <p>
-        b
-    </p>
-</body>
\ No newline at end of file
+    <script src="./js/main.js"></script>
+    <script src="./js/header.js"></script>
+    <script src="./js/home.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/js/header.js b/public/js/header.js
new file mode 100644
index 0000000..24643d6
--- /dev/null
+++ b/public/js/header.js
@@ -0,0 +1,25 @@
+function header(home, people) {
+    const html = `
+    <div id="header">
+        <span class="logo">xssbook</span>
+        <div class="buttons">
+            <a id="home" ${home ? 'class="selected"' : ''} href="home">
+                <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
+                    <path d="M25.825 12.29C25.824 12.289 25.823 12.288 25.821 12.286L15.027 2.937C14.752 2.675 14.392 2.527 13.989 2.521 13.608 2.527 13.248 2.675 13.001 2.912L2.175 12.29C1.756 12.658 1.629 13.245 1.868 13.759 2.079 14.215 2.567 14.479 3.069 14.479L5 14.479 5 23.729C5 24.695 5.784 25.479 6.75 25.479L11 25.479C11.552 25.479 12 25.031 12 24.479L12 18.309C12 18.126 12.148 17.979 12.33 17.979L15.67 17.979C15.852 17.979 16 18.126 16 18.309L16 24.479C16 25.031 16.448 25.479 17 25.479L21.25 25.479C22.217 25.479 23 24.695 23 23.729L23 14.479 24.931 14.479C25.433 14.479 25.921 14.215 26.132 13.759 26.371 13.245 26.244 12.658 25.825 12.29"></path>
+                </svg>
+            </a>
+            <a id="people" ${people ? 'class="selected"' : ''} href="people">
+                <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
+                    <path d="M10.5 4.5c-2.272 0-2.75 1.768-2.75 3.25C7.75 9.542 8.983 11 10.5 11s2.75-1.458 2.75-3.25c0-1.482-.478-3.25-2.75-3.25zm0 8c-2.344 0-4.25-2.131-4.25-4.75C6.25 4.776 7.839 3 10.5 3s4.25 1.776 4.25 4.75c0 2.619-1.906 4.75-4.25 4.75zm9.5-6c-1.41 0-2.125.841-2.125 2.5 0 1.378.953 2.5 2.125 2.5 1.172 0 2.125-1.122 2.125-2.5 0-1.659-.715-2.5-2.125-2.5zm0 6.5c-1.999 0-3.625-1.794-3.625-4 0-2.467 1.389-4 3.625-4 2.236 0 3.625 1.533 3.625 4 0 2.206-1.626 4-3.625 4zm4.622 8a.887.887 0 00.878-.894c0-2.54-2.043-4.606-4.555-4.606h-1.86c-.643 0-1.265.148-1.844.413a6.226 6.226 0 011.76 4.336V21h5.621zm-7.122.562v-1.313a4.755 4.755 0 00-4.749-4.749H8.25A4.755 4.755 0 003.5 20.249v1.313c0 .518.421.938.937.938h12.125c.517 0 .938-.42.938-.938zM20.945 14C24.285 14 27 16.739 27 20.106a2.388 2.388 0 01-2.378 2.394h-5.81a2.44 2.44 0 01-2.25 1.5H4.437A2.44 2.44 0 012 21.562v-1.313A6.256 6.256 0 018.25 14h4.501a6.2 6.2 0 013.218.902A5.932 5.932 0 0119.084 14h1.861z"></path>
+                </svg>
+            </a>
+        </div>
+        <a class="pfp" id="profile" hreF="profile">
+            
+        </a>
+    </div>
+    <div class="spacer"></div>
+    `
+
+    add(html, 'header')
+}
\ No newline at end of file
diff --git a/public/js/home.js b/public/js/home.js
new file mode 100644
index 0000000..289ce9b
--- /dev/null
+++ b/public/js/home.js
@@ -0,0 +1,207 @@
+function parseDate(date) {
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  
+    return months[date.getUTCMonth()] + ' ' + date.getUTCDate() + ', ' + date.getUTCFullYear() + ' ' + date.toLocaleTimeString();
+  }
+
+function parseComment(data) {
+    const html = `
+    <div class="comment">
+        <a class="pfp">
+        
+        </a>
+        <span>
+            <span class="bold mtext">${data.firstname + ' ' + data.lastname}</span>
+            <p class="mtext">${data.content}</p>
+        </span>
+    </div>
+    `
+    return html
+}
+
+function parsePost(post, likes) {
+    const html = `
+    <div class="post" postid=${post.id}>
+        <div class="postheader">
+            <a class="pfp">
+                
+            </a>
+            <div class="postname">
+                <span class="bold">${post.author.firstname + ' ' + post.author.lastname}</span>
+                <span class="gtext mtext">${parseDate(new Date(post.time))}</span>
+            </div>
+        </div>
+        <p class="mtext">
+            ${post.content}
+        </p>
+        <span class="gtext mtext">
+                ${post.likes} Likes
+        </span>
+        <div class="fullline nb"></div>
+        <div class="postbuttons">
+            <span onclick="like(this)">
+                <i class="icons like ${likes.includes(post.id) ? 'blue' : ''}"></i>
+                <span class="bold ${likes.includes(post.id) ? 'blue' : ''}">Like</span>
+            </span>
+            <span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()">
+                <i class="icons comm"></i>
+                <span class="bold">Comment</span>
+            </span>
+        </div>
+        <div id="comments">
+            <div class="fullline" style="margin-top: 0"></div>
+            ${post.comments.map(parseComment).join('')}
+            <div class="comment">
+                <a class="pfp" href="profile">
+                
+                </a>
+                <form onsubmit="comment(event)">
+                    <input type="text" name="text" placeholder="Write a comment..." id="newcomment" class="newcomment">
+                </form>
+            </div>
+        </div>
+    </div>  
+    `
+
+    return html
+}
+
+function getPost(id) {
+    for (let i = 0; i < data.posts.length; i++) {
+        if (data.posts[i].id === id) {
+            return i
+        }
+    }
+    return -1
+}
+
+function like(span) {
+    const id = parseInt(span.parentElement.parentElement.getAttribute('postid'))
+    const index = data.user.likes.indexOf(id)
+    if (index === -1) {
+        data.user.likes.push(id)
+        data.posts[getPost(id)].likes++
+    } else {
+        data.user.likes.splice(index, 1)
+        data.posts[getPost(id)].likes--
+    }
+    load()
+}
+
+function comment(event) {
+    event.preventDefault();
+    const text = event.target.elements.text.value.trim();
+    if (text.length < 1) return;
+    const id = parseInt(event.target.parentElement.parentElement.parentElement.getAttribute('postid'))
+    var index = getPost(id);
+    console.log(index)
+    if (index === -1) return;
+    data.posts[index].comments.push({
+        firstname: data.user.firstname,
+        lastname: data.user.lastname,
+        content: text
+    })
+    load()
+}
+
+function post(event) {
+    const text = document.getElementById("text").value.trim()
+    if (text.length < 1) return;
+    data.posts.unshift({
+        id: data.posts[0].id + 1,
+        author: {
+            firstname: data.user.firstname,
+            lastname: data.user.lastname
+        },
+        time: Date.now(),
+        content: text,
+        likes: 0,
+        comments: []
+    })
+    load()
+}
+
+function load() {
+    const html = `
+    <div id="posts">
+        <div class="create">
+            <a class="pfp" href="profile">
+                    
+            </a>
+            <button class="pfp">
+                <p class="gtext" onclick="document.getElementById('popup').classList.remove('hidden')">
+                    What's on your mind, ${data.user.firstname}?
+                </p>
+            </button>
+        </div>
+        ${data.posts.map(p => parsePost(p, data.user.likes)).join('')}
+    </div>
+    `
+    
+    add(html, 'posts')
+
+    const popup = `
+    <div id="popup" class="hidden">
+        <div class="createpost">
+            <div class="close" onclick="document.getElementById('popup').classList.add('hidden')"></div>
+            <span class="ltext ctext bold">Create post</span>
+            <div class="fullline"></div>
+            <div class="postheader">
+                <a class="pfp" style="cursor: auto">
+                    
+                </a>
+                <div class="postname">
+                    <span class="bold">${data.user.firstname + ' ' + data.user.lastname}</span>and ho
+                    <span class="gtext mtext">Now</span>
+                </div>
+            </div>
+            <textarea type="text" name="text" id="text" placeholder="What's on your mind, ${data.user.firstname}?"></textarea>
+            <button class="primary" onclick="post(this)">Post</button>
+        </div>
+    </div>
+    `
+
+    add(popup, 'popup')
+}
+
+var data = {
+    user: {
+        firstname: 'John',
+        lastname: 'Doe',
+        likes: [1]
+    },
+    posts: [
+        {
+            id: 1,
+            author: {
+                firstname: 'Joe',
+                lastname: 'Biden',
+            },
+            time: 1674269687905,
+            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+            likes: 2,
+            comments: [],
+        },
+        {
+            id: 0,
+            author: {
+                firstname: 'Amazon',
+                lastname: 'Employee',
+            },
+            time: 0,
+            content: 'I dont like working at amazon >:(', 
+            likes: 69,
+            comments: [
+                {
+                    firstname: 'Jeff',
+                    lastname: 'Bezos',
+                    content: 'You\'re fired.'
+                },
+            ],
+        }
+    ]
+}
+
+header(true, false)
+load();
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index e69de29..42cc6fe 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -0,0 +1,15 @@
+var range;
+
+function add(html, id) {
+    const old = document.getElementById(id)
+    if (old !== null) {
+        old.remove()
+    }
+    if (range === undefined) {
+        var range = document.createRange()
+        range.setStart(document.body, 0)
+    }
+    document.body.appendChild(
+        range.createContextualFragment(html)
+    )
+}
\ No newline at end of file
diff --git a/public/js/people.js b/public/js/people.js
new file mode 100644
index 0000000..992fd45
--- /dev/null
+++ b/public/js/people.js
@@ -0,0 +1 @@
+header(false, true)
\ No newline at end of file
diff --git a/public/people.html b/public/people.html
index a169436..a46487d 100644
--- a/public/people.html
+++ b/public/people.html
@@ -5,25 +5,10 @@
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/home.css">
     <link rel="stylesheet" href="css/header.css">
-    <title>XSSBook - Home</title>
+    <title>XSSBook - People</title>
 </head>
 <body>
-    <div id="header">
-        <span class="logo">xssbook</span>
-        <div class="buttons">
-            <a id="home" href="home">
-                <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
-                    <path d="M25.825 12.29C25.824 12.289 25.823 12.288 25.821 12.286L15.027 2.937C14.752 2.675 14.392 2.527 13.989 2.521 13.608 2.527 13.248 2.675 13.001 2.912L2.175 12.29C1.756 12.658 1.629 13.245 1.868 13.759 2.079 14.215 2.567 14.479 3.069 14.479L5 14.479 5 23.729C5 24.695 5.784 25.479 6.75 25.479L11 25.479C11.552 25.479 12 25.031 12 24.479L12 18.309C12 18.126 12.148 17.979 12.33 17.979L15.67 17.979C15.852 17.979 16 18.126 16 18.309L16 24.479C16 25.031 16.448 25.479 17 25.479L21.25 25.479C22.217 25.479 23 24.695 23 23.729L23 14.479 24.931 14.479C25.433 14.479 25.921 14.215 26.132 13.759 26.371 13.245 26.244 12.658 25.825 12.29"></path>
-                </svg>
-            </a>
-            <a id="people" class="selected" href="people">
-                <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
-                    <path d="M10.5 4.5c-2.272 0-2.75 1.768-2.75 3.25C7.75 9.542 8.983 11 10.5 11s2.75-1.458 2.75-3.25c0-1.482-.478-3.25-2.75-3.25zm0 8c-2.344 0-4.25-2.131-4.25-4.75C6.25 4.776 7.839 3 10.5 3s4.25 1.776 4.25 4.75c0 2.619-1.906 4.75-4.25 4.75zm9.5-6c-1.41 0-2.125.841-2.125 2.5 0 1.378.953 2.5 2.125 2.5 1.172 0 2.125-1.122 2.125-2.5 0-1.659-.715-2.5-2.125-2.5zm0 6.5c-1.999 0-3.625-1.794-3.625-4 0-2.467 1.389-4 3.625-4 2.236 0 3.625 1.533 3.625 4 0 2.206-1.626 4-3.625 4zm4.622 8a.887.887 0 00.878-.894c0-2.54-2.043-4.606-4.555-4.606h-1.86c-.643 0-1.265.148-1.844.413a6.226 6.226 0 011.76 4.336V21h5.621zm-7.122.562v-1.313a4.755 4.755 0 00-4.749-4.749H8.25A4.755 4.755 0 003.5 20.249v1.313c0 .518.421.938.937.938h12.125c.517 0 .938-.42.938-.938zM20.945 14C24.285 14 27 16.739 27 20.106a2.388 2.388 0 01-2.378 2.394h-5.81a2.44 2.44 0 01-2.25 1.5H4.437A2.44 2.44 0 012 21.562v-1.313A6.256 6.256 0 018.25 14h4.501a6.2 6.2 0 013.218.902A5.932 5.932 0 0119.084 14h1.861z"></path>
-                </svg>
-            </a>
-        </div>
-    </div>
-    <p>
-        b
-    </p>
+    <script src="./js/main.js"></script>
+    <script src="./js/header.js"></script>
+    <script src="./js/people.js"></script>
 </body>
\ No newline at end of file
diff --git a/public/profile.html b/public/profile.html
new file mode 100644
index 0000000..5f7a902
--- /dev/null
+++ b/public/profile.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/profile.css">
+    <link rel="stylesheet" href="css/header.css">
+    <title>XSSBook - Profile</title>
+</head>
+<body>
+    <div id="header">
+        <span class="logo">xssbook</span>
+        <div class="buttons">
+            <a id="home" href="home">
+                <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
+                    <path d="M25.825 12.29C25.824 12.289 25.823 12.288 25.821 12.286L15.027 2.937C14.752 2.675 14.392 2.527 13.989 2.521 13.608 2.527 13.248 2.675 13.001 2.912L2.175 12.29C1.756 12.658 1.629 13.245 1.868 13.759 2.079 14.215 2.567 14.479 3.069 14.479L5 14.479 5 23.729C5 24.695 5.784 25.479 6.75 25.479L11 25.479C11.552 25.479 12 25.031 12 24.479L12 18.309C12 18.126 12.148 17.979 12.33 17.979L15.67 17.979C15.852 17.979 16 18.126 16 18.309L16 24.479C16 25.031 16.448 25.479 17 25.479L21.25 25.479C22.217 25.479 23 24.695 23 23.729L23 14.479 24.931 14.479C25.433 14.479 25.921 14.215 26.132 13.759 26.371 13.245 26.244 12.658 25.825 12.29"></path>
+                </svg>
+            </a>
+            <a id="people" href="people">
+                <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
+                    <path d="M10.5 4.5c-2.272 0-2.75 1.768-2.75 3.25C7.75 9.542 8.983 11 10.5 11s2.75-1.458 2.75-3.25c0-1.482-.478-3.25-2.75-3.25zm0 8c-2.344 0-4.25-2.131-4.25-4.75C6.25 4.776 7.839 3 10.5 3s4.25 1.776 4.25 4.75c0 2.619-1.906 4.75-4.25 4.75zm9.5-6c-1.41 0-2.125.841-2.125 2.5 0 1.378.953 2.5 2.125 2.5 1.172 0 2.125-1.122 2.125-2.5 0-1.659-.715-2.5-2.125-2.5zm0 6.5c-1.999 0-3.625-1.794-3.625-4 0-2.467 1.389-4 3.625-4 2.236 0 3.625 1.533 3.625 4 0 2.206-1.626 4-3.625 4zm4.622 8a.887.887 0 00.878-.894c0-2.54-2.043-4.606-4.555-4.606h-1.86c-.643 0-1.265.148-1.844.413a6.226 6.226 0 011.76 4.336V21h5.621zm-7.122.562v-1.313a4.755 4.755 0 00-4.749-4.749H8.25A4.755 4.755 0 003.5 20.249v1.313c0 .518.421.938.937.938h12.125c.517 0 .938-.42.938-.938zM20.945 14C24.285 14 27 16.739 27 20.106a2.388 2.388 0 01-2.378 2.394h-5.81a2.44 2.44 0 01-2.25 1.5H4.437A2.44 2.44 0 012 21.562v-1.313A6.256 6.256 0 018.25 14h4.501a6.2 6.2 0 013.218.902A5.932 5.932 0 0119.084 14h1.861z"></path>
+                </svg>
+            </a>
+        </div>
+        <a id="profile" hreF="profile">
+            
+        </a>
+    </div>
+</body>
\ No newline at end of file