From 8b05fe3972a85b8704014e0a69d872c96c6f99eb Mon Sep 17 00:00:00 2001
From: LeaVerou <LeaVerou@users.noreply.github.com>
Date: Tue, 21 Nov 2023 10:15:34 +0000
Subject: [PATCH] Small improvements to the website

---
 page/index.pug  |  3 +--
 page/script.js  | 36 ++++++++++++------------------------
 page/styles.css | 34 ++++++++++++++++++++++++----------
 3 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/page/index.pug b/page/index.pug
index 7eb73e8..3b34170 100644
--- a/page/index.pug
+++ b/page/index.pug
@@ -15,8 +15,7 @@ html(lang="en-GB")
       h1 Is this a bot user agent string?
       textarea
       output
-      p Click here to&nbsp;
-        a(href="#copy" id="copy-link") copy link
+      button(id="copy-link") Copy link
       p Powered by Javascript package&nbsp;
         a(href="https://github.com/omrilotan/isbot" rel="noopener noreferrer") isbot
     script(src="./script.js")
diff --git a/page/script.js b/page/script.js
index 42d683c..bc87d72 100644
--- a/page/script.js
+++ b/page/script.js
@@ -1,6 +1,4 @@
 import isbot from '..'
-import { amend } from '../src/amend/index.js'
-import list from '../src/list.json'
 
 {
   const textarea = document.querySelector('textarea')
@@ -8,17 +6,11 @@ import list from '../src/list.json'
   const copyLink = document.querySelector('[id="copy-link"]')
   let timer
 
-  const query = window.location.search.replace(/\?ua=(.*)$/, '$1')
-
-  amend(list)
+  const url = new URL(window.location.href)
+  const ua = url.searchParams.get('ua')
 
   textarea.childNodes.forEach(child => child.parentNode?.removeChild(child))
-  textarea.appendChild(document.createTextNode(
-    query
-      ? decodeURIComponent(query)
-      : navigator.userAgent
-  )
-  )
+  textarea.appendChild(document.createTextNode(ua || navigator.userAgent))
   textarea.addEventListener('keyup', change)
   textarea.addEventListener('paste', change)
   textarea.addEventListener('focus', () => textarea.select())
@@ -72,12 +64,10 @@ import list from '../src/list.json'
     }
 
     output.appendChild(details(value))
-
-    output.className = ''
-    setTimeout(() => { output.className = 'highlight' }, 100)
   }
 
-  copyLink.addEventListener('click', () => {
+  copyLink.addEventListener('click', (event) => {
+    event.preventDefault()
     const { protocol, host, pathname } = document.location
     navigator.clipboard.writeText([
       protocol, '//', host, pathname, '?ua=', encodeURIComponent(textarea.value)
@@ -85,15 +75,13 @@ import list from '../src/list.json'
     const dialog = document.createElement('dialog')
     dialog.appendChild(document.createTextNode('copied to clipboard'))
     document.body.appendChild(dialog)
+    dialog.showModal()
     setTimeout(() => {
-      dialog.showModal()
-      setTimeout(() => {
-        dialog.addEventListener('transitionend', () => {
-          dialog.close()
-          document.body.removeChild(dialog)
-        })
-        dialog.style.opacity = 0
-      }, 2000)
-    }, 0)
+      dialog.addEventListener('transitionend', () => {
+        dialog.close()
+        document.body.removeChild(dialog)
+      })
+      dialog.style.opacity = 0
+    }, 1000)
   })
 }
diff --git a/page/styles.css b/page/styles.css
index f8f0537..c325d4f 100644
--- a/page/styles.css
+++ b/page/styles.css
@@ -1,5 +1,6 @@
 :root {
   --color-background: #e5e5e5;
+  --color-code-background: #eee;
   --color-foreground: #333;
   --color-shadow: #0d275041;
   --color-highlight: #fff;
@@ -10,7 +11,7 @@
   padding: 0;
 }
 
-html {
+html, textarea, button {
   font: 100 100%/1.4 -apple-system, "BlinkMacSystemFont", "Helvetica Neue", "Helvetica", "Lucida Grande", "Arial", sans-serif;
 }
 
@@ -46,7 +47,7 @@ h1 {
 }
 
 textarea {
-  font-size: 2em;
+  font-size: 1.7em;
   width: 100%;
   height: 5em;
   padding: .5em;
@@ -71,27 +72,40 @@ output {
 
 kbd {
   display: inline-block;
-  background: #eee;
+  background: var(--color-code-background);
   font-size: 0.8em;
   padding: 0 0.2em;
 }
+
+button {
+  font-size: 1.1em;
+  padding: 0.5em 1em;
+  border-radius: 0.5em;
+  border-width: 0;
+  color: var(--color-foreground);
+  text-shadow: var(--color-highlight) 1px 1px 0;
+  background: var(--color-background);
+  color: var(--color-foreground);
+  box-shadow: var(--color-shadow) .1em .1em .1em,
+              inset var(--color-highlight) .1em .1em .1em,
+              inset var(--color-shadow) -.1em -.1em .1em;
+  cursor: pointer;
+  margin: 0 0 1em;
+}
+
 dialog {
   position: fixed;
   top: 10vh;
-  left: 0;
-  z-index: 100;
+  left: 40vw;
   width: 20vw;
-  margin: 0 40vw;
   padding: 1em;
   background: var(--color-foreground);
   color: var(--color-highlight);
   text-shadow: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  text-align: center;
   border-radius: 1em;
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity .5s ease-in-out;
   box-shadow: var(--color-shadow) 0 0 0 .5em;
 }