mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-11-04 10:47:32 +00:00
deploy: f69c842ba6
This commit is contained in:
epoberezkin committed
1 parent
02420e7642
commit
de98110877
19 files changed
+771
-53
No files matched your search
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
+48
-4
@@ -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");
|
||||
}
|
||||
|
||||
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
+48
-4
@@ -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");
|
||||
}
|
||||
|
||||
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
+48
-4
@@ -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");
|
||||
}
|
||||
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
"undefined"!=typeof navigator&&function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lottie=e()}(this,(function(){"use strict";var svgNS="http://www.w3.org/2000/svg",locationHref="",_useWebWorker=!1,initialDefaultFrame=-999999,setWebWorker=function(t){_useWebWorker=!!t},getWebWorker=function(){return _useWebWorker},setLocationHref=function(t){locationHref=t},getLocationHref=function(){return locationHref};function createTag(t){return document.createElement(t)}function extendPrototype(t,e){var i,r,s=t.length;for(i=0;i<s;i+=1)for(var a in r=t[i].prototype)Object.prototype.hasOwnProperty.call(r,a)&&(e.prototype[a]=r[a])}function getDescriptor(t,e){return Object.getOwnPropertyDescriptor(t,e)}function createProxyFunction(t){function e(){}return e.prototype=t,e}var audioControllerFactory=function(){function t(t){this.audios=[],this.audioFactory=t,this._volume=1,this._isMuted=!1}return t.prototype={addAudio:function(t){this.audios.push(t)},pause:function(){var t,e=this.audios.length;for(t=0;t<e;t+=1)this.audios[t].pause()},resume:function(){var t,e=this.audios.length;for(t=0;t<e;t+=1)this.audios[t].resume()},setRate:function(t){var e,i=this.audios.length;for(e=0;e<i;e+=1)this.audios[e].setRate(t)},createAudio:function(t){return this.audioFactory?this.audioFactory(t):window.Howl?new window.Howl({src:[t]}):{isPlaying:!1,play:function(){this.isPlaying=!0},seek:function(){this.isPlaying=!1},playing:function(){},rate:function(){},setVolume:function(){}}},setAudioFactory:function(t){this.audioFactory=t},setVolume:function(t){this._volume=t,this._updateVolume()},mute:function(){this._isMuted=!0,this._updateVolume()},unmute:function(){this._isMuted=!1,this._updateVolume()},getVolume:function(){return this._volume},_updateVolume:function(){var t,e=this.audios.length;for(t=0;t<e;t+=1)this.audios[t].volume(this._volume*(this._isMuted?0:1))}},function(){return new t}}(),createTypedArray=function(){function t(t,e){var i,r=0,s=[];switch(t){case"int16":case"uint8c":i=1;break;default:i=1.1}for(r=0;r<e;r+=1)s.push(i);return s}return"function"==typeof Uint8ClampedArray&&"function"==typeof Float32Array?function(e,i){return"float32"===e?new Float32Array(i):"int16"===e?new Int16Array(i):"uint8c"===e?new Uint8ClampedArray(i):t(e,i)}:t}();function createSizedArray(t){return Array.apply(null,{length:t})}function _typeof$6(t){return _typeof$6="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},_typeof$6(t)}var subframeEnabled=!0,expressionsPlugin=null,expressionsInterfaces=null,idPrefix$1="",isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),_shouldRoundValues=!1,bmPow=Math.pow,bmSqrt=Math.sqrt,bmFloor=Math.floor,bmMax=Math.max,bmMin=Math.min,BMMath={};function ProjectInterface$1(){return{}}!function(){var t,e=["abs","acos","acosh","asin","asinh","atan","atanh","atan2","ceil","cbrt","expm1","clz32","cos","cosh","exp","floor","fround","hypot","imul","log","log1p","log2","log10","max","min","pow","random","round","sign","sin","sinh","sqrt","tan","tanh","trunc","E","LN10","LN2","LOG10E","LOG2E","PI","SQRT1_2","SQRT2"],i=e.length;for(t=0;t<i;t+=1)BMMath[e[t]]=Math[e[t]]}(),BMMath.random=Math.random,BMMath.abs=function(t){if("object"===_typeof$6(t)&&t.length){var e,i=createSizedArray(t.length),r=t.length;for(e=0;e<r;e+=1)i[e]=Math.abs(t[e]);return i}return Math.abs(t)};var defaultCurveSegments=150,degToRads=Math.PI/180,roundCorner=.5519;function roundValues(t){_shouldRoundValues=!!t}function bmRnd(t){return _shouldRoundValues?Math.round(t):t}function styleDiv(t){t.style.position="absolute",t.style.top=0,t.style.left=0,t.style.display="block",t.style.transformOrigin="0 0",t.style.webkitTransformOrigin="0 0",t.style.backfaceVisibility="visible",t.style.webkitBackfaceVisibility="visible",t.style.transformStyle="preserve-3d",t.style.webkitTransformStyle="preserve-3d",t.style.mozTransformStyle="preserve-3d"}function BMEnterFrameEvent(t,e,i,r){this.type=t,this.currentTime=e,this.totalTime=i,this.direction=r<0?-1:1}function BMCompleteEvent(t,e){this.type=t,this.direction=e<0?-1:1}function BMCompleteLoopEvent(t,e,i,r){this.type=t,this.currentLoop=i,this.totalLoops=e,this.direction=r<0?-1:1}function BMSegmentStartEvent(t,e,i){this.type=t,this.firstFrame=e,this.totalFrames=i}function BMDestroyEvent(t,e){this.type=t,this.target=e}function BMRenderFrameErrorEvent(t,e){this.type="renderFrameError",this.nativeError=t,this.currentTime=e}function BMConfigErrorEvent(t){this.type="configError",this.nativeError=t}function BMAnimationConfigErrorEvent(t,e){this.type=t,this.nativeError=e}var createElementID=(_count=0,function(){return idPrefix$1+"__lottie_element_"+(_count+=1)}),_count;function HSVtoRGB(t,e,i){var r,s,a,n,o,h,l,p;switch(h=i*(1-e),l=i*(1-(o=6*t-(n=Math.Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
{"ddd":0,"h":370,"w":550,"meta":{"g":"LottieFiles Figma v38"},"layers":[{"ty":4,"sr":1,"st":0,"op":10,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[11,92],"t":0},{"s":[11,92],"t":9.000000357627869}]},"s":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":0},{"s":[100,100],"t":9.000000357627869}]},"p":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[272,184],"t":0},{"s":[272,184],"t":9.000000357627869}]},"r":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[0],"t":0},{"s":[0],"t":9.000000357627869}]},"o":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":0},{"s":[0],"t":9.000000357627869}]}},"shapes":[{"ty":"sh","d":1,"ks":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[{"c":true,"i":[[0,0],[-0.58,0.64],[0,0],[0.58,0.64],[0.58,-0.64],[0,0],[0,0],[0.58,-0.64],[-0.58,-0.64],[0,0]],"o":[[0.58,0.64],[0,0],[0.58,-0.64],[-0.58,-0.64],[0,0],[0,0],[-0.58,-0.64],[-0.58,0.64],[0,0],[0,0]],"v":[[9.94,183.52],[12.06,183.52],[21.56,173.02],[21.56,170.68],[19.45,170.68],[11,180.02],[2.55,170.68],[0.44,170.68],[0.44,173.02],[9.94,183.52]]}],"t":0},{"s":[{"c":true,"i":[[0,0],[-0.58,0.64],[0,0],[0.58,0.64],[0.58,-0.64],[0,0],[0,0],[0.58,-0.64],[-0.58,-0.64],[0,0]],"o":[[0.58,0.64],[0,0],[0.58,-0.64],[-0.58,-0.64],[0,0],[0,0],[-0.58,-0.64],[-0.58,0.64],[0,0],[0,0]],"v":[[9.94,183.52],[12.06,183.52],[21.56,173.02],[21.56,170.68],[19.45,170.68],[11,180.02],[2.55,170.68],[0.44,170.68],[0.44,173.02],[9.94,183.52]]}],"t":9.000000357627869}]}},{"ty":"sh","d":1,"ks":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[{"c":true,"i":[[0,0],[0.58,-0.64],[0,0],[-0.58,-0.64],[-0.58,0.64],[0,0],[0,0],[-0.58,0.64],[0.58,0.64],[0,0]],"o":[[-0.58,-0.64],[0,0],[-0.58,0.64],[0.58,0.64],[0,0],[0,0],[0.58,0.64],[0.58,-0.64],[0,0],[0,0]],"v":[[12.06,0.48],[9.94,0.48],[0.44,10.98],[0.44,13.32],[2.55,13.32],[11,3.98],[19.45,13.32],[21.56,13.32],[21.56,10.98],[12.06,0.48]]}],"t":0},{"s":[{"c":true,"i":[[0,0],[0.58,-0.64],[0,0],[-0.58,-0.64],[-0.58,0.64],[0,0],[0,0],[-0.58,0.64],[0.58,0.64],[0,0]],"o":[[-0.58,-0.64],[0,0],[-0.58,0.64],[0.58,0.64],[0,0],[0,0],[0.58,0.64],[0.58,-0.64],[0,0],[0,0]],"v":[[12.06,0.48],[9.94,0.48],[0.44,10.98],[0.44,13.32],[2.55,13.32],[11,3.98],[19.45,13.32],[21.56,13.32],[21.56,10.98],[12.06,0.48]]}],"t":9.000000357627869}]}},{"ty":"sh","d":1,"ks":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[12.49,182.35],[12.49,1.65],[9.51,1.65],[9.51,182.35],[12.49,182.35]]}],"t":0},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[12.49,182.35],[12.49,1.65],[9.51,1.65],[9.51,182.35],[12.49,182.35]]}],"t":9.000000357627869}]}},{"ty":"fl","c":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[0.1059,0.7686,0.749],"t":0},{"s":[0.1059,0.7686,0.749],"t":9.000000357627869}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":0},{"s":[100],"t":9.000000357627869}]}}],"ind":1},{"ty":4,"sr":1,"st":0,"op":45,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[5.02,0],"t":0},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[5.02,0],"t":9},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[5.02,0],"t":18},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[5.02,0],"t":26},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[5.02,0],"t":35},{"s":[5.02,0],"t":43.500001430511475}]},"s":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":0},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":9},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":18},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":26},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100,100],"t":35},{"s":[100,100],"t":43.500001430511475}]},"p":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[455.29,157.61],"t":0},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[455.29,157.61],"t":9},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[455.29,157.61],"t":18},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[455.29,157.61],"t":26},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[455.29,157.61],"t":35},{"s":[455.29,157.61],"t":43.500001430511475}]},"r":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[31.32],"t":0},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[31.32],"t":9},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[31.32],"t":18},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[31.32],"t":26},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[31.32],"t":35},{"s":[31.32],"t":43.500001430511475}]},"o":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[0],"t":0},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":9},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":18},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":26},{"o":{"x":0,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":35},{"s":[0],"t":43.500001430511475}]}},"shapes":[{"ty":"sh","d":1,"ks":{"a":Line truncated
|
||||
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
+48
-4
@@ -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");
|
||||
}
|
||||
|
||||
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
+47
-3
@@ -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");
|
||||
}
|
||||
|
||||
+48
-4
@@ -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");
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user