Compare commits
No commits in common. "develop" and "1.0.0" have entirely different histories.
15
.github/pull_request_template.md
vendored
15
.github/pull_request_template.md
vendored
@ -1,15 +0,0 @@
|
||||
## Description
|
||||
<!-- Adition information & context -->
|
||||
...
|
||||
|
||||
## Issues
|
||||
<!-- Issues this PR will address -->
|
||||
- closes #___
|
||||
- owner/repo#___
|
||||
|
||||
## Checklist
|
||||
<!-- Compelte after creating PR -->
|
||||
- [ ] Linked issues
|
||||
- [ ] Reviewed changes
|
||||
- [ ] Updated comments/documentation
|
||||
|
||||
54
.github/workflows/website.yaml
vendored
54
.github/workflows/website.yaml
vendored
@ -1,54 +0,0 @@
|
||||
name: Build Website
|
||||
run-name: Build Website
|
||||
|
||||
on:
|
||||
push:
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: Build NPM Project
|
||||
runs-on: ubuntu-latest
|
||||
container: node
|
||||
steps:
|
||||
- name: Clone Repository
|
||||
uses: ztimson/actions/clone@develop
|
||||
|
||||
- name: Install Dependencies
|
||||
run: npm i
|
||||
|
||||
- name: Build Project
|
||||
run: npm run build
|
||||
|
||||
- name: Upload Artifacts
|
||||
if: ${{inputs.artifacts}} != "false"
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: website
|
||||
path: dist
|
||||
retention-days: 7
|
||||
|
||||
tag:
|
||||
name: Tag Version
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
container: node
|
||||
steps:
|
||||
- name: Clone Repository
|
||||
uses: ztimson/actions/clone@develop
|
||||
|
||||
- name: Get Version Number
|
||||
run: echo "VERSION=$(cat package.json | grep version | grep -Eo ':.+' | grep -Eo '[[:alnum:]\.\/\-]+')" >> $GITHUB_ENV
|
||||
|
||||
- name: Tag Version
|
||||
uses: ztimson/actions/tag@develop
|
||||
with:
|
||||
tag: ${{env.VERSION}}
|
||||
|
||||
publish:
|
||||
name: Build & Push Dockerfile
|
||||
needs: build
|
||||
uses: ztimson/actions/.github/workflows/docker.yaml@develop
|
||||
with:
|
||||
name: ztimson/291st
|
||||
repository: ${{github.server_url}}/${{github.repository}}.git
|
||||
pass: ${{secrets.DEPLOY_TOKEN}}
|
||||
82
.gitlab/.gitlab-ci.yml
Normal file
82
.gitlab/.gitlab-ci.yml
Normal file
@ -0,0 +1,82 @@
|
||||
image: node:16
|
||||
|
||||
stages:
|
||||
- build
|
||||
- test
|
||||
- deploy
|
||||
|
||||
npm:
|
||||
stage: build
|
||||
cache:
|
||||
- key:
|
||||
files:
|
||||
- package-lock.json
|
||||
paths:
|
||||
- node_modules
|
||||
policy: pull-push
|
||||
- key: $CI_PIPELINE_ID
|
||||
paths:
|
||||
- dist
|
||||
policy: push
|
||||
script:
|
||||
- npm install
|
||||
- npm run build
|
||||
artifacts:
|
||||
paths:
|
||||
- dist
|
||||
expire_in: 1 week
|
||||
rules:
|
||||
- if: $CI_COMMIT_BRANCH
|
||||
|
||||
audit:
|
||||
stage: test
|
||||
cache:
|
||||
- key:
|
||||
files:
|
||||
- package-lock.json
|
||||
paths:
|
||||
- node_modules
|
||||
policy: pull
|
||||
script:
|
||||
- echo "vulnerabilities_high $(npm audit | grep -oE '[0-9]+ high' | grep -oE '[0-9]+' || echo 0)" > metrics.txt
|
||||
- echo "vulnerabilities_medium $(npm audit | grep -oE '[0-9]+ moderate' | grep -oE '[0-9]+' || echo 0)" >> metrics.txt
|
||||
- echo "vulnerabilities_low $(npm audit | grep -oE '[0-9]+ low' | grep -oE '[0-9]+' || echo 0)" >> metrics.txt
|
||||
artifacts:
|
||||
reports:
|
||||
metrics: metrics.txt
|
||||
rules:
|
||||
- if: $CI_COMMIT_BRANCH
|
||||
|
||||
registry:
|
||||
stage: deploy
|
||||
image: docker
|
||||
cache:
|
||||
- key: $CI_PIPELINE_ID
|
||||
paths:
|
||||
- dist
|
||||
policy: pull
|
||||
before_script:
|
||||
- docker login -u $CI_REGISTRY_USER -p $CI_JOB_TOKEN $CI_REGISTRY
|
||||
script:
|
||||
- TAG=$([ "$CI_COMMIT_BRANCH" = "$CI_DEFAULT_BRANCH" ] && echo "latest" || echo "$CI_COMMIT_BRANCH" | sed -E "s/[_/]/-/g")
|
||||
- docker build --no-cache -t "$CI_REGISTRY_IMAGE:$TAG" .
|
||||
- docker push "$CI_REGISTRY_IMAGE:$TAG"
|
||||
rules:
|
||||
- if: $CI_COMMIT_BRANCH
|
||||
allow_failure: true
|
||||
|
||||
tag:
|
||||
stage: deploy
|
||||
image:
|
||||
name: alpine/git
|
||||
entrypoint: [ "" ]
|
||||
cache: [ ]
|
||||
before_script:
|
||||
- git remote set-url origin https://ReleaseBot:$DEPLOY_TOKEN@gitlab.zakscode.com/$CI_PROJECT_PATH.git
|
||||
script:
|
||||
- VERSION=$(cat package.json | grep version | grep -Eo ':.+' | grep -Eo '[[:alnum:]\.\/\-]+')
|
||||
- git tag -f $VERSION $CI_COMMIT_SHA
|
||||
- git push -f origin $VERSION
|
||||
rules:
|
||||
- if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'
|
||||
allow_failure: true
|
||||
@ -1 +0,0 @@
|
||||
* @ztimson
|
||||
@ -17,7 +17,7 @@ COPY . .
|
||||
RUN if [ ! -d "dist" ] && [ ! -d "node_modules" ]; then npm install; fi
|
||||
|
||||
# Build
|
||||
RUN BUILD_MODE=$([ "$NODE_ENV" = "prod" ] && echo "prod" || echo "dev") && \
|
||||
RUN BUILD_MODE=$([ "$NODE_ENV" = "prod" ] && echo "dynmaic-prod" || echo "dynamic") && \
|
||||
if [ ! -d "dist" ]; then npm run "build:$BUILD_MODE"; fi
|
||||
|
||||
# Use Nginx to serve
|
||||
|
||||
11
LICENSE
11
LICENSE
@ -1,11 +0,0 @@
|
||||
Copyright (c) 2023 Zakary Timson
|
||||
|
||||
All Rights Reserved.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
116
README.md
116
README.md
@ -1,98 +1,46 @@
|
||||
<!-- Header -->
|
||||
<div id="top" align="center">
|
||||
<br />
|
||||
# 291st JTF
|
||||
[Clan page](https://291st.ca) for the 291st Joint Task Force
|
||||
|
||||
<!-- Logo -->
|
||||
<a href="/src/assets/img/header.png">
|
||||
<img src="./src/assets/img/logo.png" alt="Logo" width="200" height="200">
|
||||
</a>
|
||||
|
||||
<!-- Title -->
|
||||
### 291st Joint Task Force
|
||||
|
||||
<!-- Description -->
|
||||
Clan website for the _291st Joint Task Force_
|
||||
|
||||
<!-- Repo badges -->
|
||||
[](https://git.zakscode.com/ztimson/291st/tags)
|
||||
[](https://git.zakscode.com/ztimson/291st/pulls)
|
||||
[](https://git.zakscode.com/ztimson/291st/issues)
|
||||
|
||||
<!-- Links -->
|
||||
|
||||
---
|
||||
<div>
|
||||
<a href="https://git.zakscode.com/ztimson/291st/releases" target="_blank">Release Notes</a>
|
||||
• <a href="https://git.zakscode.com/ztimson/291st/issues/new?template=.github%2fissue_template%2fbug.md" target="_blank">Report a Bug</a>
|
||||
• <a href="https://git.zakscode.com/ztimson/291st/issues/new?template=.github%2fissue_template%2fenhancement.md" target="_blank">Request a Feature</a>
|
||||
</div>
|
||||
|
||||
---
|
||||
</div>
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.2.
|
||||
|
||||
## Table of Contents
|
||||
- [291st](#top)
|
||||
- [About](#about)
|
||||
- [Demo](https://291st.ca)
|
||||
- [Built With](#built-with)
|
||||
- [Setup](#setup)
|
||||
- [Production](#production)
|
||||
- [Development](#development)
|
||||
- [License](#license)
|
||||
[[_TOC_]]
|
||||
|
||||
## About
|
||||
|
||||
This website was created for the _291st Joint Task Force_ to act as a simple landing page for their domain.
|
||||
|
||||
It includes a list of managed servers & the _Discord_ server list.
|
||||
|
||||
The technology stack consists of a front-end built with _Angular_ & is deployed using _Docker_.
|
||||
|
||||
### Demo
|
||||
Website: https://291st.ca
|
||||
|
||||
### Built With
|
||||
[](https://angular.io/)
|
||||
[](https://getbootstrap.com)
|
||||
[](https://docker.com/)
|
||||
[](https://nodejs.org/)
|
||||
[](https://typescriptlang.org/)
|
||||
## Prerequisites
|
||||
- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
|
||||
- [NodeJS 16](https://nodejs.org/en/)
|
||||
- _[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>
|
||||
<h3 id="production" style="display: inline">
|
||||
Production
|
||||
</h3>
|
||||
</summary>
|
||||
<summary>NPM</summary>
|
||||
|
||||
#### Prerequisites
|
||||
- [Docker](https://docs.docker.com/install/)
|
||||
|
||||
#### Instructions
|
||||
1. Run the docker image: `docker run -p 80:80 git.zakscode.com/ztimson/291st:latest`
|
||||
2. Open [http://localhost](http://localhost)
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
<h3 id="development" style="display: inline">
|
||||
Development
|
||||
</h3>
|
||||
</summary>
|
||||
|
||||
#### Prerequisites
|
||||
- [Node.js](https://nodejs.org/en/download)
|
||||
|
||||
#### Instructions
|
||||
1. Install the dependencies: `npm install`
|
||||
2. Start the Angular server: `npm run start`
|
||||
3. Open [http://localhost:4200](http://localhost:4200)
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Docker</summary>
|
||||
|
||||
1. Build the docker image: `docker build -t 291st:<TAG> .`
|
||||
2. Start the new image: `docker run -p 4200:80 291st:<TAG>`
|
||||
|
||||
</details>
|
||||
|
||||
## License
|
||||
Copyright © 2023 Zakary Timson | All Rights Reserved
|
||||
The website should now be accessible on [http://localhost:4200](http://localhost:4200)
|
||||
|
||||
See the [license](./LICENSE) for more information.
|
||||
## Cheatsheet
|
||||
```bash
|
||||
# Start Angular server
|
||||
npm run start
|
||||
|
||||
# Build production
|
||||
npm run build:prod
|
||||
|
||||
# Build docker image
|
||||
docker build -t 291st:<TAG>
|
||||
|
||||
# Run docker image
|
||||
docker run -p 4200:80 291st:<TAG>
|
||||
```
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.json",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/assets"
|
||||
|
||||
@ -25,7 +25,7 @@ http {
|
||||
autoindex off;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
try_files $uri$args $uri$args/ /index.html;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
10
package.json
10
package.json
@ -1,11 +1,13 @@
|
||||
{
|
||||
"name": "291st",
|
||||
"version": "2.0.0",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"start": "npx ng serve",
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "npm run build:dev",
|
||||
"build:dev": "npx ng build --configuration development",
|
||||
"build:prod": "npx ng build --configuration production"
|
||||
"build:dev": "ng build --configuration development",
|
||||
"build:prod": "ng build --configuration production",
|
||||
"watch": "ng build --watch --configuration development"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
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 {ServersComponent} from './components/servers/servers.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';
|
||||
@ -11,10 +10,9 @@ import {HomeComponent} from './views/home/home.component';
|
||||
|
||||
export const APP_COMPONENTS = [
|
||||
AppComponent,
|
||||
DiscordComponent,
|
||||
FooterComponent,
|
||||
HomeComponent,
|
||||
ServersComponent,
|
||||
FooterComponent,
|
||||
NavbarComponent
|
||||
]
|
||||
|
||||
@NgModule({
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
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 { }
|
||||
@ -1,7 +1,7 @@
|
||||
<footer>
|
||||
<div class="py-2 text-center">
|
||||
<p class="copywright m-0">
|
||||
Copyright © 291st JTF 2023 | All Rights Reserved<br>
|
||||
Copyright © 291st JTF 2022 | All Rights Reserved<br>
|
||||
Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
16
src/app/components/navbar/navbar.component.html
Normal file
16
src/app/components/navbar/navbar.component.html
Normal file
@ -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>
|
||||
58
src/app/components/navbar/navbar.component.scss
Normal file
58
src/app/components/navbar/navbar.component.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/app/components/navbar/navbar.component.ts
Normal file
34
src/app/components/navbar/navbar.component.ts
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
<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>
|
||||
@ -1,48 +0,0 @@
|
||||
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'
|
||||
}]
|
||||
}
|
||||
@ -1,2 +1,5 @@
|
||||
<router-outlet></router-outlet>
|
||||
<app-footer></app-footer>
|
||||
<app-navbar [hamburger]="mobile"></app-navbar>
|
||||
<div class="fill app-container">
|
||||
<router-outlet></router-outlet>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,12 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatListModule} from '@angular/material/list';
|
||||
import {MatTabsModule} from '@angular/material/tabs';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {MatToolbarModule} from '@angular/material/toolbar';
|
||||
|
||||
export const MATERIAL_MODULES = [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatListModule,
|
||||
MatTabsModule,
|
||||
MatTooltipModule,
|
||||
MatToolbarModule
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
||||
@ -1,38 +1,9 @@
|
||||
<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;">
|
||||
<img src="/assets/img/logo.png" width="auto" height="60%" style="max-width: 60%">
|
||||
</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>
|
||||
<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>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<div class="flex-grow-1 p-3" style="flex-basis: 0">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,23 +1,3 @@
|
||||
.content {
|
||||
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%;
|
||||
.background {
|
||||
background: url("/assets/img/291st-background.png") no-repeat center center;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 MiB |
@ -4,16 +4,17 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<meta name="description" content="291st Joint Task Force">
|
||||
<!-- 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">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Saira+Stencil+One" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body class="mat-typography" style="background: #000">
|
||||
|
||||
@ -2,18 +2,18 @@
|
||||
@include mat.core();
|
||||
|
||||
// hue. Available color palettes: https://material.io/design/color/
|
||||
$JTF-primary: mat.define-palette(mat.$red-palette, 900);
|
||||
$JTF-accent: mat.define-palette(mat.$indigo-palette, 900);
|
||||
$JTF-warn: mat.define-palette(mat.$orange-palette, 500);
|
||||
$JTF-theme: mat.define-dark-theme((
|
||||
$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: $JTF-primary,
|
||||
accent: $JTF-accent,
|
||||
warn: $JTF-warn,
|
||||
primary: $LegioXXX-primary,
|
||||
accent: $LegioXXX-accent,
|
||||
warn: $LegioXXX-warn,
|
||||
)
|
||||
));
|
||||
|
||||
@include mat.all-component-themes($JTF-theme);
|
||||
@include mat.all-component-themes($LegioXXX-theme);
|
||||
|
||||
@import '~bootstrap/dist/css/bootstrap-utilities.min.css';
|
||||
|
||||
@ -39,19 +39,16 @@ body {
|
||||
color: #fff;
|
||||
font-family: Roboto, sans-serif;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
text-decoration: none;
|
||||
color: #3c0000;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
a:hover, a:visited:hover { color: #550000; }
|
||||
a:hover, a:visited:hover { color: #b10000; }
|
||||
|
||||
.fill {
|
||||
height: 0;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.stencil {
|
||||
font-family: Saira Stencil One !important;
|
||||
}
|
||||
|
||||
15
tsconfig.app.json
Normal file
15
tsconfig.app.json
Normal file
@ -0,0 +1,15 @@
|
||||
/* 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"
|
||||
]
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./out-tsc/app",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
@ -16,7 +17,6 @@
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"types": [],
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
@ -28,12 +28,5 @@
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user