mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 07:30:12 +01:00
Updated with dashboard
This commit is contained in:
Geekboots
parent
98166c5274
commit
f85a2eb1f6
19 changed files with 1031 additions and 1 deletions
|
|
@ -14,7 +14,7 @@ export const routes: Routes = [
|
|||
path: 'pages',
|
||||
loadChildren: () => import('./pages/pages.module')
|
||||
.then(m => m.PagesModule),
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'auth',
|
||||
component: NbAuthComponent,
|
||||
|
|
|
|||
17
src/app/dashboard/dashboard-routing.module.ts
Normal file
17
src/app/dashboard/dashboard-routing.module.ts
Normal file
|
|
@ -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 { }
|
||||
16
src/app/dashboard/dashboard.module.ts
Normal file
16
src/app/dashboard/dashboard.module.ts
Normal file
|
|
@ -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 { }
|
||||
213
src/app/dashboard/dashboard/dashboard.component.html
Normal file
213
src/app/dashboard/dashboard/dashboard.component.html
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<app-header></app-header>
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="dashSec">
|
||||
<h2>New Payment Request</h2>
|
||||
<aside class="d-flex justify-content-between align-items-center">
|
||||
<i></i>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Minimum Amount:</p>
|
||||
<p>$20.00</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Maximum Amount:</p>
|
||||
<p>$300.00</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Last 7 Days:</p>
|
||||
<p>$1,110,00.00</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>What's Left:</p>
|
||||
<p>$810.00</p>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input type="text" placeholder="Amount">
|
||||
<input type="text" placeholder="Phone Number">
|
||||
<input type="text" placeholder="Reason">
|
||||
</form>
|
||||
<div class="contact">
|
||||
<p>to +49 162 429 45040</p>
|
||||
<p>Hi there's the source link to pay jean Bonbeurre the amount of $20 for a good joke</p>
|
||||
</div>
|
||||
<a href="" class="dashBtn">SEND <br> REQUEST <i class="message"></i></a>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<div class="dashSec px-4">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h2>Inbox</h2>
|
||||
<h3><i class="dollar"></i> 1,754.50</h3>
|
||||
</div>
|
||||
<div class="row text-right">
|
||||
<div class="col-5">
|
||||
<p>Next Vault transfer <br> within 1 month</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>20.00 <i></i></h4>
|
||||
</div>
|
||||
|
||||
<div class="col-5">
|
||||
<p>Next Vault transfer <br> within 1 month</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>210.50 <i></i></h4>
|
||||
</div>
|
||||
|
||||
<div class="col-5">
|
||||
<p>Next Vault transfer <br> within 1 month</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>184.70 <i></i></h4>
|
||||
</div>
|
||||
|
||||
<div class="col-5">
|
||||
<p>Next Vault transfer <br> within 1 month</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>101.50 <i></i></h4>
|
||||
</div>
|
||||
|
||||
<div class="col-5">
|
||||
<p>Next Vault transfer <br> within 1 month</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>624.25 <i></i></h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="dashSec">
|
||||
<a href="" class="dashBtn">STAKE <br> TO <br> VAULT <i></i></a>
|
||||
<input type="text" placeholder="Amount" class="my-3">
|
||||
<p>UNDER $75: 1.0% BONUS</p>
|
||||
<p>$300 to $525: 1.5% BONUS</p>
|
||||
<p class="mb-1">OVER $525: 2.0% BONUS</p>
|
||||
<p>Will be transferred back to </p>
|
||||
<p>Inbox on <strong>MARCH 28th 2021</strong></p>
|
||||
</div>
|
||||
<div class="dashSec mt-4">
|
||||
<a href="" class="dashBtn">Cash <br> Out <i></i></a>
|
||||
<input type="text" placeholder="Amount" class="my-3">
|
||||
<p>Will be transferred by </p>
|
||||
<p><strong>DECEMBER 1st 2021</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="dashSec px-4">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h2>Vault</h2>
|
||||
<h3><i class="dollar"></i> 1,754.50</h3>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<i class="lock"></i>
|
||||
<div class="row vault text-right">
|
||||
<div class="col-5">
|
||||
<p>GUARANTEE FUND 5%</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>350.25 <i></i></h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>REFFERAL PROGRAM</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>155.54 <i></i></h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>PERSONAL STAKE</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>615.16 <i></i></h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-4">
|
||||
<aside class="dashInner">
|
||||
<div class="dashSec">
|
||||
<h2><small> Pending Transfers</small></h2>
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<h4>250.00</h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>Within 4 Days <i></i></p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<h4>100.00</h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>Within 3 Days <i></i></p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<h4>220.00</h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>Within 2 Days <i></i></p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<h4>100.00</h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>Within 1 Days <i></i></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<aside class="dashInner">
|
||||
<div class="dashSec">
|
||||
<h2><small>Cashed Out</small></h2>
|
||||
<h4 class="text-center"><i class="dollar"></i>12.540.00</h4>
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<p>INCLUDING BONUS:</p>
|
||||
<h4><i class="dollar"></i>203.00</h4>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
181
src/app/dashboard/dashboard/dashboard.component.scss
Normal file
181
src/app/dashboard/dashboard/dashboard.component.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
25
src/app/dashboard/dashboard/dashboard.component.spec.ts
Normal file
25
src/app/dashboard/dashboard/dashboard.component.spec.ts
Normal file
|
|
@ -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<DashboardComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DashboardComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
15
src/app/dashboard/dashboard/dashboard.component.ts
Normal file
15
src/app/dashboard/dashboard/dashboard.component.ts
Normal file
|
|
@ -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 {
|
||||
}
|
||||
|
||||
}
|
||||
224
src/app/pages/new-dash-board/dash-pg/dash-pg.component.html
Normal file
224
src/app/pages/new-dash-board/dash-pg/dash-pg.component.html
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
<header>
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<a href="" id="logo">indie</a>
|
||||
<a href="" class="menu"></a>
|
||||
<a href="" class="search"></a>
|
||||
<a href="" class="bell"></a>
|
||||
<a href="" class="menu"></a>
|
||||
<p>+49 162 429 45040</p>
|
||||
<a href="" class="btn">Sign Out</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="dashSec">
|
||||
<h2>New Payment Request</h2>
|
||||
<aside class="d-flex justify-content-between align-items-center">
|
||||
<i></i>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Minimum Amount:</p>
|
||||
<p>$20.00</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Maximum Amount:</p>
|
||||
<p>$300.00</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Last 7 Days:</p>
|
||||
<p>$1,110,00.00</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>What's Left:</p>
|
||||
<p>$810.00</p>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input type="text" placeholder="Amount">
|
||||
<input type="text" placeholder="Phone Number">
|
||||
<input type="text" placeholder="Reason">
|
||||
</form>
|
||||
<div class="contact">
|
||||
<p>to +49 162 429 45040</p>
|
||||
<p>Hi there's the source link to pay jean Bonbeurre the amount of $20 for a good joke</p>
|
||||
</div>
|
||||
<a href="" class="dashBtn">SEND <br> REQUEST <i class="message"></i></a>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<div class="dashSec px-4">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h2>Inbox</h2>
|
||||
<h3><i class="dollar"></i> 1,754.50</h3>
|
||||
</div>
|
||||
<div class="row text-right">
|
||||
<div class="col-5">
|
||||
<p>Next Vault transfer <br> within 1 month</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>20.00 <i></i></h4>
|
||||
</div>
|
||||
|
||||
<div class="col-5">
|
||||
<p>Next Vault transfer <br> within 1 month</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>210.50 <i></i></h4>
|
||||
</div>
|
||||
|
||||
<div class="col-5">
|
||||
<p>Next Vault transfer <br> within 1 month</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>184.70 <i></i></h4>
|
||||
</div>
|
||||
|
||||
<div class="col-5">
|
||||
<p>Next Vault transfer <br> within 1 month</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>101.50 <i></i></h4>
|
||||
</div>
|
||||
|
||||
<div class="col-5">
|
||||
<p>Next Vault transfer <br> within 1 month</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>624.25 <i></i></h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="dashSec">
|
||||
<a href="" class="dashBtn">STAKE <br> TO <br> VAULT <i></i></a>
|
||||
<input type="text" placeholder="Amount" class="my-3">
|
||||
<p>UNDER $75: 1.0% BONUS</p>
|
||||
<p>$300 to $525: 1.5% BONUS</p>
|
||||
<p class="mb-1">OVER $525: 2.0% BONUS</p>
|
||||
<p>Will be transferred back to </p>
|
||||
<p>Inbox on <strong>MARCH 28th 2021</strong></p>
|
||||
</div>
|
||||
<div class="dashSec mt-4">
|
||||
<a href="" class="dashBtn">Cash <br> Out <i></i></a>
|
||||
<input type="text" placeholder="Amount" class="my-3">
|
||||
<p>Will be transferred by </p>
|
||||
<p><strong>DECEMBER 1st 2021</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="dashSec px-4">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h2>Vault</h2>
|
||||
<h3><i class="dollar"></i> 1,754.50</h3>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<i class="lock"></i>
|
||||
<div class="row vault text-right">
|
||||
<div class="col-5">
|
||||
<p>GUARANTEE FUND 5%</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>350.25 <i></i></h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>REFFERAL PROGRAM</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>155.54 <i></i></h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>PERSONAL STAKE</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>615.16 <i></i></h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-4">
|
||||
<aside class="dashInner">
|
||||
<div class="dashSec">
|
||||
<h2><small> Pending Transfers</small></h2>
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<h4>250.00</h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>Within 4 Days <i></i></p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<h4>100.00</h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>Within 3 Days <i></i></p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<h4>220.00</h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>Within 2 Days <i></i></p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<i class="dollar"></i>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<h4>100.00</h4>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<p>Within 1 Days <i></i></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<aside class="dashInner">
|
||||
<div class="dashSec">
|
||||
<h2><small>Cashed Out</small></h2>
|
||||
<h4 class="text-center"><i class="dollar"></i>12.540.00</h4>
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<p>INCLUDING BONUS:</p>
|
||||
<h4><i class="dollar"></i>203.00</h4>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
192
src/app/pages/new-dash-board/dash-pg/dash-pg.component.scss
Normal file
192
src/app/pages/new-dash-board/dash-pg/dash-pg.component.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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<DashPgComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DashPgComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DashPgComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
15
src/app/pages/new-dash-board/dash-pg/dash-pg.component.ts
Normal file
15
src/app/pages/new-dash-board/dash-pg/dash-pg.component.ts
Normal file
|
|
@ -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 {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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 { }
|
||||
15
src/app/pages/new-dash-board/new-dash-board.module.ts
Normal file
15
src/app/pages/new-dash-board/new-dash-board.module.ts
Normal file
|
|
@ -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 { }
|
||||
|
|
@ -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')
|
||||
|
|
|
|||
11
src/app/shared/header/header.component.html
Normal file
11
src/app/shared/header/header.component.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<header>
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<a href="" id="logo">indie</a>
|
||||
<a href="" class="menu"></a>
|
||||
<a href="" class="search"></a>
|
||||
<a href="" class="bell"></a>
|
||||
<a href="" class="menu"></a>
|
||||
<p>+49 162 429 45040</p>
|
||||
<a href="" class="btn">Sign Out</a>
|
||||
</div>
|
||||
</header>
|
||||
5
src/app/shared/header/header.component.scss
Normal file
5
src/app/shared/header/header.component.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
* {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
25
src/app/shared/header/header.component.spec.ts
Normal file
25
src/app/shared/header/header.component.spec.ts
Normal file
|
|
@ -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<HeaderComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HeaderComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HeaderComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
15
src/app/shared/header/header.component.ts
Normal file
15
src/app/shared/header/header.component.ts
Normal file
|
|
@ -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 {
|
||||
}
|
||||
|
||||
}
|
||||
16
src/app/shared/shared.module.ts
Normal file
16
src/app/shared/shared.module.ts
Normal file
|
|
@ -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 { }
|
||||
Loading…
Add table
Add a link
Reference in a new issue