ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 19:55:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

qa items

Browse Source
This commit is contained in:
Calvin Jhunjhnuwala
2020-09-25 13:15:05 -07:00
parent 3cc4f060b5
commit b823be4d65
9 changed files with 54 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/devportal.css.map
View File

File diff suppressed because one or more lines are too long

4
assets/js/calculator/carbon-calculator.js
View File

@@ -1,12 +1,12 @@
let arr = { let arr = {
'btc': { 'btc': {
'kWh': 487.368757765725, 'kWh': 487.368757765725,
'tons': 0.41034833, 'tons': 0.0000004103449,
'gas': 38.7744 'gas': 38.7744
}, },
'eth': { 'eth': {
'kWh': 42.8633, 'kWh': 42.8633,
'tons': 0.02734399, 'tons': 0.0000000273454,
'gas': 2.38677 'gas': 2.38677
}, },
'pap': { 'pap': {

5
styles/_helpers.scss
View File

@@ -155,6 +155,10 @@
.overflow-xs { .overflow-xs {
overflow: scroll; overflow: scroll;
} }
.overflow-x-xs {
overflow-x: scroll;
overflow-y: hidden;
}
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.position-sm-absolute { .position-sm-absolute {
@@ -172,3 +176,4 @@
.grey-400 { .grey-400 {
color: $gray-400 color: $gray-400
} }

14
styles/_pages.scss
View File

@@ -148,6 +148,13 @@
} }
} }
.green-graphic {
@include media-breakpoint-down(xs) {
width: 184px;
margin-bottom: 32px;
}
}
.page-calculator { .page-calculator {
.calculator-section-description { .calculator-section-description {
@@ -190,6 +197,10 @@
animation: fadeIn 1s ease-in-out; animation: fadeIn 1s ease-in-out;
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
display: inline-block; display: inline-block;
margin-bottom: 32px;
}
@include media-breakpoint-down(xs) {
display: block
} }
} }
@@ -200,7 +211,7 @@
max-width: 100%; max-width: 100%;
} }
.viz-wrapper { .viz-wrapper {
margin-bottom: 2.5rem; // margin-bottom: 2.5rem;
margin-right: 1rem; margin-right: 1rem;
} }
.d-output[data-comp="kWh"].active { .d-output[data-comp="kWh"].active {
@@ -230,6 +241,7 @@
top: 15px; top: 15px;
right: 15px; right: 15px;
z-index: 9999999; z-index: 9999999;
background: $black;
} }
#calculator-mobile-toggle.hide { #calculator-mobile-toggle.hide {
display: none; display: none;

21
tool/template-calculator.html
View File

@@ -24,8 +24,8 @@
<section class="row mb-49"> <section class="row mb-49">
<h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6> <h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
<div class="col-sm-4 d-sm-none d-md-block"> <div class="col-sm-4 d-block text-center">
<img class="mw-100" src="./img/green/green-graphic.png" alt="{% trans %}Sustainability icon{% endtrans %}"> <img class="mw-100 green-graphic" src="./img/green/green-graphic.png" alt="{% trans %}Sustainability icon{% endtrans %}">
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
<h3 class="h1 mb-4 mt-4">{% trans %}How Green Is Your Currency?{% endtrans %}</h3> <h3 class="h1 mb-4 mt-4">{% trans %}How Green Is Your Currency?{% endtrans %}</h3>
@@ -65,6 +65,7 @@
<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-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> <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> </ul>
<p class="grey-400 mb-0">Number of Transactions</p>
<div class="slidecontainer mb-10"> <div class="slidecontainer mb-10">
<input type="range" min="20" max="100" value="60" class="slider w-100" id="myRange" step="20"> <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;"> <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;">
@@ -268,52 +269,52 @@
<h4>{% trans %}Breaking Down Individual Transactions{% endtrans %}</h4> <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> <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>
<div class="col-sm-12 mt-14 overflow-xs"> <div class="col-sm-12 mt-14 overflow-x-xs">
<table id="calculator-table"> <table id="calculator-table">
<thead> <thead>
<tr> <tr>
<td></td> <td></td>
<td class="bold text-right">{% trans %}Kilowatt Hour{% endtrans %}</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> <td class="bold text-right">{% trans %}Gallons of Gas{% endtrans %}</td>
<td class="bold text-right">{% trans %}CO2 Emissions*{% endtrans %}</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<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/bitcoin@2x.png"></div>Bitcoin</td> <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">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> <td class="fs-6 text-right">38.7744<span class="ratio"> gal/tx</span></td>
<td class="fs-6 text-right">0.4103<span class="ratio"> Mt/tx</span></td>
</tr> </tr>
<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-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">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> <td class="fs-6 text-right">1.1311<span class="ratio"> gal/tx</span></td>
<td class="fs-6 text-right">0.0273<span class="ratio"> Mt/tx</span></td>
</tr> </tr>
<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-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">0.0079<span class="ratio"> KWh/tx</span></td>
<td class="fs-6 text-right">0.0006<span class="dblue">0</span><span class="ratio"> gal/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">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>
<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-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">0.0008<span class="ratio"> KWh/tx</span></td>
<td class="fs-6 text-right">0.00006<span class="ratio"> gal/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">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>
<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-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">0.0006<span class="ratio"> KWh/tx</span></td>
<td class="fs-6 text-right">0.00005<span class="ratio"> gal/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">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>
<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>Paper</td> <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>Paper</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">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
<td class="fs-6 text-right">0.0035<span class="dblue">0</span><span class="ratio"> gal/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">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> </tr>
</tbody> </tbody>
</table> </table>

2
tool/template-home.html
View File

@@ -108,7 +108,7 @@
<section class="row last-section"> <section class="row last-section">
<h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6> <h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1 text-center"> <div class="col-sm-4 offset-sm-1 text-center">
<img class="mw-100" src="./img/green/green-graphic.png"> <img class="mw-100 green-graphic" src="./img/green/green-graphic.png" alt="{% trans %}Sustainability icon{% endtrans %}">
</div> </div>
<div class="col-sm-6 offset-sm-1"> <div class="col-sm-6 offset-sm-1">
<h3 class="h1 mb-9">{% trans %}Green by Nature{% endtrans %}</h3> <h3 class="h1 mb-9">{% trans %}Green by Nature{% endtrans %}</h3>

27
tool/template-learn-overview.html
View File

@@ -35,7 +35,7 @@
<section class="row mb-30"> <section class="row mb-30">
<h6 class="section-marker">{% trans %}Benefits{% endtrans %}</h6> <h6 class="section-marker">{% trans %}Benefits{% endtrans %}</h6>
<div class="col-sm-12 col-lg-10"> <div class="col-sm-12 col-lg-10 overflow-x-xs">
<table id="overview-table" class="mw-100"> <table id="overview-table" class="mw-100">
<thead> <thead>
<tr> <tr>
@@ -57,7 +57,7 @@
</tr> </tr>
<tr> <tr>
<td class="bold"><div class="w48 mr-3 text-center d-sm-inline-block no-wrap"><img class="w44" src="assets/img/icons/scalable.png"></div>{% trans %}Scalable{% endtrans %}</td> <td class="bold"><div class="w48 mr-3 text-center d-sm-inline-block no-wrap"><img class="w44" src="assets/img/icons/scalable.png"></div>{% trans %}Scalable{% endtrans %}</td>
<td class="">{% trans %}1500 transaction per second{% endtrans %}</td> <td class="">{% trans %}1500 transactions per second{% endtrans %}</td>
<td class="">{% trans %}3 transactions per second{% endtrans %}</td> <td class="">{% trans %}3 transactions per second{% endtrans %}</td>
</tr> </tr>
<tr class="border-none"> <tr class="border-none">
@@ -127,7 +127,7 @@
</div> </div>
<div class="col-md-4 mb-20"> <div class="col-md-4 mb-20">
<h4>{% trans %}Developers{% endtrans %}</h4> <h4>{% trans %}Developers{% endtrans %}</h4>
<p class="my-10">{% trans %}By building on the XRP Ledger, developers can easily integrate payments into their products—seamlessly putting money at the center of their applications. Projects like the <a href="https://xpring.io/">Xpring developer platform</a> are making it easier for developers to leverage XRP. {% endtrans %}</p> <p class="my-10">{% trans %}By building on the XRP Ledger, developers can easily integrate payments into their products—seamlessly putting money at the center of their applications. Projects like the <a href="https://xpring.io/" target="_blank">Xpring developer platform</a> are making it easier for developers to leverage XRP. {% endtrans %}</p>
<a href="docs.html" class="text-white bold arrow-link position-sm-absolute bottom-0">{% trans %}More About Developers{% endtrans %}</a> <a href="docs.html" class="text-white bold arrow-link position-sm-absolute bottom-0">{% trans %}More About Developers{% endtrans %}</a>
</div> </div>
</section> </section>
@@ -189,16 +189,16 @@
<div class="row"> <div class="row">
<div class="col-md-6 offset-md-1 order-1 order-md-2 mb-10"> <div class="col-md-6 offset-md-1 order-1 order-md-2 mb-10">
<div class="d-flex flex-wrap w-100"> <div class="d-flex flex-wrap w-100">
<a class="square square-50 d-flex card-b" href="https://www.coinbase.com/"> <a class="square square-50 d-flex card-b" href="https://www.coinbase.com/" target="_blank">
<img class="mw-100" src="assets/img/exchanges/coinbase.png"> <img class="mw-100" src="assets/img/exchanges/coinbase.png">
</a> </a>
<a class="square square-50 d-flex card-b" href="https://www.binance.com/"> <a class="square square-50 d-flex card-b" href="https://www.binance.com/" target="_blank">
<img class="mw-100" src="assets/img/exchanges/binance.png"> <img class="mw-100" src="assets/img/exchanges/binance.png">
</a> </a>
<a class="square square-50 d-flex card-b" href="https://www.bitstamp.net/"> <a class="square square-50 d-flex card-b" href="https://www.bitstamp.net/" target="_blank">
<img class="mw-100" src="assets/img/exchanges/bitstamp.png"> <img class="mw-100" src="assets/img/exchanges/bitstamp.png">
</a> </a>
<a class="square square-50 d-flex card-b" href="https://www.kraken.com/"> <a class="square square-50 d-flex card-b" href="https://www.kraken.com/" target="_blank">
<img class="mw-100" src="assets/img/exchanges/kraken.png"> <img class="mw-100" src="assets/img/exchanges/kraken.png">
</a> </a>
</div> </div>
@@ -206,7 +206,7 @@
<div class="col-md-5 order-2 order-md-1"> <div class="col-md-5 order-2 order-md-1">
<h2 class="mb-10">{% trans %}How Is XRP Used in Trading?{% endtrans %}</h2> <h2 class="mb-10">{% trans %}How Is XRP Used in Trading?{% endtrans %}</h2>
<p>{% trans %}XRP is traded on more than 140 markets and <a href="exchanges.html">exchanges</a> worldwide.{% endtrans %}</p> <p>{% trans %}XRP is traded on more than 140 markets and <a href="exchanges.html">exchanges</a> worldwide.{% endtrans %}</p>
<p>{% trans %}XRP’s low transaction fees, reliability and high speed enable traders to use the digital asset as high-speed, cost-efficient and reliable collateral across trading venues—<a href="https://ripple.com/insights/xrp-a-preferred-base-currency-for-arbitrage-trading/" target="_blank">seizing arbitrage opportunities</a>, servicing margin calls and managing general trading inventory in real time.{% endtrans %}</p> <p>{% trans %}XRP’s low transaction fees, reliability and high speed enable traders to use the digital asset as fast, cost-efficient and reliable collateral across trading venues—<a href="https://ripple.com/insights/xrp-a-preferred-base-currency-for-arbitrage-trading/" target="_blank">seizing arbitrage opportunities</a>, servicing margin calls and managing general trading inventory in real time.{% endtrans %}</p>
<p>{% trans %}Because of the properties inherent to XRP and the ecosystem around it, traders worldwide are able to shift collateral, bridge currencies and switch from one crypto into another nearly instantly, across any exchange on the planet.{% endtrans %}</p> <p>{% trans %}Because of the properties inherent to XRP and the ecosystem around it, traders worldwide are able to shift collateral, bridge currencies and switch from one crypto into another nearly instantly, across any exchange on the planet.{% endtrans %}</p>
<a href="exchanges.html" class="mt-10 btn btn-outline-secondary">{% trans %}Find Out More{% endtrans %}</a> <a href="exchanges.html" class="mt-10 btn btn-outline-secondary">{% trans %}Find Out More{% endtrans %}</a>
</div> </div>
@@ -247,6 +247,17 @@
{% block endbody %} {% block endbody %}
<script type="text/javascript">
$( '.card-b' )
.mouseover( function(e){
$( '.card-b' ).addClass( 'not-hover' );
$( this ).removeClass( 'not-hover' );
})
.mouseout( function(e){
$( '.card-b' ).removeClass( 'not-hover' );
});
</script>
<script type="application/javascript"> <script type="application/javascript">
gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'}); gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
</script> </script>

2
tool/template-learn-uses.html
View File

@@ -34,7 +34,7 @@
<div class="container mb-20"> <div class="container mb-20">
<section class="row mb-50"> <section class="row mb-50">
<h6 class="section-marker">{% trans %}Cross-Border payments{% endtrans %}</h6> <h6 class="section-marker">{% trans %}Cross-Border Payments{% endtrans %}</h6>
<div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center text-md-left"> <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center text-md-left">
<img class="mw-100" src="./img/uses/xb-payment.png"> <img class="mw-100" src="./img/uses/xb-payment.png">
</div> </div>