mirror of
https://github.com/mempool/mempool.git
synced 2025-01-19 05:34:03 +01:00
clocktower top blocks & layout adjustment
This commit is contained in:
Mononaut
parent
3b459b6857
commit
61531171c9
@ -34,8 +34,9 @@ export default class BlockScene {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.gridSize = this.width / this.gridWidth;
|
||||
this.unitPadding = this.gridSize / 5;
|
||||
this.unitWidth = this.gridSize - (this.unitPadding * 2);
|
||||
this.unitPadding = Math.max(1, Math.floor(this.gridSize / 2.5));
|
||||
this.unitWidth = this.gridSize - (this.unitPadding);
|
||||
console.log(this.gridSize, this.unitPadding, this.unitWidth);
|
||||
|
||||
this.dirty = true;
|
||||
if (this.initialised && this.scene) {
|
||||
@ -342,7 +343,7 @@ export default class BlockScene {
|
||||
private gridToScreen(position: Square | void): Square {
|
||||
if (position) {
|
||||
const slotSize = (position.s * this.gridSize);
|
||||
const squareSize = slotSize - (this.unitPadding * 2);
|
||||
const squareSize = slotSize - (this.unitPadding);
|
||||
|
||||
// The grid is laid out notionally left-to-right, bottom-to-top,
|
||||
// so we rotate and/or flip the y axis to match the target configuration.
|
||||
|
||||
@ -1,53 +1,56 @@
|
||||
<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr"
|
||||
<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [class.tiny]="tiny"
|
||||
[style.left]="static ? (offset || 0) + 'px' : null"
|
||||
*ngIf="static || (loadingBlocks$ | async) === false; else loadingBlocksTemplate">
|
||||
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
|
||||
<ng-container *ngIf="connected && block && !block.loading && !block.placeholder; else placeholderBlock">
|
||||
<div [attr.data-cy]="'bitcoin-block-offset-' + offset + '-index-' + i"
|
||||
class="text-center bitcoin-block mined-block blockchain-blocks-offset-{{ offset }}-index-{{ i }}"
|
||||
[class.offscreen]="tiny && i >= 6"
|
||||
id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"
|
||||
[class.blink-bg]="isSpecial(block.height)">
|
||||
<a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
|
||||
class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}"> </a>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
|
||||
<div *ngIf="!tiny" [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
|
||||
<a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height
|
||||
}}</a>
|
||||
</div>
|
||||
<div class="block-body">
|
||||
<div *ngIf="block?.extras; else emptyfees" [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
|
||||
~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container
|
||||
i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
|
||||
</div>
|
||||
<ng-template #emptyfees>
|
||||
<div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
|
||||
|
||||
<ng-container *ngIf="!tiny">
|
||||
<div *ngIf="block?.extras; else emptyfees" [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
|
||||
~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container
|
||||
i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
|
||||
*ngIf="block?.extras?.feeRange; else emptyfeespan">
|
||||
{{ block?.extras?.feeRange?.[0] | number:feeRounding }} - {{
|
||||
block?.extras?.feeRange[block?.extras?.feeRange?.length - 1] | number:feeRounding }} <ng-container
|
||||
i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
|
||||
</div>
|
||||
<ng-template #emptyfeespan>
|
||||
<div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fee-span">
|
||||
|
||||
<ng-template #emptyfees>
|
||||
<div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
|
||||
*ngIf="block?.extras?.feeRange; else emptyfeespan">
|
||||
{{ block?.extras?.feeRange?.[0] | number:feeRounding }} - {{
|
||||
block?.extras?.feeRange[block?.extras?.feeRange?.length - 1] | number:feeRounding }} <ng-container
|
||||
i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo"
|
||||
class="block-size">
|
||||
<app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
|
||||
</div>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + 'block-size'" *ngIf="!showMiningInfo"
|
||||
class="block-size" [innerHTML]="'‎' + (block.size | bytes: 2)"></div>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + i + '-transactions'" class="transaction-count">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
|
||||
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
|
||||
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
|
||||
</div>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-time'" class="time-difference">
|
||||
<app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></div>
|
||||
<ng-template #emptyfeespan>
|
||||
<div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fee-span">
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo"
|
||||
class="block-size">
|
||||
<app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
|
||||
</div>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + 'block-size'" *ngIf="!showMiningInfo"
|
||||
class="block-size" [innerHTML]="'‎' + (block.size | bytes: 2)"></div>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + i + '-transactions'" class="transaction-count">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
|
||||
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
|
||||
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
|
||||
</div>
|
||||
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-time'" class="time-difference">
|
||||
<app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
|
||||
<a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge badge-primary"
|
||||
|
||||
@ -22,7 +22,11 @@
|
||||
.mined-block {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
transition: background 2s, left 2s, transform 1s;
|
||||
transition: background 2s, left 2s, transform 1s, opacity 1s;
|
||||
}
|
||||
|
||||
.mined-block.offscreen {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mined-block.placeholder-block {
|
||||
|
||||
@ -24,6 +24,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
|
||||
@Input() count: number = 8; // number of blocks in this chunk (dynamic blocks only)
|
||||
@Input() loadingTip: boolean = false;
|
||||
@Input() connected: boolean = true;
|
||||
@Input() tiny: boolean = false;
|
||||
|
||||
specialBlocks = specialBlocks;
|
||||
network = '';
|
||||
|
||||
@ -1,93 +1,94 @@
|
||||
<div class="clock-face">
|
||||
<ng-content></ng-content>
|
||||
<svg
|
||||
class="cut-out"
|
||||
width="384"
|
||||
height="384"
|
||||
viewBox="0 0 384 384"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
class="face"
|
||||
d="M 0,0 V 384 H 384 V 0 Z m 192,14.5 9.28906,0.244141 9.26563,0.728515 9.21289,1.212891 9.13672,1.693359 9.03515,2.169922 8.91016,2.640625 8.75977,3.101563 8.58593,3.55664 8.38672,4 8.16797,4.433594 7.92383,4.855469 7.6582,5.263672 7.37109,5.65625 7.06641,6.035156 6.74024,6.398437 6.39648,6.740235 6.03516,7.066406 5.6582,7.371094 5.26367,7.658203 4.85547,7.923828 4.43359,8.16797 4,8.38672 3.55664,8.58593 3.10157,8.75977 2.64062,8.91016 2.16797,9.03515 1.69336,9.13672 1.21289,9.21289 0.73047,9.26563 0.24023,9.20117 0.002,-0.0898 V 192 l -0.002,-0.0879 -0.24023,9.37695 -0.73047,9.26563 -1.21289,9.21289 -1.69336,9.13672 -2.16797,9.03515 -2.64062,8.91016 -3.10157,8.75977 -3.55664,8.58593 -4,8.38672 -4.43359,8.16797 -4.85547,7.92383 -5.26367,7.6582 -5.6582,7.37109 -6.03516,7.06641 -6.39648,6.74024 -6.74024,6.39843 -7.06641,6.03516 -7.37109,5.65625 -7.6582,5.26367 -7.92383,4.85547 -8.16797,4.43359 -8.38672,4 -8.58593,3.55664 -8.75977,3.10157 -8.91016,2.64062 -9.03515,2.16992 -9.13672,1.69336 -9.21289,1.21289 -9.26563,0.72852 L 192,369.5 l -9.28906,-0.24414 -9.26367,-0.72852 -9.21485,-1.21289 -9.13672,-1.69336 -9.03515,-2.16992 -8.91016,-2.64062 -8.75977,-3.10157 -8.58593,-3.55664 -8.38672,-4 -8.16797,-4.43359 -7.921875,-4.85547 -7.658203,-5.26367 -7.373047,-5.65625 -7.066406,-6.03516 -6.740235,-6.39843 -6.396484,-6.74024 -6.035156,-7.06641 -5.658203,-7.37109 -5.263672,-7.6582 -4.855469,-7.92383 -4.433594,-8.16797 -4,-8.38672 -3.55664,-8.58593 -3.101563,-8.75977 -2.638672,-8.91016 -2.169922,-9.03515 -1.693359,-9.13672 -1.212891,-9.21289 -0.730468,-9.26563 L 14.501953,192 l 0.242188,-9.28906 0.730468,-9.26563 1.212891,-9.21289 1.693359,-9.13672 2.169922,-9.03515 2.638672,-8.91016 3.101563,-8.75977 3.55664,-8.58593 4,-8.38672 4.433594,-8.16797 4.855469,-7.923828 5.263672,-7.658203 5.658203,-7.371094 6.035156,-7.066406 6.396484,-6.740235 6.740235,-6.398437 7.066406,-6.035156 7.373047,-5.65625 7.658203,-5.263672 7.921875,-4.855469 8.16797,-4.433594 8.38672,-4 8.58593,-3.55664 8.75977,-3.101563 8.91016,-2.640625 9.03515,-2.169922 9.13672,-1.693359 9.21485,-1.212891 9.26367,-0.728515 z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="demo-dial"
|
||||
width="384"
|
||||
height="384"
|
||||
viewBox="0 0 384 384"
|
||||
>
|
||||
<g>
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.35815948,0.20465831,-0.46186107,0.80827368,136.26002,-98.731071)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.35815948,0.20465831,0.46186107,0.80827368,247.72985,-98.663793)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1-4" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.35815948,0.20465831,0.46186107,0.80827368,406.16737,175.58496)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1-4-6" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.35815948,0.20465831,-0.46186107,0.80827368,-22.201062,175.64022)" />
|
||||
<polyline points="898.438,468.750 897.849,446.262 896.084,423.835 893.147,401.532 889.048,379.413 883.796,357.539 877.407,335.969 869.898,314.764 861.289,293.980 851.604,273.676 840.870,253.906 829.116,234.725 816.374,216.186 802.680,198.339 788.070,181.233 772.585,164.915 756.267,149.430 739.161,134.820 721.314,121.126 702.775,108.384 683.594,96.630 663.824,85.896 643.520,76.211 622.736,67.602 601.531,60.093 579.961,53.704 558.087,48.452 535.968,44.353 513.665,41.416 491.238,39.651 468.750,39.062 446.262,39.651 423.835,41.416 401.532,44.353 379.413,48.452 357.539,53.704 335.969,60.093 314.764,67.602 293.980,76.211 273.676,85.896 253.906,96.630 234.725,108.384 216.186,121.126 198.339,134.820 181.233,149.430 164.915,164.915 149.430,181.233 134.820,198.339 121.126,216.186 108.384,234.725 96.630,253.906 85.896,273.676 76.211,293.980 67.602,314.764 60.093,335.969 53.704,357.539 48.452,379.413 44.353,401.532 41.416,423.835 39.651,446.262 39.062,468.750 39.651,491.238 41.416,513.665 44.353,535.968 48.452,558.087 53.704,579.961 60.093,601.531 67.602,622.736 76.211,643.520 85.896,663.824 96.630,683.594 108.384,702.775 121.126,721.314 134.820,739.161 149.430,756.267 164.915,772.585 181.233,788.070 198.339,802.680 216.186,816.374 234.725,829.116 253.906,840.870 273.676,851.604 293.980,861.289 314.764,869.898 335.969,877.407 357.539,883.796 379.413,889.048 401.532,893.147 423.835,896.084 446.262,897.849 468.750,898.438 491.238,897.849 513.665,896.084 535.968,893.147 558.087,889.048 579.961,883.796 601.531,877.407 622.736,869.898 643.520,861.289 663.824,851.604 683.594,840.870 702.775,829.116 721.314,816.374 739.161,802.680 756.267,788.070 772.585,772.585 788.070,756.267 802.680,739.161 816.374,721.314 829.116,702.775 840.870,683.594 851.604,663.824 861.289,643.520 869.898,622.736 877.407,601.531 883.796,579.961 889.048,558.087 893.147,535.968 896.084,513.665 897.849,491.238 898.437,468.320 " id="polyline22" style="fill:none;stroke:#fff3f3;stroke-width:4.85521;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41193006,0,0,0.41192762,-1.0918732,-1.0910719)" />
|
||||
<polyline points="509.173,84.150 511.419,62.783 " id="polyline27" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="549.153,90.482 553.620,69.467 " id="polyline32" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="588.253,100.959 594.892,80.526 " id="polyline37" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="626.043,115.465 634.781,95.838 " id="polyline42" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="696.058,155.888 708.686,138.507 " id="polyline52" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="727.515,181.362 741.891,165.396 " id="polyline57" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="756.138,209.985 772.104,195.609 " id="polyline62" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="781.612,241.442 798.993,228.814 " id="polyline67" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="822.035,311.457 841.662,302.719 " id="polyline77" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="836.541,349.247 856.974,342.608 " id="polyline82" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="847.018,388.347 868.033,383.880 " id="polyline87" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="853.350,428.327 874.717,426.081 " id="polyline92" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="855.469,468.750 876.953,468.750 " id="polyline97-5" style="fill:none;stroke:#fff3f3;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.93092534,0,0,0.41250847,-456.01734,-1.3575155)" />
|
||||
<polyline points="853.350,509.173 874.717,511.419 " id="polyline102" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="847.018,549.153 868.033,553.620 " id="polyline107" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="836.541,588.253 856.974,594.892 " id="polyline112" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="822.035,626.043 841.662,634.781 " id="polyline117" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="781.612,696.058 798.993,708.686 " id="polyline127" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="756.138,727.515 772.104,741.891 " id="polyline132" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="727.515,756.138 741.891,772.104 " id="polyline137" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="696.058,781.612 708.686,798.993 " id="polyline142" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="626.043,822.035 634.781,841.662 " id="polyline152" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="588.253,836.541 594.892,856.974 " id="polyline157" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="549.153,847.018 553.620,868.033 " id="polyline162" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="509.173,853.350 511.419,874.717 " id="polyline167" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="468.750,855.469 468.750,876.953 " id="polyline172-3" style="fill:none;stroke:#fff3f3;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3981517,-455.96156)" />
|
||||
<polyline points="428.327,853.350 426.081,874.717 " id="polyline177" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="388.347,847.018 383.880,868.033 " id="polyline182" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="349.247,836.541 342.608,856.974 " id="polyline187" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="311.457,822.035 302.719,841.662 " id="polyline192" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="241.442,781.612 228.814,798.993 " id="polyline202" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="209.985,756.138 195.609,772.104 " id="polyline207" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="181.362,727.515 165.396,741.891 " id="polyline212" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="155.888,696.058 138.507,708.686 " id="polyline217" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="115.465,626.043 95.838,634.781 " id="polyline227" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="100.959,588.253 80.526,594.892 " id="polyline232" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="90.482,549.153 69.467,553.620 " id="polyline237" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="84.150,509.173 62.783,511.419 " id="polyline242" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="82.031,468.750 60.547,468.750 " id="polyline247" style="fill:none;stroke:#fff3f3;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.93092534,0,0,0.41250847,-32.750989,-1.3633461)" />
|
||||
<polyline points="84.150,428.327 62.783,426.081 " id="polyline252" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="90.482,388.347 69.467,383.880 " id="polyline257" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="100.959,349.247 80.526,342.608 " id="polyline262" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="115.465,311.457 95.838,302.719 " id="polyline267" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="155.888,241.442 138.507,228.814 " id="polyline277" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="181.362,209.985 165.396,195.609 " id="polyline282" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="209.985,181.362 195.609,165.396 " id="polyline287" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="241.442,155.888 228.814,138.507 " id="polyline292" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="311.457,115.465 302.719,95.838 " id="polyline302" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="349.247,100.959 342.608,80.526 " id="polyline307" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="388.347,90.482 383.880,69.467 " id="polyline312" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="428.327,84.150 426.081,62.783 " id="polyline317" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.601266" transform="matrix(0.41250847,0,0,0.41250847,-1.3624032,-1.3633461)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322" style="fill:none;stroke:#fff3f3;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3624032,-32.751932)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.20473747,0.35811424,-0.80817157,0.46203972,290.78528,-88.000115)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.20473747,-0.35811424,-0.80817157,-0.46203972,290.78131,472.03418)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1-3" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.20473747,-0.35811424,0.80817157,-0.46203972,93.210129,472.02435)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1-3-0" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.20473747,0.35811424,0.80817157,0.46203972,93.214111,-88.033531)" />
|
||||
<path style="fill:none;fill-opacity:1;stroke:#9857ff;stroke-width:10.0718;stroke-dasharray:none;stroke-opacity:1" id="path13861" d="M 191.89712,19.035919 A 172.96411,172.96411 0 0 1 361.68171,158.46343 172.96411,172.96411 0 0 1 257.70512,351.99819 172.96411,172.96411 0 0 1 47.721163,287.39497" />
|
||||
<path style="fill:none;fill-opacity:1;stroke:#1bd8f4;stroke-width:6;stroke-dasharray:none;stroke-opacity:1" d="M 291.55389,351.36143 280.94217,334.40881" id="path21241-7-9-8" />
|
||||
<path style="fill:none;fill-opacity:1;stroke:#1bd8f4;stroke-width:6;stroke-dasharray:none;stroke-opacity:1" d="M 278.69152,358.70667 269.4674,340.96081" id="path21241-7-9-8-91" />
|
||||
<path style="fill:none;fill-opacity:1;stroke:#1bd8f4;stroke-width:6;stroke-dasharray:none;stroke-opacity:1" d="M 92.519024,351.41399 103.10783,334.44705" id="path21241-7-9-8-91-5" />
|
||||
<path style="fill:none;fill-opacity:1;stroke:#1bd8f4;stroke-width:6;stroke-dasharray:none;stroke-opacity:1" d="m 276.14552,23.997555 -8.8746,17.923218" id="path21241-7-9-8-9" />
|
||||
<path style="fill:none;fill-opacity:1;stroke:#1bd8f4;stroke-width:6;stroke-dasharray:none;stroke-opacity:1" d="m 375.71332,152.74785 -19.576,4.09644" id="path21241-7-9-8-94" />
|
||||
</g>
|
||||
</svg>
|
||||
<div class="clock-wrapper" [style]="wrapperStyle">
|
||||
<div class="clockchain-bar">
|
||||
<div class="clockchain" [style]="chainStyle">
|
||||
<app-clockchain></app-clockchain>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clock-face" [style]="faceStyle">
|
||||
<ng-content></ng-content>
|
||||
<svg
|
||||
class="cut-out"
|
||||
width="384"
|
||||
height="384"
|
||||
viewBox="0 0 384 384"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
class="face"
|
||||
d="M 0,0 V 384 H 384 V 0 Z M 192,15 A 177,177 0 0 1 369,192 177,177 0 0 1 192,369 177,177 0 0 1 15,192 177,177 0 0 1 192,15 Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="demo-dial"
|
||||
width="384"
|
||||
height="384"
|
||||
viewBox="0 0 384 384"
|
||||
>
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.35815948,0.20465831,-0.46186107,0.80827368,136.25965,-98.671146)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.35815948,0.20465831,0.46186107,0.80827368,247.72948,-98.603866)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1-4" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.35815948,0.20465831,0.46186107,0.80827368,406.167,175.64488)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1-4-6" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.35815948,0.20465831,-0.46186107,0.80827368,-22.20143,175.70014)" />
|
||||
<path id="polyline22" style="color:#000000;fill:#ffffff;fill-opacity:0.7;stroke-width:0.411929;" d="m 192,14.058594 -9.3164,0.24414 -9.28907,0.730469 -9.24023,1.21875 -9.16211,1.697266 -9.0625,2.175781 -8.93555,2.646484 -8.7832,3.109375 -8.61133,3.56836 -8.41016,4.011719 -8.1914,4.447265 -7.945316,4.869143 -7.679687,5.27734 -7.392579,5.67383 -7.087891,6.05078 -6.759764,6.414063 -6.414064,6.761718 -6.050779,7.085937 -5.67383,7.392581 -5.279295,7.679686 -4.869142,7.945309 -4.445312,8.19141 -4.013672,8.41016 -3.566407,8.61133 -3.109374,8.7832 -2.648438,8.93554 -2.173828,9.06055 -1.699219,9.16406 -1.216797,9.23828 -0.730468,9.29102 -0.244141,9.31641 0.244141,9.31445 0.730468,9.29101 1.216797,9.23829 1.699219,9.16406 2.173828,9.06055 2.648438,8.93554 3.109374,8.78516 3.566407,8.60937 4.013672,8.41211 4.445312,8.18946 4.869142,7.94531 5.279295,7.67969 5.67383,7.39453 6.050779,7.08593 6.414064,6.75977 6.759764,6.41406 7.087891,6.05274 7.392579,5.67187 7.679687,5.2793 0.18164,0.11133 1.058595,-1.69727 -0.150392,-0.0918 -7.593749,-5.21875 -7.310548,-5.60938 -7.005859,-5.98437 -6.683594,-6.34375 -6.343748,-6.6836 -5.984376,-7.00586 -5.609375,-7.31054 -5.21875,-7.59375 -4.814453,-7.85547 -4.396484,-8.09961 -3.966797,-8.31446 -3.525391,-8.51367 -3.076172,-8.68554 -2.617187,-8.83594 -2.150391,-8.95899 -1.679687,-9.06054 -1.203125,-9.13477 -0.722657,-9.18554 -0.242187,-9.21094 0.242187,-9.21094 0.722657,-9.18555 1.203125,-9.13672 1.679687,-9.06054 2.150391,-8.95899 2.617187,-8.83593 3.076172,-8.6836 3.525391,-8.51367 3.966797,-8.31641 4.396484,-8.09765 4.814453,-7.857424 5.21875,-7.593749 5.609375,-7.31055 5.984376,-7.005859 6.343748,-6.683591 6.683594,-6.343752 7.005859,-5.98242 7.310548,-5.609375 7.593749,-5.220705 L 104,39.638672 l 8.09766,-4.394531 8.3164,-3.96875 8.51368,-3.525391 8.68554,-3.076172 8.83399,-2.617187 8.96093,-2.150391 9.0586,-1.679688 9.13672,-1.201171 9.18554,-0.72461 9.21094,-0.240234 9.21094,0.240234 9.18554,0.72461 9.13672,1.201171 9.0586,1.679688 8.96093,2.150391 8.83399,2.617187 8.68555,3.076172 8.51367,3.525391 4.56055,2.175781 0.88671,-1.791016 -4.63281,-2.210937 -8.61133,-3.56836 -8.7832,-3.109375 -8.93555,-2.646484 -9.0625,-2.175781 -9.16211,-1.697266 -9.24023,-1.21875 -9.28906,-0.730469 z m 82.4082,20.269531 -0.88867,1.792969 6.48047,3.517578 7.85742,4.814453 7.59375,5.220705 7.31055,5.609375 7.00586,5.98242 6.68359,6.343752 6.34375,6.683591 5.98438,7.005859 5.60937,7.31055 5.21875,7.593749 4.81445,7.857424 4.39649,8.09765 3.96679,8.31641 3.5254,8.51367 3.07617,8.6836 2.61719,8.83593 1.39453,5.8125 1.95898,-0.41015 -1.41992,-5.91993 -2.64844,-8.93554 -3.10937,-8.7832 -3.56641,-8.61133 -4.01367,-8.41016 -4.44531,-8.19141 -4.86915,-7.945309 -5.27929,-7.679686 -5.67383,-7.392581 -6.05078,-7.085937 -6.41406,-6.761718 -6.75977,-6.414063 -7.08789,-6.05078 -7.39258,-5.67383 -7.67968,-5.27734 -7.94532,-4.869143 z m 92.20899,123.447265 -1.95899,0.41016 1.17579,6.34179 1.20312,9.13672 0.72265,9.18555 0.23829,9.10742 -0.23829,9.31446 -0.72265,9.18554 -1.20312,9.13477 -1.67969,9.06054 -2.15039,8.95899 -2.61719,8.83594 -3.07617,8.68554 -3.5254,8.51367 -3.96679,8.31446 -4.39649,8.09961 -4.81445,7.85547 -5.21875,7.59375 -5.60937,7.31054 -5.98438,7.00586 -6.34375,6.6836 -6.68359,6.34375 -7.00586,5.98437 -7.31055,5.60938 -7.59375,5.21875 -0.0898,0.0547 1.0625,1.69531 0.11719,-0.0723 7.67968,-5.2793 7.39258,-5.67187 7.08789,-6.05274 6.75977,-6.41406 6.41406,-6.75977 6.05078,-7.08593 5.67383,-7.39453 5.27929,-7.67969 4.86915,-7.94531 4.44531,-8.18946 4.01367,-8.41211 3.56641,-8.60937 3.10937,-8.78516 2.64844,-8.93554 2.17383,-9.06055 1.69922,-9.16406 1.21679,-9.23829 0.73047,-9.29101 0.24024,-9.3418 h 0.004 l -0.004,-0.0762 0.002,-0.0488 h -0.002 l -0.24024,-9.16406 -0.73047,-9.29102 -1.21679,-9.23828 z m -83.96485,185.08008 -2.65234,1.625 -4.17578,2.26758 0.92383,1.77539 4.2539,-2.31055 2.71094,-1.66211 z m -181.24218,0.039 -1.0586,1.69531 2.64649,1.62305 8.1914,4.44726 8.41016,4.01172 8.61133,3.56641 8.7832,3.10937 8.93555,2.64844 9.0625,2.17578 9.16211,1.69727 9.24023,1.2168 9.28907,0.73046 9.3164,0.24414 9.31641,-0.24414 9.28906,-0.73046 9.24023,-1.2168 9.16211,-1.69727 9.0625,-2.17578 8.93555,-2.64844 8.7832,-3.10937 8.61133,-3.56641 7.03711,-3.35547 -0.92383,-1.77734 -6.92773,3.30469 -8.51367,3.52539 -8.68555,3.07617 -8.83399,2.61719 -8.96093,2.15039 -9.0586,1.67969 -9.13672,1.20312 -9.18554,0.72266 -9.21094,0.24218 -9.21094,-0.24218 -9.18554,-0.72266 -9.13672,-1.20312 -9.0586,-1.67969 -8.96093,-2.15039 -8.83399,-2.61719 -8.68554,-3.07617 -8.51368,-3.52539 -8.3164,-3.9668 L 104,344.48045 Z" />
|
||||
<polyline points="509.173,84.150 511.419,62.783 " id="polyline27" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="549.153,90.482 553.620,69.467 " id="polyline32" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="588.253,100.959 594.892,80.526 " id="polyline37" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="626.043,115.465 634.781,95.838 " id="polyline42" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="696.058,155.888 708.686,138.507 " id="polyline52" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="727.515,181.362 741.891,165.396 " id="polyline57" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="756.138,209.985 772.104,195.609 " id="polyline62" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="781.612,241.442 798.993,228.814 " id="polyline67" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="822.035,311.457 841.662,302.719 " id="polyline77" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="836.541,349.247 856.974,342.608 " id="polyline82" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="847.018,388.347 868.033,383.880 " id="polyline87" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="853.350,428.327 874.717,426.081 " id="polyline92" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="855.469,468.750 876.953,468.750 " id="polyline97-5" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.93092534,0,0,0.41250847,-456.01771,-1.2975921)" />
|
||||
<polyline points="853.350,509.173 874.717,511.419 " id="polyline102" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="847.018,549.153 868.033,553.620 " id="polyline107" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="836.541,588.253 856.974,594.892 " id="polyline112" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="822.035,626.043 841.662,634.781 " id="polyline117" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="781.612,696.058 798.993,708.686 " id="polyline127" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="756.138,727.515 772.104,741.891 " id="polyline132" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="727.515,756.138 741.891,772.104 " id="polyline137" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="696.058,781.612 708.686,798.993 " id="polyline142" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="626.043,822.035 634.781,841.662 " id="polyline152" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="588.253,836.541 594.892,856.974 " id="polyline157" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="549.153,847.018 553.620,868.033 " id="polyline162" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="509.173,853.350 511.419,874.717 " id="polyline167" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="468.750,855.469 468.750,876.953 " id="polyline172-3" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3985193,-455.90164)" />
|
||||
<polyline points="428.327,853.350 426.081,874.717 " id="polyline177" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="388.347,847.018 383.880,868.033 " id="polyline182" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="349.247,836.541 342.608,856.974 " id="polyline187" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="311.457,822.035 302.719,841.662 " id="polyline192" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="241.442,781.612 228.814,798.993 " id="polyline202" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="209.985,756.138 195.609,772.104 " id="polyline207" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="181.362,727.515 165.396,741.891 " id="polyline212" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="155.888,696.058 138.507,708.686 " id="polyline217" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="115.465,626.043 95.838,634.781 " id="polyline227" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="100.959,588.253 80.526,594.892 " id="polyline232" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="90.482,549.153 69.467,553.620 " id="polyline237" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="84.150,509.173 62.783,511.419 " id="polyline242" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="82.031,468.750 60.547,468.750 " id="polyline247" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.93092534,0,0,0.41250847,-32.751357,-1.3034227)" />
|
||||
<polyline points="84.150,428.327 62.783,426.081 " id="polyline252" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="90.482,388.347 69.467,383.880 " id="polyline257" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="100.959,349.247 80.526,342.608 " id="polyline262" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="115.465,311.457 95.838,302.719 " id="polyline267" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="155.888,241.442 138.507,228.814 " id="polyline277" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="181.362,209.985 165.396,195.609 " id="polyline282" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="209.985,181.362 195.609,165.396 " id="polyline287" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="241.442,155.888 228.814,138.507 " id="polyline292" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="311.457,115.465 302.719,95.838 " id="polyline302" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="349.247,100.959 342.608,80.526 " id="polyline307" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="388.347,90.482 383.880,69.467 " id="polyline312" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="428.327,84.150 426.081,62.783 " id="polyline317" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.20473747,0.35811424,-0.80817157,0.46203972,290.78491,-87.940191)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.20473747,-0.35811424,-0.80817157,-0.46203972,290.78094,472.0941)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1-3" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.20473747,-0.35811424,0.80817157,-0.46203972,93.209761,472.08427)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1-3-0" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.20473747,0.35811424,0.80817157,0.46203972,93.213741,-87.973607)" />
|
||||
<path id="path1485" style="color:#000000;fill:#8F5FF6;" d="m 191.70703,6.0546875 0.0293,18.0000005 c 25.92793,-0.04081 50.70715,5.83951 72.89844,16.486328 l 7.97265,-16.097657 C 247.9762,12.573302 220.46847,6.0094202 191.70703,6.0546875 Z m 86.26172,21.0800785 -7.9707,16.099609 c 42.19467,22.134002 74.21637,61.841645 85.57812,110.720705 l 17.62305,-3.68555 C 360.68281,95.905845 324.97659,51.686549 277.96875,27.134766 Z m 96.48437,129.001954 -17.61914,3.68555 c 13.35969,68.32077 -16.83107,137.08767 -74.56445,173.8164 l 1.21485,-0.76172 9.54101,15.24024 c 63.20757,-40.86873 96.22493,-116.78347 81.42773,-191.98047 z M 58.640625,294.08398 44.347656,305.02539 c 13.279174,17.3476 29.141083,31.79971 46.701172,43.13867 l 9.513672,-15.24609 0.45898,0.28711 C 85.090962,322.93877 70.69637,309.83333 58.640625,294.08398 Z m 221.566405,40.84375 c -5.51648,3.39833 -11.27615,6.50878 -17.26758,9.30079 -51.98184,24.22348 -111.05797,19.80883 -157.85351,-8.48633 l 0.5664,0.35351 -9.509762,15.24024 c 51.766092,31.10054 117.058832,35.92722 174.398442,9.20703 1.53058,-0.71326 3.04761,-1.44484 4.55078,-2.19531 l -8.28711,-15.94336 5.32422,-2.76758 8.28515,15.9414 c 2.54788,-1.37601 5.05637,-2.80312 7.51953,-4.28515 l -9.53515,-15.23242 z" />
|
||||
<polyline points="468.750,82.031 468.750,41.8 " id="polyline322" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3627708,-32.692008)" />
|
||||
<path id="gnomon" style="opacity:1;fill:#80C2E1;fill-opacity:1;stroke:none;stroke-width:3.73798;stroke-opacity:1" d="M 46.463002,316.72751 33.743954,300.31177 65.383738,288.93232 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,4 +1,4 @@
|
||||
.clock-face {
|
||||
.clock-wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -6,18 +6,40 @@
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
.cut-out, .demo-dial {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.clockchain-bar, .clock-face {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.face {
|
||||
fill: #11131f;
|
||||
.clockchain-bar {
|
||||
position: relative;
|
||||
height: 15.625%;
|
||||
// background: #1d1f31;
|
||||
// box-shadow: 0 0 15px #000;
|
||||
}
|
||||
|
||||
.clock-face {
|
||||
position: relative;
|
||||
height: 84.375%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
|
||||
.cut-out, .demo-dial {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.face {
|
||||
fill: #11131f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, HostListener, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-clock-face',
|
||||
@ -6,10 +6,34 @@ import { Component, OnInit } from '@angular/core';
|
||||
styleUrls: ['./clock-face.component.scss'],
|
||||
})
|
||||
export class ClockFaceComponent implements OnInit {
|
||||
size: number;
|
||||
wrapperStyle;
|
||||
chainStyle;
|
||||
faceStyle;
|
||||
showDial: boolean = false;
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
// initialize stuff
|
||||
this.resizeCanvas();
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
resizeCanvas(): void {
|
||||
this.size = Math.min(window.innerWidth, 0.78125 * window.innerHeight);
|
||||
this.wrapperStyle = {
|
||||
'--clock-width': `${this.size}px`
|
||||
};
|
||||
const scaleFactor = window.innerWidth / 1390;
|
||||
this.chainStyle = {
|
||||
transform: `translate(2vw, 0.5vw) scale(${scaleFactor})`,
|
||||
transformOrigin: 'top left',
|
||||
};
|
||||
|
||||
this.faceStyle = {
|
||||
width: `${this.size}px`,
|
||||
height: `${this.size}px`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
<div class="clock-wrapper">
|
||||
<app-clock-face>
|
||||
<div class="block-wrapper">
|
||||
<ng-container *ngIf="block && block.height >= 0">
|
||||
<div class="block-cube">
|
||||
<div class="side top"></div>
|
||||
<div class="side bottom"></div>
|
||||
<div class="side right" [style]="blockStyle"></div>
|
||||
<div class="side left" [style]="blockStyle"></div>
|
||||
<div class="side front" [style]="blockStyle"></div>
|
||||
<div class="side back" [style]="blockStyle"></div>
|
||||
</div>
|
||||
<div class="title-wrapper">
|
||||
<h1 class="block-height">{{ block.height }}</h1>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</app-clock-face>
|
||||
</div>
|
||||
<app-clock-face>
|
||||
<div class="block-wrapper">
|
||||
<ng-container *ngIf="block && block.height >= 0">
|
||||
<div class="block-cube">
|
||||
<div class="side top"></div>
|
||||
<div class="side bottom"></div>
|
||||
<div class="side right" [style]="blockStyle"></div>
|
||||
<div class="side left" [style]="blockStyle"></div>
|
||||
<div class="side front" [style]="blockStyle"></div>
|
||||
<div class="side back" [style]="blockStyle"></div>
|
||||
</div>
|
||||
<div class="title-wrapper">
|
||||
<h1 class="block-height">{{ block.height }}</h1>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</app-clock-face>
|
||||
@ -1,15 +1,13 @@
|
||||
<div class="clock-wrapper">
|
||||
<app-clock-face>
|
||||
<div class="block-wrapper">
|
||||
<ng-container *ngIf="block && block.height >= 0">
|
||||
<div class="block-sizer" [style]="blockSizerStyle">
|
||||
<app-mempool-block-overview [index]="0"></app-mempool-block-overview>
|
||||
</div>
|
||||
<div class="fader"></div>
|
||||
<div class="title-wrapper">
|
||||
<h1 class="block-height">{{ block.height }}</h1>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</app-clock-face>
|
||||
</div>
|
||||
<app-clock-face>
|
||||
<div class="block-wrapper">
|
||||
<ng-container *ngIf="block && block.height >= 0">
|
||||
<div class="block-sizer" [style]="blockSizerStyle">
|
||||
<app-mempool-block-overview [index]="0"></app-mempool-block-overview>
|
||||
</div>
|
||||
<div class="fader"></div>
|
||||
<div class="title-wrapper">
|
||||
<h1 class="block-height">{{ block.height }}</h1>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</app-clock-face>
|
||||
@ -44,10 +44,9 @@ export class ClockBComponent implements OnInit {
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
resizeCanvas(): void {
|
||||
const screenSize = Math.min(window.innerWidth, window.innerHeight);
|
||||
const baseSize = 0.92 * screenSize;
|
||||
const size = Math.ceil(baseSize / 75) * 75;
|
||||
const margin = screenSize - size;
|
||||
const clockSize = Math.min(window.innerWidth, 0.78125 * window.innerHeight);
|
||||
const size = Math.ceil(clockSize / 75) * 75;
|
||||
const margin = (clockSize - size) / 2;
|
||||
this.blockSizerStyle = {
|
||||
transform: `translate(${margin}px, ${margin}px)`,
|
||||
width: `${size}px`,
|
||||
|
||||
@ -1,13 +1,3 @@
|
||||
.clock-wrapper {
|
||||
--clock-width: min(100vw, 100vh);
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
max-width: var(--clock-width);
|
||||
height: 100vh;
|
||||
max-height: var(--clock-width);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -53,7 +43,7 @@
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(transparent 0%, transparent 55%, #11131f 65%, #11131f 100%);
|
||||
background: radial-gradient(transparent 0%, transparent 48%, #11131f 62%, #11131f 100%);
|
||||
}
|
||||
|
||||
.block-cube {
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
<div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
|
||||
<div class="position-container" [ngClass]="network ? network : ''">
|
||||
<span>
|
||||
<div class="blocks-wrapper">
|
||||
<app-mempool-blocks [tiny]="true" [count]="3"></app-mempool-blocks>
|
||||
<app-blockchain-blocks [tiny]="true"></app-blockchain-blocks>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
120
frontend/src/app/components/clockchain/clockchain.component.scss
Normal file
120
frontend/src/app/components/clockchain/clockchain.component.scss
Normal file
@ -0,0 +1,120 @@
|
||||
.divider {
|
||||
width: 4px;
|
||||
height: 180px;
|
||||
left: 0;
|
||||
top: -40px;
|
||||
position: absolute;
|
||||
margin-bottom: 120px;
|
||||
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='0' x2='0' y2='100%' stroke='white' stroke-width='8' stroke-dasharray='18%2c32' stroke-dashoffset='-5' stroke-linecap='square'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.blockchain-wrapper {
|
||||
height: 250px;
|
||||
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE10+/Edge */
|
||||
user-select: none; /* Standard */
|
||||
}
|
||||
|
||||
.position-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 75px;
|
||||
transform: translateX(50vw);
|
||||
}
|
||||
|
||||
.position-container.liquid, .position-container.liquidtestnet {
|
||||
transform: translateX(420px);
|
||||
}
|
||||
|
||||
.blockchain-wrapper {
|
||||
.position-container {
|
||||
transform: translateX(95vw);
|
||||
}
|
||||
.position-container.liquid, .position-container.liquidtestnet {
|
||||
transform: translateX(50vw);
|
||||
}
|
||||
.position-container.loading {
|
||||
transform: translateX(50vw);
|
||||
}
|
||||
}
|
||||
.blockchain-wrapper.time-ltr {
|
||||
.position-container {
|
||||
transform: translateX(5vw);
|
||||
}
|
||||
.position-container.liquid, .position-container.liquidtestnet {
|
||||
transform: translateX(50vw);
|
||||
}
|
||||
.position-container.loading {
|
||||
transform: translateX(50vw);
|
||||
}
|
||||
}
|
||||
|
||||
.black-background {
|
||||
background-color: #11131f;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scroll-spacer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loading-block {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
left: -150px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.time-toggle {
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
position: absolute;
|
||||
bottom: -1.8em;
|
||||
left: 1px;
|
||||
transform: translateX(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.blockchain-wrapper.ltr-transition .blocks-wrapper,
|
||||
.blockchain-wrapper.ltr-transition .position-container,
|
||||
.blockchain-wrapper.ltr-transition .time-toggle {
|
||||
transition: transform 1s;
|
||||
}
|
||||
|
||||
.blockchain-wrapper.time-ltr {
|
||||
.blocks-wrapper {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.time-toggle {
|
||||
transform: translateX(-50%) scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.ltr-layout) {
|
||||
.blockchain-wrapper.time-ltr .blocks-wrapper,
|
||||
.blockchain-wrapper .blocks-wrapper {
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.rtl-layout) {
|
||||
.blockchain-wrapper.time-ltr .blocks-wrapper,
|
||||
.blockchain-wrapper .blocks-wrapper {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input } from '@angular/core';
|
||||
import { firstValueFrom, Subscription } from 'rxjs';
|
||||
import { StateService } from '../../services/state.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-clockchain',
|
||||
templateUrl: './clockchain.component.html',
|
||||
styleUrls: ['./clockchain.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ClockchainComponent implements OnInit, OnDestroy {
|
||||
network: string;
|
||||
timeLtrSubscription: Subscription;
|
||||
timeLtr: boolean = this.stateService.timeLtr.value;
|
||||
ltrTransitionEnabled = false;
|
||||
connectionStateSubscription: Subscription;
|
||||
loadingTip: boolean = true;
|
||||
connected: boolean = true;
|
||||
|
||||
constructor(
|
||||
public stateService: StateService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.network = this.stateService.network;
|
||||
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
|
||||
this.timeLtr = !!ltr;
|
||||
});
|
||||
this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
|
||||
this.connected = (state === 2);
|
||||
})
|
||||
firstValueFrom(this.stateService.chainTip$).then(tip => {
|
||||
this.loadingTip = false;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.timeLtrSubscription.unsubscribe();
|
||||
this.connectionStateSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
trackByPageFn(index: number, item: { index: number }) {
|
||||
return item.index;
|
||||
}
|
||||
|
||||
toggleTimeDirection() {
|
||||
this.ltrTransitionEnabled = true;
|
||||
this.stateService.timeLtr.next(!this.timeLtr);
|
||||
}
|
||||
}
|
||||
@ -1,40 +1,68 @@
|
||||
<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks">
|
||||
<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks" [class.tiny]="tiny">
|
||||
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(difficultyAdjustments$ | async) as da;">
|
||||
<div class="flashing">
|
||||
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
|
||||
<div @blockEntryTrigger [@.disabled]="i > 0 || !animateEntry" [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
|
||||
<div @blockEntryTrigger [@.disabled]="i > 0 || !animateEntry" [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" [class.last-block]="tiny && i >= count - 1" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
|
||||
<a draggable="false" [routerLink]="['/mempool-block/' | relativeUrl, i]"
|
||||
class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}"> </a>
|
||||
<div class="block-body">
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-fees'" class="fees">
|
||||
~{{ projectedBlock.medianFee | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
|
||||
</div>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-fee-span'" class="fee-span">
|
||||
{{ projectedBlock.feeRange[0] | number:feeRounding }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
|
||||
</div>
|
||||
<div *ngIf="showMiningInfo" class="block-size">
|
||||
<app-amount [attr.data-cy]="'mempool-block-' + i + '-total-fees'" [satoshis]="projectedBlock.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
|
||||
</div>
|
||||
<div *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'‎' + (projectedBlock.blockSize | bytes: 2)"></div>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-transaction-count'" class="transaction-count">
|
||||
<ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
|
||||
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
|
||||
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
|
||||
</div>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-time'" class="time-difference" *ngIf="projectedBlock.blockVSize <= stateService.blockVSize; else mergedBlock">
|
||||
<ng-template [ngIf]="network === 'liquid' || network === 'liquidtestnet'" [ngIfElse]="timeDiffMainnet">
|
||||
<app-time kind="until" [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time>
|
||||
</ng-template>
|
||||
<ng-template #timeDiffMainnet>
|
||||
<app-time kind="until" [time]="da.timeAvg * (i + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
|
||||
</ng-template>
|
||||
</div>
|
||||
<ng-template #mergedBlock>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-blocks'" class="time-difference">
|
||||
<b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / stateService.blockVSize | ceil }"></ng-container>)</b>
|
||||
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
|
||||
<ng-container *ngIf="!tiny">
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-fees'" class="fees">
|
||||
~{{ projectedBlock.medianFee | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-fee-span'" class="fee-span">
|
||||
{{ projectedBlock.feeRange[0] | number:feeRounding }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
|
||||
</div>
|
||||
<div *ngIf="showMiningInfo" class="block-size">
|
||||
<app-amount [attr.data-cy]="'mempool-block-' + i + '-total-fees'" [satoshis]="projectedBlock.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
|
||||
</div>
|
||||
<div *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'‎' + (projectedBlock.blockSize | bytes: 2)"></div>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-transaction-count'" class="transaction-count">
|
||||
<ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
|
||||
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
|
||||
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
|
||||
</div>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-time'" class="time-difference" *ngIf="projectedBlock.blockVSize <= stateService.blockVSize; else mergedBlock">
|
||||
<ng-template [ngIf]="network === 'liquid' || network === 'liquidtestnet'" [ngIfElse]="timeDiffMainnet">
|
||||
<app-time kind="until" [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time>
|
||||
</ng-template>
|
||||
<ng-template #timeDiffMainnet>
|
||||
<app-time kind="until" [time]="da.timeAvg * (i + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
|
||||
</ng-template>
|
||||
</div>
|
||||
<ng-template #mergedBlock>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-blocks'" class="time-difference">
|
||||
<b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / stateService.blockVSize | ceil }"></ng-container>)</b>
|
||||
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
|
||||
</div>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-fee-span'" class="fee-span">
|
||||
{{ projectedBlock.feeRange[0] | number:feeRounding }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
|
||||
</div>
|
||||
<div *ngIf="showMiningInfo" class="block-size">
|
||||
<app-amount [attr.data-cy]="'mempool-block-' + i + '-total-fees'" [satoshis]="projectedBlock.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
|
||||
</div>
|
||||
<div *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'‎' + (projectedBlock.blockSize | bytes: 2)"></div>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-transaction-count'" class="transaction-count">
|
||||
<ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
|
||||
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
|
||||
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
|
||||
</div>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-time'" class="time-difference" *ngIf="projectedBlock.blockVSize <= stateService.blockVSize; else mergedBlock">
|
||||
<ng-template [ngIf]="network === 'liquid' || network === 'liquidtestnet'" [ngIfElse]="timeDiffMainnet">
|
||||
<app-time kind="until" [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time>
|
||||
</ng-template>
|
||||
<ng-template #timeDiffMainnet>
|
||||
<app-time kind="until" [time]="da.timeAvg * (i + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time>
|
||||
</ng-template>
|
||||
</div>
|
||||
<ng-template #mergedBlock>
|
||||
<div [attr.data-cy]="'mempool-block-' + i + '-blocks'" class="time-difference">
|
||||
<b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / stateService.blockVSize | ceil }"></ng-container>)</b>
|
||||
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</div>
|
||||
<span class="animated-border"></span>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.bitcoin-block {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
transition: background 2s, right 2s, transform 1s;
|
||||
transition: background 2s, right 2s, transform 1s, opacity 1s;
|
||||
}
|
||||
|
||||
.block-size {
|
||||
@ -100,6 +100,10 @@
|
||||
background-color: #2d2825;
|
||||
}
|
||||
|
||||
.mempool-block.last-block {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.black-background {
|
||||
background-color: #11131f;
|
||||
z-index: 100;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener } from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input } from '@angular/core';
|
||||
import { Subscription, Observable, fromEvent, merge, of, combineLatest } from 'rxjs';
|
||||
import { MempoolBlock } from '../../interfaces/websocket.interface';
|
||||
import { StateService } from '../../services/state.service';
|
||||
@ -24,6 +24,9 @@ import { animate, style, transition, trigger } from '@angular/animations';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class MempoolBlocksComponent implements OnInit, OnDestroy {
|
||||
@Input() tiny: boolean = false;
|
||||
@Input() count: number = null;
|
||||
|
||||
specialBlocks = specialBlocks;
|
||||
mempoolBlocks: MempoolBlock[] = [];
|
||||
mempoolEmptyBlocks: MempoolBlock[] = this.mountEmptyBlocks();
|
||||
@ -238,7 +241,12 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
|
||||
|
||||
reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
|
||||
const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2;
|
||||
const blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
|
||||
let blocksAmount;
|
||||
if (this.count) {
|
||||
blocksAmount = this.count;
|
||||
} else {
|
||||
blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
|
||||
}
|
||||
while (blocks.length > blocksAmount) {
|
||||
const block = blocks.pop();
|
||||
const lastBlock = blocks[blocks.length - 1];
|
||||
|
||||
@ -91,6 +91,7 @@ import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.
|
||||
import { GlobalFooterComponent } from './components/global-footer/global-footer.component';
|
||||
|
||||
import { MempoolBlockOverviewComponent } from '../components/mempool-block-overview/mempool-block-overview.component';
|
||||
import { ClockchainComponent } from '../components/clockchain/clockchain.component';
|
||||
import { ClockFaceComponent } from '../components/clock-face/clock-face.component';
|
||||
import { ClockAComponent } from '../components/clock/clock-a.component';
|
||||
import { ClockBComponent } from '../components/clock/clock-b.component';
|
||||
@ -179,6 +180,7 @@ import { ClockBComponent } from '../components/clock/clock-b.component';
|
||||
GlobalFooterComponent,
|
||||
|
||||
MempoolBlockOverviewComponent,
|
||||
ClockchainComponent,
|
||||
ClockAComponent,
|
||||
ClockBComponent,
|
||||
ClockFaceComponent,
|
||||
@ -291,6 +293,7 @@ import { ClockBComponent } from '../components/clock/clock-b.component';
|
||||
GlobalFooterComponent,
|
||||
|
||||
MempoolBlockOverviewComponent,
|
||||
ClockchainComponent,
|
||||
ClockAComponent,
|
||||
ClockBComponent,
|
||||
ClockFaceComponent,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user