mirror of
https://github.com/mempool/mempool.git
synced 2025-03-03 09:39:17 +01:00
hourly blocks clock faces
This commit is contained in:
Mononaut
parent
be5882edb3
commit
3b459b6857
13 changed files with 428 additions and 4 deletions
|
|
@ -4,6 +4,8 @@ import { AppPreloadingStrategy } from './app.preloading-strategy'
|
|||
import { StartComponent } from './components/start/start.component';
|
||||
import { TransactionComponent } from './components/transaction/transaction.component';
|
||||
import { BlockComponent } from './components/block/block.component';
|
||||
import { ClockAComponent } from './components/clock/clock-a.component';
|
||||
import { ClockBComponent } from './components/clock/clock-b.component';
|
||||
import { AddressComponent } from './components/address/address.component';
|
||||
import { MasterPageComponent } from './components/master-page/master-page.component';
|
||||
import { AboutComponent } from './components/about/about.component';
|
||||
|
|
@ -355,6 +357,14 @@ let routes: Routes = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'clock-face-a',
|
||||
component: ClockAComponent,
|
||||
},
|
||||
{
|
||||
path: 'clock-face-b',
|
||||
component: ClockBComponent,
|
||||
},
|
||||
{
|
||||
path: 'status',
|
||||
data: { networks: ['bitcoin', 'liquid'] },
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default class BlockScene {
|
|||
this.width = width;
|
||||
this.height = height;
|
||||
this.gridSize = this.width / this.gridWidth;
|
||||
this.unitPadding = width / 500;
|
||||
this.unitPadding = this.gridSize / 5;
|
||||
this.unitWidth = this.gridSize - (this.unitPadding * 2);
|
||||
|
||||
this.dirty = true;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.clock-face {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.cut-out, .demo-dial {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.face {
|
||||
fill: #11131f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-clock-face',
|
||||
templateUrl: './clock-face.component.html',
|
||||
styleUrls: ['./clock-face.component.scss'],
|
||||
})
|
||||
export class ClockFaceComponent implements OnInit {
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
// initialize stuff
|
||||
}
|
||||
}
|
||||
19
frontend/src/app/components/clock/clock-a.component.html
Normal file
19
frontend/src/app/components/clock/clock-a.component.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<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>
|
||||
57
frontend/src/app/components/clock/clock-a.component.ts
Normal file
57
frontend/src/app/components/clock/clock-a.component.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { StateService } from '../../services/state.service';
|
||||
import { BlockExtended } from '../../interfaces/node-api.interface';
|
||||
import { WebsocketService } from '../../services/websocket.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-clock-a',
|
||||
templateUrl: './clock-a.component.html',
|
||||
styleUrls: ['./clock.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ClockAComponent implements OnInit {
|
||||
blocksSubscription: Subscription;
|
||||
block: BlockExtended;
|
||||
blockStyle;
|
||||
|
||||
gradientColors = {
|
||||
'': ['#9339f4', '#105fb0'],
|
||||
bisq: ['#9339f4', '#105fb0'],
|
||||
liquid: ['#116761', '#183550'],
|
||||
'liquidtestnet': ['#494a4a', '#272e46'],
|
||||
testnet: ['#1d486f', '#183550'],
|
||||
signet: ['#6f1d5d', '#471850'],
|
||||
};
|
||||
|
||||
constructor(
|
||||
public stateService: StateService,
|
||||
private websocketService: WebsocketService,
|
||||
private cd: ChangeDetectorRef,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.websocketService.want(['blocks']);
|
||||
this.blocksSubscription = this.stateService.blocks$
|
||||
.subscribe(([block]) => {
|
||||
if (block) {
|
||||
this.block = block;
|
||||
this.blockStyle = this.getStyleForBlock(this.block);
|
||||
this.cd.markForCheck();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getStyleForBlock(block: BlockExtended) {
|
||||
const greenBackgroundHeight = 100 - (block.weight / this.stateService.env.BLOCK_WEIGHT_UNITS) * 100;
|
||||
|
||||
return {
|
||||
background: `repeating-linear-gradient(
|
||||
#2d3348,
|
||||
#2d3348 ${greenBackgroundHeight}%,
|
||||
${this.gradientColors[''][0]} ${Math.max(greenBackgroundHeight, 0)}%,
|
||||
${this.gradientColors[''][1]} 100%
|
||||
)`,
|
||||
};
|
||||
}
|
||||
}
|
||||
15
frontend/src/app/components/clock/clock-b.component.html
Normal file
15
frontend/src/app/components/clock/clock-b.component.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<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>
|
||||
58
frontend/src/app/components/clock/clock-b.component.ts
Normal file
58
frontend/src/app/components/clock/clock-b.component.ts
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnInit } from '@angular/core';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { StateService } from '../../services/state.service';
|
||||
import { BlockExtended } from '../../interfaces/node-api.interface';
|
||||
import { WebsocketService } from '../../services/websocket.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-clock-b',
|
||||
templateUrl: './clock-b.component.html',
|
||||
styleUrls: ['./clock.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ClockBComponent implements OnInit {
|
||||
blocksSubscription: Subscription;
|
||||
block: BlockExtended;
|
||||
blockSizerStyle;
|
||||
|
||||
gradientColors = {
|
||||
'': ['#9339f4', '#105fb0'],
|
||||
bisq: ['#9339f4', '#105fb0'],
|
||||
liquid: ['#116761', '#183550'],
|
||||
'liquidtestnet': ['#494a4a', '#272e46'],
|
||||
testnet: ['#1d486f', '#183550'],
|
||||
signet: ['#6f1d5d', '#471850'],
|
||||
};
|
||||
|
||||
constructor(
|
||||
public stateService: StateService,
|
||||
private websocketService: WebsocketService,
|
||||
private cd: ChangeDetectorRef,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.resizeCanvas();
|
||||
this.websocketService.want(['blocks']);
|
||||
this.blocksSubscription = this.stateService.blocks$
|
||||
.subscribe(([block]) => {
|
||||
if (block) {
|
||||
this.block = block;
|
||||
this.cd.markForCheck();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@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;
|
||||
this.blockSizerStyle = {
|
||||
transform: `translate(${margin}px, ${margin}px)`,
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
};
|
||||
this.cd.markForCheck();
|
||||
}
|
||||
}
|
||||
119
frontend/src/app/components/clock/clock.component.scss
Normal file
119
frontend/src/app/components/clock/clock.component.scss
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
.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;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.block-height {
|
||||
font-size: calc(0.2 * var(--clock-width));
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: radial-gradient(rgba(0,0,0,0.5), transparent 67%);
|
||||
padding: calc(0.05 * var(--clock-width)) calc(0.15 * var(--clock-width));
|
||||
}
|
||||
}
|
||||
|
||||
.block-wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.block-sizer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fader {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(transparent 0%, transparent 55%, #11131f 65%, #11131f 100%);
|
||||
}
|
||||
|
||||
.block-cube {
|
||||
--side-width: calc(0.4 * var(--clock-width));
|
||||
--half-side: calc(0.2 * var(--clock-width));
|
||||
--neg-half-side: calc(-0.2 * var(--clock-width));
|
||||
transform-style: preserve-3d;
|
||||
animation: block-spin 60s infinite linear;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: var(--side-width);
|
||||
height: var(--side-width);
|
||||
|
||||
.side {
|
||||
width: var(--side-width);
|
||||
height: var(--side-width);
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
background: #232838;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.side.top {
|
||||
transform: rotateX(90deg);
|
||||
margin-top: var(--neg-half-side);
|
||||
}
|
||||
|
||||
.side.bottom {
|
||||
background: #105fb0;
|
||||
transform: rotateX(-90deg);
|
||||
margin-top: var(--half-side);
|
||||
}
|
||||
|
||||
.side.right {
|
||||
transform: rotateY(90deg);
|
||||
margin-left: var(--half-side);
|
||||
}
|
||||
|
||||
.side.left {
|
||||
transform: rotateY(-90deg);
|
||||
margin-left: var(--neg-half-side);
|
||||
}
|
||||
|
||||
.side.front {
|
||||
transform: translateZ(var(--half-side));
|
||||
}
|
||||
|
||||
.side.back {
|
||||
transform: translateZ(var(--neg-half-side));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes block-spin {
|
||||
0% {transform: translate(-50%, -50%) rotateX(-20deg) rotateY(0deg);}
|
||||
100% {transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-360deg);}
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@ import { LbtcPegsGraphComponent } from '../components/lbtc-pegs-graph/lbtc-pegs-
|
|||
import { GraphsComponent } from '../components/graphs/graphs.component';
|
||||
import { StatisticsComponent } from '../components/statistics/statistics.component';
|
||||
import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
|
||||
import { MempoolBlockOverviewComponent } from '../components/mempool-block-overview/mempool-block-overview.component';
|
||||
// import { MempoolBlockOverviewComponent } from '../components/mempool-block-overview/mempool-block-overview.component';
|
||||
import { PoolRankingComponent } from '../components/pool-ranking/pool-ranking.component';
|
||||
import { PoolComponent } from '../components/pool/pool.component';
|
||||
import { TelevisionComponent } from '../components/television/television.component';
|
||||
|
|
@ -42,7 +42,7 @@ import { CommonModule } from '@angular/common';
|
|||
BlockFeeRatesGraphComponent,
|
||||
BlockSizesWeightsGraphComponent,
|
||||
FeeDistributionGraphComponent,
|
||||
MempoolBlockOverviewComponent,
|
||||
// MempoolBlockOverviewComponent,
|
||||
IncomingTransactionsGraphComponent,
|
||||
MempoolGraphComponent,
|
||||
LbtcPegsGraphComponent,
|
||||
|
|
|
|||
|
|
@ -90,6 +90,11 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
|
|||
import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.component';
|
||||
import { GlobalFooterComponent } from './components/global-footer/global-footer.component';
|
||||
|
||||
import { MempoolBlockOverviewComponent } from '../components/mempool-block-overview/mempool-block-overview.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';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ClipboardComponent,
|
||||
|
|
@ -172,6 +177,11 @@ import { GlobalFooterComponent } from './components/global-footer/global-footer.
|
|||
GeolocationComponent,
|
||||
TestnetAlertComponent,
|
||||
GlobalFooterComponent,
|
||||
|
||||
MempoolBlockOverviewComponent,
|
||||
ClockAComponent,
|
||||
ClockBComponent,
|
||||
ClockFaceComponent,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
|
@ -279,6 +289,11 @@ import { GlobalFooterComponent } from './components/global-footer/global-footer.
|
|||
GeolocationComponent,
|
||||
PreviewTitleComponent,
|
||||
GlobalFooterComponent,
|
||||
|
||||
MempoolBlockOverviewComponent,
|
||||
ClockAComponent,
|
||||
ClockBComponent,
|
||||
ClockFaceComponent,
|
||||
]
|
||||
})
|
||||
export class SharedModule {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#1d1f31">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue