archive/bigly-chat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css improvements

Browse source
This commit is contained in:
biglyderv 2024-10-19 21:28:52 -04:00
parent 5609e1b530
commit 1c8ebcd482
11 changed files with 385 additions and 242 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
form/login.js
View file

@ -18,7 +18,7 @@ let main = new Route([], async function (req, res, input) {
if (isExist.length < 1) return { 'success': false, 'message': 'Account does not exist' }; if (isExist.length < 1) return { 'success': false, 'message': 'Account does not exist' };
let passHash = await compare(pass,isExist[0].password); let passHash = await compare(pass, isExist[0].password);
if (!passHash) if (!passHash)
return { 'success': false, 'message': 'Incorrect password' }; return { 'success': false, 'message': 'Incorrect password' };
@ -30,9 +30,9 @@ let main = new Route([], async function (req, res, input) {
token token
]) ])
res.cookie('token',token); res.cookie('token', token);
return {'success': true, 'message': 'Log in succeeded', 'redirect': (req.query.redirect + '?token=' + token) || '/', 'data': token}; return { 'success': true, 'message': 'Log in succeeded', 'redirect': (req.query.redirect == 'undefined' ? '/' : req.query.redirect) + '?token=' + token, 'data': token };
}); });
export default main; export default main;

4
index.js
View file

@ -37,6 +37,10 @@ app.post('/api/upload/:route', upload.single('file'), async (req, res) => {
res.send(await iterate(req, res, 'form')); res.send(await iterate(req, res, 'form'));
}) })
app.get('/pfp/*', (req,res) => {
res.redirect(301,'/static/img/logo.svg')
})
app.listen(port, () => { app.listen(port, () => {
console.log(`App listening on port ${port}`) console.log(`App listening on port ${port}`)
}) })

98
static/img/bg.svg Normal file
View file

@ -0,0 +1,98 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="403.94345"
height="210.69344"
viewBox="0 0 403.94344 210.69345"
version="1.1"
id="svg1"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="derv2.svg"
inkscape:export-filename="derv.png"
inkscape:export-xdpi="475.03"
inkscape:export-ydpi="475.03"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="2"
inkscape:cx="195.5"
inkscape:cy="125.25"
inkscape:window-width="1918"
inkscape:window-height="1056"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-maximized="1"
inkscape:current-layer="g9"
showgrid="false" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(76.97172,-19.653282)">
<rect
style="fill:#1b0e0e;fill-opacity:1;stroke:none;stroke-width:22.6689;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect2"
width="403.94342"
height="210.69344"
x="-76.971718"
y="19.653282" />
<path
id="rect5"
style="fill:#651c1c;fill-opacity:1;stroke:none;stroke-width:22.6689;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke fill markers"
d="m 326.97172,19.653285 c -144.46602,235.570445 -277.189031,189.388075 -403.94344,0 V 230.34672 h 403.94344 z"
sodipodi:nodetypes="ccccc" />
<g
id="g9"
transform="translate(50.274751,38.085818)">
<g
id="g5"
style="opacity:0.43007599">
<path
style="fill:none;fill-opacity:1;stroke:#d6caca;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 53.886535,130.0342 45.92708,96.657852"
id="path5"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-opacity:1;stroke:#d6caca;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 94.849217,128.78343 105.6371,94.699975"
id="path6" />
<path
id="path7"
style="fill:#d6caca;stroke-width:7.03332;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1"
d="m 134.3378,52.398358 c 0,17.663505 -7.68232,33.532711 -19.88798,44.448647 -10.54453,9.430345 7.81089,-0.30241 -39.294161,-1.19189 -32.68985,-0.61728 -28.417167,11.102235 -38.783551,2.38154 -12.998855,-10.935238 -21.25941,-27.32209 -21.25941,-45.638297 0,-32.9231 26.689447,-59.6125447 59.612547,-59.6125447 32.923095,0 59.612555,26.6894447 59.612555,59.6125447 z"
sodipodi:nodetypes="sssssss" />
<path
style="fill:none;fill-opacity:1;stroke:#d6caca;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 73.539105,91.923882 V 142.48202"
id="path9" />
<path
id="path8"
style="fill:#d6caca;stroke-width:4.67352;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1"
d="m 103.30303,147.29696 c 0,-13.30762 -5.413882,-23.15379 -5.413882,-23.15379 0,0 -12.433954,9.26293 -24.796571,9.38325 -9.983187,0.0972 -20.961784,-10.27953 -20.961784,-10.27953 0,0 -6.71763,10.2507 -6.71763,24.05007 0,24.80417 0.334132,33.74559 28.694932,33.74559 30.778355,0 29.194935,-8.94142 29.194935,-33.74559 z"
sodipodi:nodetypes="scscsss" />
</g>
<path
id="rect1"
d="M 48.087186,15.828224 V 85.02551 H 90.85315 c 0,0 12.95939,-22.283993 12.95939,-34.599281 0,-12.31527 -12.95939,-34.598005 -12.95939,-34.598005 z m 4.373791,8.099606 H 84.53545 c 0,0 9.71954,17.066172 9.71954,26.498399 0,9.432228 -9.71954,26.499659 -9.71954,26.499659 H 52.460977 Z"
style="fill:#651c1c;fill-opacity:1;stroke:#651c1c;stroke-width:6.4797;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
<path
style="fill:#1b0e0e;fill-opacity:1;stroke:none;stroke-width:9.54825;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path1"
d="m 50.298318,135.91136 c 0.246374,0.33238 0.481938,0.66962 0.739122,0.99716 0.481363,0.61308 0.999613,1.2089 1.476146,1.82417 0.587165,0.75812 1.153229,1.52587 1.714461,2.29546 1.405737,1.92762 2.886498,4.0023 4.09272,6.00255 0.609572,1.01081 1.129321,2.0521 1.693984,3.07815 1.731977,3.49666 1.051138,2.01399 2.482676,5.28641 0.788091,1.80151 0.956474,2.15108 1.626828,3.87987 0.341096,0.87961 0.657496,1.76477 0.987323,2.64695 0.294334,0.77247 0.547569,1.55456 0.741577,2.34559 0.03292,0.13473 -0.0692,0.34264 0.08973,0.40529 4.768398,1.88014 9.427048,4.00627 14.496244,5.34585 0.592128,0.15637 0.277277,-0.93679 0.415895,-1.40521 0.902862,-3.00558 0.30767,-1.17203 1.560158,-4.6071 0.412397,-1.131 0.770327,-2.27424 1.229165,-3.39469 0.72881,-1.77968 2.477016,-5.41525 3.437778,-7.12221 0.584112,-1.03775 1.271152,-2.03964 1.906719,-3.05945 1.660878,-2.51655 3.326762,-5.07149 5.563462,-7.32572 0.24295,-0.24486 0.51289,-0.47335 0.76935,-0.71 0,0 -13.282883,-5.79579 -13.282883,-5.79579 v 0 c -1.003707,3.14638 -2.226143,6.24863 -3.568803,9.31946 -0.48464,1.0865 -0.924934,2.18527 -1.453917,3.25957 -0.58552,1.18911 -1.237737,2.35847 -1.888095,3.52759 -0.636651,1.14449 -1.25857,2.29524 -1.972557,3.41255 -0.651043,1.01882 -1.392692,2.0023 -2.119227,2.99068 -1.677164,2.28153 -1.438727,1.93215 -3.186408,3.82878 -4.726079,3.45787 -1.385703,0.57255 12.696294,6.6646 0.175376,0.0759 -0.355199,-0.16016 -0.479784,-0.2815 -0.192647,-0.18766 -0.310917,-0.41411 -0.45278,-0.62667 -0.564536,-0.84604 -0.654764,-1.07004 -1.158815,-1.99946 -2.407739,-4.25981 -5.095453,-8.42438 -7.437093,-12.7069 -2.665973,-4.72184 -0.898831,-1.47639 -3.291498,-6.16319 -0.436088,-0.85421 -0.894569,-1.70166 -1.328571,-2.55652 -0.692849,-1.36468 -1.39871,-2.721 -1.676625,-4.17919 z" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

16
static/img/logo.svg
View file

@ -7,7 +7,7 @@
viewBox="0 0 217.18312 217.18313" viewBox="0 0 217.18312 217.18313"
version="1.1" version="1.1"
id="svg1" id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="logo.svg" sodipodi:docname="logo.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@ -24,12 +24,12 @@
inkscape:deskcolor="#d1d1d1" inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm" inkscape:document-units="mm"
inkscape:zoom="1" inkscape:zoom="1"
inkscape:cx="113" inkscape:cx="112.5"
inkscape:cy="86.999998" inkscape:cy="86.5"
inkscape:window-width="1860" inkscape:window-width="1918"
inkscape:window-height="1004" inkscape:window-height="1056"
inkscape:window-x="30" inkscape:window-x="0"
inkscape:window-y="46" inkscape:window-y="22"
inkscape:window-maximized="1" inkscape:window-maximized="1"
inkscape:current-layer="layer1" inkscape:current-layer="layer1"
showgrid="false" /> showgrid="false" />
@ -41,7 +41,7 @@
id="layer1" id="layer1"
transform="translate(47.661312,-32.274754)"> transform="translate(47.661312,-32.274754)">
<rect <rect
style="fill:#4e3d63;stroke:#ffffff;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" style="fill:#e64e4e;stroke:#ffffff;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
id="rect6" id="rect6"
width="202.18312" width="202.18312"
height="202.18312" height="202.18312"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

337
static/main.css
View file

@ -1,43 +1,156 @@
/* https://git.zenoverse.net/bigly-archive/auth-thing/raw/branch/main/src/routes/+layout.svelte */ :root {
body { --black: rgb(16, 16, 16);
height: 100vh; --gray: rgb(38, 38, 38);
margin-top: 0px; --white: rgb(240, 240, 240);
--primary-dark: rgb(230, 78, 78);
--primary-light: rgb(255, 200, 200);
--elem-width: min(800px, 90vw);
--elem-height: 300px;
--border-radius: 15px;
color: var(--white);
background: var(--black);
font-family: system-ui, sans-serif;
}
body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 0;
}
.banner {
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: calc(-1 * var(--elem-height));
}
.banner-background {
border-radius: var(--border-radius);
background-color: var(--gray);
opacity: 30%;
object-fit: cover;
}
.banner-background,
.banner-content {
height: var(--elem-height);
overflow-y: auto; overflow-y: auto;
} }
:root { .banner-content {
--dark-1: #2f2b36; margin-left: 10px;
--dark-2: #d8d8d8; margin-right: 10px;
position: relative;
--light-1: #ffffff; top: calc(-1 * var(--elem-height));
--light-2: #ffa9d8;
--hyperlink: rgb(109, 119, 255);
--shadow-1: 0px 0px 2px 2px var(--dark-2);
font-family: sans-serif;
} }
a { .header {
color: var(--hyperlink); position: sticky;
top: 0;
display: flex;
background: var(--gray);
color: var(--white);
padding: 10px;
margin-bottom: 10px;
align-items: center;
font-size: 1.2em;
width: calc(100vw - 20px);
}
.header-link,
.link {
text-decoration: none; text-decoration: none;
font-weight: bold;
color: var(--white);
} }
input, .header-link {
textarea, padding-left: 0.5em;
.button, margin-left: 0.5em;
.area, border-left: solid var(--white) 2px;
form, }
.video,
.controls, .header-img {
.user, margin-left: 0.8em;
.comment { height: 2em;
width: 2em;
object-fit: cover;
}
.content,
.form,
.banner,
.banner-background {
width: var(--elem-width);
}
.form {
grid-template-columns: 0.7fr 1fr;
display: grid;
}
.form-key {
margin-right: 10px;
}
.form-input,
.comment,
.form-button {
border: solid var(--gray) 3px;
background: var(--black);
border-radius: var(--border-radius);
color: var(--white);
padding: 0.5rem;
margin-bottom: 0.5rem;
text-decoration: none;
font-weight: bold;
}
.form-button {
background: var(--primary-dark);
border-color: var(--primary-light);
}
.form-message {
font-style: italic;
}
.avatar {
display: flex;
}
.avatar-img {
width: 50px;
height: 50px;
margin-right: 15px;
}
.content-header {
width: var(--elem-width);
}
video {
width: 180px;
height: 200px;
overflow-y: auto;
border: solid var(--dark-2) 3px; border: solid var(--dark-2) 3px;
border-radius: 5px; border-radius: 5px;
background: var(--light-1); background: var(--light-1);
@ -47,114 +160,13 @@ form,
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
video {
border: solid var(--dark-2) 3px;
border-radius: 5px;
width: 900px;
max-width: 90vmin;
}
.full video {
width: 100vw;
height: 80vh;
max-width: none;
border: none;
}
.full .progressbar {
width: 95vw;
max-width: 95vw;
margin: auto;
}
form span {
font-weight: bold;
}
.button a {
width: 150px;
display: inline-block;
text-decoration: none;
color: var(--light-1);
}
.area,
form {
width: 900px;
max-width: 90vw;
}
form {
grid-template-columns: 0.7fr 1fr;
}
.form-entry, textarea {
display: block;
}
.form-key {
margin-right: 10px;
}
.form-message {
font-style: italic;
}
.main-content {
width: 720px;
}
.button {
background-color: var(--hyperlink);
font-weight: bold;
width: 150px;
display: inline-block;
}
.header {
background: var(--dark-1);
color: var(--light-1);
padding: 10px;
display: flex;
width: 100vw;
margin: 0;
font-size: 1.2em;
align-items: center;
margin-bottom: 10px;
position: sticky;
top: 0;
}
.header a {
font-weight: bold;
color: var(--light-1);
margin-left: 0.5em;
padding-left: 0.5em;
border-left: solid var(--light-2) 2px;
}
.header img {
margin-left: 0.8em;
height: 2em;
}
.video img {
width: 180px;
height: 130px;
}
.video {
width: 180px;
height: 200px;
overflow-y: auto;
}
.videos { .videos {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
width: var(--elem-width);
} }
.controls { .controls {
@ -165,23 +177,33 @@ form {
} }
.videos a { .videos a {
color: var(--dark-1); color: var(--dark);
}
.video {
border: solid var(--gray) 3px;
border-radius: 5px;
background: var(--dark);
font-size: 1rem;
padding: 0.5rem;
margin-bottom: 0.5rem;
} }
.progressbar { .progressbar {
background-color: var(--light-1); background-color: var(--black);
border: solid var(--dark-2) 2px; border: solid var(--primary-light) 2px;
border-radius: 13px; border-radius: 13px;
padding: 3px; padding: 3px;
margin: 0; margin: 0;
position: relative; position: relative;
top: -40px; top: -40px;
width: 893px; width: calc(var(--elem-width) - 7px);
max-width: 89vmin; max-width: 89vmin;
} }
.progressbar>div { .progressbar>div {
background-color: var(--light-2); background-color: var(--primary-dark);
width: 40%; width: 40%;
height: 20px; height: 20px;
border-radius: 10px; border-radius: 10px;
@ -197,29 +219,48 @@ form {
} }
.video-wrapper.full { .video-wrapper.full {
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
.video img {
img.dark { width: 180px;
filter: invert(1); height: 130px;
} }
pre { .full video {
white-space: pre-wrap; width: 100vw;
overflow-x: auto; height: 80vh;
max-width: none;
max-height: none;
border: none;
} }
.pfp-wrapper { .full .progressbar {
display: flex; width: 95vw;
max-width: 95vw;
margin: auto;
} }
.avatar { .controls {
width: 50px;
height: 50px; border: solid var(--gray) 3px;
margin-right: 15px; border-radius: 5px;
background: var(--dark);
font-size: 1rem;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
video {
border: solid var(--dark-2) 3px;
border-radius: 5px;
width: var(--elem-width);
height: auto;
max-height: 50vh;
max-width: 90vmin;
} }

15
views/comments.ejs
View file

@ -1,18 +1,19 @@
<form enctype='multipart/form-data' method='POST' action='/api/form/comment'> <form class='content' enctype='multipart/form-data' method='POST' action='/api/form/comment'>
<h1>Comments</h1> <h1 class='content-header'>Comments</h1>
<div class='form-message'></div> <div class='form-message'></div>
<input name='targetId' hidden value='<%= id %>'> <input name='targetId' hidden value='<%= id %>'>
<input name='targetType' hidden value='<%= route %>'> <input name='targetType' hidden value='<%= route %>'>
<textarea name='content'></textarea> <textarea class='form-input' name='content'></textarea>
<input type='submit'> <br />
<input class='form-input' type='submit'>
<% for (let comment of comments) { %> <% for (let comment of comments) { %>
<div class='comment'> <div class='comment'>
<div class='pfp-wrapper'> <div class='avatar'>
<img src='/pfp/<%= comment.username %>.png' class='avatar'> <img src='/pfp/<%= comment.username %>.png' class='avatar-img'>
<div> <div>
<div><b> <div><b>
<a href='/client/user?id=<%= comment.username %>'> <a class='link' href='/client/user?id=<%= comment.username %>'>
<%= comment.username %> <%= comment.username %>
</a> </a>
</b></div> </b></div>

11
views/form.ejs
View file

@ -1,20 +1,19 @@
<%- include('header.ejs') -%> <%- include('header.ejs') -%>
<form enctype='multipart/form-data' method='POST' action='<%= route %>'> <form class='form' enctype='multipart/form-data' method='POST' action='<%= route %>'>
<h1> <h1>
<%= title %> <%= title %>
</h1> </h1>
<div class='form-message'></div> <div class='form-message'></div>
<% for (let elem of data) { %> <% for (let elem of data) { %>
<span class='form-entry'> <span class='form-key'> <span class='form-key'>
<%= elem.label %> <%= elem.label %>
</span> </span>
<% if (elem.type=='textarea' ) { %> <% if (elem.type=='textarea' ) { %>
<textarea name='<%= elem.name %>'></textarea> <textarea class='form-input' name='<%= elem.name %>'></textarea>
<% } else { %> <% } else { %>
<input type='<%= elem.type %>' name='<%= elem.name %>'> <input class='form-input' type='<%= elem.type %>' name='<%= elem.name %>'>
</span>
<% } %> <% } %>
<% } %> <% } %>
<input type='Submit' name='Submit'> <input class='form-input' type='Submit' name='Submit'>
</form> </form>
<%- include('footer.ejs') -%> <%- include('footer.ejs') -%>

12
views/header_block.ejs
View file

@ -1,16 +1,16 @@
<div class='header'> <div class='header'>
<img src='/static/img/logo.svg'> <img class="header-img" src="/static/img/logo.svg">
<a href='/'>BiglyChat</a> <a class="header-link" href='/'>BiglyChat</a>
<%if (username=='!nobody' ) { %> <%if (username=='!nobody' ) { %>
<a href="/client/login">Login</a> <a class="header-link" href="/client/login">Login</a>
<% } else { %> <% } else { %>
<a href="/client/user?id=<%= username %>"> <a class="header-link" href="/client/user?id=<%= username %>">
<%= username %> <%= username %>
</a> </a>
<a href="/client/upload"> <a class="header-link" href="/client/upload">
Upload Upload
</a> </a>
<a href="/client/settings"> <a class="header-link" href="/client/settings">
Settings Settings
</a> </a>
<% } %> <% } %>

17
views/main.ejs
View file

@ -1,19 +1,22 @@
<%- include('header.ejs') -%> <%- include('header.ejs') -%>
<div class='area'> <div class='banner'><img class='banner-background' src='/static/img/bg.svg'>
<div class='banner-content'>
<h1>BiglyChat</h1> <h1>BiglyChat</h1>
<p>Broadcast videos to your fanbase, while you and the owners feel part of the community. No more black box moderation.</p> <p>Broadcast videos to your fanbase and be part of the community alongside the owners. No more black box
moderation!</p>
<details> <details>
<summary><b>Guidelines</b></summary> <summary><b>Guidelines</b></summary>
<%- include ('guidelines.ejs') -%> <%- include ('guidelines.ejs') -%>
</details> </details>
<h2>Signing up to upload content</h2> <h2>Uploading content</h2>
<%if (username=='!nobody' ) { %> <%if (username=='!nobody' ) { %>
<div class="button"><a href="/client/register">Create</a></div> <a class='form-button' href="/client/register">Join the Community</a>
<% } %> <% } %>
<div class="button"><a href="https://discord.gg/wZ3mg58JMT">Discord Chat</a></div> <a class='form-button' href="https://discord.gg/wZ3mg58JMT">Discord Chat</a>
<div class="button"><a href="https://git.xuyezo.net/Zuxxied/bigly-chat">Source Code</a></div> <a class='form-button' href="https://git.xuyezo.net/Zuxxied/bigly-chat">Source Code</a>
</div> </div>
<div class='area'> </div>
<div class='content'>
<h1>Recent Videos</h1> <h1>Recent Videos</h1>
<div class=' videos'> <div class=' videos'>
<%- include('videos.ejs') -%> <%- include('videos.ejs') -%>

14
views/player.ejs
View file

@ -1,5 +1,5 @@
<%- include('header.ejs') -%> <%- include('header.ejs') -%>
<div class='area'> <div class='content'>
<h1>Video</h1> <h1>Video</h1>
<div class='video-wrapper'> <div class='video-wrapper'>
<video src='/videos/<%= videoData.id %>.webm'></video> <video src='/videos/<%= videoData.id %>.webm'></video>
@ -11,15 +11,15 @@
<div class='full'><img src='/static/img/full.svg' class='dark'></div> <div class='full'><img src='/static/img/full.svg' class='dark'></div>
</div> </div>
</div> </div>
<div><b> <p><b>
<%= videoData.title %> <%= videoData.title %>
</b> </b>
</div> </p>
<div class='pfp-wrapper'> <div class='avatar'>
<img src='/pfp/<%= videoData.username %>.png' class='avatar'> <img src='/pfp/<%= videoData.username %>.png' class='avatar-img'>
<div> <div>
Created by <b><a href="/client/user?id=<%= videoData.username %>"> Created by <b><a class='link' href="/client/user?id=<%= videoData.username %>">
@<%= videoData.username %></a></b> @<%= videoData.username %></a></b>
</a> on </a> on
<b> <b>
@ -27,7 +27,7 @@
</b> </b>
</div> </div>
</div> </div>
<pre><%= videoData.desc %></pre> <pre class='form-input'><%= videoData.desc %></pre>
</div> </div>
<%- include('comments.ejs') -%> <%- include('comments.ejs') -%>
<%- include('footer.ejs') -%> <%- include('footer.ejs') -%>

29
views/user.ejs
View file

@ -1,20 +1,24 @@
<%- include('header.ejs') -%> <%- include('header.ejs') -%>
<form enctype='multipart/form-data' method='POST' action='/api/form/follow'> <form class='banner' enctype='multipart/form-data' method='POST' action='/api/form/follow'>
<img class="banner-background" src="/pfp/<%= id %>.png">
<div class="banner-content">
<h1>User</h1> <h1>User</h1>
<div class='form-message'></div> <div class='form-message'></div>
<div class='user'> <div class='avatar'>
<div class='pfp-wrapper'> <img src='/pfp/<%= id %>.png' class='avatar-img'>
<img src='/pfp/<%= id %>.png' class='avatar'>
<div> <div>
<p>
<b>@<%= id %></b> <b>@<%= id %></b>
</p> <input class='form-input' type='submit' value="Follow">
</div>
</div>
<input name='target' hidden value="<%= id %>">
<pre class='form-input'><%= user[0] ? user[0].bio : 'This user has not set a bio.' %></pre>
<details> <details>
<summary> <summary>
<%= following.length %> following <%= following.length %> following
</summary> </summary>
<% for (let user of following) { %> <% for (let user of following) { %>
<a href='/client/user?id=<%= user.target %>'> <a class='link' href='/client/user?id=<%= user.target %>'>
<%= user.target %> <%= user.target %>
</a> </a>
<%} %> <%} %>
@ -24,23 +28,16 @@
<%= followers.length %> followers <%= followers.length %> followers
</summary> </summary>
<% for (let user of followers) { %> <% for (let user of followers) { %>
<a href='/client/user?id=<%= user.username %>'> <a class='link' href='/client/user?id=<%= user.username %>'>
<%= user.username %> <%= user.username %>
</a> </a>
<%} %> <%} %>
</details> </details>
<input name='target' hidden value="<%= id %>">
<input type='submit' value="Follow">
</div> </div>
</div>
</div>
<pre><%= user[0] ? user[0].bio : 'This user has not set a bio.' %></pre>
</form> </form>
<div class='area'> <h1 class='content-header'>Uploaded Videos</h1>
<h1>Uploaded Videos</h1>
<div class=' videos'> <div class=' videos'>
<%- include('videos.ejs') -%> <%- include('videos.ejs') -%>
</div> </div>
</div>
<%- include('comments.ejs') -%> <%- include('comments.ejs') -%>
<%- include('footer.ejs') -%> <%- include('footer.ejs') -%>