Merge pull request #71 from minhaj-313/main

Update
C0D1NG · Oct 1, 2023 · 6649968 · 6649968
2 parents 1421ec7 + 0d8b69d
commit 6649968
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 0 deletions.
diff --git a/Contributors.md b/Contributors.md
@@ -4,6 +4,7 @@
 
 | Author | Portfolio |
 | :---: | :---: |
+| Shaikh Minhaj | https://minhaj-313.github.io |
 | Jeevan Joshi | https://g1joshi.github.io |
 | Frits Sasia | https://fritssasia.github.io |
 | Shubhankar | https://shbhnkr.github.io |

diff --git a/Portfolio/Clock Website/images/favicon.webp b/Portfolio/Clock Website/images/favicon.webp
diff --git a/Portfolio/Clock Website/index.htm b/Portfolio/Clock Website/index.htm
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=], initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Nanum+Gothic+Coding:wght@700&family=Source+Code+Pro:wght@300&display=swap"
+        rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
+        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
+        integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"
+        crossorigin="anonymous"></script>
+    <link rel="icon" type="image/x-icon" href="images/favicon.webp">
+
+    <title>Online - Clock</title>
+</head>
+
+<body onload="startTime()">
+
+    <div class="px-4 pt-5 my-5 text-center ">
+
+        <h2 class="h2-clock">Online Clock</h2>
+
+        <div id="txt"></div>
+
+        <button onclick="myFunction()"
+            style="border:none; background-color:rgba(0, 0, 0, 0); font-size:50px;margin-top: 40px; margin-bottom: 15px;">💡</button>
+
+            <p style="color: grey;">Developed By : Shaikh Minhaj <a href="https://github.io/minhaj-313">(minhaj-313)</a></p>
+    </div>
+
+</body>
+
+</html>
diff --git a/Portfolio/Clock Website/script.js b/Portfolio/Clock Website/script.js
@@ -0,0 +1,20 @@
+function startTime() {
+    const today = new Date();
+    let h = today.getHours();
+    let m = today.getMinutes();
+    let s = today.getSeconds();
+    m = checkTime(m);
+    s = checkTime(s);
+    document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
+    setTimeout(startTime, 1000);
+  }
+
+  function checkTime(i) {
+    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
+    return i;
+  }
+
+  function myFunction() {
+    var element = document.body;
+    element.classList.toggle("dark-mode");
+ }
diff --git a/Portfolio/Clock Website/styles.css b/Portfolio/Clock Website/styles.css
@@ -0,0 +1,56 @@
+body {
+
+    background-color: white;
+    color: black;
+    font-size: 25px;
+  }
+
+  .dark-mode {
+    background-color: black;
+    color: white;
+  }
+
+.h2-clock{
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: -250px;
+    font-family: monospace;
+    color: rgb(0, 111, 135);
+    font-weight: bold;
+    text-shadow: 1px 1px 35px rgb(0, 106, 255);
+}
+#txt{
+    font-family: monospace;
+    text-align: center;
+    font-weight: bold;
+    font-size: 140px;
+    color: rgb(0, 117, 150);
+    box-sizing: border-box;
+    border-style: solid;
+    border-radius: 10px;
+    box-shadow: 1px 1px 20px rgb(47, 224, 255);
+    padding: 20px;
+    margin-top:  350px;
+    margin-left:  350px;
+    margin-right:  350px;
+    margin-bottom: 0px;
+    font-family: 'Gemunu Libre', sans-serif;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgb(24, 24, 24); 
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgb(0, 217, 255); 
+    border-radius: 7px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #45c7ff; 
+  }