308 lines
23 KiB
HTML
308 lines
23 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#122c47">
|
||
<meta name="description" content="VibeChat — P2P-мессенджер: своя сеть, управляемый доступ к группам, защищённая личная переписка, звонки, рация и трансляции.">
|
||
<title>VibeChat — ваши люди, ваша сеть</title>
|
||
<link rel="icon" href="assets/vibechat.png" type="image/png">
|
||
<link rel="stylesheet" href="styles.css">
|
||
<script src="script.js" defer></script>
|
||
</head>
|
||
<body id="top">
|
||
<a class="skip-link" href="#main">Перейти к содержимому</a>
|
||
<svg class="icon-definitions" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
<defs>
|
||
<symbol id="icon-chat" viewBox="0 0 24 24">
|
||
<path d="M20 11.5a8 8 0 0 1-8 8H5l-3 2v-10a9 9 0 0 1 18 0Z"/>
|
||
<path d="M7 9h8M7 13h5"/>
|
||
</symbol>
|
||
<symbol id="icon-file" viewBox="0 0 24 24">
|
||
<path d="M14 2H5v20h14V7l-5-5Zm0 0v5h5M8 12h8M8 16h5"/>
|
||
</symbol>
|
||
<symbol id="icon-video" viewBox="0 0 24 24">
|
||
<rect x="2" y="5" width="13" height="14" rx="3"/>
|
||
<path d="m15 9 7-4v14l-7-4Z"/>
|
||
</symbol>
|
||
<symbol id="icon-radio" viewBox="0 0 24 24">
|
||
<rect x="9" y="2" width="6" height="12" rx="3"/>
|
||
<path d="M5 10v1a7 7 0 0 0 14 0v-1M12 18v4M8 22h8"/>
|
||
</symbol>
|
||
<symbol id="icon-live" viewBox="0 0 24 24">
|
||
<circle cx="12" cy="12" r="2"/>
|
||
<path d="M7.8 7.8a6 6 0 0 0 0 8.4m8.4 0a6 6 0 0 0 0-8.4M5 5a10 10 0 0 0 0 14m14 0a10 10 0 0 0 0-14"/>
|
||
</symbol>
|
||
<symbol id="icon-delivery" viewBox="0 0 24 24">
|
||
<path d="M3 11a9 9 0 1 1 2 7M3 4v7h7M12 6v6l4 2"/>
|
||
</symbol>
|
||
<symbol id="icon-arrow" viewBox="0 0 24 24">
|
||
<path d="M5 12h14m-6-6 6 6-6 6"/>
|
||
</symbol>
|
||
</defs>
|
||
</svg>
|
||
|
||
<header class="header">
|
||
<div class="container header-inner">
|
||
<a class="brand" href="#top" aria-label="VibeChat — в начало">
|
||
<img src="assets/vibechat.png" alt="" width="42" height="42">
|
||
<span>VibeChat<span class="brand-dot">.</span></span>
|
||
</a>
|
||
<nav aria-label="Основная навигация">
|
||
<a href="#features">Возможности</a>
|
||
<a href="#network">Как устроено</a>
|
||
<a href="#platforms">Платформы</a>
|
||
<a href="#opensource">Открытый код <span aria-hidden="true">↗</span></a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main">
|
||
<section class="hero container" aria-labelledby="hero-title">
|
||
<div class="hero-copy">
|
||
<p class="eyebrow"><span class="little-dot"></span> Децентрализованный мессенджер</p>
|
||
<h1 id="hero-title">Ваши люди.<br><span>Ваша сеть.</span></h1>
|
||
<p class="hero-description">VibeChat объединяет переписку, звонки и прямые эфиры
|
||
в сети устройств участников. Может работать без серверов.</p>
|
||
<a class="button button-dark" href="#network">Познакомиться с VibeChat
|
||
<svg class="icon" aria-hidden="true"><use href="#icon-arrow"/></svg>
|
||
</a>
|
||
<p class="hero-note">На компьютере и Android. На общем ядре uTun.</p>
|
||
</div>
|
||
|
||
<figure class="network-art">
|
||
<div class="art-heading"><span class="little-dot"></span> Связь внутри вашего круга <span class="art-label">P2P</span></div>
|
||
<svg class="network-drawing" viewBox="0 0 500 390" role="img" aria-labelledby="network-art-title network-art-description">
|
||
<title id="network-art-title">Сеть участников VibeChat</title>
|
||
<desc id="network-art-description">Телефоны и компьютеры участников образуют сеть.
|
||
Показан необязательный сервер группы: он упрощает связь и временно хранит данные.</desc>
|
||
<circle class="orbit" cx="250" cy="195" r="150"/>
|
||
<circle class="orbit orbit-inner" cx="250" cy="195" r="104"/>
|
||
<g class="network-lines">
|
||
<path d="m115 95 270 20-40 180-225 5-5-205 230 200M120 300l265-185M115 95l135 95 135-75M250 190l95 105M120 300l130-110"/>
|
||
</g>
|
||
<g class="signal-dots" fill="#d4f58b">
|
||
<circle cx="183" cy="143" r="4"/><circle cx="317" cy="153" r="4"/>
|
||
<circle cx="183" cy="246" r="4"/><circle cx="366" cy="207" r="4"/>
|
||
</g>
|
||
<g class="node node-you" transform="translate(115 95)">
|
||
<circle r="38"/>
|
||
<rect x="-10" y="-19" width="20" height="34" rx="4"/>
|
||
<path d="M-3 10h6"/>
|
||
<text y="66">Вы</text>
|
||
</g>
|
||
<g class="node" transform="translate(385 115)">
|
||
<circle r="32"/>
|
||
<rect x="-18" y="-14" width="36" height="24" rx="3"/>
|
||
<path d="M-24 17h48"/>
|
||
<text y="59">Участник</text>
|
||
</g>
|
||
<g class="node" transform="translate(250 190)">
|
||
<circle r="32"/>
|
||
<rect x="-10" y="-18" width="20" height="34" rx="4"/>
|
||
<path d="M-3 11h6"/>
|
||
<text y="60">Участник</text>
|
||
</g>
|
||
<g class="node" transform="translate(345 295)">
|
||
<circle r="32"/>
|
||
<rect x="-18" y="-14" width="36" height="24" rx="3"/>
|
||
<path d="M-24 17h48"/>
|
||
<text y="59">Участник</text>
|
||
</g>
|
||
<g class="node node-server" transform="translate(120 300)">
|
||
<circle r="32"/>
|
||
<rect x="-17" y="-16" width="34" height="12" rx="3"/>
|
||
<rect x="-17" y="4" width="34" height="12" rx="3"/>
|
||
<path d="M-10-10h3M-10 10h3M3-10h8M3 10h8"/>
|
||
<text y="59">Сервер группы</text>
|
||
</g>
|
||
</svg>
|
||
<figcaption><span>Сервер группы — по желанию</span><span aria-hidden="true">↗</span></figcaption>
|
||
</figure>
|
||
</section>
|
||
|
||
<div class="principles container" aria-label="Три главных принципа">
|
||
<div><span class="principle-number">01 /</span><p><strong>Своя сеть</strong><span>Работает и без серверов</span></p></div>
|
||
<div><span class="principle-number">02 /</span><p><strong>Свой круг</strong><span>Управляемый доступ участников</span></p></div>
|
||
<div><span class="principle-number">03 /</span><p><strong>Личное остаётся личным</strong><span>Сквозное шифрование в беседах</span></p></div>
|
||
</div>
|
||
|
||
<section class="features container section" id="features" aria-labelledby="features-title">
|
||
<div class="section-heading">
|
||
<div><p class="eyebrow">01 — Возможности</p><h2 id="features-title">Больше способов<br>быть на связи.</h2></div>
|
||
<p class="section-intro">От короткого сообщения до общего эфира —<br class="desktop-break"> в одном приложении.</p>
|
||
</div>
|
||
<div class="feature-grid">
|
||
<article class="feature">
|
||
<svg class="icon feature-icon" aria-hidden="true"><use href="#icon-chat"/></svg>
|
||
<h3>Личные и групповые чаты</h3>
|
||
<p>Переписка один на один и общение в группе. Ответы, реакции и опросы помогают оставаться в контексте.</p>
|
||
</article>
|
||
<article class="feature">
|
||
<svg class="icon feature-icon" aria-hidden="true"><use href="#icon-file"/></svg>
|
||
<h3>Файлы и голосовые</h3>
|
||
<p>Делитесь документами, фотографиями и видео. Записывайте голосовые, когда удобнее сказать, чем написать.</p>
|
||
</article>
|
||
<article class="feature">
|
||
<svg class="icon feature-icon" aria-hidden="true"><use href="#icon-video"/></svg>
|
||
<h3>Аудио- и видеозвонки</h3>
|
||
<p>Разговаривайте с собеседником голосом или с камерой. Приложение подбирает доступный путь соединения.</p>
|
||
</article>
|
||
<article class="feature">
|
||
<svg class="icon feature-icon" aria-hidden="true"><use href="#icon-radio"/></svg>
|
||
<h3>Групповая рация</h3>
|
||
<p>Нажмите и говорите участникам канала. Можно включить автоматическую передачу при обнаружении речи.</p>
|
||
</article>
|
||
<article class="feature">
|
||
<svg class="icon feature-icon" aria-hidden="true"><use href="#icon-live"/></svg>
|
||
<h3>Прямые трансляции</h3>
|
||
<p>Ведите эфир с камеры, делитесь экраном с компьютера. Участники помогают передавать поток другим зрителям.</p>
|
||
</article>
|
||
<article class="feature">
|
||
<svg class="icon feature-icon" aria-hidden="true"><use href="#icon-delivery"/></svg>
|
||
<h3>Доставка после возвращения</h3>
|
||
<p>Суперузел общей группы может сохранить зашифрованное личное сообщение и передать его, когда получатель вернётся в сеть.</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="architecture section" id="network" aria-labelledby="architecture-title">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<div><p class="eyebrow">02 — Как всё устроено</p><h2 id="architecture-title">Своя сеть.<br>Понятные границы.</h2></div>
|
||
<p class="section-intro">Кто участвует в обмене, кто получает доступ<br class="desktop-break"> и кто может прочитать личное.</p>
|
||
</div>
|
||
|
||
<div class="diagram-tabs" role="tablist" aria-label="Принципы работы VibeChat" hidden>
|
||
<button id="tab-access" type="button" role="tab" aria-selected="true" aria-controls="panel-access">
|
||
<span>01</span> Вы выбираете участников
|
||
</button>
|
||
<button id="tab-groups" type="button" role="tab" aria-selected="false" aria-controls="panel-groups" tabindex="-1">
|
||
<span>02</span> Группы независимы
|
||
</button>
|
||
<button id="tab-private" type="button" role="tab" aria-selected="false" aria-controls="panel-private" tabindex="-1">
|
||
<span>03</span> Личное зашифровано
|
||
</button>
|
||
</div>
|
||
|
||
<article class="diagram-panel" id="panel-access" aria-labelledby="diagram-access-title">
|
||
<div class="diagram-copy">
|
||
<h3 id="diagram-access-title">Ваша группа — ваш круг доверия.</h3>
|
||
<p>Создайте группу и пригласите людей. Сервер необязателен: ваш сервер или сервер вашего круга
|
||
упрощает связь и обеспечивает временное хранение данных для доставки участникам.
|
||
Доступ и правила приглашения остаются под контролем группы.</p>
|
||
</div>
|
||
<figure>
|
||
<a class="diagram-link" href="assets/group_access_slide.svg" target="_blank" rel="noopener"
|
||
aria-label="Увеличить схему доступа к группе" data-enlarge>
|
||
<img src="assets/group_access_slide.svg" width="1600" height="900" loading="lazy"
|
||
alt="К информации группы имеют доступ добавленные участники и серверы. Посторонние пользователи и серверы доступа не имеют.">
|
||
<span class="zoom-label" aria-hidden="true">Открыть схему <span>↗</span></span>
|
||
</a>
|
||
<figcaption>Групповой контент доступен участникам и серверам этой группы.</figcaption>
|
||
</figure>
|
||
</article>
|
||
|
||
<article class="diagram-panel" id="panel-groups" aria-labelledby="diagram-groups-title">
|
||
<div class="diagram-copy">
|
||
<h3 id="diagram-groups-title">Одно устройство. Разные сообщества.</h3>
|
||
<p>Можно состоять в нескольких группах. У каждой — собственные участники, серверы и контент.
|
||
Ваше участие в обеих группах не объединяет их доступ.</p>
|
||
</div>
|
||
<figure>
|
||
<a class="diagram-link" href="assets/group_slide_simple.svg" target="_blank" rel="noopener"
|
||
aria-label="Увеличить схему независимых групп" data-enlarge>
|
||
<img src="assets/group_slide_simple.svg" width="1600" height="900" loading="lazy"
|
||
alt="Группы А и Б обмениваются сообщениями, файлами и трансляциями каждая внутри своего круга, даже при общем участнике.">
|
||
<span class="zoom-label" aria-hidden="true">Открыть схему <span>↗</span></span>
|
||
</a>
|
||
<figcaption>Общие участники не дают одной группе доступ к содержимому другой.</figcaption>
|
||
</figure>
|
||
</article>
|
||
|
||
<article class="diagram-panel" id="panel-private" aria-labelledby="diagram-private-title">
|
||
<div class="diagram-copy">
|
||
<h3 id="diagram-private-title">Доставить сообщение ≠ прочитать его.</h3>
|
||
<p>Личные сообщения и вложения шифруются на устройстве отправителя и расшифровываются у собеседника.
|
||
Промежуточные узлы передают зашифрованные данные.</p>
|
||
</div>
|
||
<figure>
|
||
<a class="diagram-link" href="assets/p2p_slide_simple.png" target="_blank" rel="noopener"
|
||
aria-label="Увеличить схему шифрования личной переписки" data-enlarge>
|
||
<img src="assets/p2p_slide_simple.png" width="1672" height="941" loading="lazy"
|
||
alt="Личные сообщения доставляются напрямую, через участников или сервер группы. Ключи расшифровки есть только у сторон личной беседы.">
|
||
<span class="zoom-label" aria-hidden="true">Открыть схему <span>↗</span></span>
|
||
</a>
|
||
<figcaption>Сквозное шифрование защищает содержимое личной беседы, в том числе при хранении на сервере группы.</figcaption>
|
||
</figure>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="platforms container section" id="platforms" aria-labelledby="platforms-title">
|
||
<div class="platform-copy">
|
||
<p class="eyebrow">03 — Один проект, разные устройства</p>
|
||
<h2 id="platforms-title">На большом экране.<br>И под рукой.</h2>
|
||
<p>Десктопный клиент и приложение для Android используют общее сетевое ядро uTun.
|
||
Чат работает как самостоятельный сервис.</p>
|
||
<ul class="platform-list" aria-label="Платформы"><li>Windows</li><li>Linux</li><li>Android</li></ul>
|
||
</div>
|
||
<aside class="project-note" aria-labelledby="project-title">
|
||
<span class="project-badge"><span class="little-dot"></span> В активной разработке</span>
|
||
<h3 id="project-title">Общение, которое<br>строится вокруг вас.</h3>
|
||
<p>Соберите свой круг: люди и устройства, которым вы даёте доступ к группе.
|
||
При желании добавьте свой сервер или сервер вашего круга.</p>
|
||
<a href="#network">Посмотреть, как это работает <span aria-hidden="true">↗</span></a>
|
||
</aside>
|
||
</section>
|
||
<section class="opensource section" id="opensource" aria-labelledby="opensource-title">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<div><p class="eyebrow">04 — Open source</p><h2 id="opensource-title">Открытый код.<br>Развиваем вместе.</h2></div>
|
||
<p class="section-intro">Присоединяйтесь к разработке VibeChat:<br class="desktop-break">
|
||
изучайте, проверяйте и улучшайте проект.</p>
|
||
</div>
|
||
<div class="feature-grid contribution-grid">
|
||
<article class="feature">
|
||
<span class="contribution-number" aria-hidden="true">01 /</span>
|
||
<h3>Улучшайте вместе с нами</h3>
|
||
<p>Предлагайте идеи, исправляйте ошибки, добавляйте возможности и помогайте с документацией.
|
||
Ваш вклад может сделать VibeChat удобнее для всех.</p>
|
||
</article>
|
||
<article class="feature">
|
||
<span class="contribution-number" aria-hidden="true">02 /</span>
|
||
<h3>Проверяйте безопасность</h3>
|
||
<p>Изучайте исходники самостоятельно или с помощью нейросети: разбирайте шифрование,
|
||
доступ к данным и сетевые механизмы. Проверяйте находки и помогайте устранять уязвимости.</p>
|
||
</article>
|
||
<article class="feature">
|
||
<span class="contribution-number" aria-hidden="true">03 /</span>
|
||
<h3>Собирайте из исходников</h3>
|
||
<p>Вы можете сами собрать приложение, запустить его на своих устройствах
|
||
и доработать под собственные задачи. Изучайте код, который используете.</p>
|
||
</article>
|
||
</div>
|
||
<div class="source-link">
|
||
<p>Начните с исходников проекта.</p>
|
||
<a class="button button-dark" href="http://git.syqiq.tech/jeka/utun2" target="_blank" rel="noopener noreferrer">
|
||
Открыть репозиторий <span aria-hidden="true">↗</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer container">
|
||
<a class="brand" href="#top"><img src="assets/vibechat.png" alt="" width="32" height="32"><span>VibeChat<span class="brand-dot">.</span></span></a>
|
||
<p>Ваши люди. Ваша сеть.</p>
|
||
<a class="back-top" href="#top">Наверх <span aria-hidden="true">↑</span></a>
|
||
</footer>
|
||
|
||
<dialog class="image-dialog" aria-label="Увеличенная схема">
|
||
<div class="dialog-toolbar"><p>VibeChat / Как устроена сеть</p><button type="button" class="dialog-close" autofocus>Закрыть <span aria-hidden="true">×</span></button></div>
|
||
<div class="dialog-image-wrap"><img class="dialog-image" alt=""></div>
|
||
<p class="dialog-hint">На узком экране схему можно прокручивать по горизонтали.</p>
|
||
</dialog>
|
||
</body>
|
||
</html>
|