gnouseu/plakken
5
2
Fork 0
Code Issues Pull requests 4 Packages 1 Activity

Revamped front #41

Merged
hacki merged 4 commits from hacki/front into main 2024-05-01 20:21:41 +02:00
Conversation 0 Commits 4 Files changed 15 +78 -81
6 changed files with 78 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 44486ba59a - Show all commits

2
.env
View file

@ -1,4 +1,4 @@
PLAKKEN_LISTEN=:3000 PLAKKEN_LISTEN=:5000
PLAKKEN_REDIS_ADDRESS=localhost:6379 PLAKKEN_REDIS_ADDRESS=localhost:6379
PLAKKEN_REDIS_USER= PLAKKEN_REDIS_USER=
PLAKKEN_REDIS_PASSWORD= PLAKKEN_REDIS_PASSWORD=

4
front/_colors.scss
View file

@ -1,5 +1,5 @@
$accent: #d30f45; $accent: #d30f45;
$background: #09090b; $background: #0f0f0f;
$border: #363636; $border: #363636;
$text: #f2f2f7; $text: #e5e5e7;
$placeholder: #888; $placeholder: #888;

4
front/style.scss
View file

@ -21,7 +21,7 @@ body {
#line-numbers, #line-numbers,
#content { #content {
font: 400 15px/1.6 "JetBrains Mono", monospace; font: 400 14px/1.6 "JetBrains Mono", monospace;
} }
#line-numbers { #line-numbers {
@ -83,6 +83,7 @@ select {
select { select {
padding: 8px 10px; padding: 8px 10px;
width: fit-content;
} }
select:focus { select:focus {
@ -108,4 +109,3 @@ textarea {
outline: none; outline: none;
resize: none; resize: none;
} }

2
static/app.js
View file

@ -11,7 +11,7 @@ function updateLn() {
} }
function updateTitle() { function updateTitle() {
document.title = filenameSelector.value == '' ? 'New paste' : ` *${filenameSelector.value} - Plakken`; document.title = filenameSelector.value == '' ? 'New paste' : ` ${filenameSelector.value} (Unsaved) - Plakken`;
} }
function getRecentPlaksFromStorage() { function getRecentPlaksFromStorage() {

62
static/index.html
View file

@ -1,49 +1,40 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="Plakken, paste, pastebin" name="keywords"> <meta content="Plakken, paste, pastebin" name="keywords">
<meta content="Plakken is a simple open-source paste service where you can store store text for a set period of time." <meta content="Plakken is a simple open-source paste service where you can store text for a set period of time."
name="description"> name="description">
<meta content="Plakken" name="author"> <meta content="Gnous EU" name="author">
<meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>New plak • Plakken</title><script async src="/static/app.js"></script> <link href="/static/favicon.svg" rel="icon">
<title>New plak • Plakken</title>
<link href="/static/style.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">
<script async src="/static/app.js"></script>
</head> </head>
<body> <body>
<form action="/create/" method="post"> <form class="fr" action="/create/" method="post">
<div> <div id="line-numbers">1</div>
<label for="lines"></label> <label for="content"><textarea autofocus id="content" name="content"
<textarea id="lines" readonly wrap="hard">1</textarea> placeholder="Type your paste here"></textarea></label>
</div> </form>
<div> <div class="menu fr">
<label for="content"></label> <label for="filename"><input id="filename" name="filename" placeholder="Filename" type="text"></label>
<textarea autofocus id="content" name="content" placeholder="Type your paste here"></textarea> <!--<label for="password"><input id="password" placeholder="Password" type="password"></label>-->
<nav> <label for="exp"><input id="exp" name="exp" placeholder="Expiration (1d1h1m1s)" type="text"></label>
<ul>
<li>
<label for="password">
<input id="password" placeholder="Password" type="text">
</label>
</li>
<li>
<label for="exp">
<input id="exp" name="exp" placeholder="Expiration (1d1h1m1s)" type="text">
</label>
</li>
<li>
<label for="type"> <label for="type">
<select id="type" name="type"> <select id="type" name="type">zz
<option value="c">C</option> <option value="c">C/C++</option>
<option value="cpp">C++</option>
<option value="csharp">C#</option> <option value="csharp">C#</option>
<option value="css">CSS</option> <option value="css">CSS</option>
<option value="go">Go</option> <option value="go">Go</option>
<option value="java">Java</option> <option value="java">Java</option>
<option value="js">Javascript</option> <option value="js">Javascript</option>
<option value="html">HTML</option> <option value="html">HTML</option>
<option selected value="plain">Plaintext</option> <option selected value="pt">Plaintext</option>
<option value="python">Python</option> <option value="py">Python</option>
<option value="rb">Ruby</option> <option value="rb">Ruby</option>
<option value="rs">Rust</option> <option value="rs">Rust</option>
<option value="sh">Shell</option> <option value="sh">Shell</option>
@ -53,15 +44,20 @@
<option value="yml">YAML</option> <option value="yml">YAML</option>
</select> </select>
</label> </label>
</li>
</ul>
<button title="Save plak" type="submit"> <button title="Save plak" type="submit">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path> <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path>
</svg> </svg>
</button> </button>
</nav>
</div> </div>
</form> <section id="recent-plaks">
<div class="title fr">
<h3>Recent plaks</h3>
<svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2.5">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
</section>
</body> </body>
</html> </html>

31
static/style.css
View file

@ -36,7 +36,7 @@ section#recent-plaks .recent-plak svg {
cursor: pointer; cursor: pointer;
height: 22px; height: 22px;
padding: 5px; padding: 5px;
stroke: #f2f2f7; stroke: #e5e5e7;
stroke-width: 2.25; stroke-width: 2.25;
width: 22px; width: 22px;
transition: 0.1s ease-in-out; transition: 0.1s ease-in-out;
@ -58,7 +58,7 @@ h3 {
::selection { ::selection {
background-color: #d30f45; background-color: #d30f45;
color: #f2f2f7; color: #e5e5e7;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -66,7 +66,7 @@ h3 {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: #09090b; background-color: #0f0f0f;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@ -75,12 +75,12 @@ h3 {
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: #f2f2f7; background-color: #e5e5e7;
} }
body { body {
background-color: #09090b; background-color: #0f0f0f;
color: #f2f2f7; color: #e5e5e7;
font: 400 16px/2 "Inter", "system-ui", sans-serif; font: 400 16px/2 "Inter", "system-ui", sans-serif;
margin: 0; margin: 0;
overflow-x: hidden; overflow-x: hidden;
@ -93,7 +93,7 @@ body {
#line-numbers, #line-numbers,
#content { #content {
font: 400 15px/1.6 "JetBrains Mono", monospace; font: 400 14px/1.6 "JetBrains Mono", monospace;
} }
#line-numbers { #line-numbers {
@ -105,7 +105,7 @@ body {
} }
#content { #content {
color: #f2f2f7; color: #e5e5e7;
height: 100%; height: 100%;
min-height: 90vh; min-height: 90vh;
padding: 16px 16px 0 16px; padding: 16px 16px 0 16px;
@ -123,16 +123,16 @@ body {
height: 24px; height: 24px;
fill: none; fill: none;
margin-bottom: -6px; margin-bottom: -6px;
stroke: #f2f2f7; stroke: #e5e5e7;
stroke-width: 2; stroke-width: 2;
width: 24px; width: 24px;
} }
input, input,
select { select {
background-color: #09090b; background-color: #0f0f0f;
border: 2px solid #363636; border: 2px solid #363636;
color: #f2f2f7; color: #e5e5e7;
font: 500 14px/2 "Inter", "system-ui", sans-serif; font: 500 14px/2 "Inter", "system-ui", sans-serif;
outline: none; outline: none;
padding: 3px 10px; padding: 3px 10px;
@ -154,20 +154,21 @@ select:focus-visible {
select { select {
padding: 8px 10px; padding: 8px 10px;
width: fit-content;
} }
select:focus { select:focus {
background-color: #09090b; background-color: #0f0f0f;
transition: none; transition: none;
} }
option { option {
background-color: #09090b; background-color: #0f0f0f;
color: #f2f2f7; color: #e5e5e7;
} }
option:focus { option:focus {
background-color: #d30f45; background-color: #d30f45;
color: #09090b; color: #0f0f0f;
} }
button, button,