mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-19 03:05:49 +00:00
Qa updates. Add animations
This commit is contained in:
Jake
@@ -18,63 +18,12 @@
|
||||
{% block main %}
|
||||
|
||||
|
||||
<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-0">{% trans %}A Global Community of Builders and Innovators{% endtrans %}</h1>
|
||||
<h6 class="eyebrow mb-3">{% trans %}The XRPL Community{% endtrans %}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Join conversation -->
|
||||
<section class="container-new" id="find-us-on-platforms">
|
||||
<div class="d-flex flex-column-reverse col-sm-8 p-0">
|
||||
<h3 class="h4 h2-sm">{% trans %}Find us on the platforms below{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Join the Conversation{% endtrans %}</h6>
|
||||
</div>
|
||||
|
||||
{% set platforms = [
|
||||
{ "name": "Twitter",
|
||||
"id": "twitter",
|
||||
"link": "https://twitter.com/XRPLF/"},
|
||||
{ "name": "Discord",
|
||||
"id": "discord",
|
||||
"link": ""},
|
||||
{ "name": "YouTube",
|
||||
"id": "youtube",
|
||||
"link": "#"},
|
||||
{ "name": "GitHub",
|
||||
"id": "github",
|
||||
"link": "https://github.com/XRPLF/xrpl-dev-portal",
|
||||
"imgclasses": "invertible-img"},
|
||||
{ "name": "Twitch",
|
||||
"id": "twitch",
|
||||
"link": "https://www.twitch.tv/ripplexdev"},
|
||||
{ "name": "Stack Overflow",
|
||||
"id": "stack-overflow",
|
||||
"link": "https://stackoverflow.com/questions/tagged/xrp"},
|
||||
{ "name": "Dev.to",
|
||||
"id": "devto",
|
||||
"link": "#"},
|
||||
] %}
|
||||
<div class="row row-cols-2 row-cols-lg-4 card-deck">
|
||||
{% for plat in platforms %}
|
||||
<a class="card" href="{{plat.link}}">
|
||||
<div class="card-body">
|
||||
<div class="circled-logo"><img id="platform-{{plat.id}}" alt="(logo)" {% if plat.imgclasses %}class="{{plat.imgclasses}}"{% endif %}/></div>
|
||||
<h4 class="card-title h5">{{plat.name}}</h4>
|
||||
</div>
|
||||
<div class="card-footer"> </div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- TEMP -->
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
.text-cards {
|
||||
grid-gap: 40px;
|
||||
}
|
||||
@@ -108,39 +57,101 @@
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<section class="py-26 text-center">
|
||||
<div class="col-lg-6 mx-auto text-left text-md-center">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h1 class="mb-0">{% trans %}A Global Community of Builders and Innovators{% endtrans %}</h1>
|
||||
<h6 class="eyebrow mb-3">{% trans %}The XRPL Community{% endtrans %}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Join conversation -->
|
||||
<section class="container-new" id="find-us-on-platforms">
|
||||
<div class="d-flex flex-column-reverse col-sm-8 p-0">
|
||||
<h3 class="h4 h2-sm">{% trans %}Find the community on the platforms below{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Join the Conversation{% endtrans %}</h6>
|
||||
</div>
|
||||
|
||||
{% set platforms = [
|
||||
{ "name": "Twitter",
|
||||
"id": "twitter",
|
||||
"link": "https://twitter.com/XRPLF/"},
|
||||
{ "name": "Discord",
|
||||
"id": "discord",
|
||||
"link": ""},
|
||||
{ "name": "YouTube",
|
||||
"id": "youtube",
|
||||
"link": "#"},
|
||||
{ "name": "GitHub",
|
||||
"id": "github",
|
||||
"link": "https://github.com/XRPLF/xrpl-dev-portal",
|
||||
"imgclasses": "invertible-img"},
|
||||
{ "name": "Stack Overflow",
|
||||
"id": "stack-overflow",
|
||||
"link": "https://stackoverflow.com/questions/tagged/xrp"},
|
||||
{ "name": "Dev.to",
|
||||
"id": "devto",
|
||||
"link": "#",
|
||||
"imgclasses": "invertible-img"},
|
||||
] %}
|
||||
<div class="row row-cols-2 row-cols-lg-4 card-deck">
|
||||
{% for plat in platforms %}
|
||||
<a class="card mb-10" href="{{plat.link}}">
|
||||
<div class="card-body">
|
||||
<div class="circled-logo"><img id="platform-{{plat.id}}" alt="(logo)" {% if plat.imgclasses %}class="{{plat.imgclasses}}"{% endif %}/></div>
|
||||
<h4 class="card-title h5">{{plat.name}}</h4>
|
||||
</div>
|
||||
<div class="card-footer"> </div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- order-1 order-lg-2 -->
|
||||
<!-- order-2 order-lg-1 -->
|
||||
|
||||
<!-- Contribute -->
|
||||
<section class="container-new py-5" id="run-a-network-node">
|
||||
<div class="card-grid card-grid-2xN">
|
||||
<div class="col pr-2">
|
||||
<img src="./assets/img/community/temp_community_xrp_ledger@2x.png" class="w-100">
|
||||
<div class="col d-sm-none d-lg-block align-self-center">
|
||||
<div class="mt-10 " id="networkNode"></div>
|
||||
</div>
|
||||
|
||||
<div class="col pt-5 pr-2">
|
||||
<div class="d-flex flex-column-reverse mb-8 pl-0 ">
|
||||
<div class="col pt-5">
|
||||
<div class="d-flex flex-column-reverse mb-8 pl-0">
|
||||
<h2 class="h4 h2-sm">{% trans %}Run an XRP Ledger network node{% endtrans %}</h2>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Contribute to Consensus{% endtrans %}</h6>
|
||||
</div>
|
||||
<!-- Grid -->
|
||||
<!-- <div class="pt-2 pt-lg-5 d-flex align-content-stretch flex-wrap flex-column flex-md-row text-cards "> -->
|
||||
<div class="pt-2 pt-lg-5 card-grid card-grid-2xN text-cards ">
|
||||
|
||||
<div class="col d-lg-none d-block">
|
||||
<!-- <img src="./assets/img/community/temp_community_xrp_ledger@2x.png" class="w-100"> -->
|
||||
<div class="mt-10" id="networkNode-small"></div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2 pt-lg-5 card-grid card-grid-2xN text-cards">
|
||||
|
||||
<div class="text-card">
|
||||
<a class="btn-arrow" href="#">About the Server</a>
|
||||
<a class="btn-arrow" href="/the-rippled-server.html">About the Server</a>
|
||||
<p class="mt-3 mb-0">rippled is the core peer-to-peer server that manages the XRP Ledger.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-card">
|
||||
<a class="btn-arrow" href="#">Become a Validator </a>
|
||||
<a class="btn-arrow" href="/run-rippled-as-a-validator.html">Become a Validator </a>
|
||||
<p class="mt-3 mb-0">Join the Unique Node List (UNL) to contribute to consensus on XRPL.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-card">
|
||||
<a class="btn-arrow" href="#">Install & Configure</a>
|
||||
<a class="btn-arrow" href="/install-rippled.html">Install & Configure</a>
|
||||
<p class="mt-3 mb-0">Install, run, and update the rippled server.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-card">
|
||||
<a class="btn-arrow" href="#">Troubleshooting</a>
|
||||
<a class="btn-arrow" href="/troubleshoot-the-rippled-server.html">Troubleshooting</a>
|
||||
<p class="mt-3 mb-0">Troubleshoot any issues you’re having with the rippled server.</p>
|
||||
</div>
|
||||
|
||||
@@ -154,21 +165,40 @@
|
||||
<!-- Grants -->
|
||||
<section class="container-new pt-40 pb-26">
|
||||
<div class="card-grid card-grid-2xN">
|
||||
<div class="col pr-2">
|
||||
<div class="col pr-2">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h2 class="h4 h2-sm">{% trans %}Apply for funding for your next XRPL project{% endtrans %}</h2>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Grants{% endtrans %}</h6>
|
||||
</div>
|
||||
<p class="mb-4">{% trans %}The XRPL Grants program funds select open-source projects that help the growing XRP Ledger community. Wave 3 of XRPL Grants with the theme “Contributing to Open Source” is now open!{% endtrans %}</p>
|
||||
<img src="./assets/img/community/temp_community_grants_logos@2x.png" class="w-100">
|
||||
<p class="mb-lg-3 py-lg-4 pt-4 mb-0">{% trans %}The XRPL Grants program funds select open-source projects that help the growing XRP Ledger community. Wave 3 of XRPL Grants with the theme “Contributing to Open Source” is now open!{% endtrans %}</p>
|
||||
|
||||
<div class="d-lg-block d-none">
|
||||
<!-- <img src="./assets/img/community/temp_community_grants_logos@2x.png" class="w-100 mb-4 pb-3"> -->
|
||||
|
||||
<div class="d-lg-block mt-4">
|
||||
<div class="mb-4 pb-3" id="xrplGrantsDark"></div>
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="https://xrplgrants.org/">{% trans %}Apply for a Grant{% endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col order-1 order-lg-2 pt-5 pr-2">
|
||||
<img src="./assets/img/community/temp_community_stats@2x.png" class="w-100">
|
||||
<div class="col">
|
||||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<h6 class="eyebrow mb-2">{% trans %}Awarded in single grant{% endtrans %}</h6>
|
||||
<img src="./assets/img/community/community-grants-1.svg" class=" ">
|
||||
</div>
|
||||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<h6 class="eyebrow mb-2">{% trans %}Distributed to grant recipients{% endtrans %}</h6>
|
||||
<img src="./assets/img/community/community-grants-2.svg" class="">
|
||||
</div>
|
||||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<h6 class="eyebrow mb-2">{% trans %}Open-source projects funded {% endtrans %}</h6>
|
||||
<img src="./assets/img/community/community-grants-3.svg" class="">
|
||||
</div>
|
||||
|
||||
<div class="d-lg-none d-block mt-4 pt-3">
|
||||
<!-- <img src="./assets/img/community/temp_community_grants_logos@2x.png" class="w-100 mb-4 pb-3"> -->
|
||||
<div class="mb-4 pb-3" id="xrplGrantsDark-small"></div>
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="https://xrplgrants.org/">{% trans %}Apply for a Grant{% endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -177,19 +207,55 @@
|
||||
|
||||
<!-- Events -->
|
||||
<section class="container-new py-26">
|
||||
<div class="event-hero card-grid card-grid-2xN">
|
||||
<div class="card-grid card-grid-2xN ">
|
||||
|
||||
<div class="col pr-2">
|
||||
<img src="./assets/img/community/temp_community_types_of_events@2x.png" class="w-100">
|
||||
<div class="col pr-2 d-lg-block d-none ">
|
||||
<!-- Large. 3 image in col -->
|
||||
|
||||
<div class="d-flex flex-row h-100">
|
||||
<div class=" pr-1 mr-3 align-self-start">
|
||||
<img src="./assets/img/community/community-events-apex-small@2x.png" class="w-100">
|
||||
<p class="bold text-light mt-3">{% trans %}Welcome to Apex 2021{% endtrans %}</p>
|
||||
</div>
|
||||
<div class=" px-1 mx-3 align-self-center">
|
||||
<img src="./assets/img/community/community-events-meetup-small@2x.png" class="w-100">
|
||||
<p class="bold text-light mt-3">{% trans %}XRPL Community Meetup{% endtrans %}</p>
|
||||
</div>
|
||||
<div class=" pl-1 ml-3 align-self-end">
|
||||
<img src="./assets/img/community/community-events-hackathon-small@2x.png" class="w-100">
|
||||
<p class="bold text-light mt-3">{% trans %}XRPL Hackathon 2022{% endtrans %}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col pt-5 pr-2">
|
||||
<div class="d-flex flex-column-reverse mb-lg-4 pl-0 ">
|
||||
<div class="col pt-5">
|
||||
<div class="d-flex flex-column-reverse mb-lg-2 pl-0">
|
||||
<h2 class="h4 h2-sm">{% trans %}Check out global events hosted by the XRPL community {% endtrans %}</h2>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Events{% endtrans %}</h6>
|
||||
</div>
|
||||
<p class="mb-4">{% trans %}Meet the XRPL community at meetups, hackathons, conferences like Apex, and more, across global regions.{% endtrans %}</p>
|
||||
<div class="d-lg-block">
|
||||
<p class="mb-3 py-4">{% trans %}Meet the XRPL community at meetups, hackathons, conferences like Apex, and more, across global regions.{% endtrans %}</p>
|
||||
|
||||
<!-- Mobile. 3 inline images. -->
|
||||
<div class="col pr-2 d-lg-none d-block">
|
||||
|
||||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<img src="./assets/img/community/community-events-apex@2x.png" class="w-100">
|
||||
<h6 class="mt-3">{% trans %}Welcome to Apex 2021{% endtrans %}</h6>
|
||||
</div>
|
||||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<img src="./assets/img/community/community-events-meetup@2x.png" class="w-100">
|
||||
<h6 class="mt-3">{% trans %}XRPL Community Meetup{% endtrans %}</h6>
|
||||
</div>
|
||||
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
|
||||
<img src="./assets/img/community/community-events-hackathon@2x.png" class="w-100">
|
||||
<h6 class="mt-3">{% trans %}XRPL Hackathon 2022{% endtrans %}</h6>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <img src="./assets/img/community/temp_community_types_of_events@2x.png" class="w-100"> -->
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="/events.html">{% trans %}View All Events{% endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -239,20 +305,27 @@
|
||||
|
||||
<!-- Careers -->
|
||||
<section class="container-new py-26">
|
||||
<div class="event-hero card-grid card-grid-2xN">
|
||||
<div class="card-grid card-grid-2xN">
|
||||
|
||||
<div class="col pr-2">
|
||||
<img src="./assets/img/community/temp_community_open_roles@2x.png" class="w-100">
|
||||
|
||||
<div class="col pr-2 d-lg-block d-none">
|
||||
<!-- <img src="./assets/img/community/temp_community_open_roles@2x.png" class="w-100"> -->
|
||||
<div class="mb-4 pb-3" id="careersDark"></div>
|
||||
</div>
|
||||
|
||||
<div class="col pt-5 pr-2">
|
||||
<div class="d-flex flex-column-reverse mb-lg-4 pl-0 ">
|
||||
<div class="col pt-5">
|
||||
<div class="d-flex flex-column-reverse mb-lg-2 pl-0">
|
||||
<h2 class="h4 h2-sm">{% trans %}Discover your next career opportunity with XRPL{% endtrans %}</h2>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Careers{% endtrans %}</h6>
|
||||
</div>
|
||||
<p class="mb-4">{% trans %}Teams across the XRPL community are looking for talented individuals to help build their next innovation.{% endtrans %}</p>
|
||||
<p class="mb-3 py-4">{% trans %}Teams across the XRPL community are looking for talented individuals to help build their next innovation.{% endtrans %}</p>
|
||||
|
||||
<div class="d-lg-none d-block">
|
||||
<!-- <img src="./assets/img/community/temp_community_open_roles@2x.png" class="w-100"> -->
|
||||
<div class="mb-4 pb-3" id="careersDark-small"></div>
|
||||
</div>
|
||||
<div class="d-lg-block">
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="/events.html">{% trans %}View Open Roles{% endtrans %}</a>
|
||||
<a class="btn btn-primary btn-arrow" target="_blank" href="https://jobs.xrpl.org/jobs">{% trans %}View Open Roles{% endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -277,6 +350,102 @@
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block endbody %}
|
||||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/bodymovin.min.js"></script>
|
||||
|
||||
<!-- contribute -->
|
||||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/community/network-node-dark.json"></script>
|
||||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/community/XRPL-grants-dark.json"></script>
|
||||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/community/careers-dark.json"></script>
|
||||
|
||||
|
||||
|
||||
<!-- <div class="mt-10" id="networkNode"></div> -->
|
||||
|
||||
<script type="text/javascript">
|
||||
function networkNodeAnimation(){
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('networkNode'),
|
||||
renderer: 'svg',
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
animationData: networkNodeDark
|
||||
});
|
||||
};
|
||||
|
||||
function networkNodeSmallAnimation(){
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('networkNode-small'),
|
||||
renderer: 'svg',
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
animationData: networkNodeDark
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
function xrplGrantsAnimation(){
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('xrplGrantsDark'),
|
||||
renderer: 'svg',
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
animationData: xrplGrantsDark
|
||||
});
|
||||
};
|
||||
|
||||
function xrplGrantsSmallAnimation(){
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('xrplGrantsDark-small'),
|
||||
renderer: 'svg',
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
animationData: xrplGrantsDark
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function careersAnimation(){
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('careersDark'),
|
||||
renderer: 'svg',
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
animationData: careersDark
|
||||
});
|
||||
};
|
||||
|
||||
function careersSmallAnimation(){
|
||||
bodymovin.loadAnimation({
|
||||
container: document.getElementById('careersDark-small'),
|
||||
renderer: 'svg',
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
animationData: careersDark
|
||||
});
|
||||
};
|
||||
|
||||
careersAnimation();
|
||||
careersSmallAnimation();
|
||||
|
||||
|
||||
xrplGrantsAnimation();
|
||||
xrplGrantsSmallAnimation();
|
||||
|
||||
|
||||
networkNodeSmallAnimation();
|
||||
networkNodeAnimation();
|
||||
|
||||
</script>
|
||||
|
||||
<!-- <div class="mt-10" id="networkNode"></div> -->
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block analytics %}
|
||||
<script type="application/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
Reference in New Issue
Block a user