Telemax/docs/index.html

324 lines
24 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Telemax — мост MAX ↔ Telegram: читать MAX в Telegram без телефона</title>
<meta name="description" content="Telemax — двусторонний open-source мост MAX ↔ Telegram. Подключается к вашему личному MAX-аккаунту (по номеру, а не через бота) и зеркалит все чаты в Telegram. Свой сервер, приватно, без установки MAX на телефон.">
<meta name="keywords" content="мост MAX Telegram, MAX Telegram bridge, читать MAX в Telegram, MAX без телефона, перенести чаты MAX в Telegram, self-hosted, мессенджер MAX">
<link rel="canonical" href="https://trollobot.github.io/Telemax/">
<meta property="og:type" content="website">
<meta property="og:title" content="Telemax — мост MAX ↔ Telegram">
<meta property="og:description" content="Читайте MAX в Telegram, не держа его на телефоне. Двусторонний open-source мост через ваш личный аккаунт. Свой сервер, полная приватность.">
<meta property="og:url" content="https://trollobot.github.io/Telemax/">
<!-- TODO: положи картинку docs/img/og.png (1200×630) и раскомментируй: -->
<!-- <meta property="og:image" content="https://trollobot.github.io/Telemax/img/og.png"> -->
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/png" href="icon.png">
<link rel="apple-touch-icon" href="icon.png">
<style>
:root{
--paper:#f5ecd9; --paper-2:#faf4e6; --card:#fffdf8;
--ink:#2b2119; --muted:#6f6152; --faint:#948676;
--line:#e4d4b6; --line-soft:#eaddc4;
--terra:#c2571f; --terra-dark:#9d4315; --terra-tint:#f0dcbb;
--olive:#7a7433; --ok:#4d7c2f;
--serif:Georgia,"Times New Roman","PT Serif",serif;
--radius:14px; --shadow:0 1px 2px rgba(70,45,20,.05),0 14px 34px rgba(90,55,20,.09);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--terra-dark);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1000px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);line-height:1.16;margin:0 0 .4em;font-weight:700}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem)}
.sub{color:var(--muted)}
.btn{display:inline-block;padding:13px 22px;border-radius:12px;font-weight:700;border:1.5px solid transparent;transition:transform .05s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--terra);color:#fff8ef}
.btn-primary:hover{background:var(--terra-dark);text-decoration:none}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--terra);text-decoration:none}
.btn-support{background:#fff;border-color:var(--terra);color:var(--terra-dark)}
.btn-support:hover{background:var(--terra-tint);text-decoration:none}
header.nav{position:sticky;top:0;z-index:10;background:rgba(245,236,217,.86);
backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:16px;height:62px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.35rem;letter-spacing:-.01em}
.brand .dot{color:var(--terra)}
.nav .spacer{flex:1}
.nav a.navlink{color:var(--muted);font-weight:600;font-size:.94rem;font-family:inherit}
.nav a.support{color:var(--terra-dark)}
@media(max-width:680px){.nav a.navlink{display:none}.nav a.support{display:inline}}
.eye{font-size:.82rem;font-weight:700;color:var(--terra-dark);letter-spacing:.02em;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--terra-tint);color:var(--terra-dark);
border:1px solid var(--line);padding:6px 13px;border-radius:999px;font-size:.82rem;font-weight:700;margin-bottom:20px}
/* hero */
.hero{padding:66px 0 44px;text-align:center}
.hero h1{font-size:clamp(2.1rem,5.8vw,3.5rem);letter-spacing:-.01em;margin-bottom:.35em}
.hero h1 .hl{color:var(--terra)}
.hero p.lead{font-size:clamp(1.05rem,2.3vw,1.32rem);color:var(--muted);max-width:700px;margin:0 auto 28px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
.diagram{margin:0 auto;max-width:660px;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.diagram svg{width:100%;height:auto;display:block}
section{padding:58px 0;border-top:1px solid var(--line-soft)}
section.alt{background:var(--paper-2)}
.kicker{color:var(--terra);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;margin-bottom:10px;font-family:inherit}
/* differentiator */
.callout{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--terra);
border-radius:0 var(--radius) var(--radius) 0;padding:28px 32px;box-shadow:var(--shadow)}
.callout .vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(max-width:560px){.callout .vs{grid-template-columns:1fr}}
.vs .c{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:.95rem;color:var(--muted)}
.vs .c.good{background:#f2f6e9;border-color:#d3e0bd}
.vs .tag{font-weight:700;font-size:.85rem;margin-bottom:6px;font-family:var(--serif)}
.vs .good .tag{color:var(--ok)} .vs .bad .tag{color:var(--faint)}
/* features */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.feat .ic{font-size:1.6rem;margin-bottom:10px}
.feat h3{font-size:1.08rem;margin-bottom:.3em}
.feat p{color:var(--muted);font-size:.94rem;margin:0}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-15px;left:22px;
width:34px;height:34px;border-radius:50%;background:var(--terra);color:#fff8ef;font-weight:800;font-family:var(--serif);
display:flex;align-items:center;justify-content:center}
.step h3{margin-top:8px;font-size:1.08rem}
.step p{color:var(--muted);margin:0;font-size:.94rem}
code{background:var(--terra-tint);color:var(--terra-dark);padding:2px 7px;border-radius:6px;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
/* screenshots — mobile (portrait) + web panel (wide) */
.phones{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:760px){.phones{grid-template-columns:repeat(2,1fr);max-width:520px;margin-left:auto;margin-right:auto}}
@media(max-width:400px){.phones{grid-template-columns:1fr;max-width:280px}}
.phone{margin:0}
.phone img{width:100%;display:block;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);background:#0d1117}
.phone figcaption{text-align:center;font-size:.86rem;color:var(--muted);margin-top:10px}
.webshot{margin:0 auto;max-width:840px}
.webshot img{width:100%;display:block;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);background:#0d1117}
.webshot figcaption{text-align:center;font-size:.9rem;color:var(--muted);margin-top:12px}
/* support */
.support-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:34px;text-align:center;box-shadow:var(--shadow)}
.support-box .heart{font-size:2rem;margin-bottom:8px}
.support-box p{color:var(--muted);max-width:560px;margin:0 auto 22px}
.crypto{margin-top:18px;font-size:.85rem;color:var(--faint)}
.crypto code{word-break:break-all}
/* faq */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2px 18px;margin-bottom:12px}
details summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none;font-family:var(--serif)}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";color:var(--terra);font-weight:800;margin-right:10px}
details[open] summary::before{content:"-"}
details p{color:var(--muted);margin:0 0 15px;padding-left:24px}
footer{padding:44px 0 64px;color:var(--muted);border-top:1px solid var(--line)}
footer .links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.disc{font-size:.85rem;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:15px 18px}
.center{text-align:center}
</style>
</head>
<body>
<header class="nav">
<div class="wrap">
<span class="brand" style="display:inline-flex;align-items:center;gap:9px">
<img src="icon.png" alt="Telemax" width="30" height="30" style="border-radius:8px;display:block">
<span>Tele<span class="dot">max</span></span>
</span>
<span class="spacer"></span>
<a class="navlink" href="#features">Возможности</a>
<a class="navlink" href="#how">Установка</a>
<a class="navlink" href="#faq">FAQ</a>
<a class="navlink" href="https://github.com/Trollobot/Telemax">GitHub</a>
<a class="navlink support" href="#support">♥ Поддержать</a>
</div>
</header>
<main>
<div class="hero wrap">
<div class="eye">твоё личное, а не сервис</div>
<span class="chip">🔑 личный аккаунт, а не бот</span>
<h1>Твой MAX — на твоём сервере,<br>а ты — в <span class="hl">Telegram</span></h1>
<p class="lead">
<b>Telemax</b> — двусторонний open-source мост между мессенджером <b>MAX</b> и <b>Telegram</b>.
Подключается к вашему <b>личному MAX-аккаунту по номеру</b> (не через бота) и зеркалит все чаты
Макса в Telegram. Всё живёт на вашем сервере — по-человечески и приватно.
</p>
<div class="cta">
<a class="btn btn-primary" href="https://github.com/Trollobot/Telemax">Открыть на GitHub</a>
<a class="btn btn-ghost" href="#how">Как установить</a>
</div>
<div class="diagram" aria-label="Схема: MAX ↔ Telemax ↔ Telegram">
<svg viewBox="0 0 680 190" xmlns="http://www.w3.org/2000/svg" role="img">
<line x1="150" y1="95" x2="530" y2="95" stroke="var(--terra)" stroke-width="4" stroke-dasharray="2 10" stroke-linecap="round"/>
<circle cx="90" cy="95" r="52" fill="var(--paper-2)" stroke="var(--olive)" stroke-width="2"/>
<text x="90" y="90" text-anchor="middle" font-size="20" font-weight="800" font-family="Georgia,serif" fill="var(--olive)">MAX</text>
<text x="90" y="112" text-anchor="middle" font-size="11" fill="var(--muted)">ваш аккаунт</text>
<rect x="278" y="62" width="124" height="66" rx="16" fill="var(--terra)"/>
<text x="340" y="92" text-anchor="middle" font-size="17" font-weight="800" font-family="Georgia,serif" fill="#fff8ef">Telemax</text>
<text x="340" y="112" text-anchor="middle" font-size="10" fill="#f6e6d2">ваш сервер</text>
<circle cx="590" cy="95" r="52" fill="var(--paper-2)" stroke="var(--ink)" stroke-width="2"/>
<text x="590" y="90" text-anchor="middle" font-size="15" font-weight="800" font-family="Georgia,serif" fill="var(--ink)">Telegram</text>
<text x="590" y="112" text-anchor="middle" font-size="11" fill="var(--muted)">ваш бот</text>
</svg>
</div>
</div>
<section id="pain" class="alt">
<div class="wrap">
<div class="kicker">Знакомо?</div>
<h2>MAX ставить не хочется — но приходится</h2>
<p class="sub" style="max-width:760px">
Работа, чаты знакомых, школьные группы — и вот на телефоне приложение, которому не доверяешь
и которое живёт в фоне, когда захочет. Веб-версия не шлёт пуши, отдельное устройство — лишние деньги.
<b>Telemax</b> решает иначе: MAX остаётся на сервере, а ты спокойно читаешь и отвечаешь из привычного Telegram.
</p>
</div>
</section>
<section id="diff">
<div class="wrap">
<div class="callout">
<div class="kicker">Главное отличие</div>
<h2>Личный аккаунт, а не бот</h2>
<p class="sub" style="margin:0">
Telemax заходит вашим <b>личным MAX-аккаунтом по номеру</b> — поэтому в Telegram
автоматически приходят <b>все</b> ваши чаты, диалоги и группы. Мостам-ботам это недоступно.
</p>
<div class="vs">
<div class="c good">
<div class="tag">Telemax — личный аккаунт</div>
Все чаты Макса зеркалятся сами. Ничего не надо добавлять в каждый чат. Видишь ровно то же, что видел бы в приложении MAX.
</div>
<div class="c bad">
<div class="tag">Мосты-боты</div>
Работают только там, куда добавили бота. Личные диалоги и чужие группы — мимо. Везде подключать вручную.
</div>
</div>
</div>
</div>
</section>
<section id="features" class="alt">
<div class="wrap">
<div class="kicker">Возможности</div>
<h2>Полноценная переписка в обе стороны</h2>
<div class="grid" style="margin-top:26px">
<div class="feat"><div class="ic">💬</div><h3>Все типы сообщений</h3><p>Текст, фото, файлы, голосовые, видео и кружки, стикеры (в т.ч. анимированные), опросы, гео, контакты — туда и обратно.</p></div>
<div class="feat"><div class="ic">🗂️</div><h3>Форум-темы</h3><p>Каждый MAX-чат — отдельная тема в Telegram-группе. Вся переписка в одном окне, аккуратно разложена.</p></div>
<div class="feat"><div class="ic">↩️</div><h3>Нативные ответы</h3><p>Reply в обе стороны с переходом к оригиналу. Удаление сообщений — тоже двустороннее.</p></div>
<div class="feat"><div class="ic">🎛️</div><h3>Пульт управления</h3><p>Команда <code>/panel</code>: поиск контактов MAX, старт чата в один тап, пауза, бан — всё кнопками.</p></div>
<div class="feat"><div class="ic">😀</div><h3>Реакции</h3><p>Эмодзи-реакции синхронизируются между платформами в обе стороны.</p></div>
<div class="feat"><div class="ic">🌐</div><h3>Прокси для Telegram</h3><p>SOCKS5/HTTP, если сервер ходит в Telegram только через прокси. MAX при этом идёт напрямую.</p></div>
<div class="feat"><div class="ic">🔔</div><h3>Уведомления о сбоях</h3><p>Потеря связи, ошибки доставки — прилетают в группу, с защитой от спама.</p></div>
<div class="feat"><div class="ic">⬆️</div><h3>Обновления по кнопке</h3><p>Бот сам сообщает о новом релизе и обновляется по нажатию — история переписки не затрагивается.</p></div>
<div class="feat"><div class="ic">🖥️</div><h3>Веб-панель</h3><p>Статус подключения, живые метрики, экран первой авторизации — по HTTPS.</p></div>
</div>
</div>
</section>
<section id="privacy">
<div class="wrap">
<div class="kicker">Приватность</div>
<h2>Свой сервер. Никакого облака.</h2>
<p class="sub" style="max-width:760px">
Telemax — <b>self-hosted</b>: код крутится на <b>вашем</b> VPS, с <b>вашим</b> Telegram-ботом.
Сообщения идут <b>только через вашу инфраструктуру</b> — никаких сторонних серверов и посредников.
В отличие от облачных решений, ваши переписки не проходят через чужие руки. Проект открытый —
можно прочитать каждую строчку.
</p>
</div>
</section>
<section id="how" class="alt">
<div class="wrap">
<div class="kicker">Установка</div>
<h2>Три шага — и мост работает</h2>
<div class="steps" style="margin-top:30px">
<div class="step"><h3>Дешёвый VPS</h3><p>Любой сервер на Ubuntu/Debian — подойдёт самый бюджетный.</p></div>
<div class="step"><h3>Свой бот в Telegram</h3><p>Создаёте бота в <code>@BotFather</code> и вставляете токен при установке. Бот ваш.</p></div>
<div class="step"><h3>setup.sh</h3><p>Скрипт спросит номер и код из SMS — и мост поднимется. Дальше всё в Telegram.</p></div>
</div>
<p class="center" style="margin-top:32px">
<a class="btn btn-primary" href="https://github.com/Trollobot/Telemax#быстрый-старт">Инструкция по установке</a>
</p>
</div>
</section>
<section id="shots">
<div class="wrap">
<div class="kicker">Как это выглядит</div>
<h2>Скриншоты</h2>
<p class="sub" style="margin:.2em 0 22px">В Telegram каждый MAX-чат становится темой — вся переписка в одном окне:</p>
<div class="phones">
<figure class="phone"><img src="topics.png" alt="Telegram-группа с форум-темами: каждый MAX-чат — своя тема" loading="lazy"><figcaption>Форум-темы: чат = тема</figcaption></figure>
<figure class="phone"><img src="panel.png" alt="Пульт управления /panel с кнопками в Telegram" loading="lazy"><figcaption>Пульт /panel</figcaption></figure>
<figure class="phone"><img src="search.png" alt="Поиск контакта MAX по номеру или нику" loading="lazy"><figcaption>Поиск контакта</figcaption></figure>
<figure class="phone"><img src="contact.png" alt="Карточка контакта, закреплённая в теме" loading="lazy"><figcaption>Карточка контакта</figcaption></figure>
</div>
<p class="sub" style="margin:36px 0 18px">И веб-панель мониторинга — статус подключения, метрики, авторизация:</p>
<figure class="webshot"><img src="webpanel.png" alt="Веб-панель мониторинга Telemax: статус MAX/Telegram, метрики, аутентификация" loading="lazy"><figcaption>Веб-панель — статус MAX/Telegram и метрики в реальном времени</figcaption></figure>
</div>
</section>
<section id="support" class="alt">
<div class="wrap">
<div class="support-box">
<div class="heart">♥</div>
<div class="kicker">Поддержка</div>
<h2>Поддержать развитие проекта</h2>
<p>
Telemax — бесплатный и открытый, его пилит один человек в свободное время. Если мост экономит
тебе нервы — можно закинуть на кофе (и на новые фичи). Спасибо, что ты с нами!
</p>
<a class="btn btn-primary" href="https://pay.cloudtips.ru/p/3c71b5e8">☕ Поддержать развитие проекта</a>
<div class="crypto">
или GRAM (TON): <code>UQALpK2PKI90-XpupOM8sRJGdwrFMsPcwQZPR0k180umXBcA</code>
</div>
</div>
</div>
</section>
<section id="faq">
<div class="wrap">
<div class="kicker">FAQ</div>
<h2>Частые вопросы</h2>
<div style="margin-top:26px">
<details open><summary>Можно ли читать MAX в Telegram без телефона?</summary><p>Да — в этом и смысл. MAX-аккаунт живёт на сервере, а вся переписка зеркалится в вашу Telegram-группу. Приложение MAX на телефоне не нужно.</p></details>
<details><summary>Это бот в MAX или личный аккаунт?</summary><p>Личный аккаунт — Telemax подключается по вашему номеру телефона. Поэтому приходят все ваши чаты, а не только те, куда добавлен бот. На стороне Telegram — да, свой бот.</p></details>
<details><summary>Это безопасно?</summary><p>Всё self-hosted: код и данные на вашем сервере, ничего в облаке. При этом проект неофициальный и работает поверх вашего аккаунта — используйте на свой страх и риск (см. дисклеймер).</p></details>
<details><summary>Сколько стоит?</summary><p>Сам Telemax бесплатный и открытый. Платите только за свой VPS — подойдёт самый дешёвый.</p></details>
<details><summary>Чем отличается от других мостов MAX ↔ Telegram?</summary><p>Личный аккаунт вместо бота (все чаты автоматически), полностью self-hosted (приватность), глубокая интеграция: форум-темы, нативные reply, реакции, стикеры, пульт управления, прокси.</p></details>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap">
<div class="links">
<a href="https://github.com/Trollobot/Telemax">GitHub</a>
<a href="https://habr.com/ru/posts/1070812/">Статья на Хабре</a>
<a href="#support">Поддержать проект</a>
<a href="https://github.com/Trollobot/Telemax/issues">Сообщить о баге</a>
</div>
<div class="disc">
⚠️ Неофициальный open-source-проект. Не связан с MAX и Telegram. Работает поверх вашего собственного
номера/аккаунта — на ваш страх и риск.
</div>
<p style="margin-top:16px">© Telemax — двусторонний мост MAX ↔ Telegram · self-hosted</p>
</div>
</footer>
</body>
</html>