Eidam/Color-Cube
1
0
Fork 0
mirror of https://github.com/MrEidam/Color-Cube.git synced 2026-06-28 15:39:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

V3 - Added Time

Browse Source
This commit is contained in:
MrEidam
2023-09-26 19:10:29 +02:00
parent b03202069d
commit 1a9c1c445c
4 changed files with 100 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
main.js
View File

@@ -1,21 +1,3 @@
/*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'
@@ -37,16 +19,14 @@ function CColor(color, rgb) {
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;*/
document.getElementById('before').style.setProperty('--sh', `${Shadow.a}${Shadow.b}${Shadow.c}${Shadow.d}${Shadow.e}`);*/
// Shadow
Shadow = `0 0 120px ${color+'33'},0 0 200px ${color+'66'},0 0 300px ${color+'99'},0 0 400px ${color+'cc'}`
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
@@ -60,3 +40,19 @@ function CColor(color, rgb) {
event.target.classList.add('active');
console.log(Shadow);
}
// Clock
let hours = document.getElementById('hour');
let minutes = document.getElementById('minutes');
let seconds = document.getElementById('seconds');
setInterval(() => {
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
hours.innerHTML = h;
minutes.innerHTML = m;
seconds.innerHTML = s;
})