Add copy icon wrt #133

www/copy.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>copy</title>
+<path d="M20 8v-8h-14l-6 6v18h12v8h20v-24h-12zM6 2.828v3.172h-3.172l3.172-3.172zM2 22v-14h6v-6h10v6l-6 6v8h-10zM18 10.828v3.172h-3.172l3.172-3.172zM30 30h-16v-14h6v-6h10v20z"></path>
+</svg>

www/ghcup.css

@@ -63,7 +63,7 @@ body#idx > * {
     margin-left: auto;
     margin-right: auto;
     text-align: center;
-    width: 31em;
+    width: 37em;
 }
 
 body#idx > #pitch {
@@ -88,31 +88,56 @@ body#idx p.other-help {
     background-color: rgb(250, 250, 250);
     margin-left: auto;
     margin-right: auto;
-    width: 45rem;
-    text-align: center;
     border-radius: 3px;
     border: 1px solid rgb(204, 204, 204);
     box-shadow: 0px 1px 4px 0px rgb(204, 204, 204);
 }
 
 .instructions > * {
-    width: 45rem;
+    width: 55rem;
     margin-left: auto;
     margin-right: auto;
 }
 
+.instructions div.command-button {
+	display: flex;
+}
+
+.instructions div.command-button button {
+	color: white;
+	/* border: none; */
+	background-color: rgb(242, 242, 242);
+	border-width: 2px;
+	border-style: solid;
+	border-radius: 3px;
+
+    margin-left: 1rem;
+    margin-right: auto;
+	margin-top: 25px;
+	margin-bottom: 25px;
+    text-align: center;
+}
+
+.instructions div.command-button button:hover {
+	background: rgb(232, 232, 232);
+}
+
+.instructions div.command-button button:focus {
+	background: rgb(222, 222, 222);
+}
+
 hr {
     margin-top: 2em;
     margin-bottom: 2em;
 }
 
-#platform-instructions-linux > pre,
+#platform-instructions-linux > div > pre,
-#platform-instructions-mac > pre,
+#platform-instructions-mac > div > pre,
-#platform-instructions-freebsd > pre,
+#platform-instructions-freebsd > div > pre,
 #platform-instructions-win32 > pre,
 #platform-instructions-win64 > pre,
-#platform-instructions-default > div > pre,
+#platform-instructions-default > div > div > pre,
-#platform-instructions-unknown > div > pre {
+#platform-instructions-unknown > div > div > pre {
     background-color: #515151;
     color: white;
     margin-left: auto;
@@ -166,3 +191,50 @@ hr {
     color: #999;
     content: " $ ";
 }
+
+ /* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  /* border-bottom: 1px dotted black; [> If you want dots under the hoverable text <] */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text */
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -60px;
+
+  /* Fade in tooltip */
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+/* Tooltip arrow */
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}

www/ghcup.js

@@ -148,6 +148,16 @@ function fill_in_bug_report_values() {
     nav_app.textContent = navigator.appVersion;
 }
 
+function copyToClipboard() {
+  const text = document.getElementsByClassName("ghcup-command").item(0).innerText;
+  const el = document.createElement('textarea');
+  el.value = text;
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+}
+
 (function () {
     adjust_for_platform();
     set_up_cycle_button();

www/index.html

@@ -26,19 +26,19 @@
 
       <div id="platform-instructions-linux" class="instructions" style="display: none;">
         <p>Run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p>
-		<pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
+		<div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div>
         <p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.<br/>You appear to be running Linux. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
       </div>
 
       <div id="platform-instructions-mac" class="instructions" style="display: none;">
         <p>Run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p>
-		<pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
+		<div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div>
         <p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.<br/>You appear to be running macOS. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
       </div>
 
       <div id="platform-instructions-freebsd" class="instructions" style="display: none;">
         <p>Run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p>
-		<pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
+		<div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div>
         <p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.<br/>You appear to be running FreeBSD. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
       </div>
 
@@ -78,7 +78,7 @@
         <!-- duplicate the default cross-platform instructions -->
         <div>
           <p>If you are running Linux, macOS or FreeBSD,<br/>run the following in your terminal (as a user other than root), then follow the onscreen instructions.</p>
-		  <pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
+		  <div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div>
           <p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.</p>
         </div>
 
@@ -97,7 +97,7 @@
         <div>
           <p>To install Haskell, if you are running Linux, macOS or FreeBSD,<br/>run the following
           in your terminal (as a user other than root), then follow the onscreen instructions.</p>
-		  <pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
+		  <div class="command-button"><pre><span class='ghcup-command'>curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre><button class="tooltip" onclick="copyToClipboard()"><img src="copy.svg" alt="" /><span class="tooltiptext">Copy to clipboard</span></button></div>
           <p class="other-help">If you don't like curl | sh, see <a href="https://gitlab.haskell.org/haskell/ghcup/blob/master/README.md#manual-install">other installation methods</a>.</p>
         </div>