dark mode

author: Tyler Murphy <tylermurphy534@gmail.com> 2023-01-30 18:55:36 -0500
committer: Tyler Murphy <tylermurphy534@gmail.com> 2023-01-30 18:55:36 -0500
commit: 0a432890906abde10d30b0c6d03aa0ee9d665180 (patch)
tree: 453301dec88fe8cfd6d2a625fd6266345254c978
parent: change green color (diff)
download: xssbook-0a432890906abde10d30b0c6d03aa0ee9d665180.tar.gz
xssbook-0a432890906abde10d30b0c6d03aa0ee9d665180.tar.bz2
xssbook-0a432890906abde10d30b0c6d03aa0ee9d665180.zip
13 files changed, 143 insertions, 72 deletions
diff --git a/public/404.html b/public/404.html
index 04ddadc..c89d93d 100644
--- a/public/404.html
+++ b/public/404.html
@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="/css/main.css">
     <link rel="stylesheet" href="/css/404.css">
     <link rel="stylesheet" href="/css/header.css">
+    <script src="/js/main.js"></script>
     <title>XSSBook - Not Found</title>
 </head>
 <body>
diff --git a/public/admin.html b/public/admin.html
index 8cd2199..cd79337 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -12,7 +12,7 @@
     <script src="/js/admin.js"></script>
     <div id="header">
         <span class="logo"><a href="/">xssbook</a></span>
-        <span class="gtext desc" style="margin-left: 6em; font-size: 2em">Admin Panel</span>
+        <span class="gtext desc" style="margin-left: 6em; font-size: 2em; color: #606770">Admin Panel</span>
     </div>
     <div id="login" class="hidden">
         <form autocomplete="off" onsubmit="auth(event)">
diff --git a/public/css/404.css b/public/css/404.css
index 38035a4..dcb4a0f 100644
--- a/public/css/404.css
+++ b/public/css/404.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #f0f2f5;
+    background-color: var(--secondary)
 }
 
 .error {
diff --git a/public/css/header.css b/public/css/header.css
index a491f33..9811eb4 100644
--- a/public/css/header.css
+++ b/public/css/header.css
@@ -1,6 +1,6 @@
 #header {
     height: 3.5em;
-    background-color: white;
+    background-color: var(--primary);
     position: fixed;
     width: 100vw;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 16px rgba(0, 0, 0, .05);
@@ -36,16 +36,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #606770;
+    color: var(--medium);
 }
 
 #header .buttons a:hover {
-    background-color: #dddfe2;
+    background-color: var(--hover);
 }
 
 .selected {
-    color: #1778f2 !important;
-    border-bottom: 3px solid #1778f2;
+    color: var(--logo) !important;
+    border-bottom: 3px solid var(--logo);
 }
 
 #header .pfp, #header .pfp img {
diff --git a/public/css/home.css b/public/css/home.css
index 2686ffd..b68314d 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
 }
 
 #posts, #create {
@@ -11,7 +11,7 @@ body {
 .post, .create {
     width: 40em;
     height: fit-content;
-    background-color: white;
+    background-color: var(--primary);
     border-radius: 10px;
     padding: 15px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
@@ -20,6 +20,7 @@ body {
 
 .post {
     padding-bottom: 0;
+    color: var(--text);
 }
 
 .create {
@@ -29,14 +30,14 @@ body {
 
 .create button {
     all: unset;
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
     border-radius: 3em;
     margin-left: 1em;
     flex: 1;
 }
 
 .create button:hover {
-    background-color: #e4e6e8;
+    background-color: var(--hover);
     cursor: pointer;
 }
 
@@ -64,12 +65,12 @@ body {
     cursor: pointer;
     padding: 7px;
     border-radius: 5px;
-    color: #606770;
+    color: var(--medium);
     margin: 3px
 }
 
 .postbuttons>span:hover {
-    background-color: #e4e6e8;
+    background-color: var(--hover);
 }
 
 .postname {
@@ -90,7 +91,9 @@ body {
 }
 
 .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%);
+    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 {
@@ -103,7 +106,7 @@ body {
 
 .createpost {
     position: relative;
-    background-color: white;
+    background-color: var(--primary);
     width: 450px;
     padding: 20px;
     border-radius: .5em;
@@ -124,6 +127,8 @@ body {
     width: 100%;
     height: 120px;
     margin-bottom: 20px;
+    background-color: transparent;
+    color: var(--text);
 }
 
 .createpost>span {
@@ -157,7 +162,7 @@ body {
     display: flex;
     flex-direction: column;
     margin-left: 10px;
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
     border-radius: 10px;
     padding: 10px;
     padding-right: 10px;
@@ -177,6 +182,6 @@ body {
     padding: 10px;
     border-radius: 10px;
     width: calc(100% - 20px);
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
     font-family: sfpro;
 }
 \ No newline at end of file
diff --git a/public/css/login.css b/public/css/login.css
index 7e5cde7..82fede5 100644
--- a/public/css/login.css
+++ b/public/css/login.css
@@ -1,5 +1,5 @@
 .login {
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
     display: flex;
     justify-content: center;
     align-content: center;
@@ -11,7 +11,7 @@
     display: flex;
     position: relative;
     flex-direction: column;
-    background-color: white;
+    background-color: var(--primary);
     box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
     border-radius: 8px;
     width: 396px;
diff --git a/public/css/main.css b/public/css/main.css
index 587f8a9..8ce5254 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,11 +1,28 @@
 body {
-    background-color: white;
+    --primary: #ffffff;
+    --secondary: #f0f2f5;
+    --hover: #e4e6e8;
+    --light: #dadde1;
+    --mild: #dadde1;
+    --medium: #606770;
+    --extreme: #1d2129;
+    --logo: #1778f2;
+    --error: #f02849;
+    --success: #30ab5a;
+    --text: #000000;
+    --banner: #949494;
+    --popup: #ffffffcc;
+}
+
+body {
+    background-color: var(--primary);
     width: 100vw;
     height: 100vh;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
+    color: var(--text);
 }
 
 @font-face {
@@ -24,7 +41,7 @@ body {
 }
 
 .logo {
-    color: #1778f2;
+    color: var(--logo);
     font-size: 3.5em;
     font-family: facebook;
 }
@@ -39,12 +56,16 @@ body {
 
 .btext {
     font-family: sfpro;
-    color: #1778f2
+    color: var(--logo)
+}
+
+.bltext {
+    color: var(--logo)
 }
 
 .error {
     font-family: sfpro;
-    color: #f02849;
+    color: var(--error);
     padding-top: 10px;
     margin-bottom: -10px;
     font-size: 15px;
@@ -52,12 +73,12 @@ body {
 
 .gtext {
     font-family: sfpro;
-    color: #606770
+    color: var(--medium)
 }
 
 .label {
     font-family: sfpro;
-    color: #606770;
+    color: var(--medium);
     font-size: 15px;
     padding-top: 10px;
     padding-left: 10px;
@@ -103,19 +124,19 @@ span {
 footer {
     bottom: 0;
     height: 400px;
-    background-color: white;
+    background-color: var(--primary);
 }
 
 input {
     flex: 1;
     font-family: sfpro;
-    background-color: white;
+    background-color: var(--primary);
     padding: 10px;
     margin: 10px;
     margin-bottom: 0;
     border-radius: 5px;
-    border: 1px solid #dddfe2;
-    color: #1d2129;
+    border: 1px solid var(--light);
+    color: var(--extreme);
     font-size: 18px;
 }
 
@@ -128,12 +149,12 @@ input {
     display: inline-block;
     position: relative;
     font-family: sfpro;
-    background-color: white;
+    background-color: var(--primary);
     margin: 10px;
     margin-bottom: 0;
     border-radius: 5px;
-    border: 1px solid #dddfe2;
-    color: #1d2129;
+    border: 1px solid var(--light);
+    color: var(--extreme);
     font-size: 15px;
     flex: 1 0 auto;
 }
@@ -143,7 +164,7 @@ input {
     display: block;
     box-sizing: border-box;
     width: auto;
-    color: #1d2129;
+    color: var(--extreme);
 }
 
 [type="radio"] {
@@ -159,13 +180,13 @@ select {
     all: unset;
     flex: 1;
     font-family: sfpro;
-    background-color: white;
+    background-color: var(--primary);
     padding: 10px;
     margin: 10px;
     margin-bottom: 0;
     border-radius: 5px;
-    border: 1px solid #dddfe2;
-    color: #1d2129;
+    border: 1px solid var(--light);
+    color: var(--extreme);
     font-size: 15px;
     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVMaXEFBQUFBQUFBQXG+MOgAAAAA3RSTlMAn3BcqiM3AAAAOUlEQVQIW53BsQ2AMAwAMJelV6C80qPYw4k9JmskbqA2px5uNIlcoxF7FmbFxuhckA2iwNzgev3wAR4FDUQbc/qhAAAAAElFTkSuQmCC");
     background-position: right 10px center;
@@ -174,14 +195,14 @@ select {
 }
 
 input:focus {
-    border: 1px solid #1778f2;
+    border: 1px solid var(--logo);
 }
 
 .primary {
     all: unset;
     font-family: sfpro;
-    background-color: #1778f2;
-    color: white;
+    background-color: var(--logo);
+    color: var(--text);
     padding: 10px;
     margin: 20px;
     border-radius: 5px;
@@ -193,8 +214,8 @@ input:focus {
 .success {
     all: unset;
     font-family: sfpro;
-    background-color: #30ab5a;
-    color: white;
+    background-color: var(--success);
+    color: var(--text);
     padding: 10px;
     margin-left: 10px;
     margin-right: 10px;
@@ -211,16 +232,18 @@ input:focus {
     width: calc(100% - 40px);
     margin-left: 20px;
     margin-right: 20px;
-    border-bottom: 1px solid #dadde1;
+    border-bottom: 1px solid var(--light);
     margin-bottom: 10px;
     margin-top: 10px;
+    z-index: 2;
 }
 
 .fullline {
     width: calc(100%);
-    border-bottom: 1px solid #dadde1;
+    border-bottom: 1px solid var(--light);
     margin-bottom: 10px;
     margin-top: 10px;
+    z-index: 2;
 }
 
 footer {
@@ -236,7 +259,7 @@ footer {
     position: absolute;
     width: 100vw;
     height: 100vh;
-    background-color: rgba(255, 255, 255, .8);
+    background-color: var(--popup);
     margin: 0;
     padding: 0;
     top: 0;
@@ -280,7 +303,7 @@ footer {
     width: 2.5em;
     height: 2.5em;
     border-radius: 3em;
-    background-color: #e4e6e8;
+    background-color: var(--hover);
     flex-shrink: 0;
 }
 
@@ -303,5 +326,40 @@ form {
 }
 
 #load a:hover {
-    border-bottom: #606770 1px solid;
+    border-bottom: var(--medium) 1px solid;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        --primary: #242424 !important;
+        --secondary: #181818 !important;
+        --hover: #1b1b1b !important;
+        --light: #3e4042 !important;
+        --mild: #1b1b1b !important;
+        --medium: #e2ded6 !important;
+        --extreme: #e2ded6 !important;
+        --logo: #1778f2 !important;
+        --error: #f02849 !important;
+        --success: #30ab5a !important;
+        --text: #ffffff !important;
+        --banner: #6b6b6b !important;
+        --popup: #242424cc !important;
+    }
+    
+    body .icons {
+        filter: invert(100%) !important;
+    }
+    
+    body .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%) !important;
+    }
+    
+    body select {
+        filter: invert(100%) !important;
+        background-color: var(--primary) I !important;
+        color: var(--primary) !important;
+        border: 1px solid var(--primary) !important;
+    }
 }
 \ No newline at end of file
diff --git a/public/css/people.css b/public/css/people.css
index b8cf025..5d84411 100644
--- a/public/css/people.css
+++ b/public/css/people.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
 }
 
 #users {
@@ -9,9 +9,10 @@ body {
 }
 
 .person {
+    color: var(--text);
     width: 30em;
     height: fit-content;
-    background-color: white;
+    background-color: var(--primary);
     border-radius: 10px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
     margin-bottom: 1.5em;
@@ -25,7 +26,7 @@ body {
     height: 10em;
     padding: 0;
     display: block;
-    background-color: #e4e6e8;
+    background-color: var(--banner);
     flex-shrink: 0;
 }
 
diff --git a/public/css/profile.css b/public/css/profile.css
index 467c756..3a16d56 100644
--- a/public/css/profile.css
+++ b/public/css/profile.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
 }
 
 .spacer {
@@ -7,7 +7,7 @@ body {
 }
 
 #top {
-    background-color: white;
+    background-color: var(--primary);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -16,7 +16,7 @@ body {
 }
 
 #banner {
-    background-image: linear-gradient(#949494, white, white);
+    background-image: linear-gradient(var(--banner), var(--primary), var(--primary));
     height: 30em;
     width: 100%;
     display: flex;
@@ -26,7 +26,7 @@ body {
 #banner div, #banner img {
     width: 80em;
     height: inherit;
-    background-color: #e4e6e8;
+    background-color: var(--hover);
     border-radius: 0px 0px 20px 20px;
 }
 
@@ -37,11 +37,11 @@ body {
 }
 
 .face {
-    background-color: #e4e6e8;
+    background-color: var(--hover);
     height: 12em;
     width: 12em;
     border-radius: 7em;
-    border: solid 5px white;
+    border: solid 5px var(--primary);
     margin-top: -2em;
     margin-left: 2em;
     margin-right: 2em;
@@ -73,18 +73,18 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #606770;
+    color: var(--medium);
     cursor: pointer;
     flex: 0;
 }
 
 .profilebuttons button:hover {
-    background-color: #dddfe2;
+    background-color: var(--mild);
 }
 
 .selected {
-    color: #1778f2 !important;
-    border-bottom: 3px solid #1778f2 !important;
+    color: var(--logo) !important;
+    border-bottom: 3px solid var(--logo) !important;
 }
 
 #about {
@@ -100,7 +100,7 @@ body {
 }
 
 #about .ltext {
-    border-right: 2px solid #dadde1;
+    border-right: 2px solid var(--mild);
     padding: 10px;
     padding-right: 3em;
 }
diff --git a/public/js/home.js b/public/js/home.js
index ee3d6f0..cf56eca 100644
--- a/public/js/home.js
+++ b/public/js/home.js
@@ -33,17 +33,17 @@ function parsePost(post) {
                 <span class="gtext mtext">${parseDate(new Date(post.date))}</span>
             </div>
         </div>
-        <p class="mtext">
+        <p class="mtext" style="color: var(--text);">
             ${post.content.replace(/\n/g,'<br>')}
         </p>
-        <span class="gtext mtext">
-                ${Object.keys(post.likes).map(k => post.likes[k]).filter(v => v !== false).length} Likes
+        <span class="gtext mtext likes">
+                ${post.likes.length} Likes
         </span>
         <div class="fullline nb"></div>
         <div class="postbuttons">
             <span class="likeclicky" onclick="like(this)">
                 <i class="liketoggle icons like ${post.likes.includes(data.user.user_id) ? 'blue' : ''}"></i>
-                <span class="liketoggle bold ${post.likes.includes(data.user.user_id) ? 'blue' : ''}">Like</span>
+                <span class="liketoggle bold ${post.likes.includes(data.user.user_id) ? 'bltext' : ''}">Like</span>
             </span>
             <span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()">
                 <i class="icons comm"></i>
@@ -95,11 +95,12 @@ async function like(span) {
         .getElementsByClassName("liketoggle")
     if (current) {
         buttons[0].classList.remove("blue")
-        buttons[1].classList.remove("blue")
+        buttons[1].classList.remove("bltext")
     } else {
         buttons[0].classList.add("blue")
-        buttons[1].classList.add("blue")
+        buttons[1].classList.add("bltext")
     }
+    container.getElementsByClassName("likes")[0].innerHTML = post.likes.length + " Likes"
 }
 
 async function comment(event) {
diff --git a/public/js/people.js b/public/js/people.js
index 5c1026b..15fde59 100644
--- a/public/js/people.js
+++ b/public/js/people.js
@@ -1,6 +1,6 @@
 function parseUser(user) {
     const html = `
-        <a class="person" href="/profile?id=${user.id}">
+        <a class="person" href="/profile?id=${user.user_id}">
             <div class="profile">
 
             </div>
diff --git a/public/js/profile.js b/public/js/profile.js
index 787e2b2..1e14c21 100644
--- a/public/js/profile.js
+++ b/public/js/profile.js
@@ -90,22 +90,26 @@ async function load() {
         params[key] = value
     }
 
-    data.user = (await loadself()).json;
-    data.users[data.user.user_id] = data.user
+    data.self = (await loadself()).json;
+    data.users[data.self.user_id] = data.self
     let id;
     
     if (params.id !== undefined && !isNaN(params.id)) {
 
         id = parseInt(params.id);
     } else {
-        id = data.user.user_id
+        id = data.self.user_id
     }
 
-    isself = id === data.user.user_id
+    isself = id === data.self.user_id
 
     const posts = (await loadusersposts(id)).json
     data.posts.push(... posts)
     const batch = []
+    
+    if (!isself) {
+        batch.push(id)
+    }
     for (const post of posts) {
         for(const comment of post.comments) {
             if (data.users[comment[0]] !== undefined) continue
@@ -120,6 +124,7 @@ async function load() {
     for (const user of users) {
         data.users[user.user_id] = user
     }
+    data.user = data.users[id]
     render()
 }
 
diff --git a/src/console.rs b/src/console.rs
index c78b3e7..16bf4a3 100644
--- a/src/console.rs
+++ b/src/console.rs
@@ -248,7 +248,7 @@ pub async fn generate() -> Response {
         <body>
             <div id="header">
                 <span class="logo"><a href="/">xssbook</a></span>
-                <span class="gtext desc" style="margin-left: 6em; font-size: 2em">Console</span>
+                <span class="gtext desc" style="margin-left: 6em; font-size: 2em; color: #606770">Console</span>
             </div>
             <div style="margin-bottom: 3.5em"></div>
         "#
author	Tyler Murphy <tylermurphy534@gmail.com>	2023-01-30 18:55:36 -0500
committer	Tyler Murphy <tylermurphy534@gmail.com>	2023-01-30 18:55:36 -0500
commit	0a432890906abde10d30b0c6d03aa0ee9d665180 (patch)
tree	453301dec88fe8cfd6d2a625fd6266345254c978
parent	change green color (diff)
download	xssbook-0a432890906abde10d30b0c6d03aa0ee9d665180.tar.gz xssbook-0a432890906abde10d30b0c6d03aa0ee9d665180.tar.bz2 xssbook-0a432890906abde10d30b0c6d03aa0ee9d665180.zip