Updated website look

README.md

@@ -1,27 +1,40 @@
 # 291st JTF
-[Clan page](https://291st.ca) for the 291st Joint Task Force
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.2.
+---
+
+> "Putting the Damned to Rest"
+
+
+![Skull Sword and Globe Emblem](./src/assets/img/logo.png)
+
+This is the clan [website](https://291st.ca) for the 291st Joint Task Force.
+
+This project was generated using Angular 14.
 
 ## Table of Contents
-[[_TOC_]]
+<!-- TOC -->
+* [291st JTF](#291st-jtf)
+  * [Table of Contents](#table-of-contents)
+  * [Prerequisites](#prerequisites)
+  * [Setup](#setup)
+  * [Cheatsheet](#cheatsheet)
+<!-- TOC -->
 
 ## Prerequisites
-- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+- [NodeJS](https://nodejs.org/en/)
-- [NodeJS 16](https://nodejs.org/en/)
+- [Docker](https://docs.docker.com/install/)
-- _[Docker](https://docs.docker.com/install/) (Optional)_
 
 ## Setup
 The project can either be run using NPM or Docker. NPM is recommended for development.
 <details>
-<summary>NPM</summary>
+<summary>NPM (Development)</summary>
 
 1. Install the dependencies: `npm install`
 2. Start the Angular server: `npm run start`
 </details>
 
 <details>
-<summary>Docker</summary>
+<summary>Docker (Production)</summary>
 
 1. Build the docker image: `docker build -t 291st:<TAG> .`
 2. Start the new image: `docker run -p 4200:80 291st:<TAG>`

angular.json

@@ -21,7 +21,7 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
+            "tsConfig": "tsconfig.json",
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/assets"

src/app/app.module.ts

@@ -1,8 +1,9 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {AppRouting} from './app.routing';
+import {DiscordComponent} from './components/discord/discord.component';
 import {FooterComponent} from './components/footer/footer.component';
-import {NavbarComponent} from './components/navbar/navbar.component';
+import {ServersComponent} from './components/servers/servers.component';
 import {AppComponent} from './containers/app/app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MaterialModule} from './material.module';
@@ -10,9 +11,10 @@ import {HomeComponent} from './views/home/home.component';
 
 export const APP_COMPONENTS = [
 	AppComponent,
-	HomeComponent,
+	DiscordComponent,
 	FooterComponent,
-	NavbarComponent
+	HomeComponent,
+	ServersComponent,
 ]
 
 @NgModule({

src/app/components/discord/discord.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'app-discord',
+	template: `<iframe src="https://discordapp.com/widget?id=399625240927404033&theme=dark" width="100%" height="98%" allowtransparency="true" frameborder="0" style="min-height: 400px" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>`
+})
+export class DiscordComponent { }

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

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

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

@@ -1,16 +0,0 @@
-<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

@@ -1,58 +0,0 @@
-.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

@@ -1,34 +0,0 @@
-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/components/servers/servers.component.html

@@ -0,0 +1,21 @@
+<div *ngFor="let s of servers">
+	<div class="d-flex p-2">
+		<div class="flex-shrink-1 align-self-center">
+			<img *ngIf="s.icon" [src]="s.icon">
+			<mat-icon *ngIf="!s.icon">dns</mat-icon>
+		</div>
+		<div class="d-flex flex-column flex-grow-1">
+			<div mat-line>{{s.name}}</div>
+			<div mat-line class="text-muted">{{s.url}}</div>
+			<div *ngIf="s.mods" mat-line><a [href]="s.mods.link">{{s.mods.num}} mods</a></div>
+		</div>
+		<div class="d-flex flex-shrink-1 justify-content-end">
+			<mat-icon [style.visibility]="s.private ? 'visible' : 'hidden'" class="text-muted" matTooltip="Private" style="font-size: 14px">lock</mat-icon>
+			<div style="width: 12px; height: 12px; border-radius: 6px;"
+			     [style.background-color]="s.online ? '#00FF00' : '#FF0000'"
+			     [matTooltip]="s.online ? 'Online' : 'Offline'">
+			</div>
+		</div>
+	</div>
+	<mat-divider></mat-divider>
+</div>

src/app/components/servers/servers.component.ts

@@ -0,0 +1,48 @@
+import {Component} from '@angular/core';
+
+type Server = {
+	icon?: string;
+	name: string;
+	private: boolean;
+	online: boolean;
+	mods?: {num: number, link: string};
+	url: string;
+}
+
+@Component({
+	selector: 'app-servers',
+	templateUrl: './servers.component.html'
+})
+export class ServersComponent {
+	servers: Server[] = [{
+		name: 'Arma 3',
+		private: false,
+		online: false,
+		url: '291st.ca:2302'
+	}, {
+		name: 'Astroneer',
+		private: true,
+		online: false,
+		url: '291st.ca:7777'
+	}, {
+		name: 'Minecraft (Bedrock)',
+		private: true,
+		online: true,
+		url: '291st.ca:19132'
+	}, {
+		name: 'Minecraft (Java)',
+		private: true,
+		online: true,
+		url: '291st.ca:25565'
+	}, {
+		name: 'Valheim',
+		private: true,
+		online: true,
+		url: '291st.ca:2456'
+	}, {
+		name: 'V Rising',
+		private: true,
+		online: false,
+		url: '291st.ca:27015'
+	}]
+}

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

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

src/app/material.module.ts

@@ -1,12 +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';
+import {MatListModule} from '@angular/material/list';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 export const MATERIAL_MODULES = [
 	MatButtonModule,
 	MatIconModule,
-	MatToolbarModule
+	MatListModule,
+	MatTabsModule,
+	MatTooltipModule,
 ];
 
 @NgModule({

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

@@ -1,9 +1,38 @@
-<section class="fill background d-flex flex-column flex-md-row">
+<div class="h-100 d-none d-sm-flex align-items-center justify-content-center" style="background: #000 url('/assets/img/helicopter.gif'); background-size: cover;">
-	<div class="flex-grow-1 p-3" style="flex-basis: 0">
+	<img src="/assets/img/logo.png" width="auto" height="60%" style="max-width: 60%">
-		<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="d-flex d-sm-none align-items-center justify-content-center" style="background: #000 url('/assets/img/helicopter.gif'); background-size: cover;">
+	<img src="/assets/img/logo.png" width="auto" height="60%" style="max-width: 60%">
+</div>
+
+<div style="position: absolute; top: 2rem; left: 2rem;">
+	<h1 class="mb-1 stencil" style="font-size: 3rem">
+		291st
+		<span class="d-none d-sm-inline">Joint Task Force</span>
+		<span class="d-inline d-sm-none">JTF</span>
+	</h1>
+	<h2 class="d-none d-sm-block stencil">"Putting the Damned to Rest"</h2>
+</div>
+
+<div class="content">
+	<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" class="h-100" style="min-height: 400px">
+		<mat-tab class="h-100">
+			<ng-template mat-tab-label>
+				<mat-icon class="me-2">discord</mat-icon>
+				Discord
+			</ng-template>
+			<app-discord></app-discord>
+		</mat-tab>
+		<mat-tab>
+			<ng-template mat-tab-label>
+				<mat-icon class="me-2">dns</mat-icon>
+				Servers
+			</ng-template>
+			<div class="d-flex justify-content-center">
+				<div class="pt-4" style="width: 300px">
+					<app-servers></app-servers>
 				</div>
-	<div class="flex-grow-1 p-3" style="flex-basis: 0">
 			</div>
-	<div class="flex-grow-1 p-3" style="flex-basis: 0">
+		</mat-tab>
-	</div>
+	</mat-tab-group>
-</section>
+</div>

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

@@ -1,3 +1,23 @@
-.background {
+.content {
-	background: url("/assets/img/291st-background.png") no-repeat center center;
+	text-align: center;
+	background-color: #202225;
+	position: relative;
+	display: block;
+	width: 100%;
+}
+
+@media(orientation: landscape) {
+	.content {
+		position: fixed;
+		right: 0;
+		top: 0;
+		width: 30vw;
+		height: calc(100% - 2rem);
+		margin: 1rem;
+		box-shadow: 6px 6px 5px black;
+	}
+}
+
+::ng-deep .mat-tab-body-wrapper {
+	height: 100%;
 }

src/index.html

@@ -4,17 +4,16 @@
 <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="description" content="291st Joint Task Force">
 	<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">
+	<link href="https://fonts.googleapis.com/icon?family=Saira+Stencil+One" rel="stylesheet">
 </head>
 
 <body class="mat-typography" style="background: #000">

src/styles.scss

@@ -2,18 +2,18 @@
 @include mat.core();
 
 // hue. Available color palettes: https://material.io/design/color/
-$LegioXXX-primary: mat.define-palette(mat.$red-palette, 900);
+$JTF-primary: mat.define-palette(mat.$red-palette, 900);
-$LegioXXX-accent: mat.define-palette(mat.$indigo-palette, 900);
+$JTF-accent: mat.define-palette(mat.$indigo-palette, 900);
-$LegioXXX-warn: mat.define-palette(mat.$orange-palette, 500);
+$JTF-warn: mat.define-palette(mat.$orange-palette, 500);
-$LegioXXX-theme: mat.define-dark-theme((
+$JTF-theme: mat.define-dark-theme((
   color: (
-    primary: $LegioXXX-primary,
+    primary: $JTF-primary,
-    accent: $LegioXXX-accent,
+    accent: $JTF-accent,
-    warn: $LegioXXX-warn,
+    warn: $JTF-warn,
   )
 ));
 
-@include mat.all-component-themes($LegioXXX-theme);
+@include mat.all-component-themes($JTF-theme);
 
 @import '~bootstrap/dist/css/bootstrap-utilities.min.css';
 
@@ -39,16 +39,19 @@ body {
 	color: #fff;
 	font-family: Roboto, sans-serif;
 	margin: 0;
-	overflow: hidden;
 }
 
 a, a:visited {
 	text-decoration: none;
-	color: rgba(255, 255, 255, 0.6);
+	color: #3c0000;
 }
-a:hover, a:visited:hover { color: #b10000; }
+a:hover, a:visited:hover { color: #550000; }
 
 .fill {
 	height: 0;
 	min-height: calc(100vh - 64px);
 }
+
+.stencil {
+	font-family: Saira Stencil One !important;
+}

tsconfig.app.json

@@ -1,15 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}

tsconfig.json

@@ -1,9 +1,8 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
+    "outDir": "./out-tsc/app",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
@@ -17,6 +16,7 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2020",
+	"types": [],
     "module": "es2020",
     "lib": [
       "es2020",
@@ -28,5 +28,12 @@
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
 }