-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathchat.html
131 lines (119 loc) · 7.8 KB
/
chat.html
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
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="chat.css">
<title>Chat Geo</title>
</head>
<body>
<div class="container-fluid chat-container">
<h1 class="text-center my-3">Chat Geo</h1>
<div class="row chat-row bg-dark justify-content-around mx-auto py-3">
<div class="col-md-4 left-col">
<h2 class="text-white">Members</h2>
<div class="chat-members">
<ul class="members-list p-2">
<li class="py-2">
<a href="#" class="d-flex member-content">
<img src="https://picsum.photos/80" alt="" class="avatar p-2">
<div class="text-small p-2">
<p class="member-name mb-10">Jon Snow</p>
<p class="last-message text-muted">I know nothing !</p>
</div>
<div class="member-footer p-2 ml-auto">
<p class="text-muted">Now</p>
<span class="badge">1</span>
</div>
</a>
</li>
<hr>
<li class="py-2">
<a href="#" class="d-flex member-content">
<img src="https://picsum.photos/80" alt="" class="avatar p-2">
<div class="text-small p-2">
<p class="member-name mb-10">Sansa Stark</p>
<p class="last-message text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum error, non architecto aut natus vitae, reiciendis, nemo voluptates maiores molestiae consequatur eos officiis magnam. Reprehenderit similique doloribus illo nesciunt officia!</p>
</div>
<div class="member-footer p-2 ">
<p class="text-muted">Now</p>
<span class="badge">1</span>
</div>
</a>
</li>
<hr>
<li class="py-2">
<a href="#" class="d-flex justify-content-start member-content">
<img src="https://picsum.photos/80" alt="" class="avatar">
<div class="text-small mx-2">
<p class="member-name mb-10">Arya Stark</p>
<p class="last-message text-muted">Valhar Morghulis</p>
</div>
<div class="member-footer">
<p class="text-muted">Now</p>
<span class="badge">3</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="chat-messages">
<ul class="messages-list">
<li class="d-flex justify-content-around mb-3">
<img src="https://picsum.photos/50" alt="" class="avatar mr-3">
<div class="chat-body p-2">
<div class="chat-header">
<strong class="member-name">Jon Snow</strong>
<small class="text-muted last-message">2 minutes ago</small>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, voluptate. Voluptas, natus. Deserunt fugit accusamus, assumenda voluptatibus commodi facilis placeat eos velit. Cumque accusamus quaerat molestias! Commodi fuga in voluptatum?</p>
</div>
</div>
</li>
<li class="d-flex justify-content-around mb-3">
<div class="chat-body p-2">
<div class="chat-header">
<strong class="member-name">Sansa Stark</strong>
<small class="text-muted last-message">2 minutes ago</small>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, voluptate. Voluptas, natus. Deserunt fugit accusamus, assumenda voluptatibus commodi facilis placeat eos velit. Cumque accusamus quaerat molestias! Commodi fuga in voluptatum?</p>
</div>
</div>
<img src="https://picsum.photos/50" alt="" class="avatar ml-3">
</li>
<li class="d-flex justify-content-around mb-3">
<img src="https://picsum.photos/50" alt="" class="avatar mr-3">
<div class="chat-body p-2">
<div class="chat-header">
<strong class="member-name">Jon Snow</strong>
<small class="text-muted last-message">2 minutes ago</small>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, voluptate. Voluptas, natus. Deserunt fugit accusamus, assumenda voluptatibus commodi facilis placeat eos velit. Cumque accusamus quaerat molestias! Commodi fuga in voluptatum?</p>
</div>
</div>
</li>
<li class="mb-30">
<form action="">
<div class="send-message form-group">
<textarea class="form-control pl-2 my-0" id="exampleFormControlTextarea2" rows="3" placeholder="Type your message here..."></textarea>
</div>
<button type="submit" class="btn btn-info">Send</button>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>