sirius-explorer/public/views/index.html

An open-source front-end for the Insight API.

<div ng-include src="'views/includes/connection.html'"></div>
<div class="box" 
	 ng-controller="IndexController as IC" 
	 ng-init="IC.index()">



	<div class="content__left">
		<div class="heading">
			<div class="heading__pic">
				<img src="images/blockchainInfo.png" alt=""/>
			</div>
			<h2 class="heading__title">Blockchain Info</h2>
		</div>

		<div class="preload__box" ng-if="!IC.blockchainInfo">
				<span class="preload">
					<span class="preloadInner"></span>
				</span>
		</div>
		<div class="content__list content__list-blockchain" ng-if="IC.blockchainInfo">
			<div class="item item-full">
				<div class="label">{{ IC.blockchainInfo.supply | numeraljs : '0,0[.][00000000]' }} SIRX</div>
				<div class="labeled" translate>Total Supply</div>
			</div>
			<div class="limiter"></div>
			<div class="clearfix">
				<div class="item">
					<div class="label">{{ IC.blockchainInfo.relayfee }}</div>
					<div class="labeled" translate>Relay Fee</div>
				</div>
				<div class="item">
					<div class="label">{{ IC.blockchainInfo.difficulty['proof-of-stake'] | numeraljs : '0,0[.][00000000]' }}</div>
					<div class="labeled" translate>Difficulty</div>
				</div>
				<div class="item">
					<div class="label">{{ IC.blockchainInfo.connections }}</div>
					<div class="labeled" translate>Connections</div>
				</div>
				<div class="item">
					<div class="label">{{ IC.blockchainInfo.stakingInfo && IC.blockchainInfo.stakingInfo.netstakeweight ? IC.blockchainInfo.stakingInfo.netstakeweight / 1e8 : 0 | numeraljs : '0,0[.][00000000]' }}</div>
					<div class="labeled" translate>Network Weight</div>
				</div>
				<div class="item">
					<div class="label">{{ IC.blockchainInfo.blocks | numeraljs : '0,0'}}</div>
					<div class="labeled" translate>Block Height</div>
				</div>
				<div class="item">
					<div class="label">{{ IC.blockchainInfo.reward ? IC.blockchainInfo.reward / 1e8 : 0 }} {{ IC.rewardCurrency }}</div> 
					<div class="labeled" translate>Block Reward</div>
				</div>
			</div>
			<div class="section__heading">
				<div class="section__title">Value Info</div>
			</div>
			<div class="item item-full">
				<div class="label">{{ IC.marketsInfo.market_cap_usd | numeraljs : '0,0' }}</div>
				<div class="labeled">Market Cap in USD</div>
			</div>
			<div class="limiter"></div>
			<div class="clearfix">
				<div class="item">
					<div class="label">{{ IC.marketsInfo.price_usd  | numeraljs : '0.000'}}</div>
					<div class="labeled">Price in USD</div>
				</div>
				<div class="item">
					<div class="label">{{ IC.marketsInfo.price_btc }}</div>
					<div class="labeled">Price in BTC</div>
				</div>
			</div>
		</div>
	</div>
	<div class="content__right">
		<div class="heading">
			<div class="heading__pic">
				<img src="images/blocks.png" alt=""/>
			</div>
			<h2 class="heading__title" translate>Blocks</h2>
			<div class="heading__linkWrap">
				<a href="blocks" class="heading__link" translate>See all blocks</a>
			</div>
		</div>
		<div class="content__list content__list-blocks">
			<div class="preload__box" ng-if="!IC.blocks.length">
				<span class="preload">
					<span class="preloadInner"></span>
				</span>
			</div>
			<div class="content__listScroll"
				 ng-scrollbars 
				 ng-scrollbars-config="IC.scrollConfig">
				<ul class="list list-blocks">
					<li class="list__item"
						ng-repeat='block in IC.blocks'>
						<a href="block/{{ block.hash }}" class="list-blocks__left">
							<span class="list__row">
								{{ 'Block' | translate }} 
								{{ block.height }}
							</span>
							<span class="list__row fsz-13" am-time-ago="block.time * 1000">
							</span>
						</a>
						<div class="list-blocks__right">
							<div class="list__row">
								<span class="mined__help" translate>Mined by</span>
								<a class="mark mined__name" 
									  ng-if="block.minedBy" href="address/{{ block.minedBy }}">
									{{ block.minedBy }}
								</a>
							</div>
							<div class="list__row">
								<span class="label">{{ 'Size' | translate }}:</span>
								<span class="labeled">
									{{ block.size }}
								</span>
							</div>
							<div class="list__row">
								<span class="label">
									{{ 'Transactions' | translate }}:
								</span>
								<span class="labeled">
									{{ block.txlength }}
								</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="content__left">
		<div class="heading">
			<div class="heading__pic">
				<img src="images/transition.png" alt=""/>
			</div>
			<h2 class="heading__title" translate>Transactions</h2>
		</div>
		<div class="content__list content__list-transactions">
			<div class="preload__box" ng-if="!IC.txs.length">
				<span class="preload">
					<span class="preloadInner"></span>
				</span>
			</div>
			<div class="content__listScroll"
				 ng-scrollbars
				 ng-scrollbars-config="IC.scrollConfig">
				<ul class="list list-transactions">
					<li class="list__item"
						ng-repeat='tx in IC.txs'>
						<div class="list-transactions__right">
							<div class="list__row fsz-13" am-time-ago="tx.createTime">
							</div>
						</div>
						<div class="list-transactions__left">
							<div class="list__row">
								<span class="hash__title" translate>Hash</span>
								<a href="tx/{{ tx.txid }}" 
								   class="mark hash__data">
									{{ tx.txid }}
								</a>
							</div>
							<div class="list__row">
								<span class="label" translate>Value Out:</span>
								<span class="fsz-16 upp">
									{{ $root.currency.getConvertion(tx.valueOut) }}
								</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="insight__chart" ng-init="IC.getListOfTransactions()">
			<div
					class="insight__chartTitle"
					ng-if="IC.chartOptions.data && IC.chartOptions.labels">
				{{ IC.chartDays }}
				{{ 'day Sirius Transaction History' | translate }}
			</div>
			<div class="" ng-if="IC.chartOptions.data && IC.chartOptions.labels">
				<div class="">
					<canvas id="line"
							class="chart chart-line"
							chart-data="IC.chartOptions.data"
							chart-labels="IC.chartOptions.labels"
							chart-series="IC.chartOptions.series"
							chart-options="IC.chartOptions.options"
							chart-dataset-override="IC.chartOptions.datasetOverride"
							height="70">
					</canvas>
				</div>
			</div>
		</div>
	</div>
	<div class="content__right">
		<div class="heading">
			<h3 class="heading__title" translate>About</h3>
		</div>
		<div class="content__body">
			<p translate>Sirius Explorer is based on an <a href="https://insight.is/" target="_blank">open-source blockchain explorer</a> with complete REST and websocket APIs that can be used for writing web wallets and other apps that need more advanced blockchain queries than provided by siriusd RPC. Check out the <a href="https://github.com/bitpay/insight-ui" target="_blank" class="ng-scope">source code here</a>.
			</p>
			<div class="powered__title" translate>
				Powered  by:
			</div>
			<div class="powered__wrap">
				<a href="http://bitcore.io" class="powered__item">
					<img src="images/bitcore.png" alt="Bitcore" class="powered__logo"/>
				</a>
				<a href="http://angularjs.org" class="powered__item">
					<img src="images/angular.png" alt="angularjs" class="powered__logo"/>
				</a>
				<a href="https://code.google.com/p/leveldb/" class="powered__item">
					<img src="images/leveldb.png" alt="leveldb" class="powered__logo"/>
				</a>
				<a href="http://nodejs.org" class="powered__item">
					<img src="images/nodejs.png" alt="NodeJs" class="powered__logo"/>
				</a>
			</div>
		</div>

	</div>
	<div class="content__full air-b" data-ng-controller="SendRawTransactionController as SRTC">
		<div class="heading">
			<h1 class="heading__title">Send Raw Transaction</h1>
			<p class="heading__desc">You could enter a Signed Raw Transaction in hex format and broadcast it over the Sirius network.</p>
		</div>
		<div class="section">
	
			<div class="trans-textarea" ng-class="{'error': checkIsEmpty()}">
				<span class="error-msg">Transaction is required</span>
				<div class="title">Type here your TX hex</div>
				<div class="body">
					<textarea class="textarea-scrollbar scrollbar-outer" data-jquery-scrollbar="jqueryScrollbarOptions" ng-model="rawTransaction"></textarea>
				</div>
			</div>
		</div>
		<div class="btn-wrap" ng-class="{'error': isStatusError()}">
			<a href="" class="btn btn-blocks" ng-click="send()">{{ isStatusError() ? 'Try again' : 'Send transaction' }}</a>
			<span class="error-msg" ng-if="isStatusError()">Transaction can not be sent{{error}}</span>
		</div>
		<span class="success" ng-if="isStatusSent()">Transaction has been successfully sent! {{txid}}</span>
	</div>
	<div class="supernova__wrapBox">
		<div class="supernova__wrap">
			<canvas id="supernova" style="width: 100%;height: 100%;" resize></canvas>
		</div>
	</div>
</div>