Add help icons to link to other nodes and gateways

diff --git a/index.html b/index.html
index bcbec42c59d8fa4cb04cc4c078ff71a3b902a4da..ab30b96d040f6a2fdf9210650776a8b91a3f930c 100644 (file)
--- a/index.html
+++ b/index.html
@@ -30,19 +30,26 @@
     }
 
     a {
-      display: block;
-      margin-block: 24px;
       inline-size: fit-content;
       text-decoration: none;
       font-weight: 700;
       color: hsl(216deg 50% 40%);
     }
 
-    a:hover,
-    a:focus {
+    .github {
+      display: block;
+      margin-block: 24px;
+    }
+
+    .github:hover,
+    .github:focus {
       text-decoration: underline;
     }
 
+    .help>svg {
+      block-size: 100%;
+    }
+
     form {
       display: flex;
       flex-direction: column;
@@ -50,6 +57,8 @@
     }
 
     label {
+      display: inline-flex;
+      gap: 4px;
       font-weight: 700;
     }
 
@@ -159,16 +168,30 @@
   </header>
 
   <main>
-    <a href="https://github.com/ardislu/solc-metadata">GitHub</a>
+    <a href="https://github.com/ardislu/solc-metadata" class="github">GitHub</a>
 
     <form>
       <label for="address">Smart contract address</label>
       <input name="address" id="address" value="0x63c1735a6b7419ae4c7b87c486ac7c393d983980" required data-1p-ignore data-lpignore>
 
-      <label for="rpc">JSON-RPC node</label>
+      <label for="rpc">JSON-RPC node
+        <a href="https://chainlist.org/" class="help">
+          <svg role="img" aria-labelledby="help-nodes-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <title id="help-nodes-icon">View other nodes</title>
+            <use href="#help" />
+          </svg>
+        </a>
+      </label>
       <input type="url" name="rpc" id="rpc" required value="https://ethereum-sepolia.publicnode.com">
 
-      <label for="ipfs">IPFS gateway</label>
+      <label for="ipfs">IPFS gateway
+        <a href="https://ipfs.github.io/public-gateway-checker/" class="help">
+          <svg role="img" aria-labelledby="help-ipfs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <title id="help-ipfs-icon">View other IPFS gateways</title>
+            <use href="#help" />
+          </svg>
+        </a>
+      </label>
       <input type="url" name="ipfs" id="ipfs" required value="https://cf-ipfs.com">
 
       <div>
@@ -181,6 +204,16 @@
     </form>
   </main>
 
+  <svg style="display: none;">
+    <defs>
+      <symbol id="help">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+        <path d="M12 17h.01" />
+      </symbol>
+    </defs>
+  </svg>
+
   <script type="module">
     // Make all imported functions available in DevTools, outside this scope
     Object.assign(globalThis, await import('/index.js'));