Updated website

.browserslistrc

@@ -1,18 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
-not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.editorconfig

@@ -3,8 +3,8 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
+indent_style = tab
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

.github/workflows/website.yaml

@@ -0,0 +1,54 @@
+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/pelican-landing
+            repository: ${{github.server_url}}/${{github.repository}}.git
+            pass: ${{secrets.DEPLOY_TOKEN}}

.gitignore

@@ -6,6 +6,7 @@
 /out-tsc
 # Only exists if Bazel was run
 /bazel-out
+.angular
 
 # dependencies
 /node_modules

Dockerfile

@@ -0,0 +1,22 @@
+FROM node as build
+
+# Variables
+ARG NODE_ENV=prod
+ARG NODE_OPTIONS="--max_old_space_size=4096"
+ENV NG_CLI_ANALYTICS=ci \
+    NODE_ENV=${NODE_ENV} \
+    NODE_OPTIONS=${NODE_OPTIONS}
+
+# Setup
+WORKDIR /app
+COPY . .
+
+# Install & build
+RUN if [ ! -d "dist" ]; then npm ci && npm run build; fi
+
+# Use Nginx to serve
+FROM nginx:1.20-alpine
+COPY --from=build /app/dist/browser /usr/share/nginx/html
+COPY docker/robots.txt /usr/share/nginx/html/robots.txt
+COPY docker/nginx.conf /etc/nginx/nginx.conf
+EXPOSE 80

LICENSE

@@ -0,0 +1,7 @@
+Copyright (c) 2023 Zakary Timson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+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.

README.md

@@ -1,27 +1,94 @@
-# PelicanLanding
+<!-- Header -->
+<div id="top" align="center">
+  <br />
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.4.
+  <!-- Logo -->
+  <img src="./src/assets/logo.png" alt="Logo" width="200" height="200">
 
-## Development server
+  <!-- Title -->
+  ### Pelican Landing
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+  <!-- Description -->
+  Morson's Pelican Landing Website
 
-## Code scaffolding
+  <!-- Repo badges -->
+  [![Version](https://img.shields.io/badge/dynamic/json.svg?label=Version&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/pelican-landing/tags&query=$[0].name)](https://git.zakscode.com/ztimson/pelican-landing/tags)
+  [![Pull Requests](https://img.shields.io/badge/dynamic/json.svg?label=Pull%20Requests&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/pelican-landing&query=open_pr_counter)](https://git.zakscode.com/ztimson/pelican-landing/pulls)
+  [![Issues](https://img.shields.io/badge/dynamic/json.svg?label=Issues&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/pelican-landing&query=open_issues_count)](https://git.zakscode.com/ztimson/pelican-landing/issues)
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+  <!-- Links -->
 
-## Build
+  ---
+  <div>
+    <a href="https://git.zakscode.com/ztimson/pelican-landing/releases" target="_blank">Release Notes</a>
+    • <a href="https://git.zakscode.com/ztimson/pelican-landing/issues/new?template=.github%2fissue_template%2fbug.md" target="_blank">Report a Bug</a>
+    • <a href="https://git.zakscode.com/ztimson/pelican-landing/issues/new?template=.github%2fissue_template%2fenhancement.md" target="_blank">Request a Feature</a>
+  </div>
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+  ---
+</div>
 
-## Running unit tests
+## Table of Contents
+- [Pelican Landing](#top)
+	- [About](#about)
+		- [Demo](#demo)
+		- [Built With](#built-with)
+	- [Setup](#setup)
+		- [Production](#production)
+		- [Development](#development)
+	- [License](#license)
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## About
 
-## Running end-to-end tests
+This is a business website built for Pelican Landing.
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Pelican Landing is a family run year-round hunting & fishing lodge. It's located on the beautiful southern shores of Lake of Woods and offers the outdoors-man a tailor made experience. With both road and water access this resort can meet the needs of the angler, hunter, or nature enthusiast.
 
-## Further help
+### Demo
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Website: https://git.zakscode.com
+
+### Built With
+[![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular)](https://angular.io/)
+[![Bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)](https://getbootstrap.com)
+[![Docker](https://img.shields.io/badge/Docker-384d54?style=for-the-badge&logo=docker)](https://docker.com/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://typescriptlang.org/)
+
+## Setup
+
+<details>
+<summary>
+  <h3 id="production" style="display: inline">
+    Production
+  </h3>
+</summary>
+
+#### Prerequisites
+- [Docker](https://docs.docker.com/install/)
+
+#### Instructions
+1. Run the docker image: `docker run -p 80:80 git.zakscode.com/ztimson/template: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>
+
+## License
+Copyright © 2023 Zakary Timson | All Rights Reserved
+
+See the [license](./LICENSE) for more information.

angular.json

@@ -1,85 +1,73 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
+	"version": 1,
-  "newProjectRoot": "projects",
+	"newProjectRoot": "projects",
-  "projects": {
+	"projects": {
-    "pelican-landing": {
+		"proj": {
-      "projectType": "application",
+			"projectType": "application",
-      "schematics": {
+			"schematics": {
-        "@schematics/angular:component": {
+				"@schematics/angular:component": {
-          "style": "scss"
+					"style": "scss"
-        }
+				}
-      },
+			},
-      "root": "",
+			"root": "",
-      "sourceRoot": "src",
+			"sourceRoot": "src",
-      "prefix": "app",
+			"prefix": "app",
-      "architect": {
+			"architect": {
-        "build": {
+				"build": {
-          "builder": "@angular-devkit/build-angular:browser",
+					"builder": "@angular-devkit/build-angular:application",
-          "options": {
+					"options": {
-            "outputPath": "dist/pelican-landing",
+						"outputPath": "dist",
-            "index": "src/index.html",
+						"index": "src/index.html",
-            "main": "src/main.ts",
+						"browser": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+						"polyfills": ["zone.js"],
-            "tsConfig": "tsconfig.app.json",
+						"tsConfig": "tsconfig.json",
-            "aot": true,
+						"inlineStyleLanguage": "scss",
-            "assets": [
+						"assets": [
-              "src/assets"
+							"src/assets"
-            ],
+						],
-            "styles": [
+						"styles": [
-              "src/styles.scss"
+							"src/styles.scss"
-            ],
+						],
-            "scripts": []
+						"scripts": []
-          },
+					},
-          "configurations": {
+					"configurations": {
-            "production": {
+						"production": {
-              "fileReplacements": [
+							"budgets": [
-                {
+								{
-                  "replace": "src/environments/environment.ts",
+									"type": "initial",
-                  "with": "src/environments/environment.prod.ts"
+									"maximumWarning": "500kb",
-                }
+									"maximumError": "1mb"
-              ],
+								},
-              "optimization": true,
+								{
-              "outputHashing": "all",
+									"type": "anyComponentStyle",
-              "sourceMap": false,
+									"maximumWarning": "2kb",
-              "extractCss": true,
+									"maximumError": "4kb"
-              "namedChunks": false,
+								}
-              "extractLicenses": true,
+							],
-              "vendorChunk": false,
+							"outputHashing": "all"
-              "buildOptimizer": true,
+						},
-              "budgets": [
+						"development": {
-                {
+							"optimization": false,
-                  "type": "initial",
+							"extractLicenses": false,
-                  "maximumWarning": "2mb",
+							"sourceMap": true
-                  "maximumError": "5mb"
+						}
-                },
+					},
-                {
+					"defaultConfiguration": "production"
-                  "type": "anyComponentStyle",
+				},
-                  "maximumWarning": "6kb",
+				"serve": {
-                  "maximumError": "10kb"
+					"builder": "@angular-devkit/build-angular:dev-server",
-                }
+					"configurations": {
-              ]
+						"production": {
-            }
+							"buildTarget": "proj:build:production"
-          }
+						},
-        },
+						"development": {
-        "serve": {
+							"buildTarget": "proj:build:development"
-          "builder": "@angular-devkit/build-angular:dev-server",
+						}
-          "options": {
+					},
-            "browserTarget": "pelican-landing:build"
+					"defaultConfiguration": "development"
-          },
+				}
-          "configurations": {
+			}
-            "production": {
+		}
-              "browserTarget": "pelican-landing:build:production"
+	}
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "pelican-landing:build"
-          }
-        }
-      }
-    }},
-  "defaultProject": "pelican-landing"
 }

docker/nginx.conf

@@ -0,0 +1,31 @@
+worker_processes  auto;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+  include       mime.types;
+  default_type  application/octet-stream;
+
+  gzip on;
+  gzip_proxied any;
+  gzip_types text/plain text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/json application/x-font-woff;
+  gzip_vary on;
+  gzip_disable "MSIE [1-6]\.(?!.*SV1)";
+
+  sendfile off;
+  keepalive_timeout 65;
+
+  server {
+    listen 80;
+    index index.html;
+    root /usr/share/nginx/html;
+    autoindex off;
+
+    location / {
+      try_files $uri$args $uri$args/ /index.html;
+    }
+  }
+}

docker/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Allow: /

package.json

@@ -1,47 +1,34 @@
 {
-  "name": "pelican-landing",
+	"name": "pelican-landing",
-  "version": "0.0.0",
+	"version": "0.0.0",
-  "scripts": {
+	"scripts": {
-    "ng": "ng",
+		"ng": "ng",
-    "start": "ng serve",
+		"start": "ng serve",
-    "build": "ng build",
+		"build": "ng build",
-    "lint": "ng lint"
+		"watch": "ng build --watch --configuration development"
-  },
+	},
-  "private": true,
+	"private": true,
-  "dependencies": {
+	"dependencies": {
-    "@angular/animations": "~10.0.5",
+		"@angular/animations": "^17.0.0",
-    "@angular/cdk": "^10.1.2",
+		"@angular/cdk": "^17.0.0",
-    "@angular/common": "~10.0.5",
+		"@angular/common": "^17.0.0",
-    "@angular/compiler": "~10.0.5",
+		"@angular/compiler": "^17.0.0",
-    "@angular/core": "~10.0.5",
+		"@angular/core": "^17.0.0",
-    "@angular/forms": "~10.0.5",
+		"@angular/forms": "^17.0.0",
-    "@angular/material": "^10.1.2",
+		"@angular/material": "^17.0.0",
-    "@angular/platform-browser": "~10.0.5",
+		"@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "~10.0.5",
+		"@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "~10.0.5",
+		"@angular/router": "^17.0.0",
-    "bootstrap": "^4.5.1",
+		"bootstrap": "^4.6.2",
-    "rxjs": "~6.5.5",
+		"hammerjs": "^2.0.8",
-    "tslib": "^2.0.0",
+		"rxjs": "~7.8.0",
-    "zone.js": "~0.10.3"
+		"tslib": "^2.3.0",
-  },
+		"zone.js": "~0.14.2"
-  "devDependencies": {
+	},
-    "@angular-devkit/build-angular": "~0.1000.4",
+	"devDependencies": {
-    "@angular/cli": "~10.0.4",
+		"@angular-devkit/build-angular": "^17.0.6",
-    "@angular/compiler-cli": "~10.0.5",
+		"@angular/cli": "^17.0.0",
-    "@types/node": "^12.11.1",
+		"@angular/compiler-cli": "^17.0.0",
-    "@types/jasmine": "~3.5.0",
+		"typescript": "~5.2.2"
-    "@types/jasminewd2": "~2.0.3",
+	}
-    "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~3.3.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~3.9.5"
-  }
 }

src/ bootstrap.scss

@@ -1 +0,0 @@
-@import "~bootstrap/dist/css/bootstrap.min.css";

src/app/app-routing.module.ts

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

src/app/app.component.html

@@ -1,23 +1,3 @@
-<mat-toolbar>
+<app-toolbar></app-toolbar>
-  <img src="/assets/logo.png" alt="Logo" class="mr-2" height="46px" width="auto">
+<router-outlet (activate)="scrollToTop()"></router-outlet>
-  <span>Pelican Landing</span>
+<app-footer></app-footer>
-  <span class="mx-auto"></span>
-  <span>
-    <button mat-button [matMenuTriggerFor]="huntingMenu">Hunting</button>
-    <mat-menu #huntingMenu="matMenu">
-      <button mat-menu-item>Whitetail Dear</button>
-      <button mat-menu-item>Black Bear</button>
-      <button mat-menu-item>Birds & Small Game</button>
-    </mat-menu>
-    <button mat-button>Fishing</button>
-    <button mat-button>Lodging</button>
-  </span>
-</mat-toolbar>
-<router-outlet></router-outlet>
-<footer class="w-100 bg-dark py-3 text-white">
-  <div class="container">
-    <div class="row">
-      <span class="mx-auto">Copyright © Morson's Pelican Landing 2020 | All Rights Reserved</span>
-    </div>
-  </div>
-</footer>

src/app/app.component.ts

@@ -1,8 +1,15 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-  selector: 'app-root',
+	selector: 'app-root',
-  templateUrl: './app.component.html',
+	templateUrl: './app.component.html'
-  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {}
+export class AppComponent {
+	scrollToTop() {
+		window.scroll({
+			top: 0,
+			left: 0,
+			behavior: 'smooth'
+		});
+	}
+}

src/app/app.module.ts

@@ -1,24 +1,36 @@
-import { BrowserModule } from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
-import { AppRoutingModule } from './app-routing.module';
+import {AppRouting} from './app.routing';
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {CarouselComponent} from './components/carousel/carousel.component';
-import {MaterialModule} from "./material..module";
+import {ContactComponent} from './components/contact/contact.component';
+import {FooterComponent} from './components/footer/footer.component';
+import {ToolbarComponent} from './components/toolbar/toolbar.component';
+import {MaterialModule} from "./material.module";
+import {ComingSoonComponent} from './view/coming-soon/coming-soon.component';
 import {HomeComponent} from "./view/home/home.component";
+import {NotFoundComponent} from './view/not-found/not-found.component';
 
 @NgModule({
-  declarations: [
+	declarations: [
-    AppComponent,
+		AppComponent,
-    HomeComponent
+		CarouselComponent,
-  ],
+		ComingSoonComponent,
-  imports: [
+		ContactComponent,
-    BrowserModule,
+		FooterComponent,
-    AppRoutingModule,
+		HomeComponent,
-    BrowserAnimationsModule,
+		NotFoundComponent,
-    MaterialModule
+		ToolbarComponent,
-  ],
+	],
-  providers: [],
+	imports: [
-  bootstrap: [AppComponent]
+		BrowserModule,
+		AppRouting,
+		BrowserAnimationsModule,
+		MaterialModule
+	],
+	providers: [],
+	bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/app/app.routing.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {ComingSoonComponent} from './view/coming-soon/coming-soon.component';
+import {HomeComponent} from "./view/home/home.component";
+import {NotFoundComponent} from './view/not-found/not-found.component';
+
+const routes: Routes = [
+	{path: '', pathMatch: 'full', component: HomeComponent},
+	{path: 'coming-soon', component: ComingSoonComponent},
+	{path: '**', component: NotFoundComponent}
+];
+
+@NgModule({
+	imports: [RouterModule.forRoot(routes)],
+	exports: [RouterModule]
+})
+export class AppRouting {}

src/app/components/carousel/carousel.component.html

@@ -0,0 +1,14 @@
+<div class="carousel-container"  [style.height]="height">
+	<img *ngIf="background" class="carousel-background" [src]="gallery[index]" alt="background">
+	<img class="carousel-image" [src]="gallery[index]" [alt]="'slide ' + index">
+	<div class="carousel-previous" (click)="previous()">
+		<mat-icon>skip_previous</mat-icon>
+	</div>
+	<div class="carousel-next" (click)="next()">
+		<mat-icon>skip_next</mat-icon>
+	</div>
+	<div class="carousel-pause" (click)="pause = !pause">
+		<mat-icon *ngIf="!pause">pause</mat-icon>
+		<mat-icon *ngIf="pause">play_arrow</mat-icon>
+	</div>
+</div>

src/app/components/carousel/carousel.component.scss

@@ -0,0 +1,106 @@
+.carousel-container {
+	position: relative;
+	width: 100%;
+
+
+	//.carousel-next {
+	//	display: none;
+	//}
+	//.carousel-previous {
+	//	display: none;
+	//}
+	//.carousel-pause {
+	//	display: none;
+	//}
+	//
+	//&:hover {
+	//	.carousel-next {
+	//		display: flex;
+	//	}
+	//	.carousel-previous {
+	//		display: flex;
+	//	}
+	//	.carousel-pause {
+	//		display: flex;
+	//	}
+	//}
+}
+
+.carousel-background {
+	width: 100%;
+	height: 100%;
+	filter: blur(10px);
+	-webkit-filter: blur(10px);
+}
+
+.carousel-image {
+	position: absolute;
+	top: 5%;
+	left: 50%;
+	transform: translate(-50%);
+	height: 90%;
+	width: auto;
+}
+
+.carousel-next {
+	position: absolute;
+	top: calc(50% - 28px);
+	right: 0;
+	height: 56px;
+	width: 56px;
+	color: rgba(255, 255, 255, 0.75);
+	filter: drop-shadow(3px 3px 5px black);
+	cursor: pointer;
+	padding: 1rem;
+	border-radius: 50%;
+	transition: 0.25s;
+
+	&:hover {
+		color: white;
+		background: rgba(0,0,0,0.25);
+		filter: none;
+	}
+}
+
+.carousel-previous {
+	position: absolute;
+	top: calc(50% - 28px);
+	left: 0;
+	height: 56px;
+	width: 56px;
+	color: rgba(255, 255, 255, 0.75);
+	filter: drop-shadow(3px 3px 5px black);
+	cursor: pointer;
+	padding: 1rem;
+	border-radius: 50%;
+	transition: 0.25s;
+
+	&:hover {
+		color: white;
+		background: rgba(0,0,0,0.25);
+		filter: none;
+	}
+}
+
+
+
+.carousel-pause {
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	height: 56px;
+	width: 56px;
+	transform: translate(-50%, -50%);
+	color: rgba(255, 255, 255, 0.75);
+	filter: drop-shadow(3px 3px 5px black);
+	cursor: pointer;
+	padding: 1rem;
+	border-radius: 50%;
+	transition: 0.25s;
+
+	&:hover {
+		color: white;
+		background: rgba(0,0,0,0.25);
+		filter: none;
+	}
+}

src/app/components/carousel/carousel.component.ts

@@ -0,0 +1,69 @@
+import {AfterViewInit, Component, OnDestroy} from '@angular/core';
+
+@Component({
+	selector: 'app-carousel',
+	templateUrl: './carousel.component.html',
+	styleUrls: ['./carousel.component.scss']
+})
+export class CarouselComponent implements OnDestroy, AfterViewInit {
+	private timer?: any;
+
+	background = true;
+	gallery: string[] = [
+		'/assets/gallery/sign.jpg',
+		'/assets/gallery/0e2343c77df8a7a889ac415c8e7a7e21.jpg',
+		'/assets/gallery/2a291f871aa431321815427bd0da7b47.jpg',
+		'/assets/gallery/3daf84c720d7cc1a1cee552ed8aaa950.png',
+		'/assets/gallery/005aaf842df485a2aa84cdf1126b3b99.jpg',
+		'/assets/gallery/29b2858c929dad50084105625c1fdb42.jpg',
+		'/assets/gallery/47ac8b23a14218a2d34c1e18aae21294.png',
+		'/assets/gallery/53be6420ddf84d8b03a23150f019244b.jpg',
+		'/assets/gallery/64d63ff7fabb405e8dfc828a99ac5624.jpg',
+		'/assets/gallery/65cd4315aa7657a49801b9295cdae2c3.jpg',
+		'/assets/gallery/94ded0778bb59e7e0bf88f6dc888ef4c.jpg',
+		'/assets/gallery/845ee7532bd7d36722961fb323bfa1dd.jpg',
+		'/assets/gallery/976d7cb341f7cec8744b622564a47f39.jpg',
+		'/assets/gallery/1661a1bb4e41da05e0ed5a6a5392e65a.jpg',
+		'/assets/gallery/419966f0afc5e2304e7d0356cd9ebcd0.jpg',
+		'/assets/gallery/509028fb06297b1265e4fe411db6aa02.jpg',
+		'/assets/gallery/a9c0fd0475a0668048c650847d01d89a.jpg',
+		'/assets/gallery/ac030ea1880bad81fb310963f260879c.jpg',
+		'/assets/gallery/ac719df5a9c457b7681f03563135867d.jpg',
+		'/assets/gallery/b0fb7922a80370e24cc556278937f368.jpg',
+		'/assets/gallery/b07494f26cafee254851a171cdfcea39.jpg',
+		'/assets/gallery/bf0f928b4c1e91c0c6c06ea8e61412cf.jpg',
+		'/assets/gallery/de3817da3a00e0706a73e6385a9aa361.jpg',
+		'/assets/gallery/dfa230c49c1c737ffdaf46875431212c.jpg',
+		'/assets/gallery/e2d1fd95e5a6c36a83b7fc602419b8c6.jpg',
+		'/assets/gallery/e312d84b034d5fd307a5e4b48ac7fead.jpg',
+		'/assets/gallery/f851220bb22cf91b4041695d930c3af0.jpg',
+	];
+	speed = 5000;
+	pause = false;
+	index = 0 ?? ~~(Math.random() * this.gallery.length);
+	height = '300px';
+
+	ngAfterViewInit() {
+		this.timer = setInterval(() => {
+			if(!this.pause) this.next(false);
+		}, this.speed);
+	}
+
+	ngOnDestroy() {
+		if(this.timer) {
+			clearInterval(this.timer);
+			this.timer = null;
+		}
+	}
+
+	next(pause = true) {
+		this.pause = pause;
+		this.index++;
+		if(this.index >= this.gallery.length) this.index = 0;
+	}
+
+	previous(pause = true) {
+		this.pause = pause;
+		this.index = this.index > 0 ? this.index - 1 : this.gallery.length - 1;
+	}
+}

src/app/components/contact/contact.component.html

@@ -0,0 +1,34 @@
+<form class="mx-auto w-100">
+	<div>
+		<mat-form-field appearance="fill" class="w-100">
+			<mat-label>Name</mat-label>
+			<input matInput>
+		</mat-form-field>
+	</div>
+	<div>
+		<mat-form-field appearance="fill" class="w-100">
+			<mat-label>Email</mat-label>
+			<input matInput>
+		</mat-form-field>
+	</div>
+	<div>
+		<mat-form-field appearance="fill" class="w-100">
+			<mat-label>Subject</mat-label>
+			<input matInput>
+		</mat-form-field>
+	</div>
+	<div>
+		<mat-form-field appearance="fill" class="w-100">
+			<mat-label>Message</mat-label>
+			<textarea matInput rows="8"></textarea>
+		</mat-form-field>
+	</div>
+	<div class="d-flex justify-content-between align-items-center">
+		<div>
+			<mat-checkbox color="primary">Send me a copy</mat-checkbox>
+		</div>
+		<div>
+			<button class="btn btn-outline-secondary rounded-pill px-4 mt-3">Send</button>
+		</div>
+	</div>
+</form>

src/app/components/contact/contact.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'app-contact',
+	templateUrl: './contact.component.html'
+})
+export class ContactComponent { }

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

@@ -0,0 +1,63 @@
+<footer class="w-100 text-white app-footer">
+	<div class="bg-dark p-3">
+		<div class="d-flex flex-column flex-sm-row flex-md-wrap justify-content-around mx-auto cap-width">
+			<div>
+				<h4>Address</h4>
+				<ul>
+					<li>9061 ON-621,</li>
+					<li>Morson, ON P0W 1J0,</li>
+					<li>Canada</li>
+				</ul>
+			</div>
+			<div>
+				<h4>Contact Us</h4>
+				<ul>
+					<li>Phone: <a href="tel:18074885511" target="_blank">+1 (807) 488-5511</a></li>
+					<li>Toll Free: <a href="tel:18886908070" target="_blank">+1 (888) 690-8070</a></li>
+					<li>Email: <a href="mailto:pelicanlanding2002@gmail.com">pelicanlanding2002&#64;gmail.com</a></li>
+					<li>Social Media:
+						<a href="https://www.facebook.com/MorsonsPelicanLanding" target="_blank">Facebook</a></li>
+				</ul>
+			</div>
+			<div>
+				<h4>Resources</h4>
+				<ul>
+					<li>
+						<a href="https://www.canada.ca/en/border-services-agency/services/arrivecan.html" target="_blank">Arrive Canada</a>
+					</li>
+					<li>
+						<a href="https://www.cbsa-asfc.gc.ca/travel-voyage/menu-eng.html" target="_blank">Border Crossing</a> /
+						<a href="https://www.rcmp-grc.gc.ca/wam/media/2347/original/d369a605ac3363b569af5ea5dc40c88d.pdf" target="_blank">Firearms</a>
+					</li>
+					<li>Regulations:
+						<a href="https://www.ontario.ca/files/2023-05/mnrf-2023-hunting-regulations-summary-en-2023-05-03.pdf" target="_blank">Hunting</a> /
+						<a href="https://www.ontario.ca/files/2023-12/mnrf-2024-ontario-fishing-regulations-summary-en-2023-12-11-v2.pdf" target="_blank">Fishing</a>
+					</li>
+					<li>Weather:
+						<a href="https://www.accuweather.com/en/ca/morson/p0w/daily-weather-forecast/54891" target="_blank">Morson</a> /
+						<a href="https://weather.gc.ca/marine/forecast_e.html?mapID=09&siteID=08100" target="_blank">Marine</a>
+					</li>
+				</ul>
+			</div>
+			<div>
+				<h4>Sitemap</h4>
+				<ul>
+					<li><a routerLink="/">Home</a></li>
+					<li><a routerLink="/coming-soon">Restaurant</a></li>
+					<li><a routerLink="/coming-soon">Hunting</a></li>
+					<li><a routerLink="/coming-soon">Fishing</a></li>
+					<li><a routerLink="/coming-soon">Lodging</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div style="background: #282d31" class="p-3">
+		<div class="row">
+			<p class="mx-auto text-center mb-0">
+				Copyright © Morson's Pelican Landing 2023 | All Rights Reserved
+				<br/>
+				Created By <a href="https://zakscode.com" target="_blank">Zak Timson</a>
+			</p>
+		</div>
+	</div>
+</footer>

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

@@ -0,0 +1,14 @@
+.app-footer {
+	ul {
+		list-style: none !important;
+		padding: 0 !important;
+
+		li {
+			color: #fff9;
+
+			&:hover {
+				color: #fff9;
+			}
+		}
+	}
+}

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/toolbar/toolbar.component.html

@@ -0,0 +1,14 @@
+<mat-toolbar class="d-print-none">
+	<img routerLink="/" class="curs-pointer" src="/assets/logo.png" alt="Logo" height="46px" width="auto">
+	<button mat-button routerLink="/" class="d-flex align-items-center">
+
+		<h1 class="d-none d-sm-inline">Pelican Landing</h1>
+	</button>
+	<span class="mx-auto"></span>
+	<span>
+		<button mat-button routerLink="/coming-soon">Restaurant</button>
+	    <button mat-button routerLink="/coming-soon">Hunting</button>
+	    <button mat-button routerLink="/coming-soon">Fishing</button>
+	    <button mat-button routerLink="/coming-soon">Lodging</button>
+    </span>
+</mat-toolbar>

src/app/components/toolbar/toolbar.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'app-toolbar',
+	templateUrl: './toolbar.component.html'
+})
+export class ToolbarComponent { }

src/app/material..module.ts

@@ -1,16 +0,0 @@
-import {NgModule} from "@angular/core";
-import {MatToolbarModule} from "@angular/material/toolbar";
-import {MatMenuModule} from "@angular/material/menu";
-import {MatButtonModule} from "@angular/material/button";
-
-let modules = [
-  MatButtonModule,
-  MatMenuModule,
-  MatToolbarModule
-];
-
-@NgModule({
-  imports: modules,
-  exports: modules
-})
-export class MaterialModule {}

src/app/material.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from "@angular/core";
+import {MatButtonModule} from "@angular/material/button";
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatMenuModule} from "@angular/material/menu";
+import {MatToolbarModule} from "@angular/material/toolbar";
+
+let modules = [
+	MatButtonModule,
+	MatCheckboxModule,
+	MatFormFieldModule,
+	MatIconModule,
+	MatInputModule,
+	MatMenuModule,
+	MatToolbarModule,
+];
+
+@NgModule({
+	imports: modules,
+	exports: modules
+})
+export class MaterialModule {}

src/app/view/coming-soon/coming-soon.component.html

@@ -0,0 +1,7 @@
+<div class="bg-white p-5">
+	<div class="m-5 p-5 text-center">
+		<h1 style="font-size: 4em">Coming Soon</h1>
+		<h2 class="mt-3">This page is under development</h2>
+		<button class="btn btn-outline-secondary rounded-pill px-4 mt-3" (click)="back()">Back</button>
+	</div>
+</div>

src/app/view/coming-soon/coming-soon.component.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+declare var navigation: any;
+
+@Component({
+	selector: 'app-coming-soon',
+	templateUrl: './coming-soon.component.html'
+})
+export class ComingSoonComponent {
+	back() {
+		navigation.back();
+	}
+}

src/app/view/home/home.component.html

@@ -1,7 +1,49 @@
 <div class="w-100">
-  <img src="/assets/background.png" alt="Banner" width="100%" height="auto">
+	<img src="/assets/background.png" alt="Banner" width="100%" height="400px">
-  <img src="/assets/logo.png" style="position: absolute; left: 50vw; top: 50vh; transform: translate(-50%, -50%)" width="auto" height="auto">
+	<h1></h1>
-</div>
-<div class="p-3">
-
 </div>
+<section class="bg-white p-5 text-center cap-width">
+	<h2 class="mb-5">About Us</h2>
+	<p class="mb-5">Pelican Landing is a family run year-round hunting & fishing lodge. It's located on the beautiful southern shores of Lake of Woods and offers the outdoors-man a tailor made experience.  With both road and water access this resort can meet the needs of the angler, hunter, or nature enthusiast. Our goal at Pelican Landing is to make your stay with us a memorable, relaxing experience that you will want to repeat.</p>
+	<app-carousel></app-carousel>
+</section>
+<section class="pt-5 text-center" style="background: #f1f1f1">
+	<h2>Services</h2>
+	<div class="d-flex justify-content-around flex-wrap cap-width py-5">
+		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">restaurant</mat-icon>
+			<h3>Restaurant</h3>
+			<p class="mb-0">Our on site restaurant is the best around. Open 11am - 8pm</p>
+			<br>
+			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">Menu <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+		</div>
+		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">gps_fixed</mat-icon>
+			<h3>Hunting</h3>
+			<p class="mb-0">We offer guided tours to hunt black bear, white tail dear, birds & small game</p>
+			<br>
+			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">More <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+		</div>
+		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">phishing</mat-icon>
+			<h3>Fishing</h3>
+			<p class="mb-0">We offer guided tours to fish for walleye, pike, crappie, bass, trout, sturgeon & muskie</p>
+			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">More <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+		</div>
+		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">cottage</mat-icon>
+			<h3>Lodging</h3>
+			<p class="mb-0">Reserve a cottage or RV parking spot. Package with a hunting/fishing trip for more savings</p>
+			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">Rates <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+		</div>
+	</div>
+</section>
+<section class="bg-white p-5 text-center">
+	<h2 class="mb-5">Contact Us</h2>
+	<div class="mx-auto" style="max-width: 750px">
+		<app-contact></app-contact>
+	</div>
+</section>
+<section style="background: #343a40">
+	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20901.5656209322!2d-94.3342870256971!3d49.0924225740941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x52bc2793e70efc57%3A0x6f173b50ef0787ba!2sPelican%20Landing!5e0!3m2!1sen!2sca!4v1702654257180!5m2!1sen!2sca" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+</section>

src/app/view/home/home.component.ts

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

src/app/view/not-found/not-found.component.html

@@ -0,0 +1,7 @@
+<div class="bg-white p-5">
+	<div class="card my-5 mx-auto p-5 text-center" style="max-width: 400px">
+		<h1 style="font-size: 4em">404</h1>
+		<h2 class="mt-3">Page not found</h2>
+		<button class="btn btn-outline-secondary rounded-pill px-4 mt-3" (click)="back()">Back</button>
+	</div>
+</div>

src/app/view/not-found/not-found.component.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+declare var navigation: any;
+
+@Component({
+	selector: 'app-not-found',
+	templateUrl: './not-found.component.html'
+})
+export class NotFoundComponent {
+	back() {
+		navigation.back();
+	}
+}

src/environments/environment.ts

@@ -1,16 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   production: false
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/index.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <base href="/">
+	<base href="/">
-  <title>Pelican Landing</title>
+	<title>Pelican Landing</title>
 
-  <meta charset="utf-8">
+	<meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="viewport" content="width=device-width, user-scalable=no">
 
-  <link rel="icon" type="image/png" href="/assets/logo.png">
+	<link rel="icon" type="image/png" href="/assets/logo.png">
-  <link href="" rel="stylesheet">
+	<link href="" rel="stylesheet">
 </head>
 <body class="mat-typography">
-  <app-root>
+<app-root>
-    <img src="/assets/logo.png" alt="Pelican Landing" style="position: absolute; left: 50vw; top: 50vh; transform: translate(-50%, -50%);">
+	<img src="/assets/logo.png" alt="Pelican Landing" style="position: absolute; left: 50vw; top: 50vh; transform: translate(-50%, -50%);">
-  </app-root>
+</app-root>
 </body>
 </html>

src/main.ts

@@ -1,12 +1,5 @@
-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/material.scss

@@ -1,22 +0,0 @@
-@import '~@angular/material/theming';
-@include mat-core();
-
-$pelican-landing-primary: mat-palette($mat-indigo);
-$pelican-landing-accent: mat-palette($mat-pink, A200, A100, A400);
-
-$pelican-landing-warn: mat-palette($mat-red);
-
-$pelican-landing-theme: mat-light-theme((
-  color: (
-    primary: $pelican-landing-primary,
-    accent: $pelican-landing-accent,
-    warn: $pelican-landing-warn,
-  )
-));
-
-@include angular-material-theme($pelican-landing-theme);
-
-mat-toolbar {
-  position: absolute;
-  background-color: rgba(255, 255, 255, 0.25) !important;
-}

src/polyfills.ts

@@ -1,63 +0,0 @@
-/**
- * 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 Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-/**
- * 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/dist/zone';  // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */

src/styles.scss

@@ -1,7 +1,45 @@
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:300,400,500);
+// Theme ================================================================
+@use '@angular/material' as mat;
+@import "bootstrap/dist/css/bootstrap.min.css";
+@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons");
 
-@import './ bootstrap';
+@include mat.core();
-@import './material';
+$my-theme: mat.define-light-theme((
+	color: (
+		primary: mat.define-palette(mat.$blue-palette),
+		accent: mat.define-palette(mat.$pink-palette, A200),
+	),
+	typography: mat.define-typography-config(),
+	density: 0,
+));
+@include mat.all-component-themes($my-theme);
+
+// Globals ==============================================================
+
+html, body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+.cap-width {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 1200px;
+}
+
+.curs-pointer {
+	cursor: pointer;
+}
+
+.logo {
+	color: #000000;
+
+	&:hover {
+		color: #555555;
+		text-decoration: none;
+	}
+}
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

tsconfig.app.json

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

tsconfig.base.json

@@ -1,20 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "es2015",
-    "module": "es2020",
-    "lib": [
-      "es2018",
-      "dom"
-    ]
-  }
-}

tsconfig.json

@@ -1,17 +1,42 @@
-/*
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
-  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
-  It is not intended to be used to perform a compilation.
-
-  To learn more about this file see: https://angular.io/config/solution-tsconfig.
-*/
 {
-  "files": [],
+  "compileOnSave": false,
-  "references": [
+  "compilerOptions": {
-    {
+    "outDir": "./out-tsc/app",
-      "path": "./tsconfig.app.json"
+    "forceConsistentCasingInFileNames": true,
-    },
+    "strict": true,
-    {
+    "noImplicitOverride": true,
-      "path": "./tsconfig.spec.json"
+    "noPropertyAccessFromIndexSignature": true,
-    }
+    "noImplicitReturns": true,
-]
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "strictNullChecks": false,
+    "resolveJsonModule": true,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
 }

tsconfig.spec.json

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

tslint.json

@@ -1,152 +0,0 @@
-{
-  "extends": "tslint:recommended",
-  "rules": {
-    "align": {
-      "options": [
-        "parameters",
-        "statements"
-      ]
-    },
-    "array-type": false,
-    "arrow-return-shorthand": true,
-    "curly": true,
-    "deprecation": {
-      "severity": "warning"
-    },
-    "component-class-suffix": true,
-    "contextual-lifecycle": true,
-    "directive-class-suffix": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
-    "eofline": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-spacing": true,
-    "indent": {
-      "options": [
-        "spaces"
-      ]
-    },
-    "max-classes-per-file": false,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-empty": false,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
-    "no-switch-case-fall-through": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "semicolon": {
-      "options": [
-        "always"
-      ]
-    },
-    "space-before-function-paren": {
-      "options": {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "constructor": "never",
-        "method": "never",
-        "named": "never"
-      }
-    },
-    "typedef": [
-      true,
-      "call-signature"
-    ],
-    "typedef-whitespace": {
-      "options": [
-        {
-          "call-signature": "nospace",
-          "index-signature": "nospace",
-          "parameter": "nospace",
-          "property-declaration": "nospace",
-          "variable-declaration": "nospace"
-        },
-        {
-          "call-signature": "onespace",
-          "index-signature": "onespace",
-          "parameter": "onespace",
-          "property-declaration": "onespace",
-          "variable-declaration": "onespace"
-        }
-      ]
-    },
-    "variable-name": {
-      "options": [
-        "ban-keywords",
-        "check-format",
-        "allow-pascal-case"
-      ]
-    },
-    "whitespace": {
-      "options": [
-        "check-branch",
-        "check-decl",
-        "check-operator",
-        "check-separator",
-        "check-type",
-        "check-typecast"
-      ]
-    },
-    "no-conflicting-lifecycle": true,
-    "no-host-metadata-property": true,
-    "no-input-rename": true,
-    "no-inputs-metadata-property": true,
-    "no-output-native": true,
-    "no-output-on-prefix": true,
-    "no-output-rename": true,
-    "no-outputs-metadata-property": true,
-    "template-banana-in-box": true,
-    "template-no-negated-async": true,
-    "use-lifecycle-interface": true,
-    "use-pipe-transform-interface": true
-  },
-  "rulesDirectory": [
-    "codelyzer"
-  ]
-}