Fix time

Author: ian-ani

web/index.html

@@ -6,7 +6,6 @@
         <meta name="keywords" content="Forza Horizon, Forza Horizon 4, Forza Horizon 4 seasons, Forza Horizon 4 weekly season change, 
         FH4 seasons, Forza Horizon 4 calendar, FH4 season tracker">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="manifest" href="manifest.json">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Asap+Condensed">
         <link rel="shortcut icon" href="images/fh4_icon.png" type="image/x-icon">
         <link rel="stylesheet" href="styles.css">

web/manifest.json

@@ -1,48 +1,24 @@
 function getTime() {
-    let baseDate = new Date("2025-02-13"); // dia base
+    const BASEDATE = new Date(Date.UTC(2025, 1, 13, 14, 30)); // 2025-02-13 14:30 en UTC, los meses en UTC empiezan en cero!!!
     let now = new Date();
-    let timeDifference = Math.floor((now.getTime() - baseDate.getTime()) / 60 / 60 / 24 / 1000);
-    let eachWeek = Math.floor(timeDifference / 7);
-    let result = eachWeek % 4;
+    let utcTimestamp = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 
+    now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds(), now.getUTCMilliseconds()); // el UTC de la hora actual
+
+    let timeDifference = Math.floor((utcTimestamp - BASEDATE.getTime()) / 60 / 1000);
+    let eachWeek = Math.floor(timeDifference / 10080); // 7 dias en minutos
 
-    return {result, now};
+    let result = eachWeek % 4;
+    return result;
 }
 
 function setSeason() {
+    const SEASONS = {0:"autumn", 1:"winter", 2:"spring", 3:"summer"};
     let season = document.getElementById("season");
-    let {result, now} = getTime();
-    
-    let weekDay = now.getUTCDay();
-    let nowHour = now.getUTCHours();
-    let nowMinutes = now.getUTCMinutes();
-    let nowHourMinutes = nowHour * 60 + nowMinutes;
-
-    // 870 minutos son las 14:30
-    if ((nowHourMinutes >= 870) && (weekDay == 4)) {
-        result++;
-        result = result % 4;
-    }
-
-    switch (result) {
-        case 0:
-            season.textContent = "It's autumn!";
-            document.title = "It's autumn in FH4!"
-            break;
-        case 1:
-            season.textContent = "It's winter!";
-            document.title = "It's winter in FH4!"
-            break;
-        case 2:
-            season.textContent = "It's spring!";
-            document.title = "It's spring in FH4!"
-            break;
-        case 3:
-            season.textContent = "It's summer!";
-            document.title = "It's summer in FH4!"
-            break;
-    }
+    let result = getTime();
 
-    document.body.style.backgroundImage = `url(images/${result}.jpg)` 
+    season.textContent = `It's ${SEASONS[result]}`;
+    document.title = `It's ${SEASONS[result]} in FH4!`;
+    document.body.style.backgroundImage = `url(images/${result}.jpg)`;
 }
 
 setSeason();

web/scripts.js

@@ -5,6 +5,8 @@
 }
 
 body {
+    background: #E4704B;
+    background: linear-gradient(to right, #E4704B 0%, #CA347E 100%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -52,4 +54,20 @@ body {
     bottom: 0;
     max-width: 5%;
     max-height: 5%;
+}
+
+@media screen and (width <= 950px) and (orientation: portrait){
+    body {
+        background-position: bottom right -200px;
+    }
+    #content {
+        height: 40%;
+        width: 40%;
+    }
+    #season {
+        font-size: 7vw;
+    }
+    #when {
+        font-size: 4vw;
+    }
 }