nav in process
This commit is contained in:
M Sarmad Qadeer
parent
07d2c9ff49
commit
3c3d9dd3c7
@ -7,6 +7,7 @@ const uri = require('fast-uri')
|
||||
module.exports = function (ty) {
|
||||
// Keeps the same directory structure.
|
||||
ty.addPassthroughCopy("src/assets/")
|
||||
ty.addPassthroughCopy("src/fonts")
|
||||
ty.addPassthroughCopy("src/img")
|
||||
ty.addPassthroughCopy("src/css")
|
||||
ty.addPassthroughCopy("src/js")
|
||||
|
||||
20
website/src/_includes/layouts/main.html
Normal file
20
website/src/_includes/layouts/main.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico" />
|
||||
<link href="/css/tailwind.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
{% include "navbar.html" %}
|
||||
<section class="container">
|
||||
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20">{{ content | safe }}</div>
|
||||
</section>
|
||||
|
||||
<script src="/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
182
website/src/_includes/navbar.html
Normal file
182
website/src/_includes/navbar.html
Normal file
@ -0,0 +1,182 @@
|
||||
<header class="bg-white dark:bg-black">
|
||||
<div class="flex items-center justify-end m-auto container h-[66px]">
|
||||
<a href="#" class="hidden h-full py-4 lg:inline-block mr-auto"><img class="w-auto h-[32px]" src="/img/new/logo.png" alt="logo" /></a>
|
||||
<a href="" class="lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
|
||||
|
||||
<nav class="bg-[#F0F1F2] lg:bg-white absolute top-[66px] left-0 right-0 bottom-0 lg:top-0 lg:relative" id="menu">
|
||||
<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-10 container h-full">
|
||||
<ul class="flex flex-col lg:flex-row lg:items-center gap-3 py-4 lg:py-0 lg:gap-10">
|
||||
|
||||
<li href="#" class="nav-link relative active">
|
||||
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
|
||||
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text">Home</span>
|
||||
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1 lg:hidden">
|
||||
<img src="/img/new/union.svg" />
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white top-full lg:mt-[10px] lg:py-4 min-w-[180px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu lg:hidden">
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">Why SimpleX</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">Features</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">SimpleX privacy</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">SimpleX network</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<hr>
|
||||
|
||||
<li href="#" class="nav-link relative">
|
||||
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
|
||||
<span class="text-[16px] leading-[26px] tracking-[0.01em]">Developers</span>
|
||||
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
|
||||
<img src="/img/new/union.svg" />
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white top-full lg:mt-[10px] lg:py-4 min-w-[180px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu">
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">Why SimpleX</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">Features</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">SimpleX privacy</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">SimpleX network</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<hr>
|
||||
|
||||
<li href="#" class="nav-link relative">
|
||||
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
|
||||
<span class="text-[16px] leading-[26px] tracking-[0.01em]">Reference</span>
|
||||
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
|
||||
<img src="/img/new/union.svg" />
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white top-full lg:mt-[10px] lg:py-4 min-w-[180px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu">
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">Why SimpleX</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">Features</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">SimpleX privacy</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">SimpleX network</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<hr>
|
||||
|
||||
<li href="#" class="nav-link relative">
|
||||
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
|
||||
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text">Blog</span>
|
||||
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1 lg:hidden">
|
||||
<img src="/img/new/union.svg" />
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white top-full lg:mt-[10px] lg:py-4 min-w-[180px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu lg:hidden">
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">Why SimpleX</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">Features</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">SimpleX privacy</a></li>
|
||||
<li><a href="/" class="py-[10px] lg:px-[20px]">SimpleX network</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="inline-block self-center text-white text-[16px] font-medium tracking-[0.02em] rounded-[34px] bg-[#0053D0] py-3 lg:py-2 px-20 lg:px-5 mb-16 lg:mb-0">Get Simplex</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<button href="#" class="flex items-center justify-center h-[36px] w-[36px] ml-10">
|
||||
<img src="/img/new/to-night-theme-icon.svg" alt="" srcset="">
|
||||
</button>
|
||||
|
||||
<button href="" id="btn-mobile" class="flex lg:hidden items-center justify-center h-[36px] w-[36px] ml-10 nav-toggle-btn">
|
||||
<img src="/img/new/hamburger.svg" id="hamburger" alt="" srcset="">
|
||||
<img src="/img/new/cross.svg" id="cross" alt="" srcset="" class="hidden">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <nav class="absolute z-[10000] bg-white top-0 right-0 bottom-0 left-0">
|
||||
<div class="flex items-center justify-between h-[78px] m-auto container">
|
||||
<a href="">
|
||||
<img src="/img/new/logo-symbol-light.svg" alt="" srcset="">
|
||||
</a>
|
||||
|
||||
<div class="flex items-center gap-[18px]">
|
||||
<button href="" class="flex items-center justify-center h-[36px] w-[36px]">
|
||||
<img src="/img/new/to-night-theme-icon.svg" alt="" srcset="">
|
||||
</button>
|
||||
<button href="" class="flex items-center justify-center h-[36px] w-[36px]">
|
||||
<img src="/img/new/cross.svg" id="cross">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#F0F1F2] h-[calc(100vh-78px)] flex flex-col items-center justify-between">
|
||||
<div id="navigation" class="container w-full bg-orange-300">
|
||||
<ul class="navigation-menu w-full">
|
||||
<li><a href="index-job.html" class="sub-menu-item">Home</a></li>
|
||||
|
||||
|
||||
<li class="has-submenu parent-menu-item">
|
||||
<a href="javascript:void(0)"><p>Candidate</p> <span class="menu-arrow"></span></a>
|
||||
<ul class="submenu">
|
||||
<li><a href="job-candidate-list.html" class="sub-menu-item">Candidate Listing</a></li>
|
||||
<li><a href="job-candidate.html" class="sub-menu-item">Candidate Detail</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="has-submenu parent-menu-item">
|
||||
<a href="javascript:void(0)">Company</a><span class="menu-arrow"></span>
|
||||
<ul class="submenu">
|
||||
<li><a href="job-company-list.html" class="sub-menu-item">Company Listing</a></li>
|
||||
<li><a href="job-company.html" class="sub-menu-item">Company Detail</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="#" class="inline-block text-white rounded-[34px] bg-[#0053D0] py-3 px-20 mb-16">Get Simplex</a>
|
||||
</div>
|
||||
</nav> -->
|
||||
</header>
|
||||
|
||||
<SCript>
|
||||
// Clickable Menu
|
||||
const nav = document.querySelector('header nav');
|
||||
|
||||
if(document.getElementById("navigation")){
|
||||
var elements = document.getElementById("navigation").getElementsByTagName("a");
|
||||
for(var i = 0, len = elements.length; i < len; i++) {
|
||||
elements[i].onclick = function (elem) {
|
||||
if(elem.target.getAttribute("href") === "javascript:void(0)") {
|
||||
var submenu = elem.target.nextElementSibling;
|
||||
submenu.classList.toggle('open');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
window.addEventListener('click',(e)=>{
|
||||
if(e.target.closest('.nav-link')){
|
||||
if(e.target.closest('.nav-link').classList.contains('active')){
|
||||
e.target.closest('.nav-link').classList.remove('active');
|
||||
}
|
||||
else{
|
||||
document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active'))
|
||||
e.target.closest('.nav-link').classList.add('active');
|
||||
}
|
||||
}
|
||||
else if(e.target.closest('.nav-toggle-btn')){
|
||||
if(nav.classList.contains('open')){
|
||||
nav.classList.remove('open');
|
||||
document.getElementById('hamburger').classList.remove('hidden');
|
||||
document.getElementById('cross').classList.add('hidden');
|
||||
}
|
||||
else{
|
||||
nav.classList.add('open');
|
||||
document.getElementById('hamburger').classList.add('hidden');
|
||||
document.getElementById('cross').classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// switch theme
|
||||
|
||||
</SCript>
|
||||
@ -1,5 +1,41 @@
|
||||
@font-face {
|
||||
font-family: "Gilroy";
|
||||
src: url("/fonts/GilroyRegular/font.woff2") format("woff2"), url("webFonts/GilroyRegular/font.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy";
|
||||
src: url("/fonts/GilroyLight/font.woff2") format("woff2"), url("webFonts/GilroyLight/font.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy";
|
||||
src: url("/fonts/GilroyMedium/font.woff2") format("woff2"), url("webFonts/GilroyMedium/font.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy";
|
||||
src: url("/fonts/GilroyBold/font.woff2") format("woff2"), url("webFonts/GilroyBold/font.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gilroy";
|
||||
src: url("/fonts/GilroyRegularItalic/font.woff2") format("woff2"), url("webFonts/GilroyRegularItalic/font.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-family: 'Gilroy', sans-serif;
|
||||
}
|
||||
|
||||
#comparison::before {
|
||||
@ -15,3 +51,283 @@ html {
|
||||
background-color: #00C8FB;
|
||||
color: #fff;
|
||||
} */
|
||||
|
||||
/* NEW SITE */
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-xxl,
|
||||
.container-xl,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
width: 100%;
|
||||
padding-right: var(--bs-gutter-x, 0.75rem);
|
||||
padding-left: var(--bs-gutter-x, 0.75rem);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
||||
.container-sm,
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.container-md,
|
||||
.container-sm,
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm,
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
.container-xl,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm,
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
|
||||
.container-xxl,
|
||||
.container-xl,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm,
|
||||
.container {
|
||||
max-width: 1320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1024px) {
|
||||
.nav-link-text {
|
||||
position: relative;
|
||||
color: #0D0E12;
|
||||
}
|
||||
|
||||
.nav-link-text::before,
|
||||
.active .nav-link-text::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #0D0E12;
|
||||
transition: width 0.25s ease-out;
|
||||
}
|
||||
|
||||
.active .nav-link-text::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-link:hover .nav-link-text::before {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sub-menu {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
color: #505158;
|
||||
}
|
||||
.sub-menu li:hover {
|
||||
color: #0053D0;
|
||||
}
|
||||
.sub-menu {
|
||||
transition: all .3s ease !important;
|
||||
}
|
||||
.nav-link span img,
|
||||
header nav {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.nav-link:hover span img {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@media (min-width:1024px) {
|
||||
.nav-link:hover .sub-menu,
|
||||
.nav-link:focus-within .sub-menu {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.sub-menu {
|
||||
max-height: 0;
|
||||
}
|
||||
.sub-menu {
|
||||
transform: translateY(-10px);
|
||||
transition: all .7s ease !important;
|
||||
}
|
||||
.active .sub-menu {
|
||||
max-height: 200px;
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header nav{
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
header nav.open{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* #menu a{
|
||||
display: block;
|
||||
} */
|
||||
|
||||
/* nav{
|
||||
transition: 0.6s;
|
||||
z-index: 1000;
|
||||
height: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
nav.active{
|
||||
height: calc(100vh - 78px);
|
||||
visibility: visible;
|
||||
overflow-y: auto;
|
||||
} */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*********************************/
|
||||
/* Menu */
|
||||
/*===============================*/
|
||||
#navigation {
|
||||
/* width: inherit !important;
|
||||
align-self: stretch; */
|
||||
}
|
||||
|
||||
.navigation-menu>li {
|
||||
/* position: relative; */
|
||||
|
||||
/* width: 100vw; */
|
||||
/* width: inherit; */
|
||||
}
|
||||
|
||||
/* .navigation-menu > li > a {
|
||||
display: block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #0D0E12;
|
||||
} */
|
||||
|
||||
.navigation-menu .has-submenu .menu-arrow {
|
||||
/* border: solid #3c4858;
|
||||
border-radius: 0.5px;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
transition: all 0.5s; */
|
||||
/* right: -1px;
|
||||
top: 30px; */
|
||||
}
|
||||
|
||||
.navigation-menu .has-submenu:hover .menu-arrow {
|
||||
/* transform: rotate(225deg); */
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
|
||||
/* .navigation-menu {
|
||||
float: none;
|
||||
}
|
||||
.navigation-menu > li {
|
||||
float: none;
|
||||
} */
|
||||
.navigation-menu>li .submenu {
|
||||
/* display: none;
|
||||
list-style: none; */
|
||||
/* padding-left: 20px; */
|
||||
/* margin: 0; */
|
||||
}
|
||||
|
||||
.navigation-menu>li .submenu li a {
|
||||
/* display: block;
|
||||
position: relative;
|
||||
padding: 7px 15px;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 700;
|
||||
color: #3c4858 !important;
|
||||
transition: all 0.3s; */
|
||||
/* color: #505158; */
|
||||
}
|
||||
|
||||
.navigation-menu>li .submenu.open {
|
||||
/* display: block; */
|
||||
}
|
||||
|
||||
.navigation-menu>li>a {
|
||||
/* color: #3c4858; */
|
||||
/* padding: 10px 20px; */
|
||||
}
|
||||
|
||||
.navigation-menu>li>a:after {
|
||||
/* position: absolute; */
|
||||
/* right: 15px; */
|
||||
}
|
||||
|
||||
/* .navigation-menu > li > a:hover,
|
||||
.navigation-menu > li .submenu li a:hover,
|
||||
.navigation-menu > li.has-submenu.open > a {
|
||||
color: #2f55d4;
|
||||
} */
|
||||
}
|
||||
|
||||
/* @media (max-width: 768px) {
|
||||
.navigation-menu .has-submenu .menu-arrow {
|
||||
right: 8px;
|
||||
top: 16px;
|
||||
}
|
||||
} */
|
||||
BIN
website/src/fonts/GilroyBold/font.woff
Normal file
BIN
website/src/fonts/GilroyBold/font.woff
Normal file
Binary file not shown.
BIN
website/src/fonts/GilroyBold/font.woff2
Normal file
BIN
website/src/fonts/GilroyBold/font.woff2
Normal file
Binary file not shown.
BIN
website/src/fonts/GilroyLight/font.woff
Normal file
BIN
website/src/fonts/GilroyLight/font.woff
Normal file
Binary file not shown.
BIN
website/src/fonts/GilroyLight/font.woff2
Normal file
BIN
website/src/fonts/GilroyLight/font.woff2
Normal file
Binary file not shown.
BIN
website/src/fonts/GilroyMedium/font.woff
Normal file
BIN
website/src/fonts/GilroyMedium/font.woff
Normal file
Binary file not shown.
BIN
website/src/fonts/GilroyMedium/font.woff2
Normal file
BIN
website/src/fonts/GilroyMedium/font.woff2
Normal file
Binary file not shown.
BIN
website/src/fonts/GilroyRegular/font.woff
Normal file
BIN
website/src/fonts/GilroyRegular/font.woff
Normal file
Binary file not shown.
BIN
website/src/fonts/GilroyRegular/font.woff2
Normal file
BIN
website/src/fonts/GilroyRegular/font.woff2
Normal file
Binary file not shown.
BIN
website/src/fonts/GilroyRegularItalic/font.woff
Normal file
BIN
website/src/fonts/GilroyRegularItalic/font.woff
Normal file
Binary file not shown.
BIN
website/src/fonts/GilroyRegularItalic/font.woff2
Normal file
BIN
website/src/fonts/GilroyRegularItalic/font.woff2
Normal file
Binary file not shown.
3
website/src/img/new/cross.svg
Normal file
3
website/src/img/new/cross.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z" fill="#0D0E12"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 771 B |
6
website/src/img/new/hamburger.svg
Normal file
6
website/src/img/new/hamburger.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0C9.40202 0 0 9.40202 0 21C0 32.598 9.40202 42 21 42Z" fill="#0053D0"/>
|
||||
<path d="M29.4559 14H12.5442C11.9675 14 11.5 14.4675 11.5 15.0442V15.0442C11.5 15.621 11.9675 16.0885 12.5442 16.0885H29.4559C30.0326 16.0885 30.5001 15.621 30.5001 15.0442C30.5001 14.4675 30.0326 14 29.4559 14Z" fill="white"/>
|
||||
<path d="M29.4559 19.9561H12.5442C11.9675 19.9561 11.5 20.4236 11.5 21.0003V21.0003C11.5 21.577 11.9675 22.0445 12.5442 22.0445H29.4559C30.0326 22.0445 30.5001 21.577 30.5001 21.0003C30.5001 20.4236 30.0326 19.9561 29.4559 19.9561Z" fill="white"/>
|
||||
<path d="M29.4559 25.9112H12.5442C11.9675 25.9112 11.5 26.3787 11.5 26.9554V26.9554C11.5 27.5321 11.9675 27.9997 12.5442 27.9997H29.4559C30.0326 27.9997 30.5001 27.5321 30.5001 26.9554C30.5001 26.3787 30.0326 25.9112 29.4559 25.9112Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 966 B |
15
website/src/img/new/logo-symbol-light.svg
Normal file
15
website/src/img/new/logo-symbol-light.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_14_10)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.02972 8.59396L8.62219 14.186L14.3703 8.43848L17.1668 11.2346L11.4182 16.982L17.0112 22.5742L14.1371 25.448L8.5441 19.8557L2.79651 25.6035L0 22.8074L5.74813 17.0597L0.155656 11.4678L3.02972 8.59396Z" fill="#023789"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0922 25.5L16.9434 22.6486L16.9423 22.6478L22.6464 16.9456L17.0512 11.3519L17.0518 11.3514L14.2542 8.55418L8.65961 2.95973L11.5114 0.108337L17.106 5.70288L22.8095 0L25.607 2.79722L19.903 8.5L25.4981 14.0943L31.2022 8.39169L33.9997 11.1889L28.2957 16.8914L33.8914 22.4861L31.0396 25.3375L25.4439 19.7428L19.7404 25.4454L25.3361 31.0403L22.4843 33.8917L16.8887 28.2968L11.1862 34L8.38867 31.2028L14.0922 25.5Z" fill="url(#paint0_linear_14_10)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_14_10" x1="12.8379" y1="-0.693875" x2="9.54344" y2="31.4337" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#01F1FF"/>
|
||||
<stop offset="1" stop-color="#0197FF"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_14_10">
|
||||
<rect width="34" height="34" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
website/src/img/new/logo.png
Normal file
BIN
website/src/img/new/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
3
website/src/img/new/moon.svg
Normal file
3
website/src/img/new/moon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.92814 12.6789C6.17655 15.9347 11.7044 15.6463 14.5425 12.0117C14.6636 11.8566 14.6825 11.6448 14.5907 11.4708C14.4989 11.2967 14.3136 11.1926 14.1172 11.2049C11.5269 11.3673 8.97627 10.4315 7.0743 8.52765C5.17264 6.62414 4.23958 4.06868 4.40169 1.47281C4.41397 1.2762 4.30965 1.09069 4.13526 0.999048C3.96088 0.907402 3.74893 0.926696 3.59396 1.04833C3.36099 1.23117 3.13828 1.42685 2.92823 1.63726C-0.111372 4.68223 -0.111585 9.63533 2.92814 12.6789Z" stroke="black" stroke-miterlimit="10" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 632 B |
11
website/src/img/new/sun.svg
Normal file
11
website/src/img/new/sun.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.9958 12.2815C23.9363 12.3954 23.8849 12.5146 23.8158 12.6224C23.5945 12.9674 23.2766 13.1624 22.8654 13.1685C22.2182 13.1782 21.5707 13.1764 20.9234 13.17C20.2781 13.1636 19.7772 12.6464 19.7773 11.9999C19.7774 11.3535 20.2754 10.8389 20.9237 10.8303C21.532 10.8221 22.1405 10.8258 22.7488 10.8278C23.3522 10.8298 23.7281 11.0908 23.9462 11.6508C23.956 11.6761 23.9789 11.6964 23.9958 11.719C23.9958 11.9064 23.9958 12.094 23.9958 12.2815Z" fill="white"/>
|
||||
<path d="M11.7154 24.0003C11.6217 23.9526 11.5256 23.9088 11.4345 23.8564C11.0545 23.6377 10.836 23.3104 10.8286 22.87C10.8175 22.2149 10.8179 21.5593 10.828 20.9042C10.8378 20.2738 11.3597 19.7812 11.9967 19.7812C12.6336 19.7812 13.155 20.2739 13.1654 20.9042C13.1757 21.5359 13.1717 22.168 13.1682 22.7998C13.1652 23.3392 12.8885 23.7369 12.3906 23.937C12.3509 23.9529 12.3153 23.979 12.2779 24.0003C12.0904 24.0003 11.9029 24.0003 11.7154 24.0003Z" fill="white"/>
|
||||
<path d="M17.2592 11.9958C17.2733 14.8825 14.9232 17.2468 12.0032 17.2612C9.11732 17.2754 6.75397 14.9264 6.73836 12.0041C6.72295 9.12027 9.07502 6.75326 11.9946 6.73835C14.8788 6.72363 17.2449 9.07587 17.2592 11.9958Z" stroke="white" stroke-width="1.5"/>
|
||||
<path d="M13.1693 2.11324C13.1692 2.43329 13.1744 2.75345 13.1682 3.07341C13.1555 3.7216 12.6425 4.21934 11.995 4.21864C11.3493 4.21789 10.8358 3.71808 10.828 3.06768C10.8204 2.42766 10.8201 1.78736 10.8283 1.14738C10.8365 0.500704 11.3562 -0.000843934 12.0007 1.06615e-06C12.6437 0.000846066 13.1564 0.504314 13.1684 1.15307C13.1743 1.47303 13.1694 1.79318 13.1693 2.11324Z" fill="white"/>
|
||||
<path d="M2.10878 13.1714C1.78877 13.1714 1.46872 13.1754 1.14885 13.1705C0.504832 13.1605 -0.000422735 12.6426 2.65407e-07 11.9987C0.000423265 11.3553 0.503376 10.838 1.15138 10.8301C1.79126 10.8223 2.43138 10.8222 3.07126 10.8303C3.72034 10.8385 4.21822 11.3541 4.21794 12.0012C4.21766 12.6477 3.71555 13.1609 3.06872 13.1706C2.7488 13.1753 2.42875 13.1714 2.10878 13.1714Z" fill="white"/>
|
||||
<path d="M6.85268 5.524C6.82732 6.152 6.60944 6.52005 6.16969 6.72981C5.73844 6.93552 5.29738 6.90378 4.94534 6.58208C4.41604 6.09838 3.90431 5.59148 3.42451 5.05894C3.02923 4.62023 3.09727 3.9209 3.51626 3.50792C3.9361 3.09409 4.63284 3.03567 5.06893 3.43194C5.59381 3.90888 6.09569 4.41446 6.57188 4.93996C6.73726 5.12252 6.79642 5.4014 6.85268 5.524Z" fill="white"/>
|
||||
<path d="M17.1426 18.4446C17.1749 17.8424 17.389 17.4819 17.8198 17.2738C18.2418 17.07 18.6812 17.0888 19.0265 17.3998C19.5706 17.8899 20.0919 18.4099 20.5814 18.9544C20.9675 19.384 20.895 20.0764 20.485 20.4873C20.0824 20.8907 19.3961 20.9756 18.9718 20.5988C18.4129 20.1026 17.89 19.5625 17.3864 19.0096C17.2323 18.8405 17.1926 18.5671 17.1426 18.4446Z" fill="white"/>
|
||||
<path d="M18.2026 6.84235C17.8449 6.82333 17.4821 6.61377 17.2723 6.18256C17.0626 5.7515 17.0878 5.30837 17.4061 4.95629C17.8919 4.41887 18.4055 3.90234 18.945 3.41897C19.3826 3.02693 20.0905 3.1037 20.4947 3.52429C20.9057 3.95198 20.9561 4.64003 20.5568 5.07805C20.0843 5.59645 19.576 6.08306 19.071 6.5708C18.8688 6.76619 18.6057 6.84832 18.2026 6.84235Z" fill="white"/>
|
||||
<path d="M5.54205 17.1445C6.14812 17.1747 6.51058 17.385 6.72137 17.8153C6.9323 18.2459 6.90765 18.6892 6.58942 19.0415C6.1037 19.5791 5.58933 20.0948 5.05088 20.5795C4.62165 20.9659 3.93035 20.8989 3.51681 20.4933C3.09875 20.0833 3.02864 19.3789 3.4227 18.942C3.908 18.404 4.42706 17.8934 4.96382 17.4066C5.13982 17.247 5.41663 17.1985 5.54205 17.1445Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
3
website/src/img/new/union.svg
Normal file
3
website/src/img/new/union.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 549 B |
@ -1,426 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SimpleX Chat: private, secure, no user identitifiers</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Free open-source chat protocol and software - complete privacy, security and ownership of your contacts and messages."
|
||||
/>
|
||||
<meta name="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="SimpleX chat: private, secure, de-centralised" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Free open-source chat protocol and software - complete privacy, security and ownership of your contacts and messages."
|
||||
/>
|
||||
<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>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include "nav.html" %}
|
||||
|
||||
<section id="demo" class="z-10">
|
||||
<div class="container">
|
||||
<h1>SimpleX Chat</h1>
|
||||
<h3>Private & encrypted - the only platform without user identifiers!</h3>
|
||||
<div class="app__links">
|
||||
<a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img src="./img/apple_store.svg" height="42"></a>
|
||||
<a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img src="./img/google_play.svg"></a>
|
||||
<a href="https://app.simplex.chat" target="_blank" title="SimpleX F-Droid Repository"><img src="./img/f_droid.svg" height="41"></a>
|
||||
<a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img src="./img/testflight.png" width="41" height="41"></a>
|
||||
<a href="https://github.com/simplex-chat/website/raw/master/simplex.apk" target="_blank"><img src="./img/apk_icon.png" width="41" height="41"></a>
|
||||
</div>
|
||||
<p class="d-none-576">You can download terminal chat app from GitHub or using this command:</p>
|
||||
<p class="content_copy_with_tooltip install d-none-576">
|
||||
<span class="content">curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/master/install.sh | bash</span>
|
||||
<span class="tooltip">
|
||||
<span class="tooltiptext">Copy to clipboard</span>
|
||||
<img class="content_copy" src="./img/icons/content-copy.svg">
|
||||
</span>
|
||||
</p>
|
||||
<div class="all-users">
|
||||
<div class="user alice">
|
||||
<h3>Alice</h3>
|
||||
<div class="terminal">
|
||||
<div class="display"></div>
|
||||
<div class="input"></div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="user bob d-none">
|
||||
<h3>Bob</h3>
|
||||
<div class="terminal">
|
||||
<div class="display"></div>
|
||||
<div class="input"></div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="user simplex_mobile d-none-890">
|
||||
<img src="./img/simplex_mobile.png" alt="" width="320">
|
||||
</div>
|
||||
<div class="user tom d-none">
|
||||
<h3>Tom</h3>
|
||||
<div class="terminal">
|
||||
<div class="display"></div>
|
||||
<div class="input"></div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="run-demo d-none-890">Run demo</button>
|
||||
<button class="run-faster d-none-890">Faster!</button>
|
||||
<button class="try-it d-none-890">Try it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="introduction">
|
||||
<div class="container">
|
||||
<h2>Privacy redefined</h2>
|
||||
<h3>SimpleX advantage:</h3>
|
||||
<p>SimpleX ensures data and meta-data privacy</p>
|
||||
<p>with a new protocol design – it delivers messages</p>
|
||||
<p>without using senders' and recipients' identifiers,</p>
|
||||
<p>unlike any other messaging platform.</p>
|
||||
<figure class="section">
|
||||
<div class="feature">
|
||||
<div class="doodle control"></div>
|
||||
<h4>Security</h4>
|
||||
<p>Two-layer encryption and communication integrity</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="doodle privacy"></div>
|
||||
<h4>Privacy</h4>
|
||||
<p>Your contacts and messages are stored on your device</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="doodle convenience"></div>
|
||||
<h4>Convenience</h4>
|
||||
<p>Easy to add contacts and start talking</p>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="problem">
|
||||
<div class="container">
|
||||
<h2>Problem: chat security</h2>
|
||||
<a id="problem-explained"></a>
|
||||
<section class="problem intro">
|
||||
<h3>End-to-end encryption?</h3>
|
||||
<p>Alice sends the key to Bob (e.g. via p2p network or via chat server)</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="Alice sends the key to Bob" src="./img/problem11.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
</figure>
|
||||
</div>
|
||||
<p>Now Bob can send encrypted messages to Alice - he believes it is secure!</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="They believe it is secure" src="./img/problem12.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<section class="problem explained">
|
||||
<h3>Man-in-the-middle attack!</h3>
|
||||
<p>But the key can be intercepted and substituted by Tom (the attacker)</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="key is intercepted" src="./img/problem21.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
<div class="tom">Tom</div>
|
||||
</figure>
|
||||
</div>
|
||||
<p>Now the attacker can read the messages without Alice or Bob knowing</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="attacker can read messages" src="./img/problem22.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
<div class="tom">Tom</div>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<div class="pagination">
|
||||
<a class="page intro" href="#problem-intro"></a>
|
||||
<a class="page explained" href="#problem-explained"></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solution">
|
||||
<div class="container">
|
||||
<h2>What is the solution?</h2>
|
||||
<p>
|
||||
To create secure encrypted channel you need an existing secure channel
|
||||
<br />where you can pass the encryption key (or key fingerprint).
|
||||
</p>
|
||||
<p>Any alternative solution can be compromised.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="connection">
|
||||
<div class="container">
|
||||
<h2>Make a private connection!</h2>
|
||||
<h3>To add contact and to start chat</h3>
|
||||
<p>
|
||||
Adding a contact in mobile app will require sharing your one-time QR code.
|
||||
<br>In the <a href="https://github.com/simplex-chat/simplex-chat">terminal UI</a> you need to share an invitation with your contact.
|
||||
</p>
|
||||
<h4>After creating your chat profile in the app:</h4>
|
||||
<figure class="section">
|
||||
<figure class="conn-stage">
|
||||
<p>1.<br>Show QR code or share link</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: show QR code to add contact" src="./img/1_show_qr_code.png" width="187px"/>
|
||||
</figure>
|
||||
<figure class="party alice small">Alice</figure>
|
||||
</figure>
|
||||
<img src="img/arrow.svg" class="arrow" />
|
||||
<figure class="conn-stage">
|
||||
<p>2.<br>Your contact scans QR code or opens link</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: scan QR code" src="./img/2_scan_qr_code.png" width="187px"/>
|
||||
</figure>
|
||||
<figure class="party bob small">Bob</figure>
|
||||
</figure>
|
||||
<img src="img/arrow.svg" class="arrow" />
|
||||
<figure class="conn-stage">
|
||||
<p>3.<br>A private connection is established</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: confirm contact" src="./img/3_connected.png" width="187px"/>
|
||||
</figure>
|
||||
<figure class="party alice small">Alice</figure>
|
||||
</figure>
|
||||
<img src="img/arrow.svg" class="arrow" />
|
||||
<figure class="conn-stage">
|
||||
<p>4.<br>Now you can chat privately!</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: start chat" src="./img/4_chat.png" width="187px"/ />
|
||||
</figure>
|
||||
<figure class="party bob small">Bob</figure>
|
||||
</figure>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="comparison">
|
||||
<div class="container">
|
||||
<h2>Comparison with other protocols</h2>
|
||||
<div class="table-holder">
|
||||
<table class="systems">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="simplex"><img alt="simplex logo" src="img/icon.svg" /> SimpleX chat</th>
|
||||
<th>Signal, big platforms</th>
|
||||
<th>XMPP, Matrix</th>
|
||||
<th>P2P protocols</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Requires global identity</td>
|
||||
<td class="highlight good">No - private</td>
|
||||
<td class="highlight bad">Yes <sup>1</sup></td>
|
||||
<td class="highlight bad">Yes <sup>2</sup></td>
|
||||
<td class="highlight bad">Yes <sup>3</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Possibility of MITM</td>
|
||||
<td class="highlight good">No - secure</td>
|
||||
<td class="highlight bad">Yes <sup>4</sup></td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dependence on DNS</td>
|
||||
<td class="highlight good">No - resilient</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight good">No</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Single or centralized network</td>
|
||||
<td class="highlight good">No - decentralized</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight good">No - federated <sup>5</sup></td>
|
||||
<td class="highlight bad">Yes <sup>6</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Central component or other network-wide attack</td>
|
||||
<td class="highlight good">No - resilient</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight bad">Yes <sup>2</sup></td>
|
||||
<td class="highlight bad">Yes <sup>7</sup></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-comments">
|
||||
<ul class="legend">
|
||||
<li class="good">Good</li>
|
||||
<li class="bad">Bad</li>
|
||||
</ul>
|
||||
|
||||
<div class="footnotes">
|
||||
<ol>
|
||||
<li>Usually based on a phone number, in some cases on usernames</li>
|
||||
<li>DNS-based addresses</li>
|
||||
<li>Public key or some other globally unique ID</li>
|
||||
<li>If operator’s servers are compromised</li>
|
||||
<li>Does not protect users' metadata</li>
|
||||
<li>
|
||||
While P2P are distributed, they are not federated - they operate as a single network
|
||||
</li>
|
||||
<li>
|
||||
P2P networks either have a central authority or the whole network can be compromised -
|
||||
see
|
||||
<a
|
||||
href="https://github.com/simplex-chat/protocol#comparison-with-p2p-messaging-protocols"
|
||||
>here</a
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="messaging">
|
||||
<div class="container flex flex-col items-center">
|
||||
<div>
|
||||
<h2>SimpleX messaging protocol</h2>
|
||||
<h3>Unidirectional (simplex) queues</h3>
|
||||
<p>
|
||||
<a
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/master/protocol/simplex-messaging.md"
|
||||
target="_blank"
|
||||
>Simplex messaging protocol</a
|
||||
>
|
||||
(SMP) for messaging via secure persistent queues will serve as the low level protocol for
|
||||
SimpleX chat - see
|
||||
<a href="https://github.com/simplex-chat/simplex-messaging" target="_blank"
|
||||
>demo server implementation</a
|
||||
>.<br />
|
||||
It uses different encryption keys for each message queue - the key is passed via existing
|
||||
secure channel - e.g. QR code or another simplex queue.<br />
|
||||
</p>
|
||||
</div>
|
||||
<img alt="simplex messaging protocol" src="./img/messaging.png">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="chat">
|
||||
<div class="container flex flex-col items-center">
|
||||
<div>
|
||||
<h2>Chat</h2>
|
||||
<h3>Communication integrity</h3>
|
||||
<p>
|
||||
Each chat uses two (or more) simplex queues for duplex communication. Each message contains the
|
||||
hash of the previous message to detect if messages are lost or changed.
|
||||
</p>
|
||||
</div>
|
||||
<img alt="simplex chat: duplex conversation" src="./img/chat.png">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="simplex">
|
||||
<div class="container">
|
||||
<article id="use-simplex" class="half">
|
||||
<h3>Use SimpleX</h3>
|
||||
<p>
|
||||
SimpleX chat terminal client
|
||||
<a href="https://github.com/simplex-chat/simplex-chat/releases/tag/v2.0.0" target="_blank">v2.0.0</a> is
|
||||
released!<br />
|
||||
– groups and files<br />
|
||||
– two-layer E2E encryption, with double-ratchet algorithm<br />
|
||||
– protocol is compatible with mobile apps<br />
|
||||
</p>
|
||||
<p>
|
||||
You can use our servers or deploy your own, e.g. using
|
||||
<a href="https://github.com/simplex-chat/simplexmq#deploy-smp-server-on-linode" target="_blank">
|
||||
StackScript on Linode</a>.
|
||||
</p>
|
||||
<p>
|
||||
Sign up to be updated about the new releases.
|
||||
</p>
|
||||
<form class="sign-up"
|
||||
action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&id=ad6037a2fe"
|
||||
method="post" target="_blank" novalidate>
|
||||
<div>
|
||||
<input name="EMAIL" placeholder="Your email" />
|
||||
<span style="position: absolute; left: -5000px" aria-hidden="true">
|
||||
<input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
|
||||
</span>
|
||||
<button type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</article>
|
||||
|
||||
<article id="join-simplex" class="half">
|
||||
<h3>Join SimpleX</h3>
|
||||
<p>
|
||||
The project can move faster with your help.<br />
|
||||
We develop it in Haskell.
|
||||
</p>
|
||||
|
||||
<div id="contacts">
|
||||
<p>
|
||||
<a href="mailto:chat@simplex.chat">
|
||||
<span class="button">Email</span> chat@simplex.chat</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://github.com/simplex-chat/simplex-chat" target="_blank"><span
|
||||
class="button">Join</span> github.com/simplex-chat</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"><span class="button">Donate</span>
|
||||
opencollective.com/simplex-chat</a> <strong>(now accepts crypto)</strong>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<img alt="simplex logo" class="logo d-none-992" src="./img/simplex.svg" />
|
||||
<div class="copyright__text_and_links">
|
||||
<p class="copyright">© 2020-22 SimpleX | Open-Source Project <span class="d-none-576">|</span></p>
|
||||
<div>
|
||||
<a class="" href="https://github.com/simplex-chat" target="_blank"><img
|
||||
src="./img/icons/github.svg"></a>
|
||||
<a class="" href="https://www.reddit.com/r/SimpleXChat/" target="_blank"><img
|
||||
src="./img/icons/reddit.svg"></a>
|
||||
<a class="" href="https://twitter.com/simplexchat" target="_blank"><img
|
||||
src="./img/icons/twitter.svg"></a>
|
||||
<a class="" href="https://www.linkedin.com/company/simplex-chat/" target="_blank"><img
|
||||
src="./img/icons/linkedin.svg"></a>
|
||||
<a class="" href="mailto:chat@simplex.chat" target="_blank"><img src="./img/icons/email.svg"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="github d-none-992">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/protocol" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
---
|
||||
layout: layouts/main.html
|
||||
title: "SimpleX Chat"
|
||||
---
|
||||
<h1>Hello World</h1>
|
||||
426
website/src/index1.html
Normal file
426
website/src/index1.html
Normal file
@ -0,0 +1,426 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SimpleX Chat: private, secure, no user identitifiers</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Free open-source chat protocol and software - complete privacy, security and ownership of your contacts and messages."
|
||||
/>
|
||||
<meta name="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="SimpleX chat: private, secure, de-centralised" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Free open-source chat protocol and software - complete privacy, security and ownership of your contacts and messages."
|
||||
/>
|
||||
<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>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include "nav.html" %}
|
||||
|
||||
<section id="demo" class="z-10">
|
||||
<div class="container">
|
||||
<h1>SimpleX Chat</h1>
|
||||
<h3>Private & encrypted - the only platform without user identifiers!</h3>
|
||||
<div class="app__links">
|
||||
<a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img src="./img/apple_store.svg" height="42"></a>
|
||||
<a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img src="./img/google_play.svg"></a>
|
||||
<a href="https://app.simplex.chat" target="_blank" title="SimpleX F-Droid Repository"><img src="./img/f_droid.svg" height="41"></a>
|
||||
<a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img src="./img/testflight.png" width="41" height="41"></a>
|
||||
<a href="https://github.com/simplex-chat/website/raw/master/simplex.apk" target="_blank"><img src="./img/apk_icon.png" width="41" height="41"></a>
|
||||
</div>
|
||||
<p class="d-none-576">You can download terminal chat app from GitHub or using this command:</p>
|
||||
<p class="content_copy_with_tooltip install d-none-576">
|
||||
<span class="content">curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/master/install.sh | bash</span>
|
||||
<span class="tooltip">
|
||||
<span class="tooltiptext">Copy to clipboard</span>
|
||||
<img class="content_copy" src="./img/icons/content-copy.svg">
|
||||
</span>
|
||||
</p>
|
||||
<div class="all-users">
|
||||
<div class="user alice">
|
||||
<h3>Alice</h3>
|
||||
<div class="terminal">
|
||||
<div class="display"></div>
|
||||
<div class="input"></div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="user bob d-none">
|
||||
<h3>Bob</h3>
|
||||
<div class="terminal">
|
||||
<div class="display"></div>
|
||||
<div class="input"></div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="user simplex_mobile d-none-890">
|
||||
<img src="./img/simplex_mobile.png" alt="" width="320">
|
||||
</div>
|
||||
<div class="user tom d-none">
|
||||
<h3>Tom</h3>
|
||||
<div class="terminal">
|
||||
<div class="display"></div>
|
||||
<div class="input"></div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="run-demo d-none-890">Run demo</button>
|
||||
<button class="run-faster d-none-890">Faster!</button>
|
||||
<button class="try-it d-none-890">Try it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="introduction">
|
||||
<div class="container">
|
||||
<h2>Privacy redefined</h2>
|
||||
<h3>SimpleX advantage:</h3>
|
||||
<p>SimpleX ensures data and meta-data privacy</p>
|
||||
<p>with a new protocol design – it delivers messages</p>
|
||||
<p>without using senders' and recipients' identifiers,</p>
|
||||
<p>unlike any other messaging platform.</p>
|
||||
<figure class="section">
|
||||
<div class="feature">
|
||||
<div class="doodle control"></div>
|
||||
<h4>Security</h4>
|
||||
<p>Two-layer encryption and communication integrity</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="doodle privacy"></div>
|
||||
<h4>Privacy</h4>
|
||||
<p>Your contacts and messages are stored on your device</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="doodle convenience"></div>
|
||||
<h4>Convenience</h4>
|
||||
<p>Easy to add contacts and start talking</p>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="problem">
|
||||
<div class="container">
|
||||
<h2>Problem: chat security</h2>
|
||||
<a id="problem-explained"></a>
|
||||
<section class="problem intro">
|
||||
<h3>End-to-end encryption?</h3>
|
||||
<p>Alice sends the key to Bob (e.g. via p2p network or via chat server)</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="Alice sends the key to Bob" src="./img/problem11.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
</figure>
|
||||
</div>
|
||||
<p>Now Bob can send encrypted messages to Alice - he believes it is secure!</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="They believe it is secure" src="./img/problem12.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<section class="problem explained">
|
||||
<h3>Man-in-the-middle attack!</h3>
|
||||
<p>But the key can be intercepted and substituted by Tom (the attacker)</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="key is intercepted" src="./img/problem21.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
<div class="tom">Tom</div>
|
||||
</figure>
|
||||
</div>
|
||||
<p>Now the attacker can read the messages without Alice or Bob knowing</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="attacker can read messages" src="./img/problem22.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
<div class="tom">Tom</div>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<div class="pagination">
|
||||
<a class="page intro" href="#problem-intro"></a>
|
||||
<a class="page explained" href="#problem-explained"></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solution">
|
||||
<div class="container">
|
||||
<h2>What is the solution?</h2>
|
||||
<p>
|
||||
To create secure encrypted channel you need an existing secure channel
|
||||
<br />where you can pass the encryption key (or key fingerprint).
|
||||
</p>
|
||||
<p>Any alternative solution can be compromised.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="connection">
|
||||
<div class="container">
|
||||
<h2>Make a private connection!</h2>
|
||||
<h3>To add contact and to start chat</h3>
|
||||
<p>
|
||||
Adding a contact in mobile app will require sharing your one-time QR code.
|
||||
<br>In the <a href="https://github.com/simplex-chat/simplex-chat">terminal UI</a> you need to share an invitation with your contact.
|
||||
</p>
|
||||
<h4>After creating your chat profile in the app:</h4>
|
||||
<figure class="section">
|
||||
<figure class="conn-stage">
|
||||
<p>1.<br>Show QR code or share link</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: show QR code to add contact" src="./img/1_show_qr_code.png" width="187px"/>
|
||||
</figure>
|
||||
<figure class="party alice small">Alice</figure>
|
||||
</figure>
|
||||
<img src="img/arrow.svg" class="arrow" />
|
||||
<figure class="conn-stage">
|
||||
<p>2.<br>Your contact scans QR code or opens link</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: scan QR code" src="./img/2_scan_qr_code.png" width="187px"/>
|
||||
</figure>
|
||||
<figure class="party bob small">Bob</figure>
|
||||
</figure>
|
||||
<img src="img/arrow.svg" class="arrow" />
|
||||
<figure class="conn-stage">
|
||||
<p>3.<br>A private connection is established</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: confirm contact" src="./img/3_connected.png" width="187px"/>
|
||||
</figure>
|
||||
<figure class="party alice small">Alice</figure>
|
||||
</figure>
|
||||
<img src="img/arrow.svg" class="arrow" />
|
||||
<figure class="conn-stage">
|
||||
<p>4.<br>Now you can chat privately!</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: start chat" src="./img/4_chat.png" width="187px"/ />
|
||||
</figure>
|
||||
<figure class="party bob small">Bob</figure>
|
||||
</figure>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="comparison">
|
||||
<div class="container">
|
||||
<h2>Comparison with other protocols</h2>
|
||||
<div class="table-holder">
|
||||
<table class="systems">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="simplex"><img alt="simplex logo" src="img/icon.svg" /> SimpleX chat</th>
|
||||
<th>Signal, big platforms</th>
|
||||
<th>XMPP, Matrix</th>
|
||||
<th>P2P protocols</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Requires global identity</td>
|
||||
<td class="highlight good">No - private</td>
|
||||
<td class="highlight bad">Yes <sup>1</sup></td>
|
||||
<td class="highlight bad">Yes <sup>2</sup></td>
|
||||
<td class="highlight bad">Yes <sup>3</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Possibility of MITM</td>
|
||||
<td class="highlight good">No - secure</td>
|
||||
<td class="highlight bad">Yes <sup>4</sup></td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dependence on DNS</td>
|
||||
<td class="highlight good">No - resilient</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight good">No</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Single or centralized network</td>
|
||||
<td class="highlight good">No - decentralized</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight good">No - federated <sup>5</sup></td>
|
||||
<td class="highlight bad">Yes <sup>6</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Central component or other network-wide attack</td>
|
||||
<td class="highlight good">No - resilient</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight bad">Yes <sup>2</sup></td>
|
||||
<td class="highlight bad">Yes <sup>7</sup></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-comments">
|
||||
<ul class="legend">
|
||||
<li class="good">Good</li>
|
||||
<li class="bad">Bad</li>
|
||||
</ul>
|
||||
|
||||
<div class="footnotes">
|
||||
<ol>
|
||||
<li>Usually based on a phone number, in some cases on usernames</li>
|
||||
<li>DNS-based addresses</li>
|
||||
<li>Public key or some other globally unique ID</li>
|
||||
<li>If operator’s servers are compromised</li>
|
||||
<li>Does not protect users' metadata</li>
|
||||
<li>
|
||||
While P2P are distributed, they are not federated - they operate as a single network
|
||||
</li>
|
||||
<li>
|
||||
P2P networks either have a central authority or the whole network can be compromised -
|
||||
see
|
||||
<a
|
||||
href="https://github.com/simplex-chat/protocol#comparison-with-p2p-messaging-protocols"
|
||||
>here</a
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="messaging">
|
||||
<div class="container flex flex-col items-center">
|
||||
<div>
|
||||
<h2>SimpleX messaging protocol</h2>
|
||||
<h3>Unidirectional (simplex) queues</h3>
|
||||
<p>
|
||||
<a
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/master/protocol/simplex-messaging.md"
|
||||
target="_blank"
|
||||
>Simplex messaging protocol</a
|
||||
>
|
||||
(SMP) for messaging via secure persistent queues will serve as the low level protocol for
|
||||
SimpleX chat - see
|
||||
<a href="https://github.com/simplex-chat/simplex-messaging" target="_blank"
|
||||
>demo server implementation</a
|
||||
>.<br />
|
||||
It uses different encryption keys for each message queue - the key is passed via existing
|
||||
secure channel - e.g. QR code or another simplex queue.<br />
|
||||
</p>
|
||||
</div>
|
||||
<img alt="simplex messaging protocol" src="./img/messaging.png">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="chat">
|
||||
<div class="container flex flex-col items-center">
|
||||
<div>
|
||||
<h2>Chat</h2>
|
||||
<h3>Communication integrity</h3>
|
||||
<p>
|
||||
Each chat uses two (or more) simplex queues for duplex communication. Each message contains the
|
||||
hash of the previous message to detect if messages are lost or changed.
|
||||
</p>
|
||||
</div>
|
||||
<img alt="simplex chat: duplex conversation" src="./img/chat.png">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="simplex">
|
||||
<div class="container">
|
||||
<article id="use-simplex" class="half">
|
||||
<h3>Use SimpleX</h3>
|
||||
<p>
|
||||
SimpleX chat terminal client
|
||||
<a href="https://github.com/simplex-chat/simplex-chat/releases/tag/v2.0.0" target="_blank">v2.0.0</a> is
|
||||
released!<br />
|
||||
– groups and files<br />
|
||||
– two-layer E2E encryption, with double-ratchet algorithm<br />
|
||||
– protocol is compatible with mobile apps<br />
|
||||
</p>
|
||||
<p>
|
||||
You can use our servers or deploy your own, e.g. using
|
||||
<a href="https://github.com/simplex-chat/simplexmq#deploy-smp-server-on-linode" target="_blank">
|
||||
StackScript on Linode</a>.
|
||||
</p>
|
||||
<p>
|
||||
Sign up to be updated about the new releases.
|
||||
</p>
|
||||
<form class="sign-up"
|
||||
action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&id=ad6037a2fe"
|
||||
method="post" target="_blank" novalidate>
|
||||
<div>
|
||||
<input name="EMAIL" placeholder="Your email" />
|
||||
<span style="position: absolute; left: -5000px" aria-hidden="true">
|
||||
<input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
|
||||
</span>
|
||||
<button type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</article>
|
||||
|
||||
<article id="join-simplex" class="half">
|
||||
<h3>Join SimpleX</h3>
|
||||
<p>
|
||||
The project can move faster with your help.<br />
|
||||
We develop it in Haskell.
|
||||
</p>
|
||||
|
||||
<div id="contacts">
|
||||
<p>
|
||||
<a href="mailto:chat@simplex.chat">
|
||||
<span class="button">Email</span> chat@simplex.chat</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://github.com/simplex-chat/simplex-chat" target="_blank"><span
|
||||
class="button">Join</span> github.com/simplex-chat</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"><span class="button">Donate</span>
|
||||
opencollective.com/simplex-chat</a> <strong>(now accepts crypto)</strong>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<img alt="simplex logo" class="logo d-none-992" src="./img/simplex.svg" />
|
||||
<div class="copyright__text_and_links">
|
||||
<p class="copyright">© 2020-22 SimpleX | Open-Source Project <span class="d-none-576">|</span></p>
|
||||
<div>
|
||||
<a class="" href="https://github.com/simplex-chat" target="_blank"><img
|
||||
src="./img/icons/github.svg"></a>
|
||||
<a class="" href="https://www.reddit.com/r/SimpleXChat/" target="_blank"><img
|
||||
src="./img/icons/reddit.svg"></a>
|
||||
<a class="" href="https://twitter.com/simplexchat" target="_blank"><img
|
||||
src="./img/icons/twitter.svg"></a>
|
||||
<a class="" href="https://www.linkedin.com/company/simplex-chat/" target="_blank"><img
|
||||
src="./img/icons/linkedin.svg"></a>
|
||||
<a class="" href="mailto:chat@simplex.chat" target="_blank"><img src="./img/icons/email.svg"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="github d-none-992">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/protocol" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -6,3 +6,24 @@
|
||||
// else if(window.location.href.includes('blog')){
|
||||
// document.querySelector('.blog-nav-btn').classList.add('nav-button-active');
|
||||
// }
|
||||
// const btnMobile = document.getElementById('btn-mobile');
|
||||
// const hamburger = document.getElementById('hamburger');
|
||||
// const cross = document.getElementById('cross');
|
||||
|
||||
// function toggleMenu(event) {
|
||||
// if (event.type === 'touchstart') event.preventDefault();
|
||||
// const nav = document.querySelector('nav');
|
||||
// nav.classList.toggle('active');
|
||||
// hamburger.classList.toggle('hidden');
|
||||
// cross.classList.toggle('hidden');
|
||||
|
||||
// const active = nav.classList.contains('active');
|
||||
// if (active) {
|
||||
|
||||
// } else {
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
// btnMobile.addEventListener('click', toggleMenu);
|
||||
// btnMobile.addEventListener('touchstart', toggleMenu);
|
||||
@ -1,3 +1,3 @@
|
||||
/* @tailwind base; */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user