//Created By Arnav Kumar /*MY DOM FUNCTIONS*/ function id(el){ return document.getElementById(el); } function clas(e,i){ if(i){return document.getElementsByClassName(e)[i];} else{return document.getElementsByClassName(e)}} function A(query){return document.querySelectorAll(query);} function $(query){return document.querySelector(query);} /*________________________________*/ window.addEventListener("load",main); var currentLightSource=0;currentShape=0,color="#e0e0e0"; var positionX,positionY,angle,blur,size,darkColor,lightColor,firstGradientColor,secondGradientColor,radius,colorDifference,gradient,maxRadius; function changeLightSource(i){ var d=`l${i}`; var current=`l${currentLightSource}`; id(current).classList.remove("light-source-active"); id(d).classList.add("light-source-active"); currentLightSource=i; update(); } function changeShape(i){ var d=`s${i}`; var current=`s${currentShape}`; id(current).classList.remove("shape-active"); id(d).classList.add("shape-active"); currentShape=i; update(); } function changeBackgroundColor(clr){ if(checkValidColor(clr)){ document.body.style.backgroundColor=clr; id("color").value=clr; id("color1").value=clr; color=clr; } update(); } function checkValidColor(clr){ return /^#[0-9A-F]{6}$/i.test(clr) } function colorLuminance(hex, lum) { hex = String(hex).replace(/[^0-9a-f]/gi, ''); if (hex.length < 6) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } lum = lum || 0; let rgb = '#',c,i; for (i = 0; i < 3; i++) { c = parseInt(hex.substr(i * 2, 2), 16); c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16); rgb += ('00' + c).substr(c.length); } return rgb; } function getContrast(hex) { const r = parseInt(hex.substr(1, 2),16),g = parseInt(hex.substr(3, 2), 16),b = parseInt(hex.substr(5, 2), 16),yiq = (r * 299 + g * 587 + b * 114) / 1000 return yiq >= 128 ? '#001f3f' : '#F6F5F7' } function setDistance(){ var dis=id("distance").value; id("blur").value=dis*2; blur=id("blur").value=dis*2; distance=dis; update(); } function handleSize(){ var value=id("size").value size=value; distance=Math.round(value * 0.1); id("distance").value=distance; blur= Math.round(value * 0.2) id("blur").value=blur; setMaxRadius(Math.round(value / 2)); update(); } function setCode(str){ id("code").textContent=str; } function setBlur(){ var blr= id("blur").value; id("blur").value = blr blur=id("blur").value; update(); } function setMaxRadius(n){ id("radius").max=n; maxRadius=n; } function setIntensity(){ var intensity=id("intensity").value; colorDifference = intensity; update(); } function setRadius(){ var rad=id("radius").value; id("radius").value=rad; radius =rad; update(); } function update(){ if (currentShape === 1 || currentShape === 2){gradient = true;}else {gradient = false;} const darkColor = colorLuminance(color, colorDifference * -1) const lightColor = colorLuminance(color, colorDifference) const firstGradientColor = gradient && currentShape !== 3 ? colorLuminance(color, currentShape === 2 ? 0.07 : -0.1) : color const secondGradientColor = gradient && currentShape !== 3 ? colorLuminance(color, currentShape === 1 ? 0.07 : -0.1) : color switch (currentLightSource) { case 0: positionX = distance; positionY = distance; angle = 145; break; case 1: positionX = distance * -1; positionY = distance; angle = 225; break; case 3: positionX = distance * -1; positionY = distance * -1; angle = 315; break; case 2: positionX = distance; positionY = distance * -1; angle = 45; break; default: positionX = distance; positionY = distance; angle = 145; break; } document.documentElement.style.cssText = ` --positionX: ${positionX}px; --positionXOpposite: ${positionX * -1}px; --positionY: ${positionY}px; --positionYOpposite: ${positionY * -1}px; --angle: ${angle}deg; --blur: ${blur}px; --textColor: ${getContrast(color)}; --textColorOpposite: ${color}; --baseColor: ${color}; --darkColor: ${darkColor}; --lightColor: ${lightColor}; --firstGradientColor: ${firstGradientColor}; --secondGradientColor: ${secondGradientColor}; --size: ${size}px; --radius: ${radius}px; `; if (currentShape === 3) { id("box").classList.add('pressed'); } else { id("box").classList.remove('pressed'); } const borderRadius = parseInt(radius) === maxRadius ? '50%' : radius + 'px' const background = gradient && currentShape !== 0 ? `linear-gradient(${angle}deg, ${firstGradientColor}, ${secondGradientColor})` : `${color}` const boxShadowPosition = currentShape === 3 ? 'inset' : '' const firstBoxShadow = `${boxShadowPosition} ${positionX}px ${positionY}px ${blur}px ${darkColor}` const secondBoxShadow = `${boxShadowPosition} ${positionX * -1}px ${ positionY * -1 }px ${blur}px ${lightColor};` setCode(`border-radius: ${borderRadius}; background: ${background}; box-shadow: ${firstBoxShadow}, ${secondBoxShadow}`); highlight(); } function main(){ radius=id("radius").value; blur=id("blur").value; size=id("size").value; distance=id("distance").value; colorDifference=id("intensity").value; A(".light-source").forEach((el)=>{ el.addEventListener("click",()=>{ changeLightSource(parseInt(el.getAttribute("n"))); }); }); A(".shape").forEach((el)=>{ el.addEventListener("click",()=>{ changeShape(parseInt(el.getAttribute("n"))); }); }); A(".color").forEach((el)=>{ el.addEventListener("input",()=>{ changeBackgroundColor(el.value); }); }); id("copy").addEventListener("click",copy); id("distance").addEventListener("input",setDistance); id("size").addEventListener("input",handleSize); id("intensity").addEventListener("input",setIntensity); id("blur").addEventListener("input",setBlur); id("radius").addEventListener("input",setRadius); setTimeout(()=>{$(".loader").style.opacity="0"; setTimeout(()=>{$(".loader").style.display="none"},300);},2700) update(); } function copy(){ id("code-container").value=id("code").textContent; id("code-container").select() id("code-container").setSelectionRange(0, 99999) document.execCommand('copy') id("pre").classList.add('copied'); setTimeout(() => { id("pre").classList.remove('copied'); }, 1000) } function highlight(){ /*Prism CSS Code-Highlighter-Dark*/ var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/\blang(?:uage)?-([\w-]+)\b/i,t=0,r={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof a?new a(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=g.reach);A+=x.value.length,x=x.next){var P=x.value;if(t.length>n.length)return;if(!(P instanceof a)){var S,E=1;if(y){if(!(S=i(w,A,n,m)))break;var O=S.index,F=S.index+S[0].length,L=A;for(L+=x.value.length;L<=O;)L+=(x=x.next).value.length;if(A=L-=x.value.length,x.value instanceof a)continue;for(var N=x;N!==t.tail&&(Lg.reach&&(g.reach=z);var M=x.prev;_&&(M=s(t,M,_),A+=_.length),o(t,M,E),x=s(t,M,new a(f,v?r.tokenize(j,v):j,k,j)),C&&s(t,x,C),1"+i.content+""},!e.document)return e.addEventListener&&(r.disableWorkerMessageHandler||e.addEventListener("message",function(n){var t=JSON.parse(n.data),a=t.language,i=t.code,l=t.immediateClose;e.postMessage(r.highlight(i,r.languages[a],a)),l&&e.close()},!1)),r;var u=r.util.currentScript();function c(){r.manual||r.highlightAll()}if(u&&(r.filename=u.src,u.hasAttribute("data-manual")&&(r.manual=!0)),!r.manual){var g=document.readyState;"loading"===g||"interactive"===g&&u&&u.defer?document.addEventListener("DOMContentLoaded",c):window.requestAnimationFrame?window.requestAnimationFrame(c):window.setTimeout(c,16)}return r}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),function(e){var n=/("|')(?:\$?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*$)*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\$(?:"+n.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\$","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^$|$$/,string:{pattern:RegExp("^"+n.source+"$"),alias:"url"}}},selector:RegExp("[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+n.source+")*(?=\\s*\\{)"),string:{pattern:n,greedy:!0},property:/(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var t=e.languages.markup;t&&(t.tag.addInlined("style","css"),e.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,lookbehind:!0,inside:{"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{style:{pattern:/(["'])[\s\S]+(?=["']$)/,lookbehind:!0,alias:"language-css",inside:e.languages.css},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},"attr-name":/^style/i}}},t.tag))}(Prism); }

🌟🌟 Neumorphism Generator 🌟🌟