mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Merge branch 'feature/homepage'
This commit is contained in:
@@ -11,6 +11,7 @@
|
|||||||
# Icon must end with two \r
|
# Icon must end with two \r
|
||||||
Icon
|
Icon
|
||||||
|
|
||||||
|
|
||||||
# Thumbnails
|
# Thumbnails
|
||||||
._*
|
._*
|
||||||
|
|
||||||
@@ -572,3 +573,4 @@ package-lock.json
|
|||||||
backend/alembic/**
|
backend/alembic/**
|
||||||
!backend/alembic/env.py
|
!backend/alembic/env.py
|
||||||
!backend/alembic/script.py.mako
|
!backend/alembic/script.py.mako
|
||||||
|
!frontend/src/pages/app/resources/css/lib
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
||||||
|
import { ElectronTitleBar } from "./pages/app/ui/components/Electron";
|
||||||
|
import { useAppState } from "./pages/app/ui/state";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import HomePage from "./pages/HomePage";
|
||||||
|
import LoginPage from "./pages/LoginPage";
|
||||||
|
import RegisterPage from "./pages/RegisterPage";
|
||||||
|
import ChatPage from "./pages/ChatPage";
|
||||||
|
import DownloadAppPage from "./pages/DownloadAppPage";
|
||||||
|
import NotFoundPage from "./pages/NotFoundPage";
|
||||||
|
import ProtectedRoute from "./pages/ProtectedRoute";
|
||||||
|
import { isElectron } from "./pages/app/electron/electron";
|
||||||
|
import { MINIMUM_WIDTH } from "./pages/app/core/config";
|
||||||
|
import useWindowSize from "./pages/app/ui/hooks/useWindowSize";
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const { restoreUserFromStorage } = useAppState();
|
||||||
|
const { width } = useWindowSize();
|
||||||
|
const [authReady, setAuthReady] = useState(false);
|
||||||
|
|
||||||
|
// Restore user from localStorage on app initialization
|
||||||
|
useEffect(() => {
|
||||||
|
restoreUserFromStorage().finally(() => {
|
||||||
|
setAuthReady(true);
|
||||||
|
});
|
||||||
|
}, [restoreUserFromStorage]);
|
||||||
|
|
||||||
|
return authReady && (
|
||||||
|
<BrowserRouter>
|
||||||
|
{!isElectron && width < MINIMUM_WIDTH && <Navigate to="/download-app" replace />}
|
||||||
|
<ElectronTitleBar />
|
||||||
|
<div id="main-wrapper">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<HomePage />} />
|
||||||
|
<Route path="/login" element={<LoginPage />} />
|
||||||
|
<Route path="/register" element={<RegisterPage />} />
|
||||||
|
<Route path="/download-app" element={<DownloadAppPage />} />
|
||||||
|
<Route path="/">
|
||||||
|
<Route path="chat" element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<ChatPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
} />
|
||||||
|
</Route>
|
||||||
|
<Route path="*" element={<NotFoundPage />} />
|
||||||
|
</Routes>
|
||||||
|
</div>
|
||||||
|
</BrowserRouter>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -5,14 +5,14 @@
|
|||||||
* @version 1.0.0
|
* @version 1.0.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import './resources/css/style.scss';
|
import './pages/app/resources/css/style.scss';
|
||||||
import "mdui/mdui.css";
|
import "mdui/mdui.css";
|
||||||
|
|
||||||
import "./utils/material";
|
import "./pages/app/utils/material";
|
||||||
import "./core/init";
|
import "./pages/app/core/init";
|
||||||
import "./electron/electron";
|
import "./pages/app/electron/electron";
|
||||||
import { createRoot } from 'react-dom/client';
|
import { createRoot } from 'react-dom/client';
|
||||||
import App from './ui/App';
|
import App from './App';
|
||||||
import { StrictMode } from 'react';
|
import { StrictMode } from 'react';
|
||||||
|
|
||||||
// Initialize React app
|
// Initialize React app
|
||||||
|
|||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { LeftPanel } from "./app/ui/components/chat/LeftPanel";
|
||||||
|
import { RightPanel } from "./app/ui/components/chat/RightPanel";
|
||||||
|
|
||||||
|
export default function ChatPage() {
|
||||||
|
return (
|
||||||
|
<div id="chat-interface">
|
||||||
|
<div className="all-container">
|
||||||
|
<LeftPanel />
|
||||||
|
<RightPanel />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
export default function DownloadAppPage() {
|
||||||
|
return (
|
||||||
|
<div className="download-app-screen">
|
||||||
|
<div className="inner">
|
||||||
|
<h1>Чтобы пользоваться мессенджером, скачайте приложение</h1>
|
||||||
|
<p>
|
||||||
|
Этот сайт <b>не предназначен</b> для работы на маленьких экранах, поэтому
|
||||||
|
вам нужно скачать приложение мессенджера.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="https://github.com/denis0001-dev/FromChat-android/releases/latest">
|
||||||
|
<mdui-button>Скачать на GitHub</mdui-button>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Если возникнут сложности или есть вопросы, нажмите кнопку!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="https://t.me/denis0001-dev">
|
||||||
|
<mdui-button>Написать в поддержку</mdui-button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,267 @@
|
|||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { useAppState } from "./app/ui/state";
|
||||||
|
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,142 @@
|
|||||||
|
import { useImmer } from "use-immer";
|
||||||
|
import { AlertsContainer, type Alert, type AlertType } from "./app/ui/components/Alerts";
|
||||||
|
import { AuthContainer, AuthHeader } from "./app/ui/components/Auth";
|
||||||
|
import type { ErrorResponse, LoginRequest, LoginResponse } from "./app/core/types";
|
||||||
|
import { ensureKeysOnLogin } from "./app/auth/crypto";
|
||||||
|
import { API_BASE_URL } from "./app/core/config";
|
||||||
|
import { useRef } from "react";
|
||||||
|
import type { TextField } from "mdui/components/text-field";
|
||||||
|
import { useAppState } from "./app/ui/state";
|
||||||
|
import { MaterialTextField } from "./app/ui/components/core/TextField";
|
||||||
|
import { initialize, isSupported, startElectronReceiver, subscribe } from "./app/utils/push-notifications";
|
||||||
|
import { isElectron } from "./app/electron/electron";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
const [alerts, updateAlerts] = useImmer<Alert[]>([]);
|
||||||
|
const setUser = useAppState(state => state.setUser);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
function showAlert(type: AlertType, message: string) {
|
||||||
|
updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
|
||||||
|
}
|
||||||
|
|
||||||
|
const usernameElement = useRef<TextField>(null);
|
||||||
|
const passwordElement = useRef<TextField>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContainer>
|
||||||
|
<AuthHeader icon="login" title="Добро пожаловать!" subtitle="Войдите в свой аккаунт" />
|
||||||
|
<div className="auth-body">
|
||||||
|
<AlertsContainer alerts={alerts} />
|
||||||
|
|
||||||
|
<form
|
||||||
|
onSubmit={async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const username = usernameElement.current!.value.trim();
|
||||||
|
const password = passwordElement.current!.value.trim();
|
||||||
|
|
||||||
|
if (!username || !password) {
|
||||||
|
showAlert("danger", "Пожалуйста, заполните все поля");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const request: LoginRequest = {
|
||||||
|
username: username,
|
||||||
|
password: password
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(`${API_BASE_URL}/login`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(request)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data: LoginResponse = await response.json();
|
||||||
|
// Store the JWT token first
|
||||||
|
setUser(data.token, data.user);
|
||||||
|
|
||||||
|
// Setup keys with the token we just received
|
||||||
|
try {
|
||||||
|
await ensureKeysOnLogin(password, data.token);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Key setup failed:", e);
|
||||||
|
}
|
||||||
|
|
||||||
|
navigate("/chat");
|
||||||
|
|
||||||
|
// Initialize notifications
|
||||||
|
try {
|
||||||
|
if (isSupported()) {
|
||||||
|
const initialized = await initialize();
|
||||||
|
if (initialized) {
|
||||||
|
await subscribe(data.token);
|
||||||
|
|
||||||
|
// For Electron, start the notification receiver
|
||||||
|
if (isElectron) {
|
||||||
|
await startElectronReceiver();
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Notifications enabled");
|
||||||
|
} else {
|
||||||
|
console.log("Notification permission denied");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log("Notifications not supported");
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Notification setup failed:", e);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const data: ErrorResponse = await response.json();
|
||||||
|
showAlert("danger", data.message || "Неверное имя пользователя или пароль");
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showAlert("danger", "Ошибка соединения с сервером");
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<MaterialTextField
|
||||||
|
label="Имя пользователя"
|
||||||
|
id="login-username"
|
||||||
|
name="username"
|
||||||
|
variant="outlined"
|
||||||
|
icon="person--filled"
|
||||||
|
autocomplete="username"
|
||||||
|
required
|
||||||
|
ref={usernameElement} />
|
||||||
|
|
||||||
|
<MaterialTextField
|
||||||
|
label="Пароль"
|
||||||
|
id="login-password"
|
||||||
|
name="password"
|
||||||
|
variant="outlined"
|
||||||
|
type="password"
|
||||||
|
toggle-password
|
||||||
|
icon="password--filled"
|
||||||
|
autocomplete="current-password"
|
||||||
|
required
|
||||||
|
ref={passwordElement} />
|
||||||
|
|
||||||
|
<mdui-button type="submit">Войти</mdui-button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<p>
|
||||||
|
Ещё нет аккаунта?
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="link"
|
||||||
|
onClick={() => navigate("/register")}>
|
||||||
|
Зарегистрируйтесь
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AuthContainer>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
export default function NotFoundPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="not-found-page">
|
||||||
|
<div className="not-found-container">
|
||||||
|
<div className="not-found-content">
|
||||||
|
<div className="error-code">404</div>
|
||||||
|
<h1>Страница не найдена</h1>
|
||||||
|
<p>
|
||||||
|
К сожалению, запрашиваемая страница не существует или была перемещена.
|
||||||
|
</p>
|
||||||
|
<div className="not-found-actions">
|
||||||
|
<mdui-button
|
||||||
|
variant="filled"
|
||||||
|
onClick={() => navigate("/")}
|
||||||
|
>
|
||||||
|
На главную
|
||||||
|
</mdui-button>
|
||||||
|
<mdui-button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={() => navigate(-1)}
|
||||||
|
>
|
||||||
|
Назад
|
||||||
|
</mdui-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="not-found-illustration">
|
||||||
|
<mdui-icon name="search_off"></mdui-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { useEffect } from "react";
|
||||||
|
import { useAppState } from "./app/ui/state";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
interface ProtectedRouteProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProtectedRoute({ children }: ProtectedRouteProps) {
|
||||||
|
const { user } = useAppState();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!user.authToken) {
|
||||||
|
navigate("/login");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}, [user.authToken, user.currentUser, navigate]);
|
||||||
|
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
import { useImmer } from "use-immer";
|
||||||
|
import { AuthContainer, AuthHeader } from "./app/ui/components/Auth";
|
||||||
|
import { AlertsContainer, type Alert, type AlertType } from "./app/ui/components/Alerts";
|
||||||
|
import { useRef } from "react";
|
||||||
|
import { TextField } from "mdui/components/text-field";
|
||||||
|
import type { ErrorResponse, RegisterRequest, LoginResponse } from "./app/core/types";
|
||||||
|
import { API_BASE_URL } from "./app/core/config";
|
||||||
|
import { useAppState } from "./app/ui/state";
|
||||||
|
import { MaterialTextField } from "./app/ui/components/core/TextField";
|
||||||
|
import { ensureKeysOnLogin } from "./app/auth/crypto";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
export default function RegisterPage() {
|
||||||
|
const [alerts, updateAlerts] = useImmer<Alert[]>([]);
|
||||||
|
const setUser = useAppState(state => state.setUser);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
function showAlert(type: AlertType, message: string) {
|
||||||
|
updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
|
||||||
|
}
|
||||||
|
|
||||||
|
const usernameElement = useRef<TextField>(null);
|
||||||
|
const passwordElement = useRef<TextField>(null);
|
||||||
|
const confirmPasswordElement = useRef<TextField>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContainer>
|
||||||
|
<AuthHeader icon="person_add" title="Регистрация" subtitle="Создайте новый аккаунт" />
|
||||||
|
<div className="auth-body">
|
||||||
|
<AlertsContainer alerts={alerts} />
|
||||||
|
|
||||||
|
<form onSubmit={async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const username = usernameElement.current!.value.trim();
|
||||||
|
const password = passwordElement.current!.value.trim();
|
||||||
|
const confirmPassword = confirmPasswordElement.current!.value.trim();
|
||||||
|
|
||||||
|
if (!username || !password || !confirmPassword) {
|
||||||
|
showAlert("danger", "Пожалуйста, заполните все поля");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password !== confirmPassword) {
|
||||||
|
showAlert("danger", "Пароли не совпадают");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (username.length < 3 || username.length > 20) {
|
||||||
|
showAlert("danger", "Имя пользователя должно быть от 3 до 20 символов");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.length < 5 || password.length > 50) {
|
||||||
|
showAlert("danger", "Пароль должен быть от 5 до 50 символов");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const request: RegisterRequest = {
|
||||||
|
username: username,
|
||||||
|
password: password,
|
||||||
|
confirm_password: confirmPassword
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(`${API_BASE_URL}/register`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(request)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data: LoginResponse = await response.json();
|
||||||
|
// Store the JWT token first
|
||||||
|
setUser(data.token, data.user);
|
||||||
|
|
||||||
|
// Setup keys with the token we just received
|
||||||
|
try {
|
||||||
|
await ensureKeysOnLogin(password, data.token);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Key setup failed:", e);
|
||||||
|
}
|
||||||
|
|
||||||
|
navigate("/chat");
|
||||||
|
} else {
|
||||||
|
const data: ErrorResponse = await response.json();
|
||||||
|
showAlert("danger", data.message || "Ошибка при регистрации");
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showAlert("danger", "Ошибка соединения с сервером");
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<MaterialTextField
|
||||||
|
label="Имя пользователя"
|
||||||
|
id="register-username"
|
||||||
|
name="username"
|
||||||
|
variant="outlined"
|
||||||
|
icon="person--filled"
|
||||||
|
autocomplete="username"
|
||||||
|
maxlength={20}
|
||||||
|
counter
|
||||||
|
required
|
||||||
|
ref={usernameElement} />
|
||||||
|
<MaterialTextField
|
||||||
|
label="Пароль"
|
||||||
|
id="register-password"
|
||||||
|
name="password"
|
||||||
|
variant="outlined"
|
||||||
|
type="password"
|
||||||
|
toggle-password
|
||||||
|
icon="password--filled"
|
||||||
|
autocomplete="new-password"
|
||||||
|
required
|
||||||
|
ref={passwordElement} />
|
||||||
|
<MaterialTextField
|
||||||
|
label="Подтвердите пароль"
|
||||||
|
id="register-confirm-password"
|
||||||
|
name="confirm_password"
|
||||||
|
variant="outlined"
|
||||||
|
type="password"
|
||||||
|
toggle-password
|
||||||
|
icon="password--filled"
|
||||||
|
autocomplete="new-password"
|
||||||
|
required
|
||||||
|
ref={confirmPasswordElement} />
|
||||||
|
|
||||||
|
<mdui-button type="submit">Зарегистрироваться</mdui-button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<p>
|
||||||
|
Уже есть аккаунт?
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
id="login-link"
|
||||||
|
className="link"
|
||||||
|
onClick={() => navigate("/login")}>
|
||||||
|
Войдите
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AuthContainer>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
.not-found-page {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3rem;
|
||||||
|
max-width: 800px;
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 3rem;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code {
|
||||||
|
font-size: 6rem;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #667eea;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found-content h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #2d3748;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found-content p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #718096;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found-illustration {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #667eea;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.not-found-container {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found-content h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found-actions {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
+162
-31
@@ -1,8 +1,26 @@
|
|||||||
@use "common/colors" as *;
|
@use "common/colors" as *;
|
||||||
@use "common/material" as *;
|
@use "common/material" as *;
|
||||||
|
@use "sass:color";
|
||||||
|
|
||||||
#chat-interface {
|
#chat-interface {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg, $color-dark-background 0%, $color-dark-surface-container 70%, rgba($color-dark-primary-container, 0.3) 100%);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 80%, rgba($color-dark-primary, 0.15) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 80% 20%, rgba($color-dark-tertiary, 0.15) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 40% 40%, rgba($color-dark-secondary, 0.1) 0%, transparent 50%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -69,10 +87,13 @@
|
|||||||
|
|
||||||
.chat-header {
|
.chat-header {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
background: $color-dark-surface-container;
|
background: rgba($color-dark-surface-container, 0.8);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
box-shadow: black 0 0 20px;
|
box-shadow: 0 4px 20px rgba($color-dark-primary, 0.1);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
.chat-header-avatar {
|
.chat-header-avatar {
|
||||||
width: 45px;
|
width: 45px;
|
||||||
@@ -148,8 +169,10 @@
|
|||||||
|
|
||||||
.chat-messages {
|
.chat-messages {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 1rem;
|
padding: 10px 20px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 7px;
|
width: 7px;
|
||||||
@@ -337,9 +360,47 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.received .message-inner {
|
&.received .message-inner {
|
||||||
background-color: $color-dark-surface-container;
|
background: $color-dark-surface-container;
|
||||||
|
color: $color-dark-on-surface;
|
||||||
border-top-left-radius: 5px;
|
border-top-left-radius: 5px;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba($color-dark-outline-variant, 0.4);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(135deg, rgba($color-dark-primary, 0.05), rgba($color-dark-tertiary, 0.03));
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.received .message-time {
|
||||||
|
color: $color-dark-on-surface-variant;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
.message-status-indicator {
|
||||||
|
.success-icon {
|
||||||
|
color: $color-dark-on-surface-variant;
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-icon {
|
||||||
|
color: #ff6b6b;
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sent {
|
&.sent {
|
||||||
@@ -347,13 +408,47 @@
|
|||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
|
|
||||||
.message-inner {
|
.message-inner {
|
||||||
background-color: $color-dark-primary-container;
|
background: linear-gradient(135deg, color.adjust($color-dark-primary, $lightness: 8%), color.adjust($color-dark-primary-container, $lightness: 5%));
|
||||||
color: $color-dark-on-primary-container;
|
color: $color-dark-on-primary;
|
||||||
border-top-right-radius: 5px;
|
border-top-right-radius: 5px;
|
||||||
|
box-shadow: 0 0 20px rgba($color-dark-primary, 0.4);
|
||||||
|
border: 1px solid rgba($color-dark-primary, 0.5);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-time {
|
.message-time {
|
||||||
color: $color-dark-on-primary-container;
|
color: $color-dark-on-primary;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
.message-status-indicator {
|
||||||
|
.success-icon {
|
||||||
|
color: $color-dark-on-primary;
|
||||||
|
filter: brightness(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-icon {
|
||||||
|
color: #ff6b6b;
|
||||||
|
filter: brightness(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -401,30 +496,15 @@
|
|||||||
|
|
||||||
.chat-input-wrapper {
|
.chat-input-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 20px 20px 20px;
|
margin: 0 10px 10px 10px;
|
||||||
|
|
||||||
&::before {
|
|
||||||
$height: 20px;
|
|
||||||
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -$height;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: $height;
|
|
||||||
background: linear-gradient(
|
|
||||||
0deg,
|
|
||||||
$color-dark-surface,
|
|
||||||
rgba(255, 255, 255, 0),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group {
|
.input-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: $color-dark-surface-container;
|
background: $color-dark-surface-container;
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
border: 1px solid rgba($color-dark-outline-variant, 0.4);
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
.contextual-preview {
|
.contextual-preview {
|
||||||
padding: 12px 16px 0 16px;
|
padding: 12px 16px 0 16px;
|
||||||
@@ -467,11 +547,17 @@
|
|||||||
outline: none;
|
outline: none;
|
||||||
caret-color: $color-dark-primary;
|
caret-color: $color-dark-primary;
|
||||||
color: $color-dark-on-surface;
|
color: $color-dark-on-surface;
|
||||||
|
background: transparent;
|
||||||
resize: none;
|
resize: none;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
font-size: 13pt;
|
font-size: 13pt;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $color-dark-on-surface-variant;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
@@ -485,17 +571,20 @@
|
|||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: $color-dark-primary;
|
background: linear-gradient(135deg, color.adjust($color-dark-primary, $lightness: 8%), color.adjust($color-dark-primary-container, $lightness: 5%));
|
||||||
color: $color-dark-on-primary;
|
color: $color-dark-on-primary;
|
||||||
border: none;
|
border: 1px solid rgba($color-dark-primary, 0.5);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: background-color 0.25s ease;
|
transition: all 0.25s ease;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
|
box-shadow: 0 0 20px rgba($color-dark-primary, 0.4);
|
||||||
|
|
||||||
@include hoverStateLayer($background: $color-dark-primary);
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 0 30px rgba($color-dark-primary, 0.6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -504,6 +593,48 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ChatHeader component styles
|
||||||
|
.chat-header-left {
|
||||||
|
.product-name {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile {
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
border: 2px solid rgba($color-dark-primary, 0.4);
|
||||||
|
box-shadow: 0 0 15px rgba($color-dark-primary, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 25px rgba($color-dark-primary, 0.5);
|
||||||
|
border-color: rgba($color-dark-primary, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.message-profile-pic {
|
.message-profile-pic {
|
||||||
img {
|
img {
|
||||||
@@ -0,0 +1,657 @@
|
|||||||
|
@use "common/material" as *;
|
||||||
|
|
||||||
|
.homepage {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, $color-dark-background 0%, $color-dark-surface-container 50%, $color-dark-primary-container 100%);
|
||||||
|
color: $color-dark-on-background;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 80%, rgba($color-dark-primary, 0.3) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 80% 20%, rgba($color-dark-tertiary, 0.3) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 40% 40%, rgba($color-dark-secondary, 0.2) 0%, transparent 50%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cascaded styles for all child elements
|
||||||
|
* {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Container styles
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Header styles
|
||||||
|
.homepage-header {
|
||||||
|
padding: 1rem 0;
|
||||||
|
background: rgba($color-dark-surface-container, 0.8);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-bottom: 1px solid rgba($color-dark-primary, 0.3);
|
||||||
|
box-shadow: 0 4px 20px rgba($color-dark-primary, 0.1);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hero section
|
||||||
|
.hero {
|
||||||
|
padding: 4rem 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 80vh;
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 600px;
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.1;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary, $color-dark-secondary);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-shadow: 0 0 30px rgba($color-dark-primary, 0.5);
|
||||||
|
animation: neonGlow 3s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
.chat-preview {
|
||||||
|
perspective: 1000px;
|
||||||
|
|
||||||
|
.chat-window {
|
||||||
|
background: rgba($color-dark-surface-container, 0.95);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
box-shadow:
|
||||||
|
0 20px 40px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 20px rgba($color-dark-primary, 0.3),
|
||||||
|
inset 0 1px 0 rgba($color-dark-primary, 0.2);
|
||||||
|
transform: rotateY(-5deg) rotateX(5deg);
|
||||||
|
color: $color-dark-on-surface;
|
||||||
|
max-width: 400px;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid rgba($color-dark-primary, 0.3);
|
||||||
|
|
||||||
|
.chat-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid rgba($color-dark-primary, 0.3);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
.chat-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online-indicator {
|
||||||
|
color: $color-dark-primary;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-shadow: 0 0 10px rgba($color-dark-primary, 0.8);
|
||||||
|
animation: pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-messages {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
.message {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
&.sent {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
background: linear-gradient(135deg, $color-dark-primary, $color-dark-primary-container);
|
||||||
|
color: $color-dark-on-primary;
|
||||||
|
box-shadow: 0 0 15px rgba($color-dark-primary, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.received {
|
||||||
|
.message-content {
|
||||||
|
background: rgba($color-dark-surface-variant, 0.8);
|
||||||
|
color: $color-dark-on-surface-variant;
|
||||||
|
border: 1px solid rgba($color-dark-outline-variant, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, $color-dark-primary, $color-dark-tertiary);
|
||||||
|
color: $color-dark-on-primary;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-shadow: 0 0 10px rgba($color-dark-primary, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
max-width: 70%;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: 18px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.message-text {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-time {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Features section
|
||||||
|
.features {
|
||||||
|
padding: 6rem 0;
|
||||||
|
background: rgba($color-dark-surface-container, 0.3);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-top: 1px solid rgba($color-dark-primary, 0.2);
|
||||||
|
border-bottom: 1px solid rgba($color-dark-primary, 0.2);
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
background: rgba($color-dark-surface-container, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 2rem;
|
||||||
|
border: 1px solid rgba($color-dark-primary, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(135deg, rgba($color-dark-primary, 0.1), rgba($color-dark-tertiary, 0.1));
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow:
|
||||||
|
0 20px 40px rgba(0, 0, 0, 0.3),
|
||||||
|
0 0 30px rgba($color-dark-primary, 0.2);
|
||||||
|
border-color: rgba($color-dark-primary, 0.5);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: linear-gradient(135deg, rgba($color-dark-primary, 0.3), rgba($color-dark-tertiary, 0.3));
|
||||||
|
border-radius: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border: 1px solid rgba($color-dark-primary, 0.4);
|
||||||
|
box-shadow: 0 0 15px rgba($color-dark-primary, 0.2);
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
mdui-icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: $color-dark-primary;
|
||||||
|
text-shadow: 0 0 10px rgba($color-dark-primary, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: $color-dark-on-surface;
|
||||||
|
text-shadow: 0 0 10px rgba($color-dark-primary, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 1.6;
|
||||||
|
opacity: 0.9;
|
||||||
|
color: $color-dark-on-surface-variant;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Download section
|
||||||
|
.download {
|
||||||
|
padding: 6rem 0;
|
||||||
|
|
||||||
|
.download-content {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// CTA section
|
||||||
|
.cta {
|
||||||
|
padding: 6rem 0;
|
||||||
|
background: rgba($color-dark-surface-container, 0.3);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-top: 1px solid rgba($color-dark-primary, 0.2);
|
||||||
|
|
||||||
|
.cta-content {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
.homepage-footer {
|
||||||
|
background: rgba($color-dark-surface-container, 0.8);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
padding: 3rem 0 1rem;
|
||||||
|
border-top: 1px solid rgba($color-dark-primary, 0.3);
|
||||||
|
box-shadow: 0 -4px 20px rgba($color-dark-primary, 0.1);
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
.footer-section {
|
||||||
|
h4 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: $color-dark-on-surface;
|
||||||
|
text-shadow: 0 0 10px rgba($color-dark-primary, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
opacity: 0.8;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: $color-dark-on-surface-variant;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $color-dark-on-surface;
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: 0.8;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
padding: 0.25rem 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
color: $color-dark-primary;
|
||||||
|
text-shadow: 0 0 10px rgba($color-dark-primary, 0.5);
|
||||||
|
background: rgba($color-dark-primary, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid rgba($color-dark-primary, 0.3);
|
||||||
|
|
||||||
|
p {
|
||||||
|
opacity: 0.7;
|
||||||
|
margin: 0;
|
||||||
|
color: $color-dark-on-surface-variant;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keyframes for animations
|
||||||
|
@keyframes neonGlow {
|
||||||
|
0% {
|
||||||
|
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5), 0 0 40px rgba($color-dark-primary, 0.3);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
text-shadow: 0 0 30px rgba($color-dark-primary, 0.8), 0 0 60px rgba($color-dark-primary, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive Design
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.homepage {
|
||||||
|
.homepage-header {
|
||||||
|
position: fixed;
|
||||||
|
top: 1rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
max-width: 1200px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba($color-dark-primary, 0.3);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||||
|
0 0 20px rgba($color-dark-primary, 0.2);
|
||||||
|
backdrop-filter: blur(30px);
|
||||||
|
background: rgba($color-dark-surface-container, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
margin-top: 6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
.homepage {
|
||||||
|
.homepage-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.homepage {
|
||||||
|
.container {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homepage-header {
|
||||||
|
.header-content {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem 0;
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
.hero-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
.chat-preview {
|
||||||
|
.chat-window {
|
||||||
|
transform: none;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.features {
|
||||||
|
.features-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.download {
|
||||||
|
.download-content {
|
||||||
|
h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
.cta-content {
|
||||||
|
h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.homepage-footer {
|
||||||
|
.footer-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.homepage {
|
||||||
|
.hero {
|
||||||
|
.hero-content {
|
||||||
|
.hero-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.features {
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.download {
|
||||||
|
.download-content {
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
.cta-content {
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+2
@@ -10,6 +10,8 @@
|
|||||||
@use "electron";
|
@use "electron";
|
||||||
@use "dialogs/reply";
|
@use "dialogs/reply";
|
||||||
@use "download-app";
|
@use "download-app";
|
||||||
|
@use "404" as not-found;
|
||||||
|
@use "homepage";
|
||||||
|
|
||||||
@use "lib/fonts/montserrat";
|
@use "lib/fonts/montserrat";
|
||||||
@use "lib/fonts/material-symbols";
|
@use "lib/fonts/material-symbols";
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
+4
-3
@@ -7,14 +7,15 @@ import { API_BASE_URL } from "../../core/config";
|
|||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
import type { TextField } from "mdui/components/text-field";
|
import type { TextField } from "mdui/components/text-field";
|
||||||
import { useAppState } from "../state";
|
import { useAppState } from "../state";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
import { MaterialTextField } from "../components/core/TextField";
|
import { MaterialTextField } from "../components/core/TextField";
|
||||||
import { initialize, isSupported, startElectronReceiver, subscribe } from "../../utils/push-notifications";
|
import { initialize, isSupported, startElectronReceiver, subscribe } from "../../utils/push-notifications";
|
||||||
import { isElectron } from "../../electron/electron";
|
import { isElectron } from "../../electron/electron";
|
||||||
|
|
||||||
export default function LoginScreen() {
|
export default function LoginScreen() {
|
||||||
const [alerts, updateAlerts] = useImmer<Alert[]>([]);
|
const [alerts, updateAlerts] = useImmer<Alert[]>([]);
|
||||||
const setCurrentPage = useAppState(state => state.setCurrentPage);
|
|
||||||
const setUser = useAppState(state => state.setUser);
|
const setUser = useAppState(state => state.setUser);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
function showAlert(type: AlertType, message: string) {
|
function showAlert(type: AlertType, message: string) {
|
||||||
updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
|
updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
|
||||||
@@ -67,7 +68,7 @@ export default function LoginScreen() {
|
|||||||
console.error("Key setup failed:", e);
|
console.error("Key setup failed:", e);
|
||||||
}
|
}
|
||||||
|
|
||||||
setCurrentPage("chat");
|
navigate("/chat");
|
||||||
|
|
||||||
// Initialize notifications
|
// Initialize notifications
|
||||||
try {
|
try {
|
||||||
@@ -130,7 +131,7 @@ export default function LoginScreen() {
|
|||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="link"
|
className="link"
|
||||||
onClick={() => setCurrentPage("register")}>
|
onClick={() => navigate("/register")}>
|
||||||
Зарегистрируйтесь
|
Зарегистрируйтесь
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
+4
-3
@@ -7,13 +7,14 @@ import { TextField } from "mdui/components/text-field";
|
|||||||
import type { ErrorResponse, RegisterRequest, LoginResponse } from "../../core/types";
|
import type { ErrorResponse, RegisterRequest, LoginResponse } from "../../core/types";
|
||||||
import { API_BASE_URL } from "../../core/config";
|
import { API_BASE_URL } from "../../core/config";
|
||||||
import { useAppState } from "../state";
|
import { useAppState } from "../state";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
import { MaterialTextField } from "../components/core/TextField";
|
import { MaterialTextField } from "../components/core/TextField";
|
||||||
import { ensureKeysOnLogin } from "../../auth/crypto";
|
import { ensureKeysOnLogin } from "../../auth/crypto";
|
||||||
|
|
||||||
export default function RegisterScreen() {
|
export default function RegisterScreen() {
|
||||||
const [alerts, updateAlerts] = useImmer<Alert[]>([]);
|
const [alerts, updateAlerts] = useImmer<Alert[]>([]);
|
||||||
const setCurrentPage = useAppState(state => state.setCurrentPage);
|
|
||||||
const setUser = useAppState(state => state.setUser);
|
const setUser = useAppState(state => state.setUser);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
function showAlert(type: AlertType, message: string) {
|
function showAlert(type: AlertType, message: string) {
|
||||||
updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
|
updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
|
||||||
@@ -83,7 +84,7 @@ export default function RegisterScreen() {
|
|||||||
console.error("Key setup failed:", e);
|
console.error("Key setup failed:", e);
|
||||||
}
|
}
|
||||||
|
|
||||||
setCurrentPage("chat");
|
navigate("/chat");
|
||||||
} else {
|
} else {
|
||||||
const data: ErrorResponse = await response.json();
|
const data: ErrorResponse = await response.json();
|
||||||
showAlert("danger", data.message || "Ошибка при регистрации");
|
showAlert("danger", data.message || "Ошибка при регистрации");
|
||||||
@@ -136,7 +137,7 @@ export default function RegisterScreen() {
|
|||||||
href="#"
|
href="#"
|
||||||
id="login-link"
|
id="login-link"
|
||||||
className="link"
|
className="link"
|
||||||
onClick={() => setCurrentPage("login")}>
|
onClick={() => navigate("/login")}>
|
||||||
Войдите
|
Войдите
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
@@ -10,7 +10,6 @@ import { API_BASE_URL } from "../core/config";
|
|||||||
import { initialize, subscribe, startElectronReceiver, isSupported } from "../utils/push-notifications";
|
import { initialize, subscribe, startElectronReceiver, isSupported } from "../utils/push-notifications";
|
||||||
import { isElectron } from "../electron/electron";
|
import { isElectron } from "../electron/electron";
|
||||||
|
|
||||||
type Page = "login" | "register" | "chat"
|
|
||||||
export type ChatTabs = "chats" | "channels" | "contacts" | "dms"
|
export type ChatTabs = "chats" | "channels" | "contacts" | "dms"
|
||||||
|
|
||||||
interface ActiveDM {
|
interface ActiveDM {
|
||||||
@@ -37,9 +36,6 @@ export interface UserState {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface AppState {
|
interface AppState {
|
||||||
currentPage: Page;
|
|
||||||
setCurrentPage: (page: Page) => void;
|
|
||||||
|
|
||||||
// Chat state
|
// Chat state
|
||||||
chat: ChatState;
|
chat: ChatState;
|
||||||
addMessage: (message: Message) => void;
|
addMessage: (message: Message) => void;
|
||||||
@@ -60,13 +56,10 @@ interface AppState {
|
|||||||
user: UserState;
|
user: UserState;
|
||||||
setUser: (token: string, user: User) => void;
|
setUser: (token: string, user: User) => void;
|
||||||
logout: () => void;
|
logout: () => void;
|
||||||
restoreUserFromStorage: () => void;
|
restoreUserFromStorage: () => Promise<void>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useAppState = create<AppState>((set, get) => ({
|
export const useAppState = create<AppState>((set, get) => ({
|
||||||
currentPage: "login", // default page
|
|
||||||
setCurrentPage: (page: Page) => set({ currentPage: page }),
|
|
||||||
|
|
||||||
// Chat state
|
// Chat state
|
||||||
chat: {
|
chat: {
|
||||||
messages: [],
|
messages: [],
|
||||||
@@ -191,8 +184,7 @@ export const useAppState = create<AppState>((set, get) => ({
|
|||||||
user: {
|
user: {
|
||||||
currentUser: null,
|
currentUser: null,
|
||||||
authToken: null
|
authToken: null
|
||||||
},
|
}
|
||||||
currentPage: "login"
|
|
||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
restoreUserFromStorage: async () => {
|
restoreUserFromStorage: async () => {
|
||||||
@@ -212,8 +204,7 @@ export const useAppState = create<AppState>((set, get) => ({
|
|||||||
user: {
|
user: {
|
||||||
currentUser: user,
|
currentUser: user,
|
||||||
authToken: token
|
authToken: token
|
||||||
},
|
}
|
||||||
currentPage: "chat"
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
try {
|
try {
|
||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
import nacl from "tweetnacl";
|
import nacl from "tweetnacl";
|
||||||
import { hkdfExtractAndExpand } from "../crypto/kdf";
|
import { hkdfExtractAndExpand } from "./kdf";
|
||||||
|
|
||||||
export interface X25519KeyPair {
|
export interface X25519KeyPair {
|
||||||
publicKey: Uint8Array;
|
publicKey: Uint8Array;
|
||||||
+2
-1
@@ -2,6 +2,7 @@ import { API_BASE_URL } from "../core/config";
|
|||||||
import { isElectron } from "../electron/electron";
|
import { isElectron } from "../electron/electron";
|
||||||
import { websocket } from "../core/websocket";
|
import { websocket } from "../core/websocket";
|
||||||
import type { NewMessageWebSocketMessage, WebSocketMessage } from "../core/types";
|
import type { NewMessageWebSocketMessage, WebSocketMessage } from "../core/types";
|
||||||
|
import serviceWorker from "../service-worker/service-worker.ts?worker&url";
|
||||||
|
|
||||||
export interface PushSubscriptionData {
|
export interface PushSubscriptionData {
|
||||||
endpoint: string;
|
endpoint: string;
|
||||||
@@ -152,7 +153,7 @@ export async function initialize(): Promise<boolean> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
registration = await navigator.serviceWorker.register("/assets/serviceWorker.js");
|
registration = await navigator.serviceWorker.register(serviceWorker, { type: "module" });
|
||||||
console.log("Service Worker registered successfully");
|
console.log("Service Worker registered successfully");
|
||||||
|
|
||||||
const permission = await Notification.requestPermission();
|
const permission = await Notification.requestPermission();
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import { MINIMUM_WIDTH } from "../core/config";
|
|
||||||
import { isElectron } from "../electron/electron";
|
|
||||||
import { ElectronTitleBar } from "./components/Electron";
|
|
||||||
import useWindowSize from "./hooks/useWindowSize";
|
|
||||||
import ChatScreen from "./screen/ChatScreen";
|
|
||||||
import DownloadAppScreen from "./screen/DownloadAppScreen";
|
|
||||||
import LoginScreen from "./screen/LoginScreen";
|
|
||||||
import RegisterScreen from "./screen/RegisterScreen";
|
|
||||||
import { useAppState } from "./state";
|
|
||||||
import { useEffect } from "react";
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
const { currentPage, restoreUserFromStorage } = useAppState();
|
|
||||||
const { width } = useWindowSize();
|
|
||||||
|
|
||||||
// Restore user from localStorage on app initialization
|
|
||||||
useEffect(() => {
|
|
||||||
restoreUserFromStorage();
|
|
||||||
}, [restoreUserFromStorage]);
|
|
||||||
|
|
||||||
if (!isElectron && width < MINIMUM_WIDTH) {
|
|
||||||
return <DownloadAppScreen />
|
|
||||||
}
|
|
||||||
|
|
||||||
let page = <LoginScreen />;
|
|
||||||
|
|
||||||
switch (currentPage) {
|
|
||||||
case "login": {
|
|
||||||
page = <LoginScreen />
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "register": {
|
|
||||||
page = <RegisterScreen />
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "chat": {
|
|
||||||
page = <ChatScreen />
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ElectronTitleBar />
|
|
||||||
<div id="main-wrapper">
|
|
||||||
{page}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
+2
-44
@@ -5,8 +5,6 @@ import electron from "vite-plugin-electron/simple";
|
|||||||
import react from "@vitejs/plugin-react";
|
import react from "@vitejs/plugin-react";
|
||||||
import { resolve } from "path";
|
import { resolve } from "path";
|
||||||
|
|
||||||
const serviceWorkerPath = resolve(__dirname, "src/service-worker/service-worker.ts");
|
|
||||||
|
|
||||||
const plugins: PluginOption[] = [
|
const plugins: PluginOption[] = [
|
||||||
react(),
|
react(),
|
||||||
createHtmlPlugin({
|
createHtmlPlugin({
|
||||||
@@ -20,31 +18,7 @@ const plugins: PluginOption[] = [
|
|||||||
minifyCSS: true,
|
minifyCSS: true,
|
||||||
minifyJS: true
|
minifyJS: true
|
||||||
}
|
}
|
||||||
}),
|
})
|
||||||
{
|
|
||||||
name: 'service-worker-redirect',
|
|
||||||
configureServer(server) {
|
|
||||||
server.middlewares.use(async (req, res, next) => {
|
|
||||||
if (req.url === '/assets/serviceWorker.js') {
|
|
||||||
try {
|
|
||||||
const traspiled = await server.transformRequest(serviceWorkerPath);
|
|
||||||
|
|
||||||
res.writeHead(200, {
|
|
||||||
'Content-Type': "application/javascript"
|
|
||||||
});
|
|
||||||
res.end(traspiled!.code);
|
|
||||||
} catch (e) {
|
|
||||||
try {
|
|
||||||
res.writeHead(500);
|
|
||||||
res.end();
|
|
||||||
} catch (e) {}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
next();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
if (process.env.VITE_ELECTRON) {
|
if (process.env.VITE_ELECTRON) {
|
||||||
@@ -107,22 +81,6 @@ export default defineConfig({
|
|||||||
cssMinify: true,
|
cssMinify: true,
|
||||||
assetsInlineLimit: 0,
|
assetsInlineLimit: 0,
|
||||||
outDir: process.env.VITE_ELECTRON ? "build/electron/dist" : "build/normal/dist",
|
outDir: process.env.VITE_ELECTRON ? "build/electron/dist" : "build/normal/dist",
|
||||||
chunkSizeWarningLimit: 1024,
|
chunkSizeWarningLimit: 1024
|
||||||
rollupOptions: {
|
|
||||||
input: {
|
|
||||||
main: resolve(__dirname, "index.html"),
|
|
||||||
serviceWorker: serviceWorkerPath
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
entryFileNames: (chunkInfo) => {
|
|
||||||
// Проверяем имя чанка
|
|
||||||
if (chunkInfo.name === 'serviceWorker') {
|
|
||||||
return 'assets/serviceWorker.js'; // Указываем фиксированное имя для этого скрипта
|
|
||||||
}
|
|
||||||
// Для остальных файлов используем стандартное именование с хэшем
|
|
||||||
return 'assets/[name]-[hash].js';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -68,6 +68,7 @@
|
|||||||
"mdui": "^2.1.4",
|
"mdui": "^2.1.4",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
"react-dom": "^19.1.1",
|
"react-dom": "^19.1.1",
|
||||||
|
"react-router-dom": "^7.9.3",
|
||||||
"tweetnacl": "^1.0.3",
|
"tweetnacl": "^1.0.3",
|
||||||
"use-immer": "^0.11.0",
|
"use-immer": "^0.11.0",
|
||||||
"zustand": "^5.0.8"
|
"zustand": "^5.0.8"
|
||||||
|
|||||||
Reference in New Issue
Block a user