From 432cf6b007a6accf3080e22d50c13c41942ac65f Mon Sep 17 00:00:00 2001 From: Ranjeet Singh <93567891+Ranjeet0302Singh@users.noreply.github.com> Date: Fri, 28 Oct 2022 01:44:30 +0530 Subject: [PATCH 1/4] Create index.html --- .../index.html | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 9-Color Full Digital & Analog Clock/index.html diff --git a/9-Color Full Digital & Analog Clock/index.html b/9-Color Full Digital & Analog Clock/index.html new file mode 100644 index 00000000..e1008675 --- /dev/null +++ b/9-Color Full Digital & Analog Clock/index.html @@ -0,0 +1,54 @@ + + + + + + + Clock + + + +
+
+
+
+
+ + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 +
+ + +
+
00
+
00
+
00
+
AM
+
+ +
+ + + + From cb73333ff6d01c31294723e1af9796d849cbb9cd Mon Sep 17 00:00:00 2001 From: Ranjeet Singh <93567891+Ranjeet0302Singh@users.noreply.github.com> Date: Fri, 28 Oct 2022 01:44:58 +0530 Subject: [PATCH 2/4] Create style.css --- 9-Color Full Digital & Analog Clock/style.css | 161 ++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 9-Color Full Digital & Analog Clock/style.css diff --git a/9-Color Full Digital & Analog Clock/style.css b/9-Color Full Digital & Analog Clock/style.css new file mode 100644 index 00000000..da77fc4f --- /dev/null +++ b/9-Color Full Digital & Analog Clock/style.css @@ -0,0 +1,161 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + box-sizing: border-box; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #2f363e; +} +.container{ + position: relative; + background: #2f363e; + /* min-height: 500px; */ + border-radius: 20px; + border-top-left-radius: 225px; + border-top-right-radius: 225px; + box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.75), 10px 10px 70px rgba(0, 0, 0, 0.25),inset 5px 5px 10px rgba(0, 0, 0, 0.5),inset 5px 5px 20px rgba(0, 0, 0, 0.2),inset -5px 5px 15px rgba(0, 0, 0, 0.75); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.clock{ + position: relative; + width: 450px; + height: 450px; + background: #2f363e; + border-radius: 50%; + box-shadow: 10px 50px 70px rgba(0, 0, 0, 0.25),inset 5px 5px 10px rgba(0, 0, 0, 0.5),inset 5px 5px 20px rgba(225, 225, 255, 0.2),inset -5px 5px 15px rgba(0, 0, 0, 0.75); + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 30px; +} +.clock::before{ + content: ''; + position: absolute; + width: 8px; + height: 8px; + background: #2f363e; + border: 3px solid white; + border-radius: 50%; + z-index: 10000000; +} + +.clock span{ + position: absolute; + inset: 20px; + color: #fff; + text-align: center; + transform: rotate(calc(30deg*var(--i))); +} +.clock span b{ + font-size: 2em; + opacity: 0.25; + font-weight: 600; + display: inline-block; + transform: rotate(calc(-30deg * var(--i))); +} + +.circle{ + position: absolute; + width: 300px; + height: 300px; + border: 2px solid rgba(0, 0, 0, 0.25); + border-radius: 50%; + display: flex; + align-items: flex-start; + justify-content: center; + z-index: 10; +} + +.circle i{ + position: absolute; + width: 6px; + height: 50%; + background: var(--clr); + opacity: 0.7 5; + transform: scaleY(0.5); + transform-origin: bottom; +} +.circle:nth-child(1) i{ + width: 2px; +} +.circle:nth-child(2) i{ + width: 6px; +} +.circle2{ + width: 240px; + height: 240px; + z-index: 9; +} +.circle3{ + width: 180px; + height: 180px; + z-index: 8; + +} +.circle::before{ + content: ''; + position: absolute; + top: -8.5px; + width: 15px; + height: 15px; + border-radius: 50%; + background: var(--clr); + box-shadow: 0 0 20px var(--clr), + 0 0 60px var(--clr); +} + +/* digital clock style */ +#time{ + margin-bottom: 40px; + display: flex; + padding: 10px 20px; + font-size: 2em; + font-weight: 600; + border: 2px solid rgba(0, 0, 0, 0.5); + border-radius: 40px; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), + inset 5px 5px 20px rgba(255, 255, 255, 0.2), + inset -5px -5px 15px rgba(0, 0, 0, 0.75); +} + +#time div{ + position: relative; + width: 60px; + text-align: center; + font-weight: 500; + color: var(--clr); +} +#time div:nth-child(1)::after,#time div:nth-child(2)::after{ + content: ':'; + position: absolute; + right: -4px; +} +#time div:last-child{ + font-size: 0.5em; + display: flex; + justify-content: center; + align-items: center; + color: #fff; +} +#time div:nth-child(2)::after{ + animation: animate 1s steps(1) infinite; +} + +@keyframes animate { + 0%{ + opacity: 1; + } + 50%{ + opacity: 0; + } +} From 055f764bedc62997fdc7a3165f1b540a86806a13 Mon Sep 17 00:00:00 2001 From: Ranjeet Singh <93567891+Ranjeet0302Singh@users.noreply.github.com> Date: Fri, 28 Oct 2022 01:45:35 +0530 Subject: [PATCH 3/4] Create script.js --- 9-Color Full Digital & Analog Clock/script.js | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 9-Color Full Digital & Analog Clock/script.js diff --git a/9-Color Full Digital & Analog Clock/script.js b/9-Color Full Digital & Analog Clock/script.js new file mode 100644 index 00000000..7836272f --- /dev/null +++ b/9-Color Full Digital & Analog Clock/script.js @@ -0,0 +1,39 @@ +let hr = document.querySelector("#hr"); +let mn = document.querySelector("#mn"); +let sc = document.querySelector("#sc"); + +setInterval(() => { + let day = new Date(); + let hh = day.getHours() * 30; + let mm = day.getMinutes() * 6; + let ss = day.getSeconds() * 6; + + hr.style.transform = `rotateZ(${hh + mm / 12}deg)`; + mn.style.transform = `rotateZ(${mm}deg)`; + sc.style.transform = `rotateZ(${ss}deg)`; + + // Digital clock + let hours = document.getElementById("hours"); + let minutes = document.getElementById("minutes"); + let seconds = document.getElementById("seconds"); + let ampm = document.getElementById("ampm"); + + let h = new Date().getHours(); + let m = new Date().getMinutes(); + let s = new Date().getSeconds(); + + let am=h >=12?"PM":"AM"; + + if (h>12){ + h=h-12; + } + + h=(h<10)?"0"+h:h + m=(m<10)?"0"+m:m + s=(s<10)?"0"+s:s + + hours.innerHTML = h; + minutes.innerHTML = m; + seconds.innerHTML = s; + ampm.innerHTML=am; +}); From 55ce4324d22d456c7bf3c1294e01cf5b5f9afec5 Mon Sep 17 00:00:00 2001 From: Ranjeet Singh <93567891+Ranjeet0302Singh@users.noreply.github.com> Date: Fri, 28 Oct 2022 01:46:28 +0530 Subject: [PATCH 4/4] Create README.md --- 9-Color Full Digital & Analog Clock/README.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 9-Color Full Digital & Analog Clock/README.md diff --git a/9-Color Full Digital & Analog Clock/README.md b/9-Color Full Digital & Analog Clock/README.md new file mode 100644 index 00000000..adc98c5c --- /dev/null +++ b/9-Color Full Digital & Analog Clock/README.md @@ -0,0 +1 @@ +![image](https://user-images.githubusercontent.com/93567891/198389318-aadb61b6-c7bc-4260-8836-c021868f01cb.png)