lovely-projects/simplex-chat
lovely-projects/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2025-03-14 09:45:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

website: simplex explained graphics animation (#2713)

Browse source 
* website: animate simplex explained graphics

* website: update simplex network animation

* website: add lottie.min.js through node_modules

* website: update lottie.min.js copy command location
This commit is contained in:
M. Sarmad Qadeer 2023-07-29 18:20:51 +05:00 • committed by GitHub
parent 18c802159b
commit f69c842ba6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 52 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -53,6 +53,7 @@ website/src/docs/
website/translations.json
website/src/img/images/
website/src/images/
website/src/js/lottie.min.js
# Generated files
website/package/generated*

1
website/.eleventy.js
View file

@ -238,6 +238,7 @@ module.exports = function (ty) {
ty.addPassthroughCopy("src/video")
ty.addPassthroughCopy("src/css")
ty.addPassthroughCopy("src/js")
ty.addPassthroughCopy("src/lottie_file")
ty.addPassthroughCopy("src/contact/*.js")
ty.addPassthroughCopy("src/call")
ty.addPassthroughCopy("src/hero-phone")

1
website/package.json
View file

@ -32,6 +32,7 @@
"fs": "^0.0.1-security",
"gray-matter": "^4.0.3",
"jsdom": "^22.1.0",
"lottie-web": "5.12.2",
"markdown-it": "^13.0.1"
}
}

50
website/src/_includes/simplex_explained.html
View file

@ -34,6 +34,8 @@
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
</div>
<div class="simplex-explained-lottie h-[340px] mb-[74px] hidden md:block"></div>
<!-- Tab content -->
<div class="swiper simplex-explained-swiper">
<div class="swiper-wrapper h-[inherit] mb-20 md:mb-0">
@ -41,7 +43,7 @@
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-1-text" | i18n({}, lang ) | safe }}</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] mb-[74px]" src="/img/new/explained-1.svg" alt="" />
<img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-1.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center">
{{ "simplex-explained-tab-1-p-1" | i18n({}, lang ) | safe }}
</p>
@ -54,7 +56,7 @@
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-2-text" | i18n({}, lang ) | safe }}</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] mb-[74px]" src="/img/new/explained-2.svg" alt="" />
<img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-2.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center">
{{ "simplex-explained-tab-2-p-1" | i18n({}, lang ) | safe }}
</p>
@ -67,7 +69,7 @@
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] mb-[74px]" src="/img/new/explained-3.svg" alt="" />
<img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-3.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center">
{{ "simplex-explained-tab-3-p-1" | i18n({}, lang ) | safe }}
</p>
@ -83,17 +85,59 @@
</div>
</section>
<script src="/js/lottie.min.js"></script>
<script>
window.addEventListener("load", function () {
const simplexExplainedSwiper__bullets = document.querySelectorAll(".simplex-explained-swiper .swiper-pagination > span");
const simplexExplainedSwiper__tabs = document.querySelectorAll("#simplex-explained .tabs .tab-button");
const simplexExplainedLottie = document.querySelector('.simplex-explained-lottie');
const simplexExplainedLottieAnimation = lottie.loadAnimation({
container: simplexExplainedLottie,
renderer: 'svg',
loop: false,
autoplay: false,
path: '/lottie_file/SimpleXExplainedLottie.json'
})
let targetFrame = null;
function animateToTarget() {
if (targetFrame !== null) {
const currentFrame = Math.round(simplexExplainedLottieAnimation.currentRawFrame);
if (currentFrame !== targetFrame) {
const direction = currentFrame < targetFrame ? 1 : -1;
simplexExplainedLottieAnimation.goToAndStop(currentFrame + direction, true);
setTimeout(animateToTarget, 22); // Add delay here
}
}
}
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === "attributes" && mutation.attributeName === "class" && mutation.target.classList.contains("swiper-pagination")) {
simplexExplainedSwiper__bullets.forEach((el,index) => {
if (el.classList.contains("swiper-pagination-bullet-active")) {
simplexExplainedSwiper__tabs[index].classList.add("active");
const currentFrame = Math.round(simplexExplainedLottieAnimation.currentRawFrame);
if(index === 0){
if (currentFrame > 0) {
targetFrame = 0;
animateToTarget();
}
}else if(index === 1){
if (currentFrame !== 35) {
targetFrame = 35;
animateToTarget();
}
}else if(index === 2){
if (currentFrame < 68) {
targetFrame = 68;
animateToTarget();
}
}
} else {
simplexExplainedSwiper__tabs[index].classList.remove("active");
}

1
website/src/lottie_file/SimpleXExplainedLottie.json Normal file
View file

File diff suppressed because one or more lines are too long

1
website/web.sh
View file

@ -22,6 +22,7 @@ for file in langs/*.json; do
done
npm install
cp node_modules/lottie-web/build/player/lottie.min.js src/js
node merge_translations.js
node customize_docs_frontmatter.js