From f447ba417a6748fc588240ab6639507cbd2612db Mon Sep 17 00:00:00 2001 From: MrEidam Date: Wed, 15 Nov 2023 19:05:27 +0100 Subject: [PATCH] Version 2 --- index.html | 30 ++++++++++++++++++ main.js | 19 +++++++++++ style.css | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..ef19020 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + Cube - Time + + + + +
+
+
+ +

+ + +

+ + +

+ + +

+ +
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..b0ee345 --- /dev/null +++ b/main.js @@ -0,0 +1,19 @@ +setInterval(() => { + let hh; + let mm; + + if(new Date().getHours()<=9){ + hh = '0' + new Date().getHours(); + }else{ + hh = new Date().getHours(); + } + + if(new Date().getMinutes()<=9){ + mm = '0' + new Date().getMinutes(); + }else{ + mm = new Date().getMinutes(); + } + document.querySelectorAll('.side').forEach((e) => { + e.innerHTML = `${hh} : ${mm}`; + }) +}, 1000); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1e32b59 --- /dev/null +++ b/style.css @@ -0,0 +1,92 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; + user-select: none; +} +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 12s 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); +} +.top::after{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: #00ec00; + transform: translateZ(-300px); +} +.top::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: #0f0; + transform: translateZ(-380px); + 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), + 0 0 500px rgba(0,255,0,1); +} +.side{ + color: #fff; + position: relative; + width: 100%; + height: 100%; + transform: translateZ(50rem); + text-align: center; + display: flex; + justify-content: center; + align-items: center; + font-size: 4em; + text-shadow: 0 0 50px #050505; +} \ No newline at end of file