git.squeep.com Git - urlittler/blob - src/template/root-html.js

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