Merge pull request #1048 from aysal04/darkmode_analog

feat: add dark mode functionality for analog clock
ZeroOctave · May 12, 2023 · 7e59f11 · 7e59f11
2 parents 4e6faf0 + 8e3d02a
commit 7e59f11
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 24 deletions.
diff --git a/Public/Analog_clock.html b/Public/Analog_clock.html
@@ -17,28 +17,28 @@
                     <div class="sc" id="sc"></div>
                </div>
         </div>
-        <script type="text/javascript">
-                const deg = 6;
-                const hr = document.querySelector('#hr');
-                const mn = document.querySelector('#mn');
-                const sc = document.querySelector('#sc');
+
+    <div class="mode">
 
-                setInterval(() => {
-                    let day = new Date();
-                    let hh = day.getHours() * 30;
-                    let mm = day.getMinutes() * deg;
-                    let ss = day.getSeconds() *deg;
+    <input type="checkbox" class="checkbox" id="checkbox">
+    <label for="checkbox" class="label">
+      <div class='ball'></div>
+    </label>
+
 
-                    hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
-                    mn.style.transform = `rotateZ(${mm}deg)`;
-                    sc.style.transform = `rotateZ(${ss}deg)`;
-                });
-            </script>
-         <script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" 
-                data-id="Astrodevil" data-description="Support me on Buy me a coffee!!" 
-                data-message="" data-color="#40DCA5"
-                data-position="Right"
-                data-x_margin="50" data-y_margin="50">
-            </script>
+</div>
+<script
+      data-name="BMC-Widget"
+      data-cfasync="false"
+      src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+      data-id="Astrodevil"
+      data-description="Support me on Buy me a coffee!!"
+      data-message=""
+      data-color="#40DCA5"
+      data-position="Right"
+      data-x_margin="50"
+      data-y_margin="50"
+></script>
+<script src="../assets/Js/analog_clock1.js"></script>
 </body>
 </html>
diff --git a/assets/Js/analog_clock1.js b/assets/Js/analog_clock1.js
@@ -12,4 +12,24 @@
                     hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
                     mn.style.transform = `rotateZ(${mm}deg)`;
                     sc.style.transform = `rotateZ(${ss}deg)`;
-                });
+                });
+
+const checkbox = document.getElementById("checkbox");
+const body = document.querySelector("body");
+const label = document.querySelector(".label");
+const root = document.querySelector(":root");
+const ball = document.querySelector(".ball");
+checkbox.addEventListener("change", function () {
+if (this.checked) {
+    body.style.background = "black";
+    label.style.backgroundColor = "#40DCA5";
+    root.style.setProperty("--sec-color", "#fff");
+    ball.style.backgroundColor = "#fff";
+} else {
+    body.style.background = "skyblue";
+    label.style.backgroundColor = "white";
+    root.style.setProperty("--sec-color", "red");
+    ball.style.backgroundColor = "black";
+}
+});
+
diff --git a/assets/css/Analog_clock.css b/assets/css/Analog_clock.css
@@ -4,6 +4,11 @@
   padding: 0;
   box-sizing: border-box;
  }
+
+ :root {
+             --sec-color: red;
+         }
+
 body
 {
    display: flex;
@@ -16,6 +21,7 @@ body
    {
      width: 350px;
      height: 350px;
+     margin-top: -10vh;
      display: flex;
      justify-content: center;
      align-items: center;
@@ -74,10 +80,11 @@ z-index: 10000;
   width: 8px;
   height: 80px;
   background: lightgrey;
-
   z-index: 10;
   border-radius: 6px 6px 0 0;
 }
+
+
 .mn:before
 {
   content: ' ' ;
@@ -94,7 +101,48 @@ z-index: 10000;
   position: absolute;
   width: 2px;
   height: 150px;
-  background: red;
+  background: var(--sec-color);
   z-index: 12;
   border-radius: 6px 6px 0 0;
 }
+
+.mode{
+  position: absolute;
+  margin-top: 60vh;
+  align-content: center;
+}
+
+.checkbox {
+  opacity: 0;
+  position: absolute;
+}
+
+.label {
+  width: 50px;
+  height: 26px;
+  background-color: #fff;
+  display: flex;
+  border-radius: 50px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  position: relative;
+  transform: scale(1.5);
+}
+
+.ball {
+  width: 20px;
+  height: 20px;
+  background-color: black;
+  box-shadow: 0 0 2px black;
+  position: absolute;
+  top: 3px;
+  left: 2px;
+  border-radius: 50%;
+  transition: transform 0.2s linear;
+}
+
+/*  target the elemenent after the label*/
+.checkbox:checked + .label .ball {
+  transform: translateX(24px);
+}