mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Change the structure
This commit is contained in:
@@ -0,0 +1,273 @@
|
||||
import { Navigate, useNavigate } from "react-router-dom";
|
||||
import { useAppState } from "../chat/ui/state";
|
||||
import { isElectron } from "../chat/electron/electron";
|
||||
import "./home.scss";
|
||||
|
||||
function GitHubLink({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<a href="https://github.com/denis0001-dev/FromChat" target="_blank">{children}</a>
|
||||
);
|
||||
}
|
||||
|
||||
function SupportLink({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<a href="https://t.me/denis0001-dev" target="_blank">{children}</a>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAppState();
|
||||
|
||||
const handleGetStarted = () => {
|
||||
if (user.authToken && user.currentUser) {
|
||||
navigate("/chat");
|
||||
} else {
|
||||
navigate("/login");
|
||||
}
|
||||
}
|
||||
|
||||
if (isElectron) {
|
||||
return <Navigate to="/chat" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="homepage">
|
||||
<header className="homepage-header">
|
||||
<div className="container">
|
||||
<div className="header-content">
|
||||
<div className="logo">
|
||||
<h1>FromChat</h1>
|
||||
<span className="tagline">100% открытый мессенджер</span>
|
||||
</div>
|
||||
<nav className="header-nav">
|
||||
<GitHubLink>
|
||||
<mdui-button variant="text">GitHub</mdui-button>
|
||||
</GitHubLink>
|
||||
<SupportLink>
|
||||
<mdui-button variant="text">Поддержка</mdui-button>
|
||||
</SupportLink>
|
||||
|
||||
{user.authToken ? (
|
||||
<mdui-button variant="filled" onClick={() => navigate("/chat")}>
|
||||
Перейти в чат
|
||||
</mdui-button>
|
||||
) : (
|
||||
<mdui-button variant="filled" onClick={() => navigate("/login")}>
|
||||
Войти
|
||||
</mdui-button>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="homepage-main">
|
||||
<section className="hero">
|
||||
<div className="container">
|
||||
<div className="hero-content">
|
||||
<h2 className="hero-title">
|
||||
Безопасный мессенджер с открытым исходным кодом
|
||||
</h2>
|
||||
<p className="hero-description">
|
||||
FromChat — это полностью открытый мессенджер с end-to-end шифрованием,
|
||||
поддержкой файлов и уведомлений. Создан для тех, кто ценит приватность и свободу.
|
||||
</p>
|
||||
<div className="hero-actions">
|
||||
<mdui-button
|
||||
variant="filled"
|
||||
onClick={handleGetStarted}
|
||||
>
|
||||
{user.authToken ? "Перейти в чат" : "Начать общение"}
|
||||
</mdui-button>
|
||||
<mdui-button
|
||||
variant="outlined"
|
||||
onClick={() => navigate("/register")}
|
||||
>
|
||||
Зарегистрироваться
|
||||
</mdui-button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-visual">
|
||||
<div className="chat-preview">
|
||||
<div className="chat-window">
|
||||
<div className="chat-header">
|
||||
<div className="chat-title">Общий чат</div>
|
||||
<div className="online-indicator">●</div>
|
||||
</div>
|
||||
<div className="chat-messages">
|
||||
<div className="message received">
|
||||
<div className="message-avatar">А</div>
|
||||
<div className="message-content">
|
||||
<div className="message-text">Привет! Как дела?</div>
|
||||
<div className="message-time">14:30</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="message sent">
|
||||
<div className="message-content">
|
||||
<div className="message-text">Всё отлично! А у тебя как?</div>
|
||||
<div className="message-time">14:32</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="message received">
|
||||
<div className="message-avatar">Б</div>
|
||||
<div className="message-content">
|
||||
<div className="message-text">Отправляю файл 📎</div>
|
||||
<div className="message-time">14:35</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="features">
|
||||
<div className="container">
|
||||
<h3 className="section-title">Возможности</h3>
|
||||
<div className="features-grid">
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="security"></mdui-icon>
|
||||
</div>
|
||||
<h4>End-to-End Шифрование</h4>
|
||||
<p>
|
||||
Ваши личные сообщения защищены современным шифрованием X25519 + AES-GCM.
|
||||
Только вы и получатель можете прочитать сообщения.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="code"></mdui-icon>
|
||||
</div>
|
||||
<h4>100% открытый код</h4>
|
||||
<p>
|
||||
Весь исходный код доступен на <GitHubLink>GitHub</GitHubLink>. Вы можете проверить безопасность,
|
||||
внести изменения или развернуть свой сервер.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="attach_file"></mdui-icon>
|
||||
</div>
|
||||
<h4>Обмен Файлами</h4>
|
||||
<p>
|
||||
Отправляйте файлы до 4 ГБ. Файлы в личных сообщениях шифруются.
|
||||
В общем чате шифрования нет, так как ваши сообщения могут читать все пользователи FromChat.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="notifications"></mdui-icon>
|
||||
</div>
|
||||
<h4>Уведомления</h4>
|
||||
<p>
|
||||
Получайте push-уведомления в браузере и настольном приложении.
|
||||
Никогда не пропустите важное сообщение.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="edit"></mdui-icon>
|
||||
</div>
|
||||
<h4>Редактирование</h4>
|
||||
<p>
|
||||
Редактируйте и удаляйте свои сообщения. Отвечайте на сообщения
|
||||
для лучшего контекста общения.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="computer"></mdui-icon>
|
||||
</div>
|
||||
<h4>Кроссплатформенность</h4>
|
||||
<p>
|
||||
Работает в браузере и как настольное приложение для Windows,
|
||||
macOS и Linux. Единый интерфейс везде.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="download">
|
||||
<div className="container">
|
||||
<div className="download-content">
|
||||
<h3>Скачайте приложение</h3>
|
||||
<p>
|
||||
Для лучшего опыта используйте настольное приложение с поддержкой
|
||||
уведомлений и автономной работы.
|
||||
</p>
|
||||
<div className="download-buttons">
|
||||
<a
|
||||
href="https://github.com/Toolbox-io/FromChat/actions/workflows/build.yml"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<mdui-button variant="filled">
|
||||
<mdui-icon name="download" slot="icon"></mdui-icon>
|
||||
Скачать для ПК
|
||||
</mdui-button>
|
||||
</a>
|
||||
<mdui-button variant="outlined" onClick={() => navigate("/login")}>
|
||||
<mdui-icon name="language" slot="icon"></mdui-icon>
|
||||
Веб-версия
|
||||
</mdui-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="cta">
|
||||
<div className="container">
|
||||
<div className="cta-content">
|
||||
<h3>Готовы начать общение?</h3>
|
||||
<p>
|
||||
Присоединяйтесь к FromChat и общайтесь безопасно с друзьями и коллегами.
|
||||
</p>
|
||||
<div className="cta-actions">
|
||||
<mdui-button
|
||||
variant="filled"
|
||||
onClick={() => navigate("/register")}
|
||||
>
|
||||
Создать аккаунт
|
||||
</mdui-button>
|
||||
<mdui-button
|
||||
variant="outlined"
|
||||
onClick={() => navigate("/login")}
|
||||
>
|
||||
Войти
|
||||
</mdui-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="homepage-footer">
|
||||
<div className="container">
|
||||
<div className="footer-content">
|
||||
<div className="footer-section">
|
||||
<h4>Ссылки</h4>
|
||||
<GitHubLink>GitHub</GitHubLink>
|
||||
<SupportLink>Поддержка</SupportLink>
|
||||
</div>
|
||||
<div className="footer-section">
|
||||
<h4>Лицензия</h4>
|
||||
<p>GPL-3.0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<p>© 2025 FromChat. Сделано программистом denis0001-dev с ❤️ для свободы общения.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user