colored pfps

33 files changed, 35 insertions, 19 deletions

diff --git a/public/css/header.css b/public/css/header.css
index 9811eb4..6a3ce6a 100644
--- a/public/css/header.css
+++ b/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;
diff --git a/public/css/main.css b/public/css/main.css
index 8ce5254..5df2642 100644
--- a/public/css/main.css
+++ b/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(--primary) I !important;
-        color: var(--primary) !important;
-        border: 1px solid var(--primary) !important;
+        background-color: var(--secondary) I !important;
+        color: var(--text) !important;
+        border: 1px solid var(--light) !important;
+    }
+
+    input:focus {
+        outline: none;
     }
 }
\ No newline at end of file
diff --git a/public/css/profile.css b/public/css/profile.css
index 3a16d56..fa3cd07 100644
--- a/public/css/profile.css
+++ b/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;
diff --git a/public/img/0.png b/public/img/0.png
new file mode 100644
index 0000000..19bbb12
--- /dev/null
+++ b/public/img/0.png
diff --git a/public/img/1.png b/public/img/1.png
new file mode 100644
index 0000000..0466850
--- /dev/null
+++ b/public/img/1.png
diff --git a/public/img/10.png b/public/img/10.png
new file mode 100644
index 0000000..e181798
--- /dev/null
+++ b/public/img/10.png
diff --git a/public/img/11.png b/public/img/11.png
new file mode 100644
index 0000000..10cc420
--- /dev/null
+++ b/public/img/11.png
diff --git a/public/img/12.png b/public/img/12.png
new file mode 100644
index 0000000..f62a977
--- /dev/null
+++ b/public/img/12.png
diff --git a/public/img/13.png b/public/img/13.png
new file mode 100644
index 0000000..c25a5db
--- /dev/null
+++ b/public/img/13.png
diff --git a/public/img/14.png b/public/img/14.png
new file mode 100644
index 0000000..b4268e0
--- /dev/null
+++ b/public/img/14.png
diff --git a/public/img/15.png b/public/img/15.png
new file mode 100644
index 0000000..8641079
--- /dev/null
+++ b/public/img/15.png
diff --git a/public/img/16.png b/public/img/16.png
new file mode 100644
index 0000000..538b8d8
--- /dev/null
+++ b/public/img/16.png
diff --git a/public/img/17.png b/public/img/17.png
new file mode 100644
index 0000000..8fbf42a
--- /dev/null
+++ b/public/img/17.png
diff --git a/public/img/18.png b/public/img/18.png
new file mode 100644
index 0000000..60ddadc
--- /dev/null
+++ b/public/img/18.png
diff --git a/public/img/19.png b/public/img/19.png
new file mode 100644
index 0000000..87e55ae
--- /dev/null
+++ b/public/img/19.png
diff --git a/public/img/2.png b/public/img/2.png
new file mode 100644
index 0000000..e3d3fd2
--- /dev/null
+++ b/public/img/2.png
diff --git a/public/img/20.png b/public/img/20.png
new file mode 100644
index 0000000..cad21e0
--- /dev/null
+++ b/public/img/20.png
diff --git a/public/img/21.png b/public/img/21.png
new file mode 100644
index 0000000..951295b
--- /dev/null
+++ b/public/img/21.png
diff --git a/public/img/22.png b/public/img/22.png
new file mode 100644
index 0000000..30a7517
--- /dev/null
+++ b/public/img/22.png
diff --git a/public/img/23.png b/public/img/23.png
new file mode 100644
index 0000000..386d550
--- /dev/null
+++ b/public/img/23.png
diff --git a/public/img/24.png b/public/img/24.png
new file mode 100644
index 0000000..fc0ce1a
--- /dev/null
+++ b/public/img/24.png
diff --git a/public/img/3.png b/public/img/3.png
new file mode 100644
index 0000000..aa2b68a
--- /dev/null
+++ b/public/img/3.png
diff --git a/public/img/4.png b/public/img/4.png
new file mode 100644
index 0000000..a9ee0d0
--- /dev/null
+++ b/public/img/4.png
diff --git a/public/img/5.png b/public/img/5.png
new file mode 100644
index 0000000..63e904b
--- /dev/null
+++ b/public/img/5.png
diff --git a/public/img/6.png b/public/img/6.png
new file mode 100644
index 0000000..7ba485d
--- /dev/null
+++ b/public/img/6.png
diff --git a/public/img/7.png b/public/img/7.png
new file mode 100644
index 0000000..c861dc6
--- /dev/null
+++ b/public/img/7.png
diff --git a/public/img/8.png b/public/img/8.png
new file mode 100644
index 0000000..a25833b
--- /dev/null
+++ b/public/img/8.png
diff --git a/public/img/9.png b/public/img/9.png
new file mode 100644
index 0000000..70b19fa
--- /dev/null
+++ b/public/img/9.png
diff --git a/public/js/header.js b/public/js/header.js
index 5a12408..0e251ed 100644
--- a/public/js/header.js
+++ b/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>
diff --git a/public/js/home.js b/public/js/home.js
index cf56eca..0083297 100644
--- a/public/js/home.js
+++ b/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)
diff --git a/public/js/main.js b/public/js/main.js
index 12f53ec..87dd8e0 100644
--- a/public/js/main.js
+++ b/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'];
 
diff --git a/public/js/people.js b/public/js/people.js
index 15fde59..b861818 100644
--- a/public/js/people.js
+++ b/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()
\ No newline at end of file
diff --git a/public/js/profile.js b/public/js/profile.js
index 1e14c21..a043fde 100644
--- a/public/js/profile.js
+++ b/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)) {
@@ -93,6 +92,8 @@ async function load() {
     data.self = (await loadself()).json;
     data.users[data.self.user_id] = data.self
     let id;
+
+    header(false, false, data.self.user_id)
     
     if (params.id !== undefined && !isNaN(params.id)) {