Added animation to move timer 2 up

diff --git a/auth/index.php b/auth/index.php
index 3bdccab3f4ddff029fd27cb3b257a77bcd817327..37a572bf8ae131d748a593bc40168de3299308fa 100644 (file)
--- a/auth/index.php
+++ b/auth/index.php
@@ -361,7 +361,7 @@ $checked = "";
 if ($data['showingSigil'][1] == "true") {
        $checked = " checked='checked' ";
 }
-echo "<input type='checkbox' id='sigilSE' name='sigilSE' value='true'<?php echo $checked; ?>>";
+echo "<input type='checkbox' id='sigilSE' name='sigilSE' value='true'$checked>";
 echo "<label for='sigilSW'>Bottom right (SE)</label><br>";
 
 echo "<input type='radio' id='allOff' value='off' name='allChange'>";

diff --git a/index.html b/index.html
index 56af729cc5308616658de6e08c238f63ccf021fc..29d0234470320cb6fd54f08f52b6cc0523950779 100644 (file)
--- a/index.html
+++ b/index.html
@@ -93,6 +93,9 @@ body {
 .banner.moved, .timer2.moved {
        left: 6vh;
 }
+.timer2.movedUp {
+       top: 6vh;
+}
 .timer3.moved {
        bottom: calc(50% - 15vh);
        right: calc(50% - 15vh);
@@ -228,7 +231,7 @@ h2.badge {
        border: 2px solid var(--dark);
        outline: 2px solid var(--feature-dark);
        opacity: 0;
-       transition: opacity 1.5s, left 1.5s;
+       transition: opacity 1.5s, left 1.5s, top 1.5s;
 }
 .timer3 {
        position: absolute;
@@ -364,16 +367,6 @@ function update() {
                                all.classList.remove("show");
                        }
 
-                       // Banner handling
-                       const banner = document.getElementsByClassName("banner")[0];
-                       if (data.showingBanner == "true") {
-                               if (!banner.classList.contains("show")) {
-                                       document.getElementById("bannerText").innerHTML = data.bannerText;
-                               }
-                               banner.classList.add("show");
-                       } else {
-                               banner.classList.remove("show");
-                       }
 
                        // Timer 1
                        const timer1 = document.getElementsByClassName("timer1")[0];
@@ -413,6 +406,20 @@ function update() {
                        var property = `linear-gradient(rgb(0,0,0,0) 0%, rgb(0,0,0,0) ${radius}%, var(--feature-light) ${radius}.1%, var(--feature-dark) 100%)`;
                        timer3.style.background = `${property}, var(--background)`;
 
+                       // Banner handling
+                       const banner = document.getElementsByClassName("banner")[0];
+                       if (data.showingBanner == "true") {
+                               if (!banner.classList.contains("show")) {
+                                       document.getElementById("bannerText").innerHTML = data.bannerText;
+                               }
+                               banner.classList.add("show");
+                               timer2.classList.remove("movedUp");
+
+                       } else {
+                               banner.classList.remove("show");
+                               timer2.classList.add("movedUp");
+                       }
+
                        // Side product information
                        const side = document.getElementsByClassName("side")[0];
                        if (data.showingMain == "true") {