Small improvements to the website

omrilotan · Nov 21, 2023 · 8b05fe3 · 8b05fe3
1 parent 0caac4a
commit 8b05fe3
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 36 deletions.
diff --git 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
@@ -1,24 +1,16 @@
 import isbot from '..'
-import { amend } from '../src/amend/index.js'
-import list from '../src/list.json'
 
 {
   const textarea = document.querySelector('textarea')
   const output = document.querySelector('output')
   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,28 +64,24 @@ 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)
     ].join(''))
     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
@@ -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;
 }