diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index eb53c65c..04940636 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -14,7 +14,7 @@ export const routes: Routes = [ path: 'pages', loadChildren: () => import('./pages/pages.module') .then(m => m.PagesModule), - }, + }, { path: 'auth', component: NbAuthComponent, diff --git a/src/app/dashboard/dashboard-routing.module.ts b/src/app/dashboard/dashboard-routing.module.ts new file mode 100644 index 00000000..c01a964a --- /dev/null +++ b/src/app/dashboard/dashboard-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { DashboardComponent } from './dashboard/dashboard.component'; + + +const routes: Routes = [ + { + path: 'dashboard1', + component: DashboardComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class DashboardRoutingModule { } diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts new file mode 100644 index 00000000..b132636f --- /dev/null +++ b/src/app/dashboard/dashboard.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { DashboardRoutingModule } from './dashboard-routing.module'; +import { DashboardComponent } from './dashboard/dashboard.component'; +import { SharedModule } from '../shared/shared.module'; + +@NgModule({ + declarations: [DashboardComponent], + imports: [ + CommonModule, + DashboardRoutingModule, + SharedModule + ] +}) +export class DashboardModule { } diff --git a/src/app/dashboard/dashboard/dashboard.component.html b/src/app/dashboard/dashboard/dashboard.component.html new file mode 100644 index 00000000..7714c137 --- /dev/null +++ b/src/app/dashboard/dashboard/dashboard.component.html @@ -0,0 +1,213 @@ + +
+
+
+

New Payment Request

+ +
+
+
+
+
+

Inbox

+

1,754.50

+
+
+
+

Next Vault transfer
within 1 month

+
+
+ +
+
+

20.00

+
+ +
+

Next Vault transfer
within 1 month

+
+
+ +
+
+

210.50

+
+ +
+

Next Vault transfer
within 1 month

+
+
+ +
+
+

184.70

+
+ +
+

Next Vault transfer
within 1 month

+
+
+ +
+
+

101.50

+
+ +
+

Next Vault transfer
within 1 month

+
+
+ +
+
+

624.25

+
+
+ +
+
+
+
+ STAKE
TO
VAULT + +

UNDER $75: 1.0% BONUS

+

$300 to $525: 1.5% BONUS

+

OVER $525: 2.0% BONUS

+

Will be transferred back to

+

Inbox on MARCH 28th 2021

+
+
+ Cash
Out + +

Will be transferred by

+

DECEMBER 1st 2021

+
+
+
+
+
+

Vault

+

1,754.50

+
+
+ +
+
+

GUARANTEE FUND 5%

+
+
+ +
+
+

350.25

+
+
+

REFFERAL PROGRAM

+
+
+ +
+
+

155.54

+
+
+

PERSONAL STAKE

+
+
+ +
+
+

615.16

+
+
+
+
+
+ + +
+
+
+
+
\ No newline at end of file diff --git a/src/app/dashboard/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard/dashboard.component.scss new file mode 100644 index 00000000..091560a4 --- /dev/null +++ b/src/app/dashboard/dashboard/dashboard.component.scss @@ -0,0 +1,181 @@ +* { + font-family: 'Roboto', sans-serif; + outline: 0; +} + + +input[type=text] { + width: 100%; + padding: 3px 8px; + border: none; + margin: 5px 0; + font-size: 14px; + color: #0814fb; + -webkit-box-shadow: 0 2px 6px 0 #525252; + box-shadow: 0 2px 6px 0 #525252; + background-color: #fff; +} +input[type=text]::placeholder { + color: #0814fb6c; +} + +a.dashBtn { + text-decoration: none; + display: inline-block; + background-color: #0814fb; + color: #fff; + font-size: 16px; + text-align: center; + padding: 10px; + border-radius: 5px; + -webkit-box-shadow: 0 2px 6px 0 #525252; + box-shadow: 0 2px 6px 0 #525252; + display: flex; + align-items: center; + justify-content: center; + i { + display: inline-block; + width: 20px; + height: 20px; + background-color: #fff; + margin-left: 20px; + } +} + +section { + padding: 40px 0; + background-color: #c9e9fa; + .dashSec { + width: 100%; + background-color: rgba(255, 255, 255, 0.4); + -webkit-box-shadow: 0 2px 6px 0 #525252; + box-shadow: 0 2px 6px 0 #525252; + h2 { + text-align: center; + color: #0814fb; + font-size: 20px; + font-weight: 500; + border-bottom: #0814fb solid 1px; + } + aside { + padding: 15px 35px; + i { + width: 80px; + height: 80px; + background-color: #fff; + } + ul { + width: 180px; + padding-left: 0; + li { + list-style: none; + display: flex; + justify-content: space-between; + p { + color: #0814fb; + font-size: 14px; + margin: 2px 0; + } + + } + } + form { + width: 200px; + } + .contact { + width: 220px; + -webkit-box-shadow: 0 2px 6px 0 #525252; + box-shadow: 0 2px 6px 0 #525252; + background-color: #fff; + padding: 10px; + p { + color: #0814fb6c; + font-size: 14px; + margin-bottom: 0; + } + } + a.dashBtn { + // width: 150px; + i.message { + width: 40px; + height: 40px; + background-color: #fff; + } + } + } + } + .row { + margin-top: 40px; + .dashSec { + padding: 10px; + h2 { + font-size: 30px; + font-weight: bold; + border-bottom: none; + small { + font-size: 18px; + font-weight: bold; + } + } + h3 { + font-size: 25px; + color: #0814fb; + } + h4 { + font-size: 20px; + color: #0814fb; + } + i { + width: 20px; + height: 20px; + display: inline-block; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + } + i.dollar { + vertical-align: middle; + background-image: url('/assets/icons/dollar.svg'); + } + i.lock { + width: 100px; + height: 100px; + background-color: #fff; + } + + + .vault { + width: calc(100% - 120px); + } + + P { + font-size: 11px; + margin-bottom: 0; + color: #0814fb; + } + } + aside.dashInner { + width: calc((100% - 60px) / 2); + li { + align-items: center; + justify-content: center !important; + } + i.dollar { + width: 15px; + height: 15px; + margin: 0 5px; + } + h3 { + font-size: 20px; + + } + h4 { + font-size: 16px !important; + margin-bottom: 0; + color: #0814fb8a; + margin-left: 5px; + } + + } + } +} \ No newline at end of file diff --git a/src/app/dashboard/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard/dashboard.component.spec.ts new file mode 100644 index 00000000..9c996c37 --- /dev/null +++ b/src/app/dashboard/dashboard/dashboard.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardComponent } from './dashboard.component'; + +describe('DashboardComponent', () => { + let component: DashboardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DashboardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard/dashboard.component.ts new file mode 100644 index 00000000..e65c0d3f --- /dev/null +++ b/src/app/dashboard/dashboard/dashboard.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.scss'] +}) +export class DashboardComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/pages/new-dash-board/dash-pg/dash-pg.component.html b/src/app/pages/new-dash-board/dash-pg/dash-pg.component.html new file mode 100644 index 00000000..690ed5e3 --- /dev/null +++ b/src/app/pages/new-dash-board/dash-pg/dash-pg.component.html @@ -0,0 +1,224 @@ +
+
+ + + + + +

+49 162 429 45040

+ Sign Out +
+
+ +
+
+
+

New Payment Request

+ +
+
+
+
+
+

Inbox

+

1,754.50

+
+
+
+

Next Vault transfer
within 1 month

+
+
+ +
+
+

20.00

+
+ +
+

Next Vault transfer
within 1 month

+
+
+ +
+
+

210.50

+
+ +
+

Next Vault transfer
within 1 month

+
+
+ +
+
+

184.70

+
+ +
+

Next Vault transfer
within 1 month

+
+
+ +
+
+

101.50

+
+ +
+

Next Vault transfer
within 1 month

+
+
+ +
+
+

624.25

+
+
+ +
+
+
+
+ STAKE
TO
VAULT + +

UNDER $75: 1.0% BONUS

+

$300 to $525: 1.5% BONUS

+

OVER $525: 2.0% BONUS

+

Will be transferred back to

+

Inbox on MARCH 28th 2021

+
+
+ Cash
Out + +

Will be transferred by

+

DECEMBER 1st 2021

+
+
+
+
+
+

Vault

+

1,754.50

+
+
+ +
+
+

GUARANTEE FUND 5%

+
+
+ +
+
+

350.25

+
+
+

REFFERAL PROGRAM

+
+
+ +
+
+

155.54

+
+
+

PERSONAL STAKE

+
+
+ +
+
+

615.16

+
+
+
+
+
+ + +
+
+
+
+
\ No newline at end of file diff --git a/src/app/pages/new-dash-board/dash-pg/dash-pg.component.scss b/src/app/pages/new-dash-board/dash-pg/dash-pg.component.scss new file mode 100644 index 00000000..e55d8a30 --- /dev/null +++ b/src/app/pages/new-dash-board/dash-pg/dash-pg.component.scss @@ -0,0 +1,192 @@ +* { + font-family: 'Roboto', sans-serif; + outline: 0; +} + +header { + padding: 10px 0; + background-color: #0814fb; + color: #fff; + a#logo { + text-decoration: none; + color: #fff; + font-size: 40px; + font-weight: bold; + } +} + +input[type=text] { + width: 100%; + padding: 3px 8px; + border: none; + margin: 5px 0; + font-size: 14px; + color: #0814fb; + -webkit-box-shadow: 0 2px 6px 0 #525252; + box-shadow: 0 2px 6px 0 #525252; + background-color: #fff; +} +input[type=text]::placeholder { + color: #0814fb6c; +} + +a.dashBtn { + text-decoration: none; + display: inline-block; + background-color: #0814fb; + color: #fff; + font-size: 16px; + text-align: center; + padding: 10px; + border-radius: 5px; + -webkit-box-shadow: 0 2px 6px 0 #525252; + box-shadow: 0 2px 6px 0 #525252; + display: flex; + align-items: center; + justify-content: center; + i { + display: inline-block; + width: 20px; + height: 20px; + background-color: #fff; + margin-left: 20px; + } +} + +section { + padding: 40px 0; + background-color: #c9e9fa; + .dashSec { + width: 100%; + background-color: rgba(255, 255, 255, 0.4); + -webkit-box-shadow: 0 2px 6px 0 #525252; + box-shadow: 0 2px 6px 0 #525252; + h2 { + text-align: center; + color: #0814fb; + font-size: 20px; + font-weight: 500; + border-bottom: #0814fb solid 1px; + } + aside { + padding: 15px 35px; + i { + width: 80px; + height: 80px; + background-color: #fff; + } + ul { + width: 180px; + padding-left: 0; + li { + list-style: none; + display: flex; + justify-content: space-between; + p { + color: #0814fb; + font-size: 14px; + margin: 2px 0; + } + + } + } + form { + width: 200px; + } + .contact { + width: 220px; + -webkit-box-shadow: 0 2px 6px 0 #525252; + box-shadow: 0 2px 6px 0 #525252; + background-color: #fff; + padding: 10px; + p { + color: #0814fb6c; + font-size: 14px; + margin-bottom: 0; + } + } + a.dashBtn { + // width: 150px; + i.message { + width: 40px; + height: 40px; + background-color: #fff; + } + } + } + } + .row { + margin-top: 40px; + .dashSec { + padding: 10px; + h2 { + font-size: 30px; + font-weight: bold; + border-bottom: none; + small { + font-size: 18px; + font-weight: bold; + } + } + h3 { + font-size: 25px; + color: #0814fb; + } + h4 { + font-size: 20px; + color: #0814fb; + } + i { + width: 20px; + height: 20px; + display: inline-block; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + } + i.dollar { + vertical-align: middle; + background-image: url('/assets/icons/dollar.svg'); + } + i.lock { + width: 100px; + height: 100px; + background-color: #fff; + } + + + .vault { + width: calc(100% - 120px); + } + + P { + font-size: 11px; + margin-bottom: 0; + color: #0814fb; + } + } + aside.dashInner { + width: calc((100% - 60px) / 2); + li { + align-items: center; + justify-content: center !important; + } + i.dollar { + width: 15px; + height: 15px; + margin: 0 5px; + } + h3 { + font-size: 20px; + + } + h4 { + font-size: 16px !important; + margin-bottom: 0; + color: #0814fb8a; + margin-left: 5px; + } + + } + } +} \ No newline at end of file diff --git a/src/app/pages/new-dash-board/dash-pg/dash-pg.component.spec.ts b/src/app/pages/new-dash-board/dash-pg/dash-pg.component.spec.ts new file mode 100644 index 00000000..2c4cd507 --- /dev/null +++ b/src/app/pages/new-dash-board/dash-pg/dash-pg.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashPgComponent } from './dash-pg.component'; + +describe('DashPgComponent', () => { + let component: DashPgComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DashPgComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DashPgComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/new-dash-board/dash-pg/dash-pg.component.ts b/src/app/pages/new-dash-board/dash-pg/dash-pg.component.ts new file mode 100644 index 00000000..a270cccb --- /dev/null +++ b/src/app/pages/new-dash-board/dash-pg/dash-pg.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-dash-pg', + templateUrl: './dash-pg.component.html', + styleUrls: ['./dash-pg.component.scss'] +}) +export class DashPgComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/pages/new-dash-board/new-dash-board-routing.module.ts b/src/app/pages/new-dash-board/new-dash-board-routing.module.ts new file mode 100644 index 00000000..3ddb40e1 --- /dev/null +++ b/src/app/pages/new-dash-board/new-dash-board-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { DashPgComponent } from './dash-pg/dash-pg.component'; + +const routes: Routes = [ + { + path: "dashboard1", + component: DashPgComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class NewDashBoardRoutingModule { } diff --git a/src/app/pages/new-dash-board/new-dash-board.module.ts b/src/app/pages/new-dash-board/new-dash-board.module.ts new file mode 100644 index 00000000..54f959de --- /dev/null +++ b/src/app/pages/new-dash-board/new-dash-board.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { NewDashBoardRoutingModule } from './new-dash-board-routing.module'; +import { DashPgComponent } from './dash-pg/dash-pg.component'; + + +@NgModule({ + declarations: [DashPgComponent], + imports: [ + CommonModule, + NewDashBoardRoutingModule + ] +}) +export class NewDashBoardModule { } diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index 376cc4fa..2fe9cd58 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -18,6 +18,10 @@ const routes: Routes = [{ path: 'iot-dashboard', component: DashboardComponent, }, + { + path: "new", + loadChildren: ()=>import('./new-dash-board/new-dash-board.module').then(m=>m.NewDashBoardModule) + }, { path: 'layout', loadChildren: () => import('./layout/layout.module') diff --git a/src/app/shared/header/header.component.html b/src/app/shared/header/header.component.html new file mode 100644 index 00000000..4a7278de --- /dev/null +++ b/src/app/shared/header/header.component.html @@ -0,0 +1,11 @@ +
+
+ + + + + +

+49 162 429 45040

+ Sign Out +
+
diff --git a/src/app/shared/header/header.component.scss b/src/app/shared/header/header.component.scss new file mode 100644 index 00000000..d8e0926d --- /dev/null +++ b/src/app/shared/header/header.component.scss @@ -0,0 +1,5 @@ +* { + font-family: 'Roboto', sans-serif; + outline: 0; +} + diff --git a/src/app/shared/header/header.component.spec.ts b/src/app/shared/header/header.component.spec.ts new file mode 100644 index 00000000..2d0479d7 --- /dev/null +++ b/src/app/shared/header/header.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/header/header.component.ts b/src/app/shared/header/header.component.ts new file mode 100644 index 00000000..7ab4cf73 --- /dev/null +++ b/src/app/shared/header/header.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-header', + templateUrl: './header.component.html', + styleUrls: ['./header.component.scss'] +}) +export class HeaderComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts new file mode 100644 index 00000000..43756d16 --- /dev/null +++ b/src/app/shared/shared.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { HeaderComponent } from './header/header.component'; +import { RouterModule } from '@angular/router'; + + + +@NgModule({ + declarations: [HeaderComponent], + imports: [ + CommonModule, + RouterModule + ], + exports: [HeaderComponent] +}) +export class SharedModule { }