From 19bd9d109699c763054b4390fa556ed89bfc9af4 Mon Sep 17 00:00:00 2001
From: Juan Martin <martinmuda@gmail.com>
Date: Tue, 21 Mar 2023 09:05:20 -0300
Subject: [PATCH] add clock times

---
 index.html | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index ae9d99c..270003e 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,10 @@
   </head>
   <body>
     <div class="z-container" >
-      <div class="core items-1">
-        <hr class="item line hora" style="width: 110px; height: 5px;  border:1px solid red; --angle: -90">
-        <hr class="item line minuto" style="width: 150px; height: 2px; border:1px solid red;  --angle: -45">
+      <div class="core items-1 offset-270">
+        <hr class="item line hora" style="width: 110px; height: 5px;  border:1px solid red; --angle: 0">
+        <hr class="item line segundo" style="width: 150px; height: 2px; border:1px solid red;  --angle: 0">
+        <hr class="item line minuto" style="width: 120px; height: 3px; border:1px solid red;  --angle: 0">
       </div>
       <div class="ring-2 items-12 offset-270">
         <div class="item xs">12</div>
@@ -85,8 +86,12 @@
       </div>
     </div>
     <script>
-      var el = document.querySelector(".minuto")
-      var minuto = el.style.getPropertyValue("--angle")
+      var elh = document.querySelector(".hora")
+      var hora = elh.style.getPropertyValue("--angle")
+      var elm = document.querySelector(".minuto")
+      var minuto = elm.style.getPropertyValue("--angle")
+      var els = document.querySelector(".segundo")
+      var segundo = els.style.getPropertyValue("--angle")
       function timeToDegrees(hours, minutes, seconds) {
         const hourDegrees = (hours % 12) * 30 + (minutes / 2) + (seconds / 120);
         const minuteDegrees = minutes * 6 + (seconds / 10);
@@ -101,7 +106,9 @@
       setInterval(() => {
         const now = new Date();
         const degrees = timeToDegrees(now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
-        el.style.setProperty("--angle", degrees.second)
+        elh.style.setProperty("--angle", degrees.hour)
+        elm.style.setProperty("--angle", degrees.minute)
+        els.style.setProperty("--angle", degrees.second)
         
       }, 1000)
     </script>
