mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
Updated with dashboard
This commit is contained in:
Geekboots
parent
98166c5274
commit
f85a2eb1f6
19 changed files with 1031 additions and 1 deletions
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',
|
path: 'iot-dashboard',
|
||||||
component: DashboardComponent,
|
component: DashboardComponent,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "new",
|
||||||
|
loadChildren: ()=>import('./new-dash-board/new-dash-board.module').then(m=>m.NewDashBoardModule)
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'layout',
|
path: 'layout',
|
||||||
loadChildren: () => import('./layout/layout.module')
|
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