First Relese

Zana-SHokrii · Nov 10, 2023 · fbfa077 · fbfa077
commit fbfa077
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 0 deletions.
diff --git a/Image/darkClock.jpg b/Image/darkClock.jpg
diff --git a/Image/lightClock.jpg b/Image/lightClock.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+		<link rel="stylesheet" href="style.css" />
+		<title>Analog Clock | Zana Shokrii</title>
+	</head>
+	<body>
+		<h1>Analog Clock</h1>
+        <div class="clock">
+            <div class="needle hour"></div>
+            <div class="needle minute"></div>
+            <div class="needle second"></div>
+            <div class="center-point"></div>
+        </div>
+        <button class="toggle">light</button>
+		<script src="script.js"></script>
+	</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,35 @@
+// toggle bettwen light and dark
+const toggle = document.querySelector('.toggle')
+toggle.addEventListener('click', () => {
+    const body = document.body
+    body.classList.toggle('dark')
+
+    const styleElement = document.head.appendChild(document.createElement("style"));
+    if(body.classList.contains('dark')) {
+        styleElement.innerHTML = ".clock::before {background-image: url('Image/darkClock.jpg');}";
+    }
+    else {
+        styleElement.innerHTML = ".clock::before {background-image: url('Image/lightClock.jpg');}";
+    }
+})
+
+// setTime
+function setTime () {
+    // get time
+    const time = new Date()
+    const hour = time.getHours() % 12
+    const minute = time.getMinutes()
+    const second = time.getSeconds()
+
+    // get elements
+    const hourEl = document.querySelector('.hour')
+    const minuteEl = document.querySelector('.minute')
+    const secondEl = document.querySelector('.second')
+
+    // set Time
+    hourEl.style.transform = `translate(-50%, -100%) rotate(${hour * 30}deg)`
+    minuteEl.style.transform = `translate(-50%, -100%) rotate(${minute * 6}deg)`
+    secondEl.style.transform = `translate(-50%, -100%) rotate(${second * 6}deg)`
+}
+
+setInterval(setTime, 100)
diff --git a/style.css b/style.css
@@ -0,0 +1,125 @@
+@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&display=swap');
+
+* {
+	box-sizing: border-box;
+}
+
+:root {
+    --primary-color: #FFFFFF;
+    --secondary-color: #303F9F;
+    --text-color: #607D8B;
+}
+
+body.dark {
+    --primary-color: #303F9F;
+    --secondary-color: #607D8B;
+    --text-color: #FFFFFF;
+}
+
+body {
+	font-family: 'Karla', sans-serif;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	overflow: hidden;
+	margin: 0;
+    background-color: var(--primary-color);
+    transition: all 0.3s ease-in;
+}
+
+h1 {
+    color: var(--text-color);
+    font-weight: 300;
+    font-size: 40px;
+    text-transform: uppercase;
+    margin-top: 40px;
+}
+
+.clock {
+    margin-top: 30px;
+    max-width: 100%;
+    max-height: 100%;
+    width: 250px;
+    height: 250px;
+    background-color: var(--primary-color);
+    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.35);
+    position: relative;
+    border: 5px solid rgb(243, 243, 243);
+    border-radius: 50%;
+    overflow: hidden;
+    user-select: none;
+}
+
+.clock::before {
+    content: '';
+    background-image: url('Image/lightClock.jpg');
+    background-position: center center;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    transition: background-image 0.3s linear;
+}
+
+.needle {
+    width: 3px;
+    height: 80px;
+    border-radius: 10px;
+    background-color: var(--secondary-color);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -100%) rotate(0deg);
+    transform-origin: bottom center;
+    z-index: 2;
+}
+
+.hour {
+    width: 5px;
+    height: 65px;
+}
+
+.second {
+    height: 85px;
+    background-color: red;
+}
+
+.center-point {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 13px;
+    height: 13px;
+    background-color: var(--secondary-color);
+    border-radius: 50%;
+    border: 3px solid red;
+    z-index: 3;
+}
+
+button {
+    margin-top: 130px;
+    border: 1px solid var(--secondary-color);
+    background-color: transparent;
+    padding: 8px 15px;
+    border-radius: 5px;
+    font-family: inherit;
+    text-transform: uppercase;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--secondary-color);
+    cursor: pointer;
+    user-select: none;
+}
+
+button:active {
+    transform: scale(0.95);
+}
+
+body.dark button {
+    border: 2px solid var(--text-color);
+    color: var(--text-color);
+}