Redesigned User-Friendly 404 Page

README.md

@@ -1,10 +1,11 @@
 # ElectroTab: The electrifying new tab experience!
-
-![Favicon](src/assets/images/favicon.png)
+<img align="left" src="src/assets/images/favicon.png" alt="Favicon" width="24%">
 
 ## Built with [Angular](https://angular.io/) and [Firebase](https://firebase.google.com/) with styles and components from [MaterializeCSS](http://materializecss.com/). Current support for Chrome and Chromium.
 
-**Build Status:** [![Build Status](https://travis-ci.org/dbqeo/ElectroTab.svg?branch=master)](https://travis-ci.org/dbqeo/ElectroTab)
+**Master Status:** [![Build Status](https://travis-ci.org/dbqeo/ElectroTab.svg?branch=master)](https://travis-ci.org/dbqeo/ElectroTab)
+
+**Develop Status:** [![Build Status](https://travis-ci.org/dbqeo/ElectroTab.svg?branch=develop)](https://travis-ci.org/dbqeo/ElectroTab)
 
 ## Discord Server
 We use **Discord** for realtime collaboration (it's not just for gaming!) Our invite code is https://discord.gg/FnvQ6MG. **Everyone is welcome to join!**
@@ -32,7 +33,7 @@ Need help? View the documentation for the [ElectroTab API](https://github.com/db
  5. Open your web browser (hopefully Chromium/Chrome) to localhost:4200. Enjoy :)
 
 ## Deploy Guide
- 1. Run `ng build --prod --output-hashing=bundles --no-aot` -> Start new build with partial hashing and uglifyJS. This will ensure that the cache will be refreshed quickly with new updates. 
+ 1. Run `ng build --prod --output-hashing=bundles --no-aot` -> Start new build with partial hashing and uglifyJS. This will ensure that the cache will be refreshed quickly with new updates.
  **Note:** The `--no-aot` flag is a temporary workaround that will be removed in the next update.
  2. Run `firebase deploy` -> Deploy new build to Firebase
 

src/app/404/page-not-found.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'page-not-found-component',
+    template: `<iframe src="http://electrotab.epizy.com/electroError/404.html" width="100%" height="100%" frameborder="0" style="position:absolute; left: 0; right: 0; bottom: 0; top: 0px; "></iframe>`
+})
+export class PageNotFoundComponent { }

src/app/404/page-not-found.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { PageNotFoundComponent } from './page-not-found.component';
+
+@NgModule({
+    imports: [
+        RouterModule.forChild([
+            { path: '', component: PageNotFoundComponent }
+        ])
+    ],
+    exports: [
+        RouterModule
+    ],
+    declarations: [
+        PageNotFoundComponent
+    ]
+})
+export class PageNotFoundModule {
+}
+
+

src/app/app.module.ts

@@ -28,7 +28,9 @@ const routes: Routes = [
     { path: '', loadChildren: 'app/home/home.module#HomeModule' },
     { path: 'info', loadChildren: 'app/info/info.module#InfoModule' },
     { path: 'account', loadChildren: 'app/account/account.module#AccountModule' }, 
-    { path: 'customize', loadChildren: 'app/customize/customize.module#CustomizeModule' }
+    { path: 'customize', loadChildren: 'app/customize/customize.module#CustomizeModule' },
+    { path: '404', loadChildren: 'app/404/page-not-found.module#PageNotFoundModule' },
+    { path: '**', redirectTo:'404' }
 ]
 
 @NgModule({

src/app/customize/grid-menu/changeURLDialog.component.css

@@ -1,5 +0,0 @@
-.mat-form-field-underline::after {
-    visibility: hidden;
-    display: none;
-    opacity: 0;
-}

src/styles.css

@@ -1,3 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 
 @import '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';
+.mat-input-subscript-wrapper.mat-form-field-subscript-wrapper {.mat-input-underline.mat-form-field-underline {
+    visibility: hidden;
+    display: none;
+    opacity: 0; }
+    visibility: hidden;
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.mat-input-underline.mat-form-field-underline {
+    visibility: hidden;
+    display: none;
+    opacity: 0;
+}