diff --git a/src/404.html b/src/404.html deleted file mode 100644 index 644e4bb2c..000000000 --- a/src/404.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - MifosX - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
- - - diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 032e1ca58..2608b930a 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,14 +2,16 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +// Not Found Component +import {NotFoundComponent} from './not-found/not-found.component'; + /** * Fallback to this route when no prior route is matched. */ const routes: Routes = [ { path: '**', - redirectTo: '', - pathMatch: 'full' + component: NotFoundComponent } ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 587e1a89c..b13273e48 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,6 +17,9 @@ import { environment } from 'environments/environment'; /** Main Component */ import { WebAppComponent } from './web-app.component'; +/** Not Found Component */ +import { NotFoundComponent } from './not-found/not-found.component'; + /** Custom Modules */ import { CoreModule } from './core/core.module'; import { HomeModule } from './home/home.module'; @@ -59,7 +62,7 @@ import { AppRoutingModule } from './app-routing.module'; SystemModule, AppRoutingModule ], - declarations: [WebAppComponent], + declarations: [WebAppComponent, NotFoundComponent], providers: [], bootstrap: [WebAppComponent] }) diff --git a/src/app/not-found/not-found.component.html b/src/app/not-found/not-found.component.html new file mode 100644 index 000000000..268aa4c08 --- /dev/null +++ b/src/app/not-found/not-found.component.html @@ -0,0 +1,5 @@ +
+
+

404

+

Something went wrong.

+
diff --git a/src/app/not-found/not-found.component.scss b/src/app/not-found/not-found.component.scss new file mode 100644 index 000000000..2a5026932 --- /dev/null +++ b/src/app/not-found/not-found.component.scss @@ -0,0 +1,28 @@ +#particles-js { + position: absolute; + width: 100%; + height: 100%; + background: cornflowerblue; +} + +.text { + position: absolute; + top: 50%; + right: 50%; + transform: translate(50%,-50%); + max-width: 90%; + padding: 2em 3em; + color: white; + font-family: 'Raleway', sans-serif; + display: flex; + flex-direction: column; + align-items: center; +} + +#title { + font-size: 120pt; +} + +#subtitle { + font-size: 12pt; +} diff --git a/src/app/not-found/not-found.component.spec.ts b/src/app/not-found/not-found.component.spec.ts new file mode 100644 index 000000000..35189ed0b --- /dev/null +++ b/src/app/not-found/not-found.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotFoundComponent } from './not-found.component'; + +describe('NotFoundComponent', () => { + let component: NotFoundComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NotFoundComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NotFoundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/not-found/not-found.component.ts b/src/app/not-found/not-found.component.ts new file mode 100644 index 000000000..e0029b9fd --- /dev/null +++ b/src/app/not-found/not-found.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +declare var particlesJS: any; + +@Component({ + selector: 'mifosx-not-found', + templateUrl: './not-found.component.html', + styleUrls: ['./not-found.component.scss'] +}) +export class NotFoundComponent implements OnInit { + + constructor() { } + + ngOnInit() { + particlesJS.load('particles-js', '/assets/particles.json'); + } + +} diff --git a/src/assets/particles.json b/src/assets/particles.json new file mode 100644 index 000000000..f4cc6ff19 --- /dev/null +++ b/src/assets/particles.json @@ -0,0 +1,110 @@ +{ + "particles": { + "number": { + "value": 80, + "density": { + "enable": true, + "value_area": 800 + } + }, + "color": { + "value": "#ffffff" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#000000" + }, + "polygon": { + "nb_sides": 5 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 0.5, + "random": false, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 3, + "random": true, + "anim": { + "enable": false, + "speed": 40, + "size_min": 0.1, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 150, + "color": "#ffffff", + "opacity": 0.4, + "width": 1 + }, + "move": { + "enable": true, + "speed": 6, + "direction": "none", + "random": false, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": true, + "mode": "repulse" + }, + "onclick": { + "enable": true, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 200, + "duration": 0.4 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true +} diff --git a/src/index.html b/src/index.html index f08528771..412caf2fd 100644 --- a/src/index.html +++ b/src/index.html @@ -15,6 +15,7 @@ + +