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

Add map animations

Browse Source
This commit is contained in:
Jake
2023-02-20 16:58:39 -07:00
parent 1eb1b517dd
commit bd42f92de3
8 changed files with 117 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2022-v14.css
View File

File diff suppressed because one or more lines are too long

1
assets/js/impact/map-animation-dark-small.json Executable file
View File

File diff suppressed because one or more lines are too long

1
assets/js/impact/map-animation-dark.json Executable file
View File

File diff suppressed because one or more lines are too long

1
assets/js/impact/map-animation-light-small.json Executable file
View File

File diff suppressed because one or more lines are too long

1
assets/js/impact/map-animation-light.json Executable file
View File

File diff suppressed because one or more lines are too long

9
styles/_pages.scss
View File

@@ -454,6 +454,15 @@
.page-impact {
#map-light,
#map-light-small {
display: none;
}
#map-dark,
#map-dark-small {
display: block;
}
.connect-list {
@each $connect in "connect-01", "connect-02", "connect-03", "connect-04" {
##{$connect} {

9
styles/light/_light-theme.scss
View File

@@ -998,6 +998,15 @@ $placeholder-color: $gray-600;
}
}
#map-light,
#map-light-small {
display: block;
}
#map-dark,
#map-dark-small {
display: none;
}
}

106
template/page-impact.html.jinja
View File

@@ -8,6 +8,9 @@
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Play videos from youtube -->
<script src="{{currentpage.prefix}}assets/js/video.js"></script>
{% endblock %}
{% block bodyclasses %}no-sidebar{% endblock %}
@@ -18,7 +21,7 @@
{% block main %}
<div class="overflow-hidden">
<div class="position-relative">
<div class="position-relative d-none-sm">
<img src="./img/backgrounds/community-purple.svg" class="landing-bg" id="impact-purple">
</div>
@@ -38,7 +41,7 @@
<!-- World map -->
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-10-until-sm pl-0-sm pr-0-sm">
<div class="col-sm-10 col-lg-6 offset-md-3 p-10-until-sm pl-0-sm pr-0-sm">
<h6 class="eyebrow mb-3">Building for the Future</h6>
<h2 class="h4 h2-sm mb-8">{% trans %}Consensus protocol is efficient and sustainable{% endtrans %}</h2>
@@ -48,10 +51,19 @@
<p class="mb-0">{% trans %}With usage growing, it’s critical that measures are taken today to ensure that the technology is environmentally sustainable tomorrow.{% endtrans %}</p>
</div>
<div class="">
<img src="./assets/img/impact/world_map@2x.png" class="w-100">
<div>
<!-- Large -->
<div class="col d-none d-lg-block align-self-center">
<div class="mt-10" id="map-dark"></div>
<div class="mt-10" id="map-light"></div>
</div>
<!-- Small -->
<div class="col d-lg-none d-block">
<div class="mt-10" id="map-dark-small"></div>
<div class="mt-10" id="map-light-small"></div>
</div>
</div>
</section>
<!-- Video sidebar -->
@@ -59,7 +71,7 @@
<div class="mt-10 card-grid card-grid-2xN">
<div class="col">
<iframe id="video1" style="display:none;" width="560" height="315" src="https://www.youtube.com/embed/sVTybJ3cNyo" title="What makes the XRPL sustainable?" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="video1" style="display:none;" width="560" height="315" src="https://www.youtube.com/embed/WsmldDNGQ9s" title="What makes the XRPL sustainable?" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<a href="#" id="playvideo">
<img src="./assets/img/impact/video_sustainable@2x.png" id="xrpl-overview-video-intro" class="w-100 video-image">
</a>
@@ -87,8 +99,7 @@
<h6 class="eyebrow mb-3">{% trans %}Sustainable Projects{% endtrans %}</h6>
</div>
<p class="mb-10">{% trans %}Learn more about companies and developers who are using the XRP Ledger to solve interesting problems efficiently and sustainably.{% endtrans %}</p>
<!-- // TODO: Need link -->
<a class="btn btn-primary btn-arrow" href="#" target="_blank">{% trans %}See More{% endtrans %}</a>
<a class="btn btn-primary btn-arrow" href="/">{% trans %}See More{% endtrans %}</a>
</div>
</div>
</section>
@@ -104,9 +115,8 @@
</div>
<p class="py-lg-3 mb-2 longform" style="max-width: 520px;">{% trans %}If sustainability, security and decentralization are important to you, you’re invited to join the XRPL community in its quest to build a better world. Here are some ways to get involved:{% endtrans %}</p>
<!-- // TODO: Need link -->
<div class="d-none d-lg-block py-lg-3">
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Join the Community{% endtrans %}</a>
<a class="btn btn-primary btn-arrow" href="/contribute.html">{% trans %}Join the Community{% endtrans %}</a>
</div>
</div>
@@ -118,7 +128,7 @@
<img id="connect-01" src="data:," />
<div class="pt-3">
<h6 class="mb-3">Blog</h6>
<p>Check out the <a href=#>XRPL dev blog</a> to stay up-to-date on the latest innovations and developments in the XRPL community.</p>
<p>Check out the <a href="https://xrpl.org/blog/">XRPL dev blog</a> to stay up-to-date on the latest innovations and developments in the XRPL community.</p>
</div>
</div>
<!-- Hide on large -->
@@ -126,14 +136,14 @@
<img id="connect-02" src="data:," />
<div class="pt-3">
<h6 class="mb-3">Events</h6>
<p>Attend <a href=#>meetups, hackathons, and conferences</a> to meet other members of the community.</p>
<p>Attend <a href="/events.html">meetups, hackathons, and conferences</a> to meet other members of the community.</p>
</div>
</div>
<div class="px-lg-3 pb-3 pt-lg-5">
<img id="connect-03" src="data:," />
<div class="pt-3">
<h6 class="mb-3">Code</h6>
<p>View the <a href=#>Github repositories</a> to find projects to see how you can contribute.</p>
<p>View the <a href="https://github.com/XRPLF/xrpl-dev-portal/" target="_blank">Github repositories</a> to find projects to see how you can contribute.</p>
</div>
</div>
<!-- Hide on large -->
@@ -154,7 +164,7 @@
<img id="connect-02" src="data:," />
<div class="pt-3">
<h6 class="mb-3">Events</h6>
<p>Attend <a href=#>meetups, hackathons, and conferences</a> to meet other members of the community.</p>
<p>Attend <a href="/events.html">meetups, hackathons, and conferences</a> to meet other members of the community.</p>
</div>
</div>
</div>
@@ -171,7 +181,7 @@
</div>
<div class="d-lg-none order-3 mt-4 pt-3">
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Join the Community{% endtrans %}</a>
<a class="btn btn-primary btn-arrow" target="_blank" href="/contribute.html">{% trans %}Join the Community{% endtrans %}</a>
</div>
</div>
</section>
@@ -180,6 +190,74 @@
{% endblock %}
{% block endbody %}
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/bodymovin.min.js"></script>
<!-- Light -->
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/impact/map-animation-light.json"></script>
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/impact/map-animation-light-small.json"></script>
<!-- Dark -->
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/impact/map-animation-dark.json"></script>
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/impact/map-animation-dark-small.json"></script>
<script type="text/javascript">
//Light
function mapLightAnimation(){
bodymovin.loadAnimation({
container: document.getElementById('map-light'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: mapLight
});
};
function mapLightSmallAnimation(){
bodymovin.loadAnimation({
container: document.getElementById('map-light-small'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: mapLightSmall
});
};
mapLightSmallAnimation();
mapLightAnimation();
//Dark
function mapDarkAnimation(){
bodymovin.loadAnimation({
container: document.getElementById('map-dark'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: mapDark
});
};
function mapDarkSmallAnimation(){
bodymovin.loadAnimation({
container: document.getElementById('map-dark-small'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: mapDarkSmall
});
};
mapDarkSmallAnimation();
mapDarkAnimation();
</script>
{% endblock %}
{% block analytics %}
<script type="application/javascript">
window.dataLayer = window.dataLayer || [];