From 5ffe6d248d5beae1f6139f21c4106931e306d253 Mon Sep 17 00:00:00 2001 From: Shivam Kumar <118415844+z1shivam@users.noreply.github.com> Date: Sat, 28 Oct 2023 00:43:07 +0530 Subject: [PATCH] added colour variation tab --- icon-192x192.png | Bin 0 -> 3763 bytes icon-512x512.png | Bin 0 -> 16318 bytes index.html | 62 ++++++++++++++++++--- manifest.json | 20 +++++++ script.js | 138 +++++++++++++++++++++++++++++++++++++++++++++- service-worker.js | 24 ++++++++ style.css | 62 +++++++++++++++++++-- 7 files changed, 292 insertions(+), 14 deletions(-) create mode 100644 icon-192x192.png create mode 100644 icon-512x512.png create mode 100644 manifest.json create mode 100644 service-worker.js diff --git a/icon-192x192.png b/icon-192x192.png new file mode 100644 index 0000000000000000000000000000000000000000..9c173494d8f1ccbfcc13ed0b58db619aca7e755d GIT binary patch literal 3763 zcmds4i8s{U8~@s}Ws3;ecd3!r+Gfv|va1+F8v9tXjEF%pMbe^ZEQ6nroylNEXrnAs z7{)%P)WjGh%ov8>y#K~~&$;(G&%Nh7=brmK_w#u^4_q$Wi3rIF0RSN4U~l8bvAzFJ zfkT|tZ8n0RW4L17?5u!B!to`J!y9Ym;32>ncLZ+U2LMs9gN>y}VljOV9(UAJk$-*7 zNlYbOJ>Me4k^e-Ql((bTd1a60j9TV@lZM(_h(FJn% z5!cUrrTIq6UV~0oD)m?X`S#`6t+_R7Q=th19u?iaHeA#R?>o(xQmp(mzhH_-*+7!V z!YvT64?7Gvy$J`JcF9ZIY010EBP0Z--rJBO&eDW2wv-mrJ;VuG2FXyrS1_nx3j zkb6VEH^KPyE_t&cv9J2i!!paJB`=PMNkXl|^o~{c7Qg zPD~E)WeG7oMfG8aUw#QKgzOrPu|TiM-Edb1X!!8bpd+IFgraPktBj1Qsln_@!0fhz z3qtBu9;Edu8tyqN;&2S`QPP+%NIvb292&GgzJ)hhwV zig3PTA2LF!*{3Y7-8;!6?yGe?{*2-Ho1lR&>Us$OJDp9tye!J_L(laM>;$sv1=6Fs z`%I=J?ci=ky-&!_ExR|r$NVtUUeH0%yQHokP`}Ild)GgJBjJ#PN58js1StEb6zqGK zx7P&5kHtiC)rROd1V#>*f9_7g43WalkBak%rl`*%J$nRvX!Icwb|4wVXk&`Bn6~;O zYjN$Pb4A$ondP_4CAM=dOIxQE99X`ci*J{h--+_Gf9GN6(aCuo^?r@-vG2;Rzod(% ztIindY~i2Di!IRR5ve0M*5K_p@J4L~j#Jr@QTV8hi|4ip!d0nDE1f$h%eSeFzQAG0 zwazx!XgY6scm0qT8USCA_g#iV7^SiOoNSwe*p@N$Vkrg>0F1F&I;++vDv)VYq$u3m zzsYBO_!cOXk~QX5>x-3MS28rne7WvBM@Z5&>dUa#kPH=n@-Nn+wwUuZhaS_GPuxjxzNRov&5ZqHjWuThEDh#Niy*P^B20l?iqynJz!ffVwk*4p|2L6x8z!rheFD` z8_^xw#BQ1!G&na1DT4h(5S#ohxv(*U(f&LP?*z9=$HyrRGK)cRYyYd123^o3riMDT z%){%YHadMIv^0@gq(GQog=7OXXr%lONIXC z_}<{`s>fHK*zuLkOAdRs4SwzRq|g}W*Z>Ey8fv%aE`;ylD(H1&$d#HNqmqx^k{bOQ z*Aq0WrO)XCVf5o*7O@s$uUv}yE2Maw={?NS(bcwLg+i-+Y+uHomB#;z8`B1s@iV~% zV*Qvwa1)=n(Oi2|1wFhSRyk&0QwSq)caHw<^a>Iyw+a(gvk}7^JaxM_J=hz_?GMFR zje{k&n%o>}$UI{`5@8^oJX2n|gfQ%swKge^T;Ss2a?_EFq^1Nr_9T3l;1URT8(dMz z|MKi>X`;}K5;tF#w{fz-tG&&4nv@c9HljeQm95oVxcDhZjDih3k@^w)Zu(($WWO|u zSe`v~0k}SY+$p!R!zN<+G|$U|QNxBAW+&39!48Uv2R1uCm7S3N5_W$f3fKnm`5j&1~B<^=;{PjEw{^lZnK1@ zTWRYV$661~98#_UTN-rxqCS#;XugRtt8? z)s@S$ISZE2!JF55l@=a>76nUB8UWTmfil}@ zcqv5OB2fq!=(TU2cWT0NWO_i~mFmP3A8_rKdO0U~l$Tc; zA%lDDmgmVHq~gcBua>b;Gu-cFXPRul4a*@qI?C_T=@|7@3>ZK$Cf0ihJEPa`2M&S1q;l~s-yikc!4UBeRM^?AV4xIokkzyJ% z`%Gel<%dC*qvE(s4gbyvL3-{iBCNL5uFvtHEzH}o^zO)qE|Aqx+U111k1pH2?RO$) zYeo``!K|^n4cy;u&jS>>UGu$xpT@QsR}ix3x6?n3jeLwOaxN(7&T1M_TECfQ?{Gdm z*_RP1DSX4_Z#fIvjSa7-^^kQVj;2khp`{z26i`@k)Oy{!nY%IZDk0yVgq{l5i>#Pq zD2&Y1$;2`fRd6A&&aY0=DS!1*4crUs20U}(iBKqV>FJ9~> zjg``)Bc@hwLB2W+T9su9BRJ$M)#UwXBDy=^@~l5T^lu54DdGedXq43S{V^NKP`c!*H=)WP6-SN0C+8$5 zl+E3XFhN1h&cNu=3w>|&?zQKGlBWLA>D#(^=<_8<>wr?6?b)QxggtK2)Eg^fT5Ul^ zfbS&Su_J3*A%tX_(iou`d2nrHTWOau20b2jQ?oj7D&@zpVwV04uQJUM7n;&PJP{l@ zm=){`5$P^EY8CzWM)s-d;9>tFpm&j9oFE{LMtZm%}nRz)k?}a75GWmj;1l=Wq4vwQmZHM zrm#};Mm!#FxTA{en7T@l3l%KzoSSyd?Rt3pQoId?CHNthBUPdxEAHc~-|8Ds zo1mn_`)pd><0Qu^zRnHPoZ`ae`&QGTuqx*QsNYBZp~JE@J}H=g8(X^K8hhdK<;0*R zm-cqFPoQ=y_>!4RSjgU`Op_cBqGr|Dt|{Y(pmV>g9;f9BY}89{Kh&NBmo{surJG0Z ztjmgA41!?~TeQTOczGqt{6uUOKFA!7!EGstdrdXGK61@_^fc&w2S)R}ajrE+M$vP2 zHF4+)v#M$Gq!ztzf=m0C&lfRIIbvD?+Qb0#N_7{7`$sSA_D*8?7va1LPLT_|ZP$#P z8@hPQSM^3UduH>;ue5K_;>~@DDLhuhQ@W~xh*JWgAvJG&b k*g99>uX^&oAc+q6v&su|^hzQnIKmTfu)S>4Xyu>re*zmJLI3~& literal 0 HcmV?d00001 diff --git a/icon-512x512.png b/icon-512x512.png new file mode 100644 index 0000000000000000000000000000000000000000..ed523d6074b02999b5c7e3f80710604e06ee82c0 GIT binary patch literal 16318 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 + + Random Colours @@ -18,24 +20,66 @@
#212121
-
    - -
+
    - - -
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..036c2a6 --- /dev/null +++ b/manifest.json @@ -0,0 +1,20 @@ +{ + "name": "Random Colour", + "short_name": "Random Colour", + "start_url": "/", + "display": "standalone", + "background_color": "#61003f", + "theme_color": "#61003f", + "icons": [ + { + "src": "/icon-192x192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "/icon-512x512.png", + "type": "image/png", + "sizes": "512x512" + } + ] + } diff --git a/script.js b/script.js index 56edf6d..4c5cead 100644 --- a/script.js +++ b/script.js @@ -1,9 +1,13 @@ let clipboard = new ClipboardJS("#copy"); +let clipboard2 = new ClipboardJS("#hsl"); +let clipboard3 = new ClipboardJS("#rgb"); let colorViewer = document.getElementById("colorViewer"); let colCode = document.getElementById("colCode"); let generatedColour = "#212121"; let colorHistoryUL = document.getElementById("colorHistoryUL"); +let hslBtn = document.getElementById("hslBtn"); +let rgbBtn = document.getElementById("rgbBtn"); let colorHistory = []; if (localStorage.getItem("colorHistory") !== null) { @@ -12,15 +16,118 @@ if (localStorage.getItem("colorHistory") !== null) { colorHistory = ["#212121"]; } +function hexToRGBHSL(hex) { + hex = hex.replace(/^#/, ""); + + let r = parseInt(hex.slice(0, 2), 16); + let g = parseInt(hex.slice(2, 4), 16); + let b = parseInt(hex.slice(4, 6), 16); + + r /= 255; + g /= 255; + b /= 255; + + const max = Math.max(r, g, b); + const min = Math.min(r, g, b); + let h, + s, + l = (max + min) / 2; + + if (max === min) { + h = s = 0; // Achromatic + } else { + const d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; + } + + h /= 6; + } + + h = Math.round(h * 360); + s = Math.round(s * 100); + l = Math.round(l * 100); + + const colorRange = generateColorRange(h, s); + + return { + rgb: `RGB(${r * 255}, ${g * 255}, ${b * 255})`, + hsl: `HSL(${h}, ${s}%, ${l}%)`, + colorRange: colorRange, + }; +} + +function hslToRgb(h, s, l) { + let r, g, b; + + if (s === 0) { + r = g = b = l; // Achromatic + } else { + const hueToRgb = (p, q, t) => { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; + }; + + const q = l < 0.5 ? l * (1 + s) : l + s - l * s; + const p = 2 * l - q; + r = hueToRgb(p, q, h + 1 / 3); + g = hueToRgb(p, q, h); + b = hueToRgb(p, q, h - 1 / 3); + } + + const toHex = (x) => { + const hex = Math.round(x * 255).toString(16); + return hex.length === 1 ? '0' + hex : hex; + }; + + return '#' + toHex(r) + toHex(g) + toHex(b); +} + +function generateColorRange(hue, saturation) { + const hexCodes = []; + const lightnessStep = 12; + + for (let i = 12; i <= 96; i += lightnessStep) { + const lightness = i; + const color = hslToRgb(hue / 360, saturation / 100, lightness / 100); + hexCodes.unshift(color); + } + + return hexCodes; +} + + const setAsCurrent = (e) => { colorViewer.style.backgroundColor = e; colCode.textContent = e; + const { rgb, hsl } = hexToRGBHSL(e); + rgbBtn.innerText = rgb; + hslBtn.innerText = hsl; + colorChanger(hexToRGBHSL(e).colorRange); }; const createElement = (color) => { colorViewer.style.backgroundColor = color[0]; colCode.textContent = color[0]; colorHistoryUL.innerHTML = ""; + const { rgb, hsl, colors } = hexToRGBHSL(color[0]); + rgbBtn.innerText = rgb; + hslBtn.innerText = hsl; + colorHistory.forEach((color) => { let createdEl = document.createElement("li"); createdEl.textContent = color; @@ -47,9 +154,13 @@ let refresh = document if (colorHistory.length > 10) { colorHistory.pop(); } + const { rgb, hsl, colorRange } = hexToRGBHSL(generatedColour); + rgbBtn.innerText = rgb; + hslBtn.innerText = hsl; + colorChanger(colorRange); + createElement(colorHistory); localStorage.setItem("colorHistory", JSON.stringify(colorHistory)); - document.querySelectorAll("li").forEach((li) => { li.addEventListener("click", (e) => { setAsCurrent(e.target.textContent); @@ -60,5 +171,30 @@ let refresh = document document.getElementById("clearHistory").addEventListener("click", (e) => { colorHistory = ["#212121"]; createElement(colorHistory); + colorChanger(hexToRGBHSL(colorHistory[0]).colorRange); localStorage.setItem("colorHistory", JSON.stringify(colorHistory)); }); + +const colorChanger = (colorRange) => { + const colorBlock = document.getElementById("colorGrid").children + for (let i = 0; i < colorBlock.length; i++) { + if(i === 0 || i === 1){ + colorBlock[i].style.color = "#212121"; + } + colorBlock[i].style.backgroundColor = colorRange[i]; + colorBlock[i].innerText = colorRange[i]; + } +}; + +colorChanger(hexToRGBHSL(colorHistory[0]).colorRange); + +const colorBlocks = document.querySelectorAll(".colorBlock"); +colorBlocks.forEach((colorBlock) => { + colorBlock.addEventListener("click", (e) => { + colorViewer.style.backgroundColor = e.target.textContent; + colCode.textContent = e.target.textContent; + const { rgb, hsl } = hexToRGBHSL(e.target.textContent); + rgbBtn.innerText = rgb; + hslBtn.innerText = hsl; + }); +}); diff --git a/service-worker.js b/service-worker.js new file mode 100644 index 0000000..d52cc03 --- /dev/null +++ b/service-worker.js @@ -0,0 +1,24 @@ +self.addEventListener("install", (e) => { + e.waitUntil( + caches.open("static").then((cache) => { + return cache.addAll([ + "/", + "/index.html", + "/style.css", + "/script.js", + "/manifest.json", + "/icon-192x192.png", + "/icon-512x512.png", + "index.js" + ]); + }) + ); + }); + + self.addEventListener("fetch", (e) => { + e.respondWith( + caches.match(e.request).then((response) => { + return response || fetch(e.request); + }) + ); + }); diff --git a/style.css b/style.css index 215fc26..ceb6927 100644 --- a/style.css +++ b/style.css @@ -31,14 +31,14 @@ display: flex; gap: 10px; flex-direction: column; - background-color: rgb(255, 244, 250); + background-color: #fffff0; padding: 6px; border-radius: 7px; border-bottom-right-radius: 0; border-top-right-radius: 0; } -button{ +.sideButton{ color: #860057; display: flex; align-items: center; @@ -51,7 +51,7 @@ button{ border: 2px solid rgb(252, 188, 220); } -button:hover{ +.sideButton:hover{ background-color: #860057; color: #fffff0; border: 2px solid #860057; @@ -71,7 +71,7 @@ button:hover{ position: fixed; top: 64px; width: 100%; - background-color: white; + background-color: #fffff0; display: flex; align-items: center; padding-top: 4px; @@ -111,3 +111,57 @@ ul li{ bottom: 12px; right: 10px; } + +.bottomDiv{ + position: fixed; + bottom: 0; + background-color: #fffff0; + width: 100%; + +} + +.buttonConbottom{ + display: flex; + align-items: center; + gap: 10px; + padding: 10px; +} + +.bottomBarButton{ + font-size: 15px; + display: flex; + justify-content: center; + align-items: center; + background-color: #fffff0; + padding: 15px 0px; + border: 2px solid #860057; + color: #860057; + border-radius: 5px; + width: 100%; + font-family: 'sometype mono', monospace; +} +.bottomBarButton:hover{ + background-color: #860057; + color: #fffff0; + border: 2px solid #860057; +} +.colorGrid{ + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; + padding: 0px 10px 10px 10px; +} + +.colorBlock{ + height: 50px; + width: 100%; + background-color: #212121; + border-radius: 5px; + box-shadow: 0px 0px 4px #21212171; + cursor: pointer; + color: #fffff0; + font-family: 'sometype mono', monospace; + display: flex; + justify-content: center; + align-items: center; +}