diff --git a/color-palaette/index.html b/color-palaette/index.html new file mode 100644 index 0000000..664238e --- /dev/null +++ b/color-palaette/index.html @@ -0,0 +1,27 @@ + + + + + + + + Colors Palaette | Rahul Sah + + + + +
+ Copied! +
+
+

Color Palette

+
+
+ +
+

© Copyright 2022   |   Created By Rahul Sah 🇮🇳

+
+ + + + diff --git a/color-palaette/script.js b/color-palaette/script.js new file mode 100644 index 0000000..6eae32e --- /dev/null +++ b/color-palaette/script.js @@ -0,0 +1,96 @@ +const colors = [ + ["#FFFFFF", "#E7E7E7", "#D1D1D1", "#B6B6B6", "#9B9B9B"], + ["#DC8665", "#138086", "#534666", "#CD7672", "#EEB462"], + ["#E8A49C", "#3C4DAD", "#2D0E8B", "#F04393", "#F9C449"], + ["#86E3CE", "#D0E6A5", "#FFDD94", "#FA897B", "#CCABD8"], + ["#F5CEC7", "#E79796", "#FFC9BB", "#FFB284", "#C6C09C"], + ["#455054", "#308695", "#D45769", "#E69D45", "#D4CFC9"], + ["#478BA2", "#DE5B6D", "#E9765B", "#F2A490", "#B9D4DB"], + ["#AAC9CE", "#B6B4C2", "#C9BBCB", "#E5C1CD", "#F3DBCF"], + ["#7E9680", "#79616F", "#AE6378", "#D87F81", "#EAB595"], + ["#C6A477", "#ECD59F", "#D3E7EE", "#ABD1DC", "#7097AB"], + ["#3D5284", "#5BABA0", "#CBE54E", "#94B447", "#5D6E1E"], + ["#522157", "#8B4C70", "#C2649A", "#E4C7B7", "#E4DFD9"], + ["#264D59", "#43978D", "#F9E07F", "#F9AD6A", "#D46C46"], + ["#C73866", "#FE676E", "#FD8F52", "#FFBD71", "#FFDC82"], + ["#015C92", "#2D82B5", "#52A6D5", "#88CDF6", "#BCE6FF"], + ["#FF7B89", "#815082", "#6F5F90", "#758EB7", "#A5CAD2"], + ["#5AA7A7", "#96D7C6", "#BAC94A", "#E2D36B", "#6CBCBF"], + ["#33539E", "#7FACD6", "#BFBBDA", "#E8B7D4", "#A5678E"], + ["#DF825F", "#F8956F", "#DFB15B", "#4D446F", "#706695"], + ["#85CBCC", "#ABDEE0", "#F9E2AE", "#FBC78D", "#A7D676"], + ["#FF7B89", "#8A5082", "#6F5F90", "#758EB7", "#A5CAD2"], + ["#47CACC", "#6CBCC9", "#CDB3D4", "#E7B7CB", "#FFBE88"], + ["#041D2D", "#004E9A", "#428CD4", "#FF9CDA", "#EA4492"], + ["#2C6975", "#6BB2AA", "#CDE0C9", "#E0ECDE", "#FFFFFF"], + ["#6AAB9C", "#FA9284", "#E06C78", "#5874DC", "#384E78"], + ["#4A707A", "#7697A0", "#94B0B7", "#C2CBC5", "#DDDDDA"], + ["#35BBCC", "#019184", "#F8D90F", "#D3DD18", "#FE7A15"], + ["#031B88", "#6096FD", "#AAB6FB", "#FB7BBE", "#FAA7BB"], + ["#205072", "#329D9C", "#56C596", "#7BE495", "#CFF4D2"], + ["#7BD5F5", "#787FF6", "#4ADEDE", "#1CA7EC", "#1F2F98"], + ["#0B0742", "#120C6C", "#5672EB", "#FF9190", "#FDC094"], + ["#FBEEE6", "#FFE5D8", "#FFCAD4", "#F3AB86", "#9F8189"] +] + +// Generating Color Palette +const colors_box = document.querySelector(".colors-box") +const copy_div = document.querySelector(".copied") +var colorstr = '' +var cleartime, ele +colors.forEach(each_palette => { + colorstr += '
' + each_palette.forEach(each_color => { + colorstr += '
' + colorstr += '
' + colorstr += '' + each_color + '' + colorstr += '
' + }); + colorstr += '
' + document.querySelector(".colors-box").innerHTML = colorstr + start_animation() +}); + +// Copy color Function +function copy_color(e, color) { + document.querySelector("#color_input").value = color + copyText = document.getElementById("color_input"); + copyText.select(); + document.execCommand('copy') + copyBoxPos = getCoords(e) + copy_div.style.left = copyBoxPos.left + "px" + copy_div.style.top = copyBoxPos.top + "px" + clearTimeout(cleartime); + copy_div.classList.remove("visible") + copy_div.classList.add("visible") + cleartime = setTimeout(function() { + copy_div.classList.remove("visible") + }, 1000) +} + +function start_animation() { + palletes = document.querySelectorAll(".each-palette"); + for (let i = 0; i < palletes.length; i++) { + setTimeout(function() { + palletes[i].classList.add("animated"); + }, 70 * i + 70); + } +} + +function getCoords(elem) { // crossbrowser version + var box = elem.getBoundingClientRect(); + + var body = document.body; + var docEl = document.documentElement; + + var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; + var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; + + var clientTop = docEl.clientTop || body.clientTop || 0; + var clientLeft = docEl.clientLeft || body.clientLeft || 0; + + var top = box.top + scrollTop - clientTop; + var left = box.left + scrollLeft - clientLeft; + + return { top: top, left: left }; +} diff --git a/color-palaette/styles.css b/color-palaette/styles.css new file mode 100644 index 0000000..9af2a7a --- /dev/null +++ b/color-palaette/styles.css @@ -0,0 +1,205 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto+Mono&display=swap'); +* { + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-family: 'Lato', sans-serif; +} + +body { + background: #eeeeee; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.main-area { + padding: 2rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.main-area h1 { + margin-bottom: 2rem; + color: #ffffff; + background: #607d8b; + padding: 0.5rem; + border-radius: 10px; + font-size: 1.7rem; + letter-spacing: 2px; +} + +.main-area h1 img { + height: 2rem; + vertical-align: bottom; + -webkit-user-drag: none; +} + +.colors-box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 1rem; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin-bottom: 2rem; +} + +.each-palette { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 0.7rem; + padding: 1rem; + background: white; + border-radius: 1rem; + position: relative; + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + opacity: 0; + -webkit-box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px; + box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px; + -webkit-transition: 0.3s ease-in-out; + -o-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.each-color { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 0.5rem; +} + +.each-color .color { + width: 3rem; + height: 7rem; + background: #4caf50; + border-radius: 1.5rem; + -webkit-box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px; + box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px; + -webkit-transition: 0.4s ease; + -o-transition: 0.4s ease; + transition: 0.4s ease; +} + +.each-color .color:active { + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); +} + +.each-color code { + font-family: 'Roboto Mono', monospace; + font-size: 1.1rem; + color: #575555; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} + +#color_input { + width: 0.5rem; + position: absolute; + left: -5rem; +} + +.animated { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + opacity: 1; +} + +.copied { + position: absolute; + display: inline-block; + -webkit-transform: translate(-10px, -50px); + -ms-transform: translate(-10px, -50px); + transform: translate(-10px, -50px); + background: #000000a3; + padding: 0.5rem; + color: white; + border-radius: 0.3rem; + top: -100px; + left: -100px; + z-index: 1; + opacity: 0; + -webkit-transition: 0.3s ease opacity; + -o-transition: 0.3s ease opacity; + transition: 0.3s ease opacity; +} + +.copied.visible { + opacity: 1; +} + +.copied:after { + content: ""; + width: 1.5rem; + height: 1.5rem; + background: #000000a3; + display: inline-block; + position: absolute; + bottom: -50%; + left: 50%; + -webkit-transform: translate(-50%, 6px); + -ms-transform: translate(-50%, 6px); + transform: translate(-50%, 6px); + -webkit-clip-path: polygon(100% 0, 0 0, 50% 50%); + clip-path: polygon(100% 0, 0 0, 50% 50%); +} + +.footer { + position: fixed; + bottom: 0; + width: 100%; + background: #000000db; + padding: 0.5rem; + color: white; + text-align: center; +} + +.footer p { + font-size: 1.1rem; + cursor: pointer; + font-weight: 300; + margin: 0; +} + +@media only screen and (max-width:500px) { + .main-area { + padding: 2rem 1rem; + } + .each-palette { + padding: 0.7rem; + } + .each-color code { + font-size: 0.8rem; + } + .footer p { + font-size: 0.9rem; + } +}