git.squeep.com Git - urlittler/blob - 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 };