diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/404.html | 4 | ||||
| -rw-r--r-- | public/css/console.css | 60 | ||||
| -rw-r--r-- | public/css/home.css | 5 | ||||
| -rw-r--r-- | public/css/main.css | 10 | ||||
| -rw-r--r-- | public/css/people.css | 41 | ||||
| -rw-r--r-- | public/css/profile.css | 118 | ||||
| -rw-r--r-- | public/home.html | 2 | ||||
| -rw-r--r-- | public/js/api.js | 57 | ||||
| -rw-r--r-- | public/js/header.js | 2 | ||||
| -rw-r--r-- | public/js/home.js | 144 | ||||
| -rw-r--r-- | public/js/login.js | 29 | ||||
| -rw-r--r-- | public/js/people.js | 48 | ||||
| -rw-r--r-- | public/js/profile.js | 88 | ||||
| -rw-r--r-- | public/login.html | 38 | ||||
| -rw-r--r-- | public/people.html | 3 | ||||
| -rw-r--r-- | public/profile.html | 26 |
16 files changed, 560 insertions, 115 deletions
diff --git a/public/404.html b/public/404.html index 7aedb82..49f0d5d 100644 --- a/public/404.html +++ b/public/404.html @@ -5,11 +5,11 @@ <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/404.css"> <link rel="stylesheet" href="css/header.css"> - <title>XSSBook - Home</title> + <title>XSSBook - Not Found</title> </head> <body> <div id="header"> - <span class="logo">xssbook</span> + <span class="logo"><a href="/">xssbook</a></span> </div> <div class="error"> <span class="logo">404</span> diff --git a/public/css/console.css b/public/css/console.css new file mode 100644 index 0000000..bc07969 --- /dev/null +++ b/public/css/console.css @@ -0,0 +1,60 @@ +body { + margin: 0; + padding: 0; + background-color: #181818; + display: flex; + flex-direction: column-reverse; +} + +@font-face { + font-family: sfpro; + src: url("../fonts/sfpro.otf") format("opentype"); +} + +div { + background-color: #282828; + font-family: sfpro; + margin: 15px; + margin-bottom: 0px; + border-radius: 5px; + padding: 10px; + width: calc(100% - 50px) +} + +span { + display: inline-block; + padding: 0; + margin: 0; + color: #ffffff; + font-family: sfpro; + margin-right: 10px; +} + +.json span { + display: inline; + margin: 0; +} + +.key { + color: white; +} + +.value { + color: white; +} + +.boolean { + color: aqua; +} + +.null { + color: blue; +} + +.number { + color: yellow; +} + +.string { + color: #4ae04a +}
\ No newline at end of file diff --git a/public/css/home.css b/public/css/home.css index de0c2d0..33d72c0 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -148,6 +148,11 @@ body { margin-bottom: 10px; } +.comment p, .post p { + word-break: break-all; + white-space: normal; +} + .comment>span { display: flex; flex-direction: column; diff --git a/public/css/main.css b/public/css/main.css index 9d2fe1d..a75a941 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -42,6 +42,14 @@ body { color: #1778f2 } +.error { + font-family: sfpro; + color: #f02849; + padding-top: 10px; + margin-bottom: -10px; + font-size: 15px; +} + .gtext { font-family: sfpro; color: #606770 @@ -77,6 +85,7 @@ body { } a { + color: inherit; text-decoration: none; cursor: pointer; } @@ -263,6 +272,7 @@ footer { .hidden { visibility: hidden; pointer-events: none; + display: none !important; } .pfp, .pfp img { diff --git a/public/css/people.css b/public/css/people.css index 70db81f..b8cf025 100644 --- a/public/css/people.css +++ b/public/css/people.css @@ -1,3 +1,44 @@ body { background-color: #f0f2f5; +} + +#users { + display: flex; + flex-direction: column; + align-items: center; +} + +.person { + width: 30em; + height: fit-content; + background-color: white; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, .05); + margin-bottom: 1.5em; + display: flex; + flex-direction: row; +} + +.profile, .profile img { + border-radius: 10px 0px 0px 10px; + width: 10em; + height: 10em; + padding: 0; + display: block; + background-color: #e4e6e8; + flex-shrink: 0; +} + +.info { + margin: 20px; + display: flex; + flex-direction: column; +} + +.info span { + width: 280px; + margin-bottom: 5px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; }
\ No newline at end of file diff --git a/public/css/profile.css b/public/css/profile.css index 70db81f..4c5ae10 100644 --- a/public/css/profile.css +++ b/public/css/profile.css @@ -1,3 +1,121 @@ body { background-color: #f0f2f5; +} + +.spacer { + margin-bottom: 3.5em; +} + +#top { + background-color: white; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + box-shadow: 0 2px 4px rgba(0, 0, 0, .05); +} + +#banner { + background-image: linear-gradient(#949494, white, white); + height: 30em; + width: 100%; + display: flex; + justify-content: center; +} + +#banner div, #banner img { + width: 80em; + height: inherit; + background-color: #e4e6e8; + border-radius: 0px 0px 20px 20px; +} + +#info { + width: 80em; + display: flex; + flex-direction: row; +} + +.face { + background-color: #e4e6e8; + height: 12em; + width: 12em; + border-radius: 7em; + border: solid 5px white; + margin-top: -2em; + margin-left: 2em; + margin-right: 2em; +} + +.infodata { + margin-top: 2em; + display: flex; + flex-direction: column; +} + +.infodata span { + margin-bottom: .5em; +} + +.profilebuttons { + width: 80em; + height: 3em; + display: flex; + align-items: center; +} + +.profilebuttons button { + all: unset; + font-family: sfprobold; + padding: 0px 50px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: #606770; + cursor: pointer; +} + +.profilebuttons button:hover { + background-color: #dddfe2; +} + +.selected { + color: #1778f2 !important; + border-bottom: 3px solid #1778f2 !important; +} + +#about { + margin-top: 2em; + align-self: center; + padding: 0; + display: flex; + flex-direction: row; +} + +#posts { + margin-top: 2em; +} + +#about .ltext { + border-right: 2px solid #dadde1; + padding: 10px; + padding-right: 3em; +} + +#about .data { + display: flex; + flex-direction: column; + padding: 10px; + padding-left: 20px; + padding-top: 15px; +} + +#about .data span { + margin-bottom: 10px; + width: 28em; + margin-bottom: 5px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; }
\ No newline at end of file diff --git a/public/home.html b/public/home.html index 6035fc4..cc780ac 100644 --- a/public/home.html +++ b/public/home.html @@ -10,6 +10,8 @@ <body> <script src="./js/main.js"></script> <script src="./js/header.js"></script> + <script src="./js/api.js"></script> <script src="./js/home.js"></script> + <script>load()</script> </body> </html>
\ No newline at end of file diff --git a/public/js/api.js b/public/js/api.js new file mode 100644 index 0000000..371ecf3 --- /dev/null +++ b/public/js/api.js @@ -0,0 +1,57 @@ +const endpoint = 'https://xssbook.com/api' + +const request = async (url, body, method) => { + if (method === undefined) method = 'POST' + const response = await fetch(endpoint + url, { + method, + body: JSON.stringify(body), + headers: { + 'Content-Type': 'application/json' + } + }); + if (response.status == 401) { + location.href = 'login' + } + const json = await response.json() + return { status: response.status, msg: json.msg, json } +} + +const login = async (email, password) => { + return await request('/auth/login', {email, password}) +} + +const register = async (first, last, email, password, gender, month, day, year) => { + return await request('/auth/register', {first, last, email, password, gender, month, day, year}) +} + +const loadposts = async (page) => { + return await request('/posts/load', {page}) +} + +const loadusersposts = async (id) => { + return await request('/posts/user', {id}) +} + +const loadusers = async (ids) => { + return await request('/users/load', {ids}) +} + +const loadallusers = async () => { + return await request('/users/all', {}) +} + +const loadself = async () => { + return await request("/auth/self", {}) +} + +const postcomment = async (id, content) => { + return await request('/posts/comment', {id, content}, 'PUT') +} + +const postlike = async (id, state) => { + return await request('/posts/like', {id, state}, 'PUT') +} + +const createpost = async (content) => { + return await request('/posts/create', {content}) +}
\ No newline at end of file diff --git a/public/js/header.js b/public/js/header.js index 24643d6..8fe03e5 100644 --- a/public/js/header.js +++ b/public/js/header.js @@ -1,7 +1,7 @@ function header(home, people) { const html = ` <div id="header"> - <span class="logo">xssbook</span> + <span class="logo"><a href="/">xssbook</a></span> <div class="buttons"> <a id="home" ${home ? 'class="selected"' : ''} href="home"> <svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28"> diff --git a/public/js/home.js b/public/js/home.js index 289ce9b..e0186a8 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -5,22 +5,24 @@ function parseDate(date) { return months[date.getUTCMonth()] + ' ' + date.getUTCDate() + ', ' + date.getUTCFullYear() + ' ' + date.toLocaleTimeString(); } -function parseComment(data) { +function parseComment(comment) { + const author = data.users[comment.user] 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 class="bold mtext">${author.first + ' ' + author.last}</span> + <p class="mtext">${comment.content}</p> </span> </div> ` return html } -function parsePost(post, likes) { +function parsePost(post) { + const author = data.users[post.user] const html = ` <div class="post" postid=${post.id}> <div class="postheader"> @@ -28,21 +30,21 @@ function parsePost(post, likes) { </a> <div class="postname"> - <span class="bold">${post.author.firstname + ' ' + post.author.lastname}</span> - <span class="gtext mtext">${parseDate(new Date(post.time))}</span> + <span class="bold">${author.first + ' ' + author.last}</span> + <span class="gtext mtext">${parseDate(new Date(post.date))}</span> </div> </div> <p class="mtext"> - ${post.content} + ${post.content.replace(/\n/g,'<br>')} </p> <span class="gtext mtext"> - ${post.likes} Likes + ${post.likes.length} 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> + <i class="icons like ${post.likes.includes(data.user.id) ? 'blue' : ''}"></i> + <span class="bold ${post.likes.includes(data.user.id) ? 'blue' : ''}">Like</span> </span> <span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()"> <i class="icons comm"></i> @@ -76,53 +78,60 @@ function getPost(id) { return -1 } -function like(span) { +async 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++ + const post = data.posts[getPost(id)] + const index = post.likes.indexOf(data.user.id) + const state = index === -1; + const response = await postlike(id, state) + if (response.status != 200) return; + if (index == -1) { + post.likes.push(data.user.id) } else { - data.user.likes.splice(index, 1) - data.posts[getPost(id)].likes-- + post.likes.splice(index, 1) } - load() + render() } -function comment(event) { +async 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; + const response = await postcomment(id, text) + if (response.status != 200) return; + event.target.elements.text.value = ''; data.posts[index].comments.push({ - firstname: data.user.firstname, - lastname: data.user.lastname, + user: data.user.id, content: text }) - load() + render() } -function post(event) { +async function post() { const text = document.getElementById("text").value.trim() + const error = document.getElementsByClassName('error')[0] if (text.length < 1) return; + const response = await createpost(text); + if (response.status != 200) { + error.innerHTML = response.msg + return; + } + error.innerHTML = ''; data.posts.unshift({ id: data.posts[0].id + 1, - author: { - firstname: data.user.firstname, - lastname: data.user.lastname - }, - time: Date.now(), + user: data.user.id, + date: Date.now(), content: text, - likes: 0, + likes: [], comments: [] }) - load() + render() } -function load() { +function render() { const html = ` <div id="posts"> <div class="create"> @@ -131,11 +140,11 @@ function load() { </a> <button class="pfp"> <p class="gtext" onclick="document.getElementById('popup').classList.remove('hidden')"> - What's on your mind, ${data.user.firstname}? + What's on your mind, ${data.user.first}? </p> </button> </div> - ${data.posts.map(p => parsePost(p, data.user.likes)).join('')} + ${data.posts.map(p => parsePost(p)).join('')} </div> ` @@ -152,11 +161,12 @@ function load() { </a> <div class="postname"> - <span class="bold">${data.user.firstname + ' ' + data.user.lastname}</span>and ho + <span class="bold">${data.user.first + ' ' + data.user.last}</span> <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> + <textarea type="text" name="text" id="text" placeholder="What's on your mind, ${data.user.first}?"></textarea> + <span class="error ctext" style="padding-bottom: 15px; margin-top: -30px;"></span> <button class="primary" onclick="post(this)">Post</button> </div> </div> @@ -165,43 +175,29 @@ function load() { 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.' - }, - ], - } - ] +var page = 0 +const data = { + user: {}, + users: {}, + posts: [] } -header(true, false) -load();
\ No newline at end of file +async function load() { + header(true, false) + const posts = (await loadposts(page)).json + page++; + data.posts.push(... posts) + const batch = [] + for (const post of posts) { + if (data.users[post.user] !== undefined) continue + if (batch.includes(post.user)) continue + batch.push(post.user) + } + const users = (await loadusers(batch)).json + for (const id in users) { + data.users[id] = users[id] + } + data.user = (await loadself()).json + data.users[data.user.id] = data.user + render() +}
\ No newline at end of file diff --git a/public/js/login.js b/public/js/login.js new file mode 100644 index 0000000..5d51299 --- /dev/null +++ b/public/js/login.js @@ -0,0 +1,29 @@ +async function onlogin() { + const email = document.getElementById('email').value + const password = document.getElementById('pass').value + const response = await login(email, password) + if (response.status !== 200) { + const error = document.getElementsByClassName('error')[0] + error.innerHTML = response.msg + } else { + location.href = '/home' + } +} + +async function onregister() { + const first = document.getElementById('firstname').value + const last = document.getElementById('lastname').value + const email = document.getElementById('newemail').value + const pass = document.getElementById('newpass').value + const month = document.getElementById('month').value + const day = document.getElementById('day').value + const year = document.getElementById('year').value + const gender = document.querySelector('input[name="gender"]:checked').value + const response = await register(first, last, email, pass, gender, month, parseInt(day), parseInt(year)) + if (response.status !== 200) { + const error = document.getElementsByClassName('error')[1] + error.innerHTML = response.msg + } else { + location.href = '/home' + } +}
\ No newline at end of file diff --git a/public/js/people.js b/public/js/people.js index 992fd45..415dd16 100644 --- a/public/js/people.js +++ b/public/js/people.js @@ -1 +1,47 @@ -header(false, true)
\ No newline at end of file +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 parseUser(user) { + const html = ` + <a class="person" href="/profile?id=${user.id}"> + <div class="profile"> + + </div> + <div class="info"> + <span class="bold ltext">${user.first + ' ' + user.last}</span> + <span class="gtext">Joined ${parseDate(new Date(user.date))}</span> + <span class="gtext">Gender: ${user.gender}</span> + <span class="gtext">Birthday: ${user.month + ' ' + user.day + ', ' + user.year}</span> + </div> + </a> + ` + return html +} + +function render() { + const html = ` + <div id="users"> + ${data.users.map(u => parseUser(u)).join('')} + </div> + ` + + add(html, 'usres') +} + +var data = { + users: [] +} + +async function load() { + const users = (await loadallusers()).json + console.log(users) + data.users = users + render() +} + +header(false, true) +load()
\ No newline at end of file diff --git a/public/js/profile.js b/public/js/profile.js new file mode 100644 index 0000000..63d2ec0 --- /dev/null +++ b/public/js/profile.js @@ -0,0 +1,88 @@ +function render() { + const html = ` + <div id="top"> + <div id="banner"> + <div> + + </div> + </div> + <div id="info"> + <div class="face"> + + </div> + <div class="infodata"> + <span class="bold ltext">${data.user.first + ' ' + data.user.last}</span> + <span class="gtext">Joined ${parseDate(new Date(data.user.date))}</span> + </div> + </div> + <div class="fullline" style="width: 80em; margin-bottom: 0;"></div> + <div class="profilebuttons"> + <button class="${posts ? 'selected' : ''}" onclick="posts = true; render()"> + Posts + </button> + <button class="${posts ? '' : 'selected'}" onclick="posts = false; render()"> + About + </button> + </div> + </div> + ` + + add(html, 'top') + + const postsh = ` + <div id="posts" class="${posts ? '' : 'hidden'}"> + ${data.posts.map(p => parsePost(p)).join('')} + </div> + ` + + add(postsh, 'posts') + + const about = ` + <div id="about" class="post ${posts ? 'hidden' : ''}"> + <span class="bold ltext">About</span> + <div class="data"> + <span class="gtext bold">Name: ${data.user.first + ' ' + data.user.last}</span> + <span class="gtext bold">Email: ${data.user.email}</span> + <span class="gtext bold">Gender: ${data.user.gender}</span> + <span class="gtext bold">Birthday: ${data.user.month + ' ' + data.user.day + ', ' + data.user.year}</span> + <span class="gtext bold">User ID: ${data.user.id}</span> + </div> + </div> + ` + + add(about, 'about') +} + +var posts = true + +async function load() { + header(false, false) + + var params = {}; + for (const [key, value] of new URLSearchParams(location.search)) { + params[key] = value + } + + const id = params.id !== undefined && !isNaN(params.id) ? parseInt(params.id) : (await loadself()).json.id + const posts = (await loadusersposts(id)).json + data.posts.push(... posts) + const batch = [id] + for (const post of posts) { + for(const comment of post.comments) { + if (data.users[comment.user] !== undefined) continue + if (batch.includes(comment.user)) continue + batch.push(comment.user) + } + if (data.users[post.user] !== undefined) continue + if (batch.includes(post.user)) continue + batch.push(post.user) + } + const users = (await loadusers(batch)).json + for (const id in users) { + data.users[id] = users[id] + } + data.user = data.users[id] + render() +} + +load()
\ No newline at end of file diff --git a/public/login.html b/public/login.html index c33a3f9..538d248 100644 --- a/public/login.html +++ b/public/login.html @@ -4,6 +4,8 @@ <meta charset="UTF-8"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/login.css"> + <script src="./js/api.js"></script> + <script src="./js/login.js"></script> <title>XSSBook - Login</title> </head> <body> @@ -15,7 +17,8 @@ <div class="prompt"> <input type="text" name="email" id="email" placeholder="Email" autofocus="1"> <input type="password" name="pass" id="pass" placeholder="Password"> - <button class="primary login-button bold" value="1" name="login" type="submit" id="login">Log In</button> + <span class="error ctext"></span> + <button class="primary login-button bold" value="1" name="login" type="submit" id="login" onclick="onlogin()">Log In</button> <a class="btext ctext">Forgot Password?</a> <div class="line"></div> <button class="success newacc" onclick="document.getElementById('popup').classList.remove('hidden')">Create new account</button> @@ -35,18 +38,18 @@ <span class="label">Birthday</span> <div class="row"> <select name="month" id="month" title="Month"> - <option value="1" selected="1">Jan</option> - <option value="2">Feb</option> - <option value="3">Mar</option> - <option value="4">Apr</option> - <option value="5">May</option> - <option value="6">Jun</option> - <option value="7">Jul</option> - <option value="8">Aug</option> - <option value="9">Sep</option> - <option value="10">Oct</option> - <option value="11">Nov</option> - <option value="12">Dec</option> + <option value="Jan" selected="1">Jan</option> + <option value="Feb">Feb</option> + <option value="Mar">Mar</option> + <option value="Apr">Apr</option> + <option value="May">May</option> + <option value="Jun">Jun</option> + <option value="Jul">Jul</option> + <option value="Aug">Aug</option> + <option value="Sep">Sep</option> + <option value="Oct">Oct</option> + <option value="Nov">Nov</option> + <option value="Dec">Dec</option> </select> <select name="day" id="day" title="Day"> <option value="1" selected="1">1</option> @@ -142,20 +145,21 @@ <div class="radiomenu" data-type="radio" data-name="gender_wrapper"> <span> <label class="gtext" for="female">Female</label> - <input id="female" type="radio" name="gender" value="1"> + <input id="female" type="radio" name="gender" value="Female" checked="true"> </span> <span> <label class="gtext" for="male">Male</label> - <input id="male" type="radio" name="gender" value="2"> + <input id="male" type="radio" name="gender" value="Male"> </span> <span> <label class="gtext" for="lettuce">Lettuce</label> - <input id="lettuce" type="radio" name="gender" value="3"> + <input id="lettuce" type="radio" name="gender" value="Lettuce"> </span> </div> + <span class="error ctext" style="padding-bottom: 10px;"></span> <span class="label stext">By clicking Sign Up, you agree to have your password stored in plain text and have any javascript run on your pc at any time.</span> <span class="label stext">XSSBook is not responsible for any ones loss of finances, mental state, relationships, or life when using this site.</span> - <button class="success signacc">Sign Up</button> + <button class="success signacc" onclick="onregister()">Sign Up</button> </div> </div> </div> diff --git a/public/people.html b/public/people.html index a46487d..f0aa514 100644 --- a/public/people.html +++ b/public/people.html @@ -3,12 +3,13 @@ <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/main.css"> - <link rel="stylesheet" href="css/home.css"> + <link rel="stylesheet" href="css/people.css"> <link rel="stylesheet" href="css/header.css"> <title>XSSBook - People</title> </head> <body> <script src="./js/main.js"></script> <script src="./js/header.js"></script> + <script src="./js/api.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 index 5f7a902..0274327 100644 --- a/public/profile.html +++ b/public/profile.html @@ -3,27 +3,15 @@ <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"> + <link rel="stylesheet" href="css/profile.css"> + <link rel="stylesheet" href="css/home.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> + <script src="./js/main.js"></script> + <script src="./js/header.js"></script> + <script src="./js/api.js"></script> + <script src="./js/home.js"></script> + <script src="./js/profile.js"></script> </body>
\ No newline at end of file |