Add new routes and improve theme and header responsiveness

Added routes for 'community', 'nicknames', and 'nickgenerator'. Enhanced theme switch positioning and responsive design for smaller screens. Moved header login button to a more consistent position and upgraded Angular Material to version 19.2.19 for better compatibility.
2025-07-06 21:33:14 +02:00
parent aef32a8982
commit 62f837914c
19 changed files with 51 additions and 27 deletions
@@ -0,0 +1,79 @@
+<ng-container>
+  <app-header [current_page]="'community'" height="460px" background_image="/public/img/backgrounds/community.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Community</h1>
+      <h2>Talented people who help Altitude in more than one way.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="customContainer">
+        <h2>Current Nitro Boosters</h2>
+      </div>
+    </section>
+    <section id="social" class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Social Media</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <p style="text-align: center;">We're currently not looking for more people to help manage our socials.</p>
+      </div>
+    </section>
+    <section id="crateTeam" class="darkmodeSection">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Crate Team</h2>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Event Leaders</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <p style="text-align: center;">We're currently not looking for more Event Leaders.</p>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Event Team</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <div style="flex-direction: column;">
+          <p style="text-align: center;">We occasionally open applications for the event team.</p>
+          <p style="text-align: center;">If you're interested in joining you simply need to keep an eye on the Discord
+            announcements.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">YouTubers & Streamers</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <div style="flex-direction: column;">
+          <p style="text-align: center;"><a style="cursor: pointer;" id="reqButton">Show Requirements...</a></p>
+        </div>
+      </div>
+      <div id="req" class="hide" style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <div style="flex-direction: column; justify-content: center; max-width: 800px;">
+          <p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Requirements:</span>
+          </p>
+          <p style="text-align: center;">You need to have at least one recent stream/video on Altitude which we can use
+            to gauge if your audience enjoys your content on Altitude.</p>
+          <br>
+          <p style="text-align: center;">Twitch: You need to be affiliate and get at least 5 viewers on average while
+            streaming on Altitude.</p>
+          <p style="text-align: center;">YouTube videos: You need at least 500 subs and have at least 200 views per
+            video within a week on average for Altitude content.</p>
+          <p style="text-align: center;">YouTube streamers: You need at least 500 subs and have at least 5 viewers on
+            average while streaming on Altitude.</p>
+          <br>
+          <p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Note:</span> Before
+            accepting or denying you we will watch your latest video/stream on Altitude (so keep your broadcasts public
+            on twitch).</p>
+        </div>
+      </div>
+    </section>
+  </main>
+</ng-container>
@@ -0,0 +1,12 @@
+.customContainer {
+  width: 80%;
+  max-width: 1020px;
+  margin: auto;
+  padding: 80px 0;
+  text-align: center;
+}
+
+.hide {
+  display: none !important;
+}
+
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommunityComponent } from './community.component';
+
+describe('CommunityComponent', () => {
+  let component: CommunityComponent;
+  let fixture: ComponentFixture<CommunityComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommunityComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommunityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "@header/header.component";
+
+@Component({
+  selector: 'app-community',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './community.component.html',
+  styleUrl: './community.component.scss'
+})
+export class CommunityComponent {
+
+}