diff --git a/copy-icon.png b/copy-icon.png new file mode 100644 index 0000000..93756c6 Binary files /dev/null and b/copy-icon.png differ diff --git a/css/darkaqua.css b/css/darkaqua.css index 2dc00d8..311ce54 100644 --- a/css/darkaqua.css +++ b/css/darkaqua.css @@ -149,6 +149,20 @@ div.misc1 { transition: 0.4s; } +.button3 { + background-color: transparent; + border: none; + cursor: pointer; + transform: scale(.7); + transition: 0.4s; +} +.button3 img { + height: 3em; + filter: invert(86%) sepia(42%) saturate(3730%) hue-rotate(122deg) brightness(97%) contrast(103%); +} +.button1 {} +.button2 {} + .button1:hover { background-color: #a0ffff; transform: scale(1.1); @@ -159,6 +173,50 @@ div.misc1 { transform: scale(1.1); color: #001717; } +.button3 img:hover, +.button3 img:focus { + filter: invert(94%) sepia(84%) saturate(2523%) hue-rotate(163deg) brightness(106%) contrast(105%); + transform: scale(1.1); +} +/* copy code tooltip */ +#copyTooltip { + position: relative; + display: inline-block; + bottom: 100%; + left: 10%; + color: #00f5f5; + cursor: auto; +} +/* animation to remove tooltip */ +.slide-out-bck-center { + -webkit-animation: slide-out-bck-center 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both; + animation: slide-out-bck-center 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both; +} +@-webkit-keyframes slide-out-bck-center { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(-1100px); + transform: translateZ(-1100px); + opacity: 0; + } + } + @keyframes slide-out-bck-center { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(-1100px); + transform: translateZ(-1100px); + opacity: 0; + } + } + .box1 { margin-top: 30px; border: 1px solid #00f5f5; @@ -174,6 +232,12 @@ div.misc1 { border-radius: 5px; background: #001717; } +.hex-info { + display: flex; + justify-content: center; + align-items: center; + height: 3em; +} label { text-transform: uppercase; margin: 20px 0px; diff --git a/index.html b/index.html index cf07d1e..4458441 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Hex© Color Code - + @@ -35,7 +35,10 @@ - +
+ + +
@@ -60,6 +63,7 @@ @github
-owned by Yashvardhan Baid + \ No newline at end of file diff --git a/js/script.js b/js/script.js index 73de48b..78497b5 100644 --- a/js/script.js +++ b/js/script.js @@ -1,21 +1,40 @@ -(function(window, document) {})(window, document); +(function (window, document) {})(window, document); function check1() { - var x = document.getElementsByClassName("input"); - var i; - for (i = 0; i < x.length; i++) { - x[i].style.borderColor = document.getElementById('color-box').value; - } + var x = document.getElementsByClassName("input"); + var i; + for (i = 0; i < x.length; i++) { + x[i].style.borderColor = document.getElementById("color-box").value; + } - document.getElementById('value-box').value = document.getElementById('color-box').value; + document.getElementById("value-box").value = + document.getElementById("color-box").value; } function check2() { - var x = document.getElementsByClassName("input"); - var i; - for (i = 0; i < x.length; i++) { - x[i].style.borderColor = document.getElementById('value-box').value; - } + var x = document.getElementsByClassName("input"); + var i; + for (i = 0; i < x.length; i++) { + x[i].style.borderColor = document.getElementById("value-box").value; + } - document.getElementById('color-box').value = document.getElementById('value-box').value; -} \ No newline at end of file + document.getElementById("color-box").value = + document.getElementById("value-box").value; +} + +function copyToClipboard() { + const copyHex = document.getElementById("value-box"); + copyHex.addEventListener("change", updateValue); + function updateValue(e) { + copyHex.setAttibute("value", e.target.value); + } + const copyCode = copyHex.value; + navigator.clipboard.writeText(copyCode); + + const tooltip = document.getElementById("copyTooltip"); + tooltip.textContent = "Copied!"; + tooltip.classList.add("slide-out-bck-center"); +} + +const copyButton = document.getElementById("copyButton"); +copyButton.addEventListener("click", copyToClipboard);