mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
385 lines
18 KiB
HTML
385 lines
18 KiB
HTML
{% extends "template-base.html" %}
|
||
{% block head %}
|
||
|
||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||
<!--[if lt IE 9]>
|
||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
|
||
{% endblock %}
|
||
|
||
{% block bodyclasses %}no-sidebar{% endblock %}
|
||
{% block mainclasses %}landing{% endblock %}
|
||
|
||
{% 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">{% trans %}Sustainability{% endtrans %}</h6>
|
||
<div class="col-sm-4">
|
||
<img src="./img/green/green-graphic.png" class="mw-100">
|
||
</div>
|
||
<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" 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>
|
||
</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>
|
||
<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">metric 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">metric 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">metric 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">metric 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">metric 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">metric 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 %}dddKilowatt 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 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
|
||
});
|
||
};
|
||
|
||
|
||
</script>
|
||
|
||
|
||
<script type="application/javascript">
|
||
gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
|
||
</script>
|
||
|
||
|
||
|
||
{% endblock %}
|