💄 revamped frontend
This commit is contained in:
parent
693ac02c9d
commit
c74237beef
4 changed files with 65 additions and 32 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -17,3 +17,4 @@ plakken
|
||||||
|
|
||||||
# Go workspace file
|
# Go workspace file
|
||||||
go.work
|
go.work
|
||||||
|
.idea/discord.xml
|
||||||
|
|
8
go.sum
Normal file
8
go.sum
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
github.com/cespare/xxhash/v2 v2.2.0 h1:DC2CZ1Ep5Y4k3ZQ899DldepgrayRUGE6BBZ/cd9Cj44=
|
||||||
|
github.com/cespare/xxhash/v2 v2.2.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
|
||||||
|
github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f h1:lO4WD4F/rVNCu3HqELle0jiPLLBs70cWOduZpkS1E78=
|
||||||
|
github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f/go.mod h1:cuUVRXasLTGF7a8hSLbxyZXjz+1KgoB3wDUb6vlszIc=
|
||||||
|
github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
|
||||||
|
github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
|
||||||
|
github.com/redis/go-redis/v9 v9.2.1 h1:WlYJg71ODF0dVspZZCpYmoF1+U1Jjk9Rwd7pq6QmlCg=
|
||||||
|
github.com/redis/go-redis/v9 v9.2.1/go.mod h1:hdY0cQFCN4fnSYT6TkisLufl/4W5UIXyv0b/CLO2V2M=
|
|
@ -2,16 +2,19 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta content="width=device-width, user-scalable=no, initial-scale=1.0"
|
<meta content="Plakken, paste, pastebin" name="keywords">
|
||||||
name="viewport">
|
<meta content="Plakken is a simple open-source paste service where you can store store text for a set period of time."
|
||||||
|
name="description">
|
||||||
|
<meta content="Plakken" name="author">
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||||
<meta content="ie=edge" http-equiv="X-UA-Compatible">
|
<meta content="ie=edge" http-equiv="X-UA-Compatible">
|
||||||
<title>Your plak • Plakken</title>
|
<title>New plak • Plakken</title>
|
||||||
<link href="/static/style.css" rel="stylesheet">
|
<link href="style.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<form method="post">
|
<form method="post">
|
||||||
<label for="content"></label>
|
<label for="content"></label>
|
||||||
<textarea id="content" name="content" placeholder="Your paste here"></textarea>
|
<textarea autofocus id="content" name="content" placeholder="Your paste here"></textarea>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
@ -23,13 +26,29 @@
|
||||||
<li>
|
<li>
|
||||||
<label for="type">Type</label>
|
<label for="type">Type</label>
|
||||||
<select id="type" name="type">
|
<select id="type" name="type">
|
||||||
<option value="">Plaintext</option>
|
<option value="auto">Auto Detect</option>
|
||||||
<option value="">Python</option>
|
<option value="c">C</option>
|
||||||
|
<option value="cpp">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 value="rb">Ruby</option>
|
||||||
|
<option value="rs">Rust</option>
|
||||||
|
<option value="sh">Shell</option>
|
||||||
|
<option value="sql">SQL</option>
|
||||||
|
<option value="ts">Typescript</option>
|
||||||
|
<option value="xml">XML</option>
|
||||||
|
<option value="yml">YAML</option>
|
||||||
</select>
|
</select>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button>
|
<button type="submit" title="Save plak">
|
||||||
<svg height="26" viewBox="0 0 24 24" width="26" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
<polyline points="9 11 12 14 22 4"></polyline>
|
<polyline points="9 11 12 14 22 4"></polyline>
|
||||||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
:root {
|
:root {
|
||||||
--accent: #0080e5;
|
--accent: #be0560;
|
||||||
--background: #121212;
|
--background: #141414;
|
||||||
--border: #2d2d2d;
|
--border: #333;
|
||||||
--text: #f1f4f5;
|
--text: #e2e2e2;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -12,11 +12,15 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button, textarea {
|
||||||
|
background-color: inherit;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
appearance: none;
|
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font: 14px/1.6 "JetBrains Mono", monospace;
|
font: 14px/1.6 "JetBrains Mono", monospace;
|
||||||
height: calc(100vh - 5rem - 6px);
|
height: calc(100vh - 3rem);
|
||||||
outline: none;
|
outline: none;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
resize: none;
|
resize: none;
|
||||||
|
@ -35,12 +39,10 @@ nav {
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
list-style: none;
|
|
||||||
gap: 2.6rem;
|
gap: 2.6rem;
|
||||||
height: 60px;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 1rem;
|
padding: 0 1.9rem;
|
||||||
width: fit-content;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
|
@ -48,40 +50,43 @@ label {
|
||||||
}
|
}
|
||||||
|
|
||||||
input, select {
|
input, select {
|
||||||
appearance: none;
|
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
border: 2px solid var(--border);
|
border: 2px solid var(--border);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
outline: none;
|
||||||
padding: 5px 6px;
|
padding: 5px 6px;
|
||||||
transition: border .15s ease;
|
transition: border .15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
button, textarea {
|
input:hover, select:hover {
|
||||||
background-color: var(--background);
|
border-color: var(--text);
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: #ddd;
|
height: 26px;
|
||||||
|
stroke: var(--text);
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
stroke-linecap: round;
|
stroke-linecap: round;
|
||||||
transition: .15s ease;
|
transition: .15s ease;
|
||||||
|
width: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:hover, select:hover, svg:hover {
|
svg:hover {
|
||||||
border-color: #ddd;
|
|
||||||
stroke: #fff;
|
stroke: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*::selection {
|
input:focus-visible, select:focus-visible {
|
||||||
background-color: var(--text);
|
border: 2px solid var(--text);
|
||||||
color: var(--background);
|
}
|
||||||
}*/
|
|
||||||
|
button:focus-visible{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background-color: #be0560;
|
background-color: var(--accent);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
Loading…
Reference in a new issue