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_USER=
PLAKKEN_REDIS_PASSWORD=

4
front/_colors.scss
View file

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

4
front/style.scss
View file

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

2
static/app.js
View file

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

62
static/index.html
View file

@ -1,49 +1,40 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<meta content="Plakken" name="author">
<meta content="Gnous EU" name="author">
<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">
<script async src="/static/app.js"></script>
</head>
<body>
<form action="/create/" method="post">
<div>
<label for="lines"></label>
<textarea id="lines" readonly wrap="hard">1</textarea>
</div>
<div>
<label for="content"></label>
<textarea autofocus id="content" name="content" placeholder="Type your paste here"></textarea>
<nav>
<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>
<form class="fr" action="/create/" method="post">
<div id="line-numbers">1</div>
<label for="content"><textarea autofocus id="content" name="content"
placeholder="Type your paste here"></textarea></label>
</form>
<div class="menu fr">
<label for="filename"><input id="filename" name="filename" placeholder="Filename" type="text"></label>
<!--<label for="password"><input id="password" placeholder="Password" type="password"></label>-->
<label for="exp"><input id="exp" name="exp" placeholder="Expiration (1d1h1m1s)" type="text"></label>
<label for="type">
<select id="type" name="type">
<option value="c">C</option>
<option value="cpp">C++</option>
<select id="type" name="type">zz
<option value="c">C/C++</option>
<option value="csharp">C#</option>
<option value="css">CSS</option>
<option value="go">Go</option>
<option value="java">Java</option>
<option value="js">Javascript</option>
<option value="html">HTML</option>
<option selected value="plain">Plaintext</option>
<option value="python">Python</option>
<option selected value="pt">Plaintext</option>
<option value="py">Python</option>
<option value="rb">Ruby</option>
<option value="rs">Rust</option>
<option value="sh">Shell</option>
@ -53,15 +44,20 @@
<option value="yml">YAML</option>
</select>
</label>
</li>
</ul>
<button title="Save plak" type="submit">
<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>
</svg>
</button>
</nav>
</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>
</html>

31
static/style.css
View file

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