{% extends "base.html.jinja" %}
{% 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 class="position-relative">
  <img src="./img/backgrounds/calculator-purple.svg" class="landing-bg" id="calculator-purple">
</div>

<section class="py-26 text-center">
  <div class="col-lg-5 mx-auto text-center">
    <div class="d-flex flex-column-reverse">
      <h1 class="mb-10">{% trans %}Green Currency Interactive Tool{% endtrans %}</h1>
      <h6 class="eyebrow mb-3">{% trans %}How Green Is Your Currency?{% endtrans %}</h6>
    </div>
    <a class="btn btn-primary" href="#carbon-calculator-section">Explore</a>
  </div>
</section>

<div class="position-relative d-none-sm">
  <img src="./img/backgrounds/calculator-green.svg" id="calculator-green">
</div>

<section class="container-new py-26">
  <div class="col-lg-6 offset-lg-3 p-10-until-sm pt-0">
    <h2 class="h4 h2-sm mb-8">{% trans %}Energy Consumption for Cash, Credit Cards and Crypto{% endtrans %}</h2>
    <h5 class="longform mb-10">{% trans %}Moving money carries cost—and not just the fee on your transaction or the value of your payment.{% endtrans %}</h5>
    <p class="mb-6">{% 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>
    <p class="mb-6">{% 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 class="mb-0">{% 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>
</section>

<section class="container-new py-26">
  <div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
    <img src="./img/backgrounds/cta-calculator-green.svg" class="cta cta-bottom-right">
    <div class="z-index-1 position-relative">
      <h2 class="h4 mb-10-until-sm mb-8-sm">{% trans %}How Does XRP Compare to Other Currencies?{% endtrans %}</h2>
      <a class="btn btn-primary btn-arrow" href="{{currentpage.prefix}}assets/pdf/xrpl-sustainability-methodology-2020.pdf">Methodology</a>
    </div>
  </div>
</section>


<div class="container py-26" id="carbon-calculator-section">
  <section class="row">
    <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 floating-nav mb-3 mb-lg-0" id="calculator-inputs">
        <div class="border-green p-3 br-8 calc-inputs">
          <h4 class="h5">{% trans %}Comparing<br class="until-sm"/> 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-500 mb-0 mt-4 text-smaller">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;">
                {% set numbers = [
                  { "num": "20" },
                  { "num": "40" },
                  { "num": "60" },
                  { "num": "80" },
                  { "num": "100" },
                ] %}
                {% for number in numbers %}
                  <li class="dash text-center text-smaller grey-500" data-num="{{number.num}}">{{number.num}}M</li>
                {% endfor %}
              </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-link.svg" 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.svg" 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.svg" alt="{% trans %}Facebook share{% endtrans %}" class="mw-100">
              </a>
            </div>
        </div>
        <a href="./assets/pdf/xrpl-sustainability-methodology-2020.pdf" target="_blank" class="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 mt-20-sm" id="calculator-outputs">
      <section class="min-vh100 bb-gray mb-40 section1 clearfix">
        <h4 class="h5">{% 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 46.94 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="{{currentpage.prefix}}assets/img/icons/bw-bitcoin.png" alt="BTC" class="mw-100 mt-3 invertible-img">
                <p class="h6 mt-2 mb-1">{% trans %}Bitcoin{% endtrans %}</p>
                <h5 class="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="{{currentpage.prefix}}assets/img/icons/bw-ethereum.png" alt="ETH" class="mw-100 mt-3 invertible-img">
                <p class="h6 mt-2 mb-1">{% trans %}Ethereum{% endtrans %}</p>
                <h5 class="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="{{currentpage.prefix}}assets/img/icons/bw-cash.png" class="mw-100 mt-3 mb-2 invertible-img">
                <p class="h6 mt-2 mb-1">{% trans %}Cash{% endtrans %}</p>
                <h5 class="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="{{currentpage.prefix}}assets/img/icons/xrp.png" alt="XRP" class="mw-100 mt-3 invertible-img">
                <p class="h6 mt-2 mb-1">XRP</p>
                <h5 class="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="{{currentpage.prefix}}assets/img/icons/bw-visa.png" alt="{% trans %}Visa{% endtrans %}" class="mw-100 mb-2 invertible-img" style="margin-top: 1.85rem;">
                <p class="h6 mt-2 mb-1">Visa</p>
                <h5 class="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="{{currentpage.prefix}}assets/img/icons/bw-mastercard.png" alt="{% trans %}Mastercard{% endtrans %}" class="mw-100 mb-1 invertible-img" style="margin-top: 1.65rem;">
                <p class="h6 mt-2 mb-1">{% trans %}Mastercard{% endtrans %}</p>
                <h5 class="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 bb-gray mb-40 section2 clearfix">
        <h4 class="h5">{% 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="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="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="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="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="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="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 bb-gray section3 clearfix">
        <h4 class="h5">{% 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="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="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="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="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="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="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-new py-26">
  <section class="row last-section">
    <div class="col-sm-8 col-sm-offset-4">
      <h3 class="h2-sm">{% trans %}Breaking Down Individual Transactions{% endtrans %}</h3>
      <p>{% trans %}Looking at individual transactions below, compare how a single transaction across each form of currency equates to kWh, CO<sub>2</sub> emissions, and gallons of gas.{% endtrans %}</p>
    </div>
    <div class="col-sm-12 mt-14 overflow-x-xs">
      <table id="calculator-table">
        <thead>
          <tr>
            <th></th>
            <th class="text-right h6 mb-10">{% trans %}Kilowatt Hour{% endtrans %}</th>
            <th class="text-right h6 mb-10">{% trans %}CO<sub>2</sub> Emissions{% endtrans %}</th>
            <th class="text-right h6 mb-10">{% trans %}Gallons of Gas{% endtrans %}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="h36 invertible-img" src="./img/logos/bitcoin.svg"></div>Bitcoin</td>
            <td class="fs-6 text-right">951.58<span class="ratio"> kWh/tx</span></td>
            <td class="fs-6 text-right">4.66<sup>-7</sup><span class="ratio"> Mt/tx</span></td>
            <td class="fs-6 text-right">75.7<span class="ratio"> gal/tx</span></td>
          </tr>
          <tr>
            <td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="h36 invertible-img" src="./img/logos/ethereum.svg"></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">2.3867<span class="ratio"> gal/tx</span></td>
          </tr>
          <tr>
            <td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="h36 invertible-img" src="./img/logos/xrp.svg"></div>XRP</td>
            <td class="fs-6 text-right">0.0079<span class="ratio"> kWh/tx</span></td>
            <td class="fs-6 text-right">4.5<sup>-12</sup><span class="ratio"> Mt/tx</span></td>
            <td class="fs-6 text-right">0.00063<span class="ratio"> gal/tx</span></td>
          </tr>
          <tr>
            <td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="w40 invertible-img" src="./img/logos/visa.svg"></div>Visa</td>
            <td class="fs-6 text-right">0.0008<span class="ratio"> kWh/tx</span></td>
            <td class="fs-6 text-right">4.6<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=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="w40 invertible-img" src="./img/logos/mastercard.svg"></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.1<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=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="w40 invertible-img" src="./img/logos/paper-currency.svg"></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>
    </div>
  </section>
</div>
{% endblock %}


{% block endbody %}
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/bodymovin.min.js"></script>
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/calculator/co2-crypto.json"></script>
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/calculator/co2-cash.json"></script>
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/calculator/co2-credit.json"></script>
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/calculator/gas-crypto.json"></script>
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/calculator/gas-cash.json"></script>
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/calculator/gas-credit.json"></script>
<script type="text/javascript" src="{{currentpage.prefix}}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>
{% endblock %}


{% block analytics %}
    <script type="application/javascript">
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      "event": "page_info",
      "page_type": "Splash Page",
      "page_group": "About"
    })
    </script>
{% endblock analytics %}