Hugging Face's logo

Spaces:
Kirai-Kevin
/
travellor-bot
Sleeping

App Files Community
Kirai-Kevin commited on
Commit
a823319
•
1 Parent(s): cfd52b4

Update templates/chat.html

Browse files
Files changed (1) hide show
  1. templates/chat.html +80 -294
templates/chat.html CHANGED
@@ -1,295 +1,81 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Chatbot</title>
5
- <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
6
- <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
7
- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
8
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
9
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
10
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
11
- <link rel="stylesheet" href="static/style.css"/>
12
- <style>
13
- body,html {
14
- height: 100%;
15
- margin: 0;
16
- background: rgb(44, 47, 59);
17
- background: -webkit-linear-gradient(to right, rgb(40, 59, 34), rgb(54, 60, 70), rgb(32, 32, 43));
18
- background: linear-gradient(to right, rgb(38, 51, 61), rgb(50, 55, 65), rgb(33, 33, 78));
19
- }
20
-
21
- .chat {
22
- margin-top: auto;
23
- margin-bottom: auto;
24
- }
25
- .card {
26
- height: 500px;
27
- border-radius: 15px !important;
28
- background-color: rgba(0,0,0,0.4) !important;
29
- }
30
- .contacts_body {
31
- padding: 0.75rem 0 !important;
32
- overflow-y: auto;
33
- white-space: nowrap;
34
- }
35
- .msg_card_body {
36
- overflow-y: auto;
37
- }
38
- .card-header {
39
- border-radius: 15px 15px 0 0 !important;
40
- border-bottom: 0 !important;
41
- }
42
- .card-footer {
43
- border-radius: 0 0 15px 15px !important;
44
- border-top: 0 !important;
45
- }
46
- .container {
47
- align-content: center;
48
- }
49
- .search {
50
- border-radius: 15px 0 0 15px !important;
51
- background-color: rgba(0,0,0,0.3) !important;
52
- border:0 !important;
53
- color:white !important;
54
- }
55
- .search:focus {
56
- box-shadow:none !important;
57
- outline:0px !important;
58
- }
59
- .type_msg {
60
- background-color: rgba(0,0,0,0.3) !important;
61
- border:0 !important;
62
- color:white !important;
63
- height: 60px !important;
64
- overflow-y: auto;
65
- }
66
- .type_msg:focus {
67
- box-shadow:none !important;
68
- outline:0px !important;
69
- }
70
- .attach_btn {
71
- border-radius: 15px 0 0 15px !important;
72
- background-color: rgba(0,0,0,0.3) !important;
73
- border:0 !important;
74
- color: white !important;
75
- cursor: pointer;
76
- }
77
- .send_btn {
78
- border-radius: 0 15px 15px 0 !important;
79
- background-color: rgba(0,0,0,0.3) !important;
80
- border:0 !important;
81
- color: white !important;
82
- cursor: pointer;
83
- }
84
- .search_btn {
85
- border-radius: 0 15px 15px 0 !important;
86
- background-color: rgba(0,0,0,0.3) !important;
87
- border:0 !important;
88
- color: white !important;
89
- cursor: pointer;
90
- }
91
- .contacts {
92
- list-style: none;
93
- padding: 0;
94
- }
95
- .contacts li {
96
- width: 100% !important;
97
- padding: 5px 10px;
98
- margin-bottom: 15px !important;
99
- }
100
- .active {
101
- background-color: rgba(0,0,0,0.3);
102
- }
103
- .user_img {
104
- height: 70px;
105
- width: 70px;
106
- border:1.5px solid #f5f6fa;
107
- }
108
- .user_img_msg {
109
- height: 40px;
110
- width: 40px;
111
- border:1.5px solid #f5f6fa;
112
- }
113
- .img_cont {
114
- position: relative;
115
- height: 70px;
116
- width: 70px;
117
- }
118
- .img_cont_msg {
119
- height: 40px;
120
- width: 40px;
121
- }
122
- .online_icon {
123
- position: absolute;
124
- height: 15px;
125
- width:15px;
126
- background-color: #4cd137;
127
- border-radius: 50%;
128
- bottom: 0.2em;
129
- right: 0.4em;
130
- border:1.5px solid white;
131
- }
132
- .offline {
133
- background-color: #c23616 !important;
134
- }
135
- .user_info {
136
- margin-top: auto;
137
- margin-bottom: auto;
138
- margin-left: 15px;
139
- }
140
- .user_info span {
141
- font-size: 20px;
142
- color: white;
143
- }
144
- .user_info p {
145
- font-size: 10px;
146
- color: rgba(255,255,255,0.6);
147
- }
148
- .video_cam {
149
- margin-left: 50px;
150
- margin-top: 5px;
151
- }
152
- .video_cam span {
153
- color: white;
154
- font-size: 20px;
155
- cursor: pointer;
156
- margin-right: 20px;
157
- }
158
- .msg_cotainer {
159
- margin-top: auto;
160
- margin-bottom: auto;
161
- margin-left: 10px;
162
- border-radius: 25px;
163
- background-color: rgb(82, 172, 255);
164
- padding: 10px;
165
- position: relative;
166
- }
167
- .msg_cotainer_send {
168
- margin-top: auto;
169
- margin-bottom: auto;
170
- margin-right: 10px;
171
- border-radius: 25px;
172
- background-color: #58cc71;
173
- padding: 10px;
174
- position: relative;
175
- }
176
- .msg_time {
177
- position: absolute;
178
- left: 0;
179
- bottom: -15px;
180
- color: rgba(255,255,255,0.5);
181
- font-size: 10px;
182
- }
183
- .msg_time_send {
184
- position: absolute;
185
- right:0;
186
- bottom: -15px;
187
- color: rgba(255,255,255,0.5);
188
- font-size: 10px;
189
- }
190
- .msg_head {
191
- position: relative;
192
- }
193
- #action_menu_btn {
194
- position: absolute;
195
- right: 10px;
196
- top: 10px;
197
- color: white;
198
- cursor: pointer;
199
- font-size: 20px;
200
- }
201
- .action_menu {
202
- z-index: 1;
203
- position: absolute;
204
- padding: 15px 0;
205
- background-color: rgba(0,0,0,0.5);
206
- color: white;
207
- border-radius: 15px;
208
- top: 30px;
209
- right: 15px;
210
- display: none;
211
- }
212
- .action_menu ul {
213
- list-style: none;
214
- padding: 0;
215
- margin: 0;
216
- }
217
- .action_menu ul li {
218
- width: 100%;
219
- padding: 10px 15px;
220
- margin-bottom: 5px;
221
- }
222
- .action_menu ul li i {
223
- padding-right: 10px;
224
- }
225
- .action_menu ul li:hover {
226
- cursor: pointer;
227
- background-color: rgba(0,0,0,0.2);
228
- }
229
- @media(max-width: 576px) {
230
- .contacts_card {
231
- margin-bottom: 15px !important;
232
- }
233
- }
234
- </style>
235
- </head>
236
- <body>
237
- <div class="container-fluid h-100">
238
- <div class="row justify-content-center h-100">
239
- <div class="col-md-8 col-xl-6 chat">
240
- <div class="card">
241
- <div class="card-header msg_head">
242
- <div class="d-flex bd-highlight">
243
- <div class="img_cont">
244
- <img src="https://img.freepik.com/free-photo/smiling-tourist-woman-using-magnifying-glass-look-map_23-2147653034.jpg" class="rounded-circle user_img">
245
- <span class="online_icon"></span>
246
- </div>
247
- <div class="user_info">
248
- <span>Travel bot</span>
249
- <p>Ask me anything!</p>
250
- </div>
251
- </div>
252
- </div>
253
- <div id="messageFormeight" class="card-body msg_card_body">
254
- </div>
255
- <div class="card-footer">
256
- <form id="messageArea" class="input-group">
257
- <input type="text" id="text" name="msg" placeholder="Type your message..." autocomplete="off" class="form-control type_msg" required/>
258
- <div class="input-group-append">
259
- <button type="submit" id="send" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
260
- </div>
261
- </form>
262
- </div>
263
- </div>
264
- </div>
265
- </div>
266
- </div>
267
-
268
- <script>
269
- $(document).ready(function() {
270
- $("#messageArea").on("submit", function(event) {
271
- const date = new Date();
272
- const hour = date.getHours();
273
- const minute = date.getMinutes();
274
- const str_time = hour+":"+minute;
275
- var rawText = $("#text").val();
276
- var userHtml = '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' + rawText + '<span class="msg_time_send">'+ str_time + '</span></div><div class="img_cont_msg"><img src="https://i.ibb.co/d5b84Xw/Untitled-design.png" class="rounded-circle user_img_msg"></div></div>';
277
-
278
- $("#text").val("");
279
- $("#messageFormeight").append(userHtml);
280
- $.ajax({
281
- data: {
282
- msg: rawText,
283
- },
284
- type: "POST",
285
- url: "/get",
286
- }).done(function(data) {
287
- var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://www.prdistribution.com/spirit/uploads/pressreleases/2019/newsreleases/--waterless-geothermal-gets-installed-in-historic-breakers-mansion-.png" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + data + '<span class="msg_time">' + str_time + '</span></div></div>';
288
- $("#messageFormeight").append($.parseHTML(botHtml));
289
- });
290
- event.preventDefault();
291
- });
292
- });
293
- </script>
294
- </body>
295
  </html>
 
1
+ <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
2
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
3
+ <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
4
+
5
+ <!DOCTYPE html>
6
+ <html>
7
+ <head>
8
+ <title>Wildlife Chatbot</title>
9
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
11
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}"/>
13
+ </head>
14
+
15
+
16
+ <body>
17
+ <div class="container-fluid h-100">
18
+ <div class="row justify-content-center h-100">
19
+ <div class="col-md-8 col-xl-6 chat">
20
+ <div class="card">
21
+ <div class="card-header msg_head">
22
+ <div class="d-flex bd-highlight">
23
+ <div class="img_cont">
24
+ <!-- <img src="https://i.ibb.co/fSNP7Rz/icons8-chatgpt-512.png" class="rounded-circle user_img"> -->
25
+ <img src="https://th.bing.com/th/id/R.fe17139cebfdc76e1dadd7b8c5e699e0?rik=rIjnB52AqLwn8Q&pid=ImgRaw&r=0" class="rounded-circle user_img">
26
+ <span class="online_icon"></span>
27
+ </div>
28
+ <div class="user_info">
29
+ <span>Hi am Vincent your Wildlife Chatbot</span>
30
+ <p>What do you want to know about Wildlife!</p>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ <div id="messageFormeight" class="card-body msg_card_body">
35
+
36
+
37
+ </div>
38
+ <div class="card-footer">
39
+ <form id="messageArea" class="input-group">
40
+ <input type="text" id="text" name="msg" placeholder="Type your message..." autocomplete="off" class="form-control type_msg" required/>
41
+ <div class="input-group-append">
42
+ <button type="submit" id="send" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
43
+ </div>
44
+ </form>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <script>
52
+ $(document).ready(function() {
53
+ $("#messageArea").on("submit", function(event) {
54
+ const date = new Date();
55
+ const hour = date.getHours();
56
+ const minute = date.getMinutes();
57
+ const str_time = hour+":"+minute;
58
+ var rawText = $("#text").val();
59
+
60
+ var userHtml = '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' + rawText + '<span class="msg_time_send">'+ str_time + '</span></div><div class="img_cont_msg"><img src="https://th.bing.com/th/id/OIP.lUkqrMIP2BEr-zswwSmPngHaHa?pid=ImgDet&w=184&h=184&c=7&dpr=1.3" class="rounded-circle user_img_msg"></div></div>';
61
+
62
+ $("#text").val("");
63
+ $("#messageFormeight").append(userHtml);
64
+
65
+ $.ajax({
66
+ data: {
67
+ msg: rawText,
68
+ },
69
+ type: "POST",
70
+ url: "/get",
71
+ }).done(function(data) {
72
+ var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://th.bing.com/th/id/R.fe17139cebfdc76e1dadd7b8c5e699e0?rik=rIjnB52AqLwn8Q&pid=ImgRaw&r=0" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + data + '<span class="msg_time">' + str_time + '</span></div></div>';
73
+ $("#messageFormeight").append($.parseHTML(botHtml));
74
+ });
75
+ event.preventDefault();
76
+ });
77
+ });
78
+ </script>
79
+
80
+ </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  </html>