refactor: use footer instead of a div with an id

frontend/src/styles/footer.scss

@@ -1,4 +1,4 @@
-#bottom {
+footer {
   position: relative;
   text-align: center;
   line-height: 1rem;
@@ -101,7 +101,7 @@
   }
 }
 
-#bottom.focus {
+footer.focus {
   .keyTips {
     opacity: 0 !important;
   }

frontend/src/styles/z_media-queries.scss

@@ -154,7 +154,7 @@
   #quoteRatePopup {
     width: 90vw !important;
   }
-  #bottom {
+  footer {
     .leftright {
       .left {
         gap: 0.25rem 1rem;
@@ -899,7 +899,7 @@
       font-size: 1rem;
     }
   }
-  #bottom {
+  footer {
     .leftright {
       .left {
         gap: 0.25rem 1rem;
@@ -984,7 +984,7 @@
     font-size: 0.75rem;
   }
 
-  #bottom {
+  footer {
     font-size: 0.65rem;
     .leftright {
       grid-template-columns: 1fr 1fr;

frontend/src/ts/commandline/index.ts

@@ -787,7 +787,7 @@ $(".pageTest").on("click", "#testModesNotice .textButton", (event) => {
   }
 });
 
-$("#bottom").on("click", ".leftright .right .current-theme", (e) => {
+$("footer").on("click", ".leftright .right .current-theme", (e) => {
   if (e.shiftKey) {
     if (!Config.customTheme) {
       if (Auth?.currentUser) {

frontend/src/ts/config.ts

@@ -1038,9 +1038,9 @@ export function setKeyTips(keyTips: boolean, nosave?: boolean): boolean {
 
   config.showKeyTips = keyTips;
   if (config.showKeyTips) {
-    $("#bottom .keyTips").removeClass("hidden");
+    $("footer .keyTips").removeClass("hidden");
   } else {
-    $("#bottom .keyTips").addClass("hidden");
+    $("footer .keyTips").addClass("hidden");
   }
   saveToLocalStorage("showKeyTips", nosave);
   ConfigEvent.dispatch("showKeyTips", config.showKeyTips);

frontend/src/ts/popups/version-popup.ts

@@ -61,11 +61,11 @@ function hide(): void {
     });
 }
 
-$("#bottom").on("click", "#newVersionIndicator", () => {
+$("footer").on("click", "#newVersionIndicator", () => {
   $("#newVersionIndicator").addClass("hidden");
 });
 
-$("#bottom").on("click", ".version", (e) => {
+$("footer").on("click", ".version", (e) => {
   if (e.shiftKey) return;
   show();
 });

frontend/src/ts/ready.ts

@@ -15,15 +15,15 @@ import Konami from "konami";
 
 if (Misc.isLocalhost()) {
   $("head title").text("localhost");
-  $("#bottom .version .text").text("localhost");
-  $("#bottom #versionGroup").removeClass("hidden");
+  $("footer .version .text").text("localhost");
+  $("footer #versionGroup").removeClass("hidden");
   $("body").prepend(
     `<a class='button configureAPI' href='http://localhost:5005/configure/' target='_blank' aria-label="Configure API" data-balloon-pos="right"><i class="fas fa-fw fa-server"></i></a>`
   );
 } else {
   Misc.getLatestReleaseFromGitHub().then((v) => {
-    $("#bottom .version .text").text(v);
-    $("#bottom #versionGroup").removeClass("hidden");
+    $("footer .version .text").text(v);
+    $("footer #versionGroup").removeClass("hidden");
     NewVersionNotification.show(v);
   });
 }

frontend/src/ts/test/focus.ts

@@ -12,7 +12,7 @@ export function set(foc: boolean, withCursor = false): void {
     state = true;
     Caret.stopAnimation();
     $("header").addClass("focus");
-    $("#bottom").addClass("focus");
+    $("footer").addClass("focus");
     if (!withCursor) $("body").css("cursor", "none");
     $("#middle").addClass("focus");
     $("#testConfig").addClass("focus");
@@ -31,7 +31,7 @@ export function set(foc: boolean, withCursor = false): void {
     state = false;
     Caret.startAnimation();
     $("header").removeClass("focus");
-    $("#bottom").removeClass("focus");
+    $("footer").removeClass("focus");
     $("body").css("cursor", "default");
     $("#middle").removeClass("focus");
     $("#testConfig").removeClass("focus");

frontend/src/ts/test/test-ui.ts

@@ -411,7 +411,7 @@ export async function screenshot(): Promise<void> {
     $(".pageTest .buttons").removeClass("hidden");
     $("noscript").removeClass("hidden");
     $("#nocss").removeClass("hidden");
-    $("header, #bottom").removeClass("invisible");
+    $("header, footer").removeClass("invisible");
     $("#result").removeClass("noBalloons");
     if (revertCookie) $("#cookiePopupWrapper").removeClass("hidden");
     if (revealReplay) $("#resultReplay").removeClass("hidden");
@@ -450,7 +450,7 @@ export async function screenshot(): Promise<void> {
   $("#ad-result-small-wrapper").addClass("hidden");
   $("#testConfig").addClass("hidden");
   $(".page.pageTest").prepend("<div class='screenshotSpacer'></div>");
-  $("header, #bottom").addClass("invisible");
+  $("header, footer").addClass("invisible");
   $("#result").addClass("noBalloons");
   if (revertCookie) $("#cookiePopupWrapper").addClass("hidden");
 

frontend/src/ts/ui.ts

@@ -25,15 +25,15 @@ function updateKeytips(): void {
   }
 
   if (Config.quickRestart === "esc") {
-    $("#bottom .keyTips").html(`
+    $("footer .keyTips").html(`
     <key>esc</key> - restart test<br>
     <key>tab</key> or <key>${modifierKey}</key>+<key>shift</key>+<key>p</key> - command line`);
   } else if (Config.quickRestart === "tab") {
-    $("#bottom .keyTips").html(`
+    $("footer .keyTips").html(`
     <key>tab</key> - restart test<br>
       <key>esc</key> or <key>${modifierKey}</key>+<key>shift</key>+<key>p</key> - command line`);
   } else {
-    $("#bottom .keyTips").html(`
+    $("footer .keyTips").html(`
     <key>tab</key> + <key>enter</key> - restart test<br>
     <key>esc</key> or <key>${modifierKey}</key>+<key>shift</key>+<key>p</key> - command line`);
   }

frontend/static/funbox/crt.css

@@ -44,7 +44,7 @@ body.crtmode #scanline {
 }
 body.crtmode header,
 body.crtmode #middle,
-body.crtmode #bottom,
+body.crtmode footer,
 body.crtmode #result,
 body.crtmode #popups,
 body.crtmode #notificationCenter,

frontend/static/html/footer.html

@@ -1,4 +1,4 @@
-<div id="bottom">
+<footer>
   <div id="commandLineMobileButton">
     <i class="fas fa-terminal"></i>
   </div>
@@ -90,4 +90,4 @@
       </div> -->
     </div>
   </div>
-</div>
+</footer>

frontend/static/themes/chaos_theory.css

@@ -33,7 +33,7 @@ header .logo .icon {
   direction: rtl;
 }
 
-#bottom .leftright .right .current-theme .text {
+footer .leftright .right .current-theme .text {
   /* font-family: "Comic Sans MS", "Comic Sans", cursive; */
 }
 
@@ -94,7 +94,7 @@ header.focus .logo:after {
   direction: ltr;
 }
 
-#bottom .leftright .right .current-theme:hover .fas.fa-fw.fa-palette {
+footer .leftright .right .current-theme:hover .fas.fa-fw.fa-palette {
   -webkit-transform: rotateY(180deg);
   transition: 0.5s;
 }

frontend/static/themes/purpurite.css

@@ -15,10 +15,10 @@
   color: #99ffdd;
 }
 
-#bottom .leftright div {
+footer .leftright div {
   color: #99ffdd;
 }
 
-#bottom .leftright i {
+footer .leftright i {
   color: #99ffdd;
 }