-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmessage.html
More file actions
120 lines (97 loc) · 6.47 KB
/
message.html
File metadata and controls
120 lines (97 loc) · 6.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Private Messenger App</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="message.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="bg-gray-300 flex flex-col items-center justify-start min-h-screen p-0 font-sans">
<header class="main-header-bg w-full p-3 flex items-center justify-between shadow-lg sticky top-0 z-20 px-6">
<a href="seed.html"
class="flex items-center space-x-2 text-sm font-semibold text-white bg-blue-700 hover:bg-blue-800 transition duration-150 py-2 px-4 rounded-lg shadow-md">
<i class="fas fa-home"></i>
<span class="hidden sm:inline">Go to Dashboard</span>
</a>
<h1 class="text-xl font-bold text-white">Private Messenger</h1>
<div class="w-28 h-8"></div>
</header>
<div class="flex-grow w-full max-w-7xl flex flex-col items-center justify-start">
<div id="messenger-container" class="w-full max-w-7xl bg-white shadow-2xl rounded-none md:rounded-xl flex
flex-grow min-h-0 overflow-hidden mt-0 md:mt-4">
<aside class="hidden md:flex w-full md:w-1/3 border-r border-gray-200 flex-col">
<header class="p-4 bg-gray-50 border-b border-gray-200">
<h2 class="text-2xl font-bold text-gray-800">Chats</h2>
<p id="user-info" class="text-xs text-gray-500 mt-1">Status: Connecting...</p>
</header>
<div id="user-list-container" class="flex-grow overflow-y-auto">
<p id="loading-users" class="p-4 text-center text-gray-500 text-sm">Loading contacts...</p>
</div>
</aside>
<div id="chat-window-panel" class="w-full md:w-2/3 flex flex-col">
<div id="chat-welcome"
class="flex-grow flex flex-col items-center justify-center text-gray-500 p-8 text-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4 text-gray-300" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 10h.01M12 10h.01M16 10h.01m-10.121 2c.704-.7 1.5-1.12 2.37-1.312M12 21a9 9 0 100-18 9 9 0 000 18zm-2-12h.01M16 16h.01M12 16h.01M8 16h.01M12 8h.01M16 8h.01M8 8h.01" />
</svg>
<h3 class="text-xl font-semibold mb-2 text-gray-700">Select a Contact</h3>
<p>Click on a user in the list on the left to start a private conversation.</p>
<p id="auth-status-message" class="mt-4 text-red-500 font-medium"></p>
</div>
<div id="active-chat-content" class="flex flex-col flex-grow hidden-auth">
<header id="chat-header"
class="main-header-bg shadow-md flex items-center justify-between px-4 sticky top-0 z-10 p-3">
<div class="flex items-center">
<i class="fas fa-arrow-left text-lg mr-4 cursor-pointer hover:opacity-70 md:hidden"></i>
<div
class="h-8 w-8 bg-white rounded-full flex items-center justify-center font-bold text-sm text-blue-600 mr-2 flex-shrink-0">
U
</div>
<div>
<h1 id="selected-user-name" class="text-lg font-bold">UNKNOWN</h1>
<p id="last-seen-status" class="text-xs opacity-70 mt-0.5"></p>
</div>
</div>
<div class="flex space-x-4 items-center text-white">
<i class="fas fa-phone text-xl cursor-pointer hover:opacity-80"></i>
<i class="fas fa-video text-xl cursor-pointer hover:opacity-80"></i>
<i class="fas fa-cog text-xl cursor-pointer hover:opacity-80"></i>
</div>
</header>
<main id="messages-container" class="flex-grow p-4 space-y-4 overflow-y-auto bg-white">
<p id="chat-loading-status" class="text-center text-gray-500">Loading messages...</p>
</main>
<footer class="p-2 border-t border-gray-200 bg-white">
<form id="message-form" class="flex items-end gap-2">
<div class="flex space-x-2 pb-2">
<i class="fas fa-image text-2xl text-blue-500 cursor-pointer hover:text-blue-600"></i>
<i class="fas fa-camera text-2xl text-blue-500 cursor-pointer hover:text-blue-600"></i>
</div>
<input type="text" id="message-input" placeholder="Write a message"
class="flex-grow p-3 border-none bg-gray-100 rounded-full focus:outline-none focus:ring-0 transition duration-150"
required autocomplete="off" />
<div class="flex space-x-1 pb-2">
<button type="submit" id="send-button"
class="w-8 h-8 flex items-center justify-center bg-blue-500 text-white rounded-full font-semibold hover:bg-blue-600 transition duration-150 shadow-md disabled:bg-blue-300 disabled:shadow-none"
disabled title="Send Message">
<i class="fas fa-arrow-right"></i>
</button>
<button type="button"
class="w-8 h-8 flex items-center justify-center bg-blue-500 text-white rounded-full font-semibold hover:bg-blue-600 transition duration-150 shadow-md"
title="Send Thumbs Up">
<i class="fas fa-thumbs-up"></i>
</button>
</div>
</form>
</footer>
</div>
</div>
</div>
</div>
<script type="module" src="message.js"></script>
</body>
</html>