freya/xssbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

dark mode

Browse source
This commit is contained in:
Tyler Murphy 2023-01-30 18:55:36 -05:00
parent 575dceb146
commit 0a43289090
13 changed files with 143 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/404.html
View file

@ -5,6 +5,7 @@
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/404.css"> <link rel="stylesheet" href="/css/404.css">
<link rel="stylesheet" href="/css/header.css"> <link rel="stylesheet" href="/css/header.css">
<script src="/js/main.js"></script>
<title>XSSBook - Not Found</title> <title>XSSBook - Not Found</title>
</head> </head>
<body> <body>

2
public/admin.html
View file

@ -12,7 +12,7 @@
<script src="/js/admin.js"></script> <script src="/js/admin.js"></script>
<div id="header"> <div id="header">
<span class="logo"><a href="/">xssbook</a></span> <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>
<div id="login" class="hidden"> <div id="login" class="hidden">
<form autocomplete="off" onsubmit="auth(event)"> <form autocomplete="off" onsubmit="auth(event)">

2
public/css/404.css
View file

@ -1,5 +1,5 @@
body { body {
background-color: #f0f2f5; background-color: var(--secondary)
} }
.error { .error {

10
public/css/header.css
View file

@ -1,6 +1,6 @@
#header { #header {
height: 3.5em; height: 3.5em;
background-color: white; background-color: var(--primary);
position: fixed; position: fixed;
width: 100vw; width: 100vw;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 16px rgba(0, 0, 0, .05); box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 16px rgba(0, 0, 0, .05);
@ -36,16 +36,16 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #606770; color: var(--medium);
} }
#header .buttons a:hover { #header .buttons a:hover {
background-color: #dddfe2; background-color: var(--hover);
} }
.selected { .selected {
color: #1778f2 !important; color: var(--logo) !important;
border-bottom: 3px solid #1778f2; border-bottom: 3px solid var(--logo);
} }
#header .pfp, #header .pfp img { #header .pfp, #header .pfp img {

25
public/css/home.css
View file

@ -1,5 +1,5 @@
body { body {
background-color: #f0f2f5; background-color: var(--secondary);
} }
#posts, #create { #posts, #create {
@ -11,7 +11,7 @@ body {
.post, .create { .post, .create {
width: 40em; width: 40em;
height: fit-content; height: fit-content;
background-color: white; background-color: var(--primary);
border-radius: 10px; border-radius: 10px;
padding: 15px; padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05); box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
@ -20,6 +20,7 @@ body {
.post { .post {
padding-bottom: 0; padding-bottom: 0;
color: var(--text);
} }
.create { .create {
@ -29,14 +30,14 @@ body {
.create button { .create button {
all: unset; all: unset;
background-color: #f0f2f5; background-color: var(--secondary);
border-radius: 3em; border-radius: 3em;
margin-left: 1em; margin-left: 1em;
flex: 1; flex: 1;
} }
.create button:hover { .create button:hover {
background-color: #e4e6e8; background-color: var(--hover);
cursor: pointer; cursor: pointer;
} }
@ -64,12 +65,12 @@ body {
cursor: pointer; cursor: pointer;
padding: 7px; padding: 7px;
border-radius: 5px; border-radius: 5px;
color: #606770; color: var(--medium);
margin: 3px margin: 3px
} }
.postbuttons>span:hover { .postbuttons>span:hover {
background-color: #e4e6e8; background-color: var(--hover);
} }
.postname { .postname {
@ -90,7 +91,9 @@ body {
} }
.blue { .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 { .like {
@ -103,7 +106,7 @@ body {
.createpost { .createpost {
position: relative; position: relative;
background-color: white; background-color: var(--primary);
width: 450px; width: 450px;
padding: 20px; padding: 20px;
border-radius: .5em; border-radius: .5em;
@ -124,6 +127,8 @@ body {
width: 100%; width: 100%;
height: 120px; height: 120px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: transparent;
color: var(--text);
} }
.createpost>span { .createpost>span {
@ -157,7 +162,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 10px; margin-left: 10px;
background-color: #f0f2f5; background-color: var(--secondary);
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
padding-right: 10px; padding-right: 10px;
@ -177,6 +182,6 @@ body {
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
width: calc(100% - 20px); width: calc(100% - 20px);
background-color: #f0f2f5; background-color: var(--secondary);
font-family: sfpro; font-family: sfpro;
} }

4
public/css/login.css
View file

@ -1,5 +1,5 @@
.login { .login {
background-color: #f0f2f5; background-color: var(--secondary);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
@ -11,7 +11,7 @@
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; 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); box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
border-radius: 8px; border-radius: 8px;
width: 396px; width: 396px;

112
public/css/main.css
View file

@ -1,11 +1,28 @@
body { 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; width: 100vw;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: var(--text);
} }
@font-face { @font-face {
@ -24,7 +41,7 @@ body {
} }
.logo { .logo {
color: #1778f2; color: var(--logo);
font-size: 3.5em; font-size: 3.5em;
font-family: facebook; font-family: facebook;
} }
@ -39,12 +56,16 @@ body {
.btext { .btext {
font-family: sfpro; font-family: sfpro;
color: #1778f2 color: var(--logo)
}
.bltext {
color: var(--logo)
} }
.error { .error {
font-family: sfpro; font-family: sfpro;
color: #f02849; color: var(--error);
padding-top: 10px; padding-top: 10px;
margin-bottom: -10px; margin-bottom: -10px;
font-size: 15px; font-size: 15px;
@ -52,12 +73,12 @@ body {
.gtext { .gtext {
font-family: sfpro; font-family: sfpro;
color: #606770 color: var(--medium)
} }
.label { .label {
font-family: sfpro; font-family: sfpro;
color: #606770; color: var(--medium);
font-size: 15px; font-size: 15px;
padding-top: 10px; padding-top: 10px;
padding-left: 10px; padding-left: 10px;
@ -103,19 +124,19 @@ span {
footer { footer {
bottom: 0; bottom: 0;
height: 400px; height: 400px;
background-color: white; background-color: var(--primary);
} }
input { input {
flex: 1; flex: 1;
font-family: sfpro; font-family: sfpro;
background-color: white; background-color: var(--primary);
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
margin-bottom: 0; margin-bottom: 0;
border-radius: 5px; border-radius: 5px;
border: 1px solid #dddfe2; border: 1px solid var(--light);
color: #1d2129; color: var(--extreme);
font-size: 18px; font-size: 18px;
} }
@ -128,12 +149,12 @@ input {
display: inline-block; display: inline-block;
position: relative; position: relative;
font-family: sfpro; font-family: sfpro;
background-color: white; background-color: var(--primary);
margin: 10px; margin: 10px;
margin-bottom: 0; margin-bottom: 0;
border-radius: 5px; border-radius: 5px;
border: 1px solid #dddfe2; border: 1px solid var(--light);
color: #1d2129; color: var(--extreme);
font-size: 15px; font-size: 15px;
flex: 1 0 auto; flex: 1 0 auto;
} }
@ -143,7 +164,7 @@ input {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
width: auto; width: auto;
color: #1d2129; color: var(--extreme);
} }
[type="radio"] { [type="radio"] {
@ -159,13 +180,13 @@ select {
all: unset; all: unset;
flex: 1; flex: 1;
font-family: sfpro; font-family: sfpro;
background-color: white; background-color: var(--primary);
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
margin-bottom: 0; margin-bottom: 0;
border-radius: 5px; border-radius: 5px;
border: 1px solid #dddfe2; border: 1px solid var(--light);
color: #1d2129; color: var(--extreme);
font-size: 15px; font-size: 15px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVMaXEFBQUFBQUFBQXG+MOgAAAAA3RSTlMAn3BcqiM3AAAAOUlEQVQIW53BsQ2AMAwAMJelV6C80qPYw4k9JmskbqA2px5uNIlcoxF7FmbFxuhckA2iwNzgev3wAR4FDUQbc/qhAAAAAElFTkSuQmCC"); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVMaXEFBQUFBQUFBQXG+MOgAAAAA3RSTlMAn3BcqiM3AAAAOUlEQVQIW53BsQ2AMAwAMJelV6C80qPYw4k9JmskbqA2px5uNIlcoxF7FmbFxuhckA2iwNzgev3wAR4FDUQbc/qhAAAAAElFTkSuQmCC");
background-position: right 10px center; background-position: right 10px center;
@ -174,14 +195,14 @@ select {
} }
input:focus { input:focus {
border: 1px solid #1778f2; border: 1px solid var(--logo);
} }
.primary { .primary {
all: unset; all: unset;
font-family: sfpro; font-family: sfpro;
background-color: #1778f2; background-color: var(--logo);
color: white; color: var(--text);
padding: 10px; padding: 10px;
margin: 20px; margin: 20px;
border-radius: 5px; border-radius: 5px;
@ -193,8 +214,8 @@ input:focus {
.success { .success {
all: unset; all: unset;
font-family: sfpro; font-family: sfpro;
background-color: #30ab5a; background-color: var(--success);
color: white; color: var(--text);
padding: 10px; padding: 10px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
@ -211,16 +232,18 @@ input:focus {
width: calc(100% - 40px); width: calc(100% - 40px);
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
border-bottom: 1px solid #dadde1; border-bottom: 1px solid var(--light);
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 10px; margin-top: 10px;
z-index: 2;
} }
.fullline { .fullline {
width: calc(100%); width: calc(100%);
border-bottom: 1px solid #dadde1; border-bottom: 1px solid var(--light);
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 10px; margin-top: 10px;
z-index: 2;
} }
footer { footer {
@ -236,7 +259,7 @@ footer {
position: absolute; position: absolute;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(255, 255, 255, .8); background-color: var(--popup);
margin: 0; margin: 0;
padding: 0; padding: 0;
top: 0; top: 0;
@ -280,7 +303,7 @@ footer {
width: 2.5em; width: 2.5em;
height: 2.5em; height: 2.5em;
border-radius: 3em; border-radius: 3em;
background-color: #e4e6e8; background-color: var(--hover);
flex-shrink: 0; flex-shrink: 0;
} }
@ -303,5 +326,40 @@ form {
} }
#load a:hover { #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;
}
} }

7
public/css/people.css
View file

@ -1,5 +1,5 @@
body { body {
background-color: #f0f2f5; background-color: var(--secondary);
} }
#users { #users {
@ -9,9 +9,10 @@ body {
} }
.person { .person {
color: var(--text);
width: 30em; width: 30em;
height: fit-content; height: fit-content;
background-color: white; background-color: var(--primary);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05); box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
margin-bottom: 1.5em; margin-bottom: 1.5em;
@ -25,7 +26,7 @@ body {
height: 10em; height: 10em;
padding: 0; padding: 0;
display: block; display: block;
background-color: #e4e6e8; background-color: var(--banner);
flex-shrink: 0; flex-shrink: 0;
} }

22
public/css/profile.css
View file

@ -1,5 +1,5 @@
body { body {
background-color: #f0f2f5; background-color: var(--secondary);
} }
.spacer { .spacer {
@ -7,7 +7,7 @@ body {
} }
#top { #top {
background-color: white; background-color: var(--primary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -16,7 +16,7 @@ body {
} }
#banner { #banner {
background-image: linear-gradient(#949494, white, white); background-image: linear-gradient(var(--banner), var(--primary), var(--primary));
height: 30em; height: 30em;
width: 100%; width: 100%;
display: flex; display: flex;
@ -26,7 +26,7 @@ body {
#banner div, #banner img { #banner div, #banner img {
width: 80em; width: 80em;
height: inherit; height: inherit;
background-color: #e4e6e8; background-color: var(--hover);
border-radius: 0px 0px 20px 20px; border-radius: 0px 0px 20px 20px;
} }
@ -37,11 +37,11 @@ body {
} }
.face { .face {
background-color: #e4e6e8; background-color: var(--hover);
height: 12em; height: 12em;
width: 12em; width: 12em;
border-radius: 7em; border-radius: 7em;
border: solid 5px white; border: solid 5px var(--primary);
margin-top: -2em; margin-top: -2em;
margin-left: 2em; margin-left: 2em;
margin-right: 2em; margin-right: 2em;
@ -73,18 +73,18 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #606770; color: var(--medium);
cursor: pointer; cursor: pointer;
flex: 0; flex: 0;
} }
.profilebuttons button:hover { .profilebuttons button:hover {
background-color: #dddfe2; background-color: var(--mild);
} }
.selected { .selected {
color: #1778f2 !important; color: var(--logo) !important;
border-bottom: 3px solid #1778f2 !important; border-bottom: 3px solid var(--logo) !important;
} }
#about { #about {
@ -100,7 +100,7 @@ body {
} }
#about .ltext { #about .ltext {
border-right: 2px solid #dadde1; border-right: 2px solid var(--mild);
padding: 10px; padding: 10px;
padding-right: 3em; padding-right: 3em;
} }

13
public/js/home.js
View file

@ -33,17 +33,17 @@ function parsePost(post) {
<span class="gtext mtext">${parseDate(new Date(post.date))}</span> <span class="gtext mtext">${parseDate(new Date(post.date))}</span>
</div> </div>
</div> </div>
<p class="mtext"> <p class="mtext" style="color: var(--text);">
${post.content.replace(/\n/g,'<br>')} ${post.content.replace(/\n/g,'<br>')}
</p> </p>
<span class="gtext mtext"> <span class="gtext mtext likes">
${Object.keys(post.likes).map(k => post.likes[k]).filter(v => v !== false).length} Likes ${post.likes.length} Likes
</span> </span>
<div class="fullline nb"></div> <div class="fullline nb"></div>
<div class="postbuttons"> <div class="postbuttons">
<span class="likeclicky" onclick="like(this)"> <span class="likeclicky" onclick="like(this)">
<i class="liketoggle icons like ${post.likes.includes(data.user.user_id) ? 'blue' : ''}"></i> <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>
<span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()"> <span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()">
<i class="icons comm"></i> <i class="icons comm"></i>
@ -95,11 +95,12 @@ async function like(span) {
.getElementsByClassName("liketoggle") .getElementsByClassName("liketoggle")
if (current) { if (current) {
buttons[0].classList.remove("blue") buttons[0].classList.remove("blue")
buttons[1].classList.remove("blue") buttons[1].classList.remove("bltext")
} else { } else {
buttons[0].classList.add("blue") 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) { async function comment(event) {

2
public/js/people.js
View file

@ -1,6 +1,6 @@
function parseUser(user) { function parseUser(user) {
const html = ` const html = `
<a class="person" href="/profile?id=${user.id}"> <a class="person" href="/profile?id=${user.user_id}">
<div class="profile"> <div class="profile">
</div> </div>

13
public/js/profile.js
View file

@ -90,22 +90,26 @@ async function load() {
params[key] = value params[key] = value
} }
data.user = (await loadself()).json; data.self = (await loadself()).json;
data.users[data.user.user_id] = data.user data.users[data.self.user_id] = data.self
let id; let id;
if (params.id !== undefined && !isNaN(params.id)) { if (params.id !== undefined && !isNaN(params.id)) {
id = parseInt(params.id); id = parseInt(params.id);
} else { } 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 const posts = (await loadusersposts(id)).json
data.posts.push(... posts) data.posts.push(... posts)
const batch = [] const batch = []
if (!isself) {
batch.push(id)
}
for (const post of posts) { for (const post of posts) {
for(const comment of post.comments) { for(const comment of post.comments) {
if (data.users[comment[0]] !== undefined) continue if (data.users[comment[0]] !== undefined) continue
@ -120,6 +124,7 @@ async function load() {
for (const user of users) { for (const user of users) {
data.users[user.user_id] = user data.users[user.user_id] = user
} }
data.user = data.users[id]
render() render()
} }

2
src/console.rs
View file

@ -248,7 +248,7 @@ pub async fn generate() -> Response {
<body> <body>
<div id="header"> <div id="header">
<span class="logo"><a href="/">xssbook</a></span> <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>
<div style="margin-bottom: 3.5em"></div> <div style="margin-bottom: 3.5em"></div>
"# "#