codingwalls · CoderSah · Oct 15, 2022 · Oct 15, 2022 · Oct 15, 2022
diff --git a/color-palaette/index.html b/color-palaette/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colors Palaette | Rahul Sah</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div class="copied">
+        Copied!
+    </div>
+    <div class="main-area">
+        <h1><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/274/artist-palette_1f3a8.png"> Color Palette</h1>
+        <div class="colors-box"></div>
+    </div>
+    <input type="text" id="color_input" value="" readonly>
+    <div class="footer">
+        <p>© Copyright <span id="year">2022</span> &nbsp;&nbsp;|&nbsp;&nbsp; Created By Rahul Sah 🇮🇳</p>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/color-palaette/script.js 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 += '<div class="each-palette">'
+    each_palette.forEach(each_color => {
+        colorstr += ' <div class="each-color">'
+        colorstr += '<div class="color" style="background:' + each_color + '" onclick=copy_color(this,"' + each_color + '")></div>'
+        colorstr += '<code>' + each_color + '</code>'
+        colorstr += ' </div>'
+    });
+    colorstr += '</div>'
+    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
@@ -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;
+    }
+}