wineater-bot 3.0.22 → 3.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 +1907 -1655
- package/dist/wineater-chatbot.umd.js +545 -397
- package/index.html +3 -3
- package/package.json +1 -1
- package/src/js/i18n.js +96 -0
- package/src/js/styles.js +15 -11
- package/src/js/widget-styles.js +438 -334
- package/src/js/widget.js +114 -28
package/src/js/widget-styles.js
CHANGED
|
@@ -1,483 +1,587 @@
|
|
|
1
1
|
const widgetStyles = `
|
|
2
|
-
/*
|
|
2
|
+
/* ===================== 1) Переменные и шрифты ===================== */
|
|
3
|
+
:root {
|
|
4
|
+
--wineater-corp-color: #0044FF;
|
|
5
|
+
--wineater-color: #7B2BEB;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Подключение шрифта Bricolage Grotesque (variable) */
|
|
9
|
+
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
|
|
10
|
+
|
|
11
|
+
/* ===================== 2) Базовые и глобальные стили ===================== */
|
|
12
|
+
* {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
15
|
+
body {
|
|
16
|
+
margin: 0;
|
|
17
|
+
padding: 0;
|
|
18
|
+
}
|
|
19
|
+
.hidden {
|
|
20
|
+
display: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* ===================== 3) Контейнер виджета и layout ===================== */
|
|
3
24
|
#wine-widget-container {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
min-height: 500px;
|
|
17
|
-
margin: 40px auto;
|
|
25
|
+
display: flex;
|
|
26
|
+
gap: 24px;
|
|
27
|
+
font-family: 'Bricolage Grotesque', sans-serif;
|
|
28
|
+
padding: 24px 24px 0px;
|
|
29
|
+
border-radius: 16px;
|
|
30
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
31
|
+
max-width: 1024px;
|
|
32
|
+
min-width: 1024px;
|
|
33
|
+
min-height: 500px;
|
|
34
|
+
margin: 40px auto;
|
|
35
|
+
position: relative;
|
|
36
|
+
box-sizing: border-box;
|
|
18
37
|
}
|
|
19
38
|
|
|
20
39
|
.wine-widget-wrapper {
|
|
21
|
-
width: 100%;
|
|
22
|
-
}
|
|
23
|
-
/* Левая часть */
|
|
24
|
-
#wine-widget-left {
|
|
25
|
-
flex: 0 0 40%;
|
|
40
|
+
width: 100%;
|
|
26
41
|
}
|
|
27
42
|
|
|
28
|
-
/* Правая часть */
|
|
29
43
|
#wine-widget-right {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
width: 100%;
|
|
44
|
+
position: relative;
|
|
45
|
+
min-height: 300px;
|
|
33
46
|
}
|
|
34
47
|
|
|
48
|
+
/* Placeholder для вин (две колонки) */
|
|
35
49
|
#wine-placeholder {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
50
|
+
display: grid;
|
|
51
|
+
grid-template-columns: repeat(4, 1fr);
|
|
52
|
+
/* 4 колонки равной ширины */
|
|
53
|
+
|
|
54
|
+
gap: 0; /* если собираетесь делать собственные границы вместо отступов */
|
|
55
|
+
/* или gap: 24px, если нужны просто промежутки между карточками без линий. */
|
|
56
|
+
|
|
57
|
+
/* Дополнительные стили можно оставить/удалить по вкусу: */
|
|
58
|
+
align-items: stretch;
|
|
59
|
+
justify-content: ;
|
|
60
|
+
margin-bottom: 0; /* уберём промежуток, если вы хотите нарисовать свою линию */
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
#wine-placeholder:hover {
|
|
64
|
+
// cursor: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//cursor.svg'), pointer;
|
|
42
65
|
}
|
|
43
66
|
|
|
44
|
-
/*
|
|
67
|
+
/* ===================== 4) Шапка (заголовок, подзаголовок) ===================== */
|
|
45
68
|
#wine-widget-header h1 {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
69
|
+
font-family: "Bricolage Grotesque", serif;
|
|
70
|
+
font-weight: 600;
|
|
71
|
+
font-size: 32px;
|
|
72
|
+
margin: 0 auto;
|
|
73
|
+
line-height: 1.3;
|
|
74
|
+
color: #333;
|
|
75
|
+
text-align: center;
|
|
51
76
|
}
|
|
52
77
|
|
|
53
78
|
#wine-widget-header p {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
79
|
+
font-size: 16px;
|
|
80
|
+
color: #666;
|
|
81
|
+
margin-top: 8px;
|
|
82
|
+
text-align: center;
|
|
83
|
+
padding: 0 15%;
|
|
59
84
|
}
|
|
60
85
|
|
|
61
|
-
/*
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
86
|
+
/* ===================== 5) Иконки и цветные подписи (meal, mood...) ===================== */
|
|
87
|
+
.icon {
|
|
88
|
+
display: inline-block;
|
|
89
|
+
width: 1.2em;
|
|
90
|
+
height: 1.2em;
|
|
91
|
+
vertical-align: middle;
|
|
92
|
+
margin: 0 4px 0 2px;
|
|
93
|
+
background-repeat: no-repeat;
|
|
94
|
+
background-size: contain;
|
|
67
95
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
96
|
+
|
|
97
|
+
.icon-meal {
|
|
98
|
+
background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//meal1.svg');
|
|
99
|
+
}
|
|
100
|
+
.icon-meal:hover {
|
|
101
|
+
background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//meal3.svg');
|
|
102
|
+
}
|
|
103
|
+
.icon-mood {
|
|
104
|
+
background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//mood.svg');
|
|
105
|
+
}
|
|
106
|
+
.icon-budget {
|
|
107
|
+
background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//budget.svg');
|
|
108
|
+
}
|
|
109
|
+
.icon-occasion {
|
|
110
|
+
background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//ocasion.svg');
|
|
73
111
|
}
|
|
74
112
|
|
|
75
|
-
/*
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
113
|
+
/* Подпись к иконкам */
|
|
114
|
+
.icon-label {
|
|
115
|
+
color: var(--wineater-color);
|
|
116
|
+
font-weight: 500;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* ===================== 6) Поисковая строка (input + кнопка) ===================== */
|
|
120
|
+
#wine-widget-search {
|
|
121
|
+
position: relative;
|
|
122
|
+
margin: 20px auto;
|
|
123
|
+
display: flex;
|
|
124
|
+
justify-content: center;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.search-icon {
|
|
128
|
+
position: absolute;
|
|
129
|
+
left: 12px;
|
|
130
|
+
top: 50%;
|
|
131
|
+
transform: translateY(-50%);
|
|
132
|
+
width: 24px;
|
|
133
|
+
height: 24px;
|
|
134
|
+
background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//search.svg?x=1');
|
|
135
|
+
background-repeat: no-repeat;
|
|
136
|
+
background-size: contain;
|
|
137
|
+
z-index: 2;
|
|
80
138
|
}
|
|
81
139
|
|
|
82
140
|
#wine-search-input {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
141
|
+
width: 100%;
|
|
142
|
+
padding: 12px 60px 12px 40px; /* место под иконку и кнопку */
|
|
143
|
+
font-size: 16px;
|
|
144
|
+
border: 2px solid #D5D9EE;
|
|
145
|
+
border-radius: 10px;
|
|
146
|
+
outline: none;
|
|
147
|
+
transition: border 0.2s ease;
|
|
148
|
+
background-color: #fff;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
#wine-search-input::placeholder {
|
|
152
|
+
color: var(--wineater-color);
|
|
153
|
+
opacity: 1;
|
|
154
|
+
transition: color 0.3s ease, opacity 0.3s ease-in-out;
|
|
90
155
|
}
|
|
91
156
|
|
|
92
157
|
#wine-search-input:focus {
|
|
93
|
-
|
|
94
|
-
|
|
158
|
+
border-color: var(--wineater-color);
|
|
159
|
+
}
|
|
160
|
+
#wine-search-input:focus::placeholder {
|
|
161
|
+
opacity: 0.5;
|
|
95
162
|
}
|
|
96
163
|
|
|
164
|
+
/* Кнопка поиска */
|
|
97
165
|
#wine-search-button {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
166
|
+
position: absolute;
|
|
167
|
+
right: 6px;
|
|
168
|
+
top: 50%;
|
|
169
|
+
transform: translateY(-50%);
|
|
170
|
+
background-color: var(--wineater-color);
|
|
171
|
+
color: #fff;
|
|
172
|
+
border: none;
|
|
173
|
+
border-radius: 6px;
|
|
174
|
+
padding: 8px 16px;
|
|
175
|
+
font-size: 16px;
|
|
176
|
+
cursor: pointer;
|
|
177
|
+
transition: opacity 0.2s ease;
|
|
106
178
|
}
|
|
107
|
-
|
|
108
179
|
#wine-search-button:hover {
|
|
109
|
-
|
|
110
|
-
box-shadow: 0 4px 12px rgba(123, 43, 235, 0.2);
|
|
180
|
+
opacity: 0.8;
|
|
111
181
|
}
|
|
112
182
|
|
|
113
|
-
/*
|
|
183
|
+
/* ===================== 7) Фильтр-группы ===================== */
|
|
114
184
|
.filter-group {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
185
|
+
margin-bottom: 16px;
|
|
186
|
+
display: flex;
|
|
187
|
+
flex-direction: column;
|
|
118
188
|
}
|
|
119
189
|
|
|
120
190
|
.filter-label {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
191
|
+
font-size: 16px;
|
|
192
|
+
font-weight: bold;
|
|
193
|
+
color: #333;
|
|
194
|
+
margin-bottom: 8px;
|
|
125
195
|
}
|
|
126
196
|
|
|
127
197
|
.filter-buttons {
|
|
128
|
-
|
|
129
|
-
|
|
198
|
+
display: flex;
|
|
199
|
+
gap: 8px;
|
|
130
200
|
}
|
|
131
201
|
|
|
132
202
|
.filter-buttons button {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.filter-buttons button.selected {
|
|
143
|
-
background: linear-gradient(90deg, #7B2BEB, #0044FF);
|
|
144
|
-
color: white;
|
|
145
|
-
border: none;
|
|
203
|
+
padding: 10px 16px;
|
|
204
|
+
border: 1px solid #ccc;
|
|
205
|
+
border-radius: 8px;
|
|
206
|
+
background: white;
|
|
207
|
+
cursor: pointer;
|
|
208
|
+
font-size: 14px;
|
|
209
|
+
transition: all 0.2s ease;
|
|
146
210
|
}
|
|
147
|
-
|
|
148
211
|
.filter-buttons button:hover {
|
|
149
|
-
|
|
150
|
-
|
|
212
|
+
transform: scale(1.05);
|
|
213
|
+
box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
|
|
151
214
|
}
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
min-height: 0;
|
|
215
|
+
.filter-buttons button.selected {
|
|
216
|
+
background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
|
|
217
|
+
color: white;
|
|
218
|
+
border: none;
|
|
157
219
|
}
|
|
158
220
|
|
|
221
|
+
/* ===================== 8) Карточки рекомендаций (tiles) ===================== */
|
|
159
222
|
.wine-recommendation-tile {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
223
|
+
display: flex;
|
|
224
|
+
flex-direction: column;
|
|
225
|
+
align-items: center; /* всё по центру */
|
|
226
|
+
text-align: center;
|
|
227
|
+
box-sizing: border-box;
|
|
228
|
+
padding: 16px 8px;
|
|
229
|
+
border-right: 2px solid #f6f7fd; /* убираем вертикальные линии (border-right) */
|
|
230
|
+
opacity: 0;
|
|
231
|
+
transform: translateY(20px); /* чтобы анимация была заметна */
|
|
232
|
+
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
170
233
|
}
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
width: 100%;
|
|
174
|
-
height: auto;
|
|
175
|
-
border-radius: 8px;
|
|
176
|
-
margin-bottom: 8px;
|
|
234
|
+
.wine-recommendation-tile:last-child {
|
|
235
|
+
border-right: none;
|
|
177
236
|
}
|
|
178
237
|
|
|
179
|
-
.
|
|
180
|
-
|
|
181
|
-
|
|
238
|
+
.tile-top {
|
|
239
|
+
display: flex;
|
|
240
|
+
flex-direction: column;
|
|
241
|
+
align-items: center;
|
|
242
|
+
justify-content: flex-start;
|
|
243
|
+
/* justify-content: space-between; – не надо, т.к. элементы обычно идут последовательно */
|
|
182
244
|
}
|
|
183
245
|
|
|
184
|
-
#loading-indicator {
|
|
185
|
-
position: absolute;
|
|
186
|
-
top: 50%;
|
|
187
|
-
left: 50%;
|
|
188
|
-
transform: translate(-50%, -50%);
|
|
189
|
-
z-index: 10000;
|
|
190
|
-
text-align: center;
|
|
191
|
-
}
|
|
192
246
|
|
|
193
|
-
|
|
194
|
-
|
|
247
|
+
/* Картинка */
|
|
248
|
+
.wine-image {
|
|
249
|
+
width: 180px; /* или 200px, на ваш вкус */
|
|
250
|
+
height: auto;
|
|
251
|
+
object-fit: contain; /* чтобы не обрезалось, если нужно */
|
|
252
|
+
margin: 0 auto 16px; /* отступ снизу */
|
|
253
|
+
display: block;
|
|
195
254
|
}
|
|
196
255
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
256
|
+
/* Детальный блок */
|
|
257
|
+
.tile-details {
|
|
258
|
+
/* Можно дополнительные отступы или нет */
|
|
259
|
+
display: flex;
|
|
260
|
+
flex-direction: column;
|
|
261
|
+
align-items: center;
|
|
262
|
+
/* т.к. заголовок и таблица по центру */
|
|
201
263
|
}
|
|
202
264
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
265
|
+
/* Заголовок вина */
|
|
266
|
+
.wine-title {
|
|
267
|
+
font-size: 20px; /* крупнее */
|
|
268
|
+
font-weight: 700;
|
|
269
|
+
margin: 0 0 8px;
|
|
270
|
+
min-height: 3rem;
|
|
271
|
+
line-height: 1.2;
|
|
272
|
+
text-align: center;
|
|
273
|
+
color: #000;
|
|
210
274
|
}
|
|
211
275
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
276
|
+
.wine-params {
|
|
277
|
+
font-size: 14px;
|
|
278
|
+
color: #666;
|
|
279
|
+
white-space: normal;
|
|
280
|
+
text-align: center;
|
|
216
281
|
}
|
|
217
282
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
283
|
+
.param-chips-container {
|
|
284
|
+
display: flex;
|
|
285
|
+
flex-wrap: wrap; /* чтобы чипсы переносились на новую строку при нехватке места */
|
|
286
|
+
gap: 8px; /* небольшой промежуток между чипсами */
|
|
287
|
+
justify-content: center; /* по центру горизонтали (если нужно) */
|
|
288
|
+
margin-bottom: 12px; /* отступ от нижнего блока */
|
|
224
289
|
}
|
|
225
290
|
|
|
226
|
-
.
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
.wine-recommendation-tile img {
|
|
241
|
-
width: 120px;
|
|
242
|
-
height: 120px;
|
|
243
|
-
object-fit: cover;
|
|
244
|
-
border-radius: 8px;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
/* Детали карточки */
|
|
248
|
-
.tile-details {
|
|
249
|
-
text-align: left;
|
|
291
|
+
.wine-chip {
|
|
292
|
+
display: inline-block;
|
|
293
|
+
background: #fff; /* белый фон */
|
|
294
|
+
font-size: 14px;
|
|
295
|
+
font-weight: bold;
|
|
296
|
+
padding: 4px 8px;
|
|
297
|
+
border: 2px solid #ccc; /* по умолчанию можно сделать серую границу */
|
|
298
|
+
border-radius: 24px;
|
|
299
|
+
white-space: nowrap;
|
|
300
|
+
color: #333;
|
|
301
|
+
white-space: normal;
|
|
302
|
+
word-break: normal;
|
|
303
|
+
overflow-wrap: normal;
|
|
304
|
+
max-width: 250px;
|
|
250
305
|
}
|
|
306
|
+
|
|
251
307
|
|
|
252
|
-
.tile-details strong {
|
|
253
|
-
font-size: 16px;
|
|
254
|
-
margin-bottom: 4px;
|
|
255
|
-
font-weight: bold;
|
|
256
|
-
display: block;
|
|
257
|
-
}
|
|
258
308
|
|
|
259
|
-
.
|
|
260
|
-
|
|
261
|
-
|
|
309
|
+
.param-table {
|
|
310
|
+
display: grid;
|
|
311
|
+
/* Две колонки, каждая 50% */
|
|
312
|
+
grid-template-columns: 50% 50%;
|
|
313
|
+
width: 100%;
|
|
314
|
+
/* Если нужно, чтобы таблица занимала всю ширину карточки */
|
|
315
|
+
|
|
316
|
+
border-collapse: collapse;
|
|
317
|
+
/* (не все свойства table работают с grid, но можно оставить) */
|
|
318
|
+
|
|
319
|
+
text-align: left; /* Выравниваем по левой стороне */
|
|
320
|
+
margin-bottom: 12px; /* Отступ снизу, если нужно */
|
|
262
321
|
}
|
|
263
322
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
margin-top: 16px;
|
|
271
|
-
}
|
|
323
|
+
/* Каждая ячейка */
|
|
324
|
+
.param-table .cell {
|
|
325
|
+
padding: 8px;
|
|
326
|
+
/* Горизонтальная линия */
|
|
327
|
+
box-sizing: border-box;
|
|
328
|
+
border-bottom: 1px solid #ddd;
|
|
272
329
|
|
|
273
|
-
.tile-details a:hover {
|
|
274
|
-
text-decoration: none;
|
|
275
|
-
color: #002699;
|
|
276
330
|
}
|
|
277
331
|
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
.
|
|
281
|
-
|
|
282
|
-
padding: 8px 12px;
|
|
283
|
-
font-size: 14px;
|
|
284
|
-
color: #fff;
|
|
285
|
-
border-radius: 8px;
|
|
286
|
-
background: linear-gradient(90deg, #7B2BEB, #0044FF);
|
|
287
|
-
text-align: center;
|
|
332
|
+
/* Вертикальная граница между левым и правым столбцом —
|
|
333
|
+
т.е. у всех ячеек, идущих в левой колонке */
|
|
334
|
+
.param-table .cell:nth-child(2n+1) {
|
|
335
|
+
border-right: 1px solid #ddd;
|
|
288
336
|
}
|
|
289
337
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
display: flex;
|
|
293
|
-
align-items: center;
|
|
294
|
-
justify-content: center;
|
|
295
|
-
background-color: #FAFAFA;
|
|
296
|
-
padding: 12px 24px;
|
|
297
|
-
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
298
|
-
border-radius: 12px;
|
|
299
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
338
|
+
.param-table .cell:nth-last-child(-n + 2) {
|
|
339
|
+
border-bottom: none;
|
|
300
340
|
}
|
|
301
341
|
|
|
302
|
-
#powered-by-widget {
|
|
303
|
-
display: flex;
|
|
304
|
-
align-items: center;
|
|
305
|
-
justify-content: center;
|
|
306
|
-
margin-top: 20px;
|
|
307
|
-
padding: 12px;
|
|
308
|
-
border: 1px solid transparent;
|
|
309
|
-
border-radius: 8px;
|
|
310
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
311
|
-
text-align: center;
|
|
312
|
-
}
|
|
313
342
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
343
|
+
/* Нижняя строка (цена + кнопка) */
|
|
344
|
+
.bottom-row {
|
|
345
|
+
margin-top: auto; /* прижимает .bottom-row к низу
|
|
346
|
+
display: flex;
|
|
347
|
+
align-items: center;
|
|
348
|
+
gap: 12px; /* промежуток между ценой и кнопкой */
|
|
349
|
+
justify-content: center;
|
|
350
|
+
/* если хотите, чтобы они были по центру;
|
|
351
|
+
если нужно справа или растянуть, используйте space-between */
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
/* Цена */
|
|
355
|
+
.wine-price {
|
|
356
|
+
font-size: 16px;
|
|
357
|
+
font-weight: 400;
|
|
358
|
+
margin-bottom: 8px;
|
|
359
|
+
color: #333;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.buy-btn {
|
|
363
|
+
margin: 16px auto 0; /* центрируем и отступ сверху */
|
|
364
|
+
background-color: transparent;
|
|
365
|
+
color: var(--wineater-color);
|
|
366
|
+
border: 2px solid var(--wineater-color);
|
|
367
|
+
border-radius: 6px;
|
|
368
|
+
padding: 8px 16px;
|
|
369
|
+
font-size: 14px;
|
|
370
|
+
font-weight: 500;
|
|
371
|
+
cursor: pointer;
|
|
372
|
+
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
|
|
322
373
|
}
|
|
323
374
|
|
|
324
|
-
|
|
325
|
-
|
|
375
|
+
.buy-btn:hover {
|
|
376
|
+
box-shadow: 0 4px 8px rgba(123, 43, 235, 0.25);
|
|
377
|
+
background-color: var(--wineater-color);
|
|
378
|
+
color: #fff;
|
|
326
379
|
}
|
|
327
380
|
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
381
|
+
/* Аналогично для .more-info-btn (если хотите стилизовать её тоже как кнопку) */
|
|
382
|
+
.more-info-btn {
|
|
383
|
+
display: inline-block;
|
|
384
|
+
background-color: var(--wineater-color);
|
|
385
|
+
color: #fff;
|
|
386
|
+
border-radius: 24px;
|
|
387
|
+
padding: 8px 16px;
|
|
388
|
+
font-size: 14px;
|
|
389
|
+
font-weight: 500;
|
|
390
|
+
text-decoration: none; /* убрать подчеркивание */
|
|
391
|
+
margin-top: 8px;
|
|
392
|
+
margin-right: 8px;
|
|
393
|
+
transition: transform 0.2s, box-shadow 0.2s;
|
|
394
|
+
}
|
|
395
|
+
.more-info-btn:hover {
|
|
396
|
+
transform: scale(1.05);
|
|
397
|
+
box-shadow: 0 4px 8px rgba(123, 43, 235, 0.25);
|
|
331
398
|
}
|
|
332
399
|
|
|
333
|
-
/* Адаптивность для мобильных устройств */
|
|
334
|
-
@media screen and (max-width: 768px) {
|
|
335
|
-
#wine-widget-container {
|
|
336
|
-
flex-direction: column;
|
|
337
|
-
padding: 16px;
|
|
338
|
-
}
|
|
339
400
|
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
401
|
+
/* ===================== 9) Стиль для Somm Selection ===================== */
|
|
402
|
+
.somm-selection {
|
|
403
|
+
position: relative;
|
|
404
|
+
// border: 2px solid #FFD700;
|
|
405
|
+
// background: linear-gradient(white, #FFF8DC);
|
|
406
|
+
// box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
|
|
407
|
+
}
|
|
408
|
+
.somm-selection-badge {
|
|
409
|
+
position: absolute;
|
|
410
|
+
top: -10px;
|
|
411
|
+
left: 10px;
|
|
412
|
+
/* Вместо ярко-жёлтого градиента – мягкий пастельный */
|
|
413
|
+
color: #FFD700; /* более мягкий жёлто-коричневый цвет текста */
|
|
414
|
+
border: 2px solid #FFD700;
|
|
415
|
+
font-size: 12px;
|
|
416
|
+
font-weight: 300;
|
|
417
|
+
padding: 4px 8px;
|
|
418
|
+
border-radius: 5px;
|
|
343
419
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
}
|
|
420
|
+
/* Уменьшаем или убираем тень */
|
|
421
|
+
}
|
|
347
422
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
423
|
+
/* ===================== 10) Лоадер и индикатор загрузки ===================== */
|
|
424
|
+
#loading-indicator {
|
|
425
|
+
position: absolute;
|
|
426
|
+
top: 50%;
|
|
427
|
+
left: 50%;
|
|
428
|
+
transform: translate(-50%, -50%);
|
|
429
|
+
z-index: 10000;
|
|
430
|
+
text-align: center;
|
|
431
|
+
}
|
|
432
|
+
#loading-indicator.hidden {
|
|
433
|
+
display: none;
|
|
434
|
+
}
|
|
435
|
+
#loading-indicator img {
|
|
436
|
+
width: 100px;
|
|
437
|
+
height: 100px;
|
|
438
|
+
animation: spin 1s linear infinite;
|
|
351
439
|
}
|
|
352
440
|
|
|
353
|
-
/*
|
|
441
|
+
/* ===================== 11) keyframes анимации ===================== */
|
|
442
|
+
@keyframes spin {
|
|
443
|
+
from { transform: rotate(0deg); }
|
|
444
|
+
to { transform: rotate(360deg); }
|
|
445
|
+
}
|
|
354
446
|
|
|
355
|
-
/*
|
|
447
|
+
/* ===================== 12) Бар-версия (при необходимости) ===================== */
|
|
448
|
+
/* Грид блюд бара */
|
|
356
449
|
.dish-grid {
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
450
|
+
display: grid;
|
|
451
|
+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
452
|
+
gap: 12px;
|
|
453
|
+
margin: 16px 0;
|
|
361
454
|
}
|
|
362
455
|
|
|
363
|
-
/*
|
|
456
|
+
/* Плитка блюда */
|
|
364
457
|
.dish-tile {
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
transition: all 0.2s ease;
|
|
458
|
+
display: flex;
|
|
459
|
+
justify-content: center;
|
|
460
|
+
align-items: center;
|
|
461
|
+
padding: 16px;
|
|
462
|
+
font-size: 14px;
|
|
463
|
+
font-weight: 500;
|
|
464
|
+
border: 1px solid #ccc;
|
|
465
|
+
border-radius: 8px;
|
|
466
|
+
background-color: #fff;
|
|
467
|
+
cursor: pointer;
|
|
468
|
+
transition: all 0.2s ease;
|
|
377
469
|
}
|
|
378
|
-
|
|
379
470
|
.dish-tile:hover {
|
|
380
|
-
|
|
381
|
-
|
|
471
|
+
transform: scale(1.05);
|
|
472
|
+
box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
|
|
382
473
|
}
|
|
383
|
-
|
|
384
474
|
.dish-tile.selected {
|
|
385
|
-
|
|
386
|
-
|
|
475
|
+
background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
|
|
476
|
+
color: #fff;
|
|
387
477
|
}
|
|
388
478
|
|
|
389
|
-
/*
|
|
390
|
-
|
|
479
|
+
/* Кнопки для бара */
|
|
391
480
|
#bar-controls {
|
|
392
481
|
display: flex;
|
|
393
|
-
align-items: stretch;
|
|
482
|
+
align-items: stretch;
|
|
394
483
|
gap: 8px;
|
|
395
484
|
margin-top: 16px;
|
|
396
485
|
}
|
|
397
|
-
|
|
398
|
-
/* Задаем одной высотой и одинаковыми отступами */
|
|
399
486
|
#bar-controls input,
|
|
400
487
|
#bar-controls button {
|
|
401
|
-
height: 44px;
|
|
402
|
-
|
|
403
|
-
box-sizing: border-box; /* подстраховка, чтобы высота учитывала бордер */
|
|
488
|
+
height: 44px;
|
|
489
|
+
box-sizing: border-box;
|
|
404
490
|
}
|
|
405
|
-
|
|
406
|
-
/* Чтобы кнопка и инпут смотрелись схоже по высоте */
|
|
407
491
|
#bar-notes-input {
|
|
408
492
|
flex: 1;
|
|
409
|
-
padding: 0 12px;
|
|
493
|
+
padding: 0 12px;
|
|
410
494
|
border: 1px solid #ccc;
|
|
411
495
|
border-radius: 6px;
|
|
412
496
|
font-size: 14px;
|
|
413
497
|
outline: none;
|
|
414
498
|
}
|
|
415
|
-
|
|
416
|
-
/* Кнопки – чуть меняем паддинги, чтобы не «лезли» за высоту */
|
|
417
499
|
#bar-send-button,
|
|
418
500
|
#bar-reset-button {
|
|
419
|
-
padding: 0 20px;
|
|
501
|
+
padding: 0 20px;
|
|
420
502
|
border-radius: 6px;
|
|
421
|
-
|
|
503
|
+
background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
|
|
422
504
|
font-size: 14px;
|
|
423
505
|
cursor: pointer;
|
|
424
506
|
white-space: nowrap;
|
|
425
507
|
color: white;
|
|
426
508
|
border: none;
|
|
509
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
427
510
|
}
|
|
428
|
-
|
|
429
|
-
/* При желании hover-эффект сохранить: */
|
|
430
511
|
#bar-send-button:hover,
|
|
431
512
|
#bar-reset-button:hover {
|
|
432
513
|
transform: scale(1.05);
|
|
433
514
|
box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
|
|
434
515
|
}
|
|
435
516
|
|
|
436
|
-
/*
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
517
|
+
/* ===================== 13) Блок Powered by ===================== */
|
|
518
|
+
#powered-by-widget {
|
|
519
|
+
border-top:2px solid #f6f7fd; /* разделительная линия сверху */
|
|
520
|
+
font-family: 'Bricolage Grotesque', sans-serif;
|
|
521
|
+
font-weight: 200;
|
|
522
|
+
display: flex;
|
|
523
|
+
align-items: center;
|
|
524
|
+
justify-content: center;
|
|
525
|
+
padding: 12px 24px;
|
|
526
|
+
}
|
|
527
|
+
#powered-by-widget a {
|
|
528
|
+
text-decoration: none;
|
|
529
|
+
display: flex;
|
|
530
|
+
align-items: center;
|
|
531
|
+
gap: 8px;
|
|
532
|
+
color: #a8a8a8;
|
|
533
|
+
font-size: 12px;
|
|
534
|
+
line-height: 16px;
|
|
535
|
+
transition: opacity 0.2s ease;
|
|
536
|
+
}
|
|
537
|
+
#powered-by-widget a:hover {
|
|
538
|
+
opacity: 0.8;
|
|
539
|
+
}
|
|
540
|
+
#powered-by-widget img {
|
|
541
|
+
height: 16px;
|
|
542
|
+
width: auto;
|
|
543
|
+
color: #a8a8a8;
|
|
544
|
+
}
|
|
443
545
|
|
|
444
|
-
|
|
546
|
+
/* ===================== 14) Адаптивная верстка (Media Queries) ===================== */
|
|
547
|
+
@media screen and (max-width: 768px) {
|
|
548
|
+
#wine-widget-container {
|
|
549
|
+
flex-direction: column;
|
|
550
|
+
padding: 16px;
|
|
551
|
+
min-width: 100vw;
|
|
552
|
+
}
|
|
553
|
+
#wine-placeholder {
|
|
445
554
|
display: flex;
|
|
446
|
-
|
|
555
|
+
gap: 8px;
|
|
447
556
|
overflow-x: auto;
|
|
448
557
|
scroll-snap-type: x mandatory;
|
|
449
558
|
padding: 8px 0;
|
|
450
559
|
width: calc(100vw - 32px);
|
|
451
560
|
min-width: calc(100vw - 32px);
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
.wine-recommendation-tile {
|
|
459
|
-
width: 200px;
|
|
460
|
-
text-align: center;
|
|
461
|
-
}
|
|
462
|
-
|
|
463
|
-
.tile-details {
|
|
464
|
-
text-align: center;
|
|
465
|
-
}
|
|
466
|
-
|
|
467
|
-
.wine-recommendation-tile {
|
|
561
|
+
}
|
|
562
|
+
#wine-widget-header p {
|
|
563
|
+
display: none; /* скрываем подзаголовок на мобильных, если не нужен */
|
|
564
|
+
}
|
|
565
|
+
.wine-recommendation-tile {
|
|
468
566
|
flex: 0 0 auto;
|
|
469
567
|
scroll-snap-align: center;
|
|
470
568
|
width: 240px;
|
|
471
|
-
|
|
472
|
-
}
|
|
569
|
+
text-align: center;
|
|
570
|
+
}
|
|
571
|
+
.tile-details {
|
|
572
|
+
text-align: center;
|
|
573
|
+
}
|
|
473
574
|
}
|
|
474
575
|
|
|
475
|
-
|
|
476
|
-
.hidden {
|
|
477
|
-
display: none;
|
|
478
|
-
}
|
|
576
|
+
/* Пример более узких экранов (i.e. <480px) можно добавить при необходимости */
|
|
479
577
|
`;
|
|
578
|
+
const fontLink = document.createElement('link');
|
|
579
|
+
fontLink.rel = 'stylesheet';
|
|
580
|
+
fontLink.href = 'https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap';
|
|
480
581
|
|
|
582
|
+
// 2. Добавляем <link> в <head>
|
|
583
|
+
document.head.appendChild(fontLink);
|
|
481
584
|
const style = document.createElement('style');
|
|
585
|
+
document.documentElement.style.setProperty('--wineater-corp-color', window?.wineaterData?.COLOR || '#0044FF')
|
|
482
586
|
style.textContent = widgetStyles;
|
|
483
587
|
document.head.appendChild(style);
|