feat: add announcement

AquaNet/src/App.svelte

@@ -8,6 +8,7 @@
   import type { AquaNetUser } from "./libs/generalTypes";
   import Settings from "./pages/User/Settings.svelte";
   import { pfp } from "./libs/ui"
+  import { ANNOUNCEMENT } from "./libs/config";
 
   console.log(`%c
 ┏━┓         ┳━┓━┓┏━
@@ -36,6 +37,11 @@
       <span>AquaNet</span>
     </a>
   {/if}
+  {#if ANNOUNCEMENT}
+    <div class="announcement">
+      <strong>Notice</strong>: {ANNOUNCEMENT}
+    </div>
+  {/if}
   <a href="/home">home</a>
   <div on:click={() => alert("Coming soon™")} on:keydown={e => e.key === "Enter" && alert("Coming soon™")}
        role="button" tabindex="0">maps</div>
@@ -78,6 +84,22 @@
       border-radius: vars.$border-radius
       object-fit: cover
 
+    .announcement
+      position: absolute
+      left: 50%
+      transform: translate(-50%, 0)
+      top: 0
+      width: 50%
+      height: 100%
+      display: flex
+      justify-content: center
+      align-content: center
+      z-index: -1
+      background: linear-gradient(90deg, #6f0f0f00 0%, vars.$c-shadow 50%, #6f0f0f00 100%)
+      font-size: 1.125em
+      text-decoration: none !important
+      color: inherit !important
+
     .pfp
       width: 2rem
       height: 2rem

AquaNet/src/libs/config.ts

@@ -16,6 +16,8 @@ export const FADE_OUT = { duration: 200 }
 export const FADE_IN = { delay: 400 }
 export const DEFAULT_PFP = '/assets/imgs/no_profile.png'
 
+export const ANNOUNCEMENT = '' // If set, will add an announcement to the top bar. Keep it short.
+
 // Documentation for Userbox mode can be found in `docs/aquabox-url-mode.md`
 // Please note that if this is set, it must be manually unset by users in Chuni Settings -> Update Userbox -> Switch to URL mode -> (empty value) -> Enter key
 export const USERBOX_DEFAULT_URL = ""