mirror of https://github.com/lus/pasty.git
Improve the web frontend (#9)
* Fix line flowing out of div * Revert line highlighting * Fix tab key behaviour * Move links and version information to a footer * Fix footer hiding last code line * Calculate line number offset based on line overflow * Refactor some code
This commit is contained in:
Lukas Schulte Pelkum
GitHub
parent
8cbb62070e
commit
90f25ec220
|
|
@ -101,26 +101,6 @@ html, body {
|
|||
color: initial;
|
||||
}
|
||||
|
||||
.navigation .meta {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navigation .meta #version {
|
||||
margin-right: 40px;
|
||||
padding: 5px 10px;
|
||||
background-color: #000000;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 60px;
|
||||
display: -webkit-box;
|
||||
|
|
@ -143,13 +123,12 @@ html, body {
|
|||
.container #linenos span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container #linenos span:hover, .container #linenos span.highlight {
|
||||
background-color: #92b300;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
.container #linenos span:last-child {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.container #content {
|
||||
|
|
@ -158,13 +137,8 @@ html, body {
|
|||
}
|
||||
|
||||
.container #content #code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.container #content #code .highlight {
|
||||
background-color: #92b30071;
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.container #content #input {
|
||||
|
|
@ -196,6 +170,57 @@ html, body {
|
|||
background-color: #389b38;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
#footer #flex {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin: 0 80px 0 60px;
|
||||
}
|
||||
|
||||
#footer div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
padding: 5px 20px;
|
||||
height: 100%;
|
||||
-webkit-transition: all 200ms;
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
#footer a:hover {
|
||||
background-color: #333333;
|
||||
color: #2daa57;
|
||||
}
|
||||
|
||||
#footer #version {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 5px 30px;
|
||||
background-color: #111111;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.navigation {
|
||||
padding: 0 20px;
|
||||
|
|
@ -211,5 +236,25 @@ html, body {
|
|||
.navigation .meta #version {
|
||||
display: none;
|
||||
}
|
||||
#footer #flex {
|
||||
margin: 0 0 0 25px;
|
||||
}
|
||||
#footer .version-container span {
|
||||
display: none;
|
||||
}
|
||||
#footer a {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
#footer #flex {
|
||||
margin: 0;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
#footer .version-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"style.scss"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -83,17 +83,6 @@ html, body {
|
|||
}
|
||||
}
|
||||
}
|
||||
& .meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
& #version {
|
||||
margin-right: 40px;
|
||||
padding: 5px 10px;
|
||||
background-color: #000000;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -109,11 +98,10 @@ html, body {
|
|||
& span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
&:hover, &.highlight {
|
||||
background-color: #92b300;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
&:last-child {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -121,12 +109,8 @@ html, body {
|
|||
padding: 20px;
|
||||
width: calc(100vw - 50px);
|
||||
& #code {
|
||||
white-space: pre;
|
||||
& .highlight {
|
||||
background-color: #92b30071;
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
}
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
& #input {
|
||||
height: 100%;
|
||||
|
|
@ -155,6 +139,42 @@ html, body {
|
|||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #222222;
|
||||
& #flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 80px 0 60px;
|
||||
}
|
||||
& div {
|
||||
display: inline-block;
|
||||
}
|
||||
& a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
padding: 5px 20px;
|
||||
height: 100%;
|
||||
transition: all 200ms;
|
||||
&:hover {
|
||||
background-color: #333333;
|
||||
color: #2daa57;
|
||||
}
|
||||
}
|
||||
& #version {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 5px 30px;
|
||||
background-color: #111111;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.navigation {
|
||||
padding: 0 20px;
|
||||
|
|
@ -170,4 +190,29 @@ html, body {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#footer {
|
||||
& #flex {
|
||||
margin: 0 0 0 25px;
|
||||
}
|
||||
& .version-container span {
|
||||
display: none;
|
||||
}
|
||||
& a {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
#footer {
|
||||
& #flex {
|
||||
margin: 0;
|
||||
justify-content: space-around;
|
||||
}
|
||||
& .version-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,12 @@ import * as notifications from "./notifications.js";
|
|||
buttons.setupButtons();
|
||||
buttons.setupKeybinds();
|
||||
|
||||
// Define element handles
|
||||
const versionElement = document.getElementById("version");
|
||||
const lineNOsElement = document.getElementById("linenos");
|
||||
const codeElement = document.getElementById("code");
|
||||
const inputElement = document.getElementById("input");
|
||||
|
||||
// Load the API information
|
||||
async function loadAPIInformation() {
|
||||
const response = await api.getAPIInformation();
|
||||
|
|
@ -17,87 +23,91 @@ async function loadAPIInformation() {
|
|||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
document.getElementById("version").innerText = data.version;
|
||||
versionElement.innerText = data.version;
|
||||
}
|
||||
loadAPIInformation();
|
||||
|
||||
// Try to load a paste if one exists
|
||||
export let PASTE_ID;
|
||||
let CODE;
|
||||
async function loadPaste() {
|
||||
if (location.pathname !== "/") {
|
||||
// Define the paste ID and language
|
||||
const split = location.pathname.replace("/", "").split(".");
|
||||
const pasteID = split[0];
|
||||
const language = split[1];
|
||||
|
||||
|
||||
// Retrieve the paste from the API and redirect the user to the main page if it could not be found
|
||||
const response = await api.getPaste(pasteID);
|
||||
if (!response.ok) {
|
||||
location.replace(location.protocol + "//" + location.host);
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
|
||||
CODE = (await response.json()).content;
|
||||
|
||||
// Adjust the button states
|
||||
document.getElementById("btn_save").setAttribute("disabled", true);
|
||||
document.getElementById("btn_delete").removeAttribute("disabled");
|
||||
document.getElementById("btn_copy").removeAttribute("disabled");
|
||||
|
||||
|
||||
// Set the paste content to the DOM
|
||||
const code = document.getElementById("code");
|
||||
code.innerHTML = language
|
||||
? hljs.highlight(language, data.content).value
|
||||
: hljs.highlightAuto(data.content).value;
|
||||
|
||||
codeElement.innerHTML = language
|
||||
? hljs.highlight(language, CODE).value
|
||||
: hljs.highlightAuto(CODE).value;
|
||||
|
||||
// Display the line numbers
|
||||
const lineNOs = document.getElementById("linenos");
|
||||
lineNOs.innerHTML = data.content.split(/\n/).map((_, index) => `<span>${index + 1}</span>`).join('');
|
||||
renderLineNumbers();
|
||||
window.addEventListener("resize", renderLineNumbers);
|
||||
|
||||
const sharedLine = parseInt(window.location.hash.toLowerCase().replace("#l", ""), 10);
|
||||
if (sharedLine) {
|
||||
lineNOs.innerHTML = data.content.split(/\n/).map((_, index) => {
|
||||
return index + 1 === sharedLine
|
||||
? `<span class="highlight">${index + 1}</span>`
|
||||
: `<span>${index + 1}</span>`;
|
||||
}).join('');
|
||||
|
||||
let html = code.innerHTML.split(/\n/);
|
||||
html[sharedLine-1] = `<span class="highlight">${html[sharedLine-1]}</span>`;
|
||||
code.innerHTML = html.join("\n");
|
||||
}
|
||||
|
||||
// TODO: Update this shitty construct
|
||||
lineNOs.childNodes.forEach(node => {
|
||||
node.addEventListener("click", function(_) {
|
||||
const address = location.protocol + "//" + location.host + location.pathname + "#L" + node.innerText;
|
||||
location.replace(address);
|
||||
location.reload();
|
||||
});
|
||||
node.addEventListener("mouseover", function(_) {
|
||||
let html = code.innerHTML.split(/\n/);
|
||||
const index = parseInt(node.innerText, 10) - 1;
|
||||
html[index] = `<span class="highlight">${html[index]}</span>`;
|
||||
code.innerHTML = html.join("\n");
|
||||
});
|
||||
node.addEventListener("mouseout", function(_) {
|
||||
let html = code.innerHTML.split(/\n/);
|
||||
const index = parseInt(node.innerText, 10) - 1;
|
||||
html[index] = html[index].substring(24, html[index].length - 7);
|
||||
code.innerHTML = html.join("\n");
|
||||
});
|
||||
});
|
||||
|
||||
// Set the PASTE_ID variable
|
||||
PASTE_ID = pasteID;
|
||||
} else {
|
||||
const input = document.getElementById("input");
|
||||
input.classList.remove("hidden");
|
||||
input.focus();
|
||||
window.addEventListener("keydown", function(event) {
|
||||
inputElement.classList.remove("hidden");
|
||||
inputElement.focus();
|
||||
window.addEventListener("keydown", function (event) {
|
||||
if (event.keyCode != 9) return;
|
||||
event.preventDefault();
|
||||
input.value += " ";
|
||||
|
||||
insertTextAtCursor(inputElement, " ");
|
||||
});
|
||||
}
|
||||
}
|
||||
spinner.surround(loadPaste);
|
||||
spinner.surround(loadPaste);
|
||||
|
||||
function renderLineNumbers() {
|
||||
lineNOsElement.innerHTML = CODE.split(/\n/).map((line, index) => {
|
||||
let lineWidth = getTextWidth(line, "16px Source Code Pro");
|
||||
let linesSpace = Math.ceil(lineWidth / codeElement.offsetWidth);
|
||||
|
||||
let result = `<span>${index+1}</span>`;
|
||||
if (linesSpace > 1) {
|
||||
result += "<span></span>".repeat(linesSpace - 1);
|
||||
}
|
||||
return result;
|
||||
}).join("");
|
||||
}
|
||||
|
||||
// 1:1 skid from https://stackoverflow.com/questions/7404366/how-do-i-insert-some-text-where-the-cursor-is
|
||||
function insertTextAtCursor(element, text) {
|
||||
let value = element.value, endIndex, range, doc = element.ownerDocument;
|
||||
if (typeof element.selectionStart == "number"
|
||||
&& typeof element.selectionEnd == "number") {
|
||||
endIndex = element.selectionEnd;
|
||||
element.value = value.slice(0, endIndex) + text + value.slice(endIndex);
|
||||
element.selectionStart = element.selectionEnd = endIndex + text.length;
|
||||
} else if (doc.selection != "undefined" && doc.selection.createRange) {
|
||||
element.focus();
|
||||
range = doc.selection.createRange();
|
||||
range.collapse(false);
|
||||
range.text = text;
|
||||
range.select();
|
||||
}
|
||||
}
|
||||
|
||||
// Also a kind of skid
|
||||
function getTextWidth(text, font) {
|
||||
let canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
|
||||
let context = canvas.getContext("2d");
|
||||
context.font = font;
|
||||
return context.measureText(text).width;
|
||||
}
|
||||
|
|
@ -6,10 +6,10 @@ import * as notifications from "./notifications.js";
|
|||
|
||||
// setupKeybinds initializes the keybinds for the buttons
|
||||
export function setupKeybinds() {
|
||||
window.addEventListener("keydown", function(event) {
|
||||
window.addEventListener("keydown", function (event) {
|
||||
// Return if the CTRL key was not pressed
|
||||
if (!event.ctrlKey) return;
|
||||
|
||||
|
||||
// Define the DOM element of the pressed button
|
||||
let element = null;
|
||||
switch (event.keyCode) {
|
||||
|
|
@ -30,7 +30,7 @@ export function setupKeybinds() {
|
|||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Call the onClick function of the button
|
||||
if (element) {
|
||||
if (element.hasAttribute("disabled")) return;
|
||||
|
|
@ -43,13 +43,13 @@ export function setupKeybinds() {
|
|||
// setupButtons configures the click listeners of the buttons
|
||||
export function setupButtons() {
|
||||
// Define the behavior of the 'new' button
|
||||
document.getElementById("btn_new").addEventListener("click", function() {
|
||||
document.getElementById("btn_new").addEventListener("click", function () {
|
||||
location.replace(location.protocol + "//" + location.host);
|
||||
});
|
||||
|
||||
// Define the behavior of the 'save' button
|
||||
document.getElementById("btn_save").addEventListener("click", function() {
|
||||
spinner.surround(async function() {
|
||||
document.getElementById("btn_save").addEventListener("click", function () {
|
||||
spinner.surround(async function () {
|
||||
// Return if the text area is empty
|
||||
const input = document.getElementById("input");
|
||||
if (!input.value) return;
|
||||
|
|
@ -75,8 +75,8 @@ export function setupButtons() {
|
|||
});
|
||||
|
||||
// Define the behavior of the 'delete' button
|
||||
document.getElementById("btn_delete").addEventListener("click", function() {
|
||||
spinner.surround(async function() {
|
||||
document.getElementById("btn_delete").addEventListener("click", function () {
|
||||
spinner.surround(async function () {
|
||||
// Ask the user for the deletion token
|
||||
const deletionToken = prompt("Deletion Token:");
|
||||
if (!deletionToken) return;
|
||||
|
|
@ -95,11 +95,11 @@ export function setupButtons() {
|
|||
});
|
||||
|
||||
// Define the behavior of the 'copy' button
|
||||
document.getElementById("btn_copy").addEventListener("click", function() {
|
||||
spinner.surround(async function() {
|
||||
document.getElementById("btn_copy").addEventListener("click", function () {
|
||||
spinner.surround(async function () {
|
||||
// Ask for the clipboard permissions
|
||||
askClipboardPermissions();
|
||||
|
||||
|
||||
// Copy the code
|
||||
await navigator.clipboard.writeText(document.getElementById("code").innerText);
|
||||
notifications.success("Copied the code!");
|
||||
|
|
|
|||
|
|
@ -18,7 +18,5 @@ function create(type, message, duration) {
|
|||
node.innerHTML = message;
|
||||
|
||||
element.appendChild(node);
|
||||
setTimeout(function() {
|
||||
element.removeChild(node);
|
||||
}, duration);
|
||||
setTimeout(() => element.removeChild(node), duration);
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -7,29 +8,36 @@
|
|||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/solarized-dark.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="spinner" class="hidden"></div>
|
||||
<div class="navigation">
|
||||
<div class="buttons">
|
||||
<button class="button" id="btn_new" title="Create new paste (Ctrl + Q)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="40"
|
||||
height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="9" y1="12" x2="15" y2="12" />
|
||||
<line x1="12" y1="9" x2="12" y2="15" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="button" id="btn_save" title="Save paste (Ctrl + S)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-floppy" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-floppy" width="40"
|
||||
height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" />
|
||||
<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
|
||||
<circle cx="12" cy="14" r="2" />
|
||||
<polyline points="14 4 14 8 8 8 8 4" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="button" id="btn_delete" title="Delete paste (Ctrl + X)" disabled>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="40"
|
||||
height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" />
|
||||
<line x1="4" y1="7" x2="20" y2="7" />
|
||||
<line x1="10" y1="11" x2="10" y2="17" />
|
||||
<line x1="14" y1="11" x2="14" y2="17" />
|
||||
|
|
@ -38,30 +46,15 @@
|
|||
</svg>
|
||||
</button>
|
||||
<button class="button" id="btn_copy" title="Copy paste to clipboard (Ctrl + B)" disabled>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clipboard" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clipboard" width="40"
|
||||
height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" />
|
||||
<path d="M9 5H7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V7a2 2 0 0 0 -2 -2h-2" />
|
||||
<rect x="9" y="3" width="6" height="4" rx="2" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<div id="version">loading...</div>
|
||||
<a class="button" title="View the GitHub repository" href="https://github.com/lus/pasty" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21a4.192 4.192 0 0 0 -.08 -3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 0 0 4 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="button" title="View the credits" href="https://github.com/lus/pasty/blob/develop/CREDITS.md" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-award" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bebebe" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<circle cx="12" cy="9" r="6" />
|
||||
<polyline points="9 14.2 9 21 12 19 15 21 15 14.2" transform="rotate(-30 12 9)" />
|
||||
<polyline points="9 14.2 9 21 12 19 15 21 15 14.2" transform="rotate(30 12 9)" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div id="notifications"></div>
|
||||
|
|
@ -71,7 +64,21 @@
|
|||
<textarea id="input" class="hidden"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div id="flex">
|
||||
<div>
|
||||
<a href="https://github.com/lus/pasty" target="_blank">GitHub</a>
|
||||
<a href="https://go.lus.pm/discord" target="_blank">Discord</a>
|
||||
<a href="https://github.com/lus/pasty/blob/develop/CREDITS.md" target="_blank">Credits</a>
|
||||
</div>
|
||||
<div class="version-container">
|
||||
<span>Version:</span>
|
||||
<div id="version">loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script>
|
||||
<script src="assets/js/autoload.js" type="module"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue