191 lines
7.7 KiB
HTML
191 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>💬 P2NS Global Chatroom</title>
|
|
<meta name="description" content="Decentralized real-time chat for all P2NS peers">
|
|
<link rel="manifest" href="manifest.json">
|
|
<link rel="icon" type="image/svg+xml" href="icon.svg">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="https://global.profile/css/profile-modal.css">
|
|
</head>
|
|
<body>
|
|
<!-- Toast Notification -->
|
|
<div id="toast" class="toast"></div>
|
|
|
|
<!-- Main Container -->
|
|
<div class="chat-container">
|
|
<!-- Header -->
|
|
<header class="chat-header">
|
|
<div class="header-left">
|
|
<h1 class="header-title">
|
|
<span class="header-icon">💬</span>
|
|
<span class="header-text">P2NS Global Chatroom</span>
|
|
</h1>
|
|
</div>
|
|
<div class="header-center">
|
|
<div class="reset-timer">
|
|
<span id="resetTimer">00:00:00</span>
|
|
<span class="reset-label">until reset</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="status-indicator">
|
|
<div id="statusIndicator" class="status-dot disconnected"></div>
|
|
<span id="statusText">Disconnected</span>
|
|
</div>
|
|
<div class="peer-count">
|
|
<span id="peerCountValue">0</span>
|
|
<span class="peer-label">peers</span>
|
|
</div>
|
|
<button id="themeToggle" class="theme-toggle" title="Toggle theme">
|
|
<span class="theme-icon">🌙</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Messages Area -->
|
|
<main class="messages-container">
|
|
<!-- New Messages Indicator -->
|
|
<div id="newMessagesIndicator" class="new-messages-indicator hidden">
|
|
<button id="scrollToBottomBtn" class="scroll-to-bottom-btn">
|
|
<span id="newMessagesText">New messages</span>
|
|
<span class="scroll-icon">⬇️</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="messagesList" class="messages-list">
|
|
<!-- Messages will be inserted here -->
|
|
<div class="loading">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-text">Connecting to chat...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Typing Indicators -->
|
|
<div id="typingIndicators" class="typing-indicators">
|
|
<!-- Typing indicators will appear here -->
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Message Composer -->
|
|
<footer class="composer-container">
|
|
<!-- Reply Preview -->
|
|
<div id="replyPreview" class="reply-preview hidden">
|
|
<div class="reply-content">
|
|
<div class="reply-author">Replying to <span id="replyAuthor"></span></div>
|
|
<div class="reply-text" id="replyText"></div>
|
|
</div>
|
|
<button id="cancelReply" class="cancel-reply" title="Cancel reply" onclick="window.Editor.clearReply()">✕</button>
|
|
</div>
|
|
|
|
<!-- File Preview -->
|
|
<div id="filePreview" class="file-preview hidden">
|
|
<!-- File previews will appear here -->
|
|
</div>
|
|
|
|
<!-- Editor Container -->
|
|
<div class="editor-container">
|
|
<!-- Toolbar -->
|
|
<div class="editor-toolbar">
|
|
<button class="toolbar-btn" data-format="bold" title="Bold (Ctrl+B)">
|
|
<strong>B</strong>
|
|
</button>
|
|
<button class="toolbar-btn" data-format="italic" title="Italic (Ctrl+I)">
|
|
<em>I</em>
|
|
</button>
|
|
<button class="toolbar-btn" data-format="code" title="Inline code">
|
|
<code></></code>
|
|
</button>
|
|
<button class="toolbar-btn" data-format="codeblock" title="Code block">
|
|
<span style="font-family: monospace;">{ }</span>
|
|
</button>
|
|
<button class="toolbar-btn" data-format="link" title="Link">
|
|
🔗
|
|
</button>
|
|
<button class="toolbar-btn" data-format="list" title="Bullet list">
|
|
•
|
|
</button>
|
|
<button class="toolbar-btn" data-format="olist" title="Numbered list">
|
|
1.
|
|
</button>
|
|
<button class="toolbar-btn" data-format="quote" title="Quote">
|
|
"
|
|
</button>
|
|
<button class="toolbar-btn" data-format="hr" title="Horizontal rule">
|
|
―
|
|
</button>
|
|
<button id="emojiBtn" class="toolbar-btn emoji-btn" title="Emoji">
|
|
😀
|
|
</button>
|
|
<div class="toolbar-spacer"></div>
|
|
<div class="character-count">
|
|
<span id="charCount">0</span>/<span id="maxChars">10000</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text Area -->
|
|
<div class="textarea-container">
|
|
<textarea
|
|
id="messageInput"
|
|
class="message-input"
|
|
placeholder="Type your message... (Markdown supported)"
|
|
maxlength="10000"
|
|
rows="1"
|
|
autofocus
|
|
></textarea>
|
|
|
|
<!-- File Upload Button -->
|
|
<button id="fileBtn" class="file-btn" title="Attach file">
|
|
📎
|
|
</button>
|
|
<input type="file" id="fileInput" class="file-input" multiple style="display: none;">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Emoji Picker (hidden by default) -->
|
|
<div id="emojiPicker" class="emoji-picker hidden">
|
|
<!-- Emoji picker will be populated by JavaScript -->
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Context Menu -->
|
|
<div id="contextMenu" class="context-menu hidden">
|
|
<div class="context-menu-item" data-action="reply">
|
|
<span class="context-icon">↩️</span>
|
|
<span>Reply</span>
|
|
</div>
|
|
<div class="context-menu-item" data-action="react">
|
|
<span class="context-icon">😀</span>
|
|
<span>React</span>
|
|
</div>
|
|
<div class="context-menu-item" data-action="copy">
|
|
<span class="context-icon">📋</span>
|
|
<span>Copy</span>
|
|
</div>
|
|
<div class="context-menu-item own-message" data-action="edit">
|
|
<span class="context-icon">✏️</span>
|
|
<span>Edit</span>
|
|
</div>
|
|
<div class="context-menu-item own-message" data-action="delete">
|
|
<span class="context-icon">🗑️</span>
|
|
<span>Delete</span>
|
|
</div>
|
|
<div class="context-menu-item" data-action="block">
|
|
<span class="context-icon">🚫</span>
|
|
<span>Block User</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/websocket.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script src="js/editor.js"></script>
|
|
<script src="js/messages.js"></script>
|
|
<script src="js/reactions.js"></script>
|
|
<script src="https://global.profile/js/profile-modal.js"></script>
|
|
</body>
|
|
</html> |