added changing background

4 years ago · 19cbb58aa2
3 changed files with 29 additions and 10 deletions
--- a/index.html
+++ b/index.html
@ -8,6 +8,7 @@
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
+<div id="background"></div>
 <p id="countdown"></p>
 </body>
-</html>
+</html>
--- a/script.ts
+++ b/script.ts
@ -53,13 +53,22 @@ class CountdownBuilder {
    }
 }

-function setStyleOptions(weeks: number) {
-    if (weeks < 1) {
-        document.querySelector("body").style.backgroundImage = "url('bg.jpg')";
+function setStyleOptions(totaldays: number) {
+    const backgroundElement = document.getElementById("background");
+    if (totaldays < 35) {
+        backgroundElement.style.backgroundImage = "url('bg.jpg')";
        let spans = document.querySelectorAll("span");
        for (let i = 0; i < spans.length; i++) {
            spans[i].style.color = "#dddddd";
        }
+        
+        backgroundElement.style.filter = "blur(0px) brightness(100%)";
+    }
+    if (totaldays < 35 && totaldays > 7 ) {
+        const percentage = (totaldays-7)/(35-7);
+        const blur = percentage * 10; //base is 10px
+        const brightness = 100 - Math.floor(percentage * 100);
+        backgroundElement.style.filter = "blur(" + blur + "px) brightness(" + brightness + "%)";
    }
 }

@ -93,7 +102,8 @@ function setNewTime() {
    }

    document.getElementById("countdown").innerHTML = new CountdownBuilder(timeRemaining).build();
-    setStyleOptions(timeRemaining.weeks);
+    const totaldays = timeRemaining.weeks*7 + timeRemaining.days;
+    setStyleOptions(totaldays);

 }

@ -124,4 +134,4 @@ function isMobile(): boolean {
        return mq.matches;
    }
    return false;
-}
+}
--- a/style.css
+++ b/style.css
@ -8,6 +8,14 @@ body {
    justify-content: center;
    background-color: black;
    font-family: 'HelveticaNeue Heavy', 'HelveticaNeue', 'HelveticaNeue Regular', monospace;
+}
+#background {
+    margin: auto;
+    height: 100vh;
+    display: flex;
+    width: 100vw;
+    position: absolute;
+    z-index: -1;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
@ -16,12 +24,12 @@ body {
 #countdown {
    text-align: center;
    font-size: 90px;
-    margin-top: 0px;
+    margin-top: 0;
    color: white;
-    text-shadow: 0px 0px 15px #000000;
-    margin-bottom: 0px;
+    text-shadow: 0 0 15px #000000;
+    margin-bottom: 0;
 }
 #countdown span {
    color: #878787;
    font-size: 70px;
-}
+}