IntenseFinance/simplex-chat
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

website: add RTL languages compatibility (#2056)

Browse Source 
* website: add RTL languages compatibility

* website: add few changes

- update tailwindcss version
- add few stylings
- move to rtl true false approach

* website: set lang:en to rtl:true for testing

* website: add arabic key values & textual flag

* website: fix strong tag issues in ar translation.

* website: flip navbar for rtl languages

* disable Arabic

---------

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
This commit is contained in:
M Sarmad Qadeer
2023-03-31 21:14:20 +05:00
committed by GitHub
parent 7f1214688a
commit 4cd90d74ad
12 changed files with 120 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/.eleventy.js
View File

@@ -31,7 +31,7 @@ const translations = require("./translations.json")
module.exports = function (ty) {
ty.addShortcode("cfg", (name) => globalConfig[name])
ty.addShortcode("getlang", (path) => {
ty.addFilter("getlang", (path) => {
const lang = path.split("/")[1]
if (supportedRoutes.includes(lang)) return "en"
else if (supportedLangs.includes(lang)) return lang

8
website/langs/ar.json
View File

@@ -35,7 +35,7 @@
"simplex-chat-protocol": "بروتوكول دردشة SimpleX",
"developers": "المطورين",
"hero-subheader": "أول نظام مراسلة<br> بدون معرفات المستخدم",
"hero-p-1": "تحتوي التطبيقات الأخرى على معرّفات مستخدم: Signal ، و Matrix ، و Session ، و Briar ، و Jami ، و Cwtch ، وما إلى ذلك. <br> SimpleX ليس لديه ، <strong> ولا حتى أرقام عشوائية <strong/>. <br> وهذا يحسن خصوصيتك بشكل جذري.",
"hero-p-1": "تحتوي التطبيقات الأخرى على معرّفات مستخدم: Signal ، و Matrix ، و Session ، و Briar ، و Jami ، و Cwtch ، وما إلى ذلك. <br> SimpleX ليس لديه ، <strong> ولا حتى أرقام عشوائية </strong>. <br> وهذا يحسن خصوصيتك بشكل جذري.",
"features": "الميزات",
"hero-2-header": "قم بإجراء اتصال خاص",
"hero-overlay-1-title": "كيف يعمل SimpleX؟",
@@ -124,10 +124,10 @@
"privacy-matters-overlay-card-3-p-2": "واحدة من أكثر القصص إثارة للصدمة هي تجربة <a href='https://en.wikipedia.org/wiki/Mohamedou_Ould_Slahi' target='_blank'> محمدو ولد صلاحي </a> الموصوفة في مذكراته والموضحة في فيلم موريتاني. تم وضعه في معتقل غوانتانامو بدون محاكمة ، وتعرض للتعذيب هناك لمدة 15 عامًا بعد مكالمة هاتفية مع قريبه في أفغانستان ، للاشتباه في تورطه في هجمات 11 سبتمبر ، على الرغم من أنه عاش في ألمانيا طوال السنوات العشر الماضية.",
"privacy-matters-overlay-card-3-p-3": "يتم القبض على الأشخاص العاديين بسبب ما يشاركونه عبر الإنترنت ، حتى عبر حساباتهم \"المجهولة\"، <a href='https://www.dailymail.co.uk/news/article-11282263/Moment-police-swoop-house-devout-catholic-mother-malicious-online-posts.html' target='_blank'>وحتى في البلدان الديمقراطية</a>.",
"simplex-unique-overlay-card-1-p-1": "على عكس أنظمة المراسلة الأخرى ، <strong>لا يحتوي SimpleX على معرفات مخصصة للمستخدمين</strong>. لا يعتمد على أرقام الهواتف أو العناوين المستندة إلى النطاقات (مثل البريد الإلكتروني أو XMPP)، أسماء المستخدمين، المفاتيح العامة أو حتى الأرقام العشوائية لتحديد مستخدميها &mdash; لا نعرف عدد الأشخاص الذين يستخدمون خوادم SimpleX الخاصة بنا.",
"simplex-unique-overlay-card-1-p-2": "لتسليم الرسائل ، يستخدم SimpleX <a href='https://csrc.nist.gov/glossary/term/Pairwise_Pseudonymous_Identifier'> العناوين المزدوجة المجهولة </a> لقوائم انتظار الرسائل أحادية الاتجاه ، منفصلة عن الرسائل المستلمة والمرسلة ، عادةً عبر خوادم مختلفة . إن استخدام SimpleX يشبه امتلاك <strong> بريد إلكتروني أو هاتف مؤقتمختلف لكل جهة اتصال ، ولا توجد متاعب في إدارتها.",
"simplex-unique-overlay-card-3-p-1": "يخزن SimpleX Chat جميع بيانات المستخدم على أجهزة العميل فقط باستخدام <strong> تنسيق قاعدة بيانات محمولة مشفرة <strong/> يمكن تصديرها ونقلها إلى أي جهاز مدعوم.",
"simplex-unique-overlay-card-1-p-2": "لتسليم الرسائل ، يستخدم SimpleX <a href='https://csrc.nist.gov/glossary/term/Pairwise_Pseudonymous_Identifier'> العناوين المزدوجة المجهولة </a> لقوائم انتظار الرسائل أحادية الاتجاه ، منفصلة عن الرسائل المستلمة والمرسلة ، عادةً عبر خوادم مختلفة . إن استخدام SimpleX يشبه امتلاك <strong> بريد إلكتروني أو هاتف مؤقتمختلف لكل جهة اتصال </strong>، ولا توجد متاعب في إدارتها.",
"simplex-unique-overlay-card-3-p-1": "يخزن SimpleX Chat جميع بيانات المستخدم على أجهزة العميل فقط باستخدام <strong> تنسيق قاعدة بيانات محمولة مشفرة </strong> يمكن تصديرها ونقلها إلى أي جهاز مدعوم.",
"simplex-unique-overlay-card-3-p-3": "على عكس خوادم الشبكات الموحدة (البريد الإلكتروني أو XMPP أو Matrix) ، لا تقوم خوادم SimpleX بتخزين حسابات المستخدمين ، فهي تقوم فقط بترحيل الرسائل ، مما يحمي خصوصية كلا الطرفين.",
"simplex-unique-overlay-card-4-p-1": "يمكنك <strong> استخدام SimpleX مع الخوادم الخاصة بك <strong/> والاستمرار في التواصل مع الأشخاص الذين يستخدمون الخوادم المهيأة مسبقًا التي نقدمها.",
"simplex-unique-overlay-card-4-p-1": "يمكنك <strong> استخدام SimpleX مع الخوادم الخاصة بك </strong> والاستمرار في التواصل مع الأشخاص الذين يستخدمون الخوادم المهيأة مسبقًا التي نقدمها.",
"simplex-unique-overlay-card-4-p-3": "إذا كنت تفكر في التطوير لمنصة SimpleX ، على سبيل المثال ، بوت الدردشة لمستخدمي تطبيق SimpleX ، أو دمج مكتبة SimpleX Chat في تطبيقات الأجهزة المحمولة ، من فضلك <a href = 'https: //simplex.chat/contact# /?v=1&smp=smp%3A%2F%2FPQUV2eL0t7OStZOoAsPEV2QYWt4-xilbakvGUGOItUo%3D%40smp6.simplex.im%2FK1rslx-m5bpXVIdMZg9NLUZ_8JBm8xTt%23MCowBQYDK2VuAyEALDeVe-sG8mRY22LsXlPgiwTNs9dbiLrNuA7f3ZMAJ2w%3D' target='_blank'>تواصل معي</a> لأي نصيحة والدعم.",
"donate-here-to-help-us": "تبرع هنا لمساعدتنا",
"sign-up-to-receive-our-updates": "اشترك للحصول على آخر مستجداتنا",

2
website/package.json
View File

@@ -24,7 +24,7 @@
"markdown-it-replace-link": "^1.1.0",
"qrcode": "^1.5.1",
"slugify": "^1.6.5",
"tailwindcss": "^3.0.24"
"tailwindcss": "^3.2.7"
},
"dependencies": {
"eleventy-plugin-i18n": "^0.1.3"

21
website/src/_data/languages.json
View File

@@ -6,6 +6,21 @@
"flag": "/img/flags/en.svg",
"enabled": true
},
{
"label": "ar",
"name": "العربية",
"iconText": "العربية",
"textColor": "white",
"iconBg": "green",
"enabled": false,
"rtl": true
},
{
"label": "cs",
"name": "Čeština",
"flag": "/img/flags/cs.svg",
"enabled": true
},
{
"label": "de",
"name": "Deutsch",
@@ -18,12 +33,6 @@
"flag": "/img/flags/fr.svg",
"enabled": true
},
{
"label": "cs",
"name": "Čeština",
"flag": "/img/flags/cs.svg",
"enabled": true
},
{
"label": "it",
"name": "Italiano",

2
website/src/_includes/footer.html
View File

@@ -66,6 +66,6 @@
</div>
</article>
</div>
<a href="#" class="text-grey-black dark:text-white text-[16px] text-center lg:text-left font-medium leading-[28px] tracking-[0.01em] block mt-[60px]">{{ "copyright-label" | i18n({}, lang ) | safe }}</a>
<a href="#" class="text-grey-black dark:text-white text-[16px] text-center lg:ltr:text-left lg:rtl:text-right font-medium leading-[28px] tracking-[0.01em] block mt-[60px]">{{ "copyright-label" | i18n({}, lang ) | safe }}</a>
</div>
</section>

12
website/src/_includes/hero.html
View File

@@ -7,18 +7,18 @@
<img class="static-phone-mobile md:hidden" src="/img/new/mobile-hero.png" alt="" />
<article class="w-full xl:max-w-[600px] landing-page-header-article">
<p class="primary-header text-center xl:text-left font-bold text-[38px] md:text-[55px] leading-[46px] md:leading-[63px] mb-2 xl:mb-8">{{ "hero-header" | i18n({}, lang ) | safe }}</p>
<p class="secondary-header text-center xl:text-left font-bold text-[28px] md:text-[38px] leading-[36px] md:leading-[43px] mb-2 xl:mb-8 tracking-[0.01em]">{{ "hero-subheader" | i18n({}, lang ) | safe }}</p>
<p class="primary-header text-center xl:text-left xl:rtl:text-right font-bold text-[38px] md:text-[55px] leading-[46px] md:leading-[63px] mb-2 xl:mb-8">{{ "hero-header" | i18n({}, lang ) | safe }}</p>
<p class="secondary-header text-center xl:text-left xl:rtl:text-right font-bold text-[28px] md:text-[38px] leading-[36px] md:leading-[43px] mb-2 xl:mb-8 tracking-[0.01em]">{{ "hero-subheader" | i18n({}, lang ) | safe }}</p>
<p class="landing-page-header-article-paragraph text-black dark:text-white text-center xl:text-justify text-[16px] leading-[24px] mb-[20px] header-description">
{{ "hero-p-1" | i18n({}, lang ) | safe }}
</p>
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[1].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">{{ "hero-overlay-1-textlink" | i18n({}, lang ) | safe }}</a>
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[1].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left xl:rtl:text-right text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">{{ "hero-overlay-1-textlink" | i18n({}, lang ) | safe }}</a>
{{ overlay(hero_overlays.sections[1], lang) }}
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[0].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">{{ "hero-overlay-2-textlink" | i18n({}, lang ) | safe }}</a>
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[0].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left xl:rtl:text-right text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">{{ "hero-overlay-2-textlink" | i18n({}, lang ) | safe }}</a>
{{ overlay(hero_overlays.sections[0], lang) }}
</article>
<article class="w-full xl:max-w-[600px]">
<p class="text-black dark:text-white hidden md:block text-center xl:text-left text-[16px] leading-[26px] mb-[11px] md:mt-6">{{ "get-simplex" | i18n({}, lang ) | safe }}</p>
<p class="text-black dark:text-white hidden md:block text-center xl:text-left xl:rtl:text-right text-[16px] leading-[26px] mb-[11px] md:mt-6">{{ "get-simplex" | i18n({}, lang ) | safe }}</p>
<div class="socials flex items-center justify-center xl:justify-start gap-4 flex-wrap mt-[30px]">
<a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
<a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
@@ -62,7 +62,7 @@
</div>
<article class="w-full xl:max-w-[600px] landing-page-header-article px-5">
<p class="text-active-blue text-center xl:text-left font-bold text-[28px] md:text-[35px] leading-[36px] md:leading-[43px] mb-[28px]">
<p class="text-active-blue text-center xl:text-left xl:rtl:text-right font-bold text-[28px] md:text-[35px] leading-[36px] md:leading-[43px] mb-[28px]">
{{ "hero-2-header" | i18n({}, lang ) | safe }}
</p>
<p class="text-center text-black dark:text-white xl:text-justify leading-[24px] text-[16px] mb-10 xl:mb-[25px] header-description">

17
website/src/_includes/layouts/main.html
View File

@@ -1,5 +1,10 @@
<!DOCTYPE html>
<html lang="{% getlang page.url %}">
<html lang="{{ page.url | getlang }}"
{% for language in languages.languages %}
{% if language.label == page.url | getlang %}
dir="{{ "rtl" if language.rtl else "ltr" }}"
{% endif %}
{% endfor %}>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -8,11 +13,11 @@
<meta name="description" content="{{ description }}"/>
<meta name="Content-Type" content="text/html;charset=utf-8"/>
{% if path %}
<meta http-equiv="onion-location" content="{% cfg 'onionLocation' %}{{ path }}" />
<meta property="og:url" content="{% cfg 'siteLocation' %}{{ path }}" />
<meta http-equiv="onion-location" content="{% cfg 'onionLocation' %}{{ path }}" />
<meta property="og:url" content="{% cfg 'siteLocation' %}{{ path }}" />
{% else %}
<meta http-equiv="onion-location" content="{% cfg 'onionLocation' %}/" />
<meta property="og:url" content="{% cfg 'siteLocation' %}/" />
<meta http-equiv="onion-location" content="{% cfg 'onionLocation' %}/" />
<meta property="og:url" content="{% cfg 'siteLocation' %}/" />
{% endif %}
<meta property="og:type" content="website"/>
<meta property="og:title" content="{{ title }}"/>
@@ -20,7 +25,7 @@
<meta property="og:image" content="{% cfg 'siteLocation' %}/img/share_simplex.png"/>
<meta name="twitter:card" content="summary"/>
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico"/>
<link rel="stylesheet" href="/css/swiper-bundle.min.css">
<link href="/css/tailwind.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/style.css">

47
website/src/_includes/navbar.html
View File

@@ -1,12 +1,12 @@
<header class="">
<div class="flex items-center justify-end m-auto px-4 lg:px-7 h-[66px]">
<a href="{% getlangRoute page.url %}/" class="h-full hidden dark:hidden lg:flex items-center mr-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="{% getlangRoute page.url %}/" class="h-full hidden dark:lg:flex items-center mr-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-dark.png" alt="logo" /></a>
<a href="{% getlangRoute page.url %}/" class="dark:hidden lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="{% getlangRoute page.url %}/" class="hidden dark:inline-block dark:lg:hidden lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<div class="flex items-center flex-row justify-end m-auto px-4 lg:px-7 h-[66px]">
<a href="{% getlangRoute page.url %}/" 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="{% getlangRoute page.url %}/" 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="{% getlangRoute page.url %}/" 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="{% getlangRoute page.url %}/" 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">
<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 %}">
@@ -96,18 +96,37 @@
{% if 'blog' not in page.url %}
<div class="nav-link relative">
<a href="javascript:void(0);" class="flex items-center justify-end ml-8 lg:ml-5 xl:ml-10 h-6 w-8">
<img src="/img/flags/{% getlang page.url %}.svg" alt="" srcset="">
<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">
{% 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">
{% for language in languages.languages %}
{% if language.enabled %}
<li>
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor">
<img class="h-4" src="{{ language.flag }}" alt="" srcset="">
<p>{{ language.name }}</p>
</a>
{% if language.flag %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor">
<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">
<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 %}
@@ -115,12 +134,12 @@
</div>
{% endif %}
<button href="#" class="flex items-center justify-center h-[36px] w-[36px] ml-8 lg:ml-4 xl:ml-8 theme-switch-btn">
<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] ml-8 lg:ml-5 xl:ml-10 nav-toggle-btn">
<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" />

6
website/src/_includes/sections/join_simplex.html
View File

@@ -15,11 +15,11 @@
<form class="flex items-center w-full max-w-[540px] mb-20"
action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&amp;id=ad6037a2fe"
method="post" target="_blank" novalidate>
<input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5 placeholder:text-grey-black placeholder:dark:text-white placeholder:text-base placeholder:font-normal placeholder:tracking-[0.01em]" placeholder="{{ "enter-your-email-address" | i18n({}, lang ) | safe }}">
<span style="position: absolute; left: -5000px" aria-hidden="true">
<input name="EMAIL" type="text" class="h-[44px] ltr:rounded-l-[34px] rtl:rounded-r-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5 placeholder:text-grey-black placeholder:dark:text-white placeholder:text-base placeholder:font-normal placeholder:tracking-[0.01em]" placeholder="{{ "enter-your-email-address" | i18n({}, lang ) | safe }}">
<span aria-hidden="true" class="hidden">
<input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
</span>
<input type="submit" class="h-[44px] rounded-r-[34px] bg-primary-light text-white text-center px-8">
<input type="submit" class="h-[44px] ltr:rounded-r-[34px] rtl:rounded-l-[34px] bg-primary-light text-white text-center px-8">
</form>
<hr class="block mb-7 mx-5 dark:opacity-[0.2] w-full">

23
website/src/_includes/sections/simplex_unique.html
View File

@@ -15,20 +15,20 @@
<div class="card-content absolute md:static px-4 md:px-0 bottom-[80px] right-1 left-1 h-[180px] md:h-fit pt-5 lg:pt-0 bg-primary-bg-light dark:bg-primary-bg-dark">
<div class="content-head">
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#{{ section.id }}</p>
<p class="w-full max-w-[617px] text-[25px] leading-[33px] lg:text-[35px] lg:leading-[45px] text-center md:text-left font-bold text-grey-black dark:text-white">{{ section.title | i18n({}, lang ) | safe }}</p>
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left md:rtl:text-right">#{{ section.id }}</p>
<p class="w-full max-w-[617px] text-[25px] leading-[33px] lg:text-[35px] lg:leading-[45px] text-center md:text-left md:rtl:text-right font-bold text-grey-black dark:text-white">{{ section.title | i18n({}, lang ) | safe }}</p>
</div>
<div class="content-body py-5 md:py-7">
{% if section.descBody %}
<div class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left">
<div class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left md:rtl:text-right">
{% include section.descBody %}
</div>
{% else %}
<p class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left">{{ section.desc | safe }}</p>
<p class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left md:rtl:text-right">{{ section.desc | safe }}</p>
{% endif %}
{% if section.overlayContent %}
<a href="javascript:void(0)" data-show-overlay="{{ section.overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-4 tracking-[0.02em] text-center md:text-left">{{ "learn-more" | i18n({}, lang ) | safe }}</a>
<a href="javascript:void(0)" data-show-overlay="{{ section.overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-4 tracking-[0.02em] text-center md:text-left md:rtl:text-right">{{ "learn-more" | i18n({}, lang ) | safe }}</a>
{% endif %}
</div>
</div>
@@ -56,10 +56,15 @@
</div>
<img class="fixed left-[-3px] top-[52%] swiper-button-prev unique-swiper-button-prev hidden md:inline-block dark:hidden" src="/img/new/arrow-left.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-next unique-swiper-button-next hidden md:inline-block dark:hidden" src="/img/new/arrow-right.svg" alt="">
<img class="fixed left-[-3px] top-[52%] swiper-button-prev unique-swiper-button-prev hidden dark:md:inline-block" src="/img/new/arrow-left-dark.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-next unique-swiper-button-next hidden dark:md:inline-block" src="/img/new/arrow-right-dark.svg" alt="">
<img class="fixed left-[-3px] top-[52%] swiper-button-prev unique-swiper-button-prev md:inline-block rtl:!hidden dark:!hidden" src="/img/new/arrow-left.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-next unique-swiper-button-next md:inline-block rtl:!hidden dark:!hidden" src="/img/new/arrow-right.svg" alt="">
<img class="fixed left-[-3px] top-[52%] swiper-button-prev unique-swiper-button-prev hidden dark:md:inline-block rtl:!hidden" src="/img/new/arrow-left-dark.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-next unique-swiper-button-next hidden dark:md:inline-block rtl:!hidden" src="/img/new/arrow-right-dark.svg" alt="">
<img class="fixed left-[-3px] top-[52%] swiper-button-next unique-swiper-button-next md:rtl:inline-block ltr:!hidden dark:!hidden" src="/img/new/arrow-left.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-prev unique-swiper-button-prev md:rtl:inline-block ltr:!hidden dark:!hidden" src="/img/new/arrow-right.svg" alt="">
<img class="fixed left-[-3px] top-[52%] swiper-button-next unique-swiper-button-next hidden md:dark:inline-block ltr:!hidden" src="/img/new/arrow-left-dark.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-prev unique-swiper-button-prev hidden md:dark:inline-block ltr:!hidden" src="/img/new/arrow-right-dark.svg" alt="">
<div class="swiper-pagination simplex-unique-swiper-pagination mt-100"></div>
</div>

21
website/src/css/style.css
View File

@@ -313,6 +313,14 @@ header nav {
display: none !important;
}
@media (max-width: 767px) {
.swiper-button-next, .swiper-button-prev {
opacity: 0;
pointer-events: none;
display: none !important;
}
}
.swiper-pagination-bullet {
height: 14.31px;
width: 14.31px;
@@ -366,6 +374,14 @@ header nav {
background-color: #70F0F9;
}
.swiper-rtl .swiper-button-prev{
right: 0 !important;
}
.swiper-rtl .swiper-button-next{
left: 0 !important;
}
/* What makes simplex private */
.card{
cursor: pointer;
@@ -464,6 +480,11 @@ header nav {
font-weight: 500;
text-align: left;
}
[dir="rtl"] #comparison table tbody tr > td:first-child{
text-align: right;
}
@media (min-width: 1024px) {
#comparison table tbody tr > td:first-child{
font-size: 18px;

14
website/src/index.html
View File

@@ -84,10 +84,16 @@ active_home: true
{% endfor %}
</div>
<img class="fixed left-[-3px] top-[55%] swiper-button-prev private-swiper-button-prev hidden md:inline-block dark:hidden" src="/img/new/arrow-left.svg" alt="">
<img class="fixed right-[-6px] top-[55%] swiper-button-next private-swiper-button-next hidden md:inline-block dark:hidden" src="/img/new/arrow-right.svg" alt="">
<img class="fixed left-[-3px] top-[55%] swiper-button-prev private-swiper-button-prev hidden dark:md:inline-block" src="/img/new/arrow-left-dark.svg" alt="">
<img class="fixed right-[-6px] top-[55%] swiper-button-next private-swiper-button-next hidden dark:md:inline-block" src="/img/new/arrow-right-dark.svg" alt="">
<img class="fixed left-[-3px] top-[52%] swiper-button-prev private-swiper-button-prev md:inline-block rtl:!hidden dark:!hidden" src="/img/new/arrow-left.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-next private-swiper-button-next md:inline-block rtl:!hidden dark:!hidden" src="/img/new/arrow-right.svg" alt="">
<img class="fixed left-[-3px] top-[52%] swiper-button-prev private-swiper-button-prev hidden dark:md:inline-block rtl:!hidden" src="/img/new/arrow-left-dark.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-next private-swiper-button-next hidden dark:md:inline-block rtl:!hidden" src="/img/new/arrow-right-dark.svg" alt="">
<img class="fixed left-[-3px] top-[52%] swiper-button-next private-swiper-button-next md:rtl:inline-block ltr:!hidden dark:!hidden" src="/img/new/arrow-left.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-prev private-swiper-button-prev md:rtl:inline-block ltr:!hidden dark:!hidden" src="/img/new/arrow-right.svg" alt="">
<img class="fixed left-[-3px] top-[52%] swiper-button-next private-swiper-button-next hidden md:dark:inline-block ltr:!hidden" src="/img/new/arrow-left-dark.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-prev private-swiper-button-prev hidden md:dark:inline-block ltr:!hidden" src="/img/new/arrow-right-dark.svg" alt="">
<div class="swiper-scrollbar dark:bg-grey-black dark:bg-opacity-[0.2]"></div>
</div>
</div>