colored pfps

public/css/header.css

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

public/css/main.css

@@ -202,7 +202,7 @@ input:focus {
     all: unset;
     font-family: sfpro;
     background-color: var(--logo);
-    color: var(--text);
+    color: white;
     padding: 10px;
     margin: 20px;
     border-radius: 5px;
@@ -215,7 +215,7 @@ input:focus {
     all: unset;
     font-family: sfpro;
     background-color: var(--success);
-    color: var(--text);
+    color: white;
     padding: 10px;
     margin-left: 10px;
     margin-right: 10px;
@@ -305,6 +305,7 @@ footer {
     border-radius: 3em;
     background-color: var(--hover);
     flex-shrink: 0;
+    image-rendering: crisp-edges;
 }
 
 .nb {
@@ -357,9 +358,12 @@ form {
     }
     
     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;
     }
 }

public/css/profile.css

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

public/js/header.js

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

public/js/home.js

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

public/js/main.js

@@ -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',
 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 

public/js/people.js

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

public/js/profile.js

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