poptart/node-realtime-chat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign chat UI and remove location sharing

Browse Source 
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.
This commit is contained in:
apiboomer
2025-08-27 03:14:15 +03:00
parent e56c743851
commit 4bd3c48010
6 changed files with 1005 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
public/chat.html
View File

@@ -4,60 +4,96 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App</title>
<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 id="messages" class="chat__messages"></div>
<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">
<!-- <button id="increment">+1</button> -->
<form id="message-form">
<input type="text" name="message" placeholder="Enter message" autocomplete="off">
<button type="submit">Send</button>
<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>
<button id="send-location">Send Location</button>
</div>
</div>
</div>
<script id="message-template" type="text/html">
<div class="message">
<p>
<span class="message__name">{{username}}</span>
<span class="message__meta">{{createdAt}}</span>
</p>
<p>{{message}}</p>
</div>
</script>
<script id="locmessage-template" type="text/html">
<div class="message">
<p>
<!-- 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>
</p>
<p><a href="{{url}}" target="_blank" style="color: #7C5CBF;">My Current Location</a></p>
<span class="message__meta">{{createdAt}}</span>
</div>
<div class="message__content">
<p>{{message}}</p>
</div>
</div>
</script>
<script id="sidebar-template" type="text/html">
<h2 class="room-title" >Room: {{room}}</h2>
<h3 class="list-title" >Users</h3>
<ul class="users" >
{{#users}}
<li> {{username}} </li>
{{/users}}
</ul>
<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>