diff --git a/www/copy.svg b/www/copy.svg
new file mode 100644
index 0000000..b9b9daf
--- /dev/null
+++ b/www/copy.svg
@@ -0,0 +1,5 @@
+
+
+copy
+
diff --git a/www/ghcup.css b/www/ghcup.css
index c995699..4bb832a 100644
--- a/www/ghcup.css
+++ b/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-mac > pre,
-#platform-instructions-freebsd > pre,
+#platform-instructions-linux > div > pre,
+#platform-instructions-mac > div > pre,
+#platform-instructions-freebsd > div > pre,
#platform-instructions-win32 > pre,
#platform-instructions-win64 > pre,
-#platform-instructions-default > div > pre,
-#platform-instructions-unknown > div > pre {
+#platform-instructions-default > div > 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;
+}
diff --git a/www/ghcup.js b/www/ghcup.js
index 6085e54..77dd6d4 100644
--- a/www/ghcup.js
+++ b/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();
diff --git a/www/index.html b/www/index.html
index 616105a..4abc7f5 100644
--- a/www/index.html
+++ b/www/index.html
@@ -26,19 +26,19 @@
@@ -78,7 +78,7 @@
If you are running Linux, macOS or FreeBSD,
-
curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh
+
If you don't like curl | sh, see other installation methods .
@@ -97,7 +97,7 @@
To install Haskell, if you are running Linux, macOS or FreeBSD,
-
curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh
+
If you don't like curl | sh, see other installation methods .