public/chat.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>
First Commit 2024-01-04 20:11:35 +05:30			`<!DOCTYPE html>`
			`<html lang="en">`

			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Redesign chat UI and remove location sharing 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. 2025-08-27 03:14:15 +03:00			`<title>Modern Chat App - Chat</title>`
First Commit 2024-01-04 20:11:35 +05:30			`<link rel="icon" href="./img/favicon.png">`
			`<link rel="stylesheet" href="./css/styles.css">`
Redesign chat UI and remove location sharing 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. 2025-08-27 03:14:15 +03:00			`<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">`
First Commit 2024-01-04 20:11:35 +05:30			`</head>`

			`<body>`
			`<div class="chat">`
			`<div id="sidebar" class="chat__sidebar">`
Redesign chat UI and remove location sharing 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. 2025-08-27 03:14:15 +03:00			`<!-- Sidebar content will be populated by JavaScript -->`
First Commit 2024-01-04 20:11:35 +05:30			`</div>`
Redesign chat UI and remove location sharing 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. 2025-08-27 03:14:15 +03:00
First Commit 2024-01-04 20:11:35 +05:30			`<div class="chat__main">`
Redesign chat UI and remove location sharing 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. 2025-08-27 03:14:15 +03:00			`<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>`
First Commit 2024-01-04 20:11:35 +05:30
			`<div class="compose">`
			`<form id="message-form">`
Redesign chat UI and remove location sharing 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. 2025-08-27 03:14:15 +03:00			`<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>`
First Commit 2024-01-04 20:11:35 +05:30			`</form>`
			`</div>`
			`</div>`
			`</div>`

Redesign chat UI and remove location sharing 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. 2025-08-27 03:14:15 +03:00			`<!-- Message Templates -->`
			`<script id="message-template" type="text/html">`
			`<div class="message {{#isOwn}}own-message{{/isOwn}}">`
			`<div class="message__header">`
First Commit 2024-01-04 20:11:35 +05:30			`<span class="message__name">{{username}}</span>`
Redesign chat UI and remove location sharing 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. 2025-08-27 03:14:15 +03:00			`<span class="message__meta">{{createdAt}}</span>`
			`</div>`
			`<div class="message__content">`
			`<p>{{message}}</p>`
			`</div>`
First Commit 2024-01-04 20:11:35 +05:30			`</div>`
			`</script>`

			`<script id="sidebar-template" type="text/html">`
Redesign chat UI and remove location sharing 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. 2025-08-27 03:14:15 +03:00			`<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>`
First Commit 2024-01-04 20:11:35 +05:30			`</script>`

Redesign chat UI and remove location sharing 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. 2025-08-27 03:14:15 +03:00			`<!-- External Libraries -->`
First Commit 2024-01-04 20:11:35 +05:30			`<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>`