mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-07-16 04:39:07 +00:00
deploy: f108f1ef49
This commit is contained in:
MSarmadQadeer
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>Simplex chat</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>Announcing SimpleX Chat Prototype!</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX announces SimpleX Chat v0.4</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX announces SimpleX Chat v0.5</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX announces SimpleX Chat v1</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX announces SimpleX Chat public beta for iOS</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX announces SimpleX Chat mobile apps for iOS and Android</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>Instant notifications for SimpleX Chat mobile apps</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX Chat v2.0 - sending images and files in mobile apps</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX Chat v2.1 - better conversation privacy</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX Chat v2.2 - the first messaging platform without user identities - 100% private by design!</h1>
|
||||
|
||||
+132
-11
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX announces SimpleX Chat v3</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX Chat v3.1-beta is released</h1>
|
||||
|
||||
@@ -16,22 +16,143 @@
|
||||
<body class="sm:bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20"><h1>SimpleX Chat v3.1 is released</h1>
|
||||
|
||||
+152
-35
@@ -6,132 +6,249 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="/css/tailwind.css" rel="stylesheet" />
|
||||
<link href="/css/blogs.css" rel="stylesheet" />
|
||||
<link href="/css/style.css" rel="stylesheet" />
|
||||
<title>Blogs</title>
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico">
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a
|
||||
class="github-button"
|
||||
href="https://github.com/simplex-chat/simplex-chat"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star simplex-chat on GitHub"
|
||||
>Star</a>
|
||||
<nav class="container">
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX Chat v3.1 is released</h1>
|
||||
<p class="text-sm">Mon, 08 Aug 2022</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220808-simplex-chat-v3.1-chat-groups/">SimpleX Chat v3.1 is released</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220808-simplex-chat-v3.1-chat-groups/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX Chat v3.1-beta is released</h1>
|
||||
<p class="text-sm">Sat, 23 Jul 2022</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220723-simplex-chat-v3.1-tor-groups-efficiency/">SimpleX Chat v3.1-beta is released</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220723-simplex-chat-v3.1-tor-groups-efficiency/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX announces SimpleX Chat v3</h1>
|
||||
<p class="text-sm">Mon, 11 Jul 2022</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220711-simplex-chat-v3-released-ios-notifications-audio-video-calls-database-export-import-protocol-improvements/">SimpleX announces SimpleX Chat v3</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220711-simplex-chat-v3-released-ios-notifications-audio-video-calls-database-export-import-protocol-improvements/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX Chat v2.2 - the first messaging platform without user identities - 100% private by design!</h1>
|
||||
<p class="text-sm">Sat, 04 Jun 2022</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220604-simplex-chat-new-privacy-security-settings/">SimpleX Chat v2.2 - the first messaging platform without user identities - 100% private by design!</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220604-simplex-chat-new-privacy-security-settings/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX Chat v2.1 - better conversation privacy</h1>
|
||||
<p class="text-sm">Tue, 24 May 2022</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220524-simplex-chat-better-privacy/">SimpleX Chat v2.1 - better conversation privacy</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220524-simplex-chat-better-privacy/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX Chat v2.0 - sending images and files in mobile apps</h1>
|
||||
<p class="text-sm">Wed, 11 May 2022</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220511-simplex-chat-v2-images-files/">SimpleX Chat v2.0 - sending images and files in mobile apps</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220511-simplex-chat-v2-images-files/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">Instant notifications for SimpleX Chat mobile apps</h1>
|
||||
<p class="text-sm">Mon, 04 Apr 2022</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220404-simplex-chat-instant-notifications/">Instant notifications for SimpleX Chat mobile apps</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220404-simplex-chat-instant-notifications/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX announces SimpleX Chat mobile apps for iOS and Android</h1>
|
||||
<p class="text-sm">Tue, 08 Mar 2022</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220308-simplex-chat-mobile-apps/">SimpleX announces SimpleX Chat mobile apps for iOS and Android</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220308-simplex-chat-mobile-apps/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX announces SimpleX Chat public beta for iOS</h1>
|
||||
<p class="text-sm">Mon, 14 Feb 2022</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220214-simplex-chat-ios-public-beta/">SimpleX announces SimpleX Chat public beta for iOS</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220214-simplex-chat-ios-public-beta/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX announces SimpleX Chat v1</h1>
|
||||
<p class="text-sm">Wed, 12 Jan 2022</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220112-simplex-chat-v1-released/">SimpleX announces SimpleX Chat v1</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20220112-simplex-chat-v1-released/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX announces SimpleX Chat v0.5</h1>
|
||||
<p class="text-sm">Wed, 08 Dec 2021</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20211208-simplex-chat-v0.5-released/">SimpleX announces SimpleX Chat v0.5</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20211208-simplex-chat-v0.5-released/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">SimpleX announces SimpleX Chat v0.4</h1>
|
||||
<p class="text-sm">Tue, 14 Sep 2021</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20210914-simplex-chat-v0.4-released/">SimpleX announces SimpleX Chat v0.4</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20210914-simplex-chat-v0.4-released/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">Announcing SimpleX Chat Prototype!</h1>
|
||||
<p class="text-sm">Wed, 12 May 2021</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20210512-simplex-chat-terminal-ui/">Announcing SimpleX Chat Prototype!</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20210512-simplex-chat-terminal-ui/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
|
||||
<h1 class="text-xl font-medium">Simplex Chat</h1>
|
||||
<p class="text-sm">Thu, 22 Oct 2020</p>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20201022-simplex-chat/">Simplex Chat</a>
|
||||
<a class="inline-block mt-5 hover:underline" href="/blog/20201022-simplex-chat/">Read More</a>
|
||||
<br>
|
||||
</article>
|
||||
|
||||
|
||||
+133
-17
@@ -14,6 +14,7 @@
|
||||
<meta name="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<link href="../css/contact.css" rel="stylesheet" />
|
||||
<link href="../css/style.css" rel="stylesheet" />
|
||||
<script src="qrcode.js"></script>
|
||||
<script async defer src="index.js"></script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
@@ -22,28 +23,143 @@
|
||||
<body>
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="../img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a
|
||||
class="github-button"
|
||||
href="https://github.com/simplex-chat/simplex-chat"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star simplex-chat on GitHub"
|
||||
>Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="conn_req">
|
||||
<div class="container">
|
||||
|
||||
+1
-1
@@ -73,4 +73,4 @@ h3::before {
|
||||
height: 80px;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#comparison::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
margin-top: -80px;
|
||||
height: 120px;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* .nav-button-active{
|
||||
background-color: #00C8FB;
|
||||
color: #fff;
|
||||
} */
|
||||
@@ -54,6 +54,18 @@
|
||||
position: relative
|
||||
}
|
||||
|
||||
.top-\[60px\] {
|
||||
top: 60px
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.z-\[99\] {
|
||||
z-index: 99
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem
|
||||
}
|
||||
@@ -107,10 +119,22 @@
|
||||
display: none
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.h-0 {
|
||||
height: 0px
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.shrink {
|
||||
flex-shrink: 1
|
||||
}
|
||||
@@ -123,14 +147,65 @@
|
||||
resize: both
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.gap-\[16px\] {
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem
|
||||
}
|
||||
|
||||
.self-stretch {
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
.border-x-0 {
|
||||
border-left-width: 0px;
|
||||
border-right-width: 0px
|
||||
}
|
||||
|
||||
.border-y-0 {
|
||||
border-top-width: 0px;
|
||||
border-bottom-width: 0px
|
||||
}
|
||||
|
||||
.border-t-\[1px\] {
|
||||
border-top-width: 1px
|
||||
}
|
||||
|
||||
.border-solid {
|
||||
border-style: solid
|
||||
}
|
||||
|
||||
.border-yellow-200 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(254 240 138 / var(--tw-border-opacity))
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity))
|
||||
@@ -141,6 +216,11 @@
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-\[\#fbd561\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 213 97 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem
|
||||
}
|
||||
@@ -163,6 +243,16 @@
|
||||
padding-right: 1.5rem
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem
|
||||
}
|
||||
|
||||
.py-6 {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem
|
||||
@@ -178,6 +268,19 @@
|
||||
line-height: 1.25rem
|
||||
}
|
||||
|
||||
.text-\[1\.4rem\] {
|
||||
font-size: 1.4rem
|
||||
}
|
||||
|
||||
.text-\[1\.2rem\] {
|
||||
font-size: 1.2rem
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500
|
||||
}
|
||||
@@ -186,6 +289,10 @@
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.tracking-\[1px\] {
|
||||
letter-spacing: 1px
|
||||
}
|
||||
|
||||
.underline {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline
|
||||
@@ -219,6 +326,14 @@
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
|
||||
}
|
||||
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms
|
||||
}
|
||||
|
||||
.hover\:underline:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline
|
||||
@@ -260,6 +375,10 @@
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.lg\:px-16 {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem
|
||||
|
||||
+143
-26
@@ -19,6 +19,8 @@
|
||||
<meta property="og:url" content="https://simplex.chat/" />
|
||||
<meta property="og:image" content="https://simplex.chat/img/share_simplex.png" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<link href="/css/tailwind.css" rel="stylesheet" />
|
||||
<link href="/css/style.css" rel="stylesheet" />
|
||||
<link href="css/index.css" rel="stylesheet" />
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico">
|
||||
<script async defer src="js/index.js"></script>
|
||||
@@ -27,31 +29,146 @@
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a
|
||||
class="github-button"
|
||||
href="https://github.com/simplex-chat/simplex-chat"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star simplex-chat on GitHub"
|
||||
>Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<nav class="container">
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<section id="demo">
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="demo" class="z-10">
|
||||
<div class="container">
|
||||
<h1>SimpleX Chat</h1>
|
||||
<h3>Private & encrypted - the only platform without user identifiers!</h3>
|
||||
@@ -325,7 +442,7 @@
|
||||
</section>
|
||||
|
||||
<section id="messaging">
|
||||
<div class="container">
|
||||
<div class="container flex flex-col items-center">
|
||||
<div>
|
||||
<h2>SimpleX messaging protocol</h2>
|
||||
<h3>Unidirectional (simplex) queues</h3>
|
||||
@@ -349,7 +466,7 @@
|
||||
</section>
|
||||
|
||||
<section id="chat">
|
||||
<div class="container">
|
||||
<div class="container flex flex-col items-center">
|
||||
<div>
|
||||
<h2>Chat</h2>
|
||||
<h3>Communication integrity</h3>
|
||||
|
||||
+133
-17
@@ -15,6 +15,7 @@
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<link href="../css/contact.css" rel="stylesheet" />
|
||||
<script src="../contact/qrcode.js"></script>
|
||||
<link href="../css/style.css" rel="stylesheet" />
|
||||
<script async defer src="../contact/index.js"></script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
@@ -22,28 +23,143 @@
|
||||
<body>
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="../img/simplex.svg" />
|
||||
</a>
|
||||
<div class="flex items-center gap-[16px] h-full">
|
||||
<a href="/">
|
||||
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
|
||||
</a>
|
||||
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a
|
||||
class="github-button"
|
||||
href="https://github.com/simplex-chat/simplex-chat"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star simplex-chat on GitHub"
|
||||
>Star</a>
|
||||
<div class="hidden lg:flex gap-[16px]">
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
<div class="flex gap-4">
|
||||
<div class="nav__buttons">
|
||||
<div class="github">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
|
||||
<div class="donate d-none-576">
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank">
|
||||
<span class="button">Donate</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle self-stretch">
|
||||
<label class="toggle-btn"><span></span></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
|
||||
href="/#comparison">Comparison</a>
|
||||
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
|
||||
href="/blog">Blog</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
const toggleBtn = document.querySelector(".toggle-btn")
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if (toggleBtn.classList.contains("active-toggle-btn")) {
|
||||
console.log("unchecked")
|
||||
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
|
||||
toggleBtn.classList.remove("active-toggle-btn")
|
||||
} else {
|
||||
console.log("checked")
|
||||
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
|
||||
toggleBtn.classList.add("active-toggle-btn")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ====== NAV TOGGLE BUTTON ====== */
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-btn span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #062d56;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-btn span::after,
|
||||
.toggle-btn span::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #062d56;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
|
||||
.active-toggle-btn span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.active-toggle-btn span::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
background-color: #062d56;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.mobile-nav-active {
|
||||
display: block;
|
||||
transform: translateX(0%);
|
||||
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="conn_req">
|
||||
<div class="container">
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
// console.log(window.location.href)
|
||||
// if(window.location.href.includes('comparison')){
|
||||
// console.log('Comparison');
|
||||
// document.querySelector('.comparison-nav-btn').classList.add('nav-button-active');
|
||||
// }
|
||||
// else if(window.location.href.includes('blog')){
|
||||
// document.querySelector('.blog-nav-btn').classList.add('nav-button-active');
|
||||
// }
|
||||
Reference in New Issue
Block a user