Add files via upload

abdulgafurissah · Nov 9, 2024 · f62a9a6 · f62a9a6
1 parent b4d2c98
commit f62a9a6
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 0 deletions.
diff --git a/app.html b/app.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Analog Clock</title>
+    <link rel="stylesheet" href="clock_style.css">
+</head>
+<body>
+    <div class="fidelus">FIDELUS CLOCK</div>
+    <div id="container">
+        <div class="clock-dial">
+            <div class="dot"></div>
+            <!-- Clock numbers -->
+            <div class="time time-1">1</div>
+            <div class="time time-2">2</div>
+            <div class="time time-3">3</div>
+            <div class="time time-4">4</div>
+            <div class="time time-5">5</div>
+            <div class="time time-6">6</div>
+            <div class="time time-7">7</div>
+            <div class="time time-8">8</div>
+            <div class="time time-9">9</div>
+            <div class="time time-10">10</div>
+            <div class="time time-11">11</div>
+            <div class="time time-12">12</div>
+
+            <!-- Clock hands -->
+            <div class="hand hour-hand"></div>
+            <div class="hand minute-hand"></div>
+            <div class="hand second-hand"></div>
+        </div>
+    </div>
+
+    <script src="logic.js"></script>
+</body>
+</html>
diff --git a/clock_style.css b/clock_style.css
@@ -0,0 +1,112 @@
+.hand {
+    width: 50%;
+    height: 6px;
+    background-color: #185519;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: 0% 50%;
+    transform: rotate(90deg); /* Default rotation */
+}
+
+.hour-hand {
+    height: 8px;
+    background-color: #3a3a3a;
+    width: 35%;
+}
+
+.minute-hand {
+    height: 6px;
+    background-color: #185519;
+    width: 45%;
+}
+
+.second-hand {
+    height: 4px;
+    background-color: red;
+    width: 50%;
+}
+
+.clock-dial{
+    width: 500px;
+    height: 500px;
+    border: 20px solid #FFBF61;
+    border-radius: 50%;
+    margin: 0% auto;
+    position: relative;
+    margin-top: 60px;
+    -webkit-box-shadow: 5px 5px 15px 5px #000000; 
+    box-shadow: 5px 5px 15px 5px #000000;
+
+}
+.dot{
+    width: 20px;
+    height: 20px;
+    background-color: #185519;
+    border-radius: 50%;
+    position: absolute;
+    top: 240px;
+    left: 240px;
+}
+.time{
+    font-size: 30px;
+    font-weight: bold;
+    color: #185519;
+    position: absolute;
+}
+.time-1{
+    top: 40px;
+    right: 140px;
+}
+
+.time-2{
+    top: 125px;
+    right: 45px;
+}
+.time-3{
+    top: 235px ;
+    right: 10px ;
+}
+.time-4{
+    top:345px ;
+    right:45px ;
+}
+.time-5{
+    top:439px ;
+    right: 130px ;
+}
+.time-6{
+    bottom: 10px;
+    left:  240px;
+}
+.time-7{
+    top: 430px;
+    left: 130px ;
+}
+.time-8{
+    top: 345px;
+    left: 45px;
+}
+.time-9{
+    top:235px ;
+    left:10px ;
+}
+.time-10{
+    top: 125px ;
+    left: 45px ;
+}
+.time-11{
+    top: 40px;
+    left: 130px;
+}
+.time-12{
+    top:10px ;
+    left: 235px ;
+}
+
+.fidelus{
+    font: 20px bold;
+    font-style: oblique;
+    left: 40.50%;
+    text-align: center;
+}
diff --git a/logic.js b/logic.js
@@ -0,0 +1,26 @@
+function updateClock() {
+    const now = new Date();
+
+    const seconds = now.getSeconds();
+    const minutes = now.getMinutes();
+    const hours = now.getHours();
+
+    // Calculate the angles for each hand
+    const secondAngle = seconds * 6; // 360deg / 60s
+    const minuteAngle = minutes * 6 + seconds * 0.1; // 360deg / 60m + gradual move per second
+    const hourAngle = (hours % 12) * 30 + minutes * 0.5; // 360deg / 12h + gradual move per minute
+
+    // Select clock hands
+    const secondHand = document.querySelector(".second-hand");
+    const minuteHand = document.querySelector(".minute-hand");
+    const hourHand = document.querySelector(".hour-hand");
+
+    // Apply rotation to each hand
+    secondHand.style.transform = `rotate(${secondAngle}deg)`;
+    minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
+    hourHand.style.transform = `rotate(${hourAngle}deg)`;
+}
+
+// Update clock every second
+setInterval(updateClock, 1000);
+updateClock(); // Initial call to set clock hands