V3 - Added Time

.gitignore

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

index.html

@@ -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>

main.js

@@ -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}`);
+    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'}`
+    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;
+})

style.css

@@ -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{
@@ -106,4 +108,56 @@ body{
     filter: drop-shadow(2px 2px 4px #888);
     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);
 }