Update copyright notice & footer (#2496)

## Description:

* Update copyright notice to "OpenFront and Contributors"

* remove the "how to play" on the footer, since that will be moved to
the death screen.

* Removed css and used tailwind instead for better mobile support


Describe the PR.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

resources/lang/en.json

@@ -21,7 +21,7 @@
   },
   "main": {
     "title": "OpenFront (ALPHA)",
-    "join_discord": "Join the Discord!",
+    "join_discord": "Discord",
     "login_discord": "Login with Discord",
     "checking_login": "Checking login...",
     "logged_in": "Logged in!",
@@ -30,8 +30,6 @@
     "join_lobby": "Join Lobby",
     "single_player": "Single Player",
     "instructions": "Instructions",
-    "how_to_play": "How to Play",
-    "advertise": "Advertise",
     "wiki": "Wiki",
     "privacy_policy": "Privacy Policy",
     "terms_of_service": "Terms of Service",

src/client/GameStartingModal.ts

@@ -93,7 +93,7 @@ export class GameStartingModal extends LitElement {
     }
 
     .copyright {
-      font-size: 32px;
+      font-size: 20px;
       margin-top: 20px;
       margin-bottom: 10px;
       opacity: 1;
@@ -118,7 +118,7 @@ export class GameStartingModal extends LitElement {
   render() {
     return html`
       <div class="modal ${this.isVisible ? "visible" : ""}">
-        <div class="copyright">© OpenFront</div>
+        <div class="copyright">© OpenFront and Contributors</div>
         <a
           href="https://github.com/openfrontio/OpenFrontIO/blob/main/CREDITS.md"
           target="_blank"

src/client/index.html

@@ -317,21 +317,19 @@
     </div>
 
     <!-- Footer section -->
-    <footer class="l-footer">
-      <div class="l-footer__content">
-        <div class="l-footer__col t-text-white">
-          <a
-            href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
-            data-i18n="main.how_to_play"
-            class="t-link"
-            target="_blank"
-          >
-            How to Play
-          </a>
+    <footer
+      class="flex justify-center px-3 py-3 md:px-6 md:py-3 bg-[var(--boxBackgroundColor)] backdrop-blur-sm"
+    >
+      <div
+        class="flex flex-col md:flex-row flex-nowrap justify-between items-center gap-4 md:gap-0 w-full max-w-[860px] flex-1"
+      >
+        <div
+          class="flex flex-col sm:flex-row gap-4 sm:gap-5 text-white/70 justify-center md:justify-start flex-shrink-0"
+        >
           <a
             href="https://openfront.wiki/Main_Page"
             data-i18n="main.wiki"
-            class="t-link"
+            class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out whitespace-nowrap"
             target="_blank"
           >
             Wiki
@@ -339,25 +337,25 @@
           <a
             target="_blank"
             href="https://www.reddit.com/r/Openfront/"
-            class="t-link"
+            class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out whitespace-nowrap"
           >
             <span data-i18n="main.reddit"> Reddit </span>
           </a>
           <a
             target="_blank"
             href="https://discord.gg/jRpxXvG42t"
-            class="t-link"
+            class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out whitespace-nowrap"
           >
-            <span data-i18n="main.join_discord"> Join the Discord! </span>
+            <span data-i18n="main.join_discord"> Discord </span>
           </a>
         </div>
-        <div class="l-footer__col t-text-white space-x-4">
+        <div class="flex justify-center text-white/70 flex-shrink-0">
           <a
             href="https://github.com/openfrontio/OpenFrontIO"
-            class="t-link inline-flex items-center space-x-2"
+            class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out inline-flex items-center gap-2 whitespace-nowrap"
             target="_blank"
           >
-            ©2025 OpenFront™
+            © OpenFront™ and Contributors
             <img
               src="../../resources/icons/github-mark-white.svg"
               alt="GitHub"
@@ -366,10 +364,14 @@
               class="ml-2"
             />
           </a>
+        </div>
+        <div
+          class="flex flex-col sm:flex-row gap-4 sm:gap-4 text-white/70 justify-center md:justify-end flex-shrink-0"
+        >
           <a
             href="/privacy-policy.html"
             data-i18n="main.privacy_policy"
-            class="t-link"
+            class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out whitespace-nowrap"
             target="_blank"
           >
             Privacy Policy
@@ -377,7 +379,7 @@
           <a
             href="/terms-of-service.html"
             data-i18n="main.terms_of_service"
-            class="t-link"
+            class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out whitespace-nowrap"
             target="_blank"
           >
             Terms of Service

src/client/styles.css

@@ -5,7 +5,6 @@
 @import url("./styles/core/variables.css");
 @import url("./styles/core/typography.css");
 @import url("./styles/layout/header.css");
-@import url("./styles/layout/footer.css");
 @import url("./styles/layout/container.css");
 @import url("./styles/components/button.css");
 @import url("./styles/components/modal.css");

src/client/styles/layout/footer.css

@@ -1,24 +0,0 @@
-.l-footer {
-  background: var(--boxBackgroundColor);
-  backdrop-filter: blur(var(--blur-md));
-  display: flex;
-  justify-content: center;
-  padding: 12px;
-
-  @media (min-width: 800px) {
-    padding: 12px 24px;
-  }
-}
-
-.l-footer__content {
-  max-width: 860px;
-  flex-wrap: wrap;
-  display: flex;
-  flex: 1;
-  justify-content: space-between;
-}
-
-.l-footer__col {
-  display: flex;
-  gap: 20px;
-}