178 lines
8.4 KiB
HTML
178 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Это днище интернета 2</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Auth Screen -->
|
|
<div id="auth-screen" class="auth-container">
|
|
<div class="auth-box">
|
|
<h1>Это днище интернета 2</h1>
|
|
<div id="auth-form">
|
|
<input type="text" id="username-input" placeholder="Username" class="auth-input">
|
|
<input type="password" id="password-input" placeholder="Password" class="auth-input">
|
|
<button id="login-btn" class="auth-btn">Login</button>
|
|
<button id="register-btn" class="auth-btn register-btn">Register</button>
|
|
<div id="auth-message" class="auth-message"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Screen -->
|
|
<div id="chat-screen" class="chat-container" style="display: none;">
|
|
<!-- Sidebar Overlay for Mobile -->
|
|
<div id="sidebar-overlay" class="sidebar-overlay"></div>
|
|
|
|
<!-- Sidebar Toggle Button (Mobile) -->
|
|
<button id="sidebar-toggle" class="sidebar-toggle">☰</button>
|
|
|
|
<!-- Servers column -->
|
|
<div id="servers-bar" class="servers-bar">
|
|
<!-- server icons will be injected here -->
|
|
<!-- <button id="create-server-btn" class="create-server-btn">+</button> -->
|
|
</div>
|
|
<!-- Sidebar -->
|
|
<div class="sidebar">
|
|
<div class="server-header">
|
|
<div class="server-name">Это днище</div>
|
|
<button id="logout-btn" class="logout-btn">⌫</button>
|
|
</div>
|
|
|
|
<div class="sidebar-tabs">
|
|
<button class="tab-btn active" data-tab="chat">💬</button>
|
|
<button class="tab-btn" data-tab="friends">👥</button>
|
|
</div>
|
|
|
|
<!-- Chat Tab -->
|
|
<div id="chat-tab" class="tab-content active">
|
|
<div id="channels-list" class="channels">
|
|
<!-- channels will go here -->
|
|
</div>
|
|
<div class="dm-header">Friends</div>
|
|
<div id="dm-list" class="dm-list"></div>
|
|
</div>
|
|
|
|
<!-- Friends Tab -->
|
|
<div id="friends-tab" class="tab-content">
|
|
<div class="friends-section">
|
|
<div class="section-header">
|
|
<span>Friend Requests</span>
|
|
<button id="add-friend-btn" class="add-friend-btn">+</button>
|
|
</div>
|
|
<div id="friend-requests-list" class="friend-requests-list"></div>
|
|
</div>
|
|
|
|
<div class="friends-section">
|
|
<div class="section-header">My Friends</div>
|
|
<div id="friends-list" class="friends-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Chat Area -->
|
|
<div class="main-content">
|
|
<!-- Header -->
|
|
<div class="chat-header">
|
|
<h2 id="header-title">Глобальный чат</h2>
|
|
<div id="current-user" class="current-user"></div>
|
|
<button id="profile-btn" class="profile-btn">⚙️</button>
|
|
</div>
|
|
|
|
<!-- Messages -->
|
|
<div id="messages-container" class="messages-container"></div>
|
|
|
|
<!-- Selected Media Preview -->
|
|
<div id="file-preview" class="file-preview" style="display: none;">
|
|
<span id="file-preview-text" class="file-preview-text"></span>
|
|
<button id="file-preview-clear" class="file-preview-clear">✕</button>
|
|
</div>
|
|
|
|
<!-- Reply Preview -->
|
|
<div id="reply-preview" class="reply-preview" style="display: none;">
|
|
<div class="reply-preview-content">
|
|
<span class="reply-preview-label">Replying to <span id="reply-username"></span></span>
|
|
<span id="reply-preview-text" class="reply-preview-text"></span>
|
|
</div>
|
|
<button id="reply-cancel-btn" class="reply-cancel-btn">✕</button>
|
|
</div>
|
|
|
|
<!-- Message Input -->
|
|
<div class="message-input-area">
|
|
<input type="file" id="file-input" class="file-input-hidden" />
|
|
<button id="attach-btn" class="attach-btn" title="Attach a file">📎</button>
|
|
<textarea id="message-input" placeholder="Write a message..." class="message-input"></textarea>
|
|
<button id="send-btn" class="send-btn">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Friend Modal -->
|
|
<div id="add-friend-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close-modal">×</span>
|
|
<h2>Add Friend</h2>
|
|
<div class="modal-form">
|
|
<input type="text" id="friend-username-input" placeholder="Enter username..." class="friend-input">
|
|
<button id="modal-add-btn" class="modal-submit-btn">Add Friend</button>
|
|
<div id="modal-error" class="modal-error"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Modal -->
|
|
<div id="profile-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="profile-close close-modal">×</span>
|
|
<h2>Edit Profile</h2>
|
|
<div class="modal-form">
|
|
<label>Avatar (max 520x520)</label>
|
|
<input type="file" id="profile-avatar-input" accept="image/*" class="friend-input">
|
|
<label>Pronouns</label>
|
|
<input type="text" id="profile-pronouns-input" class="friend-input" placeholder="e.g. they/them">
|
|
<label>Description</label>
|
|
<textarea id="profile-desc-input" class="friend-input" placeholder="About you..."></textarea>
|
|
<button id="profile-save-btn" class="modal-submit-btn">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Profile Preview Modal (Discord-like) -->
|
|
<div id="user-profile-modal" class="modal user-profile-modal">
|
|
<div class="user-profile-content">
|
|
<div class="user-profile-header">
|
|
<div class="user-profile-banner"></div>
|
|
<span class="user-profile-close close-modal">×</span>
|
|
</div>
|
|
<div class="user-profile-body">
|
|
<div class="user-profile-avatar-container">
|
|
<img id="user-profile-avatar" class="user-profile-avatar" src="" alt="avatar">
|
|
</div>
|
|
<div class="user-profile-info">
|
|
<h3 id="user-profile-username" class="user-profile-username"></h3>
|
|
<span id="user-profile-pronouns" class="user-profile-pronouns"></span>
|
|
</div>
|
|
<div class="user-profile-description">
|
|
<span id="user-profile-description" class="user-profile-description"></span>
|
|
</div>
|
|
<button id="user-profile-add-friend-btn" class="user-profile-add-friend-btn">Add Friend</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/variables.js"></script>
|
|
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
|
|
<script src="/static/js/auth.js"></script>
|
|
<script src="/static/js/servers.js"></script>
|
|
<script src="/static/js/friends.js"></script>
|
|
<script src="/static/js/chat.js"></script>
|
|
<script src="/static/js/profile.js"></script>
|
|
<script src="/static/js/ui.js"></script>
|
|
</body>
|
|
</html> |