86 lines
3.9 KiB
HTML
86 lines
3.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="ru">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|||
|
|
<meta name="theme-color" content="#0084ff">
|
|||
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|||
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|||
|
|
<title>Parley Chat</title>
|
|||
|
|
<base href="{{.BasePath}}/">
|
|||
|
|
<link rel="stylesheet" href="static/style.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- Экран логина/регистрации -->
|
|||
|
|
<div id="auth-screen" class="auth-screen">
|
|||
|
|
<div class="auth-container">
|
|||
|
|
<h2>💬 Parley Chat</h2>
|
|||
|
|
<div class="tabs">
|
|||
|
|
<button class="tab active" onclick="switchTab('login')">Вход</button>
|
|||
|
|
<button class="tab" onclick="switchTab('register')">Регистрация</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="login-form" class="auth-form">
|
|||
|
|
<input type="text" id="login-username" placeholder="Имя пользователя" autocomplete="username">
|
|||
|
|
<input type="password" id="login-password" placeholder="Пароль" autocomplete="current-password">
|
|||
|
|
<button onclick="login()">Войти</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="register-form" class="auth-form" style="display:none">
|
|||
|
|
<input type="text" id="reg-username" placeholder="Придумайте имя" autocomplete="off">
|
|||
|
|
<input type="password" id="reg-password" placeholder="Придумайте пароль" autocomplete="new-password">
|
|||
|
|
<button onclick="register()">Зарегистрироваться</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="auth-error" class="auth-error"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Основной экран чата -->
|
|||
|
|
<div id="chat-screen" class="chat-screen" style="display:none">
|
|||
|
|
<div class="container">
|
|||
|
|
<!-- Левая панель с пользователями -->
|
|||
|
|
<div class="sidebar hidden" id="sidebar">
|
|||
|
|
<div class="sidebar-header">
|
|||
|
|
<span id="current-username">👤 Пользователь</span>
|
|||
|
|
<button id="admin-btn" style="display:none" onclick="showAdminPanel()" title="Админ-панель">⚙️</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="users-list" class="users-list">
|
|||
|
|
<div style="padding: 20px; text-align: center; color: #888;">Загрузка...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Правая панель чата -->
|
|||
|
|
<div class="chat-area" id="chat-area">
|
|||
|
|
<div id="chat-header" class="chat-header">
|
|||
|
|
<span class="mobile-back-btn" onclick="showSidebar()" title="Назад к списку">←</span>
|
|||
|
|
<span>💬 Выберите собеседника</span>
|
|||
|
|
</div>
|
|||
|
|
<div id="messages" class="messages">
|
|||
|
|
<div class="empty-chat">
|
|||
|
|
<div>
|
|||
|
|
<div class="empty-chat-icon">💭</div>
|
|||
|
|
<div class="empty-chat-text">Выберите собеседника<br>для начала общения</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="message-input">
|
|||
|
|
<input type="text" id="message-input" placeholder="Введите сообщение..." disabled>
|
|||
|
|
<button id="send-btn" onclick="sendMessage()" disabled title="Отправить">➤</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Админ панель -->
|
|||
|
|
<div id="admin-panel" class="modal" style="display:none">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<h3>👑 Управление пользователями</h3>
|
|||
|
|
<div id="admin-users-list"></div>
|
|||
|
|
<button class="close-btn" onclick="closeAdminPanel()">Закрыть</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="static/app.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|