Add example buttons with test reconciliation service urls

public/css/style.css

@@ -258,7 +258,7 @@ main * {
 
 .introduction h1 {
   max-width: 800px;
-  margin: 30px auto 90px auto;
+  margin: 30px auto 30px auto;
   color: var(--skohub-greenmiddle);
   font-weight: 400;
   font-size: 50px;
@@ -339,9 +339,10 @@ main * {
   margin-top: 1rem;
   margin-left: auto;
   margin-right: auto;
+  cursor: pointer;
 }
 
-.main-intotext-content {
+.main-infotext-content {
   position: relative;
   max-width: 900px;
   margin: -300px auto 0 auto;

public/index.html

@@ -30,7 +30,6 @@
       <section class="introduction">
         <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
       </section>
-
       <section class="keyvisual-content">
         <div class="uploadForm">
           <form action="/upload" enctype="multipart/form-data" method="post">
@@ -69,6 +68,11 @@ <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
           </div>
         </div>
       </section>
+      <section class="keyvisual-content">
+        <p>Test out these URLs as examples in your favorite reconcile spec compliant service (click to copy):</p>
+          <input data-url="https://reconcile-test.skohub.io/reconcile?language=de&account=kim&dataset=https://w3id.org/kim/hochschulfaechersystematik/scheme" type="button" value="Hochschulfächersystematik (german)" class="btn example-url"/>
+          <input data-url="https://reconcile-test.skohub.io/reconcile?language=en&account=nalt-test&dataset=https://lod.nal.usda.gov/nalt-core" type="button" value="AgroVoc (english)" class="btn example-url" />
+      </section>
 
     </main>
     <!-- main end -->
@@ -112,6 +116,8 @@ <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
   const spinner = document.querySelector("#spinner")
   const checkmark = document.querySelector("#checkmark")
   const result = document.querySelector("#result")
+  const exampleUrlButton = document.querySelectorAll("input.btn.example-url")
+  console.log(exampleUrlButton)
 
   const url = new URL(window.location.href)
   const idParam = url.searchParams.get("id")
@@ -128,6 +134,15 @@ <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
     }
   }
 
+  function copyUrl(e) {
+    const url = e.target.dataset.url
+    navigator.clipboard.writeText(url).then(function() {
+      console.log('Copied!');
+    }, function() {
+      console.log('Copy error')
+    });
+  }
+
   function validateInput() {
     const input = document.getElementById("language");
     const value = input.value;
@@ -163,6 +178,9 @@ <h1>Unleash the full potential of controlled vocabularies in reconciliation</h1>
     getData()
   })
 
+  exampleUrlButton.forEach(b => b.addEventListener("click", copyUrl))
+
+
   const getData = async () => {
     try {
       const response = await fetch(`./log/${id.value}.json`)