4bd3c48010
Modernizes the chat and join pages with new styles, improved layouts, and enhanced user experience using custom CSS and FontAwesome icons. Removes location sharing functionality from both frontend and backend, including related templates and code. Adds connection status indicators, notification system, and keyboard shortcuts for better usability.
104 lines
3.8 KiB
HTML
104 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Modern Chat App - Chat</title>
|
|
<link rel="icon" href="./img/favicon.png">
|
|
<link rel="stylesheet" href="./css/styles.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="chat">
|
|
<div id="sidebar" class="chat__sidebar">
|
|
<!-- Sidebar content will be populated by JavaScript -->
|
|
</div>
|
|
|
|
<div class="chat__main">
|
|
<div class="chat__header">
|
|
<div class="header-content">
|
|
<h2 id="room-name">Chat Room</h2>
|
|
<div class="connection-status">
|
|
<span class="status-indicator online"></span>
|
|
<span class="status-text">Connected</span>
|
|
</div>
|
|
</div>
|
|
<button class="back-btn" onclick="location.href='/'">
|
|
<i class="fas fa-arrow-left"></i>
|
|
Exit
|
|
</button>
|
|
</div>
|
|
|
|
<div id="messages" class="chat__messages">
|
|
<div class="welcome-message">
|
|
<i class="fas fa-comments"></i>
|
|
<h3>Welcome to Chat!</h3>
|
|
<p>Start sending messages to begin chatting.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compose">
|
|
<form id="message-form">
|
|
<div class="input-wrapper">
|
|
<input type="text" name="message" placeholder="Type your message..." autocomplete="off">
|
|
<button type="submit" id="send-btn">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message Templates -->
|
|
<script id="message-template" type="text/html">
|
|
<div class="message {{#isOwn}}own-message{{/isOwn}}">
|
|
<div class="message__header">
|
|
<span class="message__name">{{username}}</span>
|
|
<span class="message__meta">{{createdAt}}</span>
|
|
</div>
|
|
<div class="message__content">
|
|
<p>{{message}}</p>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script id="sidebar-template" type="text/html">
|
|
<div class="sidebar-header">
|
|
<h2 class="room-title">
|
|
<i class="fas fa-door-open"></i>
|
|
{{room}}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="sidebar-content">
|
|
<h3 class="list-title">
|
|
<i class="fas fa-users"></i>
|
|
Active Users ({{users.length}})
|
|
</h3>
|
|
<ul class="users">
|
|
{{#users}}
|
|
<li class="user-item">
|
|
<span class="online-indicator"></span>
|
|
<span class="user-name">{{username}}</span>
|
|
{{#isCurrentUser}}
|
|
<span class="current-user-badge">You</span>
|
|
{{/isCurrentUser}}
|
|
</li>
|
|
{{/users}}
|
|
</ul>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- External Libraries -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="./js/chat.js"></script>
|
|
</body>
|
|
|
|
</html> |