1
0
mirror of https://github.com/lus/pasty.git synced 2023-08-10 21:13:09 +03:00
pasty/web/index.html
Lukas Schulte Pelkum 90f25ec220
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
2021-06-20 15:58:36 +02:00

84 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pasty</title>
<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" />
<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" />
<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" />
<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" />
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
</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" />
<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>
<div class="container">
<div id="notifications"></div>
<div id="linenos"><span>></span></div>
<div id="content">
<div id="code"></div>
<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>