Updated

src/app/app.module.ts

@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {AppRouting} from './app.routing';
+import {FooterComponent} from './components/footer/footer.component';
+import {NavbarComponent} from './components/navbar/navbar.component';
+import {AppComponent} from './containers/app/app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MaterialModule} from './material.module';
+import {HomeComponent} from './views/home/home.component';
+
+export const APP_COMPONENTS = [
+	AppComponent,
+	HomeComponent,
+	FooterComponent,
+	NavbarComponent
+]
+
+@NgModule({
+  declarations: APP_COMPONENTS,
+  imports: [
+	  BrowserModule,
+	  AppRouting,
+	  BrowserAnimationsModule,
+	  MaterialModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/app.routing.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {HomeComponent} from './views/home/home.component';
+
+const routes: Routes = [
+	{path: '', pathMatch: 'full', component: HomeComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRouting { }

src/app/components/footer/footer.component.html

@@ -0,0 +1,8 @@
+<footer>
+	<div class="py-2 text-center">
+		<p class="copywright m-0">
+			Copyright &copy; 291st JTF 2022 | All Rights Reserved<br>
+			Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
+		</p>
+	</div>
+</footer>

src/app/components/footer/footer.component.scss

@@ -0,0 +1,4 @@
+.copywright {
+	a, a:visited { color: #b10000; }
+	a:hover, a:visited:hover { color: #cc0000; }
+}

src/app/components/footer/footer.component.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'app-footer',
+	templateUrl: './footer.component.html',
+	styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent { }

src/app/components/navbar/navbar.component.html

@@ -0,0 +1,16 @@
+<mat-toolbar>
+	<mat-toolbar-row>
+		<div>
+			<a class="navbar-brand d-flex align-items-center" routerLink="/">
+				<div class="px-2">291st Joint Task Force</div>
+			</a>
+		</div>
+		<div class="flex-grow-1"></div>
+		<div *ngIf="!hamburger">
+		</div>
+		<button *ngIf="hamburger" mat-icon-button class="mr-3">
+			<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon>
+		</button>
+	</mat-toolbar-row>
+</mat-toolbar>
+<div class="navbar-spacing"><!-- Spacing --></div>

src/app/components/navbar/navbar.component.scss

@@ -0,0 +1,58 @@
+.navbar-spacing {
+	height: 64px;
+	width: 100%;
+}
+
+::ng-deep mat-toolbar {
+	background: #000 !important;
+	border-bottom: #fff solid 1px;
+	height: 64px;
+	position: fixed;
+	top: 0;
+	z-index: 100;
+
+	.mat-toolbar-row {
+		height: 100%;
+	}
+
+	.navbar-brand {
+		color: #fff;
+		//font-weight: lighter;
+
+		&:hover img {
+			filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg);
+		}
+	}
+
+	.navbar-button {
+		//color: rgba(255, 255, 255, 0.55);
+		font-weight: normal;
+		padding: 0 8px 0 8px;
+
+		//&:hover {
+		//	color: rgba(255, 255, 255, 0.75);
+		//}
+	}
+}
+
+::ng-deep .mat-menu-content {
+	background: #000;
+	border: #fff solid 1px;
+	padding: 0 !important;
+	border-radius: 0.25rem;
+
+	mat-divider {
+		border-color: white;
+		margin-top: 0.2rem;
+		padding-bottom: 0.1rem;
+	}
+
+	button {
+		height: 36px;
+		line-height: 36px;
+
+		&:hover {
+			background: rgba(255, 255, 255, 0.15) !important;
+		}
+	}
+}

src/app/components/navbar/navbar.component.ts

@@ -0,0 +1,34 @@
+import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Subscription} from 'rxjs';
+
+@Component({
+	selector: 'app-navbar',
+	templateUrl: './navbar.component.html',
+	styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent implements AfterViewInit, OnDestroy {
+	private sub!: Subscription;
+
+	@Input() hamburger = true;
+
+	@Output() hamburgerClick = new EventEmitter<void>();
+
+	constructor(private route: ActivatedRoute) { }
+
+	ngAfterViewInit() {
+		this.sub = this.route.fragment.subscribe(frag => {
+			if(frag) this.scroll(frag);
+		});
+	}
+
+	ngOnDestroy(): void {
+		if(this.sub) this.sub.unsubscribe();
+	}
+
+	scroll(id: string) {
+		const el = document.getElementById(id);
+		if(el) el.scrollIntoView({behavior: 'smooth'});
+		else setTimeout(() => this.scroll(id), 500);
+	}
+}

src/app/containers/app/app.component.html

@@ -0,0 +1,5 @@
+<app-navbar [hamburger]="mobile"></app-navbar>
+<div class="fill app-container">
+	<router-outlet></router-outlet>
+	<app-footer></app-footer>
+</div>

src/app/containers/app/app.component.scss

@@ -0,0 +1,5 @@
+.app-container {
+	overflow-x: hidden;
+	overflow-y: auto;
+	scroll-behavior: smooth;
+}

src/app/containers/app/app.component.ts

@@ -0,0 +1,23 @@
+import {BreakpointObserver} from '@angular/cdk/layout';
+import { Component } from '@angular/core';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+import {filter} from 'rxjs';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+	mobile = false;
+	open = false;
+
+	constructor(private router: Router, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
+		router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => this.open = false);
+		breakpointObserver.observe(['(max-width: 750px)']).subscribe(result => {
+			this.mobile = result.matches;
+			this.open = !this.mobile;
+		})
+	}
+
+}

src/app/material.module.ts

@@ -0,0 +1,16 @@
+import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatToolbarModule} from '@angular/material/toolbar';
+
+export const MATERIAL_MODULES = [
+	MatButtonModule,
+	MatIconModule,
+	MatToolbarModule
+];
+
+@NgModule({
+	imports: MATERIAL_MODULES,
+	exports: MATERIAL_MODULES,
+})
+export class MaterialModule {}

src/app/views/home/home.component.html

@@ -0,0 +1,9 @@
+<section class="fill background d-flex flex-column flex-md-row">
+	<div class="flex-grow-1 p-3" style="flex-basis: 0">
+		<iframe src="https://discordapp.com/widget?id=399625240927404033&theme=dark" width="100%" height="100%" allowtransparency="true" frameborder="0" style="min-height: 500px" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
+	</div>
+	<div class="flex-grow-1 p-3" style="flex-basis: 0">
+	</div>
+	<div class="flex-grow-1 p-3" style="flex-basis: 0">
+	</div>
+</section>

src/app/views/home/home.component.scss

@@ -0,0 +1,3 @@
+.background {
+	background: url("/assets/img/291st-background.png") no-repeat center center;
+}

src/app/views/home/home.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'app-home',
+	templateUrl: './home.component.html',
+	styleUrls: ['./home.component.scss']
+})
+export class HomeComponent {
+
+}

src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false
+};

src/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!-- TODO: Description-->
+	<meta name="description" content="">
+	<meta name="author" content="Zak Timson">
+
+	<title>291st JTF</title>
+
+	<link href="assets/img/logo.png" rel="icon" type="image/png">
+	<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+
+<body class="mat-typography" style="background: #000">
+	<app-root></app-root>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

src/polyfills.ts

@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

src/styles.scss

@@ -0,0 +1,54 @@
+@use '@angular/material' as mat;
+@include mat.core();
+
+// hue. Available color palettes: https://material.io/design/color/
+$LegioXXX-primary: mat.define-palette(mat.$red-palette, 900);
+$LegioXXX-accent: mat.define-palette(mat.$indigo-palette, 900);
+$LegioXXX-warn: mat.define-palette(mat.$orange-palette, 500);
+$LegioXXX-theme: mat.define-dark-theme((
+  color: (
+    primary: $LegioXXX-primary,
+    accent: $LegioXXX-accent,
+    warn: $LegioXXX-warn,
+  )
+));
+
+@include mat.all-component-themes($LegioXXX-theme);
+
+@import '~bootstrap/dist/css/bootstrap-utilities.min.css';
+
+::-webkit-scrollbar-track {
+	background: rgba(0, 0, 0, 0);
+}
+
+::-webkit-scrollbar {
+	width: 10px;
+	background: rgba(0, 0, 0, 0);
+}
+
+::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.6);
+	&:hover { background: rgba(255, 255, 255, 0.8); }
+}
+
+html, body {
+	height: 100%;
+}
+body {
+	background: #000;
+	color: #fff;
+	font-family: Roboto, sans-serif;
+	margin: 0;
+	overflow: hidden;
+}
+
+a, a:visited {
+	text-decoration: none;
+	color: rgba(255, 255, 255, 0.6);
+}
+a:hover, a:visited:hover { color: #b10000; }
+
+.fill {
+	height: 0;
+	min-height: calc(100vh - 64px);
+}