cleanup
This commit is contained in:
parent
cd0380f697
commit
3dea44dacf
12 changed files with 170 additions and 174 deletions
11
client/tou.js
Normal file
11
client/tou.js
Normal 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;
|
||||
|
|
@ -6,6 +6,7 @@ import player from "./client/player.js";
|
|||
import user from "./client/user.js";
|
||||
import settings from "./client/settings.js";
|
||||
import e404 from "./client/e404.js";
|
||||
import tou from "./client/tou.js";
|
||||
|
||||
import loginB from "./form/login.js";
|
||||
import registerB from "./form/register.js";
|
||||
|
|
@ -31,7 +32,8 @@ routes.client = {
|
|||
video: player,
|
||||
user,
|
||||
settings,
|
||||
e404
|
||||
e404,
|
||||
tou
|
||||
}
|
||||
|
||||
routes.get = {
|
||||
|
|
|
|||
189
static/main.css
189
static/main.css
|
|
@ -2,161 +2,152 @@
|
|||
--black: rgb(16, 16, 16);
|
||||
--gray: rgb(38, 38, 38);
|
||||
--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;
|
||||
|
||||
--font: system-ui, sans-serif;
|
||||
color: var(--white);
|
||||
background: var(--black);
|
||||
font-family: var(--font) !important;
|
||||
}
|
||||
|
||||
font-family: system-ui, sans-serif;
|
||||
.banner,
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
overflow-x: hidden;
|
||||
|
||||
margin-top: 0;
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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 {
|
||||
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;
|
||||
object-fit: cover
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top: calc(-1 * var(--elem-height));
|
||||
top: calc(-1*var(--elem-height))
|
||||
}
|
||||
|
||||
.header {
|
||||
z-index: 5;
|
||||
|
||||
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);
|
||||
width: calc(100vw - 20px)
|
||||
}
|
||||
|
||||
.header-link,
|
||||
.link {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
color: var(--white)
|
||||
}
|
||||
|
||||
.header-link {
|
||||
padding-left: 0.5em;
|
||||
margin-left: 0.5em;
|
||||
border-left: solid var(--white) 2px;
|
||||
padding-left: .5em;
|
||||
margin-left: .5em;
|
||||
border-left: solid var(--white) 2px
|
||||
}
|
||||
|
||||
.header-img {
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
object-fit: cover;
|
||||
object-fit: cover
|
||||
}
|
||||
|
||||
.content,
|
||||
.form,
|
||||
.banner,
|
||||
.banner-background {
|
||||
width: var(--elem-width);
|
||||
.banner-background,
|
||||
.content,
|
||||
.form {
|
||||
width: var(--elem-width)
|
||||
}
|
||||
|
||||
.form {
|
||||
grid-template-columns: 0.7fr 1fr;
|
||||
display: grid;
|
||||
grid-template-columns: .51fr 1fr;
|
||||
display: grid
|
||||
}
|
||||
|
||||
.form-key {
|
||||
margin-right: 10px;
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.comment,
|
||||
.content,
|
||||
.form-button,
|
||||
.content {
|
||||
.form-input,
|
||||
.form {
|
||||
border: solid var(--gray) 3px;
|
||||
background: var(--black);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
color: var(--white);
|
||||
padding: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
text-decoration: none;
|
||||
.form-button,
|
||||
.form-heading,
|
||||
.form-message {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 10px;
|
||||
width: calc(var(--elem-width) - 1rem);
|
||||
}
|
||||
|
||||
.form-button {
|
||||
font-weight: bold;
|
||||
width: calc(var(--elem-width) - 1rem)
|
||||
}
|
||||
|
||||
.form-button {
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
background: var(--primary-dark);
|
||||
border-color: var(--primary-light);
|
||||
border-color: var(--primary-light)
|
||||
}
|
||||
|
||||
.form-message {
|
||||
margin-top: 10px;
|
||||
font-style: italic;
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 15px;
|
||||
margin-right: 15px
|
||||
}
|
||||
|
||||
.content-header {
|
||||
width: var(--elem-width);
|
||||
width: var(--elem-width)
|
||||
}
|
||||
|
||||
.videos {
|
||||
|
|
@ -164,109 +155,104 @@ body {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
|
||||
width: 90vw;
|
||||
width: 90vw
|
||||
}
|
||||
|
||||
.controls {}
|
||||
|
||||
.videos a {
|
||||
color: var(--dark);
|
||||
color: var(--dark)
|
||||
}
|
||||
|
||||
.progressbar,
|
||||
.progressbar-div {
|
||||
border-radius: var(--border-radius)
|
||||
}
|
||||
|
||||
.progressbar {
|
||||
background-color: var(--black);
|
||||
border: solid var(--primary-light) 2px;
|
||||
border-radius: 13px;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: -40px;
|
||||
width: calc(var(--elem-width) - 7px);
|
||||
max-width: 89vmin;
|
||||
max-width: 89vmin
|
||||
}
|
||||
|
||||
.progressbar>div {
|
||||
background-color: var(--primary-dark);
|
||||
width: 40%;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
height: 20px
|
||||
}
|
||||
|
||||
|
||||
.controls img {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
object-fit: contain;
|
||||
margin: 5px;
|
||||
margin: 5px
|
||||
}
|
||||
|
||||
.video {
|
||||
border: solid var(--gray) 3px;
|
||||
border-radius: 5px;
|
||||
background: var(--dark);
|
||||
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
padding: .5rem;
|
||||
width: 135px;
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.video div {
|
||||
max-height: 22px;
|
||||
overflow: hidden;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.video img {
|
||||
width: 135px;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
object-fit: cover
|
||||
}
|
||||
|
||||
.video-wrapper.full {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: rgba(0, 0, 0, .5);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.header.full {
|
||||
display: none;
|
||||
display: none
|
||||
}
|
||||
|
||||
video {
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.controls,
|
||||
.video,
|
||||
.player {
|
||||
border: solid var(--gray) 3px;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
margin-bottom: .5rem
|
||||
}
|
||||
|
||||
.player {
|
||||
width: 180px;
|
||||
overflow-y: auto;
|
||||
width: var(--elem-width);
|
||||
height: auto;
|
||||
max-height: 50vh;
|
||||
max-width: 90vmin;
|
||||
max-width: 90vmin
|
||||
}
|
||||
|
||||
.full video {
|
||||
.full .player {
|
||||
width: 100vw;
|
||||
height: 80vh;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
border: none;
|
||||
border: 0
|
||||
}
|
||||
|
||||
.full .progressbar {
|
||||
width: 95vw;
|
||||
max-width: 95vw;
|
||||
margin: auto;
|
||||
margin: auto
|
||||
}
|
||||
|
||||
.controls {
|
||||
|
|
@ -274,24 +260,15 @@ video {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
border: solid var(--gray) 3px;
|
||||
border-radius: 5px;
|
||||
background: var(--dark);
|
||||
|
||||
margin-top: -30px;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
font-family: system-ui, sans-serif;
|
||||
padding: .5rem
|
||||
}
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
white-space: pre-wrap
|
||||
}
|
||||
|
|
@ -1,28 +1,24 @@
|
|||
<form enctype='multipart/form-data' method='POST' action='/api/form/comment'>
|
||||
<h1 class='content-header'>Comments</h1>
|
||||
<div class='form-message'></div>
|
||||
<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'>
|
||||
<%- include('form_bare.ejs', { data: [ { label: "" , type: "text" , name: "targetId" , hidden: id }, { label: "" ,
|
||||
type: "text" , name: "targetType" , hidden: route }, { label: "Your thoughts..." , type: "textarea" ,
|
||||
name: "content" , hidden: route }, ], 'route' : '/api/form/comment' , 'title' : 'Comments' , }) -%>
|
||||
|
||||
<% for (let comment of comments) { %>
|
||||
<div class='comment'>
|
||||
<div class='avatar'>
|
||||
<img src='/pfp/<%= comment.username %>.png' class='avatar-img'>
|
||||
<div>
|
||||
<div><b>
|
||||
<a class='link' href='/client/user?id=<%= comment.username %>'>
|
||||
<%= comment.username %>
|
||||
</a>
|
||||
</b></div>
|
||||
<div><b>
|
||||
<%= (new Date(comment.date)+'').split(/(GMT|UTC)/g)[0] %>
|
||||
</b></div>
|
||||
<pre><%= comment.content %></pre>
|
||||
<div class="content">
|
||||
<% for (let comment of comments) { %>
|
||||
<div class='comment'>
|
||||
<div class='avatar'>
|
||||
<img src='/pfp/<%= comment.username %>.png' class='avatar-img'>
|
||||
<div>
|
||||
<div><b>
|
||||
<a class='link' href='/client/user?id=<%= comment.username %>'>
|
||||
<%= comment.username %>
|
||||
</a>
|
||||
</b></div>
|
||||
<div><b>
|
||||
<%= (new Date(comment.date)+'').split(/(GMT|UTC)/g)[0] %>
|
||||
</b></div>
|
||||
<pre><%= comment.content %></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</form>
|
||||
<% } %>
|
||||
</div>
|
||||
|
|
@ -1,2 +1,3 @@
|
|||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,19 +1,3 @@
|
|||
<%- include('header.ejs') -%>
|
||||
<form class='form' enctype='multipart/form-data' method='POST' action='<%= route %>'>
|
||||
<h1>
|
||||
<%= 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') -%>
|
||||
<%- include('form_bare.ejs') -%>
|
||||
<%- include('footer.ejs') -%>
|
||||
18
views/form_bare.ejs
Normal file
18
views/form_bare.ejs
Normal 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>
|
||||
|
|
@ -1,12 +1,21 @@
|
|||
<ol>
|
||||
<li>Respect users and communities. Bigotry, bullying, and hacking are prohibited.</li>
|
||||
<li>Contact staff via Discord as needed.</li>
|
||||
<li>Stay within the law of the United States.</li>
|
||||
<li>Don't exploit or clog Xuyezo services, regardless of utility value. Feature requests and glitches
|
||||
can be reported on <a class='link' href='https://discord.gg/wZ3mg58JMT'>Discord</a> or <a class='link'
|
||||
href='https://git.xuyezo.net/explore/repos'>Git</a>.</li>
|
||||
<li>Respect other users' creative work. Inspiration is allowed, although re-used assets must be
|
||||
properly credited.</li>
|
||||
<li>Don't post sexually motivated content.</li>
|
||||
<li>The moderation isn't responsible for behavior on other instances.</li>
|
||||
</ol>
|
||||
<%- include('header.ejs') -%>
|
||||
<div class="content">
|
||||
<h1 class='content-header'>Terms of Use</h1>
|
||||
<h2>1. Respect</h2>
|
||||
<p>While BiglyChat encourages good-faith discussion, some topics put the site's community at harm:</p>
|
||||
<ol>
|
||||
<li>Repeated personal attacks</li>
|
||||
<li>Not safe for work content</li>
|
||||
<li>Exposing non-public personal information</li>
|
||||
<li>Illegal activity in the United States</li>
|
||||
</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') -%>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="description" content="Collab on videos... make creative animations... and more!">
|
||||
<script src='/static/main.js'></script>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -2,25 +2,23 @@
|
|||
<div class='banner'><img class='banner-background' src='/static/img/bg.svg'>
|
||||
<div class='banner-content'>
|
||||
<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>
|
||||
<%if (username=='!nobody' ) { %>
|
||||
<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://git.xuyezo.net/Zuxxied/bigly-chat">Developer Portal</a>
|
||||
</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>
|
||||
<div class=' videos'>
|
||||
<%- include('videos.ejs', {videos: videosFollow}) -%>
|
||||
</div>
|
||||
|
||||
<h1 class='content-header'>Recent Videos</h1>
|
||||
<div class=' videos'>
|
||||
<%- include('videos.ejs') -%>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<%- include('header.ejs') -%>
|
||||
<div class='video-wrapper'>
|
||||
<video src='/videos/<%= videoData.id %>.webm'></video>
|
||||
<video class='player' src='/videos/<%= videoData.id %>.webm'></video>
|
||||
<div class="progressbar">
|
||||
<div></div>
|
||||
<div class="progressbar-div"></div>
|
||||
</div>
|
||||
<div class='controls'>
|
||||
<div class='play'><img src='/static/img/play.svg' class='dark'></div>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
<img src='/pfp/<%= id %>.png' class='avatar-img'>
|
||||
<div>
|
||||
<b>@<%= id %></b>
|
||||
<input class='form-input' type='submit' value="Follow">
|
||||
<input class='form-button' 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>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Reference in a new issue