Violet/QuickURL
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Frontend

Browse source
This commit is contained in:
bingus_violet 2024-07-13 04:00:15 -05:00
parent 47441885eb
commit 2fc92cedd4
6 changed files with 141 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
expressHandler.js Normal file
View file

@ -0,0 +1,14 @@
const express = require("express"),
path = require("path")
const PORT = process.env.PORT || 8080
const app = express()
const staticPath = path.join(__dirname, "static")
app.use(express.static(staticPath))
app.listen(PORT, () => {
console.log("QuickURL now listening for PORT: " + PORT)
})

1
index.js Normal file
View file

@ -0,0 +1 @@
require("./expressHandler.js")

3
package.json
View file

@ -4,7 +4,8 @@
"description": "An extremely generic privacy & security focused URL shortener.",
"main": "index.js",
"scripts": {
"test": "node index.js"
"test": "node index.js",
"start": "node index.js"
},
"repository": {
"type": "git",

BIN
static/fonts/rubik-v28-latin-regular.woff2 Normal file
View file

Binary file not shown.

32
static/index.html Normal file
View file

@ -0,0 +1,32 @@
<!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">
<meta content="QuickURL" property="og:title" />
<meta content="QuickURL is an extremely basic URL shortener." property="og:description" />
<meta content="#a200ff" data-react-helmet="true" name="theme-color" />
<title>QuickURL</title>
</head>
<body>
<div class="mainDiv">
<h1>QuickURL<hr></h1>
<form action="/makeURL" method="post">
<input required type="url" id="url" placeholder="Enter URL" name="url">
<br><br>
<input type="submit">
</form>
<br>
</div>
</body>
</html>

92
static/style.css Normal file
View file

@ -0,0 +1,92 @@
@font-face {
font-display: swap;
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2');
}
:root {
--primary-color: rgb(205, 188, 255);
--text-color: rgb(255, 255, 255);
--background-color: rgb(20, 23, 50);
--second-bg-color: black;
}
* {
text-align: center;
color: var(--text-color);
font-family: "Rubik", Verdana, Geneva, Tahoma, sans-serif;
}
h1,
h1>* {
font-size: 3rem;
color: var(--primary-color);
font-weight: 100;
}
hr {
opacity: 0.5;
}
p {
font-size: 1.1rem;
line-height: 1.75rem;
}
p {
margin: 5px;
}
body {
background-color: var(--background-color);
padding: 0 3%;
max-width: 700px;
margin: auto;
/* outline: 3px blue solid; */
margin: auto;
display: flex;
align-items: center;
}
.mainDiv {
width: 100%;
/* outline: 2px white solid; */
}
@media screen and (min-height: 500px) {
html,
body {
height: 100%;
}
}
select,
input {
font-size: 1.3rem;
background-color: rgba(0, 0, 20, 0.5);
color: var(--text-color);
margin: 5px auto;
border: 2px rgb(150, 135, 165) solid;
border-radius: 5px;
padding: 7px;
display: inline;
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
input[type="url"] {
border: none;
border-bottom: 2px white solid;
width: 80%;
font-size: 1.15remd;
}
select:hover,
input:hover {
border-color: var(--text-color)
}