dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-05-24 23:55:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

deploy: f69c842ba6

Browse Source
This commit is contained in:
epoberezkin
2023-07-29 13:22:10 +00:00
parent 02420e7642
commit de98110877
19 changed files with 771 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ar/index.html
+47 -3
View File
@@ -1731,6 +1731,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. ما الذي تراة الخوادم</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">
@@ -1738,7 +1740,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. تجربة المستخدم</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">
يمكنك إنشاء جهات اتصال ومجموعات وإجراء محادثات ثنائية الاتجاه، كما هو الحال في أي برنامج مراسلة آخر.
</p>
@@ -1751,7 +1753,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. كيف يعمل</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">
لكل اتصال، تستخدم قائمتي انتظار منفصلتين للمراسلة لإرسال واستقبال الرسائل عبر خوادم مختلفة.
</p>
@@ -1764,7 +1766,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. ما الذي تراة الخوادم</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">
تحتوي الخوادم على بيانات اعتماد مجهولة منفصلة لكل قائمة انتظار، ولا تعرف المستخدمين الذين ينتمون إليهم.
</p>
@@ -1780,17 +1782,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
cs/index.html
+47 -3
View File
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. Co vidí servery</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. Co vidí uživatel</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">
Můžete vytvářet kontakty a skupiny a vést obousměrné konverzace, stejně jako v jakémkoli jiném messengeru.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. Jak to funguje</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">
Pro každé připojení používáte dvě samostatné fronty zasílání zpráv k odesílání a přijímání zpráv prostřednictvím různých serverů.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. Co vidí servery</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">
Servery mají samostatné anonymní přihlašovací údaje pro každou frontu a nevědí, ke kterým uživatelům patří.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
css/tailwind.css
+12
View File
@@ -658,6 +658,10 @@ video {
float: right;
}
.m-1 {
margin: 0.25rem;
}
.m-auto {
margin: auto;
}
@@ -864,6 +868,10 @@ video {
margin-top: 66px;
}
.mt-\[74px\] {
margin-top: 74px;
}
.mt-\[8px\] {
margin-top: 8px;
}
@@ -900,6 +908,10 @@ video {
display: none;
}
.h-1 {
height: 0.25rem;
}
.h-11 {
height: 2.75rem;
}
de/index.html
+47 -3
View File
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. Was die Server sehen</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. Wie es die Nutzer erleben</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">
Sie können Kontakte und Gruppen erstellen und haben Zwei-Wege-Kommunikation wie in jedem anderen Messenger.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. Wie funktioniert es</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">
Für jede Verbindung nutzen Sie zwei separate Nachrichten-Warteschlangen, um die Nachrichten über verschiedene Server zu senden und zu empfangen.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. Was die Server sehen</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">
Die Server nutzen für jede Warteschlange separate, anonyme Anmeldeinformationen und wissen nicht welchem Nutzer diese gehören.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
en/index.html
+48 -4
View File
@@ -605,7 +605,7 @@ window.addEventListener('scroll',changeHeaderBg);
Many users asked: <em>if SimpleX has no user identifiers, how can it know where to deliver messages?</em>
</p>
<p>
To deliver messages, instead of user IDs used by all other platforms, SimpleX uses temporary anonymous pairwise identifiers of message queues, separate for each of your connections — there are no long term identifiers.
To deliver mesages, instead of user IDs used by all other platforms, SimpleX uses temporary anonymous pairwise identifiers of message queues, separate for each of your connections — there are no long term identifiers.
</p>
<p>
You define which server(s) to use to receive the messages, your contacts — the servers you use to send the messages to them. Every conversation is likely to use two different servers.
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. What servers see</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. What users experience</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">
You can create contacts and groups, and have two-way conversations, as in any other messenger.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. How does it work</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">
For each connection you use two separate messaging queues to send and receive messages via different servers.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. What servers see</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">
The servers have separate <span data-glossary="tooltip-anonymous-credentials" class="glossary-term">Anonymous credentials</span> for each queue, and do not know which users they belong to.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
es/index.html
+47 -3
View File
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. Qué ven los servidores</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. Experiencia del usuario</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">
Puedes crear contactos y grupos, y mantener conversaciones bidireccionales como en cualquier aplicación de mensajería.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. Cómo funciona la red</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">
Por cada conexión se usan dos colas de mensajes separadas para que el envío y recepción se hagan a través de servidores diferentes.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. Qué ven los servidores</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">
Para cada cola los servidores disponen de credenciales separadas y anónimas, por lo que desconocen a qué usuarios pertenecen.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
fr/index.html
+47 -3
View File
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. Ce que voient les serveurs</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. L'expérience des utilisateurs</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">
Vous pouvez créer des contacts et des groupes, et avoir des conversations bidirectionnelles, comme dans n'importe quelle autre messagerie.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. Comment ça marche</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">
Pour chaque connexion, vous utilisez deux files d'attente de messages distinctes pour envoyer et recevoir des messages via des serveurs différents.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. Ce que voient les serveurs</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">
Les serveurs disposent d'identifiants anonymes distincts pour chaque file d'attente, et ne savent pas à quels utilisateurs ils appartiennent.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
index.html
+48 -4
View File
@@ -605,7 +605,7 @@ window.addEventListener('scroll',changeHeaderBg);
Many users asked: <em>if SimpleX has no user identifiers, how can it know where to deliver messages?</em>
</p>
<p>
To deliver messages, instead of user IDs used by all other platforms, SimpleX uses temporary anonymous pairwise identifiers of message queues, separate for each of your connections — there are no long term identifiers.
To deliver mesages, instead of user IDs used by all other platforms, SimpleX uses temporary anonymous pairwise identifiers of message queues, separate for each of your connections — there are no long term identifiers.
</p>
<p>
You define which server(s) to use to receive the messages, your contacts — the servers you use to send the messages to them. Every conversation is likely to use two different servers.
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. What servers see</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. What users experience</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">
You can create contacts and groups, and have two-way conversations, as in any other messenger.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. How does it work</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">
For each connection you use two separate messaging queues to send and receive messages via different servers.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. What servers see</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">
The servers have separate <span data-glossary="tooltip-anonymous-credentials" class="glossary-term">Anonymous credentials</span> for each queue, and do not know which users they belong to.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
it/index.html
+47 -3
View File
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. Cosa vedono i server</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. Cosa fanno gli utenti</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">
Puoi creare contatti e gruppi, ed avere conversazioni bidirezionali, come in qualsiasi altro messenger.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. Come funziona</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">
Per ogni connessione usi due code di messaggi distinte per inviare e ricevere i messaggi attraverso server diversi.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. Cosa vedono i server</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">
I server hanno credenziali anonime separate per ogni coda e non sanno a quali utenti appartengano.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
ja/index.html
+48 -4
View File
@@ -597,7 +597,7 @@ window.addEventListener('scroll',changeHeaderBg);
Many users asked: <em>if SimpleX has no user identifiers, how can it know where to deliver messages?</em>
</p>
<p>
To deliver messages, instead of user IDs used by all other platforms, SimpleX uses temporary anonymous pairwise identifiers of message queues, separate for each of your connections — there are no long term identifiers.
To deliver mesages, instead of user IDs used by all other platforms, SimpleX uses temporary anonymous pairwise identifiers of message queues, separate for each of your connections — there are no long term identifiers.
</p>
<p>
You define which server(s) to use to receive the messages, your contacts — the servers you use to send the messages to them. Every conversation is likely to use two different servers.
@@ -1721,6 +1721,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. What servers see</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">
@@ -1728,7 +1730,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. What users experience</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">
You can create contacts and groups, and have two-way conversations, as in any other messenger.
</p>
@@ -1741,7 +1743,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. How does it work</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">
For each connection you use two separate messaging queues to send and receive messages via different servers.
</p>
@@ -1754,7 +1756,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. What servers see</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">
The servers have separate <span data-glossary="tooltip-anonymous-credentials" class="glossary-term">Anonymous credentials</span> for each queue, and do not know which users they belong to.
</p>
@@ -1770,17 +1772,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
js/lottie.min.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
lottie_file/SimpleXExplainedLottie.json
+1
View File
File diff suppressed because one or more lines are too long
nl/index.html
+47 -3
View File
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. Wat servers zien</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. Wat gebruikers ervaren</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">
U kunt contacten en groepen maken en tweerichtings gesprekken voeren, zoals in elke andere messenger.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. Hoe werkt het</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">
Voor elke verbinding gebruikt u twee afzonderlijke berichten wachtrijen om berichten via verschillende servers te verzenden en te ontvangen.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. Wat servers zien</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">
De servers hebben afzonderlijke anonieme inloggegevens voor elke wachtrij en weten niet tot welke gebruikers ze behoren.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
pl/index.html
+47 -3
View File
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. Co widzą serwery</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. Jakie są doświadczenia użytkowników</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">
Można tworzyć kontakty i grupy oraz prowadzić dwukierunkowe rozmowy, jak w każdym innym komunikatorze.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. Jak to działa</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">
Dla każdego połączenia używasz dwóch oddzielnych kolejek z wiadomościami do wysyłania i odbierania wiadomości przez różne serwery.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. Co widzą serwery</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">
Serwery mają osobne anonimowe poświadczenia dla każdej kolejki i nie wiedzą do jakich użytkowników one należą.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
pt_BR/index.html
+47 -3
View File
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. O que os servidores veem</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. O que os usuários experimentam</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">
Você pode criar contatos e grupos e ter conversas bidirecionais, como em qualquer outro mensageiro.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. Como funciona</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">
Para cada conexão, são usadas duas filas de mensagens separadas para enviar e receber mensagens por meio de servidores diferentes.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. O que os servidores veem</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">
Os servidores têm credenciais anônimas separadas para cada envio e não sabem a que usuários elas pertencem.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
ru/index.html
+48 -4
View File
@@ -605,7 +605,7 @@ window.addEventListener('scroll',changeHeaderBg);
Many users asked: <em>if SimpleX has no user identifiers, how can it know where to deliver messages?</em>
</p>
<p>
To deliver messages, instead of user IDs used by all other platforms, SimpleX uses temporary anonymous pairwise identifiers of message queues, separate for each of your connections — there are no long term identifiers.
To deliver mesages, instead of user IDs used by all other platforms, SimpleX uses temporary anonymous pairwise identifiers of message queues, separate for each of your connections — there are no long term identifiers.
</p>
<p>
You define which server(s) to use to receive the messages, your contacts — the servers you use to send the messages to them. Every conversation is likely to use two different servers.
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. What servers see</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. What users experience</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">
You can create contacts and groups, and have two-way conversations, as in any other messenger.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. How does it work</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">
For each connection you use two separate messaging queues to send and receive messages via different servers.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. What servers see</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">
The servers have separate <span data-glossary="tooltip-anonymous-credentials" class="glossary-term">Anonymous credentials</span> for each queue, and do not know which users they belong to.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
uk/index.html
+47 -3
View File
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. Що бачать сервери</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. Що відчувають користувачі</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">
Ви можете створювати контакти та групи, а також вести двосторонні розмови, як і в будь-якому іншому месенджері.
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. Як це працює</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">
Для кожного підключення використовуються дві окремі черги обміну повідомленнями для надсилання та отримання повідомлень через різні сервери.
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. Що бачать сервери</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">
Сервери мають окремі анонімні облікові дані для кожної черги і не знають, яким користувачам вони належать.
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
zh_Hans/index.html
+47 -3
View File
@@ -1729,6 +1729,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. 服务器能看到什么</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">
@@ -1736,7 +1738,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. 用户会体验到什么</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">
您可以创建联系人和群组，并进行双向对话，就像是任何其他即时通讯软件一样。
</p>
@@ -1749,7 +1751,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. 背后的运作原理</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">
对于每个连接，您都会使用两个单独的消息队列，通过不同的服务器发送和接收消息。
</p>
@@ -1762,7 +1764,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. 服务器能看到什么</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">
服务器对每个队列都有单独的匿名凭证，并且不知道这些凭证属于哪些用户。
</p>
@@ -1778,17 +1780,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}
zh_Hant/index.html
+48 -4
View File
@@ -597,7 +597,7 @@ window.addEventListener('scroll',changeHeaderBg);
Many users asked: <em>if SimpleX has no user identifiers, how can it know where to deliver messages?</em>
</p>
<p>
To deliver messages, instead of user IDs used by all other platforms, SimpleX uses temporary anonymous pairwise identifiers of message queues, separate for each of your connections — there are no long term identifiers.
To deliver mesages, instead of user IDs used by all other platforms, SimpleX uses temporary anonymous pairwise identifiers of message queues, separate for each of your connections — there are no long term identifiers.
</p>
<p>
You define which server(s) to use to receive the messages, your contacts — the servers you use to send the messages to them. Every conversation is likely to use two different servers.
@@ -1721,6 +1721,8 @@ window.addEventListener('scroll',changeHeaderBg);
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. What servers see</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">
@@ -1728,7 +1730,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. What users experience</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">
You can create contacts and groups, and have two-way conversations, as in any other messenger.
</p>
@@ -1741,7 +1743,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. How does it work</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">
For each connection you use two separate messaging queues to send and receive messages via different servers.
</p>
@@ -1754,7 +1756,7 @@ window.addEventListener('scroll',changeHeaderBg);
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. What servers see</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">
The servers have separate <span data-glossary="tooltip-anonymous-credentials" class="glossary-term">Anonymous credentials</span> for each queue, and do not know which users they belong to.
</p>
@@ -1770,17 +1772,59 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
}