Added price chart
This commit is contained in:
magmahindenburg
parent
a761b58ab0
commit
c737e14d17
10 changed files with 891 additions and 3 deletions
|
|
@ -29,6 +29,7 @@
|
|||
"coinbase": false,
|
||||
"glidera": false,
|
||||
"amazon": false,
|
||||
"bitcoincom": true
|
||||
"bitcoincom": true,
|
||||
"pricechart": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,3 +133,60 @@ div.onboarding-topic {
|
|||
.big-icon-svg > .bg.green {
|
||||
background: #fab915 !important;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
font-family: 'Varela Round', sans-serif;
|
||||
width:100%;
|
||||
height:auto;
|
||||
box-shadow: 0px 0px 24px -5px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
.ct-series-a .ct-area {
|
||||
fill: #FDE9BE;
|
||||
}
|
||||
.ct-area {
|
||||
opacity:.6 !important;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-point {
|
||||
stroke: #F9B016;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.ct-labels {
|
||||
border: red thin solid;
|
||||
}
|
||||
.chart-header {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
height:10%;
|
||||
color: white;
|
||||
|
||||
}
|
||||
.latest-price {
|
||||
box-sizing: border-box;
|
||||
padding: .6em .2em 0 .4em;
|
||||
font-size: 1.6em;
|
||||
background-color: #F9B016;
|
||||
width:40%;
|
||||
}
|
||||
.high-price {
|
||||
box-sizing: border-box;
|
||||
padding:.7em 1em;
|
||||
font-size: 1em;
|
||||
background-color: #EFA406;
|
||||
width:30%;
|
||||
height:inherit;
|
||||
}
|
||||
.low-price {
|
||||
box-sizing: border-box;
|
||||
padding:.7em 0em;
|
||||
font-size: 1em;
|
||||
background-color: #EFA406;
|
||||
width:30%;
|
||||
height:inherit;
|
||||
}
|
||||
.light-yellow {
|
||||
color:#FFD579;
|
||||
}
|
||||
|
|
|
|||
119
src/js/controllers/pricechart.js
Normal file
119
src/js/controllers/pricechart.js
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('pricechartController',
|
||||
function($scope, $timeout, $ionicModal, $log, $state, $ionicHistory, lodash, pricechartService, externalLinkService, popupService) {
|
||||
|
||||
$scope.openExternalLink = function(url) {
|
||||
externalLinkService.open(url);
|
||||
};
|
||||
|
||||
var pricechart = function() {
|
||||
var rawData = [];
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', 'https://index.bitcoin.com/api/v0/history?unix=1&pretty=0', true);
|
||||
|
||||
var priceHigh = 0;
|
||||
var priceLow = 100000000;
|
||||
var priceLatest = 0;
|
||||
|
||||
request.onload = function () {
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
// Success!
|
||||
console.log(request.responseText);
|
||||
|
||||
var data = {
|
||||
series: [
|
||||
{
|
||||
name: 'series-1',
|
||||
data: []
|
||||
}
|
||||
]
|
||||
};
|
||||
console.log(data);
|
||||
rawData = JSON.parse("" + request.responseText + "");
|
||||
for (var i = rawData.length - 1; i > 0; i--) {
|
||||
var tuple = rawData[i];
|
||||
data.series[0].data.push({x: new Date(tuple[0]), y: tuple[1]});
|
||||
|
||||
if (priceHigh < tuple[1])
|
||||
{
|
||||
priceHigh = tuple[1];
|
||||
}
|
||||
if (priceLow > tuple[1])
|
||||
{
|
||||
priceLow = tuple[1]
|
||||
}
|
||||
priceLatest = tuple[1];
|
||||
}
|
||||
|
||||
document.getElementById("latest-price").innerHTML = (priceLatest / 100).toFixed(2);
|
||||
document.getElementById("low-price").innerHTML = (priceLow / 100).toFixed(2);
|
||||
document.getElementById("high-price").innerHTML = (priceHigh / 100).toFixed(2);
|
||||
|
||||
var chartContainer = document.querySelector('.chart-container');
|
||||
var chartHeader = document.querySelector('.chart-header');
|
||||
console.log("Height: " + window.getComputedStyle(chartContainer).height);
|
||||
console.log("Height2: " + window.getComputedStyle(chartHeader).height);
|
||||
console.log("Width: " + window.getComputedStyle(chartContainer).width);
|
||||
|
||||
var chartHeight = window.getComputedStyle(chartContainer).height - window.getComputedStyle(chartHeader).height;
|
||||
var chartWidth = window.getComputedStyle(chartContainer).width;
|
||||
|
||||
console.log(chartHeight);
|
||||
|
||||
var options = {
|
||||
width: chartWidth,
|
||||
height: 570,
|
||||
// Don't draw the line chart points
|
||||
showPoint: false,
|
||||
// Disable line smoothing
|
||||
lineSmooth: false,
|
||||
fillOpacity: 1,
|
||||
// X-Axis specific configuration
|
||||
axisX: {
|
||||
type: Chartist.FixedScaleAxis,
|
||||
divisor: 5,
|
||||
labelInterpolationFnc: function (value) {
|
||||
return moment(value).format('MMM D');
|
||||
}
|
||||
},
|
||||
// Y-Axis specific configuration
|
||||
axisY: {
|
||||
type: Chartist.FixedScaleAxis,
|
||||
divisor: 5,
|
||||
// Lets offset the chart a bit from the labels
|
||||
offset: 70,
|
||||
low: 50000,
|
||||
// The label interpolation function enables you to modify the values
|
||||
// used for the labels on each axis.
|
||||
labelInterpolationFnc: function (value) {
|
||||
return '$' + (value / 100).toFixed(2);
|
||||
}
|
||||
},
|
||||
showArea: true
|
||||
};
|
||||
|
||||
|
||||
// Create a new line chart object where as first parameter we pass in a selector
|
||||
// that is resolving to our chart container element. The Second parameter
|
||||
// is the actual data object.
|
||||
new Chartist.Line('.ct-chart', data, options);
|
||||
}
|
||||
else
|
||||
{
|
||||
// We reached our target server, but it returned an error
|
||||
}
|
||||
};
|
||||
|
||||
request.onerror = function () {
|
||||
// There was a connection error of some sort
|
||||
};
|
||||
|
||||
request.send();
|
||||
};
|
||||
|
||||
$scope.$on("$ionicView.beforeEnter", function(event, data) {
|
||||
pricechart();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('tabHomeController',
|
||||
function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, $window, gettextCatalog, lodash, popupService, ongoingProcess, externalLinkService, latestReleaseService, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, appConfigService, startupService, addressbookService, feedbackService, bwcError, nextStepsService, buyAndSellService, homeIntegrationsService, bitpayCardService, pushNotificationsService, timeService, bitcoincomService) {
|
||||
function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, $window, gettextCatalog, lodash, popupService, ongoingProcess, externalLinkService, latestReleaseService, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, appConfigService, startupService, addressbookService, feedbackService, bwcError, nextStepsService, buyAndSellService, homeIntegrationsService, bitpayCardService, pushNotificationsService, timeService, bitcoincomService, pricechartService) {
|
||||
var wallet;
|
||||
var listeners = [];
|
||||
var notifications = [];
|
||||
|
|
|
|||
|
|
@ -1037,6 +1037,17 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
|
|||
}
|
||||
})
|
||||
|
||||
/* Price Chart */
|
||||
.state('tabs.pricechart', {
|
||||
url: '/pricechart',
|
||||
views: {
|
||||
'tab-home@tabs': {
|
||||
controller: 'pricechartController',
|
||||
templateUrl: 'views/pricechart.html'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/*
|
||||
*
|
||||
* Amazon.com Gift Card
|
||||
|
|
|
|||
26
src/js/services/pricechartService.js
Normal file
26
src/js/services/pricechartService.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
'use strict';
|
||||
angular.module('copayApp.services').factory('pricechartService', function($http, $log, lodash, moment, storageService, configService, platformInfo, nextStepsService, homeIntegrationsService) {
|
||||
var root = {};
|
||||
var credentials = {};
|
||||
|
||||
var homeItem = {
|
||||
name: 'pricechart',
|
||||
title: 'Bitcoin Price Chart',
|
||||
icon: 'icon-bitcoincom',
|
||||
sref: 'tabs.pricechart',
|
||||
};
|
||||
|
||||
var nextStepItem = {
|
||||
name: 'pricechart',
|
||||
title: 'Bitcoin Price Chart',
|
||||
icon: 'icon-bitcoincom',
|
||||
sref: 'tabs.pricechart',
|
||||
};
|
||||
|
||||
var register = function() {
|
||||
nextStepsService.register(nextStepItem);
|
||||
};
|
||||
|
||||
register();
|
||||
return root;
|
||||
});
|
||||
|
|
@ -170,3 +170,59 @@ button.button.button-secondary {
|
|||
div.slide-success__background.fill-screen {
|
||||
background-color: #fab915 !important;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
font-family: 'Varela Round', sans-serif;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-area {
|
||||
fill: #FDE9BE;
|
||||
}
|
||||
.ct-area {
|
||||
opacity:.6 !important;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-point {
|
||||
stroke: #F9B016;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.ct-labels {
|
||||
border: red thin solid;
|
||||
}
|
||||
.chart-header {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
height:10%;
|
||||
color: white;
|
||||
|
||||
}
|
||||
.latest-price {
|
||||
box-sizing: border-box;
|
||||
padding: .6em .2em 0 .4em;
|
||||
font-size: 1.6em;
|
||||
background-color: #F9B016;
|
||||
width:40%;
|
||||
}
|
||||
.high-price {
|
||||
box-sizing: border-box;
|
||||
padding:.7em 1em;
|
||||
font-size: 1em;
|
||||
background-color: #EFA406;
|
||||
width:30%;
|
||||
height:64px;
|
||||
}
|
||||
.low-price {
|
||||
box-sizing: border-box;
|
||||
padding:.7em 0em;
|
||||
font-size: 1em;
|
||||
background-color: #EFA406;
|
||||
width:30%;
|
||||
height:64px;
|
||||
}
|
||||
.light-yellow {
|
||||
color:#FFD579;
|
||||
}
|
||||
|
|
|
|||
615
www/css/chartist.css
Normal file
615
www/css/chartist.css
Normal file
|
|
@ -0,0 +1,615 @@
|
|||
.ct-label {
|
||||
fill: rgba(0, 0, 0, 0.4);
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1; }
|
||||
|
||||
.ct-chart-line .ct-label,
|
||||
.ct-chart-bar .ct-label {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex; }
|
||||
|
||||
.ct-chart-pie .ct-label,
|
||||
.ct-chart-donut .ct-label {
|
||||
dominant-baseline: central; }
|
||||
|
||||
.ct-label.ct-horizontal.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-label.ct-horizontal.ct-end {
|
||||
-webkit-box-align: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-label.ct-vertical.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: flex-end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
text-anchor: end; }
|
||||
|
||||
.ct-label.ct-vertical.ct-end {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar .ct-label.ct-horizontal.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar .ct-label.ct-horizontal.ct-end {
|
||||
-webkit-box-align: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
|
||||
-webkit-box-align: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: flex-end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
text-anchor: end; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: end; }
|
||||
|
||||
.ct-grid {
|
||||
stroke: rgba(0, 0, 0, 0.2);
|
||||
stroke-width: 1px;
|
||||
stroke-dasharray: 2px; }
|
||||
|
||||
.ct-grid-background {
|
||||
fill: none; }
|
||||
|
||||
.ct-point {
|
||||
stroke-width: 10px;
|
||||
stroke-linecap: round; }
|
||||
|
||||
.ct-line {
|
||||
fill: none;
|
||||
stroke-width: 4px; }
|
||||
|
||||
.ct-area {
|
||||
stroke: none;
|
||||
fill-opacity: 0.6; }
|
||||
|
||||
.ct-bar {
|
||||
fill: none;
|
||||
stroke-width: 10px; }
|
||||
|
||||
.ct-slice-donut {
|
||||
fill: none;
|
||||
stroke-width: 60px; }
|
||||
|
||||
.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
|
||||
stroke: #d70206; }
|
||||
|
||||
.ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-area {
|
||||
fill: #d70206; }
|
||||
|
||||
.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
|
||||
stroke: #f05b4f; }
|
||||
|
||||
.ct-series-b .ct-slice-pie, .ct-series-b .ct-slice-donut-solid, .ct-series-b .ct-area {
|
||||
fill: #f05b4f; }
|
||||
|
||||
.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut {
|
||||
stroke: #f4c63d; }
|
||||
|
||||
.ct-series-c .ct-slice-pie, .ct-series-c .ct-slice-donut-solid, .ct-series-c .ct-area {
|
||||
fill: #f4c63d; }
|
||||
|
||||
.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut {
|
||||
stroke: #d17905; }
|
||||
|
||||
.ct-series-d .ct-slice-pie, .ct-series-d .ct-slice-donut-solid, .ct-series-d .ct-area {
|
||||
fill: #d17905; }
|
||||
|
||||
.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut {
|
||||
stroke: #453d3f; }
|
||||
|
||||
.ct-series-e .ct-slice-pie, .ct-series-e .ct-slice-donut-solid, .ct-series-e .ct-area {
|
||||
fill: #453d3f; }
|
||||
|
||||
.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut {
|
||||
stroke: #59922b; }
|
||||
|
||||
.ct-series-f .ct-slice-pie, .ct-series-f .ct-slice-donut-solid, .ct-series-f .ct-area {
|
||||
fill: #59922b; }
|
||||
|
||||
.ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut {
|
||||
stroke: #0544d3; }
|
||||
|
||||
.ct-series-g .ct-slice-pie, .ct-series-g .ct-slice-donut-solid, .ct-series-g .ct-area {
|
||||
fill: #0544d3; }
|
||||
|
||||
.ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut {
|
||||
stroke: #6b0392; }
|
||||
|
||||
.ct-series-h .ct-slice-pie, .ct-series-h .ct-slice-donut-solid, .ct-series-h .ct-area {
|
||||
fill: #6b0392; }
|
||||
|
||||
.ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut {
|
||||
stroke: #f05b4f; }
|
||||
|
||||
.ct-series-i .ct-slice-pie, .ct-series-i .ct-slice-donut-solid, .ct-series-i .ct-area {
|
||||
fill: #f05b4f; }
|
||||
|
||||
.ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut {
|
||||
stroke: #dda458; }
|
||||
|
||||
.ct-series-j .ct-slice-pie, .ct-series-j .ct-slice-donut-solid, .ct-series-j .ct-area {
|
||||
fill: #dda458; }
|
||||
|
||||
.ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut {
|
||||
stroke: #eacf7d; }
|
||||
|
||||
.ct-series-k .ct-slice-pie, .ct-series-k .ct-slice-donut-solid, .ct-series-k .ct-area {
|
||||
fill: #eacf7d; }
|
||||
|
||||
.ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut {
|
||||
stroke: #86797d; }
|
||||
|
||||
.ct-series-l .ct-slice-pie, .ct-series-l .ct-slice-donut-solid, .ct-series-l .ct-area {
|
||||
fill: #86797d; }
|
||||
|
||||
.ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut {
|
||||
stroke: #b2c326; }
|
||||
|
||||
.ct-series-m .ct-slice-pie, .ct-series-m .ct-slice-donut-solid, .ct-series-m .ct-area {
|
||||
fill: #b2c326; }
|
||||
|
||||
.ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut {
|
||||
stroke: #6188e2; }
|
||||
|
||||
.ct-series-n .ct-slice-pie, .ct-series-n .ct-slice-donut-solid, .ct-series-n .ct-area {
|
||||
fill: #6188e2; }
|
||||
|
||||
.ct-series-o .ct-point, .ct-series-o .ct-line, .ct-series-o .ct-bar, .ct-series-o .ct-slice-donut {
|
||||
stroke: #a748ca; }
|
||||
|
||||
.ct-series-o .ct-slice-pie, .ct-series-o .ct-slice-donut-solid, .ct-series-o .ct-area {
|
||||
fill: #a748ca; }
|
||||
|
||||
.ct-square {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-square:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 100%; }
|
||||
.ct-square:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-square > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-second {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-second:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 93.75%; }
|
||||
.ct-minor-second:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-second > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-second {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-second:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 88.8888888889%; }
|
||||
.ct-major-second:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-second > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-third {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-third:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 83.3333333333%; }
|
||||
.ct-minor-third:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-third > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-third {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-third:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 80%; }
|
||||
.ct-major-third:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-third > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-perfect-fourth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-perfect-fourth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 75%; }
|
||||
.ct-perfect-fourth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-perfect-fourth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-perfect-fifth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-perfect-fifth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 66.6666666667%; }
|
||||
.ct-perfect-fifth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-perfect-fifth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-sixth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-sixth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 62.5%; }
|
||||
.ct-minor-sixth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-sixth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-golden-section {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-golden-section:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 61.804697157%; }
|
||||
.ct-golden-section:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-golden-section > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-sixth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-sixth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 60%; }
|
||||
.ct-major-sixth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-sixth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-seventh {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-seventh:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%; }
|
||||
.ct-minor-seventh:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-seventh > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-seventh {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-seventh:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 53.3333333333%; }
|
||||
.ct-major-seventh:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-seventh > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-octave {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-octave:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 50%; }
|
||||
.ct-octave:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-octave > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-tenth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-tenth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 40%; }
|
||||
.ct-major-tenth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-tenth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-eleventh {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-eleventh:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 37.5%; }
|
||||
.ct-major-eleventh:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-eleventh > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-twelfth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-twelfth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 33.3333333333%; }
|
||||
.ct-major-twelfth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-twelfth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-double-octave {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-double-octave:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 25%; }
|
||||
.ct-double-octave:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-double-octave > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
/*# sourceMappingURL=chartist.css.map */
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<link rel="stylesheet" type="text/css" href="css/main.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/chartist.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/bitcoin.com.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/icomoon.css">
|
||||
<title>Bitcoin.com - Bitcoin.com Wallet</title>
|
||||
|
|
@ -28,6 +29,8 @@
|
|||
|
||||
<script src="lib/ionic.bundle.min.js"></script>
|
||||
<script src="lib/angular-components.js"></script>
|
||||
<script src="js/moment.min.js"></script>
|
||||
<script src="js/chartist.min.js"></script>
|
||||
|
||||
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="low-price"><span class="light-yellow">Low:</span><br/>$<span id="low-price">2500</span></div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="ct-chart ct-perfect-fourth"></div>
|
||||
<div class="ct-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue