mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
420 lines
22 KiB
HTML
420 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" class="mdui-theme-dark">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Loading...</title>
|
||
<link rel="icon" href="./src/resources/images/logo.png" />
|
||
</head>
|
||
<body>
|
||
<div id="electron-title-bar">
|
||
<div class="macos-padding"></div>
|
||
<div id="window-title"></div>
|
||
<!-- <div class="window-controls">
|
||
<mdui-button-icon icon="remove" id="window-minimize"></mdui-button-icon>
|
||
<mdui-button-icon icon="stack--outlined" id="window-restore" class="hidden"></mdui-button-icon>
|
||
<mdui-button-icon icon="ad--outlined" id="window-maximize"></mdui-button-icon>
|
||
<mdui-button-icon icon="close" id="window-close"></mdui-button-icon>
|
||
</div> -->
|
||
</div>
|
||
<div id="main-wrapper">
|
||
<!-- Login Form -->
|
||
<div id="login-form" class="auth-container">
|
||
<div class="auth-card fade-in">
|
||
<div class="auth-header">
|
||
<h2>
|
||
<span class="material-symbols filled large">login</span>
|
||
Добро пожаловать!
|
||
</h2>
|
||
<p>Войдите в свой аккаунт</p>
|
||
</div>
|
||
<div class="auth-body">
|
||
<div id="login-alerts"></div>
|
||
|
||
<form id="login-form-element">
|
||
<mdui-text-field
|
||
label="Имя пользователя"
|
||
id="login-username"
|
||
name="username"
|
||
variant="outlined"
|
||
icon="person--filled"
|
||
autocomplete="username"
|
||
required>
|
||
</mdui-text-field>
|
||
<mdui-text-field
|
||
label="Пароль"
|
||
id="login-password"
|
||
name="password"
|
||
variant="outlined"
|
||
type="password"
|
||
toggle-password
|
||
icon="password--filled"
|
||
autocomplete="current-password"
|
||
required>
|
||
</mdui-text-field>
|
||
|
||
<mdui-button type="submit">Войти</mdui-button>
|
||
</form>
|
||
|
||
<div class="text-center">
|
||
<p>Ещё нет аккаунта? <a href="#" id="register-link" class="link">Зарегистрируйтесь</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Register Form -->
|
||
<div id="register-form" class="auth-container" style="display: none;">
|
||
<div class="auth-card fade-in">
|
||
<div class="auth-header">
|
||
<h2>
|
||
<span class="material-symbols filled large">person_add</span>
|
||
Регистрация
|
||
</h2>
|
||
<p>Создайте новый аккаунт</p>
|
||
</div>
|
||
<div class="auth-body">
|
||
<div id="register-alerts"></div>
|
||
|
||
<form id="register-form-element">
|
||
<mdui-text-field
|
||
label="Имя пользователя"
|
||
id="register-username"
|
||
name="username"
|
||
variant="outlined"
|
||
icon="person--filled"
|
||
autocomplete="username"
|
||
maxlength="20"
|
||
counter
|
||
required>
|
||
</mdui-text-field>
|
||
<mdui-text-field
|
||
label="Пароль"
|
||
id="register-password"
|
||
name="password"
|
||
variant="outlined"
|
||
type="password"
|
||
toggle-password
|
||
icon="password--filled"
|
||
autocomplete="new-password"
|
||
required>
|
||
</mdui-text-field>
|
||
<mdui-text-field
|
||
label="Подтвердите пароль"
|
||
id="register-confirm-password"
|
||
name="confirm_password"
|
||
variant="outlined"
|
||
type="password"
|
||
toggle-password
|
||
icon="password--filled"
|
||
autocomplete="new-password"
|
||
required>
|
||
</mdui-text-field>
|
||
|
||
<mdui-button type="submit">Зарегистрироваться</mdui-button>
|
||
</form>
|
||
|
||
<div class="text-center">
|
||
<p>
|
||
Уже есть аккаунт?
|
||
<a href="#" id="login-link" class="link">Войдите</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Chat Interface -->
|
||
<div id="chat-interface" style="display: none;">
|
||
<div class="all-container">
|
||
<div class="chat-list" id="chat-list">
|
||
<header class="chat-header-left">
|
||
<div class="product-name">Loading...</div>
|
||
<div class="profile">
|
||
<a href="#" id="profile-open">
|
||
<img src="./src/resources/images/default-avatar.png" alt="" id="preview1" />
|
||
</a>
|
||
</div>
|
||
</header>
|
||
<div class="chat-tabs">
|
||
<mdui-tabs value="chats" full-width>
|
||
<mdui-tab value="chats">
|
||
Чаты
|
||
</mdui-tab>
|
||
<mdui-tab value="channels">
|
||
Каналы
|
||
</mdui-tab>
|
||
<mdui-tab value="contacts">
|
||
Контакты
|
||
</mdui-tab>
|
||
|
||
<mdui-tab-panel slot="panel" value="chats">
|
||
<mdui-list>
|
||
<mdui-list-item headline="Общий чат" description="Вы: Последнее сообщение" id="chat-list-chat-1">
|
||
<img src="./src/resources/images/default-avatar.png" alt="" slot="icon" />
|
||
</mdui-list-item>
|
||
<mdui-list-item headline="Общий чат 2" description="Вы: Последнее сообщение" id="chat-list-chat-2">
|
||
<img src="./src/resources/images/default-avatar.png" alt="" slot="icon" />
|
||
</mdui-list-item>
|
||
</mdui-list>
|
||
</mdui-tab-panel>
|
||
<mdui-tab-panel slot="panel" value="channels">Скоро будет...</mdui-tab-panel>
|
||
<mdui-tab-panel slot="panel" value="contacts">Скоро будет...</mdui-tab-panel>
|
||
</mdui-tabs>
|
||
</div>
|
||
<mdui-bottom-app-bar>
|
||
<mdui-button-icon icon="settings--filled" id="settings-open"></mdui-button-icon>
|
||
<mdui-button-icon icon="group_add--filled"></mdui-button-icon>
|
||
<div style="flex-grow: 1"></div>
|
||
<mdui-fab icon="edit--filled"></mdui-fab>
|
||
</mdui-bottom-app-bar>
|
||
</div>
|
||
<div class="chat-container">
|
||
<div class="chat-main" id="chat-inner">
|
||
<div class="chat-header">
|
||
<img src="./src/resources/images/default-avatar.png" alt="Avatar" class="chat-header-avatar">
|
||
<div class="chat-header-info">
|
||
<div class="info-chat">
|
||
<h4 id="chat-name">Общий чат</h4>
|
||
<p>
|
||
<span class="online-status"></span>
|
||
Онлайн
|
||
</p>
|
||
</div>
|
||
<a href="#" id="hide-chat">Свернуть чат</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-messages" id="chat-messages">
|
||
<!-- Messages will be loaded here dynamically -->
|
||
</div>
|
||
|
||
<div class="chat-input-wrapper">
|
||
<div class="chat-input">
|
||
<form class="input-group" id="message-form">
|
||
<input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
|
||
<button type="submit" class="send-btn">
|
||
<span class="material-symbols filled">send</span>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc>
|
||
<div class="content">
|
||
<div class="header-top">
|
||
<div class="profile-picture-container">
|
||
<img id="profile-picture" src="./src/resources/images/default-avatar.png" alt="Ваше фото" />
|
||
<mdui-button-icon icon="camera_alt--filled" id="upload-pfp-btn" class="upload-overlay" variant="filled"></mdui-button-icon>
|
||
<input type="file" id="pfp-file-input" accept="image/*" style="display: none;">
|
||
</div>
|
||
<mdui-text-field id="username-field" label="Имя пользователя" variant="outlined" value="user123" autocomplete="username"></mdui-text-field>
|
||
</div>
|
||
|
||
<form id="profile-form">
|
||
<mdui-text-field
|
||
id="description-field"
|
||
label="О себе"
|
||
variant="outlined"
|
||
multiline
|
||
rows="3"
|
||
placeholder="Расскажите о себе..."
|
||
autocomplete="none"></mdui-text-field>
|
||
<div class="dialog-actions">
|
||
<mdui-button type="submit" id="profile-submit">Сохранить изменения</mdui-button>
|
||
<mdui-button id="profile-dialog-close" variant="outlined">Закрыть</mdui-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</mdui-dialog>
|
||
|
||
<!-- Profile Picture Cropper Dialog -->
|
||
<mdui-dialog id="cropper-dialog" close-on-overlay-click close-on-esc>
|
||
<div class="cropper-dialog-content">
|
||
<div class="cropper-header">
|
||
<h3>Обрезать фото профиля</h3>
|
||
<mdui-button-icon icon="close" id="cropper-close"></mdui-button-icon>
|
||
</div>
|
||
<div class="cropper-container">
|
||
<div id="cropper-area"></div>
|
||
</div>
|
||
<div class="cropper-actions">
|
||
<mdui-button id="crop-cancel" variant="outlined">Отмена</mdui-button>
|
||
<mdui-button id="crop-save">Сохранить</mdui-button>
|
||
</div>
|
||
</div>
|
||
</mdui-dialog>
|
||
|
||
<mdui-dialog id="settings-dialog" close-on-overlay-click close-on-esc fullscreen>
|
||
<div class="fullscreen-wrapper">
|
||
<div id="settings-dialog-inner">
|
||
<div class="header">
|
||
<mdui-button-icon icon="close" id="settings-close"></mdui-button-icon>
|
||
<mdui-top-app-bar-title>Настройки</mdui-top-app-bar-title>
|
||
</div>
|
||
<div id="settings-menu">
|
||
<mdui-list>
|
||
<mdui-list-item icon="notifications--filled" rounded active>Уведомления</mdui-list-item>
|
||
<mdui-list-item icon="palette--filled" rounded>Внешний вид</mdui-list-item>
|
||
<mdui-list-item icon="security--filled" rounded>Безопасность</mdui-list-item>
|
||
<mdui-list-item icon="language--filled" rounded>Язык</mdui-list-item>
|
||
<mdui-list-item icon="storage--filled" rounded>Хранилище</mdui-list-item>
|
||
<mdui-list-item icon="help--filled" rounded>Помощь</mdui-list-item>
|
||
<mdui-list-item icon="info--filled" rounded>О приложении</mdui-list-item>
|
||
</mdui-list>
|
||
<div class="screen">
|
||
<div id="notifications-settings" class="settings-panel active">
|
||
<h3>Уведомления</h3>
|
||
<mdui-switch checked>Новые сообщения</mdui-switch>
|
||
<mdui-switch checked>Звуковые уведомления</mdui-switch>
|
||
<mdui-switch>Уведомления о статусе</mdui-switch>
|
||
<mdui-switch checked>Email уведомления</mdui-switch>
|
||
</div>
|
||
|
||
<div id="appearance-settings" class="settings-panel">
|
||
<h3>Внешний вид</h3>
|
||
<mdui-select label="Тема" variant="outlined">
|
||
<mdui-menu-item value="dark">Тёмная</mdui-menu-item>
|
||
<mdui-menu-item value="light">Светлая</mdui-menu-item>
|
||
<mdui-menu-item value="auto">Авто</mdui-menu-item>
|
||
</mdui-select>
|
||
<mdui-select label="Размер шрифта" variant="outlined">
|
||
<mdui-menu-item value="small">Маленький</mdui-menu-item>
|
||
<mdui-menu-item value="medium">Средний</mdui-menu-item>
|
||
<mdui-menu-item value="large">Большой</mdui-menu-item>
|
||
</mdui-select>
|
||
</div>
|
||
|
||
<div id="security-settings" class="settings-panel">
|
||
<h3>Безопасность</h3>
|
||
<mdui-button variant="outlined">Изменить пароль</mdui-button>
|
||
<mdui-button variant="outlined">Двухфакторная аутентификация</mdui-button>
|
||
<mdui-switch>Автоматический выход</mdui-switch>
|
||
</div>
|
||
|
||
<div id="language-settings" class="settings-panel">
|
||
<h3>Язык</h3>
|
||
<mdui-select label="Выберите язык" variant="outlined">
|
||
<mdui-menu-item value="ru">Русский</mdui-menu-item>
|
||
<mdui-menu-item value="en">English</mdui-menu-item>
|
||
<mdui-menu-item value="es">Español</mdui-menu-item>
|
||
</mdui-select>
|
||
</div>
|
||
|
||
<div id="storage-settings" class="settings-panel">
|
||
<h3>Хранилище</h3>
|
||
<p>Использовано: 2.5 ГБ из 10 ГБ</p>
|
||
<mdui-linear-progress value="25"></mdui-linear-progress>
|
||
<mdui-button variant="outlined">Очистить кэш</mdui-button>
|
||
</div>
|
||
|
||
<div id="help-settings" class="settings-panel">
|
||
<h3>Помощь</h3>
|
||
<mdui-button variant="outlined">Руководство пользователя</mdui-button>
|
||
<mdui-button variant="outlined">Связаться с поддержкой</mdui-button>
|
||
<mdui-button variant="outlined">FAQ</mdui-button>
|
||
</div>
|
||
|
||
<div id="about-settings" class="settings-panel">
|
||
<h3>О приложении</h3>
|
||
<p>Версия: 1.0.0</p>
|
||
<p>© 2025 <span class="product-name">Loading...</span>. Все права защищены.</p>
|
||
<mdui-button variant="outlined">Политика конфиденциальности</mdui-button>
|
||
<mdui-button variant="outlined">Условия использования</mdui-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</mdui-dialog>
|
||
|
||
<div id="message-context-menu" class="context-menu">
|
||
<div class="context-menu-item" data-action="reply">
|
||
<span class="material-symbols">reply</span>
|
||
Reply
|
||
</div>
|
||
<div class="context-menu-item" data-action="edit">
|
||
<span class="material-symbols">edit</span>
|
||
Edit
|
||
</div>
|
||
<div class="context-menu-item" data-action="delete">
|
||
<span class="material-symbols">delete</span>
|
||
Delete
|
||
</div>
|
||
</div>
|
||
|
||
<mdui-dialog id="edit-message-dialog" close-on-overlay-click close-on-esc>
|
||
<div class="dialog-content">
|
||
<h3>Edit Message</h3>
|
||
<mdui-text-field
|
||
id="edit-message-input"
|
||
label="Edit Message"
|
||
variant="outlined"
|
||
multiline
|
||
rows="4"
|
||
placeholder="Edit your message..."
|
||
maxlength="1000">
|
||
</mdui-text-field>
|
||
<div class="dialog-actions">
|
||
<mdui-button id="edit-cancel" variant="outlined">Cancel</mdui-button>
|
||
<mdui-button id="edit-save">Save</mdui-button>
|
||
</div>
|
||
</div>
|
||
</mdui-dialog>
|
||
|
||
<mdui-dialog id="reply-message-dialog" close-on-overlay-click close-on-esc>
|
||
<div class="dialog-content">
|
||
<h3>Reply to Message</h3>
|
||
<div class="reply-preview" id="reply-preview"></div>
|
||
<mdui-text-field
|
||
id="reply-message-input"
|
||
label="Reply"
|
||
variant="outlined"
|
||
multiline
|
||
rows="4"
|
||
placeholder="Type your reply..."
|
||
maxlength="1000">
|
||
</mdui-text-field>
|
||
<div class="dialog-actions">
|
||
<mdui-button id="reply-cancel" variant="outlined">Cancel</mdui-button>
|
||
<mdui-button id="reply-send">Send Reply</mdui-button>
|
||
</div>
|
||
</div>
|
||
</mdui-dialog>
|
||
|
||
<mdui-dialog id="user-profile-dialog" close-on-overlay-click close-on-esc>
|
||
<div class="content">
|
||
<div class="profile-picture-section">
|
||
<img class="profile-picture" src="" alt="Profile Picture">
|
||
</div>
|
||
<div class="profile-info">
|
||
<div class="username-section">
|
||
<h4 class="username"></h4>
|
||
<div class="online-status"></div>
|
||
</div>
|
||
<div class="bio-section">
|
||
<label>Bio:</label>
|
||
<div class="bio-display"></div>
|
||
</div>
|
||
<div class="profile-stats">
|
||
<div class="stat">
|
||
<span class="stat-label">Member since:</span>
|
||
<span class="stat-value member-since"></span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Last seen:</span>
|
||
<span class="stat-value last-seen"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</mdui-dialog>
|
||
|
||
<script src="src/main.ts" type="module"></script>
|
||
</body>
|
||
</html> |