diff --git a/index.html b/index.html index 0016e1a..e6e1734 100644 --- a/index.html +++ b/index.html @@ -150,7 +150,12 @@

Optional parameters

Result

- Copy + + Copy +
+ +
+
diff --git a/script.js b/script.js index 708e023..a8f84a3 100644 --- a/script.js +++ b/script.js @@ -9,6 +9,15 @@ function copyResultToCB() { resultNode.select() resultNode.setSelectionRange(0, 99999) navigator.clipboard.writeText(resultNode.value) + + const copyBtn = document.getElementById('copy-btn') + const copyBlock = document.getElementById('copy-block') + + copyBlock.classList.remove('hidden') + + setTimeout(function() { + copyBlock.classList.add('hidden') + }, 500) } function buildResult() { diff --git a/style.css b/style.css index 7460c55..818e1f3 100644 --- a/style.css +++ b/style.css @@ -59,4 +59,31 @@ html { .container { max-width: 930px !important; +} + +.blockCopy { + width: 100px; + background-color: #374151; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 8px 6px; + position: absolute; + z-index: 1; + bottom: -40px; + left: 50%; + margin-left: -50px; + transition: opacity 1s; + white-space: nowrap; +} + +.blockCopy::after { + content: ""; + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent #374151 transparent; } \ No newline at end of file