dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-04-15 02:56:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

new website (#1307)

Browse Source 
* nav in process

* edited web.yml

* navbar issue fixed

* added theme switcher

* added privacy matters section

* added features section

* updated nav padding

* added network section

* improved sidebar dark mode colors

* added footer

* simplex private section added

* added some improvements

* nav issue fixed

* simplex unique section added

* a small fix

* added overlay & data to some sections

* added overlay to simplex unique section
added some improvements to other sections too

* added a small fix

* updated CNAME

* markdown files for why simplex is unique

* Revert "markdown files for why simplex is unique"

This reverts commit ef728218f7.

* added hero section

* added comparison and simplex explained section

* added blogs page

* added articles page

* a small fix in hero section

* added contact page

* updated contact

* created files for overlay content

* a light update

* hero animation

* working on hero

* added responsiveness for mobile

* a quick fix

* added responsiveness to tablet screen

* added responsiveness for desktop screen on hero section

* switch theme of hero

* nav color update

* set comparisons sections

* switch theme of comparisons section

* added responsiveness in simplex explained section

* add logic to simplex explained

* added theme switcher to simplex explained

* manage join simplex section

* update what makes simplex private

* a quick update

* add improvements

* a bit update

* add improvements

* texts for why privacy matters section

* update headers

* texts for "why unique" and "features" sections

* EOLs

* update swipers

* update & add transitions to simplex unique section

* updated overlays

* increase the size of cross on overlays

* add overlays to hero

* website: texts for "private" and "explained" sections (#5)

* website: texts for "private" section

* texts for simplex explained

* blog previews and images (#6)

* blog previews and images

* text for dark mode

* add link style

* add overlay to -> unlike p2p networks

* add picture with blue arrows to simplex explained

* update blog list layout

* remove extra css

* bigger navigation circles & center positions

* make bullets (dots) bigger

* make private scroll thicker

* update hero & footer mobile download btns

* fix dark mode animation files (#7)

* improved contrast for light animation in hero section (#8)

* remove old animation

* Made Hero Pixel Perfect to Desktop

* texts in hero section overlays (#10)

* texts in hero section overlays

* replace hero video

* eol

* update footer links (#11)

* update footer links

* eol

* texts, links, fix layout (#12)

* mailchimp form (#13)

* site meta tags (#14)

* site meta tags

* update blog og:url

* amend texts

* font

* update text

* contact page

* Making things Polished in Hero (#15)

* Made Video Responsive on Tablet

* Fixed the issues

* remove extra files for home & contact page

* update invitation

* refactoring

* fix nav for dark

* quick fix

* update blog list layout

* refactoring

* disable inactive nav circles

* contact page

* fix mobile

* detect platform & show btns according to it

* contact & invitation page setting

* complete contact/invitation page

* create variables for download btns

* fixes for hero - for tablet & mobile

* update hero layout

* update footer layout

* increase the size of logo in navbar

* updated nav & footer logos

* add links to join simplex section

* text for p2p networks section

* text on contact page about link

* add touchstart handler to close popup

* update APK links

* update CNAME

Co-authored-by: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Co-authored-by: Ojas Shukla <54703305+whizzbbig@users.noreply.github.com>
This commit is contained in:
Evgeny Poberezkin
2022-11-08 11:04:02 +00:00
committed by GitHub
parent dd9e94eefd
commit fa5a70cd19
468 changed files with 5466 additions and 1323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
website/src/_includes/simplex_explained.html Normal file
View File

@@ -0,0 +1,116 @@
<style>
.tab-button {
color: #a8b0b4;
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(to bottom, #a8b0b4, transparent) border-box;
border: 1px solid transparent;
border-radius: 6px 6px 0px 0px;
transition: color 0.3s ease;
text-decoration: underline;
text-underline-offset: 3px;
}
.dark .tab-button{
color: #fff;
background: linear-gradient(#0C0B13, #0C0B13) padding-box,
linear-gradient(to bottom, #01F1FF, transparent) border-box;
}
.tab-button.active {
color: #0053d0;
text-decoration: none;
}
.dark .tab-button.active {
color: #70F0F9;
}
</style>
<section id="simplex-explained" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[80px] px-5">
<div class="container">
<p class="text-[35px] lg:text-[45px] text-center font-bold text-grey-black dark:text-white mb-[40px]">Simplex explained</p>
<!-- Tab links -->
<div class="tabs hidden md:flex gap-2 mb-16">
<div data-btn-index="0" class="flex-1 tab-button tab-1 p-2 text-[20px] text-center font-bold cursor-pointer active">1. What users experience</div>
<div data-btn-index="1" class="flex-1 tab-button tab-2 p-2 text-[20px] text-center font-bold cursor-pointer">2. How does it work</div>
<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>
<!-- Tab content -->
<div class="swiper simplex-explained-swiper">
<div class="swiper-wrapper h-[inherit] mb-20 md:mb-0">
<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] my-16" src="/img/new/explained-1.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
You can create contacts and groups, and have two-way conversations, as in any other messenger.
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
How can it work with unidirectional queues and without user profile identifiers?
</p>
</div>
</div>
<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] my-16" src="/img/new/explained-2.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
For each connection you use two separate messaging queues to send and receive messages via different servers.
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
Servers only pass messages one way, without having the full picture of user's conversation or connections.
</p>
</div>
</div>
<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] my-16" src="/img/new/explained-3.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
The servers have separate anonymous credentials for each queue, and do not know which users they belong to.
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
Users can further improve metadata privacy by using Tor to access servers, preventing corellation by IP address.
</p>
</div>
</div>
</div>
<div class="swiper-pagination simplex-explained-swiper-pagination mt-100 md:hidden"></div>
</div>
</div>
</section>
<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 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");
} else {
simplexExplainedSwiper__tabs[index].classList.remove("active");
}
});
}
});
});
const targetNode = document.querySelector(".simplex-explained-swiper .swiper-pagination");
observer.observe(targetNode, { attributes: true });
window.addEventListener('click',e=>{
if(e.target.closest("#simplex-explained .tabs .tab-button")){
const index = e.target.closest("#simplex-explained .tabs .tab-button").dataset.btnIndex;
simplexExplainedSwiper__bullets[index].click();
}
})
});
</script>