v0.2 + first commit ever for the git repo!

This commit is contained in:
TheRed 2022-06-06 12:36:28 +03:00
commit 738b7fde0c
13 changed files with 525 additions and 0 deletions

11
.gitignore vendored Normal file
View file

@ -0,0 +1,11 @@
node_modules/
bin/*
!bin/changelogs.json
!bin/1aa5ca4b19daea70e3268ac88ef3c8f3.json
yarn.lock
yarn-error.log
package-lock.json
.env
users/*
!users/admin.json
.git

View file

@ -0,0 +1 @@
{"name":"Oh, hi there!","text":"Here's an image of a duck :)\n\n⣀⡀\n⢀⣴⣿⣿⣿⣿⣦⡀\n⣿⣿⣿⣿⡟⠉⣿⣷\n⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣶⣶⣦⠄\n⠘⣿⣿⣿⣿⣿⣿⠟⠋⠉⠉⠉⠁\n⠸⢿⣿⡿⠿⠟⢀\n⢀⣀⣠⣤⣤⣤⣤⣶⣾⣿⣷⣄\n⣷⣦⣤⣤⣤⣤⣤⣶⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⠛⣿⣿⣿⣿⣇\n⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⢠⣿⣿⣿⣿⡿\n⠈⢿⣿⣿⣯⡙⠛⠿⠿⠿⣿⠿⠿⠿⠛⠋⣁⣴⣿⣿⣿⣿⣿⡇\n⠈⠛⠿⣿⣿⣷⣶⣶⣤⣤⣤⣴⣶⣾⣿⣿⣿⣿⣿⣿⣿⠟\n⠉⠙⠛⠿⠿⢿⣿⣿⣿⣿⡿⠿⠿⠛⠋⠁\n⣤⡄\n⣀⣼⣶⣿⣷⣶⣤⡀\n⠉⠉⠉⠉⠉⠉⠉⠉\n\nHow'd you find this?"}

4
bin/changelogs.json Normal file
View file

@ -0,0 +1,4 @@
{
"name": "Changelogs",
"text": "v0.2 (2022 Jun 06)\n - Added a changelogs page\n - Git Repository now exists!\n - Added placeholders for textboxes.\n - Added alerts!\n / Some bugfixes are in progress for next update.\n\nv0.1 (2022 Jun 05)\n - Website is first made!\n - Things like git repository weren't even a thing.\n - Was spammed the first day lol"
}

52
index.js Normal file
View file

@ -0,0 +1,52 @@
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.set('view engine', 'ejs');
app.use(express.static('static'));
app.get('/', (req, res) => {
res.render('index.ejs');
});
app.post('/write', (req, res) => {
let filename = require('crypto').randomBytes(16).toString('hex');
let datainput = req.body;
let fs = require('fs');
if(datainput.text == undefined || datainput.text == "") return res.send('Error: Text is invalid').status(403);
if(fs.existsSync(__dirname+'/bin/'+filename+'.json')) return res.send('Internal error - randomly generated ID already exists? Try again.').status(500);
let data = {
name: datainput.name == undefined ? '' : datainput.name,
text: datainput.text
}
fs.writeFile(__dirname+'/bin/'+filename+'.json', JSON.stringify(data), (err) => {
if (err) {
console.log(err);
res.status(500);
} else {
res.send(filename).status(200);
}
});
});
app.get('/new', (req, res) => {
res.render('new.ejs');
});
app.get('/paste/:id', (req, res) => {
let fs = require('fs');
let filename = req.params.id;
if(!fs.existsSync(__dirname+'/bin/'+filename+'.json')) return res.send('Error: Paste not found').status(404);
let data = JSON.parse(fs.readFileSync(__dirname+'/bin/'+filename+'.json', 'utf8'));
res.render('paste.ejs', {
name: data.name,
text: data.text,
id: filename
});
});
app.listen(30180);

11
package.json Normal file
View file

@ -0,0 +1,11 @@
{
"dependencies": {
"body-parser": "^1.20.0",
"ejs": "^3.1.8",
"express": "^4.18.1"
},
"name": "the-bin",
"version": "1.0.0",
"main": "index.js",
"license": "AGPLv3"
}

BIN
static/charger.otf Normal file

Binary file not shown.

BIN
static/hack.ttf Normal file

Binary file not shown.

BIN
static/newspaper.ttf Normal file

Binary file not shown.

BIN
static/pasti.otf Normal file

Binary file not shown.

288
static/style.css Normal file
View file

@ -0,0 +1,288 @@
@font-face {
font-family: 'newspaper';
src: url('newspaper.ttf');
}
@font-face {
font-family: 'charger';
src: url('charger.otf');
}
@font-face {
font-family: 'pasti';
src: url('pasti.otf');
}
@font-face {
font-family: 'hack';
src: url('hack.ttf');
}
@keyframes flash {
0% {
color: #c1d1ff;
}
50% {
color: #5f87ff;
}
100% {
color: #c1d1ff;
}
}
@keyframes slidein {
0% {
transform: translateY(500%);
}
10% {
transform: translateY(0);
}
90% {
transform: translateY(0);
}
100% {
transform: translateY(500%);
}
}
* {
margin: 0 auto;
padding: 0;
}
body {
background-color: #1a2034;
color: #d2ddff;
}
.header {
font-family: 'newspaper';
font-size:70pt;
text-align: center;
margin-top:20px;
}
.subheader {
font-family: 'charger';
font-size:25pt;
text-align: center;
margin-bottom:20px;
border-top:5px white solid;
padding:20px;
padding-top:30px;
}
.container {
background-color: #242d4a;
border: 5px #87a5ff solid;
border-radius: 0px;
max-width:800px;
width:800px;
display:block;
margin-left: auto;
margin-right: auto;
box-shadow: 10px 10px rgba(210,221,255,1);
-webkit-box-shadow: 10px 10px rgba(210,221,255,1);
-moz-box-shadow: 10px 10px rgba(210,221,255,1);
margin-bottom:80px;
}
.container-middle {
display: table-cell;
vertical-align: middle;
height:min-content;
}
.container-external {
display: table;
width: 100%;
height:100%;
position: absolute;
}
.button {
background-color: #2e395f;
border: 2px #87a5ff solid;
border-radius: 5px;
padding-left:10px;
padding-right:10px;
padding-top:13px;
padding-bottom:10px;
display:block;
transition: all .2s ease-in-out;
width: fit-content;
margin-bottom:20px;
margin-top:-20px;
font-family:'pasti';
font-size:20pt;
color:#d2ddff;
font-style:normal;
text-decoration: none;
}
.button:hover {
background-color: #4b5c99;
border: 2px #87a5ff solid;
cursor:pointer;
padding-left:30px;
padding-right:30px;
padding-top:13px;
padding-bottom:10px;
}
.button-custom {
background-color: #2e395f;
border: 2px #87a5ff solid;
border-radius: 5px;
padding-left:20px;
padding-right:20px;
padding-top:2px;
display:block;
transition: all .2s ease-in-out;
width: fit-content;
font-family:'pasti';
font-size:12pt;
color:#d2ddff;
height:min-content;
margin-top:8px;
float:right;
margin-right:20px;
margin-left:0px;
}
.button-custom:hover {
background-color: #4b5c99;
border: 2px #87a5ff solid;
cursor:pointer;
padding-left:30px;
padding-right:30px;
margin-right:10px;
margin-left:-10px;
}
.button-custom-box {
position:relative;
display:block;
}
.credits {
font-family: 'pasti';
font-size:12pt;
text-align: left;
margin:5px;
position:absolute;
font-style:italic;
}
.editor-box {
margin:10px;
border: 2px #87a5ff solid;
max-height:100%;
border-radius:10px;
background-color:#181d30;
}
.editor > textarea {
width:max-content;
resize: none;
background-color:#181d30;
border:none;
color:#d2ddff;
font-family:'hack';
font-size:11pt;
display: block;
height:calc( 100vh - 86px );
overflow-y:scroll;
width:calc( 100% - 40px );
padding:10px;
}
.editor > textarea:focus {
outline:none;
}
.editor > textarea::selection {
background-color:#5a6db7;
}
::-moz-selection {
background-color:#5a6db7;
}
.editor-header {
font-family:'pasti';
font-size:12pt;
max-height:40px;
height:40px;
border-bottom: 2px #87a5ff solid;
background-color:#2a3253;
border-radius:10px 10px 0px 0px;
}
.name-box > input {
background-color:#2a3253;
border: 1px #87a5ff solid;
outline:none;
font-size:12pt;
margin-left:10px;
margin-top:5px;
border-radius:10px;
padding:5px;
color: #87a5ff;
font-family: 'hack';
width:50%;
max-width:500px;
min-width:100px;
font-style:italic;
}
.id-box {
float: right;
margin-top:12px;
margin-right:15px;
font-size:10pt;
font-family: 'hack';
}
#editor {
scrollbar-base-color: #ffffff #ffffff;
}
.alert {
background-color:#5f87ff;
color: black;
padding:10px;
padding-left:20px;
padding-right:20px;
font-family: 'hack';
font-size:12pt;
text-align: center;
margin-bottom:20px;
border: 0px white solid;
border-radius:10px;
margin-left: auto;
margin-right: auto;
display: block;
position: absolute;
z-index:10;
bottom:0px;
left:0px;
right:0px;
width:fit-content;
pointer-events: none;
animation-name: slidein;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
/* #editor {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
} */
/* #editor::after {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom:10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
background-color: #0026ff;
border-radius: 10px;
z-index: 1000;
} */

39
views/index.ejs Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>The Bin</title>
<script>
function alert(text) {
var alert = document.createElement("div");
alert.className = "alert";
alert.innerHTML = text;
document.body.appendChild(alert);
setTimeout(function() {
document.body.removeChild(alert);
}, 3000);
}
</script>
</head>
<body style="overflow-y: hidden">
<div class="credits">
<p>Developed by TheRed with <3</p>
</div>
<div class="container-external">
<div class="container-middle">
<div class="container">
<h1 class="header">welcome to the new kind of bin.</h1>
<h3 class="subheader">Completely Open-Source, uncensored.</h3>
<a href="/new" class="button">Get Started</a>
</div>
</div>
<p style="font-family:'hack';font-size:13pt;position:absolute;bottom:5px;right:5px;font-style:italic;"><a href="/paste/1aa5ca4b19daea70e3268ac88ef3c8f3" style="text-decoration: none;color:#3f4d7c;">Version 0.2</a></p>
<p style="font-family:'hack';font-size:13pt;position:absolute;top:5px;right:5px;font-style:italic;"><a href="/paste/1aa5ca4b19daea70e3268ac88ef3c8f3" style="text-decoration: underline;color:#3f4d7c;">Git Repository</a></p>
<p style="font-family:'hack';font-size:13pt;position:absolute;bottom:5px;left:5px;font-style:italic;"><a href="/paste/changelogs" style="text-decoration: underline;color:#3f4d7c;">Changelogs</a></p>
</div>
<script defer>alert("Welcome aboard. Honored to meet you.");</script>
</body>
</html>

61
views/new.ejs Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>New Paste</title>
<script>
function alert(text) {
var alert = document.createElement("div");
alert.className = "alert";
alert.innerHTML = text;
document.body.appendChild(alert);
setTimeout(function() {
document.body.removeChild(alert);
}, 3000);
}
function savePaste() {
document.getElementById('save-button').style = 'display: none';
let xhr = new XMLHttpRequest();
xhr.open("POST", "/write");
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
let text = document.getElementById('editor').value;
let name = document.getElementById('name').value;
let data = JSON.stringify({"text": text, "name": name});
xhr.send(data);
xhr.onload = () => {
let rq = xhr.responseText;
if (xhr.status == 200) {
alert("Paste saved! Redirecting...");
setTimeout(() => {window.location.href = "/paste/" + rq;}, 1000);
} else {
document.getElementById('save-button').style = 'display: block';
}
};
}
function goToHome() {
window.location.href = "/";
}
</script>
</head>
<body style="overflow-y:hidden">
<div class="editor-box">
<div class="editor-header">
<div class="button-custom-box"><button type="button" class="button-custom" onclick="savePaste()" id="save-button">Save</button></div>
<div class="button-custom-box"><button type="button" class="button-custom" onclick="goToHome()" id="save-button">Home</button></div>
<div class="name-box"><input placeholder="<Empty>" type="text" id="name" autocomplete="off" spellcheck="off"></input></div>
</div>
<div class="editor">
<textarea placeholder="Enter some text to get started!" id="editor" spellcheck="off" autofocus="on" autocomplete="off"></textarea>
</div>
</div>
</body>
</html>

58
views/paste.ejs Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style.css">
<title>Paste #<%= id %></title>
<script>
function alert(text) {
var alert = document.createElement("div");
alert.className = "alert";
alert.innerHTML = text;
document.body.appendChild(alert);
setTimeout(function() {
document.body.removeChild(alert);
}, 3000);
}
function copyPaste() {
/* Get the text field */
var copyText = document.getElementById("editor");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
alert("Copied text to clipboard!");
}
function copyLink() {
/* Get the text field */
var copyText = window.location.href;
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
alert("Copied link to clipboard!");
}
function goToHome() {
window.location.href = "/";
}
</script>
</head>
<body style="overflow-y:hidden">
<div class="editor-box">
<div class="editor-header">
<div class="button-custom-box"><button type="button" class="button-custom" onclick="copyPaste()" id="save-button">Copy</button></div>
<div class="button-custom-box"><button type="button" class="button-custom" onclick="goToHome()" id="save-button">Home</button></div>
<div class="button-custom-box"><button type="button" class="button-custom" onclick="copyLink()" id="save-button">Copy Link</button></div>
<div class="name-box"><input placeholder="<Empty>" value="<%= name %>" readonly></input></div>
</div>
<div class="editor">
<textarea id="editor" spellcheck="false" autofocus="true" autocomplete="false" readonly><%= text %></textarea>
</div>
</div>
</body>
</html>