Merge pull request #65 from hana-maria/feature/hannah

Time reactive ui #9
vansh-codes · Oct 9, 2024 · f14445d · f14445d
2 parents a3964b1 + 6f0dc53
commit f14445d
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 1 deletion.
diff --git a/assets/moon1.png b/assets/moon1.png
diff --git a/assets/moon2.png b/assets/moon2.png
diff --git a/index.html b/index.html
@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ChaosWeb - The Disorderly UI Experiment</title>
     <link rel="stylesheet" href="css/style.css">
-    <link rel="shortcut icon" href="../assets/logo/favicon.ico" type="image/x-icon">
+
+<link rel="shortcut icon" href="../assets/logo/favicon.ico" type="image/x-icon">
+
 </head>
 <body>
     <!--ALL SVGs taken from https://undraw.co/-->
@@ -46,5 +48,6 @@ <h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
     </div>
 
     <script src="js/script.js"></script>
+    <script src="js/night_time.js" defer></script>
 </body>
 </html>
diff --git a/js/night_time.js b/js/night_time.js
@@ -0,0 +1,13 @@
+function redirectBasedOnTime() {
+const currentHour = new Date().getHours(); 
+
+    if (currentHour >= 2 && currentHour < 5) { 
+        window.location.href = 'night_time.html'; 
+        } 
+    else {
+        window.location.href = 'index.html'; 
+        }
+    }
+    redirectBasedOnTime();
+    setTimeout(redirectBasedOnTime, 60000);
+
diff --git a/night_time.html b/night_time.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChaosWeb - The Disorderly UI Experiment</title>
+    <link rel="stylesheet" href="style1.css">
+
+</head>
+<body>
+    <div class="moon1">
+        <img src="assets/moon1.png" width="650px"></img>
+    </div>
+    <div class="text">Too late to reach us.</div>
+    <div class="text">Come back during daylight.</div>
+</body>
+<script src="js/night_time.js"></script>
+</html>
diff --git a/style1.css b/style1.css
@@ -0,0 +1,40 @@
+body {
+    padding: 0;
+    margin: 0;
+    background-color: darkslateblue;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.moon1 {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.moon1 img {
+    width: 650px;
+    transition: 0.3s ease;
+}
+
+.moon1 img:hover {
+    content: url(assets/moon2.png); /* This changes the image source on hover */
+}
+
+.text {
+    display: flex;
+    justify-content: center;
+    color: white;
+    font-size: 50px;
+    text-align: center;
+    animation: float 3s ease-in-out infinite; /* Apply floating animation */
+}
+
+/* Floating animation */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0); /* Start and end position */
+    }
+    50% {
+        transform: translateY(-10px); /* Move up */
+    }
+}