Rework folder structure in frontend

Pages are now grouped per group they appear in on in the header (where possible)
Utilities used by multiple pages in the project are grouped in folders such as services/pipes/etc

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

@@ -0,0 +1,90 @@
+<ng-container>
+  <app-header [current_page]="'bans'" height="200px" background_image="/public/img/backgrounds/staff.png"
+              [overlay_gradient]="0.5">>
+    <div class="title" header-content>
+      <h1>Minecraft Punishments</h1>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="columnSection">
+          <div class="historyButtonContainer">
+            <div [id]="getCurrentButtonId('all')" class="button-outer" (click)="changeHistoryPunishment('all')">
+              <span class="button-inner"
+                    [ngClass]="active">All</span>
+            </div>
+            <div [id]="getCurrentButtonId('ban')" class="button-outer" (click)="changeHistoryPunishment('ban')">
+              <span class="button-inner"
+                    [ngClass]="active">Bans</span>
+            </div>
+            <div [id]="getCurrentButtonId('mute')" class="button-outer" (click)="changeHistoryPunishment('mute')">
+              <span class="button-inner"
+                    [ngClass]="active">Mutes</span>
+            </div>
+            <div [id]="getCurrentButtonId('warn')" class="button-outer" (click)="changeHistoryPunishment('warn')">
+              <span class="button-inner"
+                    [ngClass]="active">Warnings</span>
+            </div>
+            <div [id]="getCurrentUserTypeButtonId('player')" class="button-outer" (click)="changeUserType('player')"
+                 style="margin-left: 120px;">
+              <span class="button-inner"
+                    [ngClass]="active">Player</span>
+            </div>
+            <div [id]="getCurrentUserTypeButtonId('staff')" class="button-outer" (click)="changeUserType('staff')">
+              <span class="button-inner"
+                    [ngClass]="active">Staff</span>
+            </div>
+          </div>
+          <div class="historySearchContainer">
+            <input class="historySearch"
+                   type="search"
+                   placeholder="Search.."
+                   [(ngModel)]="searchTerm"
+                   (input)="filterNames()"
+                   (keyup.enter)="search()"
+            >
+            <div class="dropdown-results" *ngIf="filteredNames.length > 0 && searchTerm">
+              <div
+                class="dropdown-item"
+                *ngFor="let name of filteredNames"
+                (mousedown)="selectName(name)">
+                {{ name }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="historyTable">
+          <app-history [userType]="userType" [punishmentType]="punishmentType"
+                       [page]="page" [searchTerm]="finalSearchTerm" (pageChange)="updatePageSize($event)"
+                       (selectItem)="setSearch($event)">
+          </app-history>
+        </div>
+        <div class="changePageButtons">
+          <button [ngClass]="{'active': buttonActive(0), 'disabled': !buttonActive(0)}"
+                  [disabled]="!buttonActive(0)"
+                  (click)="setPage(0)" class="historyPageButton">
+            First page
+          </button>
+          <button [ngClass]="{'active': buttonActive(0), 'disabled': !buttonActive(0)}"
+                  [disabled]="!buttonActive(0)"
+                  (click)="previousPage()" class="historyPageButton">
+            Previous page
+          </button>
+          <span class="pageNumber">{{ this.page }} / {{ getMaxPage() }}</span>
+          <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
+                  [disabled]="!buttonActive(getMaxPage())"
+                  (click)="nextPage()" class="historyPageButton">
+            Next page
+          </button>
+          <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
+                  [disabled]="!buttonActive(getMaxPage())"
+                  (click)="setPage(getMaxPage())" class="historyPageButton">
+            Last page
+          </button>
+        </div>
+      </div>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/pages/reference/bans/bans.component.scss

@@ -0,0 +1,171 @@
+main .container {
+  padding: 0;
+}
+
+.container {
+  max-width: 1300px;
+}
+
+.columnSection {
+  padding: 20px 0 20px 0;
+  max-width: 1300px;
+}
+
+.historyButtonContainer {
+  width: 80%;
+  box-sizing: border-box;
+}
+
+.historySearchContainer {
+  width: 20%;
+  box-sizing: border-box;
+  text-align: right;
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.button-outer {
+  margin-right: 15px;
+  background: var(--history-link-color);
+}
+
+.button-outer.active {
+  color: var(--navlink-color);
+}
+
+#currentButton {
+  text-decoration: none;
+  color: var(--white);
+  background: var(--link-color);
+  border-radius: 5px;
+}
+
+input.historySearch {
+  font-family: 'open-sans', sans-serif;
+  width: 260px;
+  border: 1px solid #DEDEDE;
+  padding: 9px 4px 9px 40px;
+  background: #DEDEDE url(/public/img/random/search.svg) no-repeat 10px;
+  background-size: 18px 18px;
+  border-radius: 5px;
+}
+
+.searchButton {
+  vertical-align: -15px;
+}
+
+.historyTable {
+  font-family: 'open-sans', sans-serif;
+  margin-bottom: 20px;
+  width: 100%;
+  text-align: center;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  border-radius: 5px;
+  z-index: 1;
+}
+
+.dropdown-results {
+  font-family: 'open-sans', sans-serif;
+  position: absolute;
+  top: 35px;
+  left: 0;
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  background-color: #DEDEDE;
+  border: 1px solid #ddd;
+  border-top: none;
+  z-index: 1050;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.dropdown-item {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.dropdown-item:hover {
+  background-color: #f5f5f5;
+}
+
+.changePageButtons {
+  margin: 0 auto;
+  padding: 10px 0 30px 0;
+}
+
+.historyPageButton {
+  align-items: center;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: .25rem;
+  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
+  box-sizing: border-box;
+  background-color: var(--history-page-button-background);
+  color: var(--font-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: 'opensans', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  justify-content: center;
+  line-height: 1.25;
+  margin: 0 5px 0 5px;
+  min-height: 3rem;
+  padding: calc(.875rem - 1px) calc(1.5rem - 1px);
+  position: relative;
+  text-decoration: none;
+  transition: all 250ms;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: baseline;
+  width: auto;
+}
+
+.historyPageButton.active:hover,
+.historyPageButton.active:focus {
+  border-color: rgba(0, 0, 0, 0.15);
+  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
+  color: var(--font-color-hover);
+}
+
+.historyPageButton.active:hover {
+  transform: translateY(-1px);
+}
+
+.historyPageButton.active:active {
+  border-color: rgba(0, 0, 0, 0.15);
+  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
+  color: var(--font-color-hover);
+  transform: translateY(0);
+}
+
+.historyPageButton.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--color-quaternary);
+  color: var(--font-color);
+  box-shadow: none;
+  pointer-events: none;
+}
+
+/* Prevent hover effects on disabled buttons */
+.historyPageButton.disabled:hover,
+.historyPageButton.disabled:focus {
+  border-color: rgba(0, 0, 0, 0.1);
+  box-shadow: none;
+  transform: none;
+  color: #999;
+}
+
+.pageNumber {
+  font-family: 'open-sans', sans-serif;
+  margin: 0 25px 0 25px;
+  color: var(--font-color);
+  transition: 0.5s ease;
+}
+

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

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

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

@@ -0,0 +1,221 @@
+import {Component, OnInit} from '@angular/core';
+import {HeaderComponent} from "@header/header.component";
+import {HistoryComponent} from './history/history.component';
+import {HistoryCount, HistoryService} from '@api';
+import {NgClass, NgForOf, NgIf} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {catchError, map, Observable} from 'rxjs';
+import {SearchParams} from './search-terms';
+
+@Component({
+  selector: 'app-bans',
+  imports: [
+    HeaderComponent,
+    HistoryComponent,
+    NgIf,
+    FormsModule,
+    NgForOf,
+    NgClass
+  ],
+  templateUrl: './bans.component.html',
+  styleUrl: './bans.component.scss'
+})
+export class BansComponent implements OnInit {
+
+  constructor(public historyApi: HistoryService) {
+  }
+
+  private PAGE_SIZE: number = 10;
+  private uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
+  private actualPage: number = 0;
+  private totalSearchResults: number = -1;
+
+  public active: string = '';
+  public userType: 'player' | 'staff' = "player";
+  public punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
+  public page: number = 0;
+  public names: string[] = [];
+  public finalSearchTerm: string = '';
+  public searchTerm: string = '';
+  public filteredNames: string[] = [];
+  public pageSize = 10;
+  public historyCount: HistoryCount = {
+    bans: 0,
+    mutes: 0,
+    kicks: 0,
+    warnings: 0
+  }
+
+  ngOnInit() {
+    this.historyApi.getUserNames(this.userType, this.punishmentType).subscribe(names => {
+      this.names = names;
+    });
+
+    this.historyApi.getTotalPunishments().subscribe(totalPunishments => {
+      this.historyCount = totalPunishments;
+    })
+
+    this.pushState();
+
+    window.addEventListener('popstate', (event) => {
+      if (event.state && event.state.searchTerm !== undefined) {
+        this.searchTerm = event.state.searchTerm;
+        this.finalSearchTerm = event.state.searchTerm;
+        this.page = event.state.page;
+        this.userType = event.state.userType;
+        this.punishmentType = event.state.punishmentType;
+      }
+    });
+  }
+
+  public getCurrentButtonId(options: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {
+    if (options == this.punishmentType) {
+      return 'currentButton'
+    }
+    return null;
+  }
+
+  public getCurrentUserTypeButtonId(options: 'player' | 'staff') {
+    if (options == this.userType) {
+      return 'currentButton'
+    }
+    return null;
+  }
+
+  public filterNames() {
+    if (!this.searchTerm) {
+      this.filteredNames = [];
+      return;
+    }
+
+    this.filteredNames = this.names.filter(name =>
+      name.toLowerCase().startsWith(this.searchTerm.toLowerCase())
+    ).slice(0, 10);
+  }
+
+  public selectName(name: string) {
+    this.searchTerm = name;
+    this.filteredNames = [];
+    this.search();
+  }
+
+  public search() {
+    this.pushState()
+    this.finalSearchTerm = this.searchTerm;
+    this.page = 0;
+    if (this.finalSearchTerm.length === 0) {
+      this.totalSearchResults = -1
+      return
+    }
+
+    let totalSearchResultsObservable: Observable<number>;
+    if (this.uuidRegex.test(this.finalSearchTerm)) {
+      totalSearchResultsObservable = this.historyApi.getTotalResultsForUuidSearch(this.userType, this.punishmentType, this.finalSearchTerm);
+    } else {
+      totalSearchResultsObservable = this.historyApi.getTotalResultsForUserSearch(this.userType, this.punishmentType, this.finalSearchTerm);
+    }
+    totalSearchResultsObservable.pipe(
+      map(totalSearchResults => {
+        this.totalSearchResults = totalSearchResults;
+      }),
+      catchError(err => {
+        console.error(err);
+        return [];
+      })
+    ).subscribe();
+  }
+
+  public changeUserType(type: 'player' | 'staff') {
+    this.pushState();
+    this.userType = type;
+    this.page = 0;
+    this.finalSearchTerm = '';
+    this.searchTerm = '';
+    this.filteredNames = [];
+  }
+
+  public changeHistoryPunishment(type: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {
+    this.pushState();
+    this.punishmentType = type;
+    this.page = 0;
+  }
+
+  public nextPage() {
+    if (this.page === this.getMaxPage()) {
+      return;
+    }
+    this.setPage(this.page + 1)
+  }
+
+  public previousPage() {
+    if (this.page === 0) {
+      return;
+    }
+    this.setPage(this.page - 1)
+  }
+
+  public setPage(page: number) {
+    if (this.actualPage !== this.page) {
+      console.warn('Changing page too quickly, the previous page change has not loaded yet');
+      return;
+    }
+    this.pushState();
+    this.page = page
+  }
+
+  private pushState() {
+    const state = {
+      searchTerm: this.searchTerm,
+      page: this.page,
+      userType: this.userType,
+      punishmentType: this.punishmentType
+    };
+    const title = 'Altitude Bans';
+    const url = window.location.href;
+    window.history.pushState(state, title, url);
+  }
+
+  public getMaxPage() {
+    const all = this.historyCount.bans + this.historyCount.mutes + this.historyCount.warnings;
+    if (this.finalSearchTerm.length !== 0) {
+      return Math.floor(this.totalSearchResults / this.PAGE_SIZE);
+    }
+    switch (this.punishmentType) {
+      case 'all':
+        return Math.floor(all / this.PAGE_SIZE);
+      case 'ban':
+        return Math.floor(this.historyCount.bans / this.PAGE_SIZE);
+      case 'mute':
+        return Math.floor(this.historyCount.mutes / this.PAGE_SIZE);
+      case 'kick':
+        return Math.floor(this.historyCount.kicks / this.PAGE_SIZE);
+      case 'warn':
+        return Math.floor(this.historyCount.warnings / this.PAGE_SIZE);
+      default:
+        return 0;
+    }
+  }
+
+  public buttonActive(compare: number): boolean {
+    if (compare !== 0 && this.pageSize < this.PAGE_SIZE) {
+      return false;
+    }
+    return this.page !== compare;
+  }
+
+  public updatePageSize(pageSize: number) {
+    if (pageSize < 0) {
+      return;
+    } else {
+      this.pageSize = pageSize;
+      this.actualPage = this.page;
+    }
+  }
+
+  public setSearch(searchParams: SearchParams) {
+    this.userType = searchParams.userType
+    this.searchTerm = searchParams.searchTerm
+    this.punishmentType = searchParams.punishmentType
+    this.search();
+  }
+}

frontend/src/app/pages/reference/bans/details/details.component.html

@@ -0,0 +1,109 @@
+<ng-container>
+  <app-header [current_page]="'bans'" height="200px" background_image="/public/img/backgrounds/staff.png"
+              [overlay_gradient]="0.5">>
+    <div class="title" header-content>
+      <h1>Minecraft Punishments</h1>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="detailsBackButton">
+          <ng-container *ngIf="punishment === undefined">
+            <p>Loading...</p>
+          </ng-container>
+
+          <a [routerLink]="['/bans']">< Back</a>
+        </div>
+      </section>
+      <section class="columnSection center">
+        <ng-container *ngIf="punishment">
+          <div>
+            <span class="tag tagInfo"
+                  [ngClass]="{
+                        'tagPermanent': this.historyFormat.isPermanent(punishment),
+                        'tagExpired': !this.historyFormat.isPermanent(punishment)
+                      }">
+              {{ this.historyFormat.getType(punishment) }}
+            </span>
+          </div>
+          <div>
+            <span
+              class="tag tagInfo"
+              [ngClass]="{
+                    'tagActive': this.historyFormat.isActive(punishment),
+                    'tagInactive': !this.historyFormat.isActive(punishment)
+                  }">
+              {{ this.historyFormat.isActive(punishment) ? 'Active' : 'Inactive' }}
+            </span>
+          </div>
+        </ng-container>
+      </section>
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <ng-container *ngIf="punishment">
+              <div class="playerContainer">
+                <h2>Player</h2>
+                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.uuid, '150')"
+                     width="150"
+                     height="150"
+                     alt="{{punishment.username}}'s Minecraft skin"
+                >
+                <h3 class="detailsUsername">{{ punishment.username }}</h3>
+              </div>
+            </ng-container>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <ng-container *ngIf="punishment">
+              <div class="playerContainer">
+                <h2>Moderator</h2>
+                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.punishedByUuid, '150')"
+                     width="150"
+                     height="150"
+                     alt="{{punishment.punishedBy}}'s Minecraft skin"
+                >
+                <h3 class="detailsUsername">{{ punishment.punishedBy }}</h3>
+              </div>
+            </ng-container>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <ng-container *ngIf="punishment">
+              <div class="detailsInfo">
+                <h2>Reason</h2>
+                <p>{{ punishment.reason | removeTrailingPeriod }}</p>
+              </div>
+            </ng-container>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <ng-container *ngIf="punishment">
+              <div class="detailsInfo">
+                <h2>Date</h2>
+                <p>{{ this.historyFormat.getPunishmentTime(punishment) }}</p>
+              </div>
+            </ng-container>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>
+
+
+<section class="columnSection">
+  <ng-container *ngIf="punishment">
+    <span>Expires</span>
+    <span>{{ this.historyFormat.getExpiredTime(punishment) }}</span>
+    <ng-container *ngIf="punishment.removedBy !== undefined && punishment.removedBy.length > 0">
+      <span>Un{{ this.historyFormat.getType(punishment).toLocaleLowerCase() }} reason</span>
+      <span>{{ punishment.removedReason == null ? 'No reason specified' : punishment.removedReason }}</span>
+    </ng-container>
+  </ng-container>
+</section>

frontend/src/app/pages/reference/bans/details/details.component.scss

@@ -0,0 +1,68 @@
+.detailsBackButton {
+  font-family: open-sans, sans-serif;
+}
+
+.columnSection {
+  padding-top: 30px;
+}
+
+h2 {
+  text-align: center;
+}
+
+h3 {
+  text-align: center;
+}
+
+.avatar {
+  padding: 10px 0;
+}
+
+.detailsUsername {
+  font-size: 1.2em;
+  font-family: 'opensans-bold', sans-serif;
+}
+
+.detailsInfo {
+  padding-top: 50px;
+}
+
+.detailsInfo p {
+  text-align: center;
+}
+
+.tag {
+  display: inline-block;
+  padding: 5px 10px;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+  font-family: 'opensans-bold', sans-serif;
+}
+
+.tagInfo {
+  margin: 0 20px;
+  font-size: 1.1em;
+}
+
+.tagActive {
+  color: #FFFFFF;
+  background-color: #EE5555;
+}
+
+.tagInactive {
+  color: #FFFFFF;
+  background-color: #F79720;
+}
+
+.tagPermanent {
+  color: #FFFFFF;
+  background-color: #EE5555;
+}
+
+.tagExpired {
+  color: #FFFFFF;
+  background-color: #777777
+}

frontend/src/app/pages/reference/bans/details/details.component.spec.ts

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

frontend/src/app/pages/reference/bans/details/details.component.ts

@@ -0,0 +1,71 @@
+import {Component, OnInit} from '@angular/core';
+import {HistoryService, PunishmentHistory} from '@api';
+import {NgClass, NgIf, NgOptimizedImage} from '@angular/common';
+import {RemoveTrailingPeriodPipe} from '@pipes/RemoveTrailingPeriodPipe';
+import {HistoryFormatService} from '../history-format.service';
+import {ActivatedRoute, RouterLink} from '@angular/router';
+import {catchError, map} from 'rxjs';
+import {HeaderComponent} from '@header/header.component';
+
+@Component({
+  selector: 'app-details',
+  imports: [
+    NgIf,
+    NgOptimizedImage,
+    RemoveTrailingPeriodPipe,
+    HeaderComponent,
+    RouterLink,
+    NgClass
+  ],
+  templateUrl: './details.component.html',
+  styleUrl: './details.component.scss'
+})
+export class DetailsComponent implements OnInit {
+  type: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = 'all';
+  id: number = -1;
+  punishment: PunishmentHistory | undefined;
+
+  constructor(private route: ActivatedRoute,
+              private historyApi: HistoryService,
+              public historyFormat: HistoryFormatService) {
+  }
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(params => {
+      switch (params.get('type')) {
+        case 'ban':
+          this.type = 'ban';
+          break;
+        case 'mute':
+          this.type = 'mute';
+          break;
+        case 'kick':
+          this.type = 'kick';
+          break;
+        case 'warn':
+          this.type = 'warn';
+          break;
+        default:
+          throw new Error("Invalid type");
+      }
+      this.id = Number(params.get('id') || '-1');
+      this.loadPunishmentData();
+    });
+  }
+
+  private loadPunishmentData() {
+    if (!this.type || this.type === 'all' || this.id < 0 || isNaN(this.id)) {
+      console.error("Invalid type or id");
+      return;
+    }
+    this.historyApi.getHistoryById(this.type, this.id).pipe(
+      map(punishment => {
+        this.punishment = punishment;
+      }),
+      catchError(err => {
+        console.error(err);
+        return [];
+      })
+    ).subscribe();
+  }
+}

frontend/src/app/pages/reference/bans/history-format.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HistoryFormatService } from './history-format.service';
+
+describe('HistoryFormatService', () => {
+  let service: HistoryFormatService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HistoryFormatService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/pages/reference/bans/history-format.service.ts

@@ -0,0 +1,68 @@
+import {Injectable} from '@angular/core';
+import {PunishmentHistory} from '@api';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HistoryFormatService {
+
+  constructor() {
+  }
+
+  public getPunishmentTime(entry: PunishmentHistory) {
+    const date = new Date(entry.punishmentTime);
+    return date.toLocaleString(navigator.language, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
+  }
+
+  public isActive(entry: PunishmentHistory): boolean {
+    if (entry.removedBy !== null) {
+      return false;
+    }
+    if (entry.expiryTime <= 0) {
+      return true;
+    }
+    return entry.expiryTime > Date.now();
+  }
+
+  public isPermanent(entry: PunishmentHistory): boolean {
+    return entry.expiryTime <= 0;
+  }
+
+  public getType(entry: PunishmentHistory): string {
+    return entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
+  }
+
+  public getExpiredTime(entry: PunishmentHistory): string {
+    let suffix: string = '';
+    if (entry.removedBy !== null && entry.removedBy !== undefined) {
+      suffix = '(Unbanned by ' + entry.removedBy + ')';
+    }
+    if (entry.expiryTime <= 0) {
+      return "Permanent " + this.getType(entry) + " " + suffix;
+    }
+    const date = new Date(entry.expiryTime);
+    return date.toLocaleString(navigator.language, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    }) + " " + suffix;
+  }
+
+  public getAvatarUrl(entry: string, size: string = '25'): string {
+    let uuid = entry.replace('-', '');
+    if (uuid === 'C') {
+      uuid = "f78a4d8dd51b4b3998a3230f2de0c670"
+    }
+    return `https://crafatar.com/avatars/${uuid}?size=${size}&overlay`;
+  }
+}

frontend/src/app/pages/reference/bans/history/history.component.html

@@ -0,0 +1,53 @@
+<ng-container *ngIf="history.length === 0">
+  <p>No history found</p>
+</ng-container>
+
+<ng-container *ngIf="history.length > 0">
+  <table [cellSpacing]="0">
+    <div class="historyTableHead">
+      <thead>
+      <tr>
+        <th class="historyType">Type</th>
+        <th class="historyPlayer">Player</th>
+        <th class="historyPlayer">Banned By</th>
+        <th class="historyReason">Reason</th>
+        <th class="historyDate">Date</th>
+        <th class="historyDate">Expires</th>
+      </tr>
+      </thead>
+    </div>
+    <div>
+      <tbody>
+      <tr class="historyPlayerRow" *ngFor="let entry of history">
+        <td class="historyType" (click)="showDetailedPunishment(entry)">
+          {{ this.historyFormat.getType(entry) }}
+        </td>
+        <td class="historyPlayer" (click)="setSearch(entry.username, 'player')">
+          <div class="playerContainer">
+            <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(entry.uuid)" width="25" height="25"
+                 alt="{{entry.username}}'s Minecraft skin">
+            <span class="username">{{ entry.username }}</span>
+          </div>
+        </td>
+        <td class="historyPlayer" (click)="setSearch(entry.punishedBy, 'staff')">
+          <div class="playerContainer">
+            <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(entry.punishedByUuid)" width="25" height="25"
+                 alt="{{entry.punishedBy}}'s Minecraft skin">
+            <span>{{ entry.punishedBy }}</span>
+          </div>
+        </td>
+        <td class="historyReason" (click)="showDetailedPunishment(entry)">
+          {{ entry.reason | removeTrailingPeriod }}
+        </td>
+        <td class="historyDate" (click)="showDetailedPunishment(entry)">
+          {{ this.historyFormat.getPunishmentTime(entry) }}
+        </td>
+        <td class="historyDate" (click)="showDetailedPunishment(entry)">
+          {{ this.historyFormat.getExpiredTime(entry) }}
+        </td>
+      </tr>
+      </tbody>
+    </div>
+  </table>
+</ng-container>
+

frontend/src/app/pages/reference/bans/history/history.component.scss

@@ -0,0 +1,113 @@
+table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-radius: 5px;
+}
+
+thead {
+  height: 25px;
+  font-size: 1.1em;
+}
+
+tbody {
+  font-size: 0.9em;
+}
+
+td {
+  padding: 5px 0 5px 0;
+  height: 55px;
+}
+
+th {
+  padding: 5px 0 5px 0;
+}
+
+th, td {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 5px 0 8px 0;
+  box-sizing: border-box;
+}
+
+th.historyType, td.historyType {
+  width: 100px !important;
+  min-width: 100px;
+  max-width: 100px;
+  white-space: nowrap;
+}
+
+th.historyPlayer, td.historyPlayer {
+  width: 180px !important;
+  min-width: 180px;
+  max-width: 180px;
+}
+
+th.historyReason, td.historyReason {
+  width: 540px !important;
+  min-width: 540px;
+  max-width: 540px;
+}
+
+th.historyDate, td.historyDate {
+  width: 150px !important;
+  min-width: 150px;
+  max-width: 150px;
+}
+
+table tr td {
+  vertical-align: middle;
+}
+
+.historyPlayerRow:hover {
+  background-color: var(--history-table-row-color);
+  cursor: pointer;
+}
+
+.historyTableHead {
+  width: 1300px;
+  background-color: var(--history-table-head-color);
+  transition: all 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), 0.5s background ease;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.2), 0 6px 20px -8px rgba(0, 0, 0, 0.19);
+}
+
+.historyType {
+  max-width: 100%;
+  width: 80px;
+}
+
+.historyPlayer {
+  max-width: 100%;
+  width: 200px;
+  text-overflow: clip;
+}
+
+.playerContainer {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.username {
+  text-align: center;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+.avatar {
+  margin-bottom: 5px;
+  border-radius: 2px;
+}
+
+.historyReason {
+  width: 650px;
+}
+
+.historyDate {
+  width: 170px;
+}

frontend/src/app/pages/reference/bans/history/history.component.spec.ts

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

frontend/src/app/pages/reference/bans/history/history.component.ts

@@ -0,0 +1,108 @@
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
+import {BASE_PATH, HistoryService, PunishmentHistory} from '@api';
+import {catchError, map, Observable, shareReplay} from 'rxjs';
+import {NgForOf, NgIf, NgOptimizedImage} from '@angular/common';
+import {CookieService} from 'ngx-cookie-service';
+import {RemoveTrailingPeriodPipe} from '@pipes/RemoveTrailingPeriodPipe';
+import {HttpErrorResponse} from '@angular/common/http';
+import {environment} from '@environment';
+import {HistoryFormatService} from '../history-format.service';
+import {SearchParams} from '../search-terms';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-history',
+  imports: [
+    NgIf,
+    NgForOf,
+    NgOptimizedImage,
+    RemoveTrailingPeriodPipe
+  ],
+  templateUrl: './history.component.html',
+  styleUrl: './history.component.scss',
+  providers: [
+    CookieService,
+    {provide: BASE_PATH, useValue: environment.apiUrl}
+  ],
+})
+export class HistoryComponent implements OnInit, OnChanges {
+
+  @Input() userType: 'player' | 'staff' = "player";
+  @Input() punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
+  @Input() page: number = 0;
+  @Input() searchTerm: string = '';
+
+  @Output() pageChange = new EventEmitter<number>();
+  @Output() selectItem = new EventEmitter<SearchParams>();
+
+  private uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
+
+  public history: PunishmentHistory[] = []
+
+  constructor(private historyApi: HistoryService, public historyFormat: HistoryFormatService, private router: Router) {
+  }
+
+  ngOnChanges(): void {
+    this.reloadHistory();
+  }
+
+  ngOnInit(): void {
+    this.reloadHistory();
+  }
+
+  private reloadHistory(): void {
+    let historyObservable: Observable<PunishmentHistory[]>;
+    if (this.searchTerm.length === 0) {
+      historyObservable = this.historyApi.getHistoryForAll(this.userType, this.punishmentType, this.page);
+    } else {
+      if (this.uuidRegex.test(this.searchTerm)) {
+        historyObservable = this.historyApi.getHistoryForUuid(this.userType, this.punishmentType, this.searchTerm, this.page);
+      } else {
+        historyObservable = this.historyApi.getHistoryForUsers(this.userType, this.punishmentType, this.searchTerm, this.page);
+      }
+    }
+    historyObservable.pipe(
+      map(history => {
+        this.history = history;
+        this.pageChange.emit(this.history.length);
+      }),
+      catchError(err => {
+        this.pageChange.emit(-1);
+        let retrySeconds = 5;
+
+        if (err instanceof HttpErrorResponse) {
+          if (err.status !== 429) {
+            return this.history;
+          }
+          const headers = err.headers;
+          const retryAfterHeader = headers.get('Retry-After');
+          console.warn(err.error);
+          if (retryAfterHeader) {
+            const retryAfter = parseInt(retryAfterHeader || '0', 10);
+            if (!isNaN(retryAfter) && retryAfter > 0) {
+              retrySeconds = retryAfter + 1;
+            }
+          }
+        } else {
+          console.error(err);
+        }
+        setTimeout(() => this.reloadHistory(), retrySeconds * 1000);
+        return this.history;
+      }),
+      shareReplay(1)
+    ).subscribe();
+  }
+
+  setSearch(name: string, userType: 'player' | 'staff') {
+    let searchParams: SearchParams = {
+      userType: userType,
+      punishmentType: 'all',
+      searchTerm: name
+    }
+    this.selectItem.emit(searchParams);
+  }
+
+  public showDetailedPunishment(entry: PunishmentHistory) {
+    this.router.navigate([`bans/${entry.type}/${entry.id}`]).then();
+  }
+}

frontend/src/app/pages/reference/bans/search-terms.ts

@@ -0,0 +1,5 @@
+export interface SearchParams {
+  userType: 'player' | 'staff';
+  searchTerm: string;
+  punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn';
+}

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

@@ -0,0 +1,496 @@
+<ng-container>
+  <app-header [current_page]="'commandlist'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Command list</h1>
+      <h2>Looking for a specific command, or the description of one? This is where you find it.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <p style="font-family: 'opensans-bold', sans-serif; padding-bottom: 5px !important;">Claiming</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/claim -</span> Gives you the claim kit</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/buyclaimblocks &lt;amount&gt; -</span> Allows
+                you to buy claimblocks (0.5 in game per block)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/sellclaimblocks &lt;amount&gt; -</span>
+                Allows you to sell claimblocks (0.5 in game per block)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/abandonallclaims -</span> Deletes all your
+                claims
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/abandonclaim -</span> Deletes the
+                claim/subdivision you're currently in
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/delclaim -</span> Deletes the
+                claim/subdivision you're currently in
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/unclaim -</span> Deletes the
+                claim/subdivision you're currently in
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/claimlist -</span> Shows you all your claims
+                and claimblocks
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/accesstrust &lt;username/public&gt; -</span>
+                Gives accesstrust to a user/everyone
+              </li>
+              <li><span
+                style="font-family: 'opensans-bold', sans-serif;">/containertrust &lt;username/public&gt; -</span> Gives
+                containertrust to a user/everyone
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/expandclaim &lt;amount&gt; -</span> Expands
+                claim by the specified amount in the direction you're facing
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/restrictsubclaim -</span> Seperates
+                permissions for the subclaim you are standing in from the main claim
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/subdivide -</span> Turns on subdivide mode
+                (hold golden shovel) to allow you to create subdivisions
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/trustlist -</span> Shows users trusted in the
+                claim/subclaim you're standing it
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/claimnearbytrust -</span> Allows other
+                players to claim within 100 blocks to your claim
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Creative</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot help -</span> Display all creative
+                commands
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot info -</span> Display plot info</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot confirm -</span> Confirm an action</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot claim -</span> Claim the current plot
+                you're standing on
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot auto -</span> Claim a random available
+                plot nearby
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot delete -</span> Delete your plot</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot trust -</span> Allow a player to build
+                in your plot
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot add -</span> Allow a user to build while
+                you are online
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot setowner -</span> Set the plot owner
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot setbiome -</span> Set the plot biome
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot visit -</span> Visit someone (or your
+                own) plot
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot kick -</span> Kick a player from your
+                plot
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot middle -</span> Teleports you to the
+                center of the current plot
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot untrust -</span> Remove a player from
+                your plot
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot merge [auto] -</span> Merge a plot (or
+                multiple)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot unmerge -</span> Unmerge plots</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot sethome -</span> Set the plot home</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot clear -</span> Clear a plot</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nightvision -</span> Enables nightvision</li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Dynamic Map</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dynmap -</span> Sends you a link to the
+                Altitude map page
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dynmap hide -</span> Hides you on the map
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dynmap show -</span> Shows you on the map
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">McMMO</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mctop &lt;ability&gt; -</span> Shows the top
+                10 players for Power Level or the specified ability
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mcrank -</span> Shows where you are on the
+                mctop per skill
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mcstats -</span> Shows your mcmmo levels in a
+                scoreboard
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mcability -</span> Toggles ability use on or
+                off
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/acrobatics [?] [page] -</span> Shows your
+                stats for Acrobatics. If you add ? it will show the guide for Acrobatics
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/archery [?] [page] -</span> Shows your stats
+                for Archery. If you add ? it will show the guide for Archery
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/axes [?] [page] -</span> Shows your stats for
+                Axes. If you add ? it will show the guide for Axes
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/excavation [?] [page] -</span> Shows your
+                stats for Excavation. If you add ? it will show the guide for Excavation
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/fishing [?] [page] -</span> Shows your stats
+                for Fishing. If you add ? it will show the guide for Fishing
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/herbalism [?] [page] -</span> Shows your
+                stats for Herbalism. If you add ? it will show the guide for Herbalism
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mining [?] [page] -</span> Shows your stats
+                for Mining. If you add ? it will show the guide for Mining
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/repair [?] [page] -</span> Shows your stats
+                for Repair. If you add ? it will show the guide for Repair
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/swords [?] [page] -</span> Shows your stats
+                for Swords. If you add ? it will show the guide for Swords
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/taming [?] [page] -</span> Shows your stats
+                for Taming. If you add ? it will show the guide for Taming
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/unarmed [?] [page] -</span> Shows your stats
+                for Unarmed. If you add ? it will show the guide for Unarmed
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/woodcutting [?] [page] -</span> Shows your
+                stats for Woodcutting. If you add ? it will show the guide for Woodcutting
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/inspect &lt;username&gt; -</span> Shows mcmmo
+                levels for specified user in a scoreboard if they are near you
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">MyPet</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petinfo -</span> Shows information about your
+                MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petname &lt;name&gt; -</span> Gives your
+                current MyPet the specified name
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petrelease &lt;name&gt; -</span> Release the
+                specified MyPet (this will despawn it)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petcall (/petc) -</span> Teleports your
+                current MyPet to you
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/psa -</span> Sends your MyPet away, it can
+                still be called using /petc (does not store your pet)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petswitch (/psw) -</span> Switches between
+                current and stored MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petstore (/pst) -</span> Stores your MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pettrade &lt;username&gt; [price] -</span>
+                Trades current MyPet with a player
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petshop -</span> Opens the MyPet shop</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petskill -</span> Shows information about the
+                skills of your MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petstop -</span> Stops your MyPet from
+                attacking a target if it's not in farm or aggressive behavior modes
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petchooseskilltree (/pcst) -</span> Allows
+                you to select a skilltree for your MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petcapturehelper (/pch) -</span>
+                Enables/disables the CaptureHelper for MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petoptions healthbar -</span> Toggles
+                actionbar healthbar on/off
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petoptions idle-volume &lt;%&gt; -</span>
+                Sets volume percentage for the MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petinventory (/peti) -</span> Opens the
+                inventory for your current MyPet if it has one
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petpickup (/pp) -</span> Toggles pet pickup
+                on/off if your pet has an inventory
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petbehavior [mode] (/pb) -</span> Switches
+                between pet behaviors or to the specified one
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petbeacon -</span> Opens the beacon editor
+                for your MyPet if it has one
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <p style="font-family: 'opensans-bold', sans-serif; padding-bottom: 5px !important;">Economy</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/bal -</span> Shows you your balance</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/cheque &lt;amount&gt; -</span> Creates a
+                cheque with the specified amount of money if you're holding a piece of paper
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pay &lt;username&gt; &lt;amount&gt; [-confirmed] -</span>
+                Pays the specified amount to the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/shop -</span> Opens the shop GUI</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/points -</span> Displays your current amount
+                of sell/buy points
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/sell &lt;item&gt; -</span> Tells you if the
+                entered item is sellable at spawn, and at what price
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/buy &lt;item&gt; -</span> Tells you if the
+                entered item is buyable at spawn, and at what price
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/playershop checkstock &lt;radius&gt; [max. stock] -</span>
+                highlights all of your shops which do not meet the minimum amount specified
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Party Chat</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party help -</span> Display the help menu
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party create &lt;partyname&gt; &lt;password&gt; -</span>
+                Creates a party
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party info -</span> Displays information
+                about your current party
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party invite &lt;username&gt; -</span> Invite
+                a user to your party
+              </li>
+              <li><span
+                style="font-family: 'opensans-bold', sans-serif;">/party join &lt;partyname&gt; [password] -</span> Join
+                a users party (password is required only if the party has one)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/p &lt;message&gt; -</span> Changes chat to
+                party chat. If a message is specified it is sent to party chat
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party leave -</span> Leave a party</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party name &lt;newname&gt; -</span> Leave a
+                party
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party owner &lt;username&gt; -</span> Makes
+                the specified user owner of the party
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party password &lt;password&gt; -</span> Sets
+                or changes a password for the party
+              </li>
+              <li><span
+                style="font-family: 'opensans-bold', sans-serif;">/party remove (/party kick) &lt;username&gt; -</span>
+                Kicks the specified user from the party
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party disband -</span> Disband your party
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Voting</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/vote -</span> Sends a link to our vote page
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votebest -</span> Shows highest total votes
+                you reached per day/week/month
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votelast -</span> Shows when you last voted
+                on each of the websites
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votenext -</span> Shows when you can vote
+                again per website
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votestreak -</span> Shows your current and
+                best vote streak
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votetop [page] -</span> Shows the vote top
+                page
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votetotal -</span> Shows you your total votes
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Warps</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/warps [warp] -</span> Opens the warp GUI or
+                teleports you to the specified warp
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/warp apply -</span> Starts application
+                process for a new warp (costs 25k)
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Altitude</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/queue -</span> Shows what server you are
+                queued for
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/find &lt;username&gt; -</span> Shows if and
+                where this user is online
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/back -</span> Teleports you back to where you
+                last teleported from
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dback -</span> Brings you back to the last
+                location you died at
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/colors -</span> Shows all color and format
+                codes
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/home [name] -</span> Shows your homes (click
+                to teleport), if a home is specified it will teleport you there
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/list -</span> Lists all online players on the
+                server
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/stafflist -</span> Lists all online staff
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/seen &lt;username&gt; -</span> Shows when a
+                player is/was online
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/playtime -</span> Shows your playtime</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/sit -</span> Allows you to sit down</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/cooldown -</span> Shows the cooldown for the
+                rtp portal
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/hat -</span> Puts the current item on your
+                head
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/discord -</span> Sends you a link to the
+                Altitude Discord server
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/ranks -</span> Shows the ranks on the
+                Altitude server
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/contact -</span> Sends a link to our Contact
+                page
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/report -</span> Sends a link to the report
+                form
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/rules -</span> Sends a link to the rules page
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/store -</span> Sends a link to the Altitude
+                store
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/guide -</span> Sends a link to the guide page
+                for getting started
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/info -</span> Sends some links to our website
+                and Discord
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/se &lt;signline&gt; &lt;text&gt; -</span>
+                While looking at a sign changes text on specified line to specified text.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/editsign -</span> Toggles shift click sign
+                editing
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/kickfromclaim -</span> Kicks specified user
+                from claim
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/kickpet -</span> Toggles kickpet mode, kicks
+                vanilla pets from claims after right clicking it
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/warnings -</span> Shows all active warnings
+                for yourself
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/realname &lt;username/nickname&gt; -</span>
+                Shows the specified users username and nickname
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart remove -</span> Deletes map from the
+                database if you own it and are holding it
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart save -</span> Saves map on the
+                database if you're holding it
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/sneakclickmending -</span> Allows you to mend
+                your items by right clicking while sneaking
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pu rotateblock -</span> Rotate already
+                placed, direction-specific, blocks
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pu xpcalc &lt;current xp&gt; &lt;goal xp&gt; -</span>
+                Calculates the amount of XP needed to get from level X to level Y
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pu xpcheque &lt;xp&gt; -</span> Creates a
+                'cheque' in the form of an XP bottle with the specified amount of XP
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pt top [daily/weekly/monthly/total]-</span>
+                Displays the players with the highest amount of playtime for the specified time
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/finditem &lt;item&gt; -</span> Enables you to
+                search your chest monster for a specific item
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/local -</span> Toggles local chat, where
+                messages will only be sent to players within a 200 block distance
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/blockitempickup -</span> Prevents picking up
+                items
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Miscellaneous</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/apart -</span> Opens particles GUI</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/cmi armorstand [last/near] -</span> Opens
+                Armorstand editor
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/ping -</span> Shows your ping</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/time -</span> Shows in-game time</li>
+              <li><span
+                style="font-family: 'opensans-bold', sans-serif;">/mail send &lt;username&gt; &lt;message&gt; -</span>
+                Sends a mail to the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/ignore &lt;username&gt; -</span> Ignores a
+                users messages to you and hides their public chat messages from you
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/r &lt;message&gt; -</span> Replies to the
+                last user to send you a message
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/c &lt;message&gt; -</span> Replies to the
+                last user you sent a message to
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/msg &lt;username&gt; &lt;message&gt; -</span>
+                Sends a message to the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pvp [on/off] -</span> Toggles your pvp on/off
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/sethome &lt;homename&gt; -</span> Sets a home
+                with the specified name
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/delhome &lt;homename&gt; -</span> Shows your
+                homes (click to remove), or removes the specified home
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/spawn -</span> Teleports you to spawn</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/tpa &lt;username&gt; -</span> Sends a
+                teleport request to the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/tpaaccept [username] -</span> Accepts last
+                teleport request, or the teleport request of the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/tpahere &lt;username&gt; -</span> Sends a
+                teleport here request to the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/tpbypass -</span> Used to teleport to a
+                location the plugin marks as unsafe (such as void or lava)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/tpdeny [username] -</span> Denies last
+                teleport request, or the teleport request of the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/givepet &lt;username&gt; -</span> Gives
+                vanilla pet to specified user after you right click it
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/trapped -</span> Teleports you out of the
+                claim you are in if you do not have build permission there
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/colorsextra -</span> Displays useable RGB
+                colors (shift+lmb to paste in chat)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dispose (/trash) -</span> Opens a GUI where
+                you can dispose of items
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/pages/reference/commandlist/commandlist.component.scss

@@ -0,0 +1,14 @@
+main ul {
+  font-family: 'opensans', sans-serif;
+  text-align: left;
+}
+
+main li {
+  margin-left: 30px;
+  padding-bottom: 10px;
+}
+
+li {
+  color: var(--font-color);
+  transition: 0.5s ease;
+}

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

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

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "@header/header.component";
+
+@Component({
+  selector: 'app-commandlist',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './commandlist.component.html',
+  styleUrl: './commandlist.component.scss'
+})
+export class CommandlistComponent {
+
+}

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

@@ -0,0 +1,110 @@
+<ng-container>
+  <app-header [current_page]="'guide'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Guide Book</h1>
+      <h2>We aim to be an inclusive community server where players of all ages can find something to enjoy.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Backstory</h2>
+            <p>Altitude is a community-centered survival Minecraft server for {{ ALTITUDE_VERSION }}. Altitude opened
+              in January of 2015 and was originally a private server for a small group of friends. We’ve since opened
+              our doors to welcome anyone and everyone to enjoy the custom survival experience we’ve crafted!</p>
+            <p>The community grew rapidly in the beginning of 1.13 and therefore grew beyond the capacity of a single
+              server, so we opened two survival servers that each offered the same features and plugins, but a different
+              seed so that there is lots of land to explore!. The two servers later became four servers.</p>
+            <p>The Minecraft hype slowly died down and therefore we had to downscale first to two servers for 1.18 and
+              then for 1.20 down to one server again.</p>
+            <p>If you would like to learn more about the history of Altitude, you can visit our <a
+              [routerLink]="['/about']">about page</a>.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Claiming Land</h2>
+            <p>You should protect your home by “claiming” it to prevent others stealing your items or damaging your
+              build. This is important because we allow players to loot unclaimed buildings, claim them as their own,
+              and even completely remove them because we otherwise would have a world full of abandoned buildings. This
+              means that if your home is damaged in any way because it wasn’t protected, staff will not be able to
+              restore your items!</p>
+            <p>Claiming land on Altitude is easy. We use the very popular plugin “GriefPrevention”, which allows players
+              to use a golden shovel to make their claim.To get started enter the command <span
+                style="font-family: 'opensans-bold', sans-serif;">/claim</span> which will give you the necessary tools.
+              After that you simply click two opposite corners with the golden shovel (can be any golden shovel, not
+              only the one given through /claim) to claim the area between the points.</p>
+            <p>If you need more help with claiming, including trusting others and expanding your claim, visit our <a
+              [routerLink]="['/claiming']">claiming page</a>.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Economy</h2>
+            <p>We offer a collection of economy features to provide a player-focused and player-operated economy.
+              Players can create their own shops with the ChestShop plugin to buy and sell goods with others, apply for
+              a warp so that other players can travel directly to their shop, and pay other players directly with the
+              <b>/pay</b> command.</p>
+            <p>There are also shops in the spawn of each world that sell basic items like raw ores, food, and building
+              blocks. The prices in the spawn shops are designed to be much higher than you would likely find at player
+              shops to encourage trading between players and only using spawn as a last resort.</p>
+            <p>If you would like to learn more about the economy and how to create your own chest shops, see our <a
+              [routerLink]="['/economy']">economy page</a>.</p>
+            <p>If you would like to learn about applying for your own warp, including the criteria you must meet, see
+              our <a [routerLink]="['/warps']">warps page</a>.</p>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Survival Features</h2>
+            <p>On Altitude, we want to provide an authentic survival experience for every player. In a multiplayer
+              environment, this can be challenging! To provide the best experience we possibly can, we’ve kept some
+              vanilla features on that other servers disable:</p>
+            <ul>
+              <li>TNT and creepers do damage! (Claimed land is safe)</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/back</span> to return to your last position
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dback</span> to return to your death
+                position. (This even works if you have used <b>/back</b> earlier)
+              </li>
+              <li>Loot chests by default cannot be broken. You can enable this by doing <b>/iwanttobreakthisblock &lt;block&gt;</b>
+              </li>
+            </ul>
+          </div>
+          <div class="columnParagraph">
+            <h2>McMMO &amp; MyPet</h2>
+            <p>Our server feature the very popular community-requested plugins: McMMO & MyPet. McMMO introduces an
+              RPG-like experience to the survival game with skill leveling, special abilities, rare loot, and new
+              mechanics. The primary feature of McMMO is the detailed leveling system that breaks down Minecraft into
+              fifteen skills including mining, woodcutting, and herbalism. Each skill will level up the more you do it
+              unlocking powerful abilities related to that skill.</p>
+            <p>If you’d like to learn more about McMMO, <a href="https://mcmmo.org/wiki/Main_Page">visit their wiki
+              here</a>!</p>
+            <p>MyPet allows you to claim nearly any mob in-game as your “pet”. Each pet can be assigned a skilltree that
+              gives it unique abilities. Pets can learn to fight alongside you against mobs, pick up items for you as
+              you mine, and even provide faster travel around the world. Pets will level up in their skilltree the more
+              you play with them to unlock more abilities.</p>
+            <p>If you would like to learn more about MyPet and their abiltiies, visit our <a [routerLink]="['/mypet']">MyPet
+              page</a></p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Creative</h2>
+            <p>Occasionally, you may find yourself with a creative itch, or need a way to experiment and collaborate
+              with other players on the server! We offer a creative server for just that purpose. Players can use as
+              many plots in creative as they need (just ask a staff for more if you reach the default limit) and each
+              plot is 100 by 100 blocks. Players frequently use these plots for testing our survival builds before
+              taking the time to collect the resources in survival to build it.</p>
+            <p>Due to the low traffic that the creative server gets, we do not moderate this server as closely. If you
+              see anything wrong with the server, please inform a staff member so that we can get it resolved!</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>More Help</h2>
+            <p>You are now on your way to becoming a member of the Altitude community! We hope we’ve provided you with
+              the tools necessary to be successful on our servers. If you have any other questions, please reach out to
+              a staff member in-game, or on <a href="https://discordapp.com/invite/TGqpzCJ">our Discord</a>!</p>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/pages/reference/guide/guide.component.scss

@@ -0,0 +1,9 @@
+main ul {
+  font-family: opensans, sans-serif;
+  text-align: left;
+}
+
+main li {
+  margin-left: 30px;
+  padding-bottom: 10px;
+}

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

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

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

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "@header/header.component";
+import {RouterLink} from '@angular/router';
+import {ALTITUDE_VERSION} from '@custom-types/constant';
+
+@Component({
+  selector: 'app-guide',
+  imports: [
+    HeaderComponent,
+    RouterLink
+  ],
+  templateUrl: './guide.component.html',
+  styleUrl: './guide.component.scss'
+})
+export class GuideComponent {
+
+  protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
+}

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

@@ -0,0 +1,190 @@
+<ng-container>
+  <app-header [current_page]="'lag'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Reducing Server Lag</h1>
+      <h2>How can we minimize lag on the server? Together we can create a lag-free survival server, but it takes
+        everyone's help!</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Introduction</h2>
+          <p>Lag is not caused by one person, it is caused by all of us. Some of us cause more than others, but we can
+            all do small things to reduce the amount of lag we cause. Remember: do not ever accuse anyone else of being
+            the problem. If you believe someone’s build or behavior is a large contributor to the lag, please privately
+            tell a staff member so we can look into it. If you have any specific questions, staff are always here to
+            help. This is especially true if you want to make a redstone contraption, but are unsure how to have it
+            automatically shut off when not needed or to make it less taxing on the server.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Mobs</h2>
+          <p style="margin-bottom: 0;">Mobs are the #1 cause of lag on a survival Minecraft server. They can be
+            surprisingly hard on the server and are a cause of lag that everyone contributes to. Because of this, never
+            keep more than you need of any given mob.</p>
+          <p>FarmLimiter is a plugin that introduces hard limits to mobs. The plugin groups mobs by chaining mobs
+            together that are within a minimum radius of each other. Please refer to the example image for a better idea
+            of how mob chaining works. We've provided the settings of this plugin below for your reference, but please
+            do not try to circumvent this system - it is in place for a reason!</p>
+          <ul class="full-page-list" style="margin-bottom: 0;">
+            <li>Villagers should not be allowed to build up from a breeder, and you should cull undesirables as needed
+              to keep your numbers as low as possible. Also think carefully about which villagers you really need and if
+              you can make dual use of some. Only use “infinite” villager breeder designs if you limit their breeding by
+              limiting their food.
+            </li>
+            <li>Villagers used for trading should be put on emerald blocks, emerald ore or smooth stone. This will
+              disable their AI for anything other than trading. This helps server performance a lot and any villagers
+              used for trading found without their AI disabled could be removed by staff if they are causing lag.
+              Villagers placed on these blocks will refresh their trades faster than normal. The following example
+              visualizes the 20 passive mobs within 5 blocks FarmLimiter restriction. <a style="cursor: pointer;"
+                                                                                         (click)="toggleExceptions()">Show
+                example...</a></li>
+          </ul>
+          <div id="exceptions" [ngClass]="{'hide': !showExceptions}"
+               style="display: flex; justify-content: center; padding-bottom: 30px;">
+            <img ngSrc="/public/img/random/farm_limiter_darker.png" alt="Visualization of the farm limiter"
+                 style="width: 70%; padding-top: 7px;" height="375" width="715">
+          </div>
+          <ul class="full-page-list">
+            <li>Turtles only need one breeding pair. The breeding mechanic of turtles allows you to breed one pair over
+              and over, as they become fertile immediately upon laying their eggs. Consider keeping only two adult
+              turtles in your farm.
+            </li>
+            <li>Consider not raising pigs at all, as their meat is exactly the same as beef and they have no secondary
+              drops
+            </li>
+            <li>Do not fill your base with more vanilla pets than you need</li>
+            <li>Never circumvent entity cramming. It is there because a lot of entities crammed into a small space is
+              hard on the server.
+            </li>
+            <li>FarmLimiter is a plugin that introduces hard limits to mobs. We've provided the settings of this plugin
+              below for your reference, but please do not try to circumvent this system - it is in place for a reason!
+            </li>
+          </ul>
+          <div class="highlightedContent">
+            <h3>Farm Limiter Plugin</h3>
+            <p>No more than 25 mobs (of all types) within a radius of 3 blocks (this gets the chickens).</p>
+            <p>No more than 20 passive mobs within a radius of 5 blocks (limits farms - including villagers and
+              excluding chickens).</p>
+            <p>No more than 10 hostile mobs within a single block (limits grinders).</p>
+            <p>No more than 10 turtles within a radius of 5 blocks (turtles cause a LOT of lag).</p>
+            <p>No more than 70 villagers within a radius of 50 blocks.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Minecarts</h2>
+          <p>Minecarts are another type of entity that cause a lot of lag. They are harder on the server than you might
+            think.</p>
+          <ul class="full-page-list">
+            <li>Do not store villagers or other mobs long-term in minecarts. Use them for transportation and drop them
+              off in an enclosed location on the other end.
+            </li>
+            <li>Do not use farm designs that rely on many hopper minecarts. They are convenient because they pick up
+              items through blocks and have a faster throughput than hoppers, but they are unnecessarily hard on the
+              server.
+            </li>
+            <li>Avoid using minecarts for entity cramming purposes when possible and try to design your farm to only
+              have one such killing chamber if it is necessary.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Hoppers</h2>
+          <p>Hoppers cause lag because they are constantly checking for items, even when nothing is in them, so you
+            should minimize your use of them.</p>
+          <ul class="full-page-list">
+            <li>When bringing items down through a vertical line of hoppers, try alternating them with single chests.
+              This saves you iron and saves the server a bit of lag.
+            </li>
+            <li>Bulk storage systems where random items are dropped in and sent into chests should be avoided because
+              they are likely to cause a situation that is especially taxing. More specifically: A hopper pushing items
+              into a full chest that are not in the chest OR A hopper trying to pull items from a chest to complete
+              stacks but none of the items in the chest match.
+            </li>
+            <li>Myth: Droppers/Furnaces on top of hoppers reduces lag. Droppers on top of hoppers do not reduce lag, and
+              furnaces are a slightly laggy object in their own right, so do not use them unnecessarily.
+            </li>
+            <li>When moving items long distances use water streams. Also try to use water to gather newly farmed items
+              rather than an array of hoppers. However, be aware that water streams have their own downfalls: First, the
+              item entity is at risk to be picked up by a pet with /petpickup turned on. So, do not use them near public
+              areas of your base or for high value items. Second, do not make water streams so long that they flow into
+              unloaded chunks, as the items can back up where chunks unload and create a ticking lag bomb of item
+              entities. Finally, set things up so that, if the storage system at the other end fills up, the extra items
+              get automatically destroyed rather than sitting on full hoppers to despawn.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Redstone Farms</h2>
+          <p>Redstone contraptions are, by their nature, going to contribute some lag. But you can do things to reduce
+            their impact.</p>
+          <ul class="full-page-list">
+            <li>Biggers is not better. Try to make farms a reasonable size for what you need and no larger. Think about
+              how much of a resource you actually need.
+            </li>
+            <li>Think about the design you use. If you have a farm with a lot of pistons to break crops automatically,
+              can you set it up so that the pistons fire in sequence instead of all at once? Can you use a slimeblock
+              push bar so that you only need one piston and one observer for every 12 plants instead of one per each?
+              Minimize how much redstone is running at once.
+            </li>
+            <li>Set up your machines to shut off when not in use.</li>
+            <li>If you use a minecart hopper/chest to transport items, make sure it automatically docks when there are
+              no items to move. You can set up the minecart pickup to only run after a harvest and an auto-smelter that
+              uses minecarts to fill the furnaces does not need to have the minecart running all the time, only when
+              it’s dropping off items.
+            </li>
+            <li>Redstone clocks rarely need to run all the time. For example, an item disposal dropper can be set up to
+              automatically trigger the clock when there are items in the dropper and to shut off the clock when the
+              dropper is empty.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Other Entities</h2>
+          <p>You may have noticed a theme in this list. Everything we've listed is an <span
+            style="font-family: 'opensans-bold', sans-serif;">entity</span>. Entities are the biggest cause of lag on
+            Altitude, and anything we can do to reduce the number of entities on the server will help!</p>
+          <ul class="full-page-list">
+            <li>Block Entities. Any block entity causes more lag than a normal block, but some cause more than others.
+              <a href="https://minecraft.gamepedia.com/Block_entity">minecraft.gamepedia.com/Block_entity</a></li>
+            <li>Signs with text on them are laggier than empty signs, so consider if you need to write that sign. Also,
+              be sure to not write anything on signs used for technical reasons, like to hold back lava or water.
+            </li>
+            <li>Item frames also are a small contributor to lag, but can add up, so please do not use a lot of them for
+              no reason.
+            </li>
+            <li>Brewing Stands cause more lag than you might think, so please do not have more placed than you need.
+            </li>
+            <li>Item Entities. Please pick up item entities when mining, even if you don’t actually want them. You can
+              dispose of them by throwing them in lava or on a cactus. But leaving mass amounts of items to despawn puts
+              an unnecessary strain on the server.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/pages/reference/lag/lag.component.scss

@@ -0,0 +1,55 @@
+.full-page-list {
+  margin-left: 70px;
+  font-family: 'opensans', sans-serif;
+  margin-bottom: 30px;
+  color: var(--font-color);
+  transition: 0.5s ease;
+}
+
+.full-page-list li {
+  padding-bottom: 10px;
+}
+
+.highlightedContent {
+  width: 70%;
+  margin: auto;
+  background: var(--color-quinary);
+  padding: 20px;
+  margin-bottom: 30px;
+  text-align: center;
+  border-radius: 5px;
+  transition: 0.5s ease;
+}
+
+.highlightedContent p {
+  margin-bottom: 0px !important;
+}
+
+.paragraph {
+  width: 100%;
+  margin-bottom: -20px;
+}
+
+.paragraph p {
+  margin-bottom: 15px;
+}
+
+li {
+  padding-bottom: 10px;
+}
+
+.hide {
+  display: none !important;
+}
+
+@media (max-width: 1000px) {
+  main .container {
+    text-align: left;
+  }
+}
+
+@media (max-width: 670px) {
+  main .container {
+    text-align: center;
+  }
+}

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

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

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

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "@header/header.component";
+import {NgClass, NgOptimizedImage} from '@angular/common';
+import {ScrollService} from '@services/scroll.service';
+
+@Component({
+  selector: 'app-lag',
+  imports: [
+    HeaderComponent,
+    NgOptimizedImage,
+    NgClass
+  ],
+  templateUrl: './lag.component.html',
+  styleUrl: './lag.component.scss'
+})
+export class LagComponent {
+  showExceptions: boolean = false;
+
+  constructor(public scrollService: ScrollService) {
+  }
+
+  public toggleExceptions() {
+    this.showExceptions = !this.showExceptions;
+  }
+}

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

@@ -0,0 +1,75 @@
+<ng-container>
+  <app-header [current_page]="'mapart'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Mapart</h1>
+      <h2>Altitude features a way to save maparts.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>What is mapart?</h2>
+            <p>Any map is a piece of art, but the common meaning of this is an actual drawing onto a map. By placing
+              blocks on a plot to color in a map one pixel at a time, you can create an image.</p>
+            <p>Creating these maps is time consuming, and Altitude wants to support these mapartists by offering an
+              easier way to share their mapart..</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>How to save mapart</h2>
+            <p>After you have placed all blocks on your plot and have the image recorded on your map, hold the map in
+              your main hand and do <span style="font-family: 'opensans-bold', sans-serif;">/mapart save</span>. This
+              will cost you $1000 in-game currency. The saving process can take several minutes.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Useful resources for creating mapart</h2>
+            <p>Mapart may be created simply by zooming in on an image you wish to create and placing pixels by eye.
+              First, however, you must know what blocks to use for each color. This <a
+                href="https://minecraft.gamepedia.com/Map_item_format">Minecraft wiki article</a> explains map item
+              formatting such as colors available on maps and the blocks that correspond.</p>
+            <p>Pick whichever blocks are the most convenient to collect and to break later if you plan on reusing blocks
+              for multiple maps.</p>
+            <p>Additionally, there is an incredibly useful online tool known as Mapartcraft by Rebane that can take an
+              image and automatically convert it to a schematic that can be used in conjunction with
+              litematica/schematica as a guide to create much more detailed mapart! Be sure to select the correct
+              version of Minecraft in the settings and pick your preferred blocks. This tool can be found <a
+                href="https://rebane2001.com/mapartcraft/">here</a>.</p>
+            <p>Reminder: While schematica and litematica are permitted mods on Altitude, any features like auto-build
+              and easy-place they may include are not!</p>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Is my mapart protected?</h2>
+            <p>The only person that can remove or clone saved maps is the one who created them. Mapart can be copied by
+              using the vanilla method on a cartography table.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>What mapart can I make</h2>
+            <p>If you plan on making some kind of map art that some may consider inappropriate, explicit, or
+              controversial, you can submit a request for review through our AltitudeBot support bot on Discord. Simply
+              message the bot anything, and the bot will reply with commands that you can utilize. For mapart review
+              requests, you will be using the command <span style="font-family: 'opensans-bold', sans-serif;">!mapart &lt;description of map art&gt;</span>.
+              Please be sure to also attach an image of the mapart (it is not possible to submit the request without an
+              image)!</p>
+            <p>Creating inappropriate mapart without prior approval may result in deletion of the mapart itself and
+              punishment for the creator.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Useful Commands</h2>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart save -</span> Save a mapart</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart remove -</span> Delete a mapart</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart find -</span> See who made a specific
+                mapart
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

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

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

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "@header/header.component";
+
+@Component({
+  selector: 'app-mapart',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './mapart.component.html',
+  styleUrl: './mapart.component.scss'
+})
+export class MapartComponent {
+
+}

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

@@ -0,0 +1,228 @@
+<ng-container>
+  <app-header [current_page]="'ranks'" height="460px" background_image="/public/img/backgrounds/118fjord.png"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Server Ranks</h1>
+      <h2>The standard ranks are unlocked by playing on the server. As you accumulate time you will automatically rank
+        up. Do /rank to check your playtime.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="container">
+        <table>
+          <thead>
+          <tr>
+            <th scope="col" class="tableTitle">Rank</th>
+            <th scope="col" class="tableTitle">Requirements</th>
+            <th scope="col" class="tableTitle">Perks</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Drifter</span>]</td>
+            <td data-label="Requirements">Join the server!</td>
+            <td data-label="Perks" class="perks">
+              All basic permissions<br>
+              Up to 3 homes in survival<br>
+              Up to 2 MyPet slots<br>
+              Up to 5 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Nomad</span>]</td>
+            <td data-label="Requirements">Play for 2 hours</td>
+            <td data-label="Perks" class="perks">
+              Up to 4 homes in survival<br>
+              Up to 3 MyPet slots<br>
+              Up to 10 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Peddler</span>]</td>
+            <td data-label="Requirements">Play for 1 day</td>
+            <td data-label="Perks" class="perks">
+              Up to 5 homes in survival<br>
+              Up to 4 MyPet slots<br>
+              Up to 15 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Settler</span>]</td>
+            <td data-label="Requirements">Play for 3 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 6 homes in survival<br>
+              Up to 5 MyPet slots<br>
+              Up to 20 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Resident</span>]</td>
+            <td data-label="Requirements">Play for 7 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 7 homes in survival<br>
+              Up to 6 MyPet slots<br>
+              Up to 25 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Esquire</span>]</td>
+            <td data-label="Requirements">Play for 14 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 8 homes in survival<br>
+              Up to 7 MyPet slots<br>
+              Up to 30 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Knight</span>]</td>
+            <td data-label="Requirements">Play for 30 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 9 homes in survival<br>
+              Up to 8 MyPet slots
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Baron</span>]</td>
+            <td data-label="Requirements">Play for 60 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 10 homes in survival<br>
+              Up to 9 MyPet slots
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Viscount</span>]</td>
+            <td data-label="Requirements">Play for 180 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 11 homes in survival<br>
+              Up to 9 MyPet slots
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <section id="subheaderDonor">
+      <div class="title" style="margin-top: 0; height: 100%;">
+        <h1>Premium Ranks</h1>
+        <h2>Premium ranks are a symbol of those who have purchased a rank to support the server. Purchase a rank today
+          at: <a href="https://store.alttd.com">donate.alttd.com</a>. Thank you!</h2>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <table style="width:100%">
+          <thead>
+          <tr>
+            <th scope="col" class="tableTitle">Rank</th>
+            <th scope="col" class="tableTitle">Requirements</th>
+            <th scope="col" class="tableTitle">Perks</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank2">Count</span>]</td>
+            <td data-label="Requirements">Purchase for $15 on <a href="https://store.alttd.com">Buycraft</a></td>
+            <td data-label="Perks" class="perks">
+              Donor Discord channel access<br>
+              Up to 12 homes in survival<br>
+              Up to 10 MyPet slots<br>
+              More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank2">Viceroy</span>]</td>
+            <td data-label="Requirements">Purchase for $30 on <a href="https://store.alttd.com">Buycraft</a></td>
+            <td data-label="Perks" class="perks">
+              Priority queue for full servers<br>
+              Up to 13 homes in survival<br>
+              Up to 18 MyPet slots<br>
+              More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank2">Duke</span>]</td>
+            <td data-label="Requirements">Purchase for $50 on <a href="https://store.alttd.com">Buycraft</a></td>
+            <td data-label="Perks" class="perks">
+              Nickname in chat<br>
+              Up to 14 homes in survival<br>
+              Up to 27 MyPet slots<br>
+              More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank2">Archduke</span>]</td>
+            <td data-label="Requirements">Purchase for $100 on <a href="https://store.alttd.com">Buycraft</a></td>
+            <td data-label="Perks" class="perks">
+              Custom prefix in chat<br>
+              Up to 16 homes in survival<br>
+              Up to 36 MyPet slots<br>
+              More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank2">α</span>]</td>
+            <td data-label="Requirements">Purchase for $25 on <a href="https://store.alttd.com">Buycraft</a></td>
+            <td data-label="Perks" class="perks">
+              Time-limited rank<br>
+              Access to alpha testing<br>
+              This custom prefix<br>
+              More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank4">▲</span>]</td>
+            <td data-label="Requirements">Boosting with <a href="https://discordapp.com/nitro">Discord Nitro</a></td>
+            <td data-label="Perks" class="perks">
+              Discord Nitro perks<br>
+              This custom prefix
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <section id="subheaderCommunity">
+      <div class="title" style="margin-top: 0; height: 100%;">
+        <h1>Community Ranks</h1>
+        <h2>Community ranks are for talented people who support Altitude in more than one way.</h2>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <table style="width:100%">
+          <thead>
+          <tr>
+            <th scope="col" class="tableTitle">Rank</th>
+            <th scope="col" class="tableTitle">Requirements</th>
+            <th scope="col" class="tableTitle">Perks</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank5">Social Media</span>]</td>
+            <td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
+            <td data-label="Perks" class="perks">/record<br>/ptime<br>/pweather</td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank5">Streamer</span>]</td>
+            <td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
+            <td data-label="Perks" class="perks">/record<br>/ptime<br>/pweather</td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank5">YouTube</span>]</td>
+            <td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
+            <td data-label="Perks" class="perks">/record<br>/ptime<br>/pweather</td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank5">Event Leader</span>]</td>
+            <td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
+            <td data-label="Perks" class="perks">Build perms on event server</td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank5">Event Team</span>]</td>
+            <td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
+            <td data-label="Perks" class="perks">Build perms on event server</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/pages/reference/ranks/ranks.component.scss

@@ -0,0 +1,151 @@
+#subheaderDonor {
+  height: 350px;
+  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/newtown.jpg");
+  background: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/newtown.jpg");
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/newtown.jpg");
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  text-align: center;
+}
+
+#subheaderCommunity {
+  height: 350px;
+  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/caruselimage4.png");
+  background: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/caruselimage4.png");
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/caruselimage4.png");
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  text-align: center;
+}
+
+td,
+th {
+  font-family: 'opensans', sans-serif;
+}
+
+table {
+  border-collapse: collapse;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  table-layout: fixed;
+}
+
+table tr {
+  padding: .35em;
+}
+
+table th,
+table td {
+  padding: .625em;
+  text-align: center;
+}
+
+table th {
+  font-size: .85em;
+}
+
+.perks {
+  text-align: left;
+  padding-left: 105px;
+}
+
+.tableTitle {
+  font-family: 'opensans-bold', sans-serif;
+  font-size: 1.5em;
+}
+
+.rankTitle {
+  font-family: 'opensans-bold', sans-serif;
+}
+
+.rank1 {
+  color: #265ac9;
+}
+
+.rank2 {
+  color: #980399;
+}
+
+.rank3 {
+  color: #0c3999;
+}
+
+.rank4 {
+  color: #c949c9;
+}
+
+.rank5 {
+  color: #ffaa00;
+}
+
+@media (max-width: 1200px) {
+  .perks {
+    padding-left: 80px;
+  }
+}
+
+@media (max-width: 900px) {
+  .perks {
+    padding-left: 50px;
+  }
+}
+
+@media (max-width: 690px) {
+  main .container {
+    width: 80% !important;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  table {
+    border: 0;
+  }
+
+  table th,
+  table td {
+    padding: .400em;
+  }
+
+  table thead {
+    border: none;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  table tr {
+    display: block;
+    margin-bottom: .625em;
+  }
+
+  table td {
+    display: block;
+    font-size: .8em;
+    text-align: right;
+  }
+
+  table td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  table td:last-child {
+    border-bottom: 0;
+  }
+
+  .perks {
+    text-align: right;
+    padding-left: 6px;
+  }
+}

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

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

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "@header/header.component";
+
+@Component({
+  selector: 'app-ranks',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './ranks.component.html',
+  styleUrl: './ranks.component.scss'
+})
+export class RanksComponent {
+
+}

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

@@ -0,0 +1,265 @@
+<ng-container>
+  <app-header [current_page]="'rules'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Server Rules</h1>
+      <h2>We aim to be an inclusive community server where players of all ages can find something to enjoy.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <div class="highlighted-content">
+            <h3 style="padding-top: 15px;">Zero Tolerance Policy</h3>
+            <p>Altitude is committed to providing a safe and welcoming environment for all players, regardless of
+              gender, race, ethnicity, sexual orientation, disability, religion, or any other aspect of their identity.
+              The staff team reserves the right to remove a player from our services in situations where staff has
+              significant reason to believe a player threatens the safety of our community members.</p>
+            <p style="font-size: 0.85em;">Note: We want players from all countries to be able to play, but unfortunately
+              we can only moderate english. Therefore we require that all conversations in public chat are in
+              English.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div id="respect"></div>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="respect">Treat Others With Respect</span></h2>
+          <ul class="full-page-list">
+            <li>Personal attacks and harassment targeting players or staff will not be tolerated.</li>
+            <li>Sexist, racist, homophobic, and broad, offensive generalizations about groups of people are simply not
+              allowed.
+            </li>
+            <li>Any word blocked by a filter is never allowed no matter how it's written, even if it gets around the
+              filter itself.
+            </li>
+            <li>You can talk about current events and real-world topics. However, if staff recognizes the topic is
+              causing players to become uncomfortable, they may shut the conversation down.
+              <ul class="full-page-list-2">
+                <li>You are welcome to take conversations regarding sensitive topics to DMs and party chat with people
+                  who want to be involved, or off the server.
+                </li>
+              </ul>
+            </li>
+            <li>Don't spam. This includes excessive use of chat, caps, player-related commands, or any other medium.
+            </li>
+            <li>Don't endorse drug use on the server. This includes renaming items after drugs and then selling them in
+              shops, or dropping them to random players.
+            </li>
+            <li>Keep others in mind when talking in public chat. Personal and/or exclusive conversations are often
+              better suited for DMs or party chat. Staff may direct you there if they feel your conversation is clogging
+              chat.
+              <ul class="full-page-list-2">
+                <li>Since messages in global chat get sent to every server we want to avoid spam and unnecessary
+                  messages. If you send advertisements they cannot require a bid in response, all bidding needs to be
+                  done in a single server chat or through the Discord. Other conversation that can clog up the global
+                  chat should also be kept to a single server, you can have minor conversations in global chat but it
+                  should not become long or clog up the entire chat. We highly encourage the use of private messages or
+                  party chats if you want to have longer conversations across the different servers!
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <div id="goodneighbour"></div>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="goodneighbour">Be a Good Neighbour</span></h2>
+          <p>Altitude should be a place where everyone can enjoy themselves. Keep everyone in mind when you do
+            something, and avoid behavior that would make others feel unwelcome or uncomfortable.</p>
+          <ul class="full-page-list">
+            <li>Follow the 50/100 claiming rule: you may claim up to 50 blocks beyond the furthest point of your build,
+              and you must claim at least 100 blocks away from other players claim borders. Don’t claim unnecessarily
+              large areas, don’t claim things just to sell them, and don't claim land you don’t plan to build on (within
+              a month). Due to players trying to place just a few blocks to claim land, it is up to staff discretion if
+              a build is significant enough to justify a claim.
+              <ul class="full-page-list-2">
+                <li>Excessive and/or unnecessary claiming WILL result in staff intervention, and unused claims will be
+                  removed.
+                </li>
+                <li>Claims that go unused for 30 days (30 days since claim creation, not player login) will be removed
+                  if a player notifies staff that they would like to be able to use the area. These claims will be
+                  removed without warning due to the fact that they will have been sitting empty for 30 days. We will
+                  still give a 7 day warning for any unused claim that was created less than 30 days prior to the
+                  complaint. We will notify you when the claim is removed.
+                </li>
+              </ul>
+            </li>
+            <li>Respect other's builds! You may take resources from unclaimed builds, claim them as your own, or even
+              completely remove them - but please avoid making things unnecessarily ugly. Please do not "grief" (damage
+              with intent to harm).
+              <ul class="full-page-list-2">
+                <li>Don't leave unneeded towers and spammed blocks in the world.</li>
+                <li>Do not break structures meant to be traveled on, such as railroads or iceroads - they should never
+                  be destroyed even if unclaimed.
+                </li>
+              </ul>
+            <li>Do not steal or copy another player's build designs. This includes all official Altitude builds (spawns,
+              lobby, events, etc.), player bases, custom farms, custom grinders, mapart, and any other creation that a
+              player put time or effort into. Designs pulled off of the internet (Youtube, schematics from build
+              inspiration sites, Pinterest, etc.) do not fall under this rule, we will only issue a punishment when
+              someone is copying a custom build.
+            </li>
+            <li>Do not steal (take without permission) from a claim you are trusted in, or from a player after they’ve
+              just died (with PVP disabled) or set something down.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <div id="playfair"></div>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="playfair">Play Fair</span></h2>
+          <p>Everyone should be able to feel proud of their achievements on the server. This is only possible if
+            everyone plays fair. One player cheating can diminish the accomplishments of everyone else.</p>
+          <ul class="full-page-list">
+            <li>Altitude is a "PvP free" server. Although, we do allow you to toggle PvP on and off. By enabling PvP you
+              are acknowledging the risk of losing your items in a fight. Staff will not help retrieve any items you
+              lose while PvP is enabled. Never use any means of bypassing PvP protection such as player traps, lava,
+              fire, explosions, mobs, and pushing players into deadly items.
+            </li>
+            <li>Do not attempt to trick or scam others during item trades or economy transactions. Additionally, do not
+              bid on an item you do not plan to buy - if you offer to pay more for something that someone else has
+              already made an offer on, that is considered "bidding" and all bids are final! As soon as an auction goes
+              public, all bids must remain public.
+            </li>
+            <li>Alternate (“alt”) accounts are generally not allowed. We may approve their use on a case-by-case basis.
+              Using an alt account to bypass a punishment can result in a longer ban. You are responsible for the
+              activity of your account, as well as any consequences brought forward from breaking our rules.
+              <ul class="full-page-list-2">
+                <li>Please notify the staff team if there are multiple people who play on Altitude in your household, so
+                  there are no questions about whether you are different people or one person using alt accounts. This
+                  makes our job easier and means we don't have to bother you about it in the future!
+                </li>
+                <li>You must be the legal owner of your Minecraft account, or have permission to use it by the legal
+                  owner.
+                </li>
+              </ul>
+            </li>
+            <li>Bypassing the automatic AFK kick system is prohibited. This includes the use of an auto-joiner to
+              automatically log back in after being AFK kicked. You may be expected to reply to a staff member if you
+              repeatedly rejoin the server shortly after being kicked by the AFK timer, or we suspect you of avoiding
+              the timer.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <div id="hacksandmods"></div>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="hacksandmods">Hacks and Mods Policy</span></h2>
+          <p>Any hack or mod that gives you an unfair advantage in the game is not allowed. Additionally, most vanilla
+            exploits are allowed – unless they give you materials you are not supposed to have (such as duplication
+            glitches). Exploiting any non-vanilla features (our plugins) is prohibited. Additionally, tools that bypass
+            our AFK system are not allowed. You may use any mods that fit into the categories below.</p>
+          <p style="font-family: 'opensans-bold', sans-serif;">We allow modifications in the following categories:</p>
+          <ul class="list">
+            <li>Mods that improve client performance (Optifine)</li>
+            <li>Minimaps, as long as it doesn't show anything you can't normally see (caves, dungeon locations, etc.)
+            </li>
+            <li>Aesthetic modifications that do not give you an unfair advantage or change gameplay (Shaders)</li>
+            <li>Inventory management systems, such as automatic organization</li>
+            <li>Mods for recording gameplay (ReplayMod)</li>
+            <li>The Litematica mod (auto-build and easy place features are prohibited in survival, but is allowed in
+              creative)
+            </li>
+            <li>Armor and status HUDs (as long as info shown is accessible in vanilla)</li>
+            <li>Macros (setting certain actions to specific buttons)
+            <li>Scripts that don't act based on something happening in game (essentially more complex macros). You can
+              not be AFK while using scripts or macros.
+          </ul>
+        </div>
+      </div>
+    </section>
+    <div id="lag"></div>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="lag">Reducing Lag</span></h2>
+          <p>It is up to everyone in the community to help keep lag to a minimum. There are many factors that cause lag
+            and you can read about them <a [routerLink]="['/lag']">here</a>. If we find something on the server that is
+            causing a
+            problem with lag (such as large animal farms or grinders) we may have to shut it down. Furthermore,
+            chunkloaders are prohibited.</p>
+          <p style="margin-bottom: 0;">We have a system in place to restrict the number of mobs that can be in a
+            certain area. Please do not try to circumvent this system. Additionally, mob grinder holding chambers must
+            be either 1x1 or 1x2 blocks in size. <a style="cursor: pointer;" (click)="toggleExceptions()">Show
+              exceptions...</a></p>
+          <ul id="exceptions" class="full-page-list" [ngClass]="{'hide': !showExceptions}">
+            <li>Magma kill chamber may be up to 3x3</li>
+            <li>Hoglin kill chamber may be up to 2x2</li>
+            <li>Enderman kill chamber may be up to 3x3</li>
+            <li>Ravagers during pillager raids must be killed automatically and the kill chamber should still be 2x1 for
+              the rest of the mobs.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <div id="impersonate"></div>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="impersonate">Do Not Impersonate Staff</span></h2>
+          <p>Do not impersonate staff members or portray yourself as one when you are not. It is ok to share the rules
+            with others, but please do not try to force others to follow them - reach out to a staff member if you need
+            help.</p>
+          <p>Do not mini-mod. If a staff member is already helping a player please don't interfere. We appreciate
+            players trying to help out other players but if staff is already helping it can cause confusion. You can
+            remind players of the rules, but remember that you cannot enforce them or punish players.</p>
+          <p>Do not make "official" Altitude products or events. If you make something related to Altitude please make
+            sure it's clear that it is not an official Altitude thing. We cannot moderate unofficial things and cannot
+            be responsible for what happens related to them!</p>
+        </div>
+      </div>
+    </section>
+    <div id="selfpromotion"></div>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="selfpromotion">No Self-Promotion*</span></h2>
+          <p>Creators are awesome! Creators leeching off of others to promote their own work are not. You may share
+            content you've created as long as you are not using our services merely as a means of promoting your own
+            content. We may deny an individual from promoting their work if we feel this is being abused.</p>
+          <p>Never promote other Minecraft servers, Realms, or Discord servers in any of our public chats. You may share
+            this type of content in a private message, but only if the recipient requested the information first</p>
+        </div>
+      </div>
+    </section>
+    <div id="dispute"></div>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="dispute">Disputing a Rule or Punishment</span></h2>
+          <p>If you would like to dispute a moderator’s decision, a punishment you’ve received, or one of our rules,
+            please contact us privately. We understand that things can get frustrating and sometimes a discussion is
+            necessary to make sure we are doing the right thing, but we don’t want a potentially sensitive discussion to
+            interrupt everyone else who is playing. Please help us keep things peaceful and reach out at <a
+              href="alttd.com/appeal">alttd.com/appeal</a>.<br>
+            Before appealing, please remember that all players are responsible for reading and understanding our rules
+            when they use our services.</p>
+          <p>If they deem it necessary staff can impose stricter, temporary rules than the ones written here to control
+            a situation that is affecting player enjoyment. If you feel this power is abused feel free to contact us.
+            But you still have to follow the rule once you're made aware of it.</p>
+          <p>Please remember our rules only apply to our services. We cannot enforce our rules nor control what others
+            do outside of our services.</p>
+        </div>
+      </div>
+    </section>
+    <a (click)="this.scrollService.scrollToTop()" class="scroll-up-button, active">
+      <span></span>
+      <p style="display: none;">Scroll Down</p>
+    </a>
+  </main>
+</ng-container>

frontend/src/app/pages/reference/rules/rules.component.scss

@@ -0,0 +1,72 @@
+.paragraph {
+  width: 100%;
+  margin-bottom: -25px;
+}
+
+.highlighted-content {
+  width: 70%;
+  background: var(--color-quaternary);
+  padding: 20px;
+  margin: auto auto 30px;
+  text-align: center;
+  border-radius: 5px;
+  transition: 0.5s ease;
+}
+
+.highlighted-content p {
+  margin-bottom: 0 !important;
+}
+
+.full-page-list {
+  margin-left: 70px;
+  font-family: 'opensans', sans-serif;
+  margin-bottom: 30px;
+  color: var(--font-color);
+  transition: 0.5s ease;
+}
+
+.full-page-list li {
+  padding-bottom: 10px;
+}
+
+.full-page-list-2 {
+  margin-left: 70px;
+  font-family: 'opensans', sans-serif;
+  margin-bottom: 0;
+}
+
+.list > li {
+  margin-left: 70px;
+  font-family: 'opensans', sans-serif;
+  color: var(--font-color);
+  transition: 0.5s ease;
+}
+
+.hide {
+  display: none;
+}
+
+.copy-link {
+  cursor: pointer;
+}
+
+// Different resolution changes
+@media (max-width: 1000px) {
+  main .container {
+    text-align: left;
+  }
+
+  .list {
+    text-align: left;
+  }
+}
+
+@media (max-width: 670px) {
+  main .container {
+    text-align: center;
+  }
+
+  .list {
+    margin-left: 50px;
+  }
+}

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

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

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

@@ -0,0 +1,27 @@
+import {Component} from '@angular/core';
+import {ScrollService} from '@services/scroll.service';
+import {CommonModule} from '@angular/common';
+import {HeaderComponent} from '@header/header.component';
+import {RouterLink} from '@angular/router';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent,
+    RouterLink
+  ],
+  selector: 'app-rules',
+  templateUrl: './rules.component.html',
+  styleUrl: './rules.component.scss'
+})
+export class RulesComponent {
+  showExceptions: boolean = false;
+
+  constructor(public scrollService: ScrollService) {
+  }
+
+  public toggleExceptions() {
+    this.showExceptions = !this.showExceptions;
+  }
+}

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

@@ -0,0 +1,277 @@
+<ng-container>
+  <app-header [current_page]="'staffpowers'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Staff Powers</h1>
+      <h2>Our staff members have numerous powers to assist them in moderating effectively.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Staff Powers</h2>
+            <p>We believe it's important to be transparent with our community about what our staff can see and do. To do
+              this we've created this web page to explain all the things staff can see/do and why.</p>
+            <p>We store a lot of information, basically everything you do on Altitude is logged. We only use this data
+              to moderate, we will never sell it or give it to anyone who isn't an active staff member. Any misuse of
+              the data we store by staff members results in their immediate removal from the team.</p>
+            <p>This is not a complete list of all powers the staff team has, these are just a list of the commands that
+              could be misinterpreted as giving staff members an advantage or are related to your data.</p>
+            <p>If you have a concern about any of the powers talked about on the rest of this page, or you feel like
+              something is missing. Please get in contact with head staff through the AltitudeBot on Discord or by
+              submitting a contact form with a valid email.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Staff Rooms</h2>
+            <p>Staff rooms are places where staff may need to go to handle a variety of staff-related tasks. We don’t
+              want staff to seem unresponsive when working on a task if a player sees them unmoving on the server
+              somewhere when sorting through logs, coreprotect data, or sending mails to players. Often, secure
+              ‘physical’ space is needed by staff to deal with an issue on the server (For example, storing stolen items
+              in one organized place, where all other mods can safely access them so they can be returned to the player
+              who owns them as quickly as possible). Staff meetings also often occur in these rooms so that the server
+              isn’t left unattended during the meeting, while the team can still remain engaged in the meeting.</p>
+            <p>Previously, staff rooms were placed under server spawns for quick access by that server’s staff team.
+              Now, staff rooms have been removed from the survival world and exist in a dimension similar to the nether
+              and the end.<br>
+              Concerns have been raised in the past that this space is not accessible to players. Due to the purpose of
+              the space (solely to handle staff-related tasks/player issues, and host meetings), this space will forever
+              remain inaccessible to players as that access would eliminate the purpose of the space.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Spy (seeing DMs & PartyChat)</h2>
+            <p>Staff members are able to see all private messages and messages sent in party chats. This is vital for
+              protecting our players, we would not be able to moderate effectively without also being able to see
+              private messages.</p>
+            <p>We will never purposely spy on your private conversation for personal gain, the only time we will
+              interfere with these messages is if we see a severely concerning conversation happening; harassment,
+              bullying, suicide/self harm discussion, sexual discussion, etc. We will almost always step in through just
+              a simple DM to check in on things. We will take relevant private messages into account when collecting
+              evidence on a player.</p>
+            <p>Please keep in mind, this does not mean staff are constantly moderating your DM’s in the way they do
+              chat. If you are experiencing an issue in DM’s and need help, please reach out to a member of staff.<br>
+              Altitude staff are <span style="font-family: 'opensans-bold', sans-serif;">not</span> trained mental
+              health professionals, and we are not qualified to counsel through suicide and self harm, but we value our
+              community members deeply and will do our best to give you some official resources that you can use.</p>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Player Data (IPs and logs)</h2>
+            <p>All staff members have access to your IP through /whois and /iphist. They will never use this information
+              outside of moderation, and it will never be shared outside of our staff team. Everytime you visit a place
+              on the internet, your IP is used to share data back to you. If we did not have access to your IP, you
+              would not be able to play on Altitude. The only times we will use your IP for staff purposes is to compare
+              your IP to an account we may think is an alt (this is also why we have a history of your previous IPs
+              you’ve logged in with).</p>
+            <p>Almost every single action taken on Altitude is tracked through some sort of log. We’ve created a very
+              detailed logging system to help ensure that we are always well informed when dealing with different staff
+              scenarios, and these logs help us tremendously. We do not share these logs outside of the staff team and
+              we will never use them for anything unrelated to staff. We will not list everything we log because it’s
+              not necessary and would be too long of a list, but just beware that basically anything you do on Altitude
+              is logged in some way. This is not only to protect Altitude, but you as well.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>CoreProtect</h2>
+            <p>Coreprotect is a log on the server that allows staff to see a variety of interactions on the server- From
+              block deletion to buttons pressed to commands issued. 90% of the time, staff use coreprotect when dealing
+              with issues related to blocks/entities, such as griefing and theft. Staff may use coreprotect in
+              conjunction with our database logs if a situation is bigger than coreprotect can support us with. As a
+              result, staff may take a bit of time when investigating a player issue due to the searching they must do
+              with coreprotect, especially if there is a lot of related data to search through!</p>
+            <p>Many servers use coreprotect as it is the most reliable source of this information, is well organized and
+              is extremely well documented. Coreprotect data is considered confidential, and staff will <span
+                style="font-family: 'opensans-bold', sans-serif;">not</span> release or share any coreprotect data with
+              players. The only exception to this rule is cases of theft under trust - where staff will share the name
+              of the thief with the claim owner for the purpose of them being removed from their claimlist and not being
+              re-trusted in the future.</p>
+            <p>Coreprotect also allows us to fix some serious problems using a tool called <span
+              style="font-family: 'opensans-bold', sans-serif;">Rollback</span>. Rollback allows staff to reverse the
+              interactions done with blocks/entities/containers within a selected period of time, and helps us fix
+              things quickly for you after griefing occurs!</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Head Staff</h2>
+            <p>Head staff (everyone above mod) have access to a lot of things depending on their exact job. The most
+              relevant things they have access to are: creative, worldedit, and invload. These powers can be used to
+              restore items we can't properly restore with coreprotect and remove/move/restore builds as needed.</p>
+          </div>
+        </div>
+      </section>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/fly</h3>
+          <p>Fly allows staff members to freely do their job without having to worry about being limited to just the
+            ground. There are a lot of instances where they need to be able to check out something high off the ground
+            or they just need to be able to travel more efficiently, and flying allows them to do this. We allow our
+            staff members to use fly for their own personal builds, sort of as a thank you and to help make up for the
+            time they lose through all of their moderation. We do not want any staff members to be openly flying around
+            in front of players, and they will never use it for anything other than building (looting, exploring, etc.
+            is not allowed).</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/god</h3>
+          <p>God mode allows staff members to work on something in game without being physically disturbed or harmed.
+            This is a tool that is only ever used for moderation purposes, to allow staff to focus on their job without
+            being interrupted by outside elements.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/ignoreclaims</h3>
+          <p>The ignore claims command is extremely helpful when a staff member is tracking down stolen items, checking
+            trustlists, helping players with other miscellaneous issues, etc. This command is very powerful and all of
+            our staff members acknowledge this, it will never be used outside of a staff related incident.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">CoreProtect</h3>
+          <p>Coreprotect is used to track and view information on block/item/etc placements and gives us the ability to
+            restore these actions. This is only used to fix and track damage done by stealing/griefing/etc.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/vanish</h3>
+          <p>Vanish is used to check on what players are doing. This allows us to ensure all players are following the
+            rules. We hide ourselves while doing so to avoid disrupting the player experience.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/patrol</h3>
+          <p>This command allows mods to teleport to each player one by one without missing anyone. This helps staff to
+            moderate all players equally and efficiently.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/invsee - /ec</h3>
+          <p>These commands allow the inventory/enderchest of a player to be viewed and edited. This is only used in
+            situations where a player breaks a rule by taking items from someone else and refuses to return them.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/whois - /whowas</h3>
+          <p>Whois is a command that shows a lot of player information, namely IP, UUID, player balance, number of
+            homes, etc. Your IP is kept private and will never be used maliciously, and your UUID is public information.
+            This command will never be used for anything outside of moderating purposes. Whowas is a command that lists
+            all previous usernames of a specific player, as well as your UUID again. This information is public
+            information that can easily be accessed through a number of different websites.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/flag</h3>
+          <p>We use flags as an internal tool to inform other staff members of things a player has done, these are
+            usually in the form of short notes.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/alts - /iphist</h3>
+          <p>These commands can be used to show if a player has other players on the same ip as them. This is necessary
+            to make it harder to bypass punishments. Your ip history is kept private and will never be shared outside of
+            staff related incidents.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/spy</h3>
+          <p>All staff usually have /spy on, this allows them to see all conversations in DM's and party chat. This is
+            important to ensure people aren't using our server to harass players without staff being able to see and
+            respond to it.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/cuff</h3>
+          <p>This command is used when a player is being uncooperative or not listening to staff after being instructed
+            to do something. When a player is cuffed, they cannot move, they cannot teleport, etc., but they can still
+            chat or message players. This is mainly used in cases where a player is attempting to interfere with a staff
+            situation (Ex: theft). This command will only be used for moderation purposes.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/afklist</h3>
+          <p>This command lists everyone who has been marked as AFK by our plugin. It also notifies us if a player gets
+            marked as AFK. This is used to check if a player isn't going AFK near farms which might give them an
+            advantage over other players.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/heal - /feed</h3>
+          <p>These commands are only used during moderation to deal with unexpected situations where a player might need
+            to be healed. They are not used by any staff member while playing on the server.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/tp - /tphere - /spawn</h3>
+          <p>These commands are used to get a player away from a situation that requires staff intervention such as
+            attempted player killing or if they are in a place they aren't allowed to be in anymore. Tp can be used
+            while in vanish to check on a player or to easily and quickly get to a player who's asking for help.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px;">/cmi invlist</h3>
+          <p>This command is used to see all of a player's recent deaths. It allows us to see your death inventory, your
+            levels, the time of your death, location, cause, etc.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h3 style="padding-top: 15px; padding-bottom: 0 !important;">Ability to see emails during appeals, contact
+            forms & staff applications</h3>
+          <p style="font-size: 0.75em;">(Head-Staff only)</p>
+          <p>When you send in a ban appeal, a contact form, or a staff application, we will be given your email (if you
+            send in an anonymous contact form we cannot see your email). We will never use your email for anything
+            besides replying. Head-staff are the only staff members who are able to see your email.</p>
+        </div>
+      </div>
+    </section>
+  </main>
+</ng-container>

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

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

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "@header/header.component";
+
+@Component({
+  selector: 'app-staffpowers',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './staffpowers.component.html',
+  styleUrl: './staffpowers.component.scss'
+})
+export class StaffpowersComponent {
+
+}