Align styling with other projects

Including visible blocking on load

diff --git a/index.html b/index.html
index 5a0674a178327497fb8f5e658b88277d8d67428a..b67728113d0bf702022913610a45c247889e4e6a 100644 (file)
--- a/index.html
+++ b/index.html
@@ -38,6 +38,17 @@
 
     form {
       inline-size: min(1080px, 100% - 16px);
+
+      &[data-loading] button {
+        cursor: not-allowed;
+        filter: unset;
+        background-color: hsl(216deg 15% 80%);
+      }
+
+      &[data-loading]::after {
+        content: 'Loading...';
+        content: '⏳' / 'Loading...';
+      }
     }
 
     a,
@@ -45,10 +56,37 @@
       font-weight: 700;
     }
 
+    a {
+      text-decoration: none;
+      color: hsl(216deg 50% 40%);
+
+      &:hover,
+      &:focus-within {
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+      }
+    }
+
     input,
     button {
       font-size: 1rem;
       padding: 8px;
+      border-radius: 4px;
+      border: 1px solid hsl(216deg 50% 85%);
+      outline: 2px solid transparent;
+      outline-offset: 1px;
+      transition: filter 300ms, border-color 300ms, outline-color 300ms;
+
+      &:hover {
+        transition: filter 150ms;
+        filter: brightness(102%);
+      }
+
+      &:focus-within {
+        transition: border-color 150ms, outline-color 150ms;
+        border-color: transparent;
+        outline-color: hsl(216deg 50% 40%);
+      }
     }
 
     button {
@@ -185,6 +223,12 @@
 
     document.querySelector('form').addEventListener('submit', async e => {
       e.preventDefault();
+
+      if (e.target.hasAttribute('data-loading')) {
+        return;
+      }
+      e.target.setAttribute('data-loading', '');
+
       const contract = e.target.elements['contract'].value.replaceAll(/\s/g, '');
       const rpc = e.target.elements['rpc'].value;
       const slotOutput = e.target.elements['slot-output'];
@@ -209,6 +253,8 @@
       else {
         eventOutput.insertAdjacentHTML('beforeend', '<p>No events found.</p>');
       }
+
+      e.target.removeAttribute('data-loading');
     });
   </script>
 </body>