commit 59ac548eeb980a940eeb067db9a9eabf7cd4df1a Author: MrEidam Date: Sat Sep 2 23:51:46 2023 +0200 V1 diff --git a/icon.png b/icon.png new file mode 100644 index 0000000..b9218db Binary files /dev/null and b/icon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2332fc1 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + Cube + + + + +
+
+
+
+
+ + + + +
+
+
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..b6db210 --- /dev/null +++ b/main.js @@ -0,0 +1,62 @@ +/*function CColor(color){ + document.querySelectorAll('.side').forEach((element) => { + element.style.background = + 'linear-gradient(to bottom, #151515, '+color+')'; + }); + document.getElementById('top').style.setProperty('--color', color); + + //before.style.setProperty('--color',color) + + // active marking + document.getElementsByClassName('cl').forEach(function(item){ + item.classList.remove('active'); + }) + event.target.classList.add('active'); + + + +}*/ +let Shadow +function CColor(color, rgb) { + // Change the background of elements with the class 'side' + document.querySelectorAll('.side').forEach((element) => { + element.style.background = 'linear-gradient(to bottom, #151515, ' + color + ')'; + }); + + // Set the '--color' CSS variable on the #top element + let before = document.getElementById('before') + before.style.setProperty('--color', color); + document.getElementById('after').style.setProperty('--color', color); + + /* + // Box - Shadow + Shadow = { + a:`0 0 120px rgba(${rgb}0.2)`, + b:`,0 0 200px rgba(${rgb}0.4)`, + c:`,0 0 300px rgba(${rgb}0.6)`, + d:`,0 0 400px rgba(${rgb}0.8)`, + e:`,0 0 500px rgba(${rgb}1) + ;`} + document.getElementById('before').style.setProperty('--sh', `${Shadow.a}${Shadow.b}${Shadow.c}${Shadow.d}${Shadow.e}`); + + // Construct the box-shadow property + const boxShadowValue = `0 0 120px rgba(${rgb}, 0.2), 0 0 200px rgba(${rgb}, 0.4), 0 0 300px rgba(${rgb}, 0.6), 0 0 400px rgba(${rgb}, 0.8), 0 0 500px rgba(${rgb}, 1)`; + + // Set the box-shadow property directly + document.getElementById('before').style.boxShadow = boxShadowValue;*/ + + // Shadow + Shadow = `0 0 120px ${color+'33'},0 0 200px ${color+'66'},0 0 300px ${color+'99'},0 0 400px ${color+'cc'}` + let Shadow4 = `,0 0 500px ${color};` + before.style.boxShadow = Shadow// + Shadow4 + + + // Active marking + let elementsWithClClass = document.getElementsByClassName('cl'); + Array.from(elementsWithClClass).forEach(function (item) { + item.classList.remove('active'); + }); + + event.target.classList.add('active'); + console.log(Shadow); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..caa9917 --- /dev/null +++ b/style.css @@ -0,0 +1,109 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + transition: 0.5s; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #050505; +} +.cube{ + position: relative; + width: 300px; + height: 300px; + transform-style: preserve-3d; + animation: animate 4s linear infinite; +} +@keyframes animate{ + from{transform: rotateX(-30deg) rotateY(0deg);} + to{transform: rotateX(-30deg) rotateY(360deg);} +} +.cube div{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; +} +.cube div span{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(#151515, #00ec00); + transform: rotateY(calc(90deg * var(--i))) translateZ(150px); +} +.top{ + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: #222; + transform: rotateX(90deg) translateZ(150px); + transition: 0.5s; +} +.after{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: var(--color,#00ec00); + transform: rotateX(90deg) translateZ(-150px); +} +.before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: var(--color,#0f0); + transform: rotateX(90deg) translateZ(-230px); + filter: blur(20px); + box-shadow: 0 0 120px rgba(0,255,0,0.2), + 0 0 200px rgba(0,255,0,0.4), + 0 0 300px rgba(0,255,0,0.6), + 0 0 400px rgba(0,255,0,0.8); + transition: 0.5s; +} +.colors{ + position: absolute; + top: 0; + padding: 0px 15px 5px 15px; + background: #444; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + filter: drop-shadow(0 0 20px #888); + border-radius: 0 0 50px 50px; +} +.colors span{ + position: relative; + width: 20px; + height: 20px; + background: var(--clr); + margin: 10px; + border-radius: 50%; + cursor: pointer; + transition: 0.5s; +} +.colors span:hover{ + filter: brightness(0.5); + scale: 1.25; + transition: 0.5s; +} +.colors span.active{ + filter: drop-shadow(2px 2px 4px #888); + scale: 1.5; + transition: 0.5s; +} \ No newline at end of file