Eidam/Color-Cube
1
0
Fork 0
mirror of https://github.com/MrEidam/Color-Cube.git synced 2026-06-28 07:29:24 +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

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.vscode

23
index.html
View File

@@ -29,6 +29,29 @@
<span class="cl" style="--clr:#6441a5;" onclick="CColor('#6441a5')"></span>
<span class="cl" style="--clr:#7289DA;" onclick="CColor('#7289DA')"></span>
</div>
<div class="clock">
<div class="digital" style="--clr:#00dd00;">
<div class="screen" data-text="Hours">
<div class="time">
<div id="hour"></div>
</div>
</div>
</div>
<div class="digital" style="--clr:#dd0000;">
<div class="screen" data-text="Minutes">
<div class="time">
<div id="minutes"></div>
</div>
</div>
</div>
<div class="digital" style="--clr:#006FCD;">
<div class="screen" data-text="Seconds">
<div class="time">
<div id="seconds"></div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

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;
})

54
style.css
View File

@@ -1,7 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
transition: 0.5s;
}
body{
@@ -107,3 +109,55 @@ body{
scale: 1.5;
transition: 0.5s;
}
.clock{
position: absolute;
top: 69px;
display: flex;
gap: 10px;
font-family: 'Anton', sans-serif;
}
.clock .digital{
position: relative;
width: 60px;
height: 120px;/*
box-shadow: 20px 20px 20px -10px rgba(0,0,0,0.15),
inset 15px 15px 10px rgba(255,255,255,0.5),
-15px -15px 35px rgba(255,255,255,0.35),
inset -1px -1px 10px rgba(0,0,0,0.2);*/
}
.clock .digital .screen{
position: absolute;
inset: 20px;/*
box-shadow: 5px 5px 15px 0 #152b4a66,
inset 5px 5px 5px rgba(200,200,200,0.35),
5px 5px 15px rgba(255,255,255,1);*/
}
.clock .digital .screen::before{
content: attr(data-text);
position: absolute;
bottom: -2.5px;
left: 50%;
transform: translateX(-50%) scale(0.75);
letter-spacing: 0.05em;
color: #aaa;
text-transform: uppercase;
}
.clock .digital .time{
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
.clock .digital .time div{
position: relative;
font-size: 2.9em;
color: var(--clr);
letter-spacing: 0.1em;
margin-left: 0.1em;
}
.clock .digital:nth-last-child(1) .time div{
color: transparent;
-webkit-text-stroke: 2px var(--clr);
}