Add files via upload

tejas-130704 · Jun 16, 2024 · a914cf6 · a914cf6
1 parent cf7934c
commit a914cf6
Show file tree

Hide file tree

Showing 7 changed files with 263 additions and 0 deletions.
diff --git a/earth.webp b/earth.webp
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+<button id="changeTheme">Theme</button>
+    <div class="main">
+        <div class="second" id="handSec">
+            <div id="second-hand"></div>
+        </div>
+        <div class="minute" id="handMin">
+            <div id="min-hand"></div>
+        </div>
+        <div class="hour" id="handHr">
+            <div id="hour-hand"></div>
+        </div>
+        <div class="time-show" id="time-show"> 
+            <span id="hour-time"></span>:
+            <span id="min-time"></span>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,17 @@
+{
+  "manifest_version": 3,
+  "name": "Cosmic Clock Tab",
+  "version": "1.0",
+  "description": "Cosmic Clock Tab is the new tab clock. New tab allows you to see an analog clock when you open it. You can use it with clock theme.The themes were inspired by galaxies and orbits.",
+  "chrome_url_overrides": {
+      "newtab": "index.html"
+  },
+  "permissions": ["storage"],
+  "icons": {
+      "16": "icons/16.jpg",
+      "32": "icons/32.jpg",
+      "48": "icons/48.jpg",
+      "128": "icons/128.jpg"
+    }
+}
+
diff --git a/moon.jpg b/moon.jpg
diff --git a/script.js b/script.js
@@ -0,0 +1,79 @@
+
+const viewportWidth = window.innerWidth;
+const viewportHeight = window.innerHeight;
+function Update() {
+    const d = new Date();
+    min = d.getMinutes();
+    hour = d.getHours();
+    second=d.getSeconds();
+    document.getElementById('hour-time').innerText = hour;
+    document.getElementById('min-time').innerText = min < 10 ? '0' + min : min.toString();
+    const AngleMin = min * 6;
+    const AngleHr = (hour % 12) * 30 + (min / 60) * 30;
+    const AngleSec= second *6;
+    // alert(AngleSec);
+    const mi = document.getElementById('handMin');
+    const hr = document.getElementById('handHr');
+    const sec = document.getElementById('handSec');
+    sec.style.transform=`rotate(${AngleSec}deg)`;
+    mi.style.transform = `rotate(${AngleMin}deg)`;
+    hr.style.transform = `rotate(${AngleHr}deg)`;
+
+}
+setInterval(Update, 100);
+
+
+function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function randomStar() {
+    for (let x = 0; x < 50; x++) {
+        let y = viewportHeight - getRandomInt(0, viewportHeight);
+        let x = viewportWidth - getRandomInt(0, viewportWidth);
+        let size = getRandomInt(0, 3)+'px';
+        const star = document.createElement('span');
+        star.classList.add('star');
+        document.body.appendChild(star);
+        star.style.top=y+'px';
+        star.style.left=x+'px';
+        star.style.width=size;
+        star.style.height=size;
+        star.style.opacity=getRandomInt(0.3, 1);
+        console.log(x+'px  '+y+'px ')
+    }
+
+}
+randomStar();
+
+
+let isDarkTheme = false;
+
+// Add click event listener
+changeTheme.addEventListener('click', () => {
+    // Toggle between themes
+    let Sec=document.getElementById('handSec');
+    let Min=document.getElementById('handMin');
+    let Hr=document.getElementById('handHr');
+    isDarkTheme = !isDarkTheme;
+
+    if (isDarkTheme) {
+        // Apply dark theme
+        Sec.style.backgroundColor = '#1b1a55';
+        Min.style.backgroundColor = '#535c91';
+        Hr.style.backgroundColor = '#9290c3';
+        document.getElementById('time-show').style.color='white';
+        isDarkTheme=true;
+
+    } else {
+        // Apply light theme (or default theme)
+        Sec.style.backgroundColor = '';
+        Min.style.backgroundColor = '';
+        Hr.style.backgroundColor = '';
+        document.getElementById('time-show').style.color='';
+    }
+});
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,135 @@
+* {
+    padding: 0px;
+    margin: 0px;
+
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.main {
+    width: 100%;
+    height: 100%;
+    background-color:#070f2b;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+.second,
+.hour,
+.minute {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    box-shadow: 0 0 10px 10px rgba(0,0,0,0.2);
+}
+
+#second-hand,#min-hand,#hour-hand{
+    width:50px;
+    height: 50px;
+    border-radius: 50%;
+    position: absolute;
+    top:-25px;
+
+}
+#second-hand{
+    background-image: url('moon.jpg');
+    background-position: center;
+    background-size: 60px;
+    box-shadow:0px 5px 13px 0px rgba(255,255,255,0.2), inset 0 10px 5px 0px rgba(0,0,0,0.6);
+
+}
+#min-hand{
+    background-image: url('earth.webp');
+    background-position: center;
+    background-size: 63px;
+    box-shadow:0px 5px 13px 0px rgba(255,255,255,0.2), inset 0 10px 10px 0px rgba(0,0,0,0.3);
+
+}
+#hour-hand{
+    background-image: url('sun1.jpg');
+    background-position: center;
+    background-size: 110px;
+    box-shadow:0px 0px 11px 0px #ffc100, inset 0 0 1px 0px #ffc100;
+
+}
+
+
+.time-show {
+   width: 20vh;
+   height: 20vh;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    font-size:2.5em;
+    z-index: 4;
+    color: rgba(255,255,255,0.2);
+    font-family: Impact;
+    font-weight: lighter;
+}
+
+.second {
+    width: 80vh;
+    height: 80vh;
+    border-radius: 50%;
+    z-index: 1;
+    transition: transform 1s linear ;
+    border:2px solid rgba(255,255,255,0.2);
+}
+
+
+
+#handMin {
+    width: 55vh;
+    height: 55vh;
+    border:2px solid rgba(255,255,255,0.2);
+    border-radius: 50%;
+    z-index: 2;
+    transition: transform 1s linear ;
+}
+
+#handHr {
+    width: 30vh;
+    height: 30vh;
+    border:2px solid rgba(255,255,255,0.2);
+    border-radius: 50%;
+    z-index: 3;
+    transition: transform 1s linear ;
+} 
+
+.star{
+    position: absolute;
+    background-color: rgba(255,255,255);
+    box-shadow: 0 0 10px 0px rgba(255,255,255,0.5);
+    border-radius: 50%;
+
+}
+
+
+#changeTheme{
+    position: absolute;
+    right:10px;
+    top: 10px ;
+    color:rgba(255, 255, 255, 0.594);
+    border: 1px solid;
+    padding:3px;
+    border-radius: 3px;
+    background-color: transparent;
+    transition: all 1s;
+}
+#changeTheme:hover{
+    background-color:rgba(255, 255, 255, 0.594) ;
+    color:#070f2b;
+
+}
diff --git a/sun1.jpg b/sun1.jpg