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

cleanup

Browse source
This commit is contained in:
biglyderv 2024-11-25 14:12:44 -05:00
parent cd0380f697
commit 3dea44dacf
12 changed files with 170 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
client/tou.js Normal file
View file

@ -0,0 +1,11 @@
import Route from "../route.js";
import auth from "../form/auth.js";
let main = new Route([auth], async function (req, res, input) {
let { username } = input;
return res.render('guidelines', {
username
});
});
export default main;

4
routes.js
View file

@ -6,6 +6,7 @@ import player from "./client/player.js";
import user from "./client/user.js"; import user from "./client/user.js";
import settings from "./client/settings.js"; import settings from "./client/settings.js";
import e404 from "./client/e404.js"; import e404 from "./client/e404.js";
import tou from "./client/tou.js";
import loginB from "./form/login.js"; import loginB from "./form/login.js";
import registerB from "./form/register.js"; import registerB from "./form/register.js";
@ -31,7 +32,8 @@ routes.client = {
video: player, video: player,
user, user,
settings, settings,
e404 e404,
tou
} }
routes.get = { routes.get = {

189
static/main.css
View file

@ -2,161 +2,152 @@
--black: rgb(16, 16, 16); --black: rgb(16, 16, 16);
--gray: rgb(38, 38, 38); --gray: rgb(38, 38, 38);
--white: rgb(240, 240, 240); --white: rgb(240, 240, 240);
--primary-dark: rgb(230, 78, 78); --primary-dark: rgb(230, 78, 78);
--primary-light: rgb(255, 200, 200); --primary-light: rgb(255, 200, 200);
--elem-width: min(800px, 90vw); --elem-width: min(800px, 90vw);
--elem-height: 300px; --elem-height: 300px;
--border-radius: 15px; --border-radius: 15px;
--font: system-ui, sans-serif;
color: var(--white); color: var(--white);
background: var(--black); background: var(--black);
font-family: var(--font) !important;
}
font-family: system-ui, sans-serif; .banner,
body {
display: flex;
flex-direction: column
} }
body { body {
display: flex;
flex-direction: column;
align-items: center; align-items: center;
overflow-x: hidden; overflow-x: hidden;
margin-top: 0
margin-top: 0;
} }
.banner { .banner {
display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
margin-bottom: calc(-1*var(--elem-height))
}
margin-bottom: calc(-1 * var(--elem-height)); .banner-background,
.banner-content {
height: var(--elem-height);
overflow-y: auto
} }
.banner-background { .banner-background {
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--gray); background-color: var(--gray);
opacity: 30%; opacity: 30%;
object-fit: cover; object-fit: cover
}
.banner-background,
.banner-content {
height: var(--elem-height);
overflow-y: auto;
} }
.banner-content { .banner-content {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
top: calc(-1 * var(--elem-height)); top: calc(-1*var(--elem-height))
} }
.header { .header {
z-index: 5; z-index: 5;
position: sticky; position: sticky;
top: 0; top: 0;
display: flex; display: flex;
background: var(--gray); background: var(--gray);
color: var(--white); color: var(--white);
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
align-items: center; align-items: center;
font-size: 1.2em; font-size: 1.2em;
width: calc(100vw - 20px)
width: calc(100vw - 20px);
} }
.header-link, .header-link,
.link { .link {
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: 700;
color: var(--white); color: var(--white)
} }
.header-link { .header-link {
padding-left: 0.5em; padding-left: .5em;
margin-left: 0.5em; margin-left: .5em;
border-left: solid var(--white) 2px; border-left: solid var(--white) 2px
} }
.header-img { .header-img {
height: 2em; height: 2em;
width: 2em; width: 2em;
object-fit: cover; object-fit: cover
} }
.content,
.form,
.banner, .banner,
.banner-background { .banner-background,
width: var(--elem-width); .content,
.form {
width: var(--elem-width)
} }
.form { .form {
grid-template-columns: 0.7fr 1fr; grid-template-columns: .51fr 1fr;
display: grid; display: grid
} }
.form-key { .form-key {
margin-right: 10px; margin-right: 10px
} }
.form-input,
.comment, .comment,
.content,
.form-button, .form-button,
.content { .form-input,
.form {
border: solid var(--gray) 3px; border: solid var(--gray) 3px;
background: var(--black); background: var(--black);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--white); color: var(--white);
padding: .5rem;
margin-bottom: .5rem;
text-decoration: none
}
padding: 0.5rem; .form-button,
margin-bottom: 0.5rem; .form-heading,
.form-message {
text-decoration: none; grid-column: span 2;
} }
.content { .content {
margin-top: 10px; margin-top: 10px;
width: calc(var(--elem-width) - 1rem); width: calc(var(--elem-width) - 1rem)
}
.form-button {
font-weight: bold;
} }
.form-button { .form-button {
font-weight: 700;
display: inline-block;
background: var(--primary-dark); background: var(--primary-dark);
border-color: var(--primary-light); border-color: var(--primary-light)
} }
.form-message { .form-message {
margin-top: 10px; margin-top: 10px;
font-style: italic; font-style: italic
} }
.avatar { .avatar {
display: flex; display: flex
} }
.avatar-img { .avatar-img {
width: 50px; width: 50px;
height: 50px; height: 50px;
margin-right: 15px; margin-right: 15px
} }
.content-header { .content-header {
width: var(--elem-width); width: var(--elem-width)
} }
.videos { .videos {
@ -164,109 +155,104 @@ body {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
width: 90vw
width: 90vw;
} }
.controls {}
.videos a { .videos a {
color: var(--dark); color: var(--dark)
}
.progressbar,
.progressbar-div {
border-radius: var(--border-radius)
} }
.progressbar { .progressbar {
background-color: var(--black); background-color: var(--black);
border: solid var(--primary-light) 2px; border: solid var(--primary-light) 2px;
border-radius: 13px;
padding: 3px; padding: 3px;
margin: 0; margin: 0;
position: relative; position: relative;
top: -40px; top: -40px;
width: calc(var(--elem-width) - 7px); width: calc(var(--elem-width) - 7px);
max-width: 89vmin; max-width: 89vmin
} }
.progressbar>div { .progressbar>div {
background-color: var(--primary-dark); background-color: var(--primary-dark);
width: 40%; width: 40%;
height: 20px; height: 20px
border-radius: 10px;
} }
.controls img { .controls img {
height: 45px; height: 45px;
width: 45px; width: 45px;
object-fit: contain; object-fit: contain;
margin: 5px; margin: 5px
} }
.video { .video {
border: solid var(--gray) 3px;
border-radius: 5px;
background: var(--dark); background: var(--dark);
padding: .5rem;
font-size: 1rem;
padding: 0.5rem;
margin-bottom: 0.5rem;
width: 135px; width: 135px;
height: 140px; height: 140px;
overflow: hidden; overflow: hidden
} }
.video div { .video div {
max-height: 22px; max-height: 22px;
overflow: hidden; overflow: hidden
} }
.video img { .video img {
width: 135px; width: 135px;
height: 90px; height: 90px;
object-fit: cover; object-fit: cover
} }
.video-wrapper.full { .video-wrapper.full {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, .5);
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0
} }
.header.full { .header.full {
display: none; display: none
} }
video { .controls,
width: 180px; .video,
height: 200px; .player {
overflow-y: auto;
font-size: 1rem;
margin-bottom: 0.5rem;
border: solid var(--gray) 3px; border: solid var(--gray) 3px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
font-size: 1rem;
margin-bottom: .5rem
}
.player {
width: 180px;
overflow-y: auto;
width: var(--elem-width); width: var(--elem-width);
height: auto; height: auto;
max-height: 50vh; max-height: 50vh;
max-width: 90vmin; max-width: 90vmin
} }
.full video { .full .player {
width: 100vw; width: 100vw;
height: 80vh; height: 80vh;
max-width: none; max-width: none;
max-height: none; max-height: none;
border: none; border: 0
} }
.full .progressbar { .full .progressbar {
width: 95vw; width: 95vw;
max-width: 95vw; max-width: 95vw;
margin: auto; margin: auto
} }
.controls { .controls {
@ -274,24 +260,15 @@ video {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
border: solid var(--gray) 3px;
border-radius: 5px;
background: var(--dark); background: var(--dark);
margin-top: -30px; margin-top: -30px;
font-size: 1rem; padding: .5rem
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.form-input {
font-family: system-ui, sans-serif;
} }
img { img {
user-select: none; user-select: none
} }
pre { pre {
white-space: pre-wrap; white-space: pre-wrap
} }

46
views/comments.ejs
View file

@ -1,28 +1,24 @@
<form enctype='multipart/form-data' method='POST' action='/api/form/comment'> <%- include('form_bare.ejs', { data: [ { label: "" , type: "text" , name: "targetId" , hidden: id }, { label: "" ,
<h1 class='content-header'>Comments</h1> type: "text" , name: "targetType" , hidden: route }, { label: "Your thoughts..." , type: "textarea" ,
<div class='form-message'></div> name: "content" , hidden: route }, ], 'route' : '/api/form/comment' , 'title' : 'Comments' , }) -%>
<input name='targetId' hidden value='<%= id %>'>
<input name='targetType' hidden value='<%= route %>'>
<textarea class='form-input' name='content'></textarea>
<br />
<input class='form-input' type='submit'>
<% for (let comment of comments) { %> <div class="content">
<div class='comment'> <% for (let comment of comments) { %>
<div class='avatar'> <div class='comment'>
<img src='/pfp/<%= comment.username %>.png' class='avatar-img'> <div class='avatar'>
<div> <img src='/pfp/<%= comment.username %>.png' class='avatar-img'>
<div><b> <div>
<a class='link' href='/client/user?id=<%= comment.username %>'> <div><b>
<%= comment.username %> <a class='link' href='/client/user?id=<%= comment.username %>'>
</a> <%= comment.username %>
</b></div> </a>
<div><b> </b></div>
<%= (new Date(comment.date)+'').split(/(GMT|UTC)/g)[0] %> <div><b>
</b></div> <%= (new Date(comment.date)+'').split(/(GMT|UTC)/g)[0] %>
<pre><%= comment.content %></pre> </b></div>
<pre><%= comment.content %></pre>
</div>
</div> </div>
</div> </div>
</div> <% } %>
<% } %> </div>
</form>

1
views/footer.ejs
View file

@ -1,2 +1,3 @@
</body> </body>
</html> </html>

20
views/form.ejs
View file

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

18
views/form_bare.ejs Normal file
View file

@ -0,0 +1,18 @@
<form class='form' enctype='multipart/form-data' method='POST' action='<%= route %>'>
<h1 class='form-heading'>
<%= title %>
</h1>
<div class='form-message'></div>
<% for (let elem of data) { %>
<span class='form-key'>
<%= elem.label %>
</span>
<% if (elem.type=='textarea' ) { %>
<textarea class='form-input' name='<%= elem.name %>'></textarea>
<% } else { %>
<input class='form-input' type='<%= elem.type %>' name='<%= elem.name %>' value='<%= elem.hidden %>'
<%=elem.hidden ? 'hidden ' : '' %>>
<% } %>
<% } %>
<input class='form-button' type='Submit' name='Submit'>
</form>

33
views/guidelines.ejs
View file

@ -1,12 +1,21 @@
<ol> <%- include('header.ejs') -%>
<li>Respect users and communities. Bigotry, bullying, and hacking are prohibited.</li> <div class="content">
<li>Contact staff via Discord as needed.</li> <h1 class='content-header'>Terms of Use</h1>
<li>Stay within the law of the United States.</li> <h2>1. Respect</h2>
<li>Don't exploit or clog Xuyezo services, regardless of utility value. Feature requests and glitches <p>While BiglyChat encourages good-faith discussion, some topics put the site's community at harm:</p>
can be reported on <a class='link' href='https://discord.gg/wZ3mg58JMT'>Discord</a> or <a class='link' <ol>
href='https://git.xuyezo.net/explore/repos'>Git</a>.</li> <li>Repeated personal attacks</li>
<li>Respect other users' creative work. Inspiration is allowed, although re-used assets must be <li>Not safe for work content</li>
properly credited.</li> <li>Exposing non-public personal information</li>
<li>Don't post sexually motivated content.</li> <li>Illegal activity in the United States</li>
<li>The moderation isn't responsible for behavior on other instances.</li> </ol>
</ol> <h2>2. Communication</h2>
<p>The community is held responsible for contacting staff via Discord. This functionality is used for reporting
misbehavior and communicating suggestions or bug fixes.</p>
<h2>3. Exploits</h2>
<p>Don't exploit or clog Xuyezo services, regardless of potential utility or publicity.</p>
<h2>4. Limitations</h2>
<p>The moderation isn't responsible for behavior on other instances of Xuyezo software.</p>
<!-- todo: guidelines for project lifecycle + stop derv killing everything-->
</div>
<%- include('footer.ejs') -%>

2
views/header.ejs
View file

@ -7,7 +7,7 @@
<meta name="description" content="Collab on videos... make creative animations... and more!"> <meta name="description" content="Collab on videos... make creative animations... and more!">
<script src='/static/main.js'></script> <script src='/static/main.js'></script>
<link rel='stylesheet' href='/static/main.css'> <link rel='stylesheet' href='/static/main.css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>

12
views/main.ejs
View file

@ -2,25 +2,23 @@
<div class='banner'><img class='banner-background' src='/static/img/bg.svg'> <div class='banner'><img class='banner-background' src='/static/img/bg.svg'>
<div class='banner-content'> <div class='banner-content'>
<h1>BiglyChat</h1> <h1>BiglyChat</h1>
<p>BiglyChat is a niche community for broadcasting videos to your fanbase, with integrated games and active developers.</p> <p>BiglyChat is a niche community for broadcasting videos to your fanbase, with integrated games and active
developers.</p>
<h2>Community</h2> <h2>Community</h2>
<%if (username=='!nobody' ) { %> <%if (username=='!nobody' ) { %>
<a class='form-button' href="/client/register">Join the Community</a> <a class='form-button' href="/client/register">Join the Community</a>
<br />
<% } %> <% } %>
<a class='form-button' href="/client/tou">Terms of Use</a>
<a class='form-button' href="https://discord.gg/wZ3mg58JMT">Discord Server</a> <a class='form-button' href="https://discord.gg/wZ3mg58JMT">Discord Server</a>
<a class='form-button' href="https://git.xuyezo.net/Zuxxied/bigly-chat">Developer Portal</a> <a class='form-button' href="https://git.xuyezo.net/Zuxxied/bigly-chat">Developer Portal</a>
</div> </div>
</div> </div>
<div class='content'>
<details>
<summary><b>Terms of Use</b></summary>
<%- include ('guidelines.ejs') -%>
</details>
</div>
<h1 class='content-header'>Follow Feed</h1> <h1 class='content-header'>Follow Feed</h1>
<div class=' videos'> <div class=' videos'>
<%- include('videos.ejs', {videos: videosFollow}) -%> <%- include('videos.ejs', {videos: videosFollow}) -%>
</div> </div>
<h1 class='content-header'>Recent Videos</h1> <h1 class='content-header'>Recent Videos</h1>
<div class=' videos'> <div class=' videos'>
<%- include('videos.ejs') -%> <%- include('videos.ejs') -%>

4
views/player.ejs
View file

@ -1,8 +1,8 @@
<%- include('header.ejs') -%> <%- include('header.ejs') -%>
<div class='video-wrapper'> <div class='video-wrapper'>
<video src='/videos/<%= videoData.id %>.webm'></video> <video class='player' src='/videos/<%= videoData.id %>.webm'></video>
<div class="progressbar"> <div class="progressbar">
<div></div> <div class="progressbar-div"></div>
</div> </div>
<div class='controls'> <div class='controls'>
<div class='play'><img src='/static/img/play.svg' class='dark'></div> <div class='play'><img src='/static/img/play.svg' class='dark'></div>

4
views/user.ejs
View file

@ -7,11 +7,11 @@
<img src='/pfp/<%= id %>.png' class='avatar-img'> <img src='/pfp/<%= id %>.png' class='avatar-img'>
<div> <div>
<b>@<%= id %></b> <b>@<%= id %></b>
<input class='form-input' type='submit' value="Follow"> <input class='form-button' type='submit' value="Follow">
</div> </div>
</div> </div>
<input name='target' hidden value="<%= id %>"> <input name='target' hidden value="<%= id %>">
<pre class='form-input'><%= user[0] ? user[0].bio : 'This user has not set a bio.' %></pre> <pre class='form-input'><%= user[0] ? user[0].bio : 'This user has not set a bio.' %></pre>
</div> </div>
</form> </form>