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

more shit

Browse source
This commit is contained in:
Tyler Murphy 2023-01-20 12:26:51 -05:00
parent 0c7c21a86b
commit 773c5ed3db
11 changed files with 430 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
index.js
View file

@ -9,6 +9,18 @@ app.get('/', (req, res) => {
res.sendFile('login.html', { root: './public' }) res.sendFile('login.html', { root: './public' })
}) })
app.get('/home', (req, res) => {
res.sendFile('home.html', { root: './public' })
})
app.get('/people', (req, res) => {
res.sendFile('people.html', { root: './public' })
})
app.use((req, res, next) => {
res.status(404).sendFile('404.html', { root: './public' })
})
app.listen(port, () => { app.listen(port, () => {
console.log(`App listening on port http://127.0.0.1:${port}`) console.log(`App listening on port http://127.0.0.1:${port}`)
}) })

18
public/404.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/404.css">
<link rel="stylesheet" href="css/header.css">
<title>XSSBook - Home</title>
</head>
<body>
<div id="header">
<span class="logo">xssbook</span>
</div>
<div class="error">
<span class="logo">404</span>
<span class="gtext desc">Page not found.</span>
</div>
</body>

20
public/css/404.css Normal file
View file

@ -0,0 +1,20 @@
body {
background-color: #f0f2f5;
}
.error {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
flex-direction: column;
}
.error .logo {
font-size: 100px;
}
.desc {
font-size: 40px;
}

40
public/css/header.css Normal file
View file

@ -0,0 +1,40 @@
#header {
height: 3.5em;
background-color: white;
position: absolute;
width: 100vw;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 16px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
justify-content: space-between;
}
#header .logo {
position: absolute;
font-size: 2.5em;
padding-left: .5em;
padding-top: .2em;
}
#header .buttons {
flex: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#header .buttons a {
padding: 0px 50px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #606770;
}
.selected {
color: #1778f2 !important;
border-bottom: 3px solid #1778f2;
}

3
public/css/home.css Normal file
View file

@ -0,0 +1,3 @@
body {
background-color: #f0f2f5;
}

8
public/css/login.css
View file

@ -9,11 +9,13 @@
.prompt { .prompt {
display: flex; display: flex;
position: relative;
flex-direction: column; flex-direction: column;
background-color: white; background-color: white;
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;
padding: 10px
} }
.show { .show {
@ -25,7 +27,6 @@
.login-button { .login-button {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 20px; font-size: 20px;
font-weight: 10000;
} }
.newacc { .newacc {
@ -33,6 +34,11 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.signacc {
margin: 10px 70px;
margin-bottom: 0;
}
@media (max-aspect-ratio: 2/3) { @media (max-aspect-ratio: 2/3) {
.login { .login {
flex-direction: column; flex-direction: column;

136
public/css/main.css
View file

@ -18,6 +18,11 @@ body {
src: url("../fonts/sfpro.otf") format("opentype"); src: url("../fonts/sfpro.otf") format("opentype");
} }
@font-face {
font-family: sfprobold;
src: url("../fonts/sfprobold.otf") format("opentype");
}
.logo { .logo {
color: #1778f2; color: #1778f2;
font-size: 3.5em; font-size: 3.5em;
@ -37,6 +42,23 @@ body {
color: #1778f2 color: #1778f2
} }
.gtext {
font-family: sfpro;
color: #606770
}
.label {
font-family: sfpro;
color: #606770;
font-size: 15px;
padding-top: 10px;
padding-left: 10px;
}
.stext {
font-size: 10px;
}
.ctext { .ctext {
font-family: sfpro; font-family: sfpro;
text-align: center; text-align: center;
@ -64,11 +86,11 @@ footer {
} }
input { input {
all: unset; flex: 1;
font-family: sfpro; font-family: sfpro;
background-color: white; background-color: white;
padding: 10px; padding: 10px;
margin: 20px; margin: 10px;
margin-bottom: 0; margin-bottom: 0;
border-radius: 5px; border-radius: 5px;
border: 1px solid #dddfe2; border: 1px solid #dddfe2;
@ -76,6 +98,60 @@ input {
font-size: 18px; font-size: 18px;
} }
.radiomenu {
display: flex;
flex-wrap: wrap;
}
.radiomenu span {
display: inline-block;
position: relative;
font-family: sfpro;
background-color: white;
margin: 10px;
margin-bottom: 0;
border-radius: 5px;
border: 1px solid #dddfe2;
color: #1d2129;
font-size: 15px;
flex: 1 0 auto;
}
.radiomenu span label {
padding: 10px;
display: block;
box-sizing: border-box;
width: auto;
color: #1d2129;
}
[type="radio"] {
height: 40px;
margin: 0;
position: absolute;
right: 10px;
top: 0;
text-align: left;
}
select {
all: unset;
flex: 1;
font-family: sfpro;
background-color: white;
padding: 10px;
margin: 10px;
margin-bottom: 0;
border-radius: 5px;
border: 1px solid #dddfe2;
color: #1d2129;
font-size: 15px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVMaXEFBQUFBQUFBQXG+MOgAAAAA3RSTlMAn3BcqiM3AAAAOUlEQVQIW53BsQ2AMAwAMJelV6C80qPYw4k9JmskbqA2px5uNIlcoxF7FmbFxuhckA2iwNzgev3wAR4FDUQbc/qhAAAAAElFTkSuQmCC");
background-position: right 10px center;
background-repeat: no-repeat;
background-size: 15px;
}
input:focus { input:focus {
border: 1px solid #1778f2; border: 1px solid #1778f2;
} }
@ -88,7 +164,7 @@ input:focus {
padding: 10px; padding: 10px;
margin: 20px; margin: 20px;
border-radius: 5px; border-radius: 5px;
font-weight: 1000; padding-bottom: 15px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
@ -99,7 +175,6 @@ input:focus {
background-color: #42b72a; background-color: #42b72a;
color: white; color: white;
padding: 10px; padding: 10px;
margin-bottom: 10px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
border-radius: 5px; border-radius: 5px;
@ -107,6 +182,10 @@ input:focus {
cursor: pointer; cursor: pointer;
} }
.bold {
font-family: sfprobold;
}
.line { .line {
width: calc(100% - 40px); width: calc(100% - 40px);
margin-left: 20px; margin-left: 20px;
@ -116,6 +195,13 @@ input:focus {
margin-top: 10px; margin-top: 10px;
} }
.fullline {
width: calc(100%);
border-bottom: 1px solid #dadde1;
margin-bottom: 10px;
margin-top: 10px;
}
footer { footer {
text-align: center; text-align: center;
font-family: sfpro; font-family: sfpro;
@ -124,3 +210,45 @@ footer {
font-size: 13px; font-size: 13px;
color: #737373; color: #737373;
} }
#popup {
position: absolute;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, .8);
margin: 0;
padding: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
.row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.row input {
width: 50%
}
.close {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
right: 12px;
top: 12px;
cursor: pointer;
background-size: 20px;
background-position: right;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVgZ3FHcExgZ3FgZ3Fd28LEAAAAA3RSTlOfAHBcPEovAAAASklEQVQIW2MIBQMG7FRmaGgmUG5PaKgdkNovGvIPSPkfDf4IpII/+h8FUiF/7EVB2u3/gE3x/4hMQQShSqAaoNqhhkGNhlqE2y0A1E85Y0JErBoAAAAASUVORK5CYII=');
}
.hidden {
visibility: hidden;
pointer-events: none;
}

BIN
public/fonts/sfprobold.otf Normal file
View file

Binary file not shown.

29
public/home.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/header.css">
<title>XSSBook - Home</title>
</head>
<body>
<div id="header">
<span class="logo">xssbook</span>
<div class="buttons">
<a id="home" class="selected" href="home">
<svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
<path d="M25.825 12.29C25.824 12.289 25.823 12.288 25.821 12.286L15.027 2.937C14.752 2.675 14.392 2.527 13.989 2.521 13.608 2.527 13.248 2.675 13.001 2.912L2.175 12.29C1.756 12.658 1.629 13.245 1.868 13.759 2.079 14.215 2.567 14.479 3.069 14.479L5 14.479 5 23.729C5 24.695 5.784 25.479 6.75 25.479L11 25.479C11.552 25.479 12 25.031 12 24.479L12 18.309C12 18.126 12.148 17.979 12.33 17.979L15.67 17.979C15.852 17.979 16 18.126 16 18.309L16 24.479C16 25.031 16.448 25.479 17 25.479L21.25 25.479C22.217 25.479 23 24.695 23 23.729L23 14.479 24.931 14.479C25.433 14.479 25.921 14.215 26.132 13.759 26.371 13.245 26.244 12.658 25.825 12.29"></path>
</svg>
</a>
<a id="people" href="people">
<svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
<path d="M10.5 4.5c-2.272 0-2.75 1.768-2.75 3.25C7.75 9.542 8.983 11 10.5 11s2.75-1.458 2.75-3.25c0-1.482-.478-3.25-2.75-3.25zm0 8c-2.344 0-4.25-2.131-4.25-4.75C6.25 4.776 7.839 3 10.5 3s4.25 1.776 4.25 4.75c0 2.619-1.906 4.75-4.25 4.75zm9.5-6c-1.41 0-2.125.841-2.125 2.5 0 1.378.953 2.5 2.125 2.5 1.172 0 2.125-1.122 2.125-2.5 0-1.659-.715-2.5-2.125-2.5zm0 6.5c-1.999 0-3.625-1.794-3.625-4 0-2.467 1.389-4 3.625-4 2.236 0 3.625 1.533 3.625 4 0 2.206-1.626 4-3.625 4zm4.622 8a.887.887 0 00.878-.894c0-2.54-2.043-4.606-4.555-4.606h-1.86c-.643 0-1.265.148-1.844.413a6.226 6.226 0 011.76 4.336V21h5.621zm-7.122.562v-1.313a4.755 4.755 0 00-4.749-4.749H8.25A4.755 4.755 0 003.5 20.249v1.313c0 .518.421.938.937.938h12.125c.517 0 .938-.42.938-.938zM20.945 14C24.285 14 27 16.739 27 20.106a2.388 2.388 0 01-2.378 2.394h-5.81a2.44 2.44 0 01-2.25 1.5H4.437A2.44 2.44 0 012 21.562v-1.313A6.256 6.256 0 018.25 14h4.501a6.2 6.2 0 013.218.902A5.932 5.932 0 0119.084 14h1.861z"></path>
</svg>
</a>
</div>
</div>
<p>
b
</p>
</body>

142
public/login.html
View file

@ -15,10 +15,148 @@
<div class="prompt"> <div class="prompt">
<input type="text" name="email" id="email" placeholder="Email" autofocus="1"> <input type="text" name="email" id="email" placeholder="Email" autofocus="1">
<input type="password" name="pass" id="pass" placeholder="Password"> <input type="password" name="pass" id="pass" placeholder="Password">
<button class="primary login-button" value="1" name="login" type="submit" id="login">Log In</button> <button class="primary login-button bold" value="1" name="login" type="submit" id="login">Log In</button>
<a class="btext ctext">Forgot Password?</a> <a class="btext ctext">Forgot Password?</a>
<div class="line"></div> <div class="line"></div>
<a class="success newacc">Create new account</a> <button class="success newacc" onclick="document.getElementById('popup').classList.remove('hidden')">Create new account</button>
</div>
<div id="popup" class="hidden">
<div class="prompt">
<div class="close" onclick="document.getElementById('popup').classList.add('hidden')"></div>
<span class="text bold">Sign Up</span>
<span class="gtext">It's quick and easy.</span>
<div class="fullline"></div>
<div class="row">
<input type="text" name="firstname" id="firstname" placeholder="First Name" autofocus="1">
<input type="text" name="lastname" id="lastname" placeholder="Last Name">
</div>
<input type="text" name="newemail" id="newemail" placeholder="Email" autofocus="1">
<input type="password" name="newpass" id="newpass" placeholder="Password">
<span class="label">Birthday</span>
<div class="row">
<select name="month" id="month" title="Month">
<option value="1" selected="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="day" id="day" title="Day">
<option value="1" selected="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="year" id="year" title="Year">
<option value="2023" selected="1">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
</select>
</div>
<span class="label">Gender</span>
<div class="radiomenu" data-type="radio" data-name="gender_wrapper">
<span>
<label class="gtext" for="female">Female</label>
<input id="female" type="radio" name="gender" value="1">
</span>
<span>
<label class="gtext" for="male">Male</label>
<input id="male" type="radio" name="gender" value="2">
</span>
<span>
<label class="gtext" for="lettuce">Lettuce</label>
<input id="lettuce" type="radio" name="gender" value="3">
</span>
</div>
<span class="label stext">By clicking Sign Up, you agree to have your password stored in plain text and have any javascript run on your pc at any time.</span>
<span class="label stext">XSSBook is not responsible for any ones loss of finances, mental state, relationships, or life when using this site.</span>
<button class="success signacc">Sign Up</button>
</div>
</div> </div>
</div> </div>
<footer> <footer>

29
public/people.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/header.css">
<title>XSSBook - Home</title>
</head>
<body>
<div id="header">
<span class="logo">xssbook</span>
<div class="buttons">
<a id="home" href="home">
<svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
<path d="M25.825 12.29C25.824 12.289 25.823 12.288 25.821 12.286L15.027 2.937C14.752 2.675 14.392 2.527 13.989 2.521 13.608 2.527 13.248 2.675 13.001 2.912L2.175 12.29C1.756 12.658 1.629 13.245 1.868 13.759 2.079 14.215 2.567 14.479 3.069 14.479L5 14.479 5 23.729C5 24.695 5.784 25.479 6.75 25.479L11 25.479C11.552 25.479 12 25.031 12 24.479L12 18.309C12 18.126 12.148 17.979 12.33 17.979L15.67 17.979C15.852 17.979 16 18.126 16 18.309L16 24.479C16 25.031 16.448 25.479 17 25.479L21.25 25.479C22.217 25.479 23 24.695 23 23.729L23 14.479 24.931 14.479C25.433 14.479 25.921 14.215 26.132 13.759 26.371 13.245 26.244 12.658 25.825 12.29"></path>
</svg>
</a>
<a id="people" class="selected" href="people">
<svg viewBox="0 0 28 28" fill="currentColor" height="28" width="28">
<path d="M10.5 4.5c-2.272 0-2.75 1.768-2.75 3.25C7.75 9.542 8.983 11 10.5 11s2.75-1.458 2.75-3.25c0-1.482-.478-3.25-2.75-3.25zm0 8c-2.344 0-4.25-2.131-4.25-4.75C6.25 4.776 7.839 3 10.5 3s4.25 1.776 4.25 4.75c0 2.619-1.906 4.75-4.25 4.75zm9.5-6c-1.41 0-2.125.841-2.125 2.5 0 1.378.953 2.5 2.125 2.5 1.172 0 2.125-1.122 2.125-2.5 0-1.659-.715-2.5-2.125-2.5zm0 6.5c-1.999 0-3.625-1.794-3.625-4 0-2.467 1.389-4 3.625-4 2.236 0 3.625 1.533 3.625 4 0 2.206-1.626 4-3.625 4zm4.622 8a.887.887 0 00.878-.894c0-2.54-2.043-4.606-4.555-4.606h-1.86c-.643 0-1.265.148-1.844.413a6.226 6.226 0 011.76 4.336V21h5.621zm-7.122.562v-1.313a4.755 4.755 0 00-4.749-4.749H8.25A4.755 4.755 0 003.5 20.249v1.313c0 .518.421.938.937.938h12.125c.517 0 .938-.42.938-.938zM20.945 14C24.285 14 27 16.739 27 20.106a2.388 2.388 0 01-2.378 2.394h-5.81a2.44 2.44 0 01-2.25 1.5H4.437A2.44 2.44 0 012 21.562v-1.313A6.256 6.256 0 018.25 14h4.501a6.2 6.2 0 013.218.902A5.932 5.932 0 0119.084 14h1.861z"></path>
</svg>
</a>
</div>
</div>
<p>
b
</p>
</body>