65e34c73017c7500764d8339250c59823ef2966f
[urlittler] / src / template / root-html.js
1 'use strict';
2
3 module.exports = (ctx, pageTitle) => {
4 return `<!DOCTYPE html>
5 <html lang="en">
6 <head>
7 <meta charset="utf-8">
8 <meta name="robots" content="noindex">
9 <title>${pageTitle}</title>
10 <link rel="stylesheet" href="static/theme.css">
11 </head>
12 <body>
13 <script type="text/javascript">
14 document.addEventListener('DOMContentLoaded', function () {
15 document.querySelector('.copy-button').addEventListener('click', function(event) {
16 const linkHref = document.querySelector('.link').href;
17 navigator.clipboard.writeText(linkHref);
18 const copyButton = this;
19 copyButton.style.backgroundColor = 'lightgreen';
20 setTimeout(function () {
21 copyButton.style.backgroundColor = 'initial';
22 }, 3000);
23 });
24 });
25 </script>
26 <header>
27 <h1>${pageTitle}</h1>
28 </header>` +
29 (!ctx.createdLink ? '' : `
30 <section class="created-link">
31 <a class="src-link" href="${ctx.sourceLink}">${ctx.sourceLink}</a>
32 is now liked to by
33 <a class="link" href="${ctx.createdLink}">${ctx.createdLink}</a>
34 <span class="copy">
35 <button class="copy-button">Copy to Clipboard</button>
36 </span>
37 <div class="meta-link">
38 control token <span class="auth-token">${ctx.authToken}</span>
39 </div>
40 </section>`) +
41 (!ctx.message ? '' : `
42 <section class="message">
43 ${ctx.message}
44 </section>`) + `
45 <section class="create-link">
46 <form action="" method="post" class="submit-url">
47 <div class="submit-url">
48 <label for="url">URL: </label>
49 <input type="text" name="url" id="url" required>
50 </div>
51 <div class="submit-url">
52 <input type="submit" value="Create Link">
53 </div>
54 </form>
55 </section>
56 </body>
57 </html>`;
58 };