feat: footer

src/app/app.css

@@ -0,0 +1,4 @@
+main {
+    margin-top: 120px; /* Space for nav and ticker */
+}
+

src/app/app.html

@@ -1,4 +1,7 @@
+<div class="fixed top-0 left-0 w-full h-full z-30">
     <app-nav></app-nav>
+    <app-ticker></app-ticker>
+</div>
 <app-disclaimer></app-disclaimer>
 <main>
     <router-outlet></router-outlet>

src/app/app.ts

@@ -8,12 +8,13 @@ import { RouterOutlet } from "@angular/router";
 import { Disclaimer } from "./disclaimer/disclaimer";
 import { Footer } from "./footer/footer";
 import { Nav } from "./nav/nav";
+import { Ticker } from "./ticker/ticker";
 
 /**
  * The root component for the application.
  */
 @Component({
-  imports:     [ RouterOutlet, Footer, Nav, Disclaimer ],
+  imports:     [ RouterOutlet, Footer, Nav, Disclaimer, Ticker ],
   selector:    "app-root",
   styleUrl:    "./app.css",
   templateUrl: "./app.html",

src/app/disclaimer/disclaimer.html

@@ -3,18 +3,18 @@
     <div id="modal" class="p-5">
         <aside>
             <h1 class="text-2xl font-bold">Disclaimer</h1>
-            <p>This website incorporates AI-generated art. Before you proceed, we wanted to make very clear:</p>
+            <p>This website incorporates AI-generated art. Before you proceed, we wanted to make our position clear:</p>
             <ul class="list-disc list-inside text-left">
                 <li>Our company do not support the use of AI to replace human artists.</li>
-                <li>Our company are aware of the ethical conerns around generative AI and how training data are sourced.</li>
+                <li>Our company are aware of the ethical concerns around generative AI and how training data are sourced.</li>
                 <li>We have a long history of supporting and promoting human artists, and have no intention of changing that.</li>
                 <li>However, because we currently operate at a significant loss, our budget is very limited.</li>
-                <li>When funds allow, we absolutely intend to replace all art on this page with human works.</li>
+                <li>When funds allow, we absolutely intend to replace all art on this page with human-created works.</li>
             </ul>
             <p>If you are an artist and would like to donate art, or if you have cash and would like to donate to our cause, check our <a href="https://donate.nhcarrigan.com" target="_blank">donation page</a>.</p>
-            <p>Thank you for understanding. Please confirm you understand our stance, and that you will not start flaming us for just trying to survive.</p>
+            <p>Thank you for understanding our position. We appreciate your support as we work toward our goal of featuring exclusively human-created art.</p>
         </aside>
-        <button (click)="closeModal()" class="mt-5 border-r-4 border-b-4 border-l-4 border-t-2 border-accent rounded-md p-2 cursor-pointer">I understand, and I will not attack you for trying to survive.</button>
+        <button (click)="closeModal()" class="mt-5 border-r-4 border-b-4 border-l-4 border-t-2 border-accent rounded-md p-2 cursor-pointer">I understand and wish to continue.</button>
     </div>
 </div>
 <div id="modal-overlay" class="fixed top-0 left-0 w-full h-full bg-black/75 z-40"></div>

src/app/footer/footer.css

@@ -0,0 +1,10 @@
+footer {
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
+}
+
+@media screen and (max-width: 300px) {
+    .hide {
+        display: none;
+    }
+}

src/app/footer/footer.html

@@ -1 +1,11 @@
-<p>footer works!</p>
+<footer class="w-full fixed bottom-0 z-30 p-2 flex justify-around items-center">
+    <div>
+        <a href="https://nhcarrigan.com" target="_blank"><p>© 2025 NHCarrigan</p></a>
+    </div>
+    <div class="hide">
+        <a href="https://chat.nhcarrigan.com" target="_blank"><p>Discord</p></a>
+    </div>
+    <div class="hide">
+        <a href="https://contact.nhcarrigan.com" target="_blank"><p>Contact</p></a>
+    </div>
+</footer>

src/app/nav/nav.css

@@ -0,0 +1,87 @@
+nav {
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
+    position: relative;
+}
+
+.nav-menu {
+    display: flex;
+    gap: 1rem;
+    list-style: none;
+}
+
+.hamburger-btn {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 5px;
+    z-index: 31;
+}
+
+.hamburger-btn span {
+    width: 25px;
+    height: 3px;
+    background-color: var(--color-accent);
+    transition: all 0.3s ease;
+}
+
+.hamburger-btn:hover span {
+    background-color: var(--color-primary);
+}
+
+/* Mobile styles */
+@media (max-width: 500px) {
+    .hamburger-btn {
+        display: flex;
+    }
+
+    .nav-menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        background-color: var(--color-secondary);
+        padding: 1rem;
+        gap: 0;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+        opacity: 0;
+    }
+
+    .nav-menu.menu-open {
+        max-height: 500px;
+        opacity: 1;
+    }
+
+    .nav-menu a {
+        display: block;
+        padding: 0.75rem 0;
+        border-bottom: 1px solid rgba(224, 224, 224, 0.1);
+    }
+
+    .nav-menu a:last-child {
+        border-bottom: none;
+    }
+
+    /* Hamburger animation */
+    nav.menu-open .hamburger-btn {
+        gap: 0;
+    }
+
+    nav.menu-open .hamburger-btn span:nth-child(1) {
+        transform: rotate(45deg) translateY(4px);
+    }
+
+    nav.menu-open .hamburger-btn span:nth-child(2) {
+        opacity: 0;
+    }
+
+    nav.menu-open .hamburger-btn span:nth-child(3) {
+        transform: rotate(-45deg) translateY(-4px);
+    }
+}

src/app/nav/nav.html

@@ -1 +1,22 @@
-<p>nav works!</p>
+<nav class="w-full z-30 p-2 flex justify-between items-center" [class.menu-open]="isMenuOpen">
+    <div>
+        <a routerLink="/"><p>NHCarrigan</p></a>
+    </div>
+    <button 
+        class="hamburger-btn" 
+        (click)="toggleMenu()"
+        aria-label="Toggle menu"
+        aria-expanded="{{isMenuOpen}}">
+        <span></span>
+        <span></span>
+        <span></span>
+    </button>
+    <ul class="nav-menu" [class.menu-open]="isMenuOpen">
+        <a routerLink="/about" (click)="closeMenu()"><li>About</li></a>
+        <a routerLink="/handbook" (click)="closeMenu()"><li>Handbook</li></a>
+        <a routerLink="/bulletin" (click)="closeMenu()"><li>Bulletin</li></a>
+        <a routerLink="/faq" (click)="closeMenu()"><li>FAQ</li></a>
+        <a routerLink="/reviews" (click)="closeMenu()"><li>Reviews</li></a>
+        <a routerLink="/staff" (click)="closeMenu()"><li>Staff</li></a>
+    </ul>
+</nav>

src/app/nav/nav.ts

@@ -4,16 +4,31 @@
  * @author Naomi Carrigan
  */
 import { Component } from "@angular/core";
+import { RouterLink } from "@angular/router";
 
 /**
  * Renders the navigation bar.
  */
 @Component({
-  imports:     [],
+  imports:     [ RouterLink ],
   selector:    "app-nav",
   styleUrl:    "./nav.css",
   templateUrl: "./nav.html",
 })
 export class Nav {
+  public isMenuOpen = false;
 
+  /**
+   * Toggles the mobile menu open/closed state.
+   */
+  public toggleMenu(): void {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  /**
+   * Closes the mobile menu.
+   */
+  public closeMenu(): void {
+    this.isMenuOpen = false;
+  }
 }

src/app/ticker/ticker.css

@@ -0,0 +1,17 @@
+.ticker-bg {
+    background-color: var(--color-ticker);
+    color: var(--color-primary);
+}
+
+.ticker-scroll {
+    animation: scroll-horizontal 60s linear infinite;
+}
+
+@keyframes scroll-horizontal {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}

src/app/ticker/ticker.html

@@ -1 +1,15 @@
-<p>ticker works!</p>
+<div class="w-full overflow-hidden whitespace-nowrap z-30 py-2 ticker-bg">
+    <div class="inline-block whitespace-nowrap ticker-scroll">
+        @for (phrase of phrases; track phrase) {
+            <span class="inline-block m-0 p-0 whitespace-nowrap">{{ phrase }}</span>
+            <span class="inline-block mx-4 opacity-70"> • </span>
+        }
+        <!-- Duplicate content for seamless loop -->
+        <span aria-hidden="true">
+            @for (phrase of phrases; track phrase) {
+                <span class="inline-block m-0 p-0 whitespace-nowrap">{{ phrase }}</span>
+                <span class="inline-block mx-4 opacity-70"> • </span>
+            }
+        </span>
+    </div>
+</div>

src/app/ticker/ticker.ts

@@ -15,5 +15,10 @@ import { Component } from "@angular/core";
   templateUrl: "./ticker.html",
 })
 export class Ticker {
-
+  protected readonly phrases = [
+    "[UPDATE]: Office will be closed this Tuesday for the Lunar Eclipse. (Religious Holiday).",
+    "[MEMO]: Please stop asking Keiko for fashion tips. She is working.",
+    "[TECH]: Patch 4.0.1 deployed. Fixed a bug where the AI started whispering.",
+    "[NOTICE]: We are aware of the \"howling\" coming from the breakroom. Amari is watching a sad movie. It is under control.",
+  ];
 }