mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-04-19 02:15:44 +00:00
3419ce293b
* website: downloads page * link * website: fix h2 headers issue * website: fix sidebar issue * website: fix language changer for downloads page in navbar * update, add security assessment section --------- Co-authored-by: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
309 lines
22 KiB
HTML
309 lines
22 KiB
HTML
{% set lang = page.url | getlang %}
|
|
{% set langName = "aaa" %}
|
|
{% for language in languages.languages %}
|
|
{% if language.label == page.url | getlang %}
|
|
{% set langName = language.name %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<header class="">
|
|
<div class="flex items-center flex-row justify-end m-auto px-4 lg:px-7 h-[66px]">
|
|
<a href="/{{ '' if lang == 'en' else lang }}" class="h-full hidden dark:hidden lg:flex items-center ltr:mr-auto rtl:ml-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-light.png" alt="logo" /></a>
|
|
<a href="/{{ '' if lang == 'en' else lang }}" class="h-full hidden dark:lg:flex items-center ltr:mr-auto rtl:ml-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-dark.png" alt="logo" /></a>
|
|
<a href="/{{ '' if lang == 'en' else lang }}" class="dark:hidden lg:hidden ltr:mr-auto rtl:ml-auto"><img class="h-[32px]" src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
|
|
<a href="/{{ '' if lang == 'en' else lang }}" class="hidden dark:inline-block dark:lg:hidden lg:hidden ltr:mr-auto rtl:ml-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
|
|
|
|
<nav class="bg-[#F0F1F2] dark:bg-gradient-radial-mobile dark:lg:bg-none lg:bg-transparent fixed 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-5 xl:gap-10 px-4 lg:px-0 h-full">
|
|
<ul class="flex flex-col lg:flex-row lg:items-center gap-3 py-4 lg:py-0 lg:gap-5 xl:gap-8">
|
|
|
|
<li class="nav-link relative {% if active_home %}active{% endif %}">
|
|
<a href="/{{ '' if lang == 'en' else lang }}" class="flex items-center justify-between gap-2 lg:py-5 whitespace-nowrap">
|
|
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">{{ "home" | i18n({}, lang ) | safe }}</span>
|
|
</a>
|
|
</li>
|
|
|
|
<hr class="dark:opacity-[0.1]" >
|
|
|
|
<li 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] text-black dark:text-white before:bg-black dark:before:bg-white">{{ "guide" | i18n({}, lang ) | safe }}</span>
|
|
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
|
|
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" 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"/>
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
|
|
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white dark:lg:bg-black 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">
|
|
{% for guide in guide_dropdown.items %}
|
|
<li><a href="{{ guide.url | url }}" class="{{ "active" if page.url == guide.url | url else '' }} lg:px-[20px] inline-block whitespace-nowrap">{{ guide.title | i18n({}, lang ) | safe }}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
|
|
<hr class="dark:opacity-[0.1]" >
|
|
|
|
<li 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] text-black dark:text-white before:bg-black dark:before:bg-white">{{ "reference" | i18n({}, lang ) | safe }}</span>
|
|
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
|
|
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" 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"/>
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
|
|
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white dark:lg:bg-black 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="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md"
|
|
target="_blank" class="lg:px-[20px] flex items-center gap-1"
|
|
>Whitepaper
|
|
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
|
|
</a></li>
|
|
<li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/simplex-messaging.md"
|
|
target="_blank" class="lg:px-[20px] flex items-center gap-1"
|
|
>{{ "smp-protocol" | i18n({}, lang ) | safe }}
|
|
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
|
|
</a></li>
|
|
<li><a href="/docs/protocol/simplex-chat.html" class="lg:px-[20px] inline-block"
|
|
>{{ "chat-protocol" | i18n({}, lang ) | safe }}</a></li>
|
|
<li><a href="/docs/glossary.html" class="lg:px-[20px] inline-block"
|
|
>{{ "glossary" | i18n({}, lang ) | safe }}</a></li>
|
|
|
|
<hr class=" h-[1px] w-full dark:opacity-[0.1]">
|
|
|
|
{% for doc in docs_dropdown.items %}
|
|
<li><a href="{{ doc.url | url }}" class="{{ "active" if page.url == doc.url | url else '' }} lg:px-[20px] inline-block whitespace-nowrap">{{ doc.title | i18n({}, lang ) | safe }}</a></li>
|
|
{% endfor %}
|
|
|
|
<hr class=" h-[1px] w-full dark:opacity-[0.1]">
|
|
|
|
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/apps/simplex-bot-advanced/Main.hs"
|
|
target="_blank" class="lg:px-[20px] flex items-center gap-1"
|
|
>{{ "chat-bot-example" | i18n({}, lang ) | safe }}
|
|
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
|
|
</a></li>
|
|
<li><a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript"
|
|
target="_blank" class="lg:px-[20px] flex items-center gap-1"
|
|
>TypeScript SDK
|
|
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
|
|
</a></li>
|
|
<li><a href="/docs/cli.html" class="lg:px-[20px] inline-block"
|
|
>{{ "terminal-cli" | i18n({}, lang ) | safe }}</a></li>
|
|
<li><a href="https://github.com/simplex-chat/simplexmq"
|
|
target="_blank" class="lg:px-[20px] flex items-center gap-1"
|
|
>SimpleXMQ
|
|
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
|
|
</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<hr class="dark:opacity-[0.1]" >
|
|
|
|
<li class="nav-link relative {% if active_jobs %}active{% endif %}">
|
|
<a href="/jobs" class="flex items-center justify-between gap-2 lg:py-5 whitespace-nowrap">
|
|
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">{{ "jobs" | i18n({}, lang ) | safe }}</span>
|
|
</a>
|
|
</li>
|
|
|
|
<hr class="dark:opacity-[0.1]" >
|
|
|
|
<li class="nav-link relative {% if active_blog %}active{% endif %}">
|
|
<a href="/blog" class="flex items-center justify-between gap-2 lg:py-5">
|
|
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">{{ "blog" | i18n({}, lang ) | safe }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations"
|
|
target="_blank" class="whitespace-nowrap flex items-center gap-1 self-center text-white dark:text-black text-[16px] font-medium tracking-[0.02em] rounded-[34px] bg-primary-light dark:bg-primary-dark py-3 lg:py-2 px-20 lg:px-5 mb-16 lg:mb-0"
|
|
>{{ "donate" | i18n({}, lang ) | safe }}
|
|
</a>
|
|
|
|
<div class="inline-block dark:hidden self-center mt-[8px]">
|
|
<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="hidden dark:inline-block self-center mt-[8px]">
|
|
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
|
|
data-color-scheme="no-preference: dark; light: dark; dark: dark;"
|
|
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{% if ('blog' not in page.url) and ('jobs' not in page.url) %}
|
|
<div class="nav-link relative flag-container">
|
|
<a href="javascript:void(0);" class="flex items-center justify-end ltr:ml-8 ltr:lg:ml-5 ltr:xl:ml-10 rtl:mr-8 rtl:lg:mr-5 rtl:xl:mr-10 h-6 w-8 whitespace-nowrap">
|
|
{% for language in languages.languages %}
|
|
{% if language.label == page.url | getlang %}
|
|
{% if language.flag %}
|
|
<img src="{{ language.flag }}" alt="" srcset="">
|
|
{% else %}
|
|
<div class="flex items-center justify-center" style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:32px; height:24px">
|
|
<p style="text-align:center; font-size:9px">{{ language.iconText }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</a>
|
|
|
|
<ul class="flex flex-col items-start gap-2 h-fit absolute top-11 -left-10 bg-white dark:bg-black mt-[10px] py-4 min-w-[170px] rounded-md shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu overflow-auto">
|
|
{% if ("docs" in page.url) or ('downloads' in page.url) %}
|
|
{% for supportedLang in supportedLangsForDoc %}
|
|
{% for language in languages.languages %}
|
|
{% if language.label == supportedLang %}
|
|
<li>
|
|
{% if language.flag %}
|
|
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor whitespace-nowrap">
|
|
<img class="h-4" src="{{ language.flag }}" alt="" srcset="">
|
|
<p>{{ language.name }}</p>
|
|
</a>
|
|
{% else %}
|
|
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor whitespace-nowrap">
|
|
<div class="flex items-center justify-center" style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
|
|
<p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
|
|
</div>
|
|
<p>{{ language.name }}</p>
|
|
</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% else %}
|
|
{% for language in languages.languages %}
|
|
{% if language.enabled %}
|
|
<li>
|
|
{% if language.flag %}
|
|
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor whitespace-nowrap">
|
|
<img class="h-4" src="{{ language.flag }}" alt="" srcset="">
|
|
<p>{{ language.name }}</p>
|
|
</a>
|
|
{% else %}
|
|
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor whitespace-nowrap">
|
|
<div class="flex items-center justify-center" style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
|
|
<p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
|
|
</div>
|
|
<p>{{ language.name }}</p>
|
|
</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<button href="#" class="flex items-center justify-center h-[36px] w-[36px] ltr:ml-8 ltr:lg:ml-4 ltr:xl:ml-8 rtl:mr-8 rtl:lg:mr-4 rtl:xl:mr-8 theme-switch-btn">
|
|
<img src="/img/new/sun.svg" alt="" srcset="" class="sun">
|
|
<img src="/img/new/moon.svg" alt="" srcset="" class="moon">
|
|
</button>
|
|
|
|
<button href="" id="btn-mobile" class="flex lg:hidden items-center justify-center h-[36px] w-[36px] ltr:ml-8 ltr:lg:ml-5 ltr:xl:ml-10 rtl:mr-8 rtl:lg:mr-5 rtl:xl:mr-10 nav-toggle-btn">
|
|
<img src="/img/new/hamburger.svg" id="hamburger" alt="" srcset="">
|
|
<svg class="fill-black dark:fill-white hidden" id="cross" width="13" height="13" viewBox="0 0 13 13" 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" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<SCript>
|
|
// switch theme
|
|
const sunIcon = document.querySelector('.sun');
|
|
const moonIcon = document.querySelector('.moon');
|
|
|
|
const userTheme = localStorage.getItem('theme');
|
|
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const prismThemeLink = document.getElementById('prism-theme')
|
|
|
|
const iconToggle = () => {
|
|
sunIcon.classList.toggle('hidden');
|
|
moonIcon.classList.toggle('hidden');
|
|
}
|
|
|
|
const themeCheck = () => {
|
|
if(userTheme === 'dark' || (!userTheme && systemTheme)){
|
|
document.documentElement.classList.add('dark');
|
|
moonIcon.classList.add('hidden');
|
|
if(prismThemeLink){
|
|
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
|
|
}
|
|
}
|
|
else{
|
|
sunIcon.classList.add('hidden');
|
|
if(prismThemeLink){
|
|
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
|
|
}
|
|
}
|
|
}
|
|
|
|
const themeSwitch = () => {
|
|
if(document.documentElement.classList.contains('dark')){
|
|
document.documentElement.classList.remove('dark');
|
|
localStorage.setItem('theme','light');
|
|
if(prismThemeLink){
|
|
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
|
|
}
|
|
iconToggle();
|
|
}
|
|
else{
|
|
document.documentElement.classList.add('dark');
|
|
localStorage.setItem('theme','dark');
|
|
if(prismThemeLink){
|
|
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
|
|
}
|
|
iconToggle();
|
|
}
|
|
}
|
|
|
|
const nav = document.querySelector('header nav');
|
|
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')){
|
|
document.body.classList.toggle('lock-scroll');
|
|
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');
|
|
}
|
|
}
|
|
else if(e.target.closest('.theme-switch-btn')){
|
|
themeSwitch();
|
|
}
|
|
})
|
|
|
|
themeCheck();
|
|
|
|
const changeHeaderBg = ()=>{
|
|
const header = document.querySelector('header')
|
|
const scrollValue = window.scrollY
|
|
if(scrollValue > 5){
|
|
header.classList.add('bg-primary-bg-light');
|
|
header.classList.add('dark:bg-primary-bg-dark');
|
|
}
|
|
else{
|
|
header.classList.remove('bg-primary-bg-light');
|
|
header.classList.remove('dark:bg-primary-bg-dark');
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll',changeHeaderBg);
|
|
</SCript> |