wineater-bot 2.0.1 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/wineater-chatbot.mjs +2 -2
- package/dist/wineater-chatbot.umd.js +2 -2
- package/index.html +1 -1
- package/package.json +2 -1
- package/src/index.js +36 -23
- package/src/js/analytics.js +1 -1
- package/src/js/api.js +4 -3
- package/src/js/chatbot.js +15 -2
- package/src/js/i18n.js +35 -12
- package/src/js/styles.js +494 -149
package/src/js/styles.js
CHANGED
|
@@ -15,17 +15,46 @@ const css = `
|
|
|
15
15
|
|
|
16
16
|
/* Styling the chat icon */
|
|
17
17
|
#chat-icon {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
18
|
+
height: 50px;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
padding: 10px 20px;
|
|
23
|
+
border-radius: 25px;
|
|
24
|
+
background: linear-gradient(90deg, #7B2BEB, #0044FF); /* Фиолетовый к синему */
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Тень */
|
|
27
|
+
color: white; /* Белый текст */
|
|
28
|
+
font-family: 'Poppins', sans-serif;
|
|
29
|
+
font-size: 16px; /* Увеличенный размер текста */
|
|
30
|
+
font-weight: bold;
|
|
31
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease; /* Анимация при наведении */
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
#chat-icon:hover {
|
|
35
|
+
transform: scale(1.1) translateY(-50%) rotate(90deg); /* Увеличение при наведении */
|
|
36
|
+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Более глубокая тень */
|
|
37
|
+
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@keyframes pulse {
|
|
41
|
+
0%, 100% {
|
|
42
|
+
transform: scale(1);
|
|
43
|
+
}
|
|
44
|
+
50% {
|
|
45
|
+
transform: scale(1.1);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Подёргивание раз в 10 секунд */
|
|
50
|
+
.wiggle {
|
|
51
|
+
animation: wiggle 0.3s ease-in-out 10s infinite;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Плавное пульсирование каждые 10 секунд */
|
|
55
|
+
.pulse {
|
|
56
|
+
animation: pulse 1.5s ease-in-out 10s infinite;
|
|
57
|
+
}
|
|
29
58
|
|
|
30
59
|
/* Position class for bottom-right */
|
|
31
60
|
.chat-icon-bottom-right {
|
|
@@ -48,127 +77,224 @@ const css = `
|
|
|
48
77
|
}
|
|
49
78
|
|
|
50
79
|
#chat-icon span {
|
|
51
|
-
color:
|
|
80
|
+
color: white; /* Text color */
|
|
52
81
|
font-family: 'Poppins', sans-serif;
|
|
53
82
|
}
|
|
54
83
|
|
|
55
84
|
/* Chat window styles */
|
|
56
85
|
#chat-window {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
86
|
+
position: fixed;
|
|
87
|
+
bottom: 20px;
|
|
88
|
+
right: 20px;
|
|
89
|
+
width: 380px;
|
|
90
|
+
background-color: white;
|
|
91
|
+
border-radius: 24px;
|
|
92
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
93
|
+
display: none;
|
|
94
|
+
overflow: hidden;
|
|
65
95
|
}
|
|
66
96
|
|
|
67
97
|
#chat-header {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
justify-content: space-between;
|
|
75
|
-
align-items: center;
|
|
98
|
+
background-color: #FAFAFA;
|
|
99
|
+
padding: 24px 24px 20px;
|
|
100
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
101
|
+
display: flex;
|
|
102
|
+
justify-content: space-between;
|
|
103
|
+
align-items: flex-start;
|
|
76
104
|
}
|
|
77
105
|
|
|
78
|
-
#
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
106
|
+
#chat-title h1 {
|
|
107
|
+
font-family: 'Poppins', sans-serif;
|
|
108
|
+
font-size: 20px;
|
|
109
|
+
font-weight: 600;
|
|
110
|
+
color: #1F1F1F;
|
|
111
|
+
margin: 0;
|
|
112
|
+
line-height: 1.3;
|
|
84
113
|
}
|
|
85
114
|
|
|
86
|
-
#
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
115
|
+
#chat-title p {
|
|
116
|
+
font-family: 'Poppins', sans-serif;
|
|
117
|
+
font-size: 14px;
|
|
118
|
+
color: #666;
|
|
119
|
+
margin: 0;
|
|
120
|
+
line-height: 1.4;
|
|
90
121
|
}
|
|
91
122
|
|
|
92
|
-
#
|
|
93
|
-
|
|
94
|
-
|
|
123
|
+
#close-btn {
|
|
124
|
+
font-size: 20px;
|
|
125
|
+
color: #666;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
padding: 4px 8px;
|
|
128
|
+
margin: -4px -4px 0 16px;
|
|
129
|
+
line-height: 1;
|
|
130
|
+
border-radius: 50%;
|
|
131
|
+
transition: all 0.2s ease;
|
|
95
132
|
}
|
|
96
133
|
|
|
97
|
-
#close-btn {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
cursor: pointer;
|
|
101
|
-
padding: 0 10px;
|
|
102
|
-
line-height: 24px;
|
|
134
|
+
#close-btn:hover {
|
|
135
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
136
|
+
color: #333;
|
|
103
137
|
}
|
|
104
138
|
|
|
105
|
-
/* Container for messages */
|
|
106
139
|
#message-container {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
140
|
+
padding: 20px 24px;
|
|
141
|
+
max-height: 400px;
|
|
142
|
+
overflow-y: auto;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.message {
|
|
146
|
+
margin-bottom: 16px;
|
|
147
|
+
max-width: 85%;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.bot-message {
|
|
151
|
+
background-color: #F6F6F6;
|
|
152
|
+
padding: 12px 16px;
|
|
153
|
+
border-radius: 16px;
|
|
154
|
+
border-top-left-radius: 4px;
|
|
155
|
+
margin-right: auto;
|
|
156
|
+
font-size: 14px;
|
|
157
|
+
line-height: 1.5;
|
|
158
|
+
color: #1F1F1F;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.user-message {
|
|
162
|
+
background-color: #7E27ED;
|
|
163
|
+
color: white;
|
|
164
|
+
padding: 12px 16px;
|
|
165
|
+
border-radius: 16px;
|
|
166
|
+
border-top-right-radius: 4px;
|
|
167
|
+
margin-left: auto;
|
|
168
|
+
font-size: 14px;
|
|
169
|
+
line-height: 1.5;
|
|
112
170
|
}
|
|
113
171
|
|
|
114
|
-
/* Input area */
|
|
115
172
|
#input-container {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
gap: 10px;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
#input-container input {
|
|
125
|
-
flex-grow: 1;
|
|
126
|
-
border: 2px solid #B928EB;
|
|
127
|
-
padding: 10px;
|
|
128
|
-
border-radius: 4px;
|
|
129
|
-
font-family: 'Poppins', sans-serif;
|
|
173
|
+
padding: 16px 16px; /* Уменьшенный паддинг по бокам */
|
|
174
|
+
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
175
|
+
display: flex;
|
|
176
|
+
gap: 0; /* Убрали отступ между элементами */
|
|
177
|
+
background-color: white;
|
|
130
178
|
}
|
|
131
179
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
180
|
+
/* Стили для поля ввода */
|
|
181
|
+
#user-input {
|
|
182
|
+
flex: 1;
|
|
183
|
+
padding: 12px 16px;
|
|
184
|
+
border: 2px solid transparent; /* Прозрачная граница для эффекта градиента */
|
|
185
|
+
border-radius: 12px 0 0 12px; /* Скругление только слева */
|
|
186
|
+
font-size: 14px;
|
|
187
|
+
line-height: 1.5;
|
|
188
|
+
color: #2C2C2C;
|
|
189
|
+
transition: all 0.2s ease;
|
|
190
|
+
background:
|
|
191
|
+
linear-gradient(white, white) padding-box,
|
|
192
|
+
linear-gradient(90deg, #0044FF, #7B2BEB) border-box;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
#user-input:focus {
|
|
196
|
+
outline: none;
|
|
197
|
+
box-shadow: 0 0 0 3px rgba(123, 43, 235, 0.1);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Кнопка отправки */
|
|
201
|
+
#send-button {
|
|
202
|
+
background: linear-gradient(90deg, #7B2BEB, #0044FF);
|
|
203
|
+
color: white;
|
|
204
|
+
border: none;
|
|
205
|
+
padding: 12px 24px;
|
|
206
|
+
border-radius: 0 12px 12px 0; /* Скругление только справа */
|
|
207
|
+
font-size: 14px;
|
|
208
|
+
font-weight: 500;
|
|
209
|
+
cursor: pointer;
|
|
210
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
211
|
+
box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
#send-button:hover {
|
|
215
|
+
transform: translateY(-1px);
|
|
216
|
+
box-shadow: 0 4px 12px rgba(123, 43, 235, 0.2);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
#send-button:active {
|
|
220
|
+
transform: translateY(0);
|
|
221
|
+
box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
#powered-by {
|
|
225
|
+
padding: 12px 24px;
|
|
226
|
+
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
227
|
+
display: flex;
|
|
228
|
+
align-items: center;
|
|
229
|
+
justify-content: center;
|
|
230
|
+
background-color: #FAFAFA;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
#powered-by a {
|
|
234
|
+
display: flex;
|
|
235
|
+
align-items: center;
|
|
236
|
+
text-decoration: none;
|
|
237
|
+
opacity: 0.7;
|
|
238
|
+
transition: opacity 0.2s ease;
|
|
143
239
|
}
|
|
144
240
|
|
|
145
|
-
#
|
|
146
|
-
|
|
147
|
-
|
|
241
|
+
#powered-by a:hover {
|
|
242
|
+
opacity: 1;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
#powered-by span {
|
|
246
|
+
font-family: 'Poppins', sans-serif;
|
|
247
|
+
color: #666;
|
|
248
|
+
margin-right: 8px;
|
|
249
|
+
font-size: 12px;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
#chatbot-logo {
|
|
253
|
+
height: 16px;
|
|
254
|
+
width: auto;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* Container for messages */
|
|
258
|
+
#message-container {
|
|
259
|
+
padding: 24px;
|
|
260
|
+
display: flex;
|
|
261
|
+
max-height: 500px;
|
|
262
|
+
height: 400px;
|
|
263
|
+
flex-direction: column;
|
|
264
|
+
gap: 16px;
|
|
148
265
|
}
|
|
149
266
|
|
|
150
267
|
/* Message bubble styling */
|
|
151
268
|
.message {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
269
|
+
padding: 16px 20px;
|
|
270
|
+
border-radius: 20px;
|
|
271
|
+
margin-bottom: 8px;
|
|
272
|
+
font-size: 15px;
|
|
273
|
+
line-height: 1.5;
|
|
274
|
+
font-family: 'Poppins', sans-serif;
|
|
275
|
+
width: fit-content;
|
|
276
|
+
max-width: 85%;
|
|
158
277
|
}
|
|
159
278
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
279
|
+
/* Стили для сообщений API (бота) */
|
|
280
|
+
.message.api {
|
|
281
|
+
background: linear-gradient(90deg, #7B2BEB, #0044FF);
|
|
282
|
+
color: white;
|
|
283
|
+
border-top-left-radius: 4px;
|
|
284
|
+
margin-right: auto;
|
|
285
|
+
box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
|
|
164
286
|
}
|
|
165
287
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
288
|
+
/* Стили для пользовательских сообщений */
|
|
289
|
+
.message.user {
|
|
290
|
+
background-color: #F0F0F0;
|
|
291
|
+
color: #2C2C2C;
|
|
292
|
+
border-top-right-radius: 4px;
|
|
293
|
+
margin-left: auto;
|
|
294
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
170
295
|
}
|
|
171
296
|
|
|
297
|
+
|
|
172
298
|
/* Dish item styling */
|
|
173
299
|
.dish-message {
|
|
174
300
|
border: 2px solid #7E27ED; /* Bold yellow border */
|
|
@@ -183,29 +309,75 @@ const css = `
|
|
|
183
309
|
}
|
|
184
310
|
|
|
185
311
|
/* Wine item styling */
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
312
|
+
|
|
313
|
+
.wine-recommendation {
|
|
314
|
+
display: flex;
|
|
315
|
+
flex-direction: column;
|
|
316
|
+
background: white;
|
|
317
|
+
border: 2px solid transparent; /* Прозрачная граница для эффекта градиента */
|
|
318
|
+
border-radius: 20px;
|
|
319
|
+
border-top-left-radius: 4px;
|
|
320
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
321
|
+
background:
|
|
322
|
+
linear-gradient(white, white) padding-box,
|
|
323
|
+
linear-gradient(90deg, #7B2BEB, #0044FF) border-box;
|
|
194
324
|
}
|
|
195
325
|
|
|
196
|
-
.wine-item
|
|
197
|
-
|
|
326
|
+
.wine-item {
|
|
327
|
+
display: flex;
|
|
328
|
+
padding: 16px;
|
|
329
|
+
gap: 16px;
|
|
198
330
|
}
|
|
199
331
|
|
|
200
332
|
.wine-item img {
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
333
|
+
width: 100px;
|
|
334
|
+
height: 100px;
|
|
335
|
+
object-fit: cover;
|
|
336
|
+
border-radius: 8px;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.wine-item-details {
|
|
340
|
+
flex: 1;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.wine-item-details strong {
|
|
344
|
+
font-size: 16px;
|
|
345
|
+
color: #2C2C2C;
|
|
346
|
+
display: block;
|
|
347
|
+
margin-bottom: 4px;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.wine-item-price {
|
|
351
|
+
color: #7B2BEB;
|
|
352
|
+
font-weight: 500;
|
|
353
|
+
margin-bottom: 4px;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.wine-item-region {
|
|
357
|
+
color: #666;
|
|
358
|
+
font-size: 14px;
|
|
359
|
+
margin-bottom: 4px;
|
|
205
360
|
}
|
|
206
361
|
|
|
207
|
-
.wine-item
|
|
208
|
-
|
|
362
|
+
.wine-item a {
|
|
363
|
+
color: #0044FF;
|
|
364
|
+
text-decoration: none;
|
|
365
|
+
font-size: 14px;
|
|
366
|
+
font-weight: 500;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.wine-description {
|
|
370
|
+
padding: 12px 16px;
|
|
371
|
+
color: white;
|
|
372
|
+
|
|
373
|
+
border-radius: 0px;
|
|
374
|
+
border-bottom-left-radius: 15px;
|
|
375
|
+
border-bottom-right-radius: 15px;
|
|
376
|
+
|
|
377
|
+
font-size: 14px;
|
|
378
|
+
line-height: 1.5;
|
|
379
|
+
background: linear-gradient(90deg, #7B2BEB, #0044FF);
|
|
380
|
+
box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
|
|
209
381
|
}
|
|
210
382
|
|
|
211
383
|
/* Ensure the chat window is visible when the 'visible' class is added */
|
|
@@ -215,71 +387,244 @@ const css = `
|
|
|
215
387
|
|
|
216
388
|
/* Loader Styles */
|
|
217
389
|
.loader {
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
390
|
+
display: none;
|
|
391
|
+
width: 40px;
|
|
392
|
+
height: 40px;
|
|
393
|
+
margin: 20px auto;
|
|
394
|
+
background: conic-gradient(from 0deg, #7B2BEB, #0044FF, #7B2BEB);
|
|
395
|
+
border-radius: 50%;
|
|
396
|
+
animation: spin 1s linear infinite;
|
|
397
|
+
position: relative;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.loader::after {
|
|
401
|
+
content: '';
|
|
402
|
+
position: absolute;
|
|
403
|
+
top: 4px;
|
|
404
|
+
left: 4px;
|
|
405
|
+
right: 4px;
|
|
406
|
+
bottom: 4px;
|
|
407
|
+
background: white;
|
|
408
|
+
border-radius: 50%;
|
|
226
409
|
}
|
|
227
410
|
|
|
228
411
|
.loader.visible {
|
|
229
|
-
|
|
412
|
+
display: block;
|
|
230
413
|
}
|
|
231
414
|
|
|
232
415
|
@keyframes spin {
|
|
233
|
-
|
|
234
|
-
|
|
416
|
+
from { transform: rotate(0deg); }
|
|
417
|
+
to { transform: rotate(360deg); }
|
|
235
418
|
}
|
|
236
419
|
|
|
237
420
|
/* Typing indicator styles */
|
|
238
421
|
.typing-indicator {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
422
|
+
display: flex;
|
|
423
|
+
justify-content: center;
|
|
424
|
+
align-items: center;
|
|
425
|
+
height: 0;
|
|
426
|
+
visibility: hidden;
|
|
427
|
+
background-color: white;
|
|
245
428
|
}
|
|
246
429
|
|
|
247
430
|
.typing-indicator span {
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
431
|
+
display: block;
|
|
432
|
+
width: 8px;
|
|
433
|
+
height: 8px;
|
|
434
|
+
margin: 0 3px;
|
|
435
|
+
border-radius: 50%;
|
|
436
|
+
background: linear-gradient(90deg, #7B2BEB, #0044FF);
|
|
437
|
+
opacity: 0.7;
|
|
438
|
+
animation: typing 1s infinite;
|
|
256
439
|
}
|
|
257
440
|
|
|
258
441
|
@keyframes typing {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
442
|
+
0%, 100% {
|
|
443
|
+
transform: translateY(0);
|
|
444
|
+
opacity: 0.7;
|
|
445
|
+
}
|
|
446
|
+
50% {
|
|
447
|
+
transform: translateY(-8px);
|
|
448
|
+
opacity: 1;
|
|
449
|
+
}
|
|
265
450
|
}
|
|
266
451
|
|
|
267
452
|
/* Staggered animation for typing dots */
|
|
268
453
|
.typing-indicator span:nth-child(1) {
|
|
269
|
-
|
|
454
|
+
animation-delay: 0s;
|
|
270
455
|
}
|
|
271
456
|
.typing-indicator span:nth-child(2) {
|
|
272
|
-
|
|
457
|
+
animation-delay: 0.15s;
|
|
273
458
|
}
|
|
274
459
|
.typing-indicator span:nth-child(3) {
|
|
275
|
-
|
|
460
|
+
animation-delay: 0.3s;
|
|
276
461
|
}
|
|
277
462
|
|
|
278
463
|
/* Show the typing indicator */
|
|
279
464
|
.typing-indicator.visible {
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
}
|
|
465
|
+
visibility: visible;
|
|
466
|
+
height: 40px;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
@media screen and (max-width: 768px) {
|
|
470
|
+
#chat-window {
|
|
471
|
+
width: 100%;
|
|
472
|
+
height: 100%;
|
|
473
|
+
bottom: 0;
|
|
474
|
+
right: 0;
|
|
475
|
+
border-radius: 0;
|
|
476
|
+
position: fixed;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
#message-container {
|
|
480
|
+
height: calc(100vh - 180px); /* Учитываем высоту header и input container */
|
|
481
|
+
max-height: none;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
#chat-icon {
|
|
485
|
+
height: 45px;
|
|
486
|
+
padding: 8px 16px;
|
|
487
|
+
font-size: 14px;
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
#chat-icon {
|
|
491
|
+
height: 36px; /* Ещё меньше для мобильных */
|
|
492
|
+
padding: 6px 12px;
|
|
493
|
+
font-size: 13px;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
#chat-icon img {
|
|
497
|
+
width: 20px;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
#input-container {
|
|
501
|
+
padding: 12px;
|
|
502
|
+
position: fixed;
|
|
503
|
+
bottom: 30px;
|
|
504
|
+
width: 100%;
|
|
505
|
+
box-sizing: border-box;
|
|
506
|
+
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
#user-input {
|
|
510
|
+
font-size: 16px; /* Оптимальный размер для мобильных устройств */
|
|
511
|
+
padding: 10px 14px;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
#send-button {
|
|
515
|
+
padding: 10px 20px;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.wine-item {
|
|
519
|
+
flex-direction: column;
|
|
520
|
+
padding: 12px;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.wine-item img {
|
|
524
|
+
width: 100%;
|
|
525
|
+
height: 200px;
|
|
526
|
+
margin-bottom: 12px;
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
@media screen and (max-width: 480px) {
|
|
531
|
+
#chat-header {
|
|
532
|
+
padding: 16px;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
#chat-icon {
|
|
536
|
+
padding: 3px 10px;
|
|
537
|
+
font-size: 12px;
|
|
538
|
+
border-radius: 10px;
|
|
539
|
+
border-top-right-radius: 0;
|
|
540
|
+
border-top-left-radius: 0;
|
|
541
|
+
right: -77px;
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
#chat-icon img {
|
|
545
|
+
width: 18px;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
#chat-title h1 {
|
|
549
|
+
font-size: 18px;
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
#chat-title p {
|
|
553
|
+
font-size: 12px;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.message {
|
|
557
|
+
padding: 12px 16px;
|
|
558
|
+
font-size: 14px;
|
|
559
|
+
max-width: 95%;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
.wine-recommendation {
|
|
563
|
+
margin: 10px 0;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
.wine-description {
|
|
567
|
+
padding: 10px 14px;
|
|
568
|
+
font-size: 13px;
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
#powered-by {
|
|
572
|
+
padding: 8px 16px;
|
|
573
|
+
display: block;
|
|
574
|
+
position: fixed;
|
|
575
|
+
width: 100%;
|
|
576
|
+
bottom: 0;
|
|
577
|
+
text-align: center;
|
|
578
|
+
box-sizing: border-box;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
#powered-by a {
|
|
582
|
+
width: 100%;
|
|
583
|
+
justify-content: center;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
#powered-by span {
|
|
587
|
+
font-size: 11px;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
#chatbot-logo {
|
|
591
|
+
height: 14px;
|
|
592
|
+
}
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
/* Стили для планшетов */
|
|
596
|
+
@media screen and (min-width: 769px) and (max-width: 1024px) {
|
|
597
|
+
#chat-window {
|
|
598
|
+
width: 400px;
|
|
599
|
+
right: 30px;
|
|
600
|
+
bottom: 30px;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
#message-container {
|
|
604
|
+
max-height: 450px;
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
/* Стили для ландшафтной ориентации на мобильных */
|
|
609
|
+
@media screen and (max-height: 600px) and (orientation: landscape) {
|
|
610
|
+
#chat-window {
|
|
611
|
+
height: 100vh;
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
#message-container {
|
|
615
|
+
height: calc(100vh - 140px);
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
.wine-item {
|
|
619
|
+
flex-direction: row;
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
.wine-item img {
|
|
623
|
+
width: 80px;
|
|
624
|
+
height: 80px;
|
|
625
|
+
}
|
|
626
|
+
}
|
|
627
|
+
`;
|
|
283
628
|
|
|
284
629
|
const style = document.createElement('style');
|
|
285
630
|
style.textContent = css;
|