mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
added json files fo r the calculator animations. need to optimize whole page for mobile
This commit is contained in:
Calvin Jhunjhnuwala
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
assets/js/bodymovin.min.js
vendored
Normal file
1
assets/js/bodymovin.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
163
assets/js/calculator/carbon-calculator.js
Normal file
163
assets/js/calculator/carbon-calculator.js
Normal file
@@ -0,0 +1,163 @@
|
||||
let arr = {
|
||||
'btc': {
|
||||
'kWh': 487.368757765725,
|
||||
'tons': 16.97290,
|
||||
'gas': 38.7744
|
||||
},
|
||||
'eth': {
|
||||
'kWh': 42.8633,
|
||||
'tons': 1.13107,
|
||||
'gas': 2.38677
|
||||
},
|
||||
'pap': {
|
||||
'kWh': 0.044,
|
||||
'tons': 0.00096,
|
||||
'gas': 0.00350
|
||||
},
|
||||
'xrp': {
|
||||
'kWh': 0.0079,
|
||||
'tons': 0.00015,
|
||||
'gas': 0.00063
|
||||
},
|
||||
'vsa': {
|
||||
'kWh': 0.0008,
|
||||
'tons': 0.00002,
|
||||
'gas': 0.00006
|
||||
},
|
||||
'mst': {
|
||||
'kWh': 0.0006,
|
||||
'tons': 0.00002,
|
||||
'gas': 0.00005
|
||||
},
|
||||
}
|
||||
|
||||
function commarize() {
|
||||
// Alter numbers larger than 1k
|
||||
if (this >= 1e6) {
|
||||
var units = ["Thousand", "Million", "Billion", "Trillion"];
|
||||
|
||||
// Divide to get SI Unit engineering style numbers (1e3,1e6,1e9, etc)
|
||||
let unit = Math.floor(((this).toFixed(0).length - 1) / 3) * 3
|
||||
// Calculate the remainder
|
||||
var num = (this / ('1e'+unit)).toFixed(2)
|
||||
var unitname = units[Math.floor(unit / 3) - 1]
|
||||
|
||||
// output number remainder + unitname
|
||||
return num + ' ' + unitname
|
||||
}
|
||||
|
||||
// return formatted original number
|
||||
return this.toLocaleString()
|
||||
}
|
||||
|
||||
// Add method to prototype. this allows you to use this function on numbers and strings directly
|
||||
Number.prototype.commarize = commarize
|
||||
String.prototype.commarize = commarize
|
||||
|
||||
let slider = document.getElementById( 'myRange' ),
|
||||
txns = document.querySelectorAll( '.slider-amt' ),
|
||||
dataTypes = document.querySelectorAll( '.d-output' ),
|
||||
dataViz = document.querySelectorAll( '.viz-output' );
|
||||
|
||||
|
||||
// Update the current slider value (each time you drag the slider handle)
|
||||
|
||||
function doCalculations( val ){
|
||||
|
||||
[].slice.call( dataTypes ).forEach( function( dataType ){
|
||||
|
||||
if ( dataType.classList.contains( 'active' ) ){
|
||||
|
||||
let data_type = dataType.getAttribute( 'data-type' ),
|
||||
data_comp = dataType.getAttribute( 'data-comp' ),
|
||||
total = val * 1000000 * arr[ data_type ][ data_comp ],
|
||||
num = document.getElementById( data_comp + '-' + data_type ),
|
||||
// comp = the number of kWh Portugal used in 2019
|
||||
kwhComp = ( total / 50340000000 ).toFixed( 2 );
|
||||
|
||||
if ( data_comp === 'tons' ) {
|
||||
total = total / 2000;
|
||||
}
|
||||
|
||||
num.innerHTML = total.commarize();
|
||||
num.style.transition = "all .2s ease-in-out";
|
||||
|
||||
if ( data_comp === 'kWh' && kwhComp > .02 ){
|
||||
let dot = document.getElementById( data_comp + '-' + data_type + '-dot' );
|
||||
dot.style.transition = "all .2s ease-in-out";
|
||||
dot.style.transform = "scale(" + kwhComp * 100 + ")";
|
||||
dot.style.webkitTransform = "scale(" + kwhComp * 100 + ")";
|
||||
dot.style.msTransform = "scale(" + kwhComp * 100 + ")";
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function cryptoSelected(){
|
||||
gasCryptoAnimation( );
|
||||
co2CryptoAnimation();
|
||||
}
|
||||
|
||||
function cashSelected(){
|
||||
gasCashAnimation();
|
||||
co2CashAnimation();
|
||||
}
|
||||
|
||||
function creditSelected(){
|
||||
gasCreditAnimation();
|
||||
co2CreditAnimation();
|
||||
}
|
||||
|
||||
function changeDataType( type ){
|
||||
|
||||
|
||||
[].slice.call( dataTypes ).forEach( function( dataType ){
|
||||
if ( dataType.classList.contains( type ) ){
|
||||
let dType = type.substring(2);
|
||||
dataType.classList.add( 'active' );
|
||||
document.getElementById('gasAnimation').innerHTML = '';
|
||||
document.getElementById('co2Animation').innerHTML = '';
|
||||
|
||||
if ( dType === 'cash' ){
|
||||
cashSelected();
|
||||
} else if ( dType === 'credit' ){
|
||||
creditSelected()
|
||||
} else {
|
||||
cryptoSelected();
|
||||
}
|
||||
} else {
|
||||
dataType.classList.remove( 'active' );
|
||||
}
|
||||
});
|
||||
|
||||
doCalculations( slider.value );
|
||||
|
||||
}
|
||||
|
||||
$('.tab-link').on('click', function(e){
|
||||
$( '#data-selector li' ).removeClass( 'active' );
|
||||
$( this ).parent( 'li' ).addClass( 'active' );
|
||||
|
||||
let type = $( this ).attr( 'href' ).slice(1);
|
||||
|
||||
changeDataType( type );
|
||||
})
|
||||
|
||||
$( document ).ready( function(){
|
||||
[].slice.call( txns ).forEach( function( txn ){
|
||||
txn.innerHTML = slider.value;
|
||||
})
|
||||
|
||||
slider.oninput = function() {
|
||||
var val = this.value;
|
||||
[].slice.call( txns ).forEach( function( txn ){
|
||||
txn.innerHTML = val;
|
||||
})
|
||||
doCalculations( val );
|
||||
}
|
||||
|
||||
doCalculations( slider.value );
|
||||
cryptoSelected();
|
||||
});
|
||||
1
assets/js/calculator/co2-cash.json
Normal file
1
assets/js/calculator/co2-cash.json
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/calculator/co2-credit.json
Normal file
1
assets/js/calculator/co2-credit.json
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/calculator/co2-crypto.json
Normal file
1
assets/js/calculator/co2-crypto.json
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/calculator/gas-cash.json
Normal file
1
assets/js/calculator/gas-cash.json
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/calculator/gas-credit.json
Normal file
1
assets/js/calculator/gas-credit.json
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/calculator/gas-crypto.json
Normal file
1
assets/js/calculator/gas-crypto.json
Normal file
File diff suppressed because one or more lines are too long
163
assets/js/carbon-calculator.js
Normal file
163
assets/js/carbon-calculator.js
Normal file
@@ -0,0 +1,163 @@
|
||||
let arr = {
|
||||
'btc': {
|
||||
'kWh': 487.368757765725,
|
||||
'tons': 16.97290,
|
||||
'gas': 38.7744
|
||||
},
|
||||
'eth': {
|
||||
'kWh': 42.8633,
|
||||
'tons': 1.13107,
|
||||
'gas': 2.38677
|
||||
},
|
||||
'pap': {
|
||||
'kWh': 0.044,
|
||||
'tons': 0.00096,
|
||||
'gas': 0.00350
|
||||
},
|
||||
'xrp': {
|
||||
'kWh': 0.0079,
|
||||
'tons': 0.00015,
|
||||
'gas': 0.00063
|
||||
},
|
||||
'vsa': {
|
||||
'kWh': 0.0008,
|
||||
'tons': 0.00002,
|
||||
'gas': 0.00006
|
||||
},
|
||||
'mst': {
|
||||
'kWh': 0.0006,
|
||||
'tons': 0.00002,
|
||||
'gas': 0.00005
|
||||
},
|
||||
}
|
||||
|
||||
function commarize() {
|
||||
// Alter numbers larger than 1k
|
||||
if (this >= 1e6) {
|
||||
var units = ["Thousand", "Million", "Billion", "Trillion"];
|
||||
|
||||
// Divide to get SI Unit engineering style numbers (1e3,1e6,1e9, etc)
|
||||
let unit = Math.floor(((this).toFixed(0).length - 1) / 3) * 3
|
||||
// Calculate the remainder
|
||||
var num = (this / ('1e'+unit)).toFixed(2)
|
||||
var unitname = units[Math.floor(unit / 3) - 1]
|
||||
|
||||
// output number remainder + unitname
|
||||
return num + ' ' + unitname
|
||||
}
|
||||
|
||||
// return formatted original number
|
||||
return this.toLocaleString()
|
||||
}
|
||||
|
||||
// Add method to prototype. this allows you to use this function on numbers and strings directly
|
||||
Number.prototype.commarize = commarize
|
||||
String.prototype.commarize = commarize
|
||||
|
||||
let slider = document.getElementById( 'myRange' ),
|
||||
txns = document.querySelectorAll( '.slider-amt' ),
|
||||
dataTypes = document.querySelectorAll( '.d-output' ),
|
||||
dataViz = document.querySelectorAll( '.viz-output' );
|
||||
|
||||
|
||||
// Update the current slider value (each time you drag the slider handle)
|
||||
|
||||
function doCalculations( val ){
|
||||
|
||||
[].slice.call( dataTypes ).forEach( function( dataType ){
|
||||
|
||||
if ( dataType.classList.contains( 'active' ) ){
|
||||
|
||||
let data_type = dataType.getAttribute( 'data-type' ),
|
||||
data_comp = dataType.getAttribute( 'data-comp' ),
|
||||
total = val * 1000000 * arr[ data_type ][ data_comp ],
|
||||
num = document.getElementById( data_comp + '-' + data_type ),
|
||||
// comp = the number of kWh Portugal used in 2019
|
||||
kwhComp = ( total / 50340000000 ).toFixed( 2 );
|
||||
|
||||
if ( data_comp === 'tons' ) {
|
||||
total = total / 2000;
|
||||
}
|
||||
|
||||
num.innerHTML = total.commarize();
|
||||
num.style.transition = "all .2s ease-in-out";
|
||||
|
||||
if ( data_comp === 'kWh' && kwhComp > .02 ){
|
||||
let dot = document.getElementById( data_comp + '-' + data_type + '-dot' );
|
||||
dot.style.transition = "all .2s ease-in-out";
|
||||
dot.style.transform = "scale(" + kwhComp * 100 + ")";
|
||||
dot.style.webkitTransform = "scale(" + kwhComp * 100 + ")";
|
||||
dot.style.msTransform = "scale(" + kwhComp * 100 + ")";
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function cryptoSelected(){
|
||||
gasCryptoAnimation();
|
||||
co2CryptoAnimation();
|
||||
}
|
||||
|
||||
function cashSelected(){
|
||||
gasCashAnimation();
|
||||
co2CashAnimation();
|
||||
}
|
||||
|
||||
function creditSelected(){
|
||||
gasCreditAnimation();
|
||||
co2CreditAnimation();
|
||||
}
|
||||
|
||||
function changeDataType( type ){
|
||||
|
||||
|
||||
[].slice.call( dataTypes ).forEach( function( dataType ){
|
||||
if ( dataType.classList.contains( type ) ){
|
||||
let dType = type.substring(2);
|
||||
dataType.classList.add( 'active' );
|
||||
document.getElementById('gasAnimation').innerHTML = '';
|
||||
document.getElementById('co2Animation').innerHTML = '';
|
||||
|
||||
if ( dType === 'cash' ){
|
||||
cashSelected();
|
||||
} else if ( dType === 'credit' ){
|
||||
creditSelected()
|
||||
} else {
|
||||
cryptoSelected();
|
||||
}
|
||||
} else {
|
||||
dataType.classList.remove( 'active' );
|
||||
}
|
||||
});
|
||||
|
||||
doCalculations( slider.value );
|
||||
|
||||
}
|
||||
|
||||
$('.tab-link').on('click', function(e){
|
||||
$( '#data-selector li' ).removeClass( 'active' );
|
||||
$( this ).parent( 'li' ).addClass( 'active' );
|
||||
|
||||
let type = $( this ).attr( 'href' ).slice(1);
|
||||
|
||||
changeDataType( type );
|
||||
})
|
||||
|
||||
$( document ).ready( function(){
|
||||
[].slice.call( txns ).forEach( function( txn ){
|
||||
txn.innerHTML = slider.value;
|
||||
})
|
||||
|
||||
slider.oninput = function() {
|
||||
var val = this.value;
|
||||
[].slice.call( txns ).forEach( function( txn ){
|
||||
txn.innerHTML = val;
|
||||
})
|
||||
doCalculations( val );
|
||||
}
|
||||
|
||||
doCalculations( slider.value );
|
||||
cryptoSelected();
|
||||
});
|
||||
@@ -166,7 +166,6 @@ pages:
|
||||
|
||||
# "Learn" funnel ---------------------------------------------------------------
|
||||
- name: Learn
|
||||
# "Overview" page
|
||||
funnel: Learn
|
||||
template: template-landing-children.html
|
||||
html: learn.html
|
||||
@@ -197,7 +196,7 @@ pages:
|
||||
- name: History
|
||||
funnel: Learn
|
||||
category: History
|
||||
template: template-learn-history.html # TODO: change as needed
|
||||
template: template-learn-history.html
|
||||
html: history.html
|
||||
sidebar: disabled
|
||||
targets:
|
||||
@@ -217,7 +216,7 @@ pages:
|
||||
- name: Carbon Calculator
|
||||
funnel: Learn
|
||||
category: Carbon Calculator
|
||||
template: template-calculator.html # TODO: change as needed
|
||||
template: template-calculator.html
|
||||
html: carbon-calculator.html
|
||||
sidebar: disabled
|
||||
targets:
|
||||
|
||||
BIN
img/calculator/co2-cash/img_0.png
Normal file
BIN
img/calculator/co2-cash/img_0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 816 B |
BIN
img/calculator/co2-cash/img_1.png
Normal file
BIN
img/calculator/co2-cash/img_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
img/calculator/co2-cash/img_2.png
Normal file
BIN
img/calculator/co2-cash/img_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
img/calculator/co2-cash/img_3.png
Normal file
BIN
img/calculator/co2-cash/img_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
img/calculator/co2-credit/img_0.png
Normal file
BIN
img/calculator/co2-credit/img_0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 598 B |
BIN
img/calculator/co2-credit/img_1.png
Normal file
BIN
img/calculator/co2-credit/img_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 836 B |
BIN
img/calculator/co2-credit/img_2.png
Normal file
BIN
img/calculator/co2-credit/img_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
img/calculator/co2-credit/img_3.png
Normal file
BIN
img/calculator/co2-credit/img_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
img/calculator/co2-crypto/img_0.png
Normal file
BIN
img/calculator/co2-crypto/img_0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
img/calculator/co2-crypto/img_1.png
Normal file
BIN
img/calculator/co2-crypto/img_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
img/calculator/co2-crypto/img_2.png
Normal file
BIN
img/calculator/co2-crypto/img_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
img/calculator/gas-cash/img_0.png
Normal file
BIN
img/calculator/gas-cash/img_0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
img/calculator/gas-cash/img_1.png
Normal file
BIN
img/calculator/gas-cash/img_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
img/calculator/gas-crypto/img_0.png
Normal file
BIN
img/calculator/gas-crypto/img_0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
img/calculator/gas-crypto/img_1.png
Normal file
BIN
img/calculator/gas-crypto/img_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
img/green/Portugal.png
Normal file
BIN
img/green/Portugal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
img/icons/bitcoin.png
Normal file
BIN
img/icons/bitcoin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
img/icons/bitcoin@2x.png
Normal file
BIN
img/icons/bitcoin@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
img/icons/ethereum.png
Normal file
BIN
img/icons/ethereum.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 779 B |
BIN
img/icons/ethereum@2x.png
Normal file
BIN
img/icons/ethereum@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
img/icons/mastercard.png
Normal file
BIN
img/icons/mastercard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 735 B |
BIN
img/icons/mastercard@2x.png
Normal file
BIN
img/icons/mastercard@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
img/icons/paper-money.png
Normal file
BIN
img/icons/paper-money.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 911 B |
BIN
img/icons/paper-money@2x.png
Normal file
BIN
img/icons/paper-money@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
img/icons/visa.png
Normal file
BIN
img/icons/visa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1012 B |
BIN
img/icons/visa@2x.png
Normal file
BIN
img/icons/visa@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
img/icons/xrp.png
Normal file
BIN
img/icons/xrp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 442 B |
BIN
img/icons/xrp@2x.png
Normal file
BIN
img/icons/xrp@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 747 B |
@@ -130,3 +130,21 @@ a.button {
|
||||
content: "";
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
// NEW STYLING FROM REDESIGN
|
||||
.btn {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.btn-clear {
|
||||
color: $white;
|
||||
border: 1px solid $white;
|
||||
}
|
||||
.btn-clear:hover {
|
||||
background: transparent;
|
||||
color: $primary;
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
|
||||
@@ -23,7 +23,6 @@ h3 a:hover,
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.content h1 {
|
||||
margin-top: 32px;
|
||||
line-height: 1.2;
|
||||
@@ -138,5 +137,21 @@ td:nth-child(1) {
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.card-b {
|
||||
padding: 2rem;
|
||||
background: rgba(34, 37, 43, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.section-marker {
|
||||
position: absolute;
|
||||
font-size: 0.875rem;
|
||||
transform: rotate(90deg);
|
||||
font-weight: normal;
|
||||
top: calc(50% - 64px);
|
||||
margin-left: -32px;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
$base-size = 1rem;
|
||||
// Font Settings ===============================================================
|
||||
|
||||
body {
|
||||
// font-feature-settings: "liga", "kern";
|
||||
text-rendering: optimizeLegibility;
|
||||
@@ -19,7 +19,6 @@ pre, code {
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-weight: bold;
|
||||
@@ -40,8 +39,9 @@ p {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fs-base {
|
||||
font-size: 1rem;
|
||||
font-size: $base-size;
|
||||
}
|
||||
.fs-5 {
|
||||
font-size: 1.25rem;
|
||||
@@ -58,13 +58,38 @@ a:hover {
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.text-largest {
|
||||
font-size: 1.5rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
.text-large {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.text-small {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.text-smaller {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.text-smallest {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
/* STYLIZED LINKS */
|
||||
.arrow-link:after {
|
||||
content: url(../img/icon-green-arrow.svg);
|
||||
width: 28px;
|
||||
padding-left: 7px;
|
||||
transition: all .2s ease-in-out;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
.arrow-link:hover:after {
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
/* Japanese language font override ------------------------------------------ */
|
||||
|
||||
.lang-ja {
|
||||
|
||||
@@ -20,6 +20,13 @@
|
||||
.w48 {
|
||||
width: 48px;
|
||||
}
|
||||
.min-vh100 {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.vw100 {
|
||||
width: 100vw;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
/* SPACING HELPERS */
|
||||
/* To create new margin classes, multiply by 4px */
|
||||
@@ -118,9 +125,29 @@
|
||||
padding-bottom: 12.5rem;
|
||||
padding-top: 12.5rem;
|
||||
}
|
||||
.top-10 {
|
||||
top: 2.5rem;
|
||||
}
|
||||
|
||||
/* TEXT HELPERS */
|
||||
.va-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ls-none {
|
||||
list-style: none;
|
||||
}
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.align-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* COLOR ELEMENTS */
|
||||
.border-green {
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
.grey-400 {
|
||||
color: $gray-400
|
||||
}
|
||||
|
||||
|
||||
@@ -248,3 +248,92 @@ section {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* TIMELINE */
|
||||
.timeline-wrapper {
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
}
|
||||
.timeline:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
height: 102.5%;
|
||||
width: 4px;
|
||||
background: linear-gradient(180deg, rgba(254, 255, 1, 1) 0%, rgba(255, 45, 154, 1) 33%, rgba(163, 8, 143, 1) 66%, rgba(44, 4, 128, 0.85) 100%);
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #000;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.timeline-block:first-child .timeline-dot {
|
||||
border: 3px solid #FAFF1A;
|
||||
}
|
||||
|
||||
.timeline-block:nth-child(2) .timeline-dot {
|
||||
border: 3px solid #FF884B;
|
||||
}
|
||||
.timeline-block:nth-child(3) .timeline-dot {
|
||||
border: 3px solid #C000E6;
|
||||
}
|
||||
.timeline-block {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
|
||||
.timeline h4 {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
.timeline:before {
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.timeline-dot {
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
margin-left: calc(5% - 9px);
|
||||
will-change: transform;
|
||||
}
|
||||
.timeline-block:nth-child(even) {
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.timeline-dot {
|
||||
margin-right: calc(5% - 9px);
|
||||
}
|
||||
.timeline-content {
|
||||
width: 45%;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
will-change: transform;
|
||||
margin: 0;
|
||||
--line-height-multiplier: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,100 +9,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.va-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.arrow-link:after {
|
||||
content: url(../img/icon-green-arrow.svg);
|
||||
width: 28px;
|
||||
padding-left: 7px;
|
||||
transition: all .2s ease-in-out;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
.arrow-link:hover:after {
|
||||
padding-left: 14px;
|
||||
}
|
||||
.text-largest {
|
||||
font-size: 1.5rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
.top-10 {
|
||||
top: 2.5rem;
|
||||
}
|
||||
.vh100 {
|
||||
height: 100vh;
|
||||
min-height: 100%;
|
||||
}
|
||||
.vw100 {
|
||||
width: 100vw;
|
||||
min-width: 100%;
|
||||
}
|
||||
.align-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#hero-impact {
|
||||
width: 100vw;
|
||||
// margin-left: -32px;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
#hero-impact {
|
||||
margin-top: -120px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* COMPONENTS */
|
||||
.border-green {
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
.btn {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.btn-clear {
|
||||
color: $white;
|
||||
border: 1px solid $white;
|
||||
}
|
||||
.btn-clear:hover {
|
||||
background: transparent;
|
||||
color: $primary;
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
.card-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.card-b {
|
||||
padding: 2rem;
|
||||
background: rgba(34, 37, 43, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
// change this to be less generic
|
||||
// .card {
|
||||
// margin: 0 0.75rem;
|
||||
// background: black;
|
||||
// padding: 3rem 2rem;
|
||||
// color: $white;
|
||||
// }
|
||||
// .card h5 {
|
||||
// height: 38px;
|
||||
// padding-bottom: 5rem;
|
||||
// }
|
||||
|
||||
.section-marker {
|
||||
position: absolute;
|
||||
font-size: 0.875rem;
|
||||
transform: rotate(90deg);
|
||||
font-weight: normal;
|
||||
top: calc(50% - 64px);
|
||||
margin-left: -32px;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
|
||||
/* HOME STYLINGS */
|
||||
@@ -130,7 +36,7 @@
|
||||
.hc {
|
||||
background: black;
|
||||
padding: 2.25rem 2rem 7.75rem;
|
||||
color: var(--white);
|
||||
color: $white;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 70px;
|
||||
@@ -157,106 +63,23 @@
|
||||
100% { padding-left: 7px; }
|
||||
}
|
||||
|
||||
// TIMELINE
|
||||
.timeline-wrapper {
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
#hero-impact {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
|
||||
.timeline:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
height: 102.5%;
|
||||
width: 4px;
|
||||
background: linear-gradient(180deg, rgba(254, 255, 1, 1) 0%, rgba(255, 45, 154, 1) 33%, rgba(163, 8, 143, 1) 66%, rgba(44, 4, 128, 0.85) 100%);
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #000;
|
||||
box-sizing: border-box;
|
||||
@media only screen and (min-width: 768px) {
|
||||
#hero-impact {
|
||||
margin-top: -120px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-block:first-child .timeline-dot {
|
||||
border: 3px solid #FAFF1A;
|
||||
}
|
||||
|
||||
.timeline-block:nth-child(2) .timeline-dot {
|
||||
border: 3px solid #FF884B;
|
||||
}
|
||||
.timeline-block:nth-child(3) .timeline-dot {
|
||||
border: 3px solid #C000E6;
|
||||
}
|
||||
|
||||
|
||||
.timeline-block {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
|
||||
.timeline h4 {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
.timeline:before {
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.timeline-dot {
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
margin-left: calc(5% - 9px);
|
||||
will-change: transform;
|
||||
}
|
||||
.timeline-block:nth-child(even) {
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.timeline-dot {
|
||||
margin-right: calc(5% - 9px);
|
||||
}
|
||||
.timeline-content {
|
||||
width: 45%;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
will-change: transform;
|
||||
margin: 0;
|
||||
--line-height-multiplier: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#page-impact-bg {
|
||||
background-image: url(../../img/backgrounds/bg-impact-top.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 250px;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
#page-business-bg {
|
||||
background-image: url(../../img/backgrounds/bg-business-mid.png);
|
||||
background-repeat: no-repeat;
|
||||
@@ -272,7 +95,6 @@
|
||||
margin-top: -505px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#page-exchanges-bg {
|
||||
background-image: url(../../img/backgrounds/bg-exchanges-top.png);
|
||||
background-repeat: no-repeat;
|
||||
@@ -284,8 +106,6 @@
|
||||
margin-top: -446px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
#page-wallets-bg {
|
||||
background-image: url(../../img/backgrounds/bg-wallets-top.png);
|
||||
background-repeat: no-repeat;
|
||||
@@ -297,14 +117,12 @@
|
||||
margin-top: -778px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#page-contribute-bot {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: -199px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#page-overview-bg {
|
||||
background-image: url(../../img/backgrounds/bg-overview-top.png);
|
||||
background-repeat: no-repeat;
|
||||
@@ -322,13 +140,200 @@
|
||||
left: 0;
|
||||
top: 302px;
|
||||
}
|
||||
|
||||
#page-uses-top {
|
||||
|
||||
}
|
||||
|
||||
#table-overview {
|
||||
td:nth-child(1){
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* TABLE STYLING */
|
||||
.ta-right {
|
||||
text-align: right;
|
||||
}
|
||||
.dblue {
|
||||
color: #656E81;
|
||||
}
|
||||
#calculator-table {
|
||||
width: 100%;
|
||||
thead {
|
||||
border-bottom: 3px solid $white;
|
||||
}
|
||||
td {
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 1;
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: $base-size;
|
||||
}
|
||||
}
|
||||
tbody td {
|
||||
padding: 2rem 0.5rem;
|
||||
}
|
||||
tbody tr {
|
||||
border-bottom: 1px solid $white;
|
||||
}
|
||||
td:first-child{
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.ratio {
|
||||
font-size: .075rem;
|
||||
color: #656E81;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* CALCULATOR STYLING */
|
||||
#data-selector li a {
|
||||
background: #22252B;
|
||||
padding: 0.5rem 1.3rem;
|
||||
color: $white;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
#data-selector li:nth-child(2) {
|
||||
margin-left: -7px;
|
||||
margin-right: -7px;
|
||||
}
|
||||
#data-selector li.active a {
|
||||
background: $primary;
|
||||
color: #000;
|
||||
}
|
||||
.tab-content div {
|
||||
display: none;
|
||||
}
|
||||
.d-output {
|
||||
display: none;
|
||||
margin: 0 12px;
|
||||
max-width: 188px;
|
||||
width: 33%;
|
||||
}
|
||||
.d-output.active {
|
||||
display: block;
|
||||
animation-fill-mode: forwards;
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
}
|
||||
.viz-wrapper {
|
||||
position: relative;
|
||||
height: 204px;
|
||||
width: 184px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.viz-wrapper img {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
}
|
||||
.dot {
|
||||
height: 2px;
|
||||
width: 2px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 98px;
|
||||
left: 68px;
|
||||
transform-origin: center center;
|
||||
}
|
||||
#kWh-btc-dot {
|
||||
background-color: #FF671A;
|
||||
}
|
||||
#kWh-eth-dot {
|
||||
background-color: #4F5664;
|
||||
}
|
||||
#kWh-xrp-dot {
|
||||
background-color: $primary;
|
||||
}
|
||||
#kWh-pap-dot {
|
||||
}
|
||||
|
||||
.dash:before {
|
||||
content: url(../../img/icons/dash-line.png);
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
|
||||
width: 100%; /* Specific width is required for Firefox. */
|
||||
background: transparent; /* Otherwise white in Chrome */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
|
||||
}
|
||||
|
||||
input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
/* Hides the slider so custom styles can be added */
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; /* Override default look */
|
||||
appearance: none;
|
||||
box-sizing: content-box;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
width: 1px; /* Set a specific slider handle width */
|
||||
height: 1px; /* Slider handle height */
|
||||
background: $primary;
|
||||
padding: 0.125rem;
|
||||
border: 8px solid #000;
|
||||
box-shadow: 0 0 0 2px $primary;
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
-webkit-appearance: none; /* Override default look */
|
||||
appearance: none;
|
||||
box-sizing: content-box;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
width: 1px; /* Set a specific slider handle width */
|
||||
height: 1px; /* Slider handle height */
|
||||
background: $primary;
|
||||
padding: 0.125rem;
|
||||
border: 8px solid #000;
|
||||
box-shadow: 0 0 0 2px $primary;
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
input[type="range"] {
|
||||
background: $primary;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/** FF*/
|
||||
input[type="range"]::-moz-range-progress {
|
||||
background-color: #43e5f7;
|
||||
}
|
||||
input[type="range"]::-moz-range-track {
|
||||
background-color: #9a905d;
|
||||
}
|
||||
/* IE*/
|
||||
input[type="range"]::-ms-fill-lower {
|
||||
background-color: #43e5f7;
|
||||
}
|
||||
input[type="range"]::-ms-fill-upper {
|
||||
background-color: #9a905d;
|
||||
}
|
||||
|
||||
@@ -16,217 +16,531 @@
|
||||
{% block breadcrumbs %}{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="calculator-wrapper">
|
||||
<div class="container my-20 mb-49">
|
||||
<section class="row mb-49">
|
||||
<h6 class="section-marker">Sustainability</h6>
|
||||
<div class="col-sm-4">
|
||||
<img src="./img/green-graphic.png" class="mw-100">
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<h3 class="h1 mb-4 mt-12">How Green Is Your Currency?</h3>
|
||||
<a href="" class="arrow-link text-green bold">Explore the Interactive Tool</a>
|
||||
<h4 class="text-largest mt-16">Energy Consumption for Cash, Credit Cards and Crypto</h4>
|
||||
<div class="d-sm-flex mt-10">
|
||||
<p class="pr-1">Moving money carries cost—and not just the fee on your transaction or the value of your payment.<br/><br/>Whether it’s in cash, on a credit card or with crypto, every transaction you make consumes energy, and therefore, emits pollutants into the environment. </p>
|
||||
<p class="pl-1">The impact of this is startling when you look at the total transactions across an entire year—for any one form of currency.<br/><br/>
|
||||
Find out more about the environmental cost of some of the world’s most popular and innovative currencies, and start making more educated choices about how you transact.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="row mb-49">
|
||||
<h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
|
||||
<div class="col-sm-4">
|
||||
<img src="./img/green/green-graphic.png" class="mw-100">
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-sm-8 my-20 offset-sm-4">
|
||||
<h3>How Does XRP Compare to Other Currencies?</h3>
|
||||
<a href="#" class="text-green arrow-link bold">Learn more about the methodology</a>
|
||||
<div class="col-sm-8">
|
||||
<h3 class="h1 mb-4 mt-12">{% trans %}How Green Is Your Currency?{% endtrans %}</h3>
|
||||
<a href="#calculator" class="arrow-link text-green bold">{% trans %}Explore the Interactive Tool{% endtrans %}</a>
|
||||
<h2 class="text-largest mt-16 h4">{% trans %}Energy Consumption for Cash, Credit Cards and Crypto{% endtrans %}</h2>
|
||||
<div class="d-sm-flex mt-10">
|
||||
<div class="pr-1">
|
||||
<p>{% trans %}Moving money carries cost—and not just the fee on your transaction or the value of your payment.{% endtrans %}</p>
|
||||
<p>{% trans %}Whether it’s in cash, on a credit card or with crypto, every transaction you make consumes energy, and therefore, emits pollutants into the environment.{% endtrans %}</p>
|
||||
</div>
|
||||
<div class="pl-1">
|
||||
<p>{% trans %}The impact of this is startling when you look at the total transactions across an entire year—for any one form of currency.{% endtrans %}</p>
|
||||
<p>{% trans %}Find out more about the environmental cost of some of the world’s most popular and innovative currencies, and start making more educated choices about how you transact.{% endtrans %}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="container my-20">
|
||||
<section class="row mb-49">
|
||||
<div class="col-sm-4">
|
||||
<div class="rounded sticky-top top-10 border-green p-3 calc-inputs">
|
||||
<h4>Comparing Transaction Data<h4>
|
||||
<ul class="d-flex align-items-stretch p-0 mt-10">
|
||||
<li class="ls-none w-100 active"><a class="tab-link fs-base va-middle" href="#d-crypto">Crypto</a></li>
|
||||
<li class="ls-none w-100"><a class="tab-link fs-base va-middle" href="#d-credit">Credit Cards</a></li>
|
||||
<li class="ls-none w-100"><a class="tab-link fs-base va-middle" href="#d-cash">Cash</a></li>
|
||||
<div class="container" id="calculator">
|
||||
<div class="col-sm-8 mt-20 mb-30 offset-sm-4">
|
||||
<h3>{% trans %}How Does XRP Compare to Other Currencies?{% endtrans %}</h3>
|
||||
<a href="#" class="text-green arrow-link bold">{% trans %}Learn more about the methodology{% endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container my-20">
|
||||
<section class="row mb-49">
|
||||
<div class="col-sm-4">
|
||||
<div class="rounded sticky-top top-10">
|
||||
<div class="border-green p-3 calc-inputs">
|
||||
<h4>{% trans %}Comparing Transaction Data{% endtrans %}</h4>
|
||||
<ul class="p-0 mt-10 ls-none" id="data-selector">
|
||||
<li class="d-inline-flex active"><a class="tab-link fs-base va-middle" href="#d-crypto">{% trans %}Crypto{% endtrans %}</a></li>
|
||||
<li class="d-inline-flex"><a class="tab-link fs-base va-middle" href="#d-credit">{% trans %}Credit Cards{% endtrans %}</a></li>
|
||||
<li class="d-inline-flex"><a class="tab-link fs-base va-middle" href="#d-cash">{% trans %}Cash{% endtrans %}</a></li>
|
||||
</ul>
|
||||
<div class="slidecontainer">
|
||||
<input type="range" min="20" max="100" value="60" class="slider w-100" id="myRange" step="20">
|
||||
<ul class="d-flex p-0 ls-none justify-content-between position-relative mr-neg-8 ml-neg-8 mt-1" style="z-index: -1;">
|
||||
<li class="dash text-center text-smaller grey-50">20M</li>
|
||||
<li class="dash text-center text-smaller grey-50">40M</li>
|
||||
<li class="dash text-center text-smaller grey-50">60M</li>
|
||||
<li class="dash text-center text-smaller grey-50">80M</li>
|
||||
<li class="dash text-center text-smaller grey-50">100M</li>
|
||||
</ul>
|
||||
<div class="slidecontainer">
|
||||
<input type="range" min="20" max="100" value="60" class="slider w-100" id="myRange" step="20">
|
||||
<p id="demo"></p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="text-white arrow-link bold mt-4 d-block">{% trans %}Learn more about the methodology{% endtrans %}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-7 offset-sm-1 scroll-container h-100" id="main">
|
||||
<section class="min-vh100 mb-40 section1 clearfix">
|
||||
<h4>{% trans %}Energy Consumption of Portugal{% endtrans %}</h4>
|
||||
|
||||
<p class="grey-400 text-small my-4">{% trans %}Comparing <span class="slider-amt"></span> Million Transactions in 2019{% endtrans %}</p>
|
||||
|
||||
<p>{% trans %}The country of Portugal consumes ~50twh (1 billion) Kilowatt hours (KWH) of energy annually. Explore how much energy today’s various currencies consume in relation to Portugal.{% endtrans %}</p>
|
||||
|
||||
<div class="d-viz d-viz-1 mt-10">
|
||||
<ul class="d-sm-flex p-0">
|
||||
<li class="d-output d-crypto active" data-comp="kWh" data-type="btc">
|
||||
<div class="viz-wrapper">
|
||||
<img src="./img/green/Portugal.png" class="mw-100">
|
||||
<div class="dot" id="kWh-btc-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7 offset-sm-1 scroll-container h-100" id="main">
|
||||
<section class="vh100 section1">
|
||||
<h4>Energy Consumption of Portugal</h4>
|
||||
|
||||
<p>Comparing <span class="slider-amt"></span> Million Transactions in 2019
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
|
||||
|
||||
<div class="d-viz d-viz-1">
|
||||
<ul class="d-sm-flex justify-content-between p-0">
|
||||
<li class="d-output d-crypto active" data-comp="kWh" data-type="btc">
|
||||
<img src="./img/Portugal.png" class="mw-100">
|
||||
<div class="dot"></div>
|
||||
<p>Bitcoin</p>
|
||||
<h5 id="kWh-btc"></h5>
|
||||
<p>kWh</p>
|
||||
</li>
|
||||
<li class="d-output d-crypto active" data-comp="kWh" data-type="eth">
|
||||
<img src="./img/Portugal.png" class="mw-100">
|
||||
<p>Ethereum</p>
|
||||
<h5 id="kWh-eth"></h5>
|
||||
<p>kWh</p>
|
||||
</li>
|
||||
<li class="d-output d-cash" data-comp="kWh" data-type="pap">
|
||||
<img src="./img/Portugal.png" class="mw-100">
|
||||
<p>Cash</p>
|
||||
<h5 id="kWh-pap"></h5>
|
||||
<p>kWh</p>
|
||||
</li>
|
||||
<li class="d-output d-crypto d-credit d-cash active" data-comp="kWh" data-type="xrp">
|
||||
<img src="./img/Portugal.png" class="mw-100">
|
||||
<p>XRP</p>
|
||||
<h5 id="kWh-xrp"></h5>
|
||||
<p>kWh</p>
|
||||
</li>
|
||||
<li class="d-output d-credit" data-comp="kWh" data-type="vsa">
|
||||
<img src="./img/Portugal.png" class="mw-100">
|
||||
<p>Visa</p>
|
||||
<h5 id="kWh-vsa"></h5>
|
||||
<p>kWh</p>
|
||||
</li>
|
||||
<li class="d-output d-credit" data-comp="kWh" data-type="mst">
|
||||
<img src="./img/Portugal.png" class="mw-100">
|
||||
<p>Mastercard</p>
|
||||
<h5 id="kWh-mst"></h5>
|
||||
<p>kWh</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="vh100 section2">
|
||||
<h4>C02 Emissions from Airline Flights</h4>
|
||||
|
||||
<p>Comparing <span class="slider-amt"></span> Million Transactions in 2019
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
|
||||
|
||||
<div class="d-viz d-viz-1">
|
||||
<ul class="d-sm-flex justify-content-between">
|
||||
<li class="d-output d-crypto active" data-comp="miles" data-type="btc">
|
||||
<p>Bitcoin</p>
|
||||
<h5 id="miles-btc"></h5>
|
||||
<p>miles</p>
|
||||
</li>
|
||||
<li class="d-output d-crypto active" data-comp="miles" data-type="eth">
|
||||
<p>Ethereum</p>
|
||||
<h5 id="miles-eth"></h5>
|
||||
<p>miles</p>
|
||||
</li>
|
||||
<li class="d-output d-cash" data-comp="miles" data-type="pap">
|
||||
<p>Cash</p>
|
||||
<h5 id="miles-pap"></h5>
|
||||
<p>miles</p>
|
||||
</li>
|
||||
<li class="d-output d-crypto d-credit d-cash active" data-comp="miles" data-type="xrp">
|
||||
<p>XRP</p>
|
||||
<h5 id="miles-xrp"></h5>
|
||||
<p>miles</p>
|
||||
</li>
|
||||
<li class="d-output d-credit" data-comp="miles" data-type="vsa">
|
||||
<p>Visa</p>
|
||||
<h5 id="miles-vsa"></h5>
|
||||
<p>miles</p>
|
||||
</li>
|
||||
<li class="d-output d-credit" data-comp="miles" data-type="mst">
|
||||
<p>Mastercard</p>
|
||||
<h5 id="miles-mst"></h5>
|
||||
<p>miles</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="vh100 section3">
|
||||
<h4>Gas Consumption by the Gallon</h4>
|
||||
|
||||
<p>Comparing <span class="slider-amt"></span> Million Transactions in 2019
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="container my-20">
|
||||
<section class="row mb-49">
|
||||
<div class="col-sm-7 col-sm-offset-5">
|
||||
<h4>Breaking Down Individual Transactions</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
|
||||
</div>
|
||||
<div class="col-sm-12 mt-14">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bold ta-right">Kilowatt Hour</td>
|
||||
<td class="bold ta-right">Gallons of Gas</td>
|
||||
<td class="bold ta-right">CO2 Emissions</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/Bitcoin@2x.png"></div>Bitcoin</td>
|
||||
<td class="fs-6 ta-right">700<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">700<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">700<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/Ethereum@2x.png"></div>Ethereum</td>
|
||||
<td class="fs-6 ta-right">30<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">30<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">30<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/XRP-Mark@2x.png"></div>XRP</td>
|
||||
<td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/Visa@2x.png"></div>Visa</td>
|
||||
<td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/MasterCard@2x.png"></div>Mastercard</td>
|
||||
<td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/paper-money@2x.png"></div>Paper</td>
|
||||
<td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<img src="./img/icons/bw-bitcoin.png" class="mw-100 mt-3">
|
||||
<p class="h6 mt-2 mb-1">Bitcoin</p>
|
||||
<h5 class="h4 normal mb-0" id="kWh-btc"></h5>
|
||||
<p class="text-small black-90">KWh</p>
|
||||
</li>
|
||||
<li class="d-output d-crypto active" data-comp="kWh" data-type="eth">
|
||||
<div class="viz-wrapper">
|
||||
<img src="./img/green/Portugal.png" class="mw-100">
|
||||
<div class="dot" id="kWh-eth-dot"></div>
|
||||
</div>
|
||||
<img src="./img/icons/bw-ethereum.png" class="mw-100 mt-3">
|
||||
<p class="h6 mt-2 mb-1">Ethereum</p>
|
||||
<h5 class="h4 normal mb-0" id="kWh-eth"></h5>
|
||||
<p class="text-small black-90">KWh</p>
|
||||
</li>
|
||||
<li class="d-output d-cash" data-comp="kWh" data-type="pap">
|
||||
<div class="viz-wrapper">
|
||||
<img src="./img/green/Portugal.png" class="mw-100">
|
||||
<div class="dot" id="kWh-pap-dot"></div>
|
||||
</div>
|
||||
<img src="./img/icons/bw-cash.png" class="mw-100 mt-3">
|
||||
<p class="h6 mt-2 mb-1">Cash</p>
|
||||
<h5 class="h4 normal mb-0" id="kWh-pap"></h5>
|
||||
<p class="text-small black-90">KWh</p>
|
||||
</li>
|
||||
<li class="d-output d-crypto d-credit d-cash active" data-comp="kWh" data-type="xrp">
|
||||
<div class="viz-wrapper">
|
||||
<img src="./img/green/Portugal.png" class="mw-100">
|
||||
<div class="dot" id="kWh-xrp-dot"></div>
|
||||
</div>
|
||||
<img src="./img/icons/xrp.png" class="mw-100 mt-3">
|
||||
<p class="h6 mt-2 mb-1">XRP</p>
|
||||
<h5 class="h4 normal mb-0" id="kWh-xrp"></h5>
|
||||
<p class="text-small black-90">KWh</p>
|
||||
</li>
|
||||
<li class="d-output d-credit" data-comp="kWh" data-type="vsa">
|
||||
<div class="viz-wrapper">
|
||||
<img src="./img/green/Portugal.png" class="mw-100">
|
||||
<div class="dot" id="kWh-vsa-dot"></div>
|
||||
</div>
|
||||
<img src="./img/icons/bw-visa.png" class="mw-100 mt-3">
|
||||
<p class="h6 mt-2 mb-1">Visa</p>
|
||||
<h5 class="h4 normal mb-0" id="kWh-vsa"></h5>
|
||||
<p class="text-small black-90">KWh</p>
|
||||
</li>
|
||||
<li class="d-output d-credit" data-comp="kWh" data-type="mst">
|
||||
<div class="viz-wrapper">
|
||||
<img src="./img/green/Portugal.png" class="mw-100">
|
||||
<div class="dot" id="kWh-mst-dot"></div>
|
||||
</div>
|
||||
<img src="./img/icons/bw-mastercard.png" class="mw-100 mt-3">
|
||||
<p class="h6 mt-2 mb-1">Mastercard</p>
|
||||
<h5 class="h4 normal mb-0" id="kWh-mst"></h5>
|
||||
<p class="text-small black-90">KWh</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="min-vh100 mb-40 section2 clearfix">
|
||||
<h4>{% trans %}C02 Emissions from Airline Flights{% endtrans %}</h4>
|
||||
|
||||
<p class="grey-400 text-small my-4">{% trans %}Comparing <span class="slider-amt"></span> Million Transactions in 2019{% endtrans %}</p>
|
||||
|
||||
<p>{% trans %}A 12-hour flight from London to Hong Kong releases 3 tons of Carbon dioxide (C02). Discover how much C02 different forms of currency release in comparison to emissions from airline flights.{% endtrans %}</p>
|
||||
|
||||
<div class="mt-10" id="co2Animation"></div>
|
||||
|
||||
<ul class="d-sm-flex p-0">
|
||||
<li class="d-output d-crypto active" data-comp="tons" data-type="btc">
|
||||
<p class="h6 mt-3 mb-1">Bitcoin</p>
|
||||
<h5 class="h4 normal mb-0" id="tons-btc"></h5>
|
||||
<p class="text-small black-90">tons of CO2</p>
|
||||
</li>
|
||||
<li class="d-output d-crypto active" data-comp="tons" data-type="eth">
|
||||
<p class="h6 mt-3 mb-1">Ethereum</p>
|
||||
<h5 class="h4 normal mb-0" id="tons-eth"></h5>
|
||||
<p class="text-small black-90">tons of CO2</p>
|
||||
</li>
|
||||
<li class="d-output d-cash" data-comp="tons" data-type="pap">
|
||||
<p class="h6 mt-3 mb-1">Cash</p>
|
||||
<h5 class="h4 normal mb-0" id="tons-pap"></h5>
|
||||
<p class="text-small black-90">tons of CO2</p>
|
||||
</li>
|
||||
<li class="d-output d-crypto d-credit d-cash active" data-comp="tons" data-type="xrp">
|
||||
<p class="h6 mt-3 mb-1">XRP</p>
|
||||
<h5 class="h4 normal mb-0" id="tons-xrp"></h5>
|
||||
<p class="text-small black-90">tons of CO2</p>
|
||||
</li>
|
||||
<li class="d-output d-credit" data-comp="tons" data-type="vsa">
|
||||
<p class="h6 mt-3 mb-1">Visa</p>
|
||||
<h5 class="h4 normal mb-0" id="tons-vsa"></h5>
|
||||
<p class="text-small black-90">tons of CO2</p>
|
||||
</li>
|
||||
<li class="d-output d-credit" data-comp="tons" data-type="mst">
|
||||
<p class="h6 mt-3 mb-1">Mastercard</p>
|
||||
<h5 class="h4 normal mb-0" id="tons-mst"></h5>
|
||||
<p class="text-small black-90">tons of CO2</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
<section class="min-vh100 mb-40 section3 clearfix">
|
||||
<h4>{% trans %}Gas Consumption by the Gallon{% endtrans %}</h4>
|
||||
|
||||
<p class="grey-400 text-small my-4">{% trans %}Comparing <span class="slider-amt"></span> Million Transactions in 2019{% endtrans %}</p>
|
||||
|
||||
<p>{% trans %}An Ultra Large Crude Carrier (ULCC) carries approximately 120 million gallons of gas. Measure the environmental impact between currencies in relation to the amount of gas they would consume in the real-world.{% endtrans %}</p>
|
||||
|
||||
<div class="mt-10" id="gasAnimation"></div>
|
||||
|
||||
<ul class="d-sm-flex p-0">
|
||||
<li class="d-output d-crypto active" data-comp="gas" data-type="btc">
|
||||
<p class="h6 mt-3 mb-1">Bitcoin</p>
|
||||
<h5 class="h4 normal mb-0" id="gas-btc"></h5>
|
||||
<p class="text-small black-90">Gallons of Gas</p>
|
||||
</li>
|
||||
<li class="d-output d-crypto active" data-comp="gas" data-type="eth">
|
||||
<p class="h6 mt-3 mb-1">Ethereum</p>
|
||||
<h5 class="h4 normal mb-0" id="gas-eth"></h5>
|
||||
<p class="text-small black-90">Gallons of Gas</p>
|
||||
</li>
|
||||
<li class="d-output d-cash" data-comp="gas" data-type="pap">
|
||||
<p class="h6 mt-3 mb-1">Cash</p>
|
||||
<h5 class="h4 normal mb-0" id="gas-pap"></h5>
|
||||
<p class="text-small black-90">Gallons of Gas</p>
|
||||
</li>
|
||||
<li class="d-output d-crypto d-credit d-cash active" data-comp="gas" data-type="xrp">
|
||||
<p class="h6 mt-3 mb-1">XRP</p>
|
||||
<h5 class="h4 normal mb-0" id="gas-xrp"></h5>
|
||||
<p class="text-small black-90">Gallons of Gas</p>
|
||||
</li>
|
||||
<li class="d-output d-credit" data-comp="gas" data-type="vsa">
|
||||
<p class="h6 mt-3 mb-1">Visa</p>
|
||||
<h5 class="h4 normal mb-0" id="gas-vsa"></h5>
|
||||
<p class="text-small black-90">Gallons of Gas</p>
|
||||
</li>
|
||||
<li class="d-output d-credit" data-comp="gas" data-type="mst">
|
||||
<p class="h6 mt-3 mb-1">Mastercard</p>
|
||||
<h5 class="h4 normal mb-0" id="gas-mst"></h5>
|
||||
<p class="text-small black-90">Gallons of Gas</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="container my-20">
|
||||
<section class="row mb-49">
|
||||
<div class="col-sm-7 col-sm-offset-5">
|
||||
<h4>{% trans %}Breaking Down Individual Transactions{% endtrans %}</h4>
|
||||
<p>{% trans %}Looking at individual transactions below, compare how a single transaction across each form of currency equates to KWh, gallons of gas and C02 emissions.{% endtrans %}</p>
|
||||
</div>
|
||||
<div class="col-sm-12 mt-14">
|
||||
<table id="calculator-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="bold ta-right">{% trans %}Kilowatt Hour{% endtrans %}</td>
|
||||
<td class="bold ta-right">{% trans %}Gallons of Gas{% endtrans %}</td>
|
||||
<td class="bold ta-right">{% trans %}CO2 Emissions{% endtrans %}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/icons/bitcoin@2x.png"></div>Bitcoin</td>
|
||||
<td class="fs-6 ta-right">487.3688<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">38.7744<span class="ratio"> gal/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.4103<span class="ratio"> lbs/tx</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/icons/ethereum@2x.png"></div>Ethereum</td>
|
||||
<td class="fs-6 ta-right">42.8633<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">1.1311<span class="ratio"> gal/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.0273<span class="ratio"> lbs/tx</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/icons/xrp@2x.png"></div>XRP</td>
|
||||
<td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.0006<span class="dblue">0</span><span class="ratio"> gal/tx</span></td>
|
||||
<td class="fs-6 ta-right">3.7<sup>-12</sup><span class="ratio"> lbs/tx</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/icons/visa@2x.png"></div>Visa</td>
|
||||
<td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.00006<span class="ratio"> gal/tx</span></td>
|
||||
<td class="fs-6 ta-right">5.0<sup>-13</sup><span class="ratio"> lbs/tx</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/icons/mastercard@2x.png"></div>Mastercard</td>
|
||||
<td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.00005<span class="ratio"> gal/tx</span></td>
|
||||
<td class="fs-6 ta-right">5.0<sup>-13</sup><span class="ratio"> lbs/tx</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/icons/paper-money@2x.png"></div>Paper</td>
|
||||
<td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
|
||||
<td class="fs-6 ta-right">0.0035<span class="dblue">0</span><span class="ratio"> gal/tx</span></td>
|
||||
<td class="fs-6 ta-right">2.32<sup>-11</sup><span class="ratio"> lbs/tx</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block endbody %}
|
||||
<script src="https://www.google.com/recaptcha/api.js"></script>
|
||||
<script type="text/javascript" src="/assets/js/bodymovin.min.js"></script>
|
||||
<script type="text/javascript" src="/assets/js/calculator/co2-crypto.json"></script>
|
||||
<script type="text/javascript" src="/assets/js/calculator/co2-cash.json"></script>
|
||||
<script type="text/javascript" src="/assets/js/calculator/co2-credit.json"></script>
|
||||
<script type="text/javascript" src="/assets/js/calculator/gas-crypto.json"></script>
|
||||
<script type="text/javascript" src="/assets/js/calculator/gas-cash.json"></script>
|
||||
<script type="text/javascript" src="/assets/js/calculator/gas-credit.json"></script>
|
||||
<script type="text/javascript" src="/assets/js/calculator/carbon-calculator.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function co2CashAnimation(){
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('co2Animation'),
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: coCash
|
||||
});
|
||||
};
|
||||
|
||||
function co2CreditAnimation() {
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('co2Animation'),
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: coCredit
|
||||
});
|
||||
};
|
||||
|
||||
function co2CryptoAnimation() {
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('co2Animation'),
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: coCrypto
|
||||
});
|
||||
};
|
||||
|
||||
function gasCryptoAnimation() {
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('gasAnimation'),
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: gasCrypto
|
||||
});
|
||||
};
|
||||
|
||||
function gasCashAnimation() {
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('gasAnimation'),
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: gasCash
|
||||
});
|
||||
};
|
||||
|
||||
function gasCreditAnimation() {
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('gasAnimation'),
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: gasCredit
|
||||
});
|
||||
};
|
||||
|
||||
// let arr = {
|
||||
// 'btc': {
|
||||
// 'kWh': 487.368757765725,
|
||||
// 'tons': 16.97290,
|
||||
// 'gas': 38.7744
|
||||
// },
|
||||
// 'eth': {
|
||||
// 'kWh': 42.8633,
|
||||
// 'tons': 1.13107,
|
||||
// 'gas': 2.38677
|
||||
// },
|
||||
// 'pap': {
|
||||
// 'kWh': 0.044,
|
||||
// 'tons': 0.00096,
|
||||
// 'gas': 0.00350
|
||||
// },
|
||||
// 'xrp': {
|
||||
// 'kWh': 0.0079,
|
||||
// 'tons': 0.00015,
|
||||
// 'gas': 0.00063
|
||||
// },
|
||||
// 'vsa': {
|
||||
// 'kWh': 0.0008,
|
||||
// 'tons': 0.00002,
|
||||
// 'gas': 0.00006
|
||||
// },
|
||||
// 'mst': {
|
||||
// 'kWh': 0.0006,
|
||||
// 'tons': 0.00002,
|
||||
// 'gas': 0.00005
|
||||
// },
|
||||
// }
|
||||
|
||||
// function commarize() {
|
||||
// // Alter numbers larger than 1k
|
||||
// if (this >= 1e6) {
|
||||
// var units = ["Thousand", "Million", "Billion", "Trillion"];
|
||||
|
||||
// // Divide to get SI Unit engineering style numbers (1e3,1e6,1e9, etc)
|
||||
// let unit = Math.floor(((this).toFixed(0).length - 1) / 3) * 3
|
||||
// // Calculate the remainder
|
||||
// var num = (this / ('1e'+unit)).toFixed(2)
|
||||
// var unitname = units[Math.floor(unit / 3) - 1]
|
||||
|
||||
// // output number remainder + unitname
|
||||
// return num + ' ' + unitname
|
||||
// }
|
||||
|
||||
// // return formatted original number
|
||||
// return this.toLocaleString()
|
||||
// }
|
||||
|
||||
// // Add method to prototype. this allows you to use this function on numbers and strings directly
|
||||
// Number.prototype.commarize = commarize
|
||||
// String.prototype.commarize = commarize
|
||||
|
||||
// let slider = document.getElementById( 'myRange' ),
|
||||
// txns = document.querySelectorAll( '.slider-amt' ),
|
||||
// dataTypes = document.querySelectorAll( '.d-output' ),
|
||||
// dataViz = document.querySelectorAll( '.viz-output' );
|
||||
|
||||
|
||||
// // Update the current slider value (each time you drag the slider handle)
|
||||
|
||||
// function doCalculations( val ){
|
||||
|
||||
// [].slice.call( dataTypes ).forEach( function( dataType ){
|
||||
|
||||
// if ( dataType.classList.contains( 'active' ) ){
|
||||
|
||||
// let data_type = dataType.getAttribute( 'data-type' ),
|
||||
// data_comp = dataType.getAttribute( 'data-comp' ),
|
||||
// total = val * 1000000 * arr[ data_type ][ data_comp ],
|
||||
// num = document.getElementById( data_comp + '-' + data_type ),
|
||||
// // comp = the number of kWh Portugal used in 2019
|
||||
// kwhComp = ( total / 50340000000 ).toFixed( 2 );
|
||||
|
||||
// if ( data_comp === 'tons' ) {
|
||||
// total = total / 2000;
|
||||
// }
|
||||
|
||||
// num.innerHTML = total.commarize();
|
||||
// num.style.transition = "all .2s ease-in-out";
|
||||
|
||||
// if ( data_comp === 'kWh' && kwhComp > .02 ){
|
||||
// let dot = document.getElementById( data_comp + '-' + data_type + '-dot' );
|
||||
// dot.style.transition = "all .2s ease-in-out";
|
||||
// dot.style.transform = "scale(" + kwhComp * 100 + ")";
|
||||
// dot.style.webkitTransform = "scale(" + kwhComp * 100 + ")";
|
||||
// dot.style.msTransform = "scale(" + kwhComp * 100 + ")";
|
||||
// }
|
||||
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
// function cryptoSelected(){
|
||||
// gasCryptoAnimation( );
|
||||
// co2CryptoAnimation();
|
||||
// }
|
||||
|
||||
// function cashSelected(){
|
||||
// gasCashAnimation();
|
||||
// co2CashAnimation();
|
||||
// }
|
||||
|
||||
// function creditSelected(){
|
||||
// gasCreditAnimation();
|
||||
// co2CreditAnimation();
|
||||
// }
|
||||
|
||||
// function changeDataType( type ){
|
||||
|
||||
|
||||
// [].slice.call( dataTypes ).forEach( function( dataType ){
|
||||
// if ( dataType.classList.contains( type ) ){
|
||||
// let dType = type.substring(2);
|
||||
// dataType.classList.add( 'active' );
|
||||
// document.getElementById('gasAnimation').innerHTML = '';
|
||||
// document.getElementById('co2Animation').innerHTML = '';
|
||||
|
||||
// if ( dType === 'cash' ){
|
||||
// cashSelected();
|
||||
// } else if ( dType === 'credit' ){
|
||||
// creditSelected()
|
||||
// } else {
|
||||
// cryptoSelected();
|
||||
// }
|
||||
// } else {
|
||||
// dataType.classList.remove( 'active' );
|
||||
// }
|
||||
// });
|
||||
|
||||
// doCalculations( slider.value );
|
||||
|
||||
// }
|
||||
|
||||
// $('.tab-link').on('click', function(e){
|
||||
// $( '#data-selector li' ).removeClass( 'active' );
|
||||
// $( this ).parent( 'li' ).addClass( 'active' );
|
||||
|
||||
// let type = $( this ).attr( 'href' ).slice(1);
|
||||
|
||||
// changeDataType( type );
|
||||
// })
|
||||
|
||||
// $( document ).ready( function(){
|
||||
// [].slice.call( txns ).forEach( function( txn ){
|
||||
// txn.innerHTML = slider.value;
|
||||
// })
|
||||
|
||||
// slider.oninput = function() {
|
||||
// var val = this.value;
|
||||
// [].slice.call( txns ).forEach( function( txn ){
|
||||
// txn.innerHTML = val;
|
||||
// })
|
||||
// doCalculations( val );
|
||||
// }
|
||||
|
||||
// doCalculations( slider.value );
|
||||
// cryptoSelected();
|
||||
// });
|
||||
</script>
|
||||
|
||||
|
||||
<script type="application/javascript">
|
||||
gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user