| | <!DOCTYPE html>
|
| | <html lang="en">
|
| | <head>
|
| | <meta charset="UTF-8">
|
| | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| | <title>Chat Room</title>
|
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
| | <style>
|
| | body {
|
| | font-family: Arial, sans-serif;
|
| | background-color: #f5f5f5;
|
| | margin: 0;
|
| | padding: 0;
|
| | display: flex;
|
| | flex-direction: column;
|
| | height: 100vh;
|
| | }
|
| | #chat {
|
| | flex: 1;
|
| | overflow-y: scroll;
|
| | padding: 10px;
|
| | background-color: #fff;
|
| | border-bottom: 1px solid #ddd;
|
| | }
|
| | .message {
|
| | margin-bottom: 10px;
|
| | padding: 10px;
|
| | border-radius: 10px;
|
| | background-color: #e1f5fe;
|
| | max-width: 70%;
|
| | word-wrap: break-word;
|
| | }
|
| | .message.user {
|
| | background-color: #d1c4e9;
|
| | margin-left: auto;
|
| | }
|
| | .message.deleted {
|
| | background-color: #ffebee;
|
| | color: #757575;
|
| | font-style: italic;
|
| | }
|
| | .user-info {
|
| | font-weight: bold;
|
| | color: #333;
|
| | }
|
| | .timestamp {
|
| | font-size: 0.8em;
|
| | color: #757575;
|
| | margin-top: 5px;
|
| | }
|
| | #input-area {
|
| | display: flex;
|
| | padding: 10px;
|
| | background-color: #fff;
|
| | border-top: 1px solid #ddd;
|
| | }
|
| | #message {
|
| | flex: 1;
|
| | padding: 10px;
|
| | border: 1px solid #ddd;
|
| | border-radius: 5px;
|
| | margin-right: 10px;
|
| | }
|
| | #send-button {
|
| | padding: 10px 20px;
|
| | background-color: #007bff;
|
| | color: #fff;
|
| | border: none;
|
| | border-radius: 5px;
|
| | cursor: pointer;
|
| | }
|
| | </style>
|
| | </head>
|
| | <body>
|
| | <h1>Chat Room</h1>
|
| | <p>Logged in as: <strong>{{ session.username }}</strong> | <a href="{{ url_for('logout') }}">Logout</a> | <a href="{{ url_for('matchmaking') }}">Matchmaking</a></p>
|
| | <div id="chat">
|
| | {% for message in messages %}
|
| | <div class="message {% if message.split(':')[0].strip() == session.username %}user{% endif %}">
|
| | <div class="user-info">{{ message.split(':')[0] }}</div>
|
| | <div class="text">{{ message.split(':')[1] }}</div>
|
| | <div class="timestamp">6:32 am</div>
|
| | </div>
|
| | {% endfor %}
|
| | |
| | |
| | |
| |
|
| | </div>
|
| | <div id="input-area">
|
| | <input type="text" id="message" placeholder="Type a message..." required>
|
| | <button id="send-button">Send</button>
|
| | </div>
|
| |
|
| | <script>
|
| |
|
| | const socket = io();
|
| |
|
| |
|
| | socket.on('message', function(data) {
|
| | const chat = document.getElementById('chat');
|
| | const messageElement = document.createElement('div');
|
| | messageElement.className = `message ${data.username === '{{ session.username }}' ? 'user' : ''}`;
|
| | messageElement.innerHTML = `
|
| | <div class="user-info">${data.username}</div>
|
| | <div class="text">${data.message}</div>
|
| | <div class="timestamp">${new Date().toLocaleTimeString()}</div>
|
| | `;
|
| | chat.appendChild(messageElement);
|
| | chat.scrollTop = chat.scrollHeight;
|
| | });
|
| |
|
| |
|
| | socket.on('match_found', function(data) {
|
| | const chat = document.getElementById('chat');
|
| | const matchElement = document.createElement('div');
|
| | matchElement.className = 'match-notification';
|
| | matchElement.innerHTML = `Match found: <strong>${data.buyer}</strong> wants to buy <strong>${data.product}</strong>, and <strong>${data.seller}</strong> wants to sell <strong>${data.product}</strong>.`;
|
| | chat.appendChild(matchElement);
|
| | chat.scrollTop = chat.scrollHeight;
|
| | });
|
| |
|
| |
|
| | function sendMessage() {
|
| | const messageInput = document.getElementById('message');
|
| | const message = messageInput.value.trim();
|
| | if (message) {
|
| | socket.send({ message: message });
|
| | messageInput.value = '';
|
| | }
|
| | }
|
| |
|
| |
|
| | document.getElementById('send-button').addEventListener('click', function(e) {
|
| | e.preventDefault();
|
| | sendMessage();
|
| | });
|
| |
|
| |
|
| | document.getElementById('message').addEventListener('keypress', function(e) {
|
| | if (e.key === 'Enter') {
|
| | e.preventDefault();
|
| | sendMessage();
|
| | }
|
| | });
|
| | </script>
|
| | </body>
|
| | </html> |
