mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-08-04 11:00:23 +00:00
website: promoted groups on home page (#6323)
* website: promoted groups on home page * use local images when fallback listing is used, replace image on download error with group icon * welcome message * more links * rename CSS classes
This commit is contained in:
Evgeny
+64
-62
@@ -216,7 +216,7 @@
|
||||
/* Compute cover drawn size and inner safe frame (60% of full image on each axis) */
|
||||
/* --cover-bg-w: calc(min((3200 / 1920) * 100vw, (3200 / 1080) * 100vh));
|
||||
--cover-bg-h: calc(min((1800 / 1920) * 100vw, (1800 / 1080) * 100vh));
|
||||
--cover-safe-w: calc(var(--cover-bg-w) * 0.6);
|
||||
--cover-safe-w: calc(var(--cover-bg-w) * 0.6);
|
||||
--cover-safe-h: calc(var(--cover-bg-h) * 0.6);
|
||||
--cover-vw: calc(var(--cover-safe-w) / 100);
|
||||
--cover-vh: calc(var(--cover-safe-h) / 100); */
|
||||
@@ -701,7 +701,7 @@ main .section-bg {
|
||||
}
|
||||
}
|
||||
|
||||
.page-6 .communities-images {
|
||||
.page-6 .group-images {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -716,14 +716,14 @@ main .section-bg {
|
||||
gap: calc(var(--sec-vwu-desktop) * 2);
|
||||
}
|
||||
|
||||
.page-6 .communities-images img {
|
||||
.page-6 .group-images img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: calc(var(--sec-vhu-desktop) * 1.8);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.page-6 .communities-images {
|
||||
.page-6 .group-images {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
padding: calc(var(--sec-vhu-desktop) * 6) calc(var(--sec-vwu-desktop) * 3);
|
||||
@@ -734,76 +734,78 @@ main .section-bg {
|
||||
gap: calc(var(--sec-vwu-desktop) * 1.5);
|
||||
}
|
||||
|
||||
.page-6 .communities-images img {
|
||||
.page-6 .group-images img {
|
||||
border-radius: calc(var(--sec-vhu-desktop) * 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
Utility: position an image on the grid using CSS vars
|
||||
Usage example:
|
||||
<img class="pos" style="--c:3; --r:2; --w:2; --h:2" src="..." />
|
||||
places the image starting at column 3, row 2, spanning 2 columns × 2 rows.
|
||||
places the image starting at column 3, row 2, spanning 2 columns × 2 rows.
|
||||
*/
|
||||
.page-6 .communities-images>img:nth-child(1) { --c: 2; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(2) { --c: 4; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(3) { --c: 5; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(4) { --c: 7; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(5) { --c: 1; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(6) { --c: 3; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(7) { --c: 4; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(8) { --c: 5; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(9) { --c: 6; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(10) { --c: 8; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(11) { --c: 2; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(12) { --c: 3; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(13) { --c: 4; --r: 3; --w: 2; --h: 2 }
|
||||
.page-6 .communities-images>img:nth-child(14) { --c: 6; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(15) { --c: 7; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(16) { --c: 1; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(17) { --c: 3; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(18) { --c: 6; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(19) { --c: 8; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(20) { --c: 2; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(21) { --c: 4; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(22) { --c: 5; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(23) { --c: 6; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(24) { --c: 7; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(25) { --c: 3; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(26) { --c: 4; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(27) { --c: 6; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.simplex-image { --c: 4; --r: 3; --w: 2; --h: 2 }
|
||||
|
||||
.page-6 .group-images>a.group-image:nth-child(1) { --c: 2; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(2) { --c: 4; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(3) { --c: 5; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(4) { --c: 7; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(5) { --c: 1; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(6) { --c: 3; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(7) { --c: 4; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(8) { --c: 5; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(9) { --c: 6; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(10) { --c: 8; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(11) { --c: 2; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(12) { --c: 3; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(14) { --c: 6; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(15) { --c: 7; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(16) { --c: 1; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(17) { --c: 3; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(18) { --c: 6; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(19) { --c: 8; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(20) { --c: 2; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(21) { --c: 4; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(22) { --c: 5; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(23) { --c: 6; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(24) { --c: 7; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(25) { --c: 3; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(26) { --c: 4; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(27) { --c: 6; --r: 6; --w: 1; --h: 1 }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.page-6 .communities-images>img:nth-child(1) { --c: 3; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(2) { --c: 6; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(3) { --c: 2; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(4) { --c: 4; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(5) { --c: 5; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(6) { --c: 7; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(7) { --c: 3; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(8) { --c: 4; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(9) { --c: 5; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(10) { --c: 6; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(11) { --c: 8; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(12) { --c: 2; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(13) { --c: 4; --r: 4; --w: 2; --h: 2 }
|
||||
.page-6 .communities-images>img:nth-child(14) { --c: 3; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(15) { --c: 6; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(16) { --c: 7; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(17) { --c: 1; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(18) { --c: 3; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(19) { --c: 6; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(20) { --c: 7; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(21) { --c: 2; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(22) { --c: 4; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(23) { --c: 5; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(24) { --c: 6; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(25) { --c: 3; --r: 7; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(26) { --c: 4; --r: 7; --w: 1; --h: 1 }
|
||||
.page-6 .communities-images>img:nth-child(27) { --c: 6; --r: 7; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.simplex-image { --c: 4; --r: 4; --w: 2; --h: 2 }
|
||||
|
||||
.page-6 .group-images>a.group-image:nth-child(1) { --c: 3; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(2) { --c: 6; --r: 1; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(3) { --c: 2; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(4) { --c: 4; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(5) { --c: 5; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(6) { --c: 7; --r: 2; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(7) { --c: 3; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(8) { --c: 4; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(9) { --c: 5; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(10) { --c: 6; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(11) { --c: 8; --r: 3; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(12) { --c: 2; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(14) { --c: 3; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(15) { --c: 6; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(16) { --c: 7; --r: 4; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(17) { --c: 1; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(18) { --c: 3; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(19) { --c: 6; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(20) { --c: 7; --r: 5; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(21) { --c: 2; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(22) { --c: 4; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(23) { --c: 5; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(24) { --c: 6; --r: 6; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(25) { --c: 3; --r: 7; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(26) { --c: 4; --r: 7; --w: 1; --h: 1 }
|
||||
.page-6 .group-images>a.group-image:nth-child(27) { --c: 6; --r: 7; --w: 1; --h: 1 }
|
||||
}
|
||||
|
||||
.page-6 .communities-images img {
|
||||
.page-6 .group-images a {
|
||||
grid-column: var(--c) / span var(--w, 1);
|
||||
grid-row: var(--r) / span var(--h, 1);
|
||||
}
|
||||
|
||||
+42
-39
@@ -13,13 +13,13 @@
|
||||
<header id="navbar">
|
||||
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
|
||||
{# <a href="/" 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 id="menu">
|
||||
<ul>
|
||||
<li class="nav-link">
|
||||
<a href="/{{ '' if lang == 'en' else lang }}">
|
||||
<span class="nav-link-text">{{ "home" | i18n({}, lang ) | safe }}</span>
|
||||
</a>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<hr>
|
||||
@@ -65,9 +65,9 @@
|
||||
</a></li>
|
||||
<li><a href="/docs/protocol/simplex-chat.html">{{ "chat-protocol" | i18n({}, lang ) | safe }}</a></li>
|
||||
<li><a href="/docs/glossary.html">{{ "glossary" | i18n({}, lang ) | safe }}</a></li>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
{% 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 %}
|
||||
@@ -101,7 +101,7 @@
|
||||
<li class="nav-link">
|
||||
<a href="/jobs">
|
||||
<span class="nav-link-text">{{ "jobs" | i18n({}, lang ) | safe }}</span>
|
||||
</a>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<hr>
|
||||
@@ -142,7 +142,7 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</a>
|
||||
|
||||
|
||||
<ul class="sub-menu">
|
||||
{% for language in languages.languages %}
|
||||
{% if language.enabled %}
|
||||
@@ -159,7 +159,7 @@
|
||||
</div>
|
||||
<p>{{ language.name }}</p>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
@@ -219,7 +219,7 @@
|
||||
</section>
|
||||
|
||||
<section class="page-3 page">
|
||||
<div class="area">
|
||||
<div class="area">
|
||||
<div class="image"></div>
|
||||
<div class="text-container">
|
||||
<h2>You Own<br>The Next Web</h2>
|
||||
@@ -230,7 +230,7 @@
|
||||
</section>
|
||||
|
||||
<section class="page-4 page">
|
||||
<div class="area">
|
||||
<div class="area">
|
||||
<div class="image"></div>
|
||||
<div class="text-container">
|
||||
<h2>Communities That Last</h2>
|
||||
@@ -267,40 +267,42 @@
|
||||
|
||||
<section class="page-6 page">
|
||||
<div class="area">
|
||||
<div class="communities-images">
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/new/logo-symbol-dark.svg" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<img src="/img/design_3/testflight-dark.png" />
|
||||
<div class="group-images">
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="https://smp4.simplex.im/g#hr4lvFeBmndWMKTwqiodPz3VBo_6UmdGWocXd1SupsM" class="simplex-image" title="SimpleX users group" target="_blank">
|
||||
<img src="/img/new/logo-symbol-dark.svg">
|
||||
</a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
<a href="/directory" class="group-image" target="_blank"><img src="/img/group.svg"></a>
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<h2>Join SimpleX Communities</h2>
|
||||
<p>Hundreds of thousands people already trust SimpleX messaging.</p>
|
||||
<p>Find your communities in SimpleX directory and create your own!</p>
|
||||
<a class="gradient-text" href="/">View SimpleX Directory</a>
|
||||
<a class="gradient-text" href="/directory">View SimpleX Directory</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -308,6 +310,7 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/js/directory.js"></script>
|
||||
<script src="/js/design3.js"></script>
|
||||
<script>
|
||||
(function setVH(){
|
||||
@@ -337,7 +340,7 @@
|
||||
}, { threshold: [0, 0.02, 1] });
|
||||
io.observe(cover);
|
||||
})();
|
||||
|
||||
|
||||
window.addEventListener('click',(e)=>{
|
||||
if(e.target.closest('.nav-link')){
|
||||
if(e.target.closest('.nav-link').classList.contains('active')){
|
||||
|
||||
+237
-1
@@ -1,8 +1,10 @@
|
||||
const isMobile = {
|
||||
Android: () => navigator.userAgent.match(/Android/i),
|
||||
iOS: () => navigator.userAgent.match(/iPhone|iPad|iPod/i)
|
||||
iOS: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
|
||||
any: () => navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)
|
||||
};
|
||||
|
||||
(function() {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const googlePlayBtn = document.querySelector('.google-play-btn');
|
||||
const appleStoreBtn = document.querySelector('.apple-store-btn');
|
||||
@@ -29,4 +31,238 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
testflightBtn.classList.remove('hidden');
|
||||
androidBtn.classList.remove('hidden');
|
||||
}
|
||||
|
||||
showPromotedGroups();
|
||||
});
|
||||
|
||||
async function showPromotedGroups() {
|
||||
welcome();
|
||||
const listing = await fetchJSON(simplexDirectoryDataURL + 'promoted.json');
|
||||
let [entries, imgPath] =
|
||||
Array.isArray(listing?.entries) && listing.entries.length > 0
|
||||
? [listing.entries, simplexDirectoryDataURL]
|
||||
: [fallbackEntries(), '/img/groups/'];
|
||||
const links = document.querySelectorAll('.group-images a.group-image');
|
||||
entries = shuffleEntries(listing.entries, links.length);
|
||||
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const link = links[i]
|
||||
const img = link.querySelector('img');
|
||||
const {displayName, imageFile, groupLink} = entries[i % entries.length];
|
||||
img.src = imageFile ? imgPath + imageFile : '/img/group.svg';
|
||||
img.addEventListener('error', () => img.src = '/img/group.svg');
|
||||
link.title = displayName;
|
||||
const groupLinkUri = groupLink.connShortLink ?? groupLink.connFullLink
|
||||
try {
|
||||
link.href = platformSimplexUri(groupLinkUri);
|
||||
} catch(e) {
|
||||
console.log(e);
|
||||
link.href = groupLinkUri;
|
||||
}
|
||||
}
|
||||
|
||||
function shuffleEntries(entries, count) {
|
||||
let a = entries.filter(e => e.displayName != simplexUsersGroup)
|
||||
shuffle();
|
||||
let result = a;
|
||||
while (result.length < count) {
|
||||
shuffle();
|
||||
result = result.concat(a);
|
||||
}
|
||||
return result;
|
||||
|
||||
function shuffle() {
|
||||
for (let i = a.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[a[i], a[j]] = [a[j], a[i]];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchJSON(url) {
|
||||
try {
|
||||
const response = await fetch(url)
|
||||
if (!response.ok) throw new Error(`HTTP status: ${response.status}`)
|
||||
return await response.json()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
function welcome() {
|
||||
console.log('%c%s', 'font-family: monospace; white-space: pre;',
|
||||
`Welcome to __ __
|
||||
___ ___ __ __ ___ _ ___\\ \\ / / ___ _ _ _ _____
|
||||
/ __|_ _| \\/ | _ \\ | | __ \\ V / / __| || | /_\\_ _|
|
||||
\\__ \\| || |\\/| | _/ |__| _| / . \\| (__| __ |/ _ \\| |
|
||||
|___/___|_| |_|_| |____|___/_/ \\_\\\\___|_||_/_/ \\_\\_|
|
||||
|
||||
SimpleX directory: https://simplex.chat/directory
|
||||
Ask SimpleX team: https://smp6.simplex.im/a#lrdvu2d8A1GumSmoKb2krQmtKhWXq-tyGpHuM7aMwsw
|
||||
GitHub: https://github.com/simplex-chat/simplex-chat
|
||||
Reddit: https://www.reddit.com/r/SimpleXChat
|
||||
X/Twitter: https://x.com/SimpleXChat
|
||||
|
||||
Docs
|
||||
----
|
||||
Whitepaper: https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md
|
||||
Bots API: https://github.com/simplex-chat/simplex-chat/tree/stable/bots
|
||||
TypeScript library: https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript
|
||||
Terminal CLI: https://github.com/simplex-chat/simplex-chat/blob/stable/docs/CLI.md
|
||||
Hosting SMP servers: https://simplex.chat/docs/server.html
|
||||
|
||||
Downloads
|
||||
---------
|
||||
Apps: https://simplex.chat/downloads
|
||||
Servers: https://github.com/simplex-chat/simplexmq/releases
|
||||
|
||||
Project
|
||||
-------
|
||||
About & Contact us: https://simplex.chat/about
|
||||
Privacy policy: https://simplex.chat/privacy
|
||||
Join team: https://simplex.chat/jobs
|
||||
Donations: https://github.com/simplex-chat/simplex-chat#please-support-us-with-your-donations
|
||||
`
|
||||
);
|
||||
}
|
||||
|
||||
function fallbackEntries() {
|
||||
console.log('Error: using hardcoded listing as fallback');
|
||||
return [
|
||||
{
|
||||
displayName: "Bitcoin&LightningNetwork",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp4.simplex.im/g#-xXBhQRrvRB1ffhxcPpB44Im1_ci4BMIdCHwj8m8IHo"
|
||||
},
|
||||
imageFile: "images/F4hPy5IGO6G9QUH6-nM_-A.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "Freedom.Tech",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp4.simplex.im/g#r5z3uzHp8_pL3ZPyuBCJWmvzQxMnc0Tj3QMLTEnyw6c"
|
||||
},
|
||||
imageFile: "images/HylzOLARvIhUR1wiq0fnJA.png"
|
||||
},
|
||||
{
|
||||
displayName: "Spirituality",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp5.simplex.im/g#OZ8ml_2dj5AutxnNIrHy0CPn1QdnSkQ0oh_84nAv5io"
|
||||
},
|
||||
imageFile: "images/eb2RINRsdEBI0a06ghzqVg.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "SovereignStack",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp5.simplex.im/g#u2D3BdOb3nt9wMR_qoweAINLcEZaU60Xjwfpf74Dq2I"
|
||||
},
|
||||
imageFile: "images/YLLz-47eBnAoIH1PKYJ75g.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "Monero",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp6.simplex.im/g#FlIy4-q4TzZDI9fK2aw3lQTUvnmaoiLCyeKCoP27kGU"
|
||||
},
|
||||
imageFile: "images/TwaN96DcV2OCMfUo6oJ4LQ.png"
|
||||
},
|
||||
{
|
||||
displayName: "GrapheneOS (unofficial)",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp5.simplex.im/g#6OTo6kP4ccV4lPOOHekZfOajdxGkxC1_DkAR39_cU4U"
|
||||
},
|
||||
imageFile: "images/zIotMF8Zoe85k956B48N9g.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "Aragonite - privacy search engine",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp4.simplex.im/g#qqkNFo9kdpype-ArQ6HdA_bBpngw37y3Hk-sjp-px_o"
|
||||
},
|
||||
imageFile: "images/vzejmEMUU_ttg2lJDIk5hA.png"
|
||||
},
|
||||
{
|
||||
displayName: "BasicSwap",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp5.simplex.im/g#yXMQy5Si6sD5YAdCB4DlUM0kvlKYcUfSiIvOA-RXI_U"
|
||||
},
|
||||
imageFile: "images/AXalaTZ4HsgGtEkaGFbclg.png"
|
||||
},
|
||||
{
|
||||
displayName: "Linux",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp5.simplex.im/g#gqXY-Fxwral34c4bsHlYKZ5QuB6ptVSRMwhWgLKHz54"
|
||||
},
|
||||
imageFile: "images/gqyRO21CwqK3huZ2zbkOqQ.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "ModernSurvival",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp5.simplex.im/g#e4_r2E20FSWl97XGsHyXoPOkW5B6SmjlWQ1ngVW6Umc"
|
||||
},
|
||||
imageFile: "images/5QzoN8PNFD2dkButszPu5g.png"
|
||||
},
|
||||
{
|
||||
displayName: "Qubes OS",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp5.simplex.im/g#COegA1s1ppZG4hRbcpuWwx_QWB4ScouQcIDWwXx64SY"
|
||||
},
|
||||
imageFile: "images/Wsdcf731ufbEOYpHc2rqrg.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "RoboSats",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp4.simplex.im/g#PNRhbupXbsSr5SpkjqP8IjkI6ACPCr2WOxAqSAW4jr0"
|
||||
},
|
||||
imageFile: "images/uZU6Cn1przsjVJ-DBm1-eA.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "Guardian Project (Unofficial)",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp5.simplex.im/g#7zpeTUzhVIwEbZpvo9SUGz1LE35jKfmF_AHYx5YLsxQ"
|
||||
},
|
||||
imageFile: "images/NvmOInofh4RSB2fHdN0zQA.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "Private Messaging Apps 2",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp6.simplex.im/g#aPhAePNB7Nn-W4kUBNBpZELXttysG-yAM8ZiU2XoB10"
|
||||
},
|
||||
imageFile: "images/9aT7qRY_JbSJsW4qDaIHEg.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "Cake Wallet - Official",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp5.simplex.im/g#D46rZgLF1eLDLkOyqYnaifRuZcYjlEMgkujKV2buH6k"
|
||||
},
|
||||
imageFile: "images/YhyznG68PNewCNjoD_ceOg.png"
|
||||
},
|
||||
{
|
||||
displayName: "CoMaps (EN)",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp4.simplex.im/g#mBdIDCJotrN7pimTmXoaAPybC7CmCaaAFxQcwultCvo"
|
||||
},
|
||||
imageFile: "images/BD6FXuHO-eKOnYCAzkRfmA.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "NBTV Community",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp6.simplex.im/g#RX598AUwyQBG6bqa4TOnEnUg7xONdrA-_e0CmNGxEBI"
|
||||
},
|
||||
imageFile: "images/n3VLCEBWhqU9rVtlEAKUhQ.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "Lossless Audio Community",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp6.simplex.im/g#D4P5ENAzT-JoVlFNvRC7geHkkMUuQ9IuhQQC15OFE-o"
|
||||
},
|
||||
imageFile: "images/B3xza7zUzYi3dHiRsg6Afg.jpg"
|
||||
},
|
||||
{
|
||||
displayName: "RetoSwap – Official SimpleXChat Group",
|
||||
groupLink: {
|
||||
connShortLink: "https://smp5.simplex.im/g#-_h6fBWisca6RKhteZtVuXol1a49vFH1Jo-n74fnRK0"
|
||||
},
|
||||
imageFile: "images/ESomaJp7MlFlThqcoj3Ycg.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
+37
-35
@@ -1,7 +1,5 @@
|
||||
(function() {
|
||||
const directoryDataURL = 'https://directory.simplex.chat/data/';
|
||||
|
||||
// const directoryDataURL = 'http://localhost:8080/directory-data/';
|
||||
if (!document.location.pathname.startsWith('/directory')) return;
|
||||
|
||||
let allEntries = [];
|
||||
|
||||
@@ -14,7 +12,7 @@ let currentSearch = '';
|
||||
let currentPage = 1;
|
||||
|
||||
async function initDirectory() {
|
||||
const listing = await fetchJSON(directoryDataURL + 'listing.json')
|
||||
const listing = await fetchJSON(simplexDirectoryDataURL + 'listing.json')
|
||||
const liveBtn = document.querySelector('#top-pagination .live');
|
||||
const newBtn = document.querySelector('#top-pagination .new');
|
||||
const topBtn = document.querySelector('#top-pagination .top');
|
||||
@@ -122,8 +120,6 @@ function roundedTs(s) {
|
||||
}
|
||||
}
|
||||
|
||||
const simplexUsersGroup = 'SimpleX users group';
|
||||
|
||||
function entrySortPriority(entry) {
|
||||
return entry.displayName === simplexUsersGroup
|
||||
? Number.MAX_VALUE
|
||||
@@ -262,7 +258,7 @@ function displayEntries(entries) {
|
||||
imgLinkElement.title = `Join ${displayName}`;
|
||||
|
||||
const imgElement = document.createElement('img');
|
||||
imgElement.src = imageFile ? directoryDataURL + imageFile : '/img/group.svg';
|
||||
imgElement.src = imageFile ? simplexDirectoryDataURL + imageFile : '/img/group.svg';
|
||||
imgElement.alt = displayName;
|
||||
imgElement.addEventListener('error', () => imgElement.src = '/img/group.svg');
|
||||
imgLinkElement.appendChild(imgElement);
|
||||
@@ -412,34 +408,6 @@ function targetBlank(uri) {
|
||||
return isCurrentSite(uri) ? '' : ' target="_blank"'
|
||||
}
|
||||
|
||||
const simplexAddressRegexp = /^simplex:\/([a-z]+)#(.+)/i;
|
||||
|
||||
const simplexShortLinkTypes = ["a", "c", "g", "i", "r"];
|
||||
|
||||
function platformSimplexUri(uri) {
|
||||
if (isMobile.any()) return uri;
|
||||
const res = uri.match(simplexAddressRegexp);
|
||||
if (!res || !Array.isArray(res) || res.length < 3) return uri;
|
||||
const linkType = res[1];
|
||||
const fragment = res[2];
|
||||
if (simplexShortLinkTypes.includes(linkType)) {
|
||||
const queryIndex = fragment.indexOf('?');
|
||||
if (queryIndex === -1) return uri;
|
||||
const hashPart = fragment.substring(0, queryIndex);
|
||||
const queryStr = fragment.substring(queryIndex + 1);
|
||||
const params = new URLSearchParams(queryStr);
|
||||
const host = params.get('h');
|
||||
if (!host) return uri;
|
||||
params.delete('h');
|
||||
let newFragment = hashPart;
|
||||
const remainingParams = params.toString();
|
||||
if (remainingParams) newFragment += '?' + remainingParams;
|
||||
return `https://${host}:/${linkType}#${newFragment}`;
|
||||
} else {
|
||||
return `https://simplex.chat/${linkType}#${fragment}`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderMarkdown(fts) {
|
||||
let html = '';
|
||||
for (const ft of fts) {
|
||||
@@ -509,3 +477,37 @@ function renderMarkdown(fts) {
|
||||
return html;
|
||||
}
|
||||
})();
|
||||
|
||||
const simplexDirectoryDataURL = 'https://directory.simplex.chat/data/';
|
||||
|
||||
// const simplexDirectoryDataURL = 'http://localhost:8080/directory-data/';
|
||||
|
||||
const simplexUsersGroup = 'SimpleX users group';
|
||||
|
||||
const simplexAddressRegexp = /^simplex:\/([a-z]+)#(.+)/i;
|
||||
|
||||
const simplexShortLinkTypes = ["a", "c", "g", "i", "r"];
|
||||
|
||||
function platformSimplexUri(uri) {
|
||||
if (isMobile.any()) return uri;
|
||||
const res = uri.match(simplexAddressRegexp);
|
||||
if (!res || !Array.isArray(res) || res.length < 3) return uri;
|
||||
const linkType = res[1];
|
||||
const fragment = res[2];
|
||||
if (simplexShortLinkTypes.includes(linkType)) {
|
||||
const queryIndex = fragment.indexOf('?');
|
||||
if (queryIndex === -1) return uri;
|
||||
const hashPart = fragment.substring(0, queryIndex);
|
||||
const queryStr = fragment.substring(queryIndex + 1);
|
||||
const params = new URLSearchParams(queryStr);
|
||||
const host = params.get('h');
|
||||
if (!host) return uri;
|
||||
params.delete('h');
|
||||
let newFragment = hashPart;
|
||||
const remainingParams = params.toString();
|
||||
if (remainingParams) newFragment += '?' + remainingParams;
|
||||
return `https://${host}:/${linkType}#${newFragment}`;
|
||||
} else {
|
||||
return `https://simplex.chat/${linkType}#${fragment}`;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user