angular changes

This commit is contained in:
KarthiKeyanZ 2022-12-23 10:16:25 +00:00
parent bf7430d36f
commit 892f113708
44 changed files with 4383 additions and 1344 deletions

View File

@ -1,11 +1,10 @@
<footer class="bg-white bg-transparent">
<footer class="bg-white bg-transparent">
<div class="footer">
<div class="container">
<div class="footer_div py-4">
<div class="row">
<!-- <div class="col-md-4"> -->
<div class="col-sm-6">
<div class="col-sm-12">
<!-- <span class="txt_primary">Epic </span><span
class="txt_secondary">Explorer</span> -->
<div class="logo_img">
@ -14,32 +13,47 @@
<img src="/assets/img/ftrlogo_dark.png" height="50" class="dark_theme_display">
</a>
</div>
</div>
<div class="col-md-5 col-lg-6 ftr_services d-none">
<p><span class="gray_txt">Services:</span> <a href="#">Compare </a> | <a href="#">Charts New </a> | <a href="#">Feed </a> |
<a href="#">Broadcast </a> | <a href="#">Markets </a> | <a href="#">Dumps </a> <span class="ftr_links"><a href="#">About </a> | <a href="#">Issues and Requests </a> |
<a href="#">API </a> | <a href="#">Contacts </a> | <a href="#">Status </a></span></p>
<div class="col-md-12 ftr_services">
<p><a href="#">Compare </a> | <a href="#">Charts New </a> | <a href="#">Feed </a> |
<a href="#">Broadcast </a> | <a href="#">Markets </a> | <a href="#">Dumps </a> <span class="ftr_links d-block"><a
href="#">About </a> | <a href="#">Issues and Requests </a> |
<a href="#">API </a> | <a href="#">Contacts </a> | <a href="#">Status </a></span>
</p>
</div>
<div class="col-md-4 d-none">
<p class="txt_primary privacy_txt mb-0 mt-2 pt-1 ">We care about your Privacy! <a href="#">Read Our Privacy Policy</a></p>
<div class="col-md-12">
<p class="privacy_txt mb-0 mt-2 pt-1 ">We care about your Privacy! <a href="#">Read Our Privacy
Policy</a></p>
</div>
<!-- <div class="col-md-3 col-lg-4 text-right"> -->
<div class="col-sm-6 text-right ftr_lng">
<a routerLink="/api-index" class="text_underline mr-2" style="font-size: 1rem">API</a>
<div class="dropdown ftr_dropdown pr-2 d-inline-block py-2">
<span class="flag" [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span>
<!-- <div class="mble_view_hdr ml-auto">
<button (click)="ChangeTheme()" class="theme_switch mr-2 btn order-2 order-sm-3"><img
src="assets/img/dark_theme.png" height="20" class="light_theme_display"><img
src="assets/img/light_theme.png" height="20" class="dark_theme_display"></button>
<div class="d-inline-block order-1 order-sm-2 bg-transparent position-relative"> -->
<!-- <span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span> -->
<!--<span class="flag" ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
<select class="langbut ftr_lang mx-1" #langSelect (change)="translate.changeLang(langSelect.value)">
<!-- <select class="langbut py-2 pr-4 pl-2" #langSelect (change)="translate.changeLang(langSelect.value)">
<option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
</select>
<i class="arrow_drpdwn"></i>
<i class="arrow_drpdwn net_dropdwn"></i>
</div>
<button (click)="ChangeTheme()" class="theme_switch btn"><img src="assets/img/dark_theme.webp" height="20" class="light_theme_display"><img src="assets/img/light_theme.webp" height="19" class="dark_theme_display"></button>
</div> -->
<div class="mble_view_hdr mobfix">
<button (click)="ChangeTheme()" class="theme_switch mr-2 btn"><img
src="assets/img/dark_theme.png" height="20" class="light_theme_display"><img
src="assets/img/light_theme.png" height="20" class="dark_theme_display"></button>
<div class="d-inline-block bg-transparent position-relative">
<select class="langbut py-2 pr-4 pl-2" #langSelect (change)="translate.changeLang(langSelect.value)">
<option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</footer>

View File

@ -3,7 +3,7 @@
<a href="https://epic.tech/" target="_blank" class="text_underline mr-2">Epic Cash</a>
<a routerLink="/api-index" class="text_underline mr-2">API</a>
<span>You are viewing </span>
<select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-1">
<select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-2">
<!-- <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option> -->
<option value="Testnet" disabled [selected]="'Testnet' == getNetwork()">MainNet</option>
<!-- <option disabled value="Mainnet">MainNet</option> -->
@ -50,7 +50,7 @@
<a href="https://epic.tech/" target="_blank" class="text_underline mr-2">Epic Cash</a>
<a routerLink="/api-index" class="text_underline mr-2">API</a>
<span>You are viewing </span>
<select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-1">
<select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-2">
<!-- <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option> -->
<option value="Testnet" disabled [selected]="'Testnet' == getNetwork()">MainNet</option>
<!-- <option disabled value="Mainnet">MainNet</option> -->

View File

@ -1,4 +1,4 @@
<epic-explorer-header></epic-explorer-header>
<epic-explorer-siteheader></epic-explorer-siteheader>
<div >
<!-- [ngStyle]="{ 'min-height': screenHeight + 'px' }" -->
<router-outlet></router-outlet>

View File

@ -0,0 +1,17 @@
<div>
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class="bg-white1">
<!-- <div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div> -->
<div class="loader-4 center"><span></span></div>
</div>
</div>

View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { TransServiceService } from '../../services/trans-service.service';
@Component({
selector: 'epic-explorer-loading',
templateUrl: './loading.component.html',
styleUrls: ['./loading.component.css'],
})
export class LoadingComponent implements OnInit {
constructor() {}
ngOnInit() {}
}

View File

@ -1,27 +1,30 @@
<nav class="navbar navbar-expand-lg navbar-light view_page_header">
<div class="container">
<a class="navbar-brand chart_heading d-sm-block d-none" routerLink="/">
<!-- <span class="txt_primary">Epic </span><span>Explorer</span> -->
<div class="logo_img">
<a routerLink="/" class="chart_heading d-inline-block p-0">
<!-- <span class="txt_primary">Epic </span><span>Explorer</span> -->
<a class="navbar-brand chart_heading" routerLink="/">
<img src="/assets/img/ftrlogo_light.png" height="50" class="light_theme_display">
<img src="/assets/img/ftrlogo_dark.png" height="50" class="dark_theme_display">
</a>
</div>
</a>
<div class="ml-auto ">
<a class="chart_heading d-sm-none" routerLink="/"> <img src="/assets/img/ftrlogo_light.png" height="30" class="light_theme_display">
<img src="/assets/img/ftrlogo_dark.png" height="30" class="dark_theme_display"></a>
<div class=" d-none d-sm-inline-block mr-3 position-relative">
<span>You are viewing </span>
<select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-1">
<ul class="navbar-nav">
<li class="nav-item"><a href="https://epic.tech/" target="_blank" class="nav-link">Epic Cash</a></li>
<li class="nav-item"><a href="/api-index" class="nav-link">API</a></li>
<li class="nav-item yrvsel">
<span class="small">You are viewing </span>
<!-- <i class="arrow_drpdwn net_dropdwn" for="fmnet"></i> -->
<select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-2" id="fmnet">
<!-- <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option> -->
<option value="Testnet" disabled [selected]="'Testnet' == getNetwork()">MainNet</option>
<option value="Testnet" [selected]="'Testnet' == getNetwork()">MainNet</option>
<!-- <option disabled value="Mainnet">MainNet</option> -->
</select>
<i class="arrow_drpdwn net_dropdwn" ></i>
</li>
</ul>
<!-- <ul class="list-unstyled d-inline-block">
<li class="nav-item dropdown">
@ -37,50 +40,42 @@
</li>
</ul> -->
<!-- <span> Network </span> -->
</div>
<div class="position-relative d-none d-sm-inline-block">
<input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input bg_gray"
(keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="Search by hash or height">
<button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
<!-- <a href="/blockdetail/{{ ctrl.value }}" > -->
<i class="fa fa-search"></i>
<!-- </a> -->
</button>
</div>
<div class="mble_view_hdr">
<div class="nav-item dropdown bg-white px-2 d-inline-block ml-2 order-1 order-sm-2">
<span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span>
<!--<span class="flag" ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
<select class="langbut py-2 mx-1" #langSelect (change)="translate.changeLang(langSelect.value)">
<option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
</select>
<i class="arrow_drpdwn"></i>
</div>
<button (click)="ChangeTheme()" class="theme_switch mr-2 btn order-2 order-sm-3"><img
<div class="mble_view_hdr ml-auto">
<button (click)="ChangeTheme()" class="theme_switch mr-2 btn"><img
src="assets/img/dark_theme.png" height="20" class="light_theme_display"><img
src="assets/img/light_theme.png" height="20" class="dark_theme_display"></button>
</div>
<div class="d-inline-block bg-transparent position-relative">
<!-- <span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span> -->
<!--<span class="flag" ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
<select class="langbut py-2 pr-4 pl-2" #langSelect (change)="translate.changeLang(langSelect.value)">
<option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
</select>
<!-- <i class="arrow_drpdwn net_dropdwn"></i> -->
</div>
<div class="position-relative d-block d-sm-none w-100 mt-3">
</div>
<!-- <div class="position-relative d-block d-sm-none w-100 mt-3">
<input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input bg_gray"
(keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="{{'home.SEARCH_TEXT' | translate}}">
<button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
<button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''"> -->
<!-- <a href="/blockdetail/{{ ctrl.value }}" > -->
<i class="fa fa-search"></i>
<!-- <i class="fa fa-search"></i> -->
<!-- </a> -->
</button>
<!-- </button>
</div>
<div class="d-block d-sm-none text-center mt-3 mx-auto position-relative">
<span>You are viewing </span>
<select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-1">
<!-- <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option> -->
<option value="Testnet" disabled [selected]="'Testnet' == getNetwork()">MainNet</option>
<select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-2">
<option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option>
<option value="Testnet" [selected]="'Testnet' == getNetwork()">MainNet</option> -->
<!-- <option disabled value="Mainnet">MainNet</option> -->
</select>
<i class="arrow_drpdwn net_dropdwn" ></i>
<!-- </select> -->
<!-- <i class="arrow_drpdwn net_dropdwn" ></i> -->
<!-- <ul class="list-unstyled d-inline-block">
<li class="nav-item dropdown">
@ -96,6 +91,14 @@
</li>
</ul> -->
<!-- <span> Network </span> -->
</div>
<!-- </div> -->
<!-- <div class="position-relative d-none d-sm-inline-block">
<input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input bg_gray"
(keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="Search by hash or height">
<button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
<i class="fa fa-search"></i>
</button>
</div> -->
</div>
</nav>

View File

@ -0,0 +1 @@
<div class="subloader"><span class="loader-17"></span></div>

View File

@ -0,0 +1,13 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'epic-explorer-subloading',
templateUrl: './subloading.component.html',
styleUrls: ['./subloading.component.css'],
})
export class SubloadingComponent implements OnInit {
constructor() {}
ngOnInit() {}
}

View File

@ -47,6 +47,16 @@ export class ChartService {
catchError((error: HttpErrorResponse): any => throwError(error))
);
}
public apiGetEpicLTP(): Observable<any> {
return this.http
.get(`https://api.vitex.net/api/v2/market?symbol=EPIC-002_USDT-000`)
.pipe(
map(res => {
return res;
}),
catchError((error: HttpErrorResponse): any => throwError(error))
);
}
public getHttpheader(){
var network;
@ -61,10 +71,10 @@ export class ChartService {
public getLatestblockdetails() {
if(this.socket==null){
this.socket = io.connect(this.server, {transport: 'websocket', requestTimeout:100000000,query: 'network='+this.socketnetwork});
this.socket.heartbeatTimeout = 200000
}
// if(this.socket==null){
// this.socket = io.connect(this.server, {transport: 'websocket', requestTimeout:100000000,query: 'network='+this.socketnetwork});
// this.socket.heartbeatTimeout = 200000
// }
return Observable.create(observer => {
this.socket.on("latestblockdetail", response => {
observer.next(response);

View File

@ -16,6 +16,8 @@ import { ChartService} from '../shared/services/chart.service';
import { PlotlyComponent } from './components/plotly/plotly.component';
import { CustomLoader } from '../app.module';
import { LoadingComponent } from './components/loading/loading.component';
import { SubloadingComponent } from './components/subloading/subloading.component';
const components = [
@ -25,6 +27,8 @@ const components = [
SearchComponent,
SiteLayoutComponent,
SiteheaderComponent,
LoadingComponent,
SubloadingComponent,
PlotlyComponent
];

View File

@ -1,37 +1,62 @@
<div class="view_content py-4">
<div class="view_content pb-4 apilinks">
<div class="container">
<div class="box_shadow p-3">
<h3 class="txt_primary">{{'api-view.query-api' | translate}}</h3>
<p class="txt_secondary">
<p class="txt_secondary1">
{{'api-view.query-api-line1' | translate}} <code>q</code> parameter.<br>
{{'api-view.query-api-line2' | translate}} "<i>https://explorer.epic.tech/api?q=totalcoins</i>".
</p>
</div>
</div>
<div class="container">
<div class="box_shadow p-3">
<h4 class="txt_primary">{{'api-view.real-time-simple-query' | translate}}</h4>
<ul class="txt_secondary">
<ul class="txt_secondary1">
<li><b><a target="_blank" href="./api?q=circulating" >circulating</a></b>: {{'api-view.circulating' | translate}} </li>
<li><b><a target="_blank" href="./api?q=getblockcount"> getblockcount </a></b>: {{'api-view.getblockcount' | translate}}</li>
<li><b><a target="_blank" href="./api?q=getdifficulty-randomx">getdifficulty-randomx</a></b>: {{'api-view.getdifficulty-randomx' | translate}}</li>
<li><b><a target="_blank" href="./api?q=getdifficulty-progpow">getdifficulty-progpow</a></b>: {{'api-view.getdifficulty-progpow' | translate}}</li>
<li><b><a target="_blank" href="./api?q=getdifficulty-cuckoo">getdifficulty-cuckoo</a></b>: {{'api-view.getdifficulty-cuckoo' | translate}}</li>
<!-- <li><b><a target="_blank" href="./api?q=gettargetdifficulty-randomx">gettargetdifficulty-randomx</a></b>: {{'api-view.gettargetdifficulty-randomx' | translate}}</li>
<li><b><a target="_blank" href="./api?q=gettargetdifficulty-progpow">gettargetdifficulty-progpow</a></b>: {{'api-view.gettargetdifficulty-progpow' | translate}}</li>
<li><b><a target="_blank" href="./api?q=gettargetdifficulty-cuckoo">gettargetdifficulty-cuckoo</a></b>: {{'api-view.gettargetdifficulty-cuckoo' | translate}}</li>
<li><b><a target="_blank" href="./api?q=getnetworkhashrate-randomx">getnetworkhashrate-randomx</a></b>: {{'api-view.getnetworkhashrate-randomx' | translate}}</li>
<li><b><a target="_blank" href="./api?q=getnetworkhashrate-progpow">getnetworkhashrate-progpow</a></b>: {{'api-view.getnetworkhashrate-progpow' | translate}}</li>
<li><b><a target="_blank" href="./api?q=getnetworkhashrate-cuckoo">getnetworkhashrate-cuckoo</a></b>: {{'api-view.getnetworkhashrate-cuckoo' | translate}}</li> -->
<li><b><a target="_blank" href="./api?q=totalcoins">totalcoins</a></b>: {{'api-view.totalcoins' | translate}}</li>
<li><b><a target="_blank" href="./api?q=maxcoins">maxcoins</a></b>: {{'api-view.maxcoins' | translate}}</li>
<li><b><a target="_blank" href="./api?q=reward">reward</a></b>: {{'api-view.reward' | translate}}</li>
<li><b><a target="_blank" href="./api?q=average-blocktime">average-blocktime</a></b>: {{'api-view.averageblocktime' | translate}}</li>
</ul>
</div>
</div>
<div class="container">
<div class="box_shadow p-3">
<h4 class="txt_primary">{{'api-view.Block-Queries' | translate}}</h4>
<p class="txt_secondary">
<p class="txt_secondary1">
{{'api-view.block-query-text' | translate}}
</p>
<ul class="txt_secondary">
<ul class="txt_secondary1">
<li><b><a target="_blank" href="./api?q=getblockhash&height=1" >getblockhash</a></b>: takes a <code>height</code> {{'api-view.getblockhash' | translate}}</li>
<li><b><a target="_blank" href="./api?q=getblockheight&hash=3933f075332670a661d2271218969770c8396a2853777d5912c9ad4797e9c7e6" >getblockheight</a></b>: takes a <code>hash</code> {{'api-view.getblockheight' | translate}}</li>
<li><b><a target="_blank" href="./api?q=getblocktime&height=2" >getblocktime</a></b>: takes a <code>height</code> {{'api-view.getblocktime' | translate}}</li>
</ul>
</div>
</div>
<div class="container">
<div class="box_shadow p-3">
<h4 class="txt_primary">{{'api-view.Note' | translate}}</h4>
<span>
If you require another API, please request it by contacting an admin at <a href ="https://t.me/epiccash" > t.me/epiccash </a></span>
</div>
</div>
</div>
</div>

View File

@ -43,7 +43,7 @@ export class BlockDetailComponent implements OnInit {
: false;
}, 1000);
this.titleService.setTitle(this.route.snapshot.data.title);
this.latestcomp.gettinglatesthashList().then(res => {
this.latestcomp.gettinglatesthashList(true).then(res => {
this.latestblockHeight = this.latestcomp.latestblockdetail.block_height;
});
}

View File

@ -1,4 +1,4 @@
<div class="view_content detail_graph py-4">
<div class="view_content detail_graph pb-5">
<div class="container">
<!-- <div *ngIf="this.title=='Total Difficulty'" class="row ">

View File

@ -24,7 +24,190 @@
</div>
</div>
</div> -->
<div class="row" *ngIf="latestblockdetail">
<div class="row">
<div class="col-sm-7 col-md-8 mb-4">
<div class="position-relative">
<epic-explorer-search></epic-explorer-search>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="blockchain_firstrow alignltp">
<div class="detailsloading" *ngIf="!epicData">
<epic-explorer-loading></epic-explorer-loading>
</div>
<div class="epbbox" *ngIf="epicData">
<div class="epicbrandlogo">
<a href="https://x.vite.net/trade?symbol=EPIC-002_USDT-000" target="_blank">
<img src="assets/img/vite.png" class="exchangelogo" alt=""/>
</a>
</div>
<p class="block_value_v2 epicprice ml-3">
<span class="epicpricetxt">1 <span class="small">Epic</span> = </span><span class="small">$</span>{{epicData.lastPrice}}
</p>
</div>
</div>
<!-- <div class="col-sm-4" *ngIf="epicData.highPrice">
<p class="block_heading">{{ "High" | translate }}</p>
<p
class="block_value_v2 hidezero"
>
<ng2-odometer [number]="epicData.highPrice" [config]="{ format:'(,ddd).dd' }"></ng2-odometer>
</p>
</div>
<div class="col-sm-4" *ngIf="epicData.lowPrice">
<p class="block_heading">{{ "Low" | translate }}</p>
<p
class="block_value_v2 hidezero"
>
<ng2-odometer [number]="epicData.lowPrice" [config]="{ format:'(,ddd).dd' }"></ng2-odometer>
</p>
</div> -->
</div>
<div class="col-md-12">
<div class="blockchain_firstrow">
<div class="detailsloading" *ngIf="!latestblockdetail.block_height">
<epic-explorer-loading></epic-explorer-loading>
</div>
<div class="row" *ngIf="latestblockdetail.block_height">
<div class="col-md-6">
<div class="row">
<div class="col-6 col-md-7 drawline">
<!-- <p class="block_heading">{{ "home.BLOCKCHAIN_HEIGHT" | translate }}</p> -->
<p class="block_heading">{{ "home.BLOCKCHAIN_HEIGHT" | translate }}</p>
<p class="block_value lgtxtwid" [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''">
<ng2-odometer [number]="Block_height" [config]="{ }"></ng2-odometer>
<!-- {{ latestblockdetail.block_height | number }} -->
</p>
</div>
<!-- <div class="col-md-3">
<p class="block_heading">{{ "home.BLOCKCHAIN_SIZE" | translate }}</p>
<p
class="block_value_v2"
[ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
>
{{ latestblockdetail.diskSpace }}
</p>
</div> -->
<div class="col-6 col-md-5 drawline">
<p class="block_heading">Blockchain Size</p>
<p class="block_value_v2 mt-1 medtxtwid" [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''">
<ng2-odometer [number]="3.71" [config]="{ format:'(,ddd).dd' }"></ng2-odometer>G
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-6 drawline">
<p class="block_heading">{{ "home.LATEST_BLOCK_AGE" | translate }}</p>
<p class="block_value_v2 medtxtwid" [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''">
<ng2-odometer [number]="Block_latest" [config]="{ }"></ng2-odometer>
<!-- {{ latestblockdetail.letest_block_num | number }} -->
</p>
<span class="smalltext">{{ latestblockdetail.letest_block_duration }}</span>
</div>
<div class="col-6">
<p class="block_heading">{{ "home.CIRCULATING_SUPPLY" | translate }}</p>
<p class="block_value_v2 medtxtwid" [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''">
<ng2-odometer [number]="Block_supply" [config]="{ }"></ng2-odometer>
<!-- {{ latestblockdetail.coin_existence | number }} -->
</p>
<span class="smalltext">Epic</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 targetandhashrate">
<div class="blockchain_firstrow bc_sixcls">
<div class="detailsloading" *ngIf="!latestblockdetail.targetdifficultycuckatoo || !ShowSecondBlock">
<epic-explorer-loading></epic-explorer-loading>
</div>
<div class="row" *ngIf="latestblockdetail.targetdifficultycuckatoo && ShowSecondBlock">
<div class="col-md-6">
<p class="block_heading">{{ "home.CURRENT_TARGET_DIFF" | translate }}</p>
<div class="row">
<div class="col-sm-4 col-md-3 drawline">
<p class="subheading">
Cuckoo
</p>
<p class="subvalue smatxtwid">
<ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer>
<!-- {{ latestblockdetail.targetdifficultycuckatoo | number }} -->
</p>
</div>
<div class="col-sm-4 col-md-5 drawline">
<p class="subheading">
ProgPoW
</p>
<epic-explorer-subloading *ngIf="!CTD_2"></epic-explorer-subloading>
<p class="subvalue smatxtwid" *ngIf="CTD_2">
<ng2-odometer [number]="CTD_2" [config]="{ }"></ng2-odometer>
<!-- {{ latestblockdetail.targetdifficultyprogpow | number }} -->
</p>
</div>
<div class="col-sm-4 col-md-4 drawline">
<p class="subheading">
RandomX
</p>
<epic-explorer-subloading *ngIf="!CTD_3"></epic-explorer-subloading>
<p class="subvalue smatxtwid" *ngIf="CTD_3">
<ng2-odometer [number]="CTD_3" [config]="{ }"></ng2-odometer>
<!-- {{ latestblockdetail.targetdifficultyrandomx | number }} -->
</p>
</div>
</div>
</div>
<div class="col-md-6">
<p class="block_heading">{{ "home.HASHRATE" | translate }}</p>
<div class="row">
<div class="col-sm-4 col-md-3 drawline">
<p class="subheading">
Cuckoo
</p>
<p class="subvalue smatxtwid">
<ng2-odometer [number]="NW_1" [config]="{ }"></ng2-odometer> Gps
<!-- {{ latestblockdetail.cuckoohashrate | number }} Gps -->
</p>
</div>
<div class="col-sm-4 col-md-5 drawline">
<p class="subheading">
ProgPoW
</p>
<epic-explorer-subloading *ngIf="!NW_2"></epic-explorer-subloading>
<p class="subvalue smatxtwid" *ngIf="NW_2">
<ng2-odometer [number]="NW_2" [config]="{ }"></ng2-odometer> Hps
<!-- {{ latestblockdetail.progpowhashrate | number }} Hps -->
</p>
</div>
<div class="col-sm-4 col-md-4">
<p class="subheading">
RandomX
</p>
<epic-explorer-subloading *ngIf="!NW_3"></epic-explorer-subloading>
<p class="subvalue smatxtwid" *ngIf="NW_3">
<ng2-odometer [number]="NW_3" [config]="{ }"></ng2-odometer> Hps
<!-- {{ latestblockdetail.randomxhashrate | number }} Hps -->
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="row" *ngIf="latestblockdetail">
<div class="col-md-4 col-xl-2">
<div
class="text-center detail_div"
@ -61,45 +244,6 @@
</div>
</div>
<!-- <div class="col-md-3">
<div class="text-center detail_div" #minhgt>
<p class="mb-2 desc">{{ "home.CURRENT_TARGET_DIFF" | translate }}</p>
<div
class=" text-center d-inline-block"
[ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
>
<p class="difficulty_datas">Cuckaroo : {{latestblockdetail.targetdifficultycuckaroo | number}} / {{latestblockdetail.TotalDifficultyCuckatoo | number}}</p>
<div class="difficulty_datas">
<span class="day60_txt">Cuckoo : </span>
<span>Target:</span>
<span>{{ latestblockdetail.targetdifficultycuckatoo | number }}</span>
<span>Total :</span><span>{{ latestblockdetail.TotalDifficultyCuckatoo | number }}</span>
</div>
<div class="difficulty_datas">
<span class="day60_txt">ProgPow : </span>
<span>Target:</span>
<span class="diff_span" style="width:85px;" title="{{ latestblockdetail.targetdifficultyprogpow | number }}">{{ latestblockdetail.targetdifficultyprogpow | number }}</span>
<span>Total:</span><span class="diff_span" title="{{ latestblockdetail.TotalDifficultyProgpow | number }}">{{ latestblockdetail.TotalDifficultyProgpow | number }}</span>
</div>
<div class="difficulty_datas">
<span class="day60_txt"> RandomX : </span>
<span>Target:</span>
<span>{{ latestblockdetail.targetdifficultyrandomx | number }}</span>
<span>Total:</span><span>{{ latestblockdetail.TotalDifficultyRandomx | number }}</span>
</div>
<p class="difficulty_datas">
ProgPow : {{ latestblockdetail.targetdifficultyprogpow | number }} /
{{ latestblockdetail.TotalDifficultyProgpow | number }}
</p>
<p class="difficulty_datas">
RandomX : {{ latestblockdetail.targetdifficultyrandomx | number }} /
{{ latestblockdetail.TotalDifficultyRandomx | number }}
</p>
</div>
</div>
</div> -->
<div class="col-md-4 col-xl-2">
<div
class="text-center detail_div"
@ -138,31 +282,6 @@
</div>
</div>
<!-- <div class="col-md-3">
<div class="text-center detail_div" #minhgt>
<p class="mb-2 desc">{{ "home.CURRENT_TOTAL_DIFF" | translate }}</p>
<div
class=" text-left mx-auto d-inline-block"
[ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
>
<div class="difficulty_datas">
<span class="day60_txt">Cuckoo &nbsp;&nbsp;&nbsp;&nbsp;: </span>
<span> {{ latestblockdetail.TotalDifficultyCuckatoo | number }}</span>
</div>
<div class="difficulty_datas">
<span class="day60_txt">ProgPow &nbsp;&nbsp;: </span>
<span class="diff_span" style="width:110px;" title="{{ latestblockdetail.TotalDifficultyProgpow | number }}"> {{ latestblockdetail.TotalDifficultyProgpow | number }}</span>
</div>
<div class="difficulty_datas">
<span class="day60_txt"> RandomX &nbsp;: </span>
<span > {{ latestblockdetail.TotalDifficultyRandomx | number }}</span>
</div>
</div>
</div>
</div> -->
<div class="col-md-6 mt-md-3 mt-xl-0 col-xl-3">
<div
class="text-center detail_div"
@ -198,4 +317,4 @@
</div>
</div>
</div> -->

View File

@ -15,11 +15,32 @@ export class BlockDetailListComponent implements OnInit {
public latestblockdetail: any = [];
public prevouslatestblockdetails: any = [];
public latestblockdetailObservable: any;
public epicData:any;
private server = environment.domain;
private socket;
ShowSecondBlock = false;
CTD_1;
CTD_2;
CTD_3;
NW_1;
NW_2;
NW_3;
Block_height;
Block_latest;
Block_supply;
timeout_1;
timeout_2;
timeout_3;
timeout_4;
timeout_5;
timeout_6;
timeout_7;
timeout_8;
timeout_9;
@ViewChild("minhgt", { static: false }) elementView: ElementRef;
minHeight: number;
apiInterval;
constructor(
private chartService: ChartService,
@ -29,13 +50,23 @@ export class BlockDetailListComponent implements OnInit {
}
ngOnInit() {
this.gettinglatesthashList();
this.gettingprevioushashList();
this.getBlockDetails();
this.getEpicLTP();
//console.log("Enter Nginit");
}
ngAfterViewInit() {
setTimeout(() => {
this.gettinglatesthashList(false);
console.log('gettinglatesthashList v1');
this.apiInterval = setInterval(() => {
console.log('gettinglatesthashList v2');
this.gettinglatesthashList(false);
this.getEpicLTP();
}, 60 * 1000);
}, 14 * 1000);
// this.minHeight = this.elementView.nativeElement.offsetHeight;
}
@ -57,8 +88,60 @@ export class BlockDetailListComponent implements OnInit {
});
}
public gettinglatesthashList() {
return new Promise((resolve, reject) => {
public getEpicLTP() {
return new Promise<void>((resolve, reject) => {
this.chartService
.apiGetEpicLTP()
.subscribe(
res => {
if (res["msg"] == 'ok') {
console.log(res.data);
this.epicData = res.data;
resolve();
}
},
error => {}
);
});
}
public gettingprevioushashList() {
return new Promise<void>((resolve, reject) => {
this.chartService
.apiGetRequest("", "/blockchain_block/previousblockdetails")
.subscribe(
res => {
if (res["status"] == 200) {
// var hasharray = res.response;
this.latestblockdetail = res.response;
// setInterval(() => this.incrementseconds(), 1000);
this.latestblockdetail["blink"] = false;
setTimeout(() => {
this.ShowSecondBlock = true;
}, 4000);
this.Block_height = res.response.block_height;
this.Block_latest = res.response.letest_block_num;
this.Block_supply = res.response.coin_existence;
this.CTD_1 = res.response.targetdifficultycuckatoo;
this.NW_1 = res.response.cuckoohashrate;
setTimeout(() => {
this.CTD_2 = res.response.targetdifficultyprogpow;
this.NW_2 = res.response.progpowhashrate;
}, 8000);
setTimeout(() => {
this.CTD_3 = res.response.targetdifficultyrandomx;
this.NW_3 = res.response.randomxhashrate;
}, 12000);
resolve();
}
},
error => {}
);
});
}
public gettinglatesthashList(init) {
return new Promise<void>((resolve, reject) => {
this.chartService
.apiGetRequest("", "/blockchain_block/latesblockdetails")
.subscribe(
@ -68,6 +151,52 @@ export class BlockDetailListComponent implements OnInit {
this.latestblockdetail = res.response;
// setInterval(() => this.incrementseconds(), 1000);
this.latestblockdetail["blink"] = false;
if(init){
setTimeout(() => {
this.ShowSecondBlock = true;
}, 4000);
this.Block_height = res.response.block_height;
this.Block_latest = res.response.letest_block_num;
this.Block_supply = res.response.coin_existence;
this.CTD_1 = res.response.targetdifficultycuckatoo;
this.NW_1 = res.response.cuckoohashrate;
setTimeout(() => {
this.CTD_2 = res.response.targetdifficultyprogpow;
this.NW_2 = res.response.progpowhashrate;
}, 10000);
setTimeout(() => {
this.CTD_3 = res.response.targetdifficultyrandomx;
this.NW_3 = res.response.randomxhashrate;
}, 15000);
}else{
this.timeout_1 = setTimeout(() => {
this.Block_height = res.response.block_height;
}, 5*1000);
this.timeout_2 = setTimeout(() => {
this.Block_latest = res.response.letest_block_num;
}, 10*1000);
this.timeout_3 = setTimeout(() => {
this.Block_supply = res.response.coin_existence;
}, 15*1000);
this.timeout_4 = setTimeout(() => {
this.NW_1 = res.response.cuckoohashrate;
}, 20*1000);
this.timeout_5 = setTimeout(() => {
this.NW_2 = res.response.progpowhashrate;
}, 25*1000);
this.timeout_6 = setTimeout(() => {
this.NW_3 = res.response.randomxhashrate;
}, 30*1000);
this.timeout_7 = setTimeout(() => {
this.CTD_1 = res.response.targetdifficultycuckatoo;
}, 35*1000);
this.timeout_8 = setTimeout(() => {
this.CTD_2 = res.response.targetdifficultyprogpow;
}, 40*1000);
this.timeout_9 = setTimeout(() => {
this.CTD_3 = res.response.targetdifficultyrandomx;
}, 45*1000);
}
resolve();
}
},
@ -81,6 +210,17 @@ export class BlockDetailListComponent implements OnInit {
}
ngOnDestroy() {
clearInterval(this.apiInterval);
clearTimeout(this.timeout_1);
clearTimeout(this.timeout_2);
clearTimeout(this.timeout_3);
clearTimeout(this.timeout_4);
clearTimeout(this.timeout_5);
clearTimeout(this.timeout_6);
clearTimeout(this.timeout_7);
clearTimeout(this.timeout_8);
clearTimeout(this.timeout_9);
this.latestblockdetailObservable
? this.latestblockdetailObservable.unsubscribe()
: null;

View File

@ -0,0 +1,18 @@
#wrapper {
overflow: hidden;
width: 100%;
position: absolute;
top: 0px;
height: 100%;
}
#mapdiv {
margin: auto;
position: relative;
top: 0;
width: 98%;
height: 100%;
border: 1px solid #fff;
border-radius: 0rem;
}

View File

@ -1,12 +1,12 @@
<div class="row">
<div class="col-md-6 col-lg-8 mb-4">
<div class="col-md-6 col-lg-6 mb-2">
<div class="box_shadow" id="target-difficulty">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.TARGET_DIFFICULTY' | translate}}</h2>
<div class="col-sm-121">
<p class="block_heading">{{'home.TARGET_DIFFICULTY' | translate}}</p>
<!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{
this.l | number</span>
}}</span> -->
<div class="chart_show">
<!-- <div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
<a href="JavaScript:void(0);" (click)="
@ -25,19 +25,7 @@
<epic-explorer-plotly *ngIf="linearGraphData.data" [data]="linearGraphData.data" [layout]="linearGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!linearGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class="bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
@ -45,7 +33,7 @@
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day'
" id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primary: true }">1 {{'home.day' | translate}}</a>
" id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primary: true }">1 {{'day' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', '1 week',''); selectedItem = 1; difficultyRange = '1 week'
" id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primary: true }">1 {{'home.WEEK' | translate}}</a>
@ -65,45 +53,28 @@
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', 'all',''); selectedItem = 7; difficultyRange = ''
" id="7" #item7 [ngClass]="{ active: selectedItem == item7.id, day3m_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/target-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a>
<a routerLink="/chart/target-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="col-md-6 col-lg-6 mb-2">
<div class="box_shadow" id="transaction-over-time">
<div class="col-sm-121">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.TRANSACTIONS_BY_TIME' | translate}}</h2>
<p class="block_heading">{{'home.TRANSACTIONS_BY_TIME' | translate}}</p>
<div class="chart_show heatmapshow">
<epic-explorer-plotly *ngIf="heatMapGrowthData.data" [data]="heatMapGrowthData.data"
[layout]="heatMapGrowthData.layout"></epic-explorer-plotly>
<epic-explorer-plotly
*ngIf="heatMapGrowthData.data"
[data]="heatMapGrowthData.data"
[layout]="heatMapGrowthData.layout"
></epic-explorer-plotly>
<div *ngIf="!heatMapGrowthData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="transactionheatmapFunc(tDate, tHour, tInput,'Input'); selectedItem81 = 1" id="1" #item1
[ngClass]="{ active: selectedItem81 == item1.id, txt_primary: true }">{{'home.INPUT' | translate}}</a>
@ -113,35 +84,23 @@
[ngClass]="{ active: selectedItem81 == item3.id, day30_txt: true }">{{'home.OUTPUT' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/transactions-over-time"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a>
<a routerLink="/chart/transactions-over-time"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
</div>
</div>
<div class="col-md-6 col-lg-6 mb-2">
<div class="box_shadow" id="blocks">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.BLOCKS' | translate}}</h2>
<p class="block_heading">{{'home.BLOCKS' | translate}}</p>
<span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *ngIf="this.brg_last">{{
this.brg_last | number
}}</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="barGraphData.data" [data]="barGraphData.data" [layout]="barGraphData.layout"></epic-explorer-plotly>
<div *ngIf="!barGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
@ -168,9 +127,6 @@
<a href="JavaScript:void(0);" (click)="
blockreq('', '', 'all'); selectedItem3 = 7;
" id="7" #item37 [ngClass]="{ active: selectedItem3 == item37.id, day3m_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/blocks"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
@ -178,10 +134,10 @@
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="col-md-6 col-lg-6 mb-2">
<div class="box_shadow" id="supply-growth">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.SUPPLY_GROWTH' | translate}}</h2>
<p class="block_heading">{{'home.SUPPLY_GROWTH' | translate}}</p>
<span class="txn_count" title="{{'home.SUPPLY_GROWTH_HOVER' | translate}}" *ngIf="this.gg_last">{{
this.gg_last | number
}} Epic per block</span>
@ -189,20 +145,7 @@
<epic-explorer-plotly *ngIf="growthGraphData.data" [data]="growthGraphData.data" [layout]="growthGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!growthGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
@ -220,10 +163,6 @@
<a href="JavaScript:void(0);" (click)="
Growthreq('', '', 'all'); selectedItem5 = 7;
" id="7" #item7 [ngClass]="{ active: selectedItem5 == item7.id, day3m_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/supply-growth"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
@ -231,181 +170,18 @@
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="box_shadow" id="transaction-fees">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.TRANSACTION_FEES' | translate}}</h2>
<span style="display:none;" class="txn_count" title="{{'home.TRANSACTION_FEE_HOVER' | translate}}" *ngIf="this.fg_last">{{this.fg_last |number}}</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="transcationGraphData.data" [data]="transcationGraphData.data"
[layout]="transcationGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!transcationGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', '1 week'); selectedItem4 = 1" id="1" #item1
[ngClass]="{ active: selectedItem4 == item1.id, txt_primary: true }">1 {{'home.WEEK' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', '15 days'); selectedItem4 = 2" id="2" #item2
[ngClass]="{ active: selectedItem4 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', '30 days'); selectedItem4 = 3" id="3" #item3
[ngClass]="{ active: selectedItem4 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', '60 days'); selectedItem4 = 4" id="4" #item4
[ngClass]="{ active: selectedItem4 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', '3 months'); selectedItem4 = 5" id="5" #item5
[ngClass]="{ active: selectedItem4 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Transcationreq('', '', 'all'); selectedItem4 = 7;
" id="7" #item7 [ngClass]="{ active: selectedItem4 == item7.id, day3m_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/transaction-fees"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
<div class="box_shadow" id="blocks-mined">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.BLOCKS_MINED' | translate}}</h2>
<span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *ngIf="this.dg_last">{{
this.dg_last | number
}}</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="doubleareaGraphData.data" [data]="doubleareaGraphData.data"
[layout]="doubleareaGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!doubleareaGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '1 week'); selectedItem7 = 1" id="1" #item1
[ngClass]="{ active: selectedItem7 == item1.id, txt_primary: true }">1 {{'home.WEEK' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '15 days'); selectedItem7 = 2" id="2" #item2
[ngClass]="{ active: selectedItem7 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '30 days'); selectedItem7 = 3" id="3" #item3
[ngClass]="{ active: selectedItem7 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '60 days'); selectedItem7 = 4" id="4" #item4
[ngClass]="{ active: selectedItem7 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '3 months'); selectedItem7 = 5" id="5" #item5
[ngClass]="{ active: selectedItem7 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Blockminedreq('', '', 'all'); selectedItem7 = 8;
" id="8" #item8 [ngClass]="{ active: selectedItem7 == item8.id, day3m_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/blocks-mined"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
<!-- <div [ngClass]="{'box_shadow' : true, 'invisible h-0' : viewchart}">
<div [ngClass]="{'blocks' : true, 'invisible h-0' : viewchart}">
<h2 class="chart_heading d-inline-block"><a routerLink="/chart/hashrate-growth-chart">HashRate Growth Chart</a></h2>
<span class="txn_count" *ngIf="this.hg_last">{{
this.hg_last | number
}}</span>
<div class="chart_show">
<plotly-plot *ngIf="blockGraphData.data" [data]="blockGraphData.data" [layout]="blockGraphData.layout">
</plotly-plot>
<div *ngIf="!blockGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" p-3 bg-white">
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
</div>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '1 week'); selectedItem9 = 1" id="1" #item1
[ngClass]="{ active: selectedItem9 == item1.id, txt_primary: true }">1 week</a>
<a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '15 days'); selectedItem9 = 2" id="2" #item2
[ngClass]="{ active: selectedItem9 == item2.id, day15_txt: true }">15 days</a>
<a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '30 days'); selectedItem9 = 3" id="3" #item3
[ngClass]="{ active: selectedItem9 == item3.id, day30_txt: true }">30 days</a>
<a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '60 days'); selectedItem9 = 4" id="4" #item4
[ngClass]="{ active: selectedItem9 == item4.id, day60_txt: true }">60 days</a>
<a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '3 months'); selectedItem9 = 5" id="5" #item5
[ngClass]="{ active: selectedItem9 == item5.id, day3m_txt: true }">3 months</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/hashrate-growth-chart"><span class="text-uppercase d-block">explore it <i
class="fa fa-long-arrow-right"></i></span></a>
</div>
</div> -->
<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-6 mb-2' : true, 'd-none' : viewchart}">
<div class="box_shadow" id="blocks-by-algorithm">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.blocks-by-algorithm' | translate}}</h2>
<p class="block_heading">{{'home.blocks-by-algorithm' | translate}}</p>
<span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *ngIf="this.sg_last">{{
this.sg_last | number
}}</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="stackGraphData.data" [data]="stackGraphData.data" [layout]="stackGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!stackGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class="bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
@ -428,177 +204,121 @@
<a href="JavaScript:void(0);" (click)="
stackchartreq('', '', 'all'); selectedItem10 = 8;
" id="8" #item8 [ngClass]="{ active: selectedItem10 == item8.id, day3m_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/blocks-by-algorithm"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
<a routerLink="/chart/blocks-by-algorithm"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-6 mb-2' : true, 'd-none' : viewchart}">
<div class="box_shadow" id="blocks-mined">
<div class="blocks">
<p class="block_heading">{{'home.BLOCKS_MINED' | translate}}</p>
<span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *ngIf="this.dg_last">
{{ this.dg_last | number }}
</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="doubleareaGraphData.data" [data]="doubleareaGraphData.data"
[layout]="doubleareaGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!doubleareaGraphData.data" class="feedback_div news_desc text-center">
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '1 week'); selectedItem7 = 1" id="1" #item1
[ngClass]="{ active: selectedItem7 == item1.id, txt_primary: true }">1 {{'home.WEEK' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '15 days'); selectedItem7 = 2" id="2" #item2
[ngClass]="{ active: selectedItem7 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '30 days'); selectedItem7 = 3" id="3" #item3
[ngClass]="{ active: selectedItem7 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '60 days'); selectedItem7 = 4" id="4" #item4
[ngClass]="{ active: selectedItem7 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '3 months'); selectedItem7 = 5" id="5" #item5
[ngClass]="{ active: selectedItem7 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Blockminedreq('', '', 'all'); selectedItem7 = 8;
" id="8" #item8 [ngClass]="{ active: selectedItem7 == item8.id, day3m_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/blocks-mined"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-2">
<div class="box_shadow" id="transaction-fees">
<div class="blocks">
<p class="block_heading">{{'home.TRANSACTION_FEES' | translate}}</p>
<span style="display:none;" class="txn_count" title="{{'home.TRANSACTION_FEE_HOVER' | translate}}" *ngIf="this.fg_last">{{this.fg_last |number}}</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="transcationGraphData.data" [data]="transcationGraphData.data"
[layout]="transcationGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!transcationGraphData.data" class="feedback_div news_desc text-center">
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', '1 week'); selectedItem4 = 1" id="1" #item1
[ngClass]="{ active: selectedItem4 == item1.id, txt_primary: true }">1 {{'home.WEEK' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', '15 days'); selectedItem4 = 2" id="2" #item2
[ngClass]="{ active: selectedItem4 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', '30 days'); selectedItem4 = 3" id="3" #item3
[ngClass]="{ active: selectedItem4 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', '60 days'); selectedItem4 = 4" id="4" #item4
[ngClass]="{ active: selectedItem4 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', '3 months'); selectedItem4 = 5" id="5" #item5
[ngClass]="{ active: selectedItem4 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Transcationreq('', '', 'all'); selectedItem4 = 7;" id="7" #item7 [ngClass]="{ active: selectedItem4 == item7.id, day3m_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/transaction-fees"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-2' : true, 'd-none' : viewchart}">
<div class="box_shadow" id="blocks-interval">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.BLOCKSINTERVAL' | translate}}</h2>
<p class="block_heading">{{'home.BLOCKSINTERVAL' | translate}}</p>
<span class="txn_count" title="{{'home.BLOCK_INTERVAL_BW_BLOCKS_HOVER' | translate}}" *ngIf="this.blockinteval_last">{{
this.blockinteval_last | number
}}s</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="barGraphIntevalData.data" [data]="barGraphIntevalData.data" [layout]="barGraphIntevalData.layout"></epic-explorer-plotly>
<div *ngIf="!barGraphIntevalData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="
Blockintervalreq('today'); selectedInteverval = 1
" id="1" #intevalitem1 [ngClass]="{ active: selectedInteverval == intevalitem1.id, txt_primary: true }">Today</a>
<a href="JavaScript:void(0);" (click)="
Blockintervalreq('yesterday'); selectedInteverval = 2
" id="2" #intevalitem2 [ngClass]="{ active: selectedInteverval == intevalitem2.id, txt_primary: true }">Yesterday</a>
<a href="JavaScript:void(0);" (click)="Blockintervalreq('today'); selectedInteverval = 1" id="1" #intevalitem1 [ngClass]="{ active: selectedInteverval == intevalitem1.id, txt_primary: true }">Today</a>
<a href="JavaScript:void(0);" (click)="Blockintervalreq('yesterday'); selectedInteverval = 2" id="2" #intevalitem2 [ngClass]="{ active: selectedInteverval == intevalitem2.id, txt_primary: true }">Yesterday</a>
<a *ngIf ="showcurrentIntervalDatetimestamp >= 1567468800000" href="JavaScript:void(0);" (click)="Blockintervalreq('previous'); "><</a>
<span>{{showcurrentIntervalDate}}</span>
<a *ngIf ="showcurrentIntervalDatetimestamp < todaydate" href="JavaScript:void(0);" (click)="Blockintervalreq('next'); ">></a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/block-interval"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div *ngIf="viewchartvar" class="col-md-6 col-lg-8 mb-4">
<div class="box_shadow" id="total-difficulty">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.TOTAL_DIFFICULTY' | translate}}</h2>
<!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{
this.l | number</span>
}}</span> -->
</div>
<div class="chart_show">
<!-- <div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'all'); selectedTarget12 = 4
" id="4" #itemtarget124
[ngClass]="{ active: selectedTarget12 == itemtarget124.id, txt_primary: true }">All</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'cuckatoo'); selectedTarget12 = 1
" id="1" #itemtarget121
[ngClass]="{ active: selectedTarget12 == itemtarget121.id, txt_primary: true }">Cuckoo</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'progpow'); selectedTarget12 = 2
" id="2" #itemtarget122
[ngClass]="{ active: selectedTarget12 == itemtarget122.id, txt_primary: true }">ProgPow</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'randomx'); selectedTarget12 = 3
" id="3" #itemtarget123
[ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primary: true }">RandomX</a>
</div> -->
<epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data"
[layout]="linearTotalGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!linearTotalGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day'
" id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primary: true }">1 {{'home.day' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '1 week',''); selectedTarget = 1; TdifficultyRange = '1 week'
" id="1" #itemtarget1 [ngClass]="{ active: selectedTarget == itemtarget1.id, txt_primary: true }">1
{{'home.WEEK' | translate}}</a>
<!-- <a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '15 days',''); selectedTarget = 2; TdifficultyRange = '15 days'
" id="2" #itemtarget2 [ngClass]="{ active: selectedTarget == itemtarget2.id, day15_txt: true }">15
{{'home.DAYS' | translate}}</a> -->
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '30 days',''); selectedTarget = 3; TdifficultyRange = '30 days'
" id="3" #itemtarget3 [ngClass]="{ active: selectedTarget == itemtarget3.id, day30_txt: true }">30
{{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '60 days',''); selectedTarget = 4; TdifficultyRange = '60 days'
" id="4" #itemtarget4 [ngClass]="{ active: selectedTarget == itemtarget4.id, day60_txt: true }">60
{{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '3 months',''); selectedTarget = 5; TdifficultyRange = '3 months'
" id="5" #itemtarget5 [ngClass]="{ active: selectedTarget == itemtarget5.id, day3m_txt: true }">3
{{'home.MONTHS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', 'all',''); selectedTarget = 7; TdifficultyRange = ''
" id="7" #itemtarget7 [ngClass]="{ active: selectedTarget == itemtarget7.id, dayall_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/total-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
<div class="box_shadow" id="block-interval">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.BLOCK_INTERVAL' | translate}}</h2>
<p class="block_heading">{{'home.BLOCK_INTERVAL' | translate}}</p>
<span class="txn_count" title="{{'home.BLOCK_INTERVAL_HOVER' | translate}}" *ngIf="this.ag_last">{{ this.ag_last | number }}s</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="areaGraphData.data" [data]="areaGraphData.data" [layout]="areaGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!areaGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class="bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
@ -617,41 +337,69 @@
<a href="JavaScript:void(0);" (click)="
Blockspersecreq('', '', 'all'); selectedItem2 = 8;
" id="8" #item8 [ngClass]="{ active: selectedItem2 == item8.id, day3m_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/avg-block-interval"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
<a routerLink="/chart/avg-block-interval"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div *ngIf="viewchartvar" class="col-md-6 col-lg-8 mb-4">
<div class="box_shadow" id="total-difficulty">
<div class="blocks">
<p class="block_heading">{{'home.TOTAL_DIFFICULTY' | translate}}</p>
<div class="chart_show">
<epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data"
[layout]="linearTotalGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!linearTotalGraphData.data" class="feedback_div news_desc text-center">
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="Difficultyreq('total', '', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day'" id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primary: true }">1 {{'home.day' | translate}}</a>
<a href="JavaScript:void(0);" (click)="Difficultyreq('total', '', '', '1 week',''); selectedTarget = 1; TdifficultyRange = '1 week'" id="1" #itemtarget1 [ngClass]="{ active: selectedTarget == itemtarget1.id, txt_primary: true }">1 {{'home.WEEK' | translate}}</a>
<!-- <a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '15 days',''); selectedTarget = 2; TdifficultyRange = '15 days'
" id="2" #itemtarget2 [ngClass]="{ active: selectedTarget == itemtarget2.id, day15_txt: true }">15
{{'home.DAYS' | translate}}</a> -->
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '30 days',''); selectedTarget = 3; TdifficultyRange = '30 days'
" id="3" #itemtarget3 [ngClass]="{ active: selectedTarget == itemtarget3.id, day30_txt: true }">30
{{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '60 days',''); selectedTarget = 4; TdifficultyRange = '60 days'
" id="4" #itemtarget4 [ngClass]="{ active: selectedTarget == itemtarget4.id, day60_txt: true }">60
{{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '3 months',''); selectedTarget = 5; TdifficultyRange = '3 months'
" id="5" #itemtarget5 [ngClass]="{ active: selectedTarget == itemtarget5.id, day3m_txt: true }">3
{{'home.MONTHS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', 'all',''); selectedTarget = 7; TdifficultyRange = ''
" id="7" #itemtarget7 [ngClass]="{ active: selectedTarget == itemtarget7.id, dayall_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/total-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
</div>
<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
<div class="box_shadow" id="transaction-vs-date">
<div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.TRANSACTIONS_VS_DATE' | translate}}</h2>
<p class="block_heading">{{'home.TRANSACTIONS_VS_DATE' | translate}}</p>
<span class="txn_count" title="{{'home.TRANSACTION_LINECHAT_HOVER' | translate}}" *ngIf="this.tg_last">{{
this.tg_last | number
}}</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="feeGraphData.data" [data]="feeGraphData.data" [layout]="feeGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!feeGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" bg-white">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
<epic-explorer-loading></epic-explorer-loading>
</div>
</div>
</div>
@ -674,66 +422,9 @@
<a href="JavaScript:void(0);" (click)="
Transactionlinechartreq('', '', 'all'); selectedItem8 = 8;
" id="8" #item8 [ngClass]="{ active: selectedItem8 == item8.id, day3m_txt: true }">{{'home.All' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/transactions-by-date"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a>
<a routerLink="/chart/transactions-by-date"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
<!-- <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
</div> -->
<!-- <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
<div class="box_shadow">
<div class="blocks">
<h2 class="chart_heading d-inline-block">Pie Chart</h2>
<span class="txn_count" *ngIf="this.pg_last">{{
this.pg_last | number
}}</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="pieGraphData.data" [data]="pieGraphData.data" [layout]="pieGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!pieGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" p-3 bg-white">
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
</div>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="piechartreq('', '', '1 week'); selectedItem10 = 1" id="1"
#item1 [ngClass]="{ active: selectedItem11 == item1.id, txt_primary: true }">1 {{'home.WEEK' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
piechartreq('', '', '15 days'); selectedItem11 = 2
" id="2" #item2 [ngClass]="{ active: selectedItem11 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
piechartreq('', '', '30 days'); selectedItem10 = 3
" id="3" #item3 [ngClass]="{ active: selectedItem11 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
piechartreq('', '', '60 days'); selectedItem10 = 4
" id="4" #item4 [ngClass]="{ active: selectedItem11 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
piechartreq('', '', '3 months'); selectedItem10 = 5
" id="5" #item5 [ngClass]="{ active: selectedItem11 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/piechart"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div> -->
</div>

File diff suppressed because it is too large Load Diff

View File

@ -9,53 +9,7 @@ import { ChartService } from 'src/app/shared/services/chart.service';
@Component({
selector: 'epic-explorer-home-worksapce',
template: `<div class="body_bg py-4">
<div class="chart_section mt-4">
<div class="container">
<div class="row mb-3 pb-3">
<div class="col-md-12">
<div class="text-center detail_div countdownbox d-none">
<p class="count mb-0"><span class="">Countdown to Halving</span> {{countDownDate}} <span class="">Blocks to go</span> {{demo}}</p>
</div>
</div>
</div>
<div class="block_details mb-3">
<app-block-detail-list></app-block-detail-list>
</div>
<div class="explore_charts pt-3">
<epic-explorer-graph-list
[viewchart]="viewchartvar"
></epic-explorer-graph-list>
</div>
</div>
<div
*ngIf="viewchartvar"
routerLink="/all"
class="text-center my-3"
>
<!-- <button class="btn btn_primary align-middle">
View All Charts <i class="fa fa-long-arrow-right ml-3 "></i>
</button> -->
</div>
</div>
</div>
<div class="latest_blocks my-5">
<div class="container">
<div class="filter_shadow">
<epic-explorer-latestblocks></epic-explorer-latestblocks>
</div>
</div>
</div>
`,
templateUrl: './home-workspace.component.html',
styles: [],
})
export class HomeWorksapceComponent extends Utils
@ -80,19 +34,19 @@ export class HomeWorksapceComponent extends Utils
this.route.snapshot.data.title,
);
new Promise((resolve, reject) => {
this.chartService
.apiGetRequest("", "/blockchain_block/latesblockdetails")
.subscribe(
res => {
if (res["status"] == 200) {
this.countDownDate = environment.TARGETBLOCK - res.response.block_height;
resolve();
}
},
error => {}
);
});
// new Promise<void>((resolve, reject) => {
// this.chartService
// .apiGetRequest("", "/blockchain_block/latesblockdetails")
// .subscribe(
// res => {
// if (res["status"] == 200) {
// this.countDownDate = environment.TARGETBLOCK - res.response.block_height;
// resolve();
// }
// },
// error => {}
// );
// });
var d1 = new Date ();

View File

@ -0,0 +1,38 @@
<div class="body_bg">
<div class="chart_section">
<div class="container">
<div class="row ">
<div class="col-md-12">
<div class="text-center detail_div countdownbox d-none mb-3 pb-3">
<p class="count mb-0"><span class="">Countdown to Halving</span> {{countDownDate}} <span class="">Blocks to go</span> {{demo}}</p>
</div>
</div>
</div>
<div class="block_details mb-1">
<app-block-detail-list></app-block-detail-list>
</div>
<div class="explore_charts">
<epic-explorer-graph-list
[viewchart]="viewchartvar"
></epic-explorer-graph-list>
</div>
</div>
<div
*ngIf="viewchartvar"
routerLink="/all"
class="text-center my-3"
>
<!-- <button class="btn btn_primary align-middle">
View All Charts <i class="fa fa-long-arrow-right ml-3 "></i>
</button> -->
</div>
</div>
<div class="container">
<div class="filter_shadow">
<epic-explorer-latestblocks></epic-explorer-latestblocks>
</div>
</div>
</div>
<!-- <div class="latest_blocks my-5">
</div> -->

View File

@ -15,6 +15,7 @@ import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import { TransServiceService } from '../../shared/services/trans-service.service';
import { ChartService} from '../../shared/services/chart.service';
import { CustomLoader } from 'src/app/app.module';
import { Ng2OdometerModule } from 'ng2-odometer';
import {NgxPaginationModule} from 'ngx-pagination';
@ -33,6 +34,7 @@ import {NgxPaginationModule} from 'ngx-pagination';
FormsModule,
ReactiveFormsModule,
SharedModule,
Ng2OdometerModule,
TranslateModule.forChild({
loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},
})

View File

@ -1,6 +1,95 @@
<div class="row">
<div class="col-md-12 margin0auto mb-4">
<div class="blockchain_firstrow">
<div class="detailsloading" *ngIf="!pool51_hashrateCuckoo">
<epic-explorer-loading></epic-explorer-loading>
</div>
<div class="row" *ngIf="pool51_hashrateCuckoo">
<div class="col-12 drawline">
<p class="block_heading mb-1">Mining Pool
<select class="langbut py-2 pr-4 pl-2 miningpoolborder">
<option value="Testnet" selected> 51pool </option>
</select>
<a href="https://51pool.online/" class="text-white pl-3" target="_blank">
<i class="fa fa-link goldcolortxt"></i>
</a>
</p>
<div class="row">
<div class="col-md-6 col-6">
<div class="row">
<div class="col-md-4 drawline">
<p class="subheading">
Cuckoo Hashrate
</p>
<p class="subvalue smatxtwid">
{{ pool51_hashrateCuckoo }}
<!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
</p>
</div>
<div class="col-md-4 drawline">
<p class="subheading">
ProgPow Hashrate
</p>
<p class="subvalue smatxtwid">
{{ pool51_hashrateProgPow }}
<!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
</p>
</div>
<div class="col-md-4 drawline">
<p class="subheading">
RandomX Hashrate
</p>
<p class="subvalue smatxtwid">
{{ pool51_hashrateRandomX }}
<!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
</p>
</div>
</div>
</div>
<div class="col-md-6 col-6">
<div class="row">
<div class="col-md-4 drawline">
<p class="subheading">
Online Cuckoo
</p>
<p class="subvalue smatxtwid">
{{ pool51_onlineCuckoo }}
<!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
</p>
</div>
<div class="col-md-4 drawline">
<p class="subheading">
Online ProgPow
</p>
<p class="subvalue smatxtwid">
{{ pool51_onlineProgPow }}
<!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
</p>
</div>
<div class="col-md-4 drawline">
<p class="subheading">
Online RandomX
</p>
<p class="subvalue smatxtwid">
{{ pool51_onlineRandomX }}
<!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="latest_table">
<h2 class="mb-3 chart_heading px-0">{{'home.LATEST_BLOCKS' | translate}}</h2>
<div class="mobile_table web_hdng">
<div class="col-sm-121">
<p class="block_heading">{{'home.LATEST_BLOCKS' | translate}}</p>
<div *ngIf="!hashvalues">
<epic-explorer-loading></epic-explorer-loading>
</div>
<div *ngIf="hashvalues" class="mobile_table web_hdng">
<div class="row">
<div class="col-6 col-md-4 tble_col">
@ -51,10 +140,15 @@
</div>
</div>
<div #block></div>
<div class="tableminheight">
<div *ngIf="hashvalues">
<ng-container *ngFor="let hashvalue of hashvalues">
<div *ngIf="hashvalue.target_difficulty_cuckatoo != '0'" [ngClass]="{mobile_table : true, hght_40: item.id != clickValue }"
id="hash_{{hashvalue.blockchain_block_height}}" #item >
<div
*ngIf="hashvalue.target_difficulty_cuckatoo != '0'"
[ngClass]="{mobile_table : true, hght_40: item.id != clickValue, highlighttableData : hashvalue.blockchain_highlight }"
id="hash_{{hashvalue.blockchain_block_height}}"
#item
>
<div class="row">
<div class="col-6 col-md-3 tble_col ">
<div class="block_div mble_hght"> <span *ngIf="item.id != clickValue"
@ -119,33 +213,33 @@
</div>
</div>
</ng-container>
</div>
</div>
</div>
<div class="explore_all text-right">
<div class="explore_all text-right" *ngIf="hashvalues">
<form [formGroup]="paginationForm">
<div class="d-inline-block float-left mt-2">
<span>{{'home.BLOCKS_PER_PAGE' | translate}}:</span>&nbsp;&nbsp;
<div class="item_select d-inline-block position-relative">
<select class="" formControlName="pagesize"
(change)="gettinghashList(pagedata.currentPage, $event.target.value)">
(change)="gettinghashListFunc(pagedata.currentPage, $event.target.value)">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
</div>
</div>
<ul class="pagination justify-content-end m-0 d-inline-flex">
<li class="page-item d-none d-md-inline-flex" (click)="
gettinghashList(pagedata.startPage, paginationForm.value.pagesize)
gettinghashListFunc(pagedata.startPage, paginationForm.value.pagesize)
">
<a class="page-link"><i class="fa fa-angle-double-left"></i></a>
</li>
<li class="page-item" (click)="
gettinghashList(
gettinghashListFunc(
pagedata.currentPage - 1,
paginationForm.value.pagesize
)
@ -156,7 +250,7 @@
<a class="page-link">{{ pagedata.currentPage }} / {{ pagedata.totalPages }}</a>
</li>
<li class="page-item" (click)="
gettinghashList(
gettinghashListFunc(
pagedata.currentPage + 1,
paginationForm.value.pagesize
)
@ -164,15 +258,16 @@
<a class="page-link"><i class="fa fa-angle-right"></i></a>
</li>
<li class="page-item d-none d-md-inline-flex" (click)="
gettinghashList(pagedata.totalPages, paginationForm.value.pagesize)
gettinghashListFunc(pagedata.totalPages, paginationForm.value.pagesize)
">
<a class="page-link"><i class="fa fa-angle-double-right"></i></a>
</li>
</ul>
</form>
</div>
</div>
<div class="latest_table mt-3">
<!-- <div class="latest_table mt-3">
<h2 class="mb-3 chart_heading px-0 d-inline-block">Peers
<span *ngIf="peers && peers.length > 0" class="txn_count txn_peers" >{{
peers.length | number
@ -217,38 +312,6 @@
</div>
</div>
<!-- <div class="row">
<div class="col-6 col-md-4 tble_col">
<div class="block_div">
<h5 class="mb-0">{{'home.CAPABILITIES' | translate}}</h5>
</div>
</div>
<div class="col-6 col-md-4 tble_col">
<div class="block_div">
<h5 class="mb-0">{{'home.USER_AGENT' | translate}}</h5>
</div>
</div>
<div class="col-6 col-md-4 tble_col">
<div class="block_div">
<h5 class="mb-0">{{'home.VERSION' | translate}}</h5>
</div>
</div>
<div class="col-6 col-md-4 tble_col">
<div class="block_div">
<h5 class="mb-0">{{'home.ADDR' | translate}}</h5>
</div>
</div>
<div class="col-7 col-sm-6 col-md-4 tble_col">
<div class="block_div">
<h5 class="mb-0">{{'home.DIRECTION' | translate}}</h5>
</div>
</div>
<div class="col-5 col-sm-6 col-md-4 tble_col">
<div class="block_div">
<h5 class="mb-0">{{'home.TOTAL_DIFFICULTY' | translate}}</h5>
</div>
</div>
</div> -->
</div>
<div [ngClass]="{peer_mobile_table : true, hght_40: peeritem.id != clickPeer }" id="peer_{{peer.id}}" #peeritem *ngFor="let peer of peers | paginate: { itemsPerPage: 10, currentPage: p }">
@ -302,4 +365,4 @@
</div>
</div>
</div> -->

View File

@ -31,9 +31,21 @@ export class LatestblocksComponent implements OnInit {
public beforeClick: boolean = false;
public clickonMobile: boolean = true;
public peers: any;
first = true;
currentBlockHeight;
apiBlockInterval;
CurrentPage;
PageSize;
pool51_hashrateCuckoo;
pool51_hashrateProgPow;
pool51_hashrateRandomX;
pool51_onlineCuckoo;
pool51_onlineProgPow;
pool51_onlineRandomX;
pool51_currentHeight;
paginationForm = new FormGroup({
pagesize: new FormControl(20),
pagesize: new FormControl(10),
});
@ViewChild('block', { read: ViewContainerRef,static: true }) block: ViewContainerRef;
@ -42,12 +54,70 @@ export class LatestblocksComponent implements OnInit {
constructor(private chartService: ChartService,public translate: TransServiceService,public http: HttpClient, private resolver: ComponentFactoryResolver) {}
ngOnInit() {
this. getpeersList();
this.gettinghashList(1, 20);
// this. getpeersList();
this.gettinghashList(1, 10, this.first);
this.getLastCeatedBlock();
this.get51poolAPI();
}
public gettinghashList(CurrentPage, PageSize) {
ngAfterViewInit() {
this.apiBlockInterval = setInterval(() => {
console.log('getLastCeatedBlock called');
this.get51poolAPI();
// let current_page = localStorage.getItem('CurrentPage');
// let page_size = localStorage.getItem('PageSize');
let current_page = this.CurrentPage;
let page_size = this.PageSize;
if( current_page && page_size){
this.gettinghashList(current_page, page_size);
}else{
this.gettinghashList(1, 10);
}
}, 60 * 1000);
}
ngOnDestroy() {
clearInterval(this.apiBlockInterval);
}
public get51poolAPI() {
return new Promise<void>((resolve, reject) => {
this.chartService.apiGetRequest('','/blockchain_block/get51poolapi').subscribe(
res => {
console.log('get51poolAPI');
console.log(res);
if (res['status'] == 200) {
let json = res.response;
// console.log(json.data);
let poolStats = json.data.poolStats;
this.pool51_hashrateCuckoo = poolStats.hashrateCuckoo;
this.pool51_hashrateProgPow = poolStats.hashrateProgPow;
this.pool51_hashrateRandomX = poolStats.hashrateRandomX;
this.pool51_onlineCuckoo = poolStats.onlineCuckoo;
this.pool51_onlineProgPow = poolStats.onlineProgPow;
this.pool51_onlineRandomX = poolStats.onlineRandomX;
this.pool51_currentHeight = poolStats.currentHeight;
}
},
error => {},
);
});
}
public gettinghashListFunc(currentPage,pagesize){
this.hashvalues = "";
this.gettinghashList(
currentPage,
pagesize
)
}
public gettinghashList(CurrentPage, PageSize, first = false) {
console.log(CurrentPage, PageSize,this.first);
this.CurrentPage = CurrentPage;
this.PageSize = PageSize;
// localStorage.setItem('CurrentPage',CurrentPage);
// localStorage.setItem('PageSize',PageSize);
let params = new HttpParams();
this.CurrentpageNumber = CurrentPage;
params = params.append('CurrentPage', CurrentPage);
@ -56,6 +126,24 @@ export class LatestblocksComponent implements OnInit {
res => {
if (res['status'] == 200) {
this.pagedata = res.response;
if(this.first){
console.log('init gettinghashList');
res.response.BlockchainBlockResult.shift();
this.currentBlockHeight = res.response.BlockchainBlockResult[0].blockchain_block_height;
this.first = false;
// console.log("this.currentBlockHeight-"+this.currentBlockHeight);
}else{
console.log('multi gettinghashList');
if(this.currentBlockHeight && res.response.BlockchainBlockResult[0].blockchain_block_height){
if(res.response.BlockchainBlockResult[0].blockchain_block_height > this.currentBlockHeight){
let sizediff = res.response.BlockchainBlockResult[0].blockchain_block_height - this.currentBlockHeight;
res.response.BlockchainBlockResult[0].blockchain_highlight = true;
console.log(sizediff);
}
}
}
// console.log('datas');
// console.log(res.response.BlockchainBlockResult);
this.hashvalues = res.response.BlockchainBlockResult;
if(CurrentPage == 1){
this.FirstPageListData = res.response.BlockchainBlockResult;

View File

@ -0,0 +1,516 @@
div.olMap {
z-index: 0;
padding: 0 !important;
margin: 0 !important;
cursor: default;
}
div.olMapViewport {
text-align: left;
-ms-touch-action: none;
}
div.olLayerDiv {
-moz-user-select: none;
-khtml-user-select: none;
}
.olLayerGoogleCopyright {
left: 2px;
bottom: 2px;
}
.olLayerGoogleV3.olLayerGoogleCopyright {
right: auto !important;
}
.olLayerGooglePoweredBy {
left: 2px;
bottom: 15px;
}
.olLayerGoogleV3.olLayerGooglePoweredBy {
bottom: 15px !important;
}
/* GMaps should not set styles on its container */
.olForeignContainer {
opacity: 1 !important;
}
.olControlAttribution {
font-size: smaller;
right: 3px;
bottom: 4.5em;
position: absolute;
display: block;
}
.olControlScale {
right: 3px;
bottom: 3em;
display: block;
position: absolute;
font-size: smaller;
}
.olControlScaleLine {
display: block;
position: absolute;
left: 10px;
bottom: 15px;
font-size: xx-small;
}
.olControlScaleLineBottom {
border: solid 2px black;
border-bottom: none;
margin-top:-2px;
text-align: center;
}
.olControlScaleLineTop {
border: solid 2px black;
border-top: none;
text-align: center;
}
.olControlPermalink {
right: 3px;
bottom: 1.5em;
display: block;
position: absolute;
font-size: smaller;
}
div.olControlMousePosition {
bottom: 0;
right: 3px;
display: block;
position: absolute;
font-family: Arial;
font-size: smaller;
}
.olControlOverviewMapContainer {
position: absolute;
bottom: 0;
right: 0;
}
.olControlOverviewMapElement {
padding: 10px 18px 10px 10px;
background-color: #00008B;
-moz-border-radius: 1em 0 0 0;
}
.olControlOverviewMapMinimizeButton,
.olControlOverviewMapMaximizeButton {
height: 18px;
width: 18px;
right: 0;
bottom: 80px;
cursor: pointer;
}
.olControlOverviewMapExtentRectangle {
overflow: hidden;
background-image: url("src/assets/img/blank.gif");
cursor: move;
border: 2px dotted red;
}
.olControlOverviewMapRectReplacement {
overflow: hidden;
cursor: move;
/* background-image: url("img/overview_replacement.gif"); */
background-repeat: no-repeat;
background-position: center;
}
.olLayerGeoRSSDescription {
float:left;
width:100%;
overflow:auto;
font-size:1.0em;
}
.olLayerGeoRSSClose {
float:right;
color:gray;
font-size:1.2em;
margin-right:6px;
font-family:sans-serif;
}
.olLayerGeoRSSTitle {
float:left;font-size:1.2em;
}
.olPopupContent {
padding:5px;
overflow: auto;
}
.olControlNavigationHistory {
/* background-image: url("img/navigation_history.png"); */
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
.olControlNavigationHistoryPreviousItemActive {
background-position: 0 0;
}
.olControlNavigationHistoryPreviousItemInactive {
background-position: 0 -24px;
}
.olControlNavigationHistoryNextItemActive {
background-position: -24px 0;
}
.olControlNavigationHistoryNextItemInactive {
background-position: -24px -24px;
}
div.olControlSaveFeaturesItemActive {
/* background-image: url(img/save_features_on.png); */
background-repeat: no-repeat;
background-position: 0 1px;
}
div.olControlSaveFeaturesItemInactive {
/* background-image: url(img/save_features_off.png); */
background-repeat: no-repeat;
background-position: 0 1px;
}
.olHandlerBoxZoomBox {
border: 2px solid red;
position: absolute;
background-color: white;
opacity: 0.50;
font-size: 1px;
filter: alpha(opacity=50);
}
.olHandlerBoxSelectFeature {
border: 2px solid blue;
position: absolute;
background-color: white;
opacity: 0.50;
font-size: 1px;
filter: alpha(opacity=50);
}
.olControlPanPanel {
top: 10px;
left: 5px;
}
.olControlPanPanel div {
/* background-image: url(img/pan-panel.png); */
height: 18px;
width: 18px;
cursor: pointer;
position: absolute;
}
.olControlPanPanel .olControlPanNorthItemInactive {
top: 0;
left: 9px;
background-position: 0 0;
}
.olControlPanPanel .olControlPanSouthItemInactive {
top: 36px;
left: 9px;
background-position: 18px 0;
}
.olControlPanPanel .olControlPanWestItemInactive {
position: absolute;
top: 18px;
left: 0;
background-position: 0 18px;
}
.olControlPanPanel .olControlPanEastItemInactive {
top: 18px;
left: 18px;
background-position: 18px 18px;
}
.olControlZoomPanel {
top: 71px;
left: 14px;
}
.olControlZoomPanel div {
/* background-image: url(img/zoom-panel.png); */
position: absolute;
height: 18px;
width: 18px;
cursor: pointer;
}
.olControlZoomPanel .olControlZoomInItemInactive {
top: 0;
left: 0;
background-position: 0 0;
}
.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
top: 18px;
left: 0;
background-position: 0 -18px;
}
.olControlZoomPanel .olControlZoomOutItemInactive {
top: 36px;
left: 0;
background-position: 0 18px;
}
/*
* When a potential text is bigger than the image it move the image
* with some headers (closes #3154)
*/
.olControlPanZoomBar div {
font-size: 1px;
}
.olPopupCloseBox {
/* background: url("img/close.gif") no-repeat; */
cursor: pointer;
}
.olFramedCloudPopupContent {
padding: 5px;
overflow: auto;
}
.olControlNoSelect {
-moz-user-select: none;
-khtml-user-select: none;
}
.olImageLoadError {
background-color: pink;
opacity: 0.5;
filter: alpha(opacity=50); /* IE */
}
/**
* Cursor styles
*/
.olCursorWait {
cursor: wait;
}
.olDragDown {
cursor: move;
}
.olDrawBox {
cursor: crosshair;
}
.olControlDragFeatureOver {
cursor: move;
}
.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
cursor: -moz-grabbing;
}
/**
* Layer switcher
*/
.olControlLayerSwitcher {
position: absolute;
top: 25px;
right: 0;
width: 20em;
font-family: sans-serif;
font-weight: bold;
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
font-size: smaller;
color: white;
background-color: transparent;
}
.olControlLayerSwitcher .layersDiv {
padding-top: 5px;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
background-color: darkblue;
}
.olControlLayerSwitcher .layersDiv .baseLbl,
.olControlLayerSwitcher .layersDiv .dataLbl {
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
}
.olControlLayerSwitcher .layersDiv .baseLayersDiv,
.olControlLayerSwitcher .layersDiv .dataLayersDiv {
padding-left: 10px;
}
.olControlLayerSwitcher .maximizeDiv,
.olControlLayerSwitcher .minimizeDiv {
width: 18px;
height: 18px;
top: 5px;
right: 0;
cursor: pointer;
}
.olBingAttribution {
color: #DDD;
}
.olBingAttribution.road {
color: #333;
}
.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
color: #EEE;
}
.olGoogleAttribution {
color: #333;
}
span.olGoogleAttribution a {
color: #77C;
}
span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
color: #EEE;
}
/**
* Editing and navigation icons.
* (using the editing_tool_bar.png sprint image)
*/
.olControlNavToolbar ,
.olControlEditingToolbar {
margin: 5px 5px 0 0;
}
.olControlNavToolbar div,
.olControlEditingToolbar div {
/* background-image: url("img/editing_tool_bar.png"); */
background-repeat: no-repeat;
margin: 0 0 5px 5px;
width: 24px;
height: 22px;
cursor: pointer
}
/* positions */
.olControlEditingToolbar {
right: 0;
top: 0;
}
.olControlNavToolbar {
top: 295px;
left: 9px;
}
/* layouts */
.olControlEditingToolbar div {
float: right;
}
/* individual controls */
.olControlNavToolbar .olControlNavigationItemInactive,
.olControlEditingToolbar .olControlNavigationItemInactive {
background-position: -103px -1px;
}
.olControlNavToolbar .olControlNavigationItemActive ,
.olControlEditingToolbar .olControlNavigationItemActive {
background-position: -103px -24px;
}
.olControlNavToolbar .olControlZoomBoxItemInactive {
background-position: -128px -1px;
}
.olControlNavToolbar .olControlZoomBoxItemActive {
background-position: -128px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
background-position: -77px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePointItemActive {
background-position: -77px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
background-position: -51px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePathItemActive {
background-position: -51px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{
background-position: -26px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
background-position: -26px -24px;
}
div.olControlZoom {
position: absolute;
top: 8px;
left: 8px;
background: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
}
div.olControlZoom a {
display: block;
margin: 1px;
padding: 0;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 22px;
width:22px;
line-height: 19px;
background: #130085; /* fallback for IE - IE6 requires background shorthand*/
background: rgba(0, 60, 136, 0.5);
filter: alpha(opacity=80);
}
div.olControlZoom a:hover {
background: #130085; /* fallback for IE */
background: rgba(0, 60, 136, 0.7);
filter: alpha(opacity=100);
}
@media only screen and (max-width: 600px) {
div.olControlZoom a:hover {
background: rgba(0, 60, 136, 0.5);
}
}
a.olControlZoomIn {
border-radius: 4px 4px 0 0;
}
a.olControlZoomOut {
border-radius: 0 0 4px 4px;
}
/**
* Animations
*/
.olLayerGrid .olTileImage {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
/* Turn on GPU support where available */
.olTileImage {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
/* when replacing tiles, do not show tile and backbuffer at the same time */
.olTileReplacing {
display: none;
}
/* override any max-width image settings (e.g. bootstrap.css) */
img.olTileImage {
max-width: none;
}

282
src/assets/css/ol.css Normal file
View File

@ -0,0 +1,282 @@
.ol-box {
box-sizing: border-box;
border-radius: 2px;
border: 2px solid blue;
}
.ol-mouse-position {
top: 8px;
right: 8px;
position: absolute;
}
.ol-scale-line {
background: rgba(0,60,136,0.3);
border-radius: 4px;
bottom: 8px;
left: 8px;
padding: 2px;
position: absolute;
}
.ol-scale-line-inner {
border: 1px solid #eee;
border-top: none;
color: #eee;
font-size: 10px;
text-align: center;
margin: 1px;
will-change: contents, width;
transition: all 0.25s;
}
.ol-scale-bar {
position: absolute;
bottom: 8px;
left: 8px;
}
.ol-scale-step-marker {
width: 1px;
height: 15px;
background-color: #000000;
float: right;
z-Index: 10;
}
.ol-scale-step-text {
position: absolute;
bottom: -5px;
font-size: 12px;
z-Index: 11;
color: #000000;
text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
}
.ol-scale-text {
position: absolute;
font-size: 14px;
text-align: center;
bottom: 25px;
color: #000000;
text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
}
.ol-scale-singlebar {
position: relative;
height: 10px;
z-Index: 9;
border: 1px solid black;
}
.ol-unsupported {
display: none;
}
.ol-viewport, .ol-unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ol-overlaycontainer, .ol-overlaycontainer-stopevent {
pointer-events: none;
}
.ol-overlaycontainer > *, .ol-overlaycontainer-stopevent > * {
pointer-events: auto;
}
.ol-selectable {
-webkit-touch-callout: default;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.ol-grabbing {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
.ol-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.ol-control {
position: absolute;
background-color: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
}
.ol-control:hover {
background-color: rgba(255,255,255,0.6);
}
.ol-zoom {
top: .5em;
left: .5em;
}
.ol-rotate {
top: .5em;
right: .5em;
transition: opacity .25s linear, visibility 0s linear;
}
.ol-rotate.ol-hidden {
opacity: 0;
visibility: hidden;
transition: opacity .25s linear, visibility 0s linear .25s;
}
.ol-zoom-extent {
top: 4.643em;
left: .5em;
}
.ol-full-screen {
right: .5em;
top: .5em;
}
.ol-control button {
display: block;
margin: 1px;
padding: 0;
color: white;
font-size: 1.14em;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 1.375em;
width: 1.375em;
line-height: .4em;
background-color: rgba(0,60,136,0.5);
border: none;
border-radius: 2px;
}
.ol-control button::-moz-focus-inner {
border: none;
padding: 0;
}
.ol-control button span {
pointer-events: none;
}
.ol-zoom-extent button {
line-height: 1.4em;
}
.ol-compass {
display: block;
font-weight: normal;
font-size: 1.2em;
will-change: transform;
}
.ol-touch .ol-control button {
font-size: 1.5em;
}
.ol-touch .ol-zoom-extent {
top: 5.5em;
}
.ol-control button:hover,
.ol-control button:focus {
text-decoration: none;
background-color: rgba(0,60,136,0.7);
}
.ol-zoom .ol-zoom-in {
border-radius: 2px 2px 0 0;
}
.ol-zoom .ol-zoom-out {
border-radius: 0 0 2px 2px;
}
.ol-attribution {
text-align: right;
bottom: .5em;
right: .5em;
max-width: calc(100% - 1.3em);
}
.ol-attribution ul {
margin: 0;
padding: 0 .5em;
color: #000;
text-shadow: 0 0 2px #fff;
}
.ol-attribution li {
display: inline;
list-style: none;
}
.ol-attribution li:not(:last-child):after {
content: " ";
}
.ol-attribution img {
max-height: 2em;
max-width: inherit;
vertical-align: middle;
}
.ol-attribution ul, .ol-attribution button {
display: inline-block;
}
.ol-attribution.ol-collapsed ul {
display: none;
}
.ol-attribution:not(.ol-collapsed) {
background: rgba(255,255,255,0.8);
}
.ol-attribution.ol-uncollapsible {
bottom: 0;
right: 0;
border-radius: 4px 0 0;
}
.ol-attribution.ol-uncollapsible img {
margin-top: -.2em;
max-height: 1.6em;
}
.ol-attribution.ol-uncollapsible button {
display: none;
}
.ol-zoomslider {
top: 4.5em;
left: .5em;
height: 200px;
}
.ol-zoomslider button {
position: relative;
height: 10px;
}
.ol-touch .ol-zoomslider {
top: 5.5em;
}
.ol-overviewmap {
left: 0.5em;
bottom: 0.5em;
}
.ol-overviewmap.ol-uncollapsible {
bottom: 0;
left: 0;
border-radius: 0 4px 0 0;
}
.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
display: inline-block;
}
.ol-overviewmap .ol-overviewmap-map {
border: 1px solid #7b98bc;
height: 150px;
margin: 2px;
width: 150px;
}
.ol-overviewmap:not(.ol-collapsed) button{
bottom: 1px;
left: 2px;
position: absolute;
}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
display: none;
}
.ol-overviewmap:not(.ol-collapsed) {
background: rgba(255,255,255,0.8);
}
.ol-overviewmap-box {
border: 2px dotted rgba(0,60,136,0.7);
}
.ol-overviewmap .ol-overviewmap-box:hover {
cursor: move;
}

View File

@ -1,15 +1,16 @@
@media(min-width: 992px){
.block_div {min-width: 110px; text-align: center;padding: .75rem; }
/* .block_div.inp_div{min-width: 100px;} */
.block_div.targ_div{min-width: 200px;}
.block_div.targ_div_hdng{min-width: 180px; text-align: left;padding-left: 30px;}
.block_div.addr_div{min-width: 150px;}
.block_div.addr_hdng{min-width: 140px;}
.block_div.peers_diff_hdng{min-width: 375px;}
.peer_table .block_div{/*min-width: 148px;*/ text-align: center;}
.mobile_table{border-bottom: 1px solid #dee2e6; padding: 0 15px;display: table; width: 100%;}
.view_moble_tble{border-bottom: 1px solid #dee2e6;}
.mobile_table .row, .row.peer_table_data{display: table;}
.block_div {min-width: 108px; text-align: center;padding: .75rem; }
/* .block_div.inp_div{min-width: 100px;} */
.block_div.targ_div{min-width: 200px;}
.block_div.targ_div_hdng{min-width: 180px; text-align: left;padding-left: 30px;}
.block_div.addr_div{min-width: 150px;}
.block_div.addr_hdng{min-width: 140px;}
.block_div.peers_diff_hdng{min-width: 375px;}
.peer_table .block_div{/*min-width: 148px;*/ text-align: center;}
.mobile_table{border-bottom: 1px solid #dee2e6; padding: 0 15px;display: table; width: 100%; border-radius: 10px;}
.dark_theme .mobile_table{border-bottom: 1px solid #18181c;}
.view_moble_tble{border-bottom-color: #17171b;}
.mobile_table .row, .row.peer_table_data{display: table;}
.mobile_table .tble_col, .peer_table_data .col-md-3{padding: 0;display: table-cell; max-width: unset; flex: unset; width: auto;}
.mobile_table h6, .view_moble_tble h6, .peer_mobile_table h6{display: none;}
.view_moble_tble .block_div{text-align: left;}
@ -23,96 +24,146 @@
}
@media(max-width: 1199px){
.ftr_links{padding-left: 0px;}
.ftr_links::before{content: '|'; }
.footer_div{font-size: 12px;}
.ftr_links{padding-left: 0px;}
.ftr_links::before{content: '|'; }
.footer_div{font-size: 12px;}
p.block_value{ font-size: 40px;}
p.block_value_v2 {font-size: 30px;height: 35px;}
.bc_sixcls .col-md-3, .bc_sixcls .col-md-5, .bc_sixcls .col-md-4 {flex: 0 0 50%;max-width: 50%;}
}
@media (min-width: 992px) and (max-width: 1199px){
.detail_div .count{font-size: 20px;}
.detail_div .desc{font-size: 15px;}
.detail_div .count span{font-size: 14px;}
.chart_heading{font-size: 18px;}
.day_filter a{font-size: 11px; margin: 0 4px;}
.blck_value {font-size: 12px; }
.block_div {min-width: 87px;}
.peer_table_data .block_div {min-width: 105px;}
.block_div.addr_hdng{min-width: 120px;}
.hash{height: 8px; width: 3px;}
.txn_peers{margin-top: 0px;padding:2px 10px 1px;font-size: 12px;}
.detail_div .count{font-size: 20px;}
.detail_div .desc{font-size: 15px;}
.detail_div .count span{font-size: 14px;}
.chart_heading{font-size: 18px;}
.day_filter a{font-size: 11px; margin: 0 4px;}
.blck_value {font-size: 12px; }
.block_div {min-width: 87px;}
.peer_table_data .block_div {min-width: 105px;}
.block_div.addr_hdng{min-width: 120px;}
.hash{height: 8px; width: 3px;}
.txn_peers{margin-top: 0px;padding:2px 10px 1px;font-size: 12px;}
}
@media (min-width: 768px) and (max-width: 991px){
.detail_div{padding: 10px 0;}
.detail_div .count{font-size: 20px;}
.detail_div .desc{font-size: 13px;}
.detail_div .count span{font-size: 12px;}
.chart_heading{font-size: 18px;}
.day_filter a{font-size: 12px;}
.theme_switch{margin-left: 11px;}
.view_txt{font-size: 13px;}
.peer_table_data .col-md-3 {flex: 0 0 40%; max-width: 40%; }
.lgtxtwid .odometer-digit .odometer-value {
width: 20px;
}
.medtxtwid .odometer-digit .odometer-value {
width: 14px;
}
.detail_div{padding: 10px 0;}
.detail_div .count{font-size: 20px;}
.detail_div .desc{font-size: 13px;}
.detail_div .count span{font-size: 12px;}
.chart_heading{font-size: 18px;}
.day_filter a{font-size: 12px;}
.theme_switch{margin-left: 11px;}
.view_txt{font-size: 13px;}
.peer_table_data .col-md-3 {flex: 0 0 40%; max-width: 40%; }
}
@media(max-width: 991px){
.container{max-width: 100%;}
.hght_40{height: 40px;overflow: hidden;}
.web_hdng{display: none;}
.mobile_table, .peer_mobile_table{padding: 10px 0;padding-left: 30px;}
/* .view_moble_tble .col-md-4{padding: 0;} */
.mobile_table h6, .view_moble_tble h6, .peer_mobile_table h6{color: #0091ff; font-size: 13px; display: inline-block;}
.mobile_table span.blck_value, .view_moble_tble span.blck_value, .peer_mobile_table span.blck_value{font-size: 13px;}
.mobile_table span.blck_value::before, .view_moble_tble span.blck_value::before, .peer_mobile_table span.blck_value::before{content: ' - ';}
.view_moble_tble{border-bottom: 1px solid #dee2e6;padding-bottom: 10px; margin-bottom: 10px;}
.expnd_blck {font-size: 13px; margin-right: 5px; color: green;position: absolute; left: -8px; top: 5px; display: inline-block;}
.mble_hght{padding-left: 8px;}
.peer_mobile_table .expnd_blck{left: -8px;}
.container{max-width: 100%;}
.hght_40{height: 40px;overflow: hidden;}
.web_hdng{display: none;}
.mobile_table, .peer_mobile_table{padding: 10px 0;padding-left: 30px;}
/* .view_moble_tble .col-md-4{padding: 0;} */
.mobile_table h6, .view_moble_tble h6, .peer_mobile_table h6{color: #434542; font-size: 13px; display: inline-block;}
.mobile_table span.blck_value, .view_moble_tble span.blck_value, .peer_mobile_table span.blck_value{font-size: 13px;}
.mobile_table span.blck_value::before, .view_moble_tble span.blck_value::before, .peer_mobile_table span.blck_value::before{content: ' - ';}
.view_moble_tble{border-bottom: 1px solid #dee2e6;padding-bottom: 10px; margin-bottom: 10px;}
.expnd_blck {font-size: 13px; margin-right: 5px; color: green;position: absolute; left: -8px; top: 5px; display: inline-block;}
.mble_hght{padding-left: 8px;}
.peer_mobile_table .expnd_blck{left: -8px;}
/* .blockchain_firstrow .col-md-3, .blockchain_firstrow .col-md-5, .blockchain_firstrow .col-md-4 {flex: 0 0 50%;max-width: 50%;} */
p.block_value {font-size: 35px;}
p.block_value_v2 { font-size: 25px; height: 30px;}
p.block_heading, p.subheading{font-size: 12px;}
.body_bg, .view_content{padding-top: 75px;}
.navbar-nav{ flex-direction: row;}
.navbar-brand{ width: 85px;}
.navbar-brand img{ max-width: 100%; height: auto;}
.yrvsel {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0px 1rem;}
.yrvsel .small {margin-bottom: 5px; font-size: 10px; font-weight: normal; position: relative; z-index: 1;}
.yrvsel select{ margin: -13px 0px 0px 0px; position: relative;}
.epbbox .epicprice { white-space: nowrap;font-size: 20px !important;}
}
@media(max-width:767px){
.day_filter a{margin: 0 4px; font-size: 11px;}
.chart_heading{font-size: 19px;}
.txn_count{font-size: 12px;}
.day_filter{padding: 10px 15px;}
.explore_all{font-size: 13px; padding: 10px 15px;}
.btn_primary{font-size: 13px;}
.search{max-width: 100%; margin-bottom: 15px !important;}
.logo_txt{font-size: 35px;}
.footer_div{text-align: center;}
.view_txt{font-size: 15px;}
.ytitle, .y2tick, .y3tick, .ytick, .y2title, .y3title, .xtitle, .xtick{font-size: 11px !important}
.chart_section.mt-4{margin-top: 0px !important;}
.logo_img{height: 50px;}
.ngx-pagination li{display: none !important;}
.ngx-pagination li.pagination-previous{display: inline-block !important;}
.ngx-pagination li.pagination-next{display: inline-block !important;}
.hashdata_table td{border: 1px solid #a6a6a6;}
.body_bg.py-4{padding-top: 0px !important}
.block_details.mb-5{margin-bottom: 0px !important}
.lgtxtwid .odometer-digit .odometer-value {
width: 15px;
}
.medtxtwid .odometer-digit .odometer-value {
width: 9px;
}
.targetandhashrate .drawline {
padding-left: 5px;
padding-right: 5px;
}
.day_filter a{margin: 0 4px; font-size: 11px;}
.chart_heading{font-size: 19px;}
.txn_count{font-size: 12px;}
.day_filter{padding: 10px 15px;}
.explore_all{font-size: 13px; padding: 10px 15px;}
.btn_primary{font-size: 13px;}
.search{max-width: 100%; margin-bottom: 15px !important;}
.logo_txt{font-size: 35px;}
.footer_div{text-align: center;}
.view_txt{font-size: 15px;}
.ytitle, .y2tick, .y3tick, .ytick, .y2title, .y3title, .xtitle, .xtick{font-size: 11px !important}
.chart_section.mt-4{margin-top: 0px !important;}
/* .logo_img{height: 50px;} */
.ngx-pagination li{display: none !important;}
.ngx-pagination li.pagination-previous{display: inline-block !important;}
.ngx-pagination li.pagination-next{display: inline-block !important;}
.hashdata_table td{border: 1px solid #a6a6a6;}
.body_bg.py-4{padding-top: 0px !important}
.block_details.mb-5{margin-bottom: 0px !important}
.bc_sixcls .col-md-3, .bc_sixcls .col-md-5, .bc_sixcls .col-md-4 {flex: 0 0 33.33%; max-width: 33.33%;}
.drawline::after, .drawline::before{ display: none;}
.bc_sixcls .col-md-6:not(:last-child) { margin-bottom: 30px;}
epic-explorer-search{ margin-top: 10px;}
}
@media(max-width: 575px){
.mobile_table h6, .mobile_table span.blck_value{font-size: 12px;}
.view_page_header .ml-auto{margin: 0 !important; display: inherit;width: 100%;}
.mble_view_hdr{margin-left: auto;}
.mble_view_hdr .nav-item{font-size: 13px;}
.mble_view_hdr .flag{width: 20px; height: 20px;}
.mble_view_hdr .nav-link{padding: .5rem;}
.theme_switch{padding-top: 8px; padding-bottom: 8px;}
.theme_switch img{height: 15px;}
.peer_table_data .col-6 {flex: 0 0 100%; max-width: 100%; }
/* .home_mble_hdr .navbar-nav{margin: 15px auto 0; width: 100%;} */
.home_tst_net{font-size: 15px; text-align: center;}
.navbar-nav{justify-content: center;}
.mobile_table h6, .mobile_table span.blck_value{font-size: 12px;}
.view_page_header .ml-auto{margin: 0 !important; display: inherit;}
.mble_view_hdr{margin-left: auto;}
.mble_view_hdr .nav-item{font-size: 13px;}
.mble_view_hdr .flag{width: 20px; height: 20px;}
.mble_view_hdr .nav-link{padding: .5rem;}
.theme_switch{padding-top: 8px; padding-bottom: 8px;}
.theme_switch img{height: 15px;}
.peer_table_data .col-6 {flex: 0 0 100%; max-width: 100%; }
/* .home_mble_hdr .navbar-nav{margin: 15px auto 0; width: 100%;} */
.home_tst_net{font-size: 15px; text-align: center;}
.navbar-nav{justify-content: center;}
.navbar-light .navbar-nav .nav-link{ font-size: 13px; padding: .5rem;}
.yrvsel{padding: 0px 0.5rem;}
.langbut{ font-size: 13px;}
.mble_view_hdr select.langbut{white-space: nowrap;width: 57px;text-transform: uppercase; margin: 0px !important;}
.bc_sixcls .col-md-6 .row {flex-wrap: nowrap;overflow-x: auto; }
.bc_sixcls .col-md-3, .bc_sixcls .col-md-5, .bc_sixcls .col-md-4 { flex: 0 0 45%;max-width: 45%;}
p.block_value {font-size: 25px;}
p.block_value_v2 {font-size: 18px;height: 25px;}
.blockchain_firstrow .row .col-md-6 .row .col-6{ margin-bottom: 30px;}
.epbbox{ justify-content: center;}
}
@media(max-width: 588px){
/* .view_page_header{text-align: center;} */
.view_page_header .navbar-brand{display: block; margin: 0 auto;}
.view_page_header .ml-auto{margin: 0 !important; display: inherit;}
/* .view_page_header{text-align: center;} */
.view_page_header .navbar-brand{display: block; margin: 0 auto;}
.view_page_header .ml-auto{margin: 0 !important; display: inherit;}
}
@media(max-width: 470px){
.navbar-expand .navbar-collapse.home_mble_hdr{display: block !important;}
.navbar-expand .navbar-collapse.home_mble_hdr{display: block !important;}
/* .mble_view_hdr {position: fixed; bottom: -50px;right: 25px;} */
.mble_view_hdr{ display: none !important;}
.body_bg, .view_content {padding-top: 75px;}
.navbar{ padding: .5rem 5px;}
.blockchain_firstrow .row .col-md-6 .row .col-6{ flex: 0 0 100%;max-width: 100%; text-align: center;}
.mble_view_hdr.mobfix {display: block !important;position: fixed;bottom: 20px;right: 20px;}
.privacy_txt { width: 190px;margin: 0px auto !important;}
}
@media(max-width: 365px){
.mobile_table .col-6 {flex: 0 0 100%;max-width: 100%;}
.view_page_header .search_btn{display: none;}
.home_tst_net{font-size: 13px;}
.mobile_table .col-6 {flex: 0 0 100%;max-width: 100%;}
.view_page_header .search_btn{display: none;}
.home_tst_net{font-size: 13px;}
}

View File

@ -12,9 +12,9 @@
html, body{height: 100%;}
body {
font-family: 'Bahnschrift';
color: #686868;
color: #333;
letter-spacing: 0.5px;
background: url(/assets/img/body_bg1.png);
background: url(/assets/img/light-bg.png) no-repeat fixed center;
}
.search {
max-width: 75%;
@ -26,7 +26,13 @@ a:focus {
text-decoration: none;
outline: none;
}
.form-control{transition: all ease 0.75s;}
.form-control:focus {color: #495057;background-color: #fff;border-color: #fff;outline: 0;box-shadow: 0 0 0px .2rem rgba(236, 197, 81, 0.2);}
.dark_theme .form-control:focus {color: #495057;border-color: #4f4e4d;outline: 0;box-shadow: 0 0 0px .2rem rgba(236, 197, 81, 0.2);}
.langbut option:disabled{background-color: #f7f7f9; color: rgba(0,0,0,.2) }
select.langbut{ background-image: url('../img/down-arrow.png'); background-repeat: no-repeat; background-position:93% center; background-size: 12px}
.navbar-brand{ margin-right: 0px;}
@media (min-width: 1200px) {
.container {
@ -131,6 +137,7 @@ a:focus {
transform: rotate(360deg);
}
}
.nav-item { font-size: 15px; display: flex; align-items: center;}
.nav-item.dropdown.bg-white{background-color: #dadada !important;}
/************************************************texts*****************************************/
.txt_primary {
@ -159,9 +166,9 @@ a:focus {
}
/*******************************************Button**********************************************/
.theme_switch {
background: #dadada;
background: #fff;
border: none;
margin-left: 14px;
margin-left: 0;
border-radius: 0px;
}
.light_theme_display {
@ -188,20 +195,25 @@ a:focus {
/* margin-right: 5px; */
}
.headerbg {
background: url(/assets/img/body_bg.png);
/* background: url(/assets/img/body_bg.png); */
overflow: hidden;
background-position-y: -22%;}
.body_bg {
background: url(/assets/img/body_bg.png);
background-position-y: -22%;
/* background-position-y: -22%; */
}
.body_bg, .view_content{
/* background: url(/assets/img/body_bg.png); */
/* background-position-y: -22%; */
padding-top: 100px;
}
.search_input {
border-radius: 25px;
padding: 15px;
padding-right: 45px;
padding: 30px;
padding-right: 65px;
height: 45px;
border: none;
background-color: #f3f4f2;
background: rgba(255, 255, 255, 0.4);
border-radius: 40px;
border: 1px solid #fff;
backdrop-filter: blur(10px);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
.bg_gray{background-color: #dadada ;}
.search_btn {
@ -210,18 +222,10 @@ a:focus {
right: 10px;
color: #BF9B30;
}
.blocks {
background: #f3f4f2;
padding: 10px;
}
.box_shadow {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
/* box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid #dadada;
}
.box_shadow:hover{box-shadow: 0 1px 10px rgb(200, 158, 97);}
.filter_shadow {
filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.1));
border: 1px solid #dadada; */
}
.bg-white{background-color: #f3f4f2 !important}
.chart_heading {
@ -257,30 +261,31 @@ a:focus {
transition: all 0.3s linear;
}
.day_filter {
background-color: #dadada;
background-color: transparent;
font-size: 13px;
padding: 14px;
}
.day_filter a {
margin: 0 5px;
padding: 0 5px;
text-decoration: none !important;
display: inline-block;
color: #686868;
transition: all ease 0.75s !important;
}
.day_filter a:hover {
color: #BF9B30;
}
.day_filter a.active {
border: 1px solid #BF9B30;
/* background: #BF9B30; */
padding: 0 5px;
/* color: #f3f4f2 */
color: #BF9B30
background: #BF9B30;
color: #fff;
}
.difficulty_filter.day_filter a.active{border-color: #0056b3; color: #0056b3;}
.explore_all {
background: #f3f4f2;
background: transparent;
padding: 15px;
font-size: 13px;
color: #BF9B30;
border-top: 1px solid #BF9B30;
border-top: 1px solid #fff;
}
.explore_all a {
color: #BF9B30;
@ -340,12 +345,14 @@ a:focus {
transition: 0.3s linear all;
}
.latest_table {
background-color: #f3f4f2;
border: 1px solid rgb(220, 228, 245);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 15px;
border-bottom: none;
padding: 15px;
border-radius: 15px;
margin-bottom: 30px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid #fff;
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
background: rgba(255, 255, 255, 0.6);
}
.latest_blocks .explore_all {
border-bottom-left-radius: 10px;
@ -397,8 +404,9 @@ a:focus {
.text_break{white-space: normal !important; word-break: break-all;}
/************************************************Footer*****************************************/
.footer_div {
border-top: 1px solid rgba(0, 0, 0, 0.15);
/* border-top: 1px solid rgba(0, 0, 0, 0.15); */
font-size: 14px;
text-align: center;
}
.ftr_services a {
padding: 0 7px;
@ -412,18 +420,16 @@ a:focus {
color: #686868;
}
.footer_div .theme_switch {
background: #dadada;
background: #fff;
}
.privacy_txt {
font-size: 12px;
}
.ftr_links {
padding-left: 67px;
}
.theme_switch{padding-top: 11px; padding-bottom: 11px;}
.theme_switch{padding-top: 11px; padding-bottom: 11px; border-radius: 10px; box-shadow: 0px 2px 5px rgba(0,0,0,0.5); transition: all ease 0.75s;}
.theme_switch:hover, .langbut:hover{ box-shadow: 0px 0px 10px rgba(236, 197, 81, 0.8);}
/*******************************************View Page**************************************************/
.view_page_header{background: #f5f5f5;box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);}
.view_content{background-color: #eeeeee;min-height: 800px;}
.view_page_header{background: rgba(255, 255, 255, 0.46); box-shadow: 0px 0px 5px rgba(0,0,0,0.5); backdrop-filter: blur(5px); border-bottom:1px solid #fff; backdrop-filter: blur(10px); position: fixed; width: 100%; z-index: 1;}
.view_content{background-color: transparent;min-height: 800px;}
.mble_view_hdr{display: inline-block;}
.box_shadow_large{box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);}
.box_shadow_large a{color: #BF9B30;}
@ -479,9 +485,6 @@ a:focus {
.link_to_detail:hover{color: #BF9B30;text-decoration: underline;}
.mobile_table, .peer_mobile_table{border-bottom: 1px solid #686868;position: relative;}
.mobile_table .tble_col{padding: 0;}
.mobile_table:nth-child(even), .peer_mobile_table:nth-child(even) {
background: #dadada;
}
.expnd_blck{display: none;}
.block_div h5{color: #555;font-size: 13px;}
.blck_value{font-size: 12px;}
@ -530,9 +533,14 @@ margin-right: 10px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: #dadada;
background: #fff;
border-radius: 10px; font-size: 15px;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
margin-left: 5px;
transition: all ease 0.75s;
cursor: pointer;
}
.langbut.ftr_lang{background: #dadada;}
.langbut.ftr_lang{background: #fff;}
.arrow_drpdwn{
border: solid rgba(0,0,0,.5);
border-width: 0 2px 2px 0;
@ -544,21 +552,19 @@ margin-right: 10px;
margin-top: -4px;
}
.langbut:focus{outline: none;}
.langbut select{ background: #dadada; border: none; appearance: none; color: #282829;}
.dark_theme .langbut select{ background: #282829; color: #fff;}
.detail_div .difficulty_datas{font-size: 14px !important; color: #BF9B30; margin-bottom: 0px;}
.net_dropdwn{
position: absolute;
top: 20px;
right: 8px;
}
.net_dropdwn{position: absolute; top: 17px; right: 10px;}
.peers_diff .blck_value{word-wrap: break-word;}
.main-svg:first-child{background: rgb(243, 244, 242) none repeat scroll 0% 0% !important;}
.main-svg{background: transparent !important;}
.bg{fill: rgb(243, 244, 242) !important;}
.ftr_links { margin-top: 10px;}
/**********************************************Dark Theme CSS********************************/
body.dark_theme {
background: url(/assets/img/dark_bg.png);
background: url(/assets/img/dark_bg1.png) fixed center;
background-color: #222223;
color: #f3f4f2;
color: #fff;
}
.dark_theme .light_theme_display {
display: none;
@ -567,58 +573,61 @@ body.dark_theme {
display: block;
}
.dark_theme .headerbg {
background: url(/assets/img/dark_bg1.png);
/* background: url(/assets/img/dark_bg1.png); */
}
.navbar-light .navbar-nav .nav-link{transition: all ease 0.75s; padding: .5rem 1rem; font-size: 15px; color: rgb(0, 0, 0);}
.dark_theme .navbar-light .navbar-nav .nav-link{ color: #fff; }
.dark_theme .navbar-light .navbar-nav .nav-link:hover{ color: #ecc551;}
.dark_theme .body_bg {
background: url(/assets/img/dark_bg1.png);
/* background: url(/assets/img/dark_bg1.png); */
/* background-position-y: -22%; */
}
.dark_theme .logo_txt,
.dark_theme .ip_filter a {
color: #f3f4f2;
color: #fff;
}
.dark_theme .navbar-light .navbar-brand:focus, .dark_theme .navbar-light .navbar-brand:hover{color: #f3f4f2;}
.dark_theme .navbar-light .navbar-brand:focus, .dark_theme .navbar-light .navbar-brand:hover{color: #fff;}
.dark_theme .search_input {
background-color: #252525;
background-color: #16161a;
}
.dark_theme .box_shadow{border: 1px solid #4c4c4c}
.dark_theme .blocks,
.dark_theme .explore_all {
background-color: #222223;
background-color: transparent;
border-color: #353535
}
.dark_theme .day_filter,
.dark_theme .detail_div {
background-color: #252525;
background-color: transparent;
border-color: #222223;
}
.dark_theme .detail_div .count span {
color: #a6a6a6;
}
.dark_theme .detail_div .desc {
color: #f3f4f2;
color: #fff;
}
.dark_theme .day_filter a,
.dark_theme .table th {
color: #a6a6a6;
}
.dark_theme .table td {
color: #f3f4f2;
color: #fff;
}
.dark_theme .day_filter a.active {
/* background-color: #BF9B30; */
border-color: #BF9B30;
/* color: #f3f4f2; */
color: #BF9B30;
/* color: #fff; */
color: #fff;
}
.dark_theme .chart_heading {
color: #f3f4f2;
color: #fff;
}
.dark_theme .latest_table {
background-color: #222223;
border-color: #222223;
}
.dark_theme .latest_blocks .explore_all {
background-color: #252525;
background-color: #353535;
border-color: #1c2437;
color: #a6a6a6;
}
@ -638,7 +647,7 @@ body.dark_theme {
.dark_theme .block_div h5{color: #BF9B30;}
.dark_theme .ftr_services a,
.dark_theme .ftr_services {
color: #f3f4f2;
color: #fff;
}
.dark_theme .ftr_services .gray_txt {
color: #3b4e7c;
@ -648,26 +657,26 @@ body.dark_theme {
.dark_theme .footer_div .theme_switch,
.dark_theme .ftr_dropdown,
.dark_theme .langbut.ftr_lang,
.dark_theme .bg-white {
background-color: #222223 !important;
color: #f3f4f2 !important;
}
.dark_theme .bg-white {background-color: transparent !important; color: #f3f4f2 !important;}
.dark_theme .news_desc .bg-white{ background-color: #222223 !important;}
.dark_theme footer.bg-white{background-color: transparent !important}
.dark_theme .nav-item.dropdown .bg-white, .dark_theme .nav-item.dropdown, .dark_theme .langbut, .dark_theme .theme_switch{background-color: #252525 !important}
.dark_theme .langbut{color: #f3f4f2 !important;}
.dark_theme .nav-item.dropdown .bg-white, .dark_theme .nav-item.dropdown, .dark_theme .langbut, .dark_theme .theme_switch{background-color: rgb(15, 15, 15) !important}
.dark_theme .langbut{color:#ecc551 !important}
.dark_theme .arrow_drpdwn{border-color: #f3f4f2 !important;}
.dark_theme .mobile_table:nth-child(2n), .dark_theme .peer_mobile_table:nth-child(2n){background: #252525;}
.dark_theme.langbut.ftr_lang{background: #222223;color: #f3f4f2;}
.dark_theme .mobile_table:nth-child(2n), .dark_theme .peer_mobile_table:nth-child(2n){background: rgba(15, 15, 15, 0.49);}
.dark_theme.langbut.ftr_lang{background: #222223;color: #fff;}
.dark_theme .dropdown a {
color: #f3f4f2 !important;
}
.dark_theme td a.txt_secondary {
color: #f3f4f2;
color: #fff;
}
.dark_theme .main-svg:first-child {
/* background: rgb(39, 49, 75) !important; */
background: #222223 !important;
/* background: transparent !important; */
}
.dark_theme .g-ytitle text, .dark_theme .g-y2title text, .dark_theme .g-y3title text,
.dark_theme .xtick text, .dark_theme .x2tick text, .dark_theme .x3tick text,
@ -680,17 +689,17 @@ body.dark_theme {
stroke: #f3f4f2 !important;
}
.dark_theme .page-link {
background-color: #222223;
border-color: #a6a6a6;
background-color: transparent;
border-color: #1e1e1e;
}
.dark_theme .item_select select {
border-color: #222223;
background-color: #222223;
background-color: #111;
color: #a6a6a6;
}
.dark_theme .footer_div{border-color: #a5a5a5}
.dark_theme .view_page_header {background: #222223;}
.dark_theme .view_content {background-color: #252525;}
.dark_theme .view_page_header {border-color: #352815; box-shadow: inset 0 0em 1em #2b200f, 0 0 0 0px #2b200f, 0.3em 0.3em 1em rgba(0, 0, 0, 0.3); background: rgba(17, 11, 4, 0.21);}
.dark_theme .view_content {background-color: transparent;}
.js-plotly-plot .plotly .modebar .modebar-group,
.zerolinelayer {
display: none;
@ -711,12 +720,12 @@ body.dark_theme {
.dark_theme .modebar .modebar-group{ background:#222324 !important; }
.modebar .modebar-group{ background:#f3f4f2 !important; }
.dark_theme .zibra_grey{background: #252525;}
.dark_theme .zibra_grey{background: #353535;}
.dark_theme .zibra_white{background: #222223;}
.dark_theme .bg{fill: transparent !important;}
.dark_theme .not_found{color: #f3f4f2;}
.dark_theme .not_found{color: #fff;}
.dark_theme .card, .dark_theme .card-header{background-color: #222223; border-color: #222223;}
.dark_theme .tab_hdng{color: #f3f4f2;}
.dark_theme .tab_hdng{color: #fff;}
.dark_theme .view_content table{border-color: #384566;}
.dark_theme .card-body{background-color: #1c2437;}
.diff_margin{margin-bottom: -10px !important; margin-top: -10px !important;}
@ -809,6 +818,227 @@ body.dark_theme {
}
}
.note_tag{background: #bf9b30; position: fixed; width: 100%; bottom: 0; padding: 10px; color: #fff; z-index: 2; margin: 0;}
.note_tag span{
cursor: pointer;
.note_tag span{cursor: pointer;}
.dark_theme .bg-transparent, .bg-transparent{ background: transparent !important;}
.dark_theme .mobile_table h6, .dark_theme .view_moble_tble h6, .dark_theme .peer_mobile_table h6 { color: #bf9b30;}
.dark_theme .expnd_blck{ color: grey;}
/* Loader 4 */
.loader-4 {
height: 32px;
width: 32px;
}
.loader-4::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 12px;
height: 12px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #50524f;
border-radius: 50%;
-webkit-animation: loader-4-1 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
animation: loader-4-1 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.dark_theme .loader-4::after{
background: #fff;
}
@-webkit-keyframes loader-4-1 {
0% {
-webkit-transform: scale(0);
opacity: 0;
}
50% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
opacity: 0;
}
}
@keyframes loader-4-1 {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
.loader-4 span {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 32px;
width: 32px;
-webkit-animation: loader-4-2 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
animation: loader-4-2 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-4-2 {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes loader-4-2 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.loader-4 span::before,
.loader-4 span::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 12px;
width: 12px;
background: #bf9b30;
border-radius: 50%;
-webkit-animation: loader-4-3 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
animation: loader-4-3 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-4-3 {
0% {-webkit-transform: translate3d(0, 0, 0) scale(1);
}
50% {
-webkit-transform: translate3d(-16px, 0, 0) scale(0.5);
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes loader-4-3 {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(-16px, 0, 0) scale(0.5);
}
100% {
transform: translate3d(0, 0, 0) scale(1);
}
}
.loader-4 span::after {
-webkit-animation: loader-4-4 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
animation: loader-4-4 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-4-4 {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
}
50% {
-webkit-transform: translate3d(16px, 0, 0) scale(0.5);
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes loader-4-4 {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(16px, 0, 0) scale(0.5);
}
100% {
transform: translate3d(0, 0, 0) scale(1);
}
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default{font-family: 'Bahnschrift', sans-serif !important;}
.epicbrandlogo{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; margin-right: 15px;}
.drawline::after, .drawline::before {position: absolute;content: ''; right: 0px;height: 100%;width: 1px;top: 0px; background: rgb(255, 255, 255);}
.drawline::before { background: rgba(0, 0, 0, 0.1); right: 1px;}
.dark_theme .drawline::before{background: #000;}
.dark_theme .drawline::after{ background: rgba(255, 255, 255, 0.04);}
.yrvsel { padding: 0px 1rem;}
.mobfix{display: none;}
.tableminheight .mobile_table:nth-child(2n+1) { background: rgba(253, 252, 252, 0.72);}
.dark_theme .tableminheight .mobile_table:nth-child(2n+1) {background:rgba(0, 0, 0, 0);}
.apilinks a{ color: #bf9b30; }
.apilinks a:hover{ color: #000;}
.dark_theme .apilinks a:hover{ color: #fff;}
.footer_div .logo_img {margin-bottom: 30px;}
.subloader{ display: flex; justify-content: center; max-width: 140px;}
.loader-17 {width: 15px;height: 15px;border-radius: 50%;display: inline-block;border-top: 2px solid #FFBF68;border-right: 3px solid transparent;-webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;}
.epbbox{ display: flex; flex-direction: row; align-items: center;}
.lgtxtwid .odometer-digit .odometer-value {width: 25px;}
.medtxtwid .odometer-digit .odometer-value {width: 22px;}
.smatxtwid .odometer-digit .odometer-value {width: 8px;}
@-webkit-keyframes input-shadow {
0% {
box-shadow: 0px 1px 6px rgb(236 197 81 / 80%);
}
50% {
box-shadow:0px 1px 6px rgb(236 197 81 / 80%);
}
100% {
box-shadow: 0px 1px 6px rgb(236 197 81 / 80%);
}
}
@keyframes input-shadow {
0% {
box-shadow: 0px 1px 6px rgb(236 197 81 / 80%);
}
50% {
box-shadow: 0px 1px 6px rgb(236 197 81 / 80%);
}
100% {
box-shadow: 0px 1px 6px rgb(236 197 81 / 80%);
}
}
.highlighttableData {
-webkit-animation:input-shadow ease-in-out 1s 3; /* Chrome, Safari, Opera */
animation:input-shadow ease-in-out 1s 3;
transition: all ease 0.75s;
}

3
src/assets/geojson.json Normal file
View File

@ -0,0 +1,3 @@
{
"locations": []
}

BIN
src/assets/img/blank.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 598 KiB

After

Width:  |  Height:  |  Size: 539 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 174 KiB

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 173 KiB

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/img/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/assets/img/light-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1021 KiB

BIN
src/assets/img/marker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 601 B

BIN
src/assets/img/vite.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -6,13 +6,13 @@
<base href="/">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<body class="dark_theme">
<app-root></app-root>
</body>
<script>
navigator.serviceWorker.getRegistrations().then(function(registrations) {
console.log('checking the service worker registertion...', registrations);

View File

@ -14,19 +14,21 @@ body {
font-family: 'Bahnschrift';
color: #686868;
letter-spacing: 0.5px;
background: url(/assets/img/body_bg1.png);
background: url(/assets/img/light-bg.png) no-repeat fixed center;
}
.search {
max-width: 75%;
margin: 0 auto;
}
.text_underline{text-decoration: underline;color: #BF9B30}
a, .privacy_txt a { color: #BF9B30}
a:hover,
a:focus {
a:focus, .privacy_txt a:hover{
text-decoration: none;
outline: none;
color: rgba(255, 255, 255, 0.932)
}
.langbut option:disabled{background-color: #f7f7f9; color: rgba(0,0,0,.2) }
.langbut option:disabled{background-color: #f7f7f9; color: rgba(17, 11, 4, 0.21) }
@media (min-width: 1200px) {
.container {
@ -188,11 +190,12 @@ a:focus {
/* margin-right: 5px; */
}
.headerbg {
background: url(/assets/img/body_bg.png);
/* background: url(/assets/img/body_bg.png); */
overflow: hidden;
background-position-y: -22%;}
/* background-position-y: -22%; */
}
.body_bg {
background: url(/assets/img/body_bg.png);
/* background: url(/assets/img/body_bg.png); */
background-position-y: -22%;
}
.search_input {
@ -211,18 +214,20 @@ a:focus {
color: #BF9B30;
}
.blocks {
background: #f3f4f2;
padding: 10px;
background: transparent;
padding: 15px;
}
.box_shadow {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid #dadada;
}
.box_shadow:hover{box-shadow: 0 1px 10px rgb(200, 158, 97);}
.filter_shadow {
filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.1));
border-radius: 15px;
margin-bottom: 30px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: all ease 0.75s;
border: 1px solid #fff;
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
background: rgba(255, 255, 255, 0.4);
}
.dark_theme .box_shadow{border-color: #352815; box-shadow: inset 0 0em 1em #2b200f, 0 0 0 0px #2b200f, 0.3em 0.3em 1em rgba(0, 0, 0, 0.3); background: rgba(17, 11, 4, 0.21);}
.bg-white{background-color: #f3f4f2 !important}
.chart_heading {
font-size: 23px;
@ -234,6 +239,28 @@ a:focus {
position: relative;
z-index: 1;
}
.detailsloading {
margin: 0 auto;
margin-bottom: 15px;
}
.margin0auto {
margin: 0 auto;
}
.dark_theme input.search_input {
border: 1px solid #352815;
border-radius: 40px;
box-shadow: inset 0 0em 1em #2b200f, 0 0 0 0px #2b200f, 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgba(17, 11, 4, 0.21);
}
button.search_btn {
position: absolute;
top: 6px;
right: 15px;
color: #858585;
font-size: 1.5rem;
}
.txn_count {
background: #BF9B30;
vertical-align: middle;
@ -257,23 +284,10 @@ a:focus {
transition: all 0.3s linear;
}
.day_filter {
background-color: #dadada;
background-color: transparent;
font-size: 13px;
padding: 14px;
}
.day_filter a {
margin: 0 5px;
text-decoration: none !important;
display: inline-block;
color: #686868;
}
.day_filter a.active {
border: 1px solid #BF9B30;
/* background: #BF9B30; */
padding: 0 5px;
/* color: #f3f4f2 */
color: #BF9B30
}
.difficulty_filter.day_filter a.active{border-color: #0056b3; color: #0056b3;}
.explore_all {
background: #f3f4f2;
@ -282,6 +296,7 @@ a:focus {
color: #BF9B30;
border-top: 1px solid #BF9B30;
}
.explore_all a {
color: #BF9B30;
}
@ -397,7 +412,7 @@ a:focus {
.text_break{white-space: normal !important; word-break: break-all;}
/************************************************Footer*****************************************/
.footer_div {
border-top: 1px solid rgba(0, 0, 0, 0.15);
/* border-top: 1px solid rgba(0, 0, 0, 0.15); */
font-size: 14px;
}
.ftr_services a {
@ -417,15 +432,12 @@ a:focus {
.privacy_txt {
font-size: 12px;
}
.ftr_links {
padding-left: 67px;
}
.theme_switch{padding-top: 11px; padding-bottom: 11px;}
/*******************************************View Page**************************************************/
.view_page_header{background: #f5f5f5;box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);}
.view_page_header{background: #f5f5f5;box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(17, 11, 4, 0.21);}
.view_content{background-color: #eeeeee;min-height: 800px;}
.mble_view_hdr{display: inline-block;}
.box_shadow_large{box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);}
.box_shadow_large{box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(17, 11, 4, 0.21);}
.box_shadow_large a{color: #BF9B30;}
.view_txt{color: #acacac;font-size: 17px;}
.block_rotate {
@ -479,9 +491,6 @@ a:focus {
.link_to_detail:hover{color: #BF9B30;text-decoration: underline;}
.mobile_table, .peer_mobile_table{border-bottom: 1px solid #686868;position: relative;}
.mobile_table .tble_col{padding: 0;}
.mobile_table:nth-child(even), .peer_mobile_table:nth-child(even) {
background: #dadada;
}
.expnd_blck{display: none;}
.block_div h5{color: #555;font-size: 13px;}
.blck_value{font-size: 12px;}
@ -552,11 +561,11 @@ margin-right: 10px;
}
.peers_diff .blck_value{word-wrap: break-word;}
.main-svg:first-child{background: rgb(243, 244, 242) none repeat scroll 0% 0% !important;}
.main-svg{background: transparent !important;}
.bg{fill: rgb(243, 244, 242) !important;}
/**********************************************Dark Theme CSS********************************/
body.dark_theme {
background: url(/assets/img/dark_bg.png);
background: url(/assets/img/dark_bg1.png);
background-color: #222223;
color: #f3f4f2;
}
@ -566,12 +575,13 @@ body.dark_theme {
.dark_theme .dark_theme_display {
display: block;
}
.dark_theme .headerbg {
background: url(/assets/img/dark_bg1.png);
.hidezero span.odometer-digit:first-child {
display: none;
}
.dark_theme .body_bg {
background: url(/assets/img/dark_bg1.png);
/* background-position-y: -22%; */
.row .alignltp {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.dark_theme .logo_txt,
.dark_theme .ip_filter a {
@ -579,17 +589,17 @@ body.dark_theme {
}
.dark_theme .navbar-light .navbar-brand:focus, .dark_theme .navbar-light .navbar-brand:hover{color: #f3f4f2;}
.dark_theme .search_input {
background-color: #252525;
background-color: #353535;
}
.dark_theme .box_shadow{border: 1px solid #4c4c4c}
.dark_theme .blocks,
.dark_theme .explore_all {
background-color: #222223;
}
.dark_theme .day_filter,
.dark_theme .detail_div {
background-color: #252525;
background-color: #353535;
border-color: #222223;
backdrop-filter: blur(10px);
}
.dark_theme .detail_div .count span {
color: #a6a6a6;
@ -597,6 +607,32 @@ body.dark_theme {
.dark_theme .detail_div .desc {
color: #f3f4f2;
}
.odometer-inside {
letter-spacing: 0px;
}
.dark_theme span.epicpricetxt {
color: #fff;
}
span.epicpricetxt {
color: #333;
}
.goldcolortxt {
color: #bf9b32;
}
.exchangelogo {
max-width: 42px;
border-radius: 10px;
}
.textwhite {
color: #ffffff;
}
p.block_value_v2.epicprice {
font-size: 30px;
}
.tableminheight {
min-height: 200px;
}
.dark_theme .day_filter a,
.dark_theme .table th {
color: #a6a6a6;
@ -613,12 +649,23 @@ body.dark_theme {
.dark_theme .chart_heading {
color: #f3f4f2;
}
.dark_theme .latest_table {
select.miningpoolborder {
box-shadow: 0px 0px 5px rgb(236 197 81 / 60%);
height: 36px;
}
.dark_theme div.latest_table {
background-color: #222223;
border-color: #222223;
border: 1px solid #352815;
padding: 15px;
border-radius: 15px;
box-shadow: inset 0 0em 1em #2b200f, 0 0 0 0px #2b200f, 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgba(17, 11, 4, 0.21);
}
.dark_theme .latest_blocks .explore_all {
background-color: #252525;
background-color: #353535;
border-color: #1c2437;
color: #a6a6a6;
}
@ -652,12 +699,11 @@ body.dark_theme {
background-color: #222223 !important;
color: #f3f4f2 !important;
}
.dark_theme .news_desc .bg-white{ background-color: #222223 !important;}
.dark_theme .news_desc div.bg-white{ background-color: transparent !important;}
.dark_theme footer.bg-white{background-color: transparent !important}
.dark_theme .nav-item.dropdown .bg-white, .dark_theme .nav-item.dropdown, .dark_theme .langbut, .dark_theme .theme_switch{background-color: #252525 !important}
.dark_theme .nav-item.dropdown .bg-white, .dark_theme .nav-item.dropdown, .dark_theme .langbut, .dark_theme .theme_switch{background-color: #353535 !important}
.dark_theme .langbut{color: #f3f4f2 !important;}
.dark_theme .arrow_drpdwn{border-color: #f3f4f2 !important;}
.dark_theme .mobile_table:nth-child(2n), .dark_theme .peer_mobile_table:nth-child(2n){background: #252525;}
.dark_theme.langbut.ftr_lang{background: #222223;color: #f3f4f2;}
.dark_theme .dropdown a {
color: #f3f4f2 !important;
@ -665,10 +711,6 @@ body.dark_theme {
.dark_theme td a.txt_secondary {
color: #f3f4f2;
}
.dark_theme .main-svg:first-child {
/* background: rgb(39, 49, 75) !important; */
background: #222223 !important;
}
.dark_theme .g-ytitle text, .dark_theme .g-y2title text, .dark_theme .g-y3title text,
.dark_theme .xtick text, .dark_theme .x2tick text, .dark_theme .x3tick text,
.dark_theme .ytick text, .dark_theme .y2tick text, .dark_theme .y3tick text {
@ -690,7 +732,6 @@ body.dark_theme {
}
.dark_theme .footer_div{border-color: #a5a5a5}
.dark_theme .view_page_header {background: #222223;}
.dark_theme .view_content {background-color: #252525;}
.js-plotly-plot .plotly .modebar .modebar-group,
.zerolinelayer {
display: none;
@ -711,7 +752,7 @@ body.dark_theme {
.dark_theme .modebar .modebar-group{ background:#222324 !important; }
.modebar .modebar-group{ background:#f3f4f2 !important; }
.dark_theme .zibra_grey{background: #252525;}
.dark_theme .zibra_grey{background: #353535;}
.dark_theme .zibra_white{background: #222223;}
.dark_theme .bg{fill: transparent !important;}
.dark_theme .not_found{color: #f3f4f2;}
@ -724,6 +765,10 @@ body.dark_theme {
.dark_theme .legendtext{fill: rgb(255, 255, 255) !important;}
.dark_theme .background_loading{background: #384566;background-image: linear-gradient( to right, #384566 0%, #222223 20%, #384566 40%, #384566 100% );}
.dark_theme .langbut option:disabled { background-color: #384566; color: rgba(255,255,255,.2);}
@keyframes yellowfade {
from {
background: white;
@ -813,7 +858,74 @@ body.dark_theme {
cursor: pointer;
}
.blockchain_firstrow, .blockchain_secondrow, .box_shadow_large{padding: 15px;border-radius: 15px; margin-bottom: 30px; backdrop-filter: blur(10px); border: 1px solid #fff;box-shadow: 0px 3px 5px rgba(0,0,0,0.2); background: rgba(255, 255, 255, 0.6);}
.dark_theme .blockchain_firstrow, .dark_theme .blockchain_secondrow, .dark_theme .box_shadow_large {
border-color: #352815;
box-shadow: inset 0 0em 1em #2b200f, 0 0 0 0px #2b200f, 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
background: rgba(17, 11, 4, 0.21);
}
.dark_theme .box_shadow_large a:hover{ color: #fff;}
p.subheading {
color: #a4a4a4;
margin-top: 5px;
margin-bottom: 5px;
}
p.subvalue {
color: #bf9b32;
margin-bottom: 8px;
}
p.block_value {
/* color: #ecc551; */
color: #bf9b32;
font-size: 50px;
margin: 0px;
}
span.smalltext {
font-size: 14px;
color: #666;
}
.dark_theme span.smalltext {
color: #ffffff;
}
p.block_value_v2 {
color: #bf9b32;
font-size: 38px;
margin: 0px;
height: 45px;
}
.borderright1px {
border-right: 2px solid #352815;
}
div.marginleft15 {
margin-left: 15px;
}
p.block_heading {
margin-top: 5px;
margin-bottom: 0px;
}
@media(max-width:767px){
.countdownbox span{ display: block;}
.countdownbox .count{white-space: normal; text-overflow: inherit; overflow: visible; font-size: 25px;}
}
/*
#mapdiv {
margin: auto;
position:relative;
top:0px;
width: 100%;
height: 460px;
border-color:#ffffff;
border: 1px solid #ffffff;
border-radius: .25rem;
}
#wrapper {
overflow:hidden;
width: 100%;
position:absolute;
top:50px;
} */