{% 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 page-calculator{% endblock %}
{% block mainclasses %}landing{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block main %}
<!-- <div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="IhVJTgzU"></script> -->

<div class="fullwidth-bg">
  <div class="container mt-30">

    <section class="row mb-49">
      <h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
      <div class="col-sm-4 d-block text-center">
        <img class="mw-100 green-graphic" src="./img/green/green-graphic.png" alt="{% trans %}Sustainability icon{% endtrans %}">
      </div>
      <div class="col-sm-8">
        <h3 class="h1 mb-4 mt-4">{% 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-sm-3">
            <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-sm-3">
            <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-5 mt-20 mb-30 offset-sm-4">
      <h3 class="mb-4">{% 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-50">
      <a href="#" class="btn btn-outline-primary d-lg-none" id="calculator-mobile-toggle">{% trans %}Change Inputs{% endtrans %}</a>
      <div id="calculator-inputs-offset"></div>
      <div class="col-lg-4" >
        <div class="rounded sticky-top top-10 mb-3 mb-lg-0" id="calculator-inputs">
          <div class="border-green p-3 calc-inputs">
            <h4>{% trans %}Comparing<br/> Transaction Data{% endtrans %}</h4>
              <ul class="p-0 mt-10 ls-none d-sm-flex d-lg-block d-xl-flex flex-wrap justify-content-center justify-xl-content-around" id="data-selector">
                <li class="d-block d-xl-inline-flex text-center active"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#" data-currencytype="d-crypto">{% trans %}Crypto{% endtrans %}</a></li>
                <li class="d-block d-xl-inline-flex text-center"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#" data-currencytype="d-credit">{% trans %}Credit Cards{% endtrans %}</a></li>
                <li class="d-block d-xl-inline-flex text-center"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#" data-currencytype="d-cash">{% trans %}Cash{% endtrans %}</a></li>
              </ul>
              <p class="grey-400 mb-0">Number of Transactions</p>
              <div class="slidecontainer mb-10">
                <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 class="d-flex mb-3 ml-3">
                <a href="https://twitter.com/intent/tweet?url=https://xrpl.org/carbon-calculator.html&text=XRPL Carbon Calculator" target="_blank" class="mr-3"><img src="./img/logos/Twitter.png" alt="{% trans %}Twitter share{% endtrans %}" class="mw-100"></a>
                <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://xrpl.org/carbon-calculator.html" target="_blank" class="mr-3"><img src="./img/logos/LinkedIn.png" alt="{% trans %}LinkedIn share{% endtrans %}" class="mw-100"></a>
                <a href="https://www.facebook.com/sharer/sharer.php?u=https://xrpl.org/carbon-calculator.html" target="_blank" class="mr-3"><img src="./img/logos/Facebook.png" alt="{% trans %}Facebook share{% endtrans %}" class="mw-100">
                </a>
              </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-lg-7 offset-lg-1 scroll-container h-100" id="calculator-outputs">
        <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 class="calculator-section-description">{% 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" alt="{% trans %}Portugal{% endtrans %}" class="mw-100">
                  <div class="dot" id="kWh-btc-dot"></div>
                </div>
                <div class="num-wrapper">
                  <img src="assets/img/icons/bw-bitcoin.png" class="mw-100 mt-3">
                  <p class="h6 mt-2 mb-1">{% trans %}Bitcoin{% endtrans %}</p>
                  <h5 class="h4 normal mb-0" id="kWh-btc"></h5>
                  <p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
                </div>
              </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>
                <div class="num-wrapper">
                  <img src="assets/img/icons/bw-ethereum.png" class="mw-100 mt-3">
                  <p class="h6 mt-2 mb-1">{% trans %}Ethereum{% endtrans %}</p>
                  <h5 class="h4 normal mb-0" id="kWh-eth"></h5>
                  <p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
                </div>
              </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>
                <div class="num-wrapper">
                  <img src="assets/img/icons/bw-cash.png" class="mw-100 mt-3">
                  <p class="h6 mt-2 mb-1">{% trans %}Cash{% endtrans %}</p>
                  <h5 class="h4 normal mb-0" id="kWh-pap"></h5>
                  <p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
                </div>
              </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>
                <div class="num-wrapper">
                  <img src="assets/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">{% trans %}KWh{% endtrans %}</p>
                </div>
              </li>
              <li class="d-output d-credit" data-comp="kWh" data-type="vsa">
                <div class="viz-wrapper">
                  <img src="./img/green/Portugal.png" alt="{% trans %}Portugal{% endtrans %}" class="mw-100">
                  <div class="dot" id="kWh-vsa-dot"></div>
                </div>
                <div class="num-wrapper">
                  <img src="assets/img/icons/bw-visa.png" alt="{% trans %}Visa{% endtrans %}" 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">{% trans %}KWh{% endtrans %}</p>
                </div>
              </li>
              <li class="d-output d-credit" data-comp="kWh" data-type="mst">
                <div class="viz-wrapper">
                  <img src="./img/green/Portugal.png" alt="{% trans %}Portugal{% endtrans %}" class="mw-100">
                  <div class="dot" id="kWh-mst-dot"></div>
                </div>
                <div class="num-wrapper">
                  <img src="assets/img/icons/bw-mastercard.png" alt="{% trans %}Mastercard{% endtrans %}" class="mw-100 mt-3">
                  <p class="h6 mt-2 mb-1">{% trans %}Mastercard{% endtrans %}</p>
                  <h5 class="h4 normal mb-0" id="kWh-mst"></h5>
                  <p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
                </div>
              </li>

            </ul>
          </div>
        </section>
        <section class="min-vh100 mb-40 section2 clearfix">
          <h4>{% trans %}CO<sub>2</sub> 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 class="calculator-section-description">{% trans %}A 12-hour flight from London to Hong Kong releases 3 tons of carbon dioxide (CO<sub>2</sub>). Discover how much CO<sub>2</sub> 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">{% trans %}metric tons of CO<sub>2</sub>{% endtrans %}</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">{% trans %}metric tons of CO<sub>2</sub>{% endtrans %}</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">{% trans %}metric tons of CO<sub>2</sub>{% endtrans %}</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">{% trans %}metric tons of CO<sub>2</sub>{% endtrans %}</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">{% trans %}metric tons of CO<sub>2</sub>{% endtrans %}</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">{% trans %}metric tons of CO<sub>2</sub>{% endtrans %}</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 class="calculator-section-description">{% 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">{% trans %}Gallons of Gas{% endtrans %}</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">{% trans %}Gallons of Gas{% endtrans %}</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">{% trans %}Gallons of Gas{% endtrans %}</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">{% trans %}Gallons of Gas{% endtrans %}</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">{% trans %}Gallons of Gas{% endtrans %}</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">{% trans %}Gallons of Gas{% endtrans %}</p>
            </li>

          </ul>
        </section>
      </div>
    </section>
  </div>

  <div class="container my-20">
    <section class="row last-section">
      <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 CO<sub>2</sub> emissions.{% endtrans %}</p>
      </div>
      <div class="col-sm-12 mt-14 overflow-x-xs">
        <table id="calculator-table">
          <thead>
            <tr>
              <td></td>
              <td class="bold text-right">{% trans %}Kilowatt Hour{% endtrans %}</td>
              <td class="bold text-right">{% trans %}CO<sub>2</sub> Emissions*{% endtrans %}</td>
              <td class="bold text-right">{% trans %}Gallons of Gas{% 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="assets/img/icons/bitcoin@2x.png"></div>Bitcoin</td>
              <td class="fs-6 text-right">487.3688<span class="ratio"> KWh/tx</span></td>
              <td class="fs-6 text-right">4.1<sup>-7</sup><span class="ratio"> Mt/tx</span></td>
              <td class="fs-6 text-right">38.7744<span class="ratio"> gal/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="assets/img/icons/ethereum@2x.png"></div>Ethereum</td>
              <td class="fs-6 text-right">42.8633<span class="ratio"> KWh/tx</span></td>
              <td class="fs-6 text-right">2.73<sup>-8</sup><span class="ratio"> Mt/tx</span></td>
              <td class="fs-6 text-right">1.1311<span class="ratio"> gal/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="assets/img/icons/xrp@2x.png"></div>XRP</td>
              <td class="fs-6 text-right">0.0079<span class="ratio"> KWh/tx</span></td>
              <td class="fs-6 text-right">3.7<sup>-12</sup><span class="ratio"> Mt/tx</span></td>
              <td class="fs-6 text-right">0.0006<span class="dblue">0</span><span class="ratio"> gal/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="assets/img/icons/visa@2x.png"></div>Visa</td>
              <td class="fs-6 text-right">0.0008<span class="ratio"> KWh/tx</span></td>
              <td class="fs-6 text-right">5.0<sup>-13</sup><span class="ratio"> Mt/tx</span></td>
              <td class="fs-6 text-right">0.00006<span class="ratio"> gal/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="assets/img/icons/mastercard@2x.png"></div>Mastercard</td>
              <td class="fs-6 text-right">0.0006<span class="ratio"> KWh/tx</span></td>
              <td class="fs-6 text-right">5.0<sup>-13</sup><span class="ratio"> Mt/tx</span></td>
              <td class="fs-6 text-right">0.00005<span class="ratio"> gal/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="assets/img/icons/paper-money@2x.png"></div>{% trans %}Paper Currency{% endtrans %}</td>
              <td class="fs-6 text-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
              <td class="fs-6 text-right">2.32<sup>-11</sup><span class="ratio"> Mt/tx</span></td>
              <td class="fs-6 text-right">0.0035<span class="dblue">0</span><span class="ratio"> gal/tx</span></td>
            </tr>
          </tbody>
        </table>
        <p class="text-smallest mt-10">{% trans %}*Calculations in million tonne (Mt){% endtrans %}</p>
      </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 %}