Add new routes and improve theme and header responsiveness

Added routes for 'community', 'nicknames', and 'nickgenerator'. Enhanced theme switch positioning and responsive design for smaller screens. Moved header login button to a more consistent position and upgraded Angular Material to version 19.2.19 for better compatibility.

frontend/src/app/pages/reference/nicknames/nicknames.component.html

@@ -0,0 +1,82 @@
+<ng-container>
+  <app-header [current_page]="'nicknames'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>How To Get A Nickname</h1>
+      <h2>Personalize your writing and nickname in-game by choosing some of the millions of custom colors that we have
+        to offer!</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Creating a Nickname</h2>
+            <p>Donors that have the Duke or Archduke rank have the ability to create custom nicknames for themselves. A
+              nickname should be similar enough to the player’s username for that player to be identifiable, and it
+              <span style="font-family: 'opensans-bold', sans-serif;">must not exceed 16 characters in length</span>. In
+              general, a nickname should include the main part of a player’s actual username to avoid confusion.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Make it Your Own</h2>
+            <p>Altitude now supports the full range of RGB colors, which includes more than 16 million different hues.
+              In addition, the previous basic color codes still exist and are able to be used in combination with the
+              RGB colors. You can still use <span style="font-family: 'opensans-bold', sans-serif;">/colors</span> to
+              see the basic color codes that are available for use. You can also make use of <span
+                style="font-family: 'opensans-bold', sans-serif;">/colorsextra</span> which shows many different RGB
+              color options. These colors will be in the form of <span
+                style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span>; write down the colors that you like so
+              that you can easily use them later.</p>
+            <img ngSrc="/img/random/colors.png" alt="RGB colors" style="width: 100%; padding:0;" height="130"
+                 width="480">
+            <p>Output of /colorsextra</p>
+            <p>Furthermore, you can also use the <a [routerLink]="['/nickgenerator']">nickname generation tool</a> to
+              make and preview potential nicknames - as well as copying the commands to use in-game.</p>
+            <p>Players are encouraged to play around and personalize their nicknames, as long as they follow the rules
+              and are legible! There are endless possibilities beyond simple gradients as well; players can create any
+              combination of standard colors and gradients that they choose.</p>
+            <p>Even if you aren’t a Duke or Archduke, you can try out colors like this on signs in-game.</p>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Request Your Nickname</h2>
+            <p>Players can only submit a new nickname request using <span
+              style="font-family: 'opensans-bold', sans-serif;">/nick request &lt;name&gt;</span> once per day. When a
+              nickname is requested, it will notify staff for near-instant approval. Creating custom nicknames using RGB
+              can be difficult, so we have implemented <span style="font-family: 'opensans-bold', sans-serif;">/nick try &lt;name&gt;</span>
+              so that you can experiment with your nicknames as many times as you want. It is highly encouraged to use
+              this command before submitting a formal request to staff. You can select an RGB color by putting the <span
+                style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span> code into curly braces before your
+              text.</p>
+            <p>We also support gradients in nicknames. You can specify the start and finish color and your nickname will
+              automatically find a gradient that goes between the two endpoints. <span
+                style="font-family: 'opensans-bold', sans-serif;">The symbol &gt; is used to start a gradient, and the symbol &lt; is used to close a gradient.</span>
+              You can have as many gradients as you want in your nickname, as long as it is readable.</p>
+            <p><span style="font-family: 'opensans-bold', sans-serif;">/nick try &lbrace;#003380&rbrace;Player</span>
+              would result in a blue name that read as “Player”.</p>
+            <p><span style="font-family: 'opensans-bold', sans-serif;">/nick try &lbrace;#003380>&rbrace;Player&lbrace;#0000FF<&rbrace;</span>
+              would result in the nickname reading as “Player” with a blue gradient fading across the letters in the
+              name.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Useful Commands</h2>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick help</span> - Shows a list of all useful
+                nickname commands and how to use them.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick try name</span> - Allows players to see
+                how a nickname would look as many times as you like.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick request name</span> - Allows players to
+                submit a new nickname to staff for approval. This function can only be used once per day.
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/pages/reference/nicknames/nicknames.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NicknamesComponent } from './nicknames.component';
+
+describe('NicknamesComponent', () => {
+  let component: NicknamesComponent;
+  let fixture: ComponentFixture<NicknamesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NicknamesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NicknamesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/pages/reference/nicknames/nicknames.component.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "@header/header.component";
+import {NgOptimizedImage} from '@angular/common';
+import {RouterLink} from '@angular/router';
+
+@Component({
+  selector: 'app-nicknames',
+  imports: [
+    HeaderComponent,
+    NgOptimizedImage,
+    RouterLink
+  ],
+  templateUrl: './nicknames.component.html',
+  styleUrl: './nicknames.component.scss'
+})
+export class NicknamesComponent {
+
+}