colored pfps

This commit is contained in:
Tyler Murphy 2023-01-30 22:55:14 -05:00
parent 0a43289090
commit 215c806b9a
33 changed files with 35 additions and 19 deletions

View file

@ -48,7 +48,7 @@
border-bottom: 3px solid var(--logo); border-bottom: 3px solid var(--logo);
} }
#header .pfp, #header .pfp img { #header .pfp {
position: absolute; position: absolute;
right: 1em; right: 1em;
top: .5em; top: .5em;

View file

@ -202,7 +202,7 @@ input:focus {
all: unset; all: unset;
font-family: sfpro; font-family: sfpro;
background-color: var(--logo); background-color: var(--logo);
color: var(--text); color: white;
padding: 10px; padding: 10px;
margin: 20px; margin: 20px;
border-radius: 5px; border-radius: 5px;
@ -215,7 +215,7 @@ input:focus {
all: unset; all: unset;
font-family: sfpro; font-family: sfpro;
background-color: var(--success); background-color: var(--success);
color: var(--text); color: white;
padding: 10px; padding: 10px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
@ -305,6 +305,7 @@ footer {
border-radius: 3em; border-radius: 3em;
background-color: var(--hover); background-color: var(--hover);
flex-shrink: 0; flex-shrink: 0;
image-rendering: crisp-edges;
} }
.nb { .nb {
@ -357,9 +358,12 @@ form {
} }
body select { body select {
filter: invert(100%) !important; background-color: var(--secondary) I !important;
background-color: var(--primary) I !important; color: var(--text) !important;
color: var(--primary) !important; border: 1px solid var(--light) !important;
border: 1px solid var(--primary) !important; }
input:focus {
outline: none;
} }
} }

View file

@ -47,6 +47,12 @@ body {
margin-right: 2em; margin-right: 2em;
} }
.face img {
height: 12em;
width: 12em;
border-radius: 7em;
}
.infodata { .infodata {
margin-top: 2em; margin-top: 2em;
display: flex; display: flex;

BIN
public/img/0.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
public/img/1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
public/img/10.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
public/img/11.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
public/img/12.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/img/13.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
public/img/14.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
public/img/15.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/img/16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
public/img/17.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/img/18.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
public/img/19.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
public/img/2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
public/img/20.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8 KiB

BIN
public/img/21.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
public/img/22.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
public/img/23.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
public/img/24.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
public/img/3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
public/img/4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7 KiB

BIN
public/img/5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/img/6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
public/img/7.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
public/img/8.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
public/img/9.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

View file

@ -1,4 +1,4 @@
function header(home, people) { function header(home, people, user_id) {
const html = ` const html = `
<div id="header"> <div id="header">
<span class="logo"><a href="/">xssbook</a></span> <span class="logo"><a href="/">xssbook</a></span>
@ -15,7 +15,7 @@ function header(home, people) {
</a> </a>
</div> </div>
<a class="pfp" id="profile" hreF="profile"> <a class="pfp" id="profile" hreF="profile">
${pfp(user_id)}
</a> </a>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>

View file

@ -6,7 +6,7 @@ function parseComment(comment) {
const html = ` const html = `
<div class="comment"> <div class="comment">
<a class="pfp"> <a class="pfp">
${pfp(author.user_id)}
</a> </a>
<span> <span>
<span class="bold mtext">${author.firstname + ' ' + author.lastname}</span> <span class="bold mtext">${author.firstname + ' ' + author.lastname}</span>
@ -26,7 +26,7 @@ function parsePost(post) {
<div class="post" postid=${post.post_id}> <div class="post" postid=${post.post_id}>
<div class="postheader"> <div class="postheader">
<a class="pfp" href=/profile?id=${author.user_id}> <a class="pfp" href=/profile?id=${author.user_id}>
${pfp(author.user_id)}
</a> </a>
<div class="postname"> <div class="postname">
<span class="bold">${author.firstname + ' ' + author.lastname}</span> <span class="bold">${author.firstname + ' ' + author.lastname}</span>
@ -55,7 +55,7 @@ function parsePost(post) {
${post.comments.map(parseComment).join('')} ${post.comments.map(parseComment).join('')}
<div class="comment commentsubmit"> <div class="comment commentsubmit">
<a class="pfp" href="profile"> <a class="pfp" href="profile">
${pfp(data.user.user_id)}
</a> </a>
<form onsubmit="comment(event)"> <form onsubmit="comment(event)">
<input type="text" name="text" placeholder="Write a comment..." id="newcomment" class="newcomment"> <input type="text" name="text" placeholder="Write a comment..." id="newcomment" class="newcomment">
@ -159,7 +159,7 @@ function render() {
<div id="create"> <div id="create">
<div class="create"> <div class="create">
<a class="pfp" href="profile"> <a class="pfp" href="profile">
${pfp(data.user.user_id)}
</a> </a>
<button class="pfp"> <button class="pfp">
<p class="gtext" onclick="document.getElementById('popup').classList.remove('hidden')"> <p class="gtext" onclick="document.getElementById('popup').classList.remove('hidden')">
@ -183,7 +183,7 @@ function render() {
<div class="fullline"></div> <div class="fullline"></div>
<div class="postheader"> <div class="postheader">
<a class="pfp" style="cursor: auto"> <a class="pfp" style="cursor: auto">
${pfp(data.user.user_id)}
</a> </a>
<div class="postname"> <div class="postname">
<span class="bold">${data.user.firstname + ' ' + data.user.lastname}</span> <span class="bold">${data.user.firstname + ' ' + data.user.lastname}</span>
@ -243,8 +243,8 @@ async function load() {
} }
async function init() { async function init() {
header(true, false)
data.user = (await loadself()).json data.user = (await loadself()).json
header(true, false, data.user.user_id)
data.users[data.user.user_id] = data.user data.users[data.user.user_id] = data.user
const posts = await load() const posts = await load()
data.posts.push(... posts) data.posts.push(... posts)

View file

@ -32,6 +32,10 @@ function remove(id) {
} }
} }
function pfp(id) {
return `<img src="/img/${id % 25}.png">`
}
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

View file

@ -2,7 +2,7 @@ function parseUser(user) {
const html = ` const html = `
<a class="person" href="/profile?id=${user.user_id}"> <a class="person" href="/profile?id=${user.user_id}">
<div class="profile"> <div class="profile">
${pfp(user.user_id)}
</div> </div>
<div class="info"> <div class="info">
<span class="bold ltext">${user.firstname + ' ' + user.lastname}</span> <span class="bold ltext">${user.firstname + ' ' + user.lastname}</span>
@ -48,6 +48,8 @@ async function loadMore() {
} }
async function load() { async function load() {
const self = (await loadself()).json
header(false, true, self.user_id)
const users = (await loaduserspage(page)).json const users = (await loaduserspage(page)).json
if (users.length === 0) { if (users.length === 0) {
page = -1 page = -1
@ -64,5 +66,4 @@ async function init() {
render() render()
} }
header(false, true)
init() init()

View file

@ -26,7 +26,7 @@ function render() {
</div> </div>
<div id="info"> <div id="info">
<div class="face"> <div class="face">
${pfp(data.user.user_id)}
</div> </div>
<div class="infodata"> <div class="infodata">
<span class="bold ltext">${data.user.firstname + ' ' + data.user.lastname}</span> <span class="bold ltext">${data.user.firstname + ' ' + data.user.lastname}</span>
@ -83,7 +83,6 @@ var posts = true
var isself = false var isself = false
async function load() { async function load() {
header(false, false)
var params = {}; var params = {};
for (const [key, value] of new URLSearchParams(location.search)) { for (const [key, value] of new URLSearchParams(location.search)) {
@ -94,6 +93,8 @@ async function load() {
data.users[data.self.user_id] = data.self data.users[data.self.user_id] = data.self
let id; let id;
header(false, false, data.self.user_id)
if (params.id !== undefined && !isNaN(params.id)) { if (params.id !== undefined && !isNaN(params.id)) {
id = parseInt(params.id); id = parseInt(params.id);