2026-08-21 14:52:45 +00:00
<!DOCTYPE html>
< html lang = "ru" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Автокорзина< / title >
2026-08-21 15:17:08 +00:00
< style nonce = "**MY_PRETTY_CSP_NONCE**" >
2026-08-21 14:52:45 +00:00
/* Базовые сбросы */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background-color: #f5f7f8; display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; min-height: 100vh; }
.container { display: flex; width: 100%; max-width: 1200px; background: #ffffff; border-radius: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); overflow: hidden; max-height: 90vh; }
/* --- Колонки --- */
.column { padding: 30px; flex: 1; width: 50%; overflow-y: auto;}
.column + .column { border-left: 1px solid #f0f0f0; }
/* --- Левая колонка (Фиксированная высота) --- */
.col-left { display: flex; flex-direction: column; height: auto; min-height: 550px; }
h1 { font-size: 24px; font-weight: 700; color: #1c1c1c; margin-bottom: 6px; }
.subtitle { font-size: 14px; color: #8b8b8b; margin-bottom: 28px; flex-shrink: 0; }
.cart-summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-shrink: 0; }
.summary-title { font-size: 18px; font-weight: 600; color: #1c1c1c; }
.summary-days { color: #6ba531; }
.summary-details { font-size: 14px; color: #8b8b8b; margin-top: 4px; }
.reorder-btn { padding: 8px 16px; background: transparent; border: 1px solid #6ba531; color: #6ba531; border-radius: 8px; cursor: pointer; font-size: 14px; transition: 0.2s; flex-shrink: 0; }
.reorder-btn:hover { background: #6ba531; color: #fff; }
/* Список и скролл */
.cart-scroll-wrapper { flex: 1; overflow-y: auto; overflow-x: hidden; padding-right: 4px; margin-bottom: 10px; position: relative; transition: max-height 0.3s ease; }
.cart-scroll-wrapper::-webkit-scrollbar { width: 6px; }
.cart-scroll-wrapper::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.cart-scroll-wrapper::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.cart-items { list-style: none; }
.cart-item { display: flex; align-items: center; padding: 16px 0; border-bottom: 1px solid #f0f0f0; position: relative; transition: opacity 0.4s, transform 0.4s; }
.cart-item.replacing { opacity: 0.5; pointer-events: none; }
.item-image { width: 72px; height: 65px; border-radius: 8px; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-right: 16px; flex-shrink: 0; position: relative; overflow: hidden; }
/* Лоадер при замене */
.cart-item.replacing .item-image::after {
content: '';
position: absolute;
width: 30px; height: 30px;
border: 3px solid #e1e1e1;
border-top: 3px solid #6ba531;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.item-details { flex: 1; }
.item-name { font-size: 15px; color: #1c1c1c; margin-bottom: 4px; }
.item-price { font-size: 14px; color: #8b8b8b; }
/* Меню (Три точки) */
.menu-btn-wrapper { position: relative; }
.menu-btn { background: none; border: none; color: #b0b0b0; cursor: pointer; padding: 4px 8px; font-size: 20px; letter-spacing: 2px; border-radius: 4px; transition: 0.2s; }
.menu-btn:hover { background: #f3f4f6; color: #1c1c1c; }
.menu-dropdown { position: absolute; right: 0; top: 100%; background: #ffffff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); min-width: 150px; padding: 6px 0; display: none; z-index: 10; margin-top: 4px; }
.menu-dropdown.active { display: block; }
.menu-dropdown ul { list-style: none; }
.menu-dropdown li { padding: 10px 16px; font-size: 14px; color: #1c1c1c; cursor: pointer; transition: 0.2s; }
.menu-dropdown li:hover { background: #f3f4f6; }
.show-more { display: flex; align-items: center; justify-content: center; padding: 20px 0 10px; color: #6ba531; font-size: 14px; cursor: pointer; font-weight: 500; transition: 0.2s; flex-shrink: 0; gap: 4px;}
.show-more:hover { opacity: 0.8; }
.show-more svg { margin-left: 6px; width: 14px; height: 14px; stroke: #6ba531; }
.show-more.hidden { display: none; }
.cart-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
.total-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.total-label { font-size: 14px; color: #8b8b8b; }
#total-price { font-size: 22px; font-weight: 700; color: #1c1c1c; }
.checkout-btn { background-color: #6ba531; color: #ffffff; border: none; padding: 14px 32px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.checkout-btn:hover { background-color: #5b8f29; }
/* --- Правая колонка (Аккордеон) --- */
.settings-panel { border: 1px solid #ebebeb; border-radius: 16px;}
.accordion-item { border-bottom: 1px solid #ebebeb; }
.accordion-item:last-child { border-bottom: none; }
.accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; user-select: none; }
.header-left { display: flex; align-items: center; }
.icon-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: 12px; flex-shrink: 0; }
.bg-green-light { background-color: #e9f6d9; color: #6ba531; }
.bg-gray-light { background-color: #f3f4f6; color: #8b8b8b; }
.header-title { font-size: 15px; font-weight: 500; color: #1c1c1c; }
.setting-desc { font-size: 14px; color: #8b8b8b; margin-top: 2px; }
.arrow-icon { color: #8b8b8b; transition: transform 0.3s ease; }
.arrow-icon svg { width: 16px; height: 16px; stroke: #8b8b8b; stroke-width: 2; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 24px; }
.accordion-item.open .accordion-content { max-height: 500px; padding: 0 24px 20px; }
.accordion-item.open .arrow-icon { transform: rotate(180deg); }
/* Дни */
.days-options { display: flex; gap: 12px; }
.day-btn { flex: 1; padding: 10px 0; border: 1px solid #e1e1e1; border-radius: 8px; background: #ffffff; font-size: 14px; color: #1c1c1c; cursor: pointer; transition: 0.2s; }
.day-btn:hover { border-color: #6ba531; }
.day-btn.active { background: #e9f6d9; border-color: #e9f6d9; font-weight: 500; }
/* Семья (Кто будет есть?) */
.family-list { display: flex; flex-direction: column; gap: 12px; }
.family-member { display: flex; align-items: center; padding: 12px 16px; border: 1px solid #ebebeb; border-radius: 12px; background: #fff; transition: 0.2s; cursor: pointer; }
.family-member:hover { border-color: #c0c0c0; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.family-member .avatar { width: 44px; height: 44px; border-radius: 50%; background: #f8f9fa; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 14px; }
.family-member .info { flex: 1; display: flex; flex-direction: column; pointer-events: none; }
.family-member .info .name { font-size: 16px; font-weight: 600; color: #1c1c1c; }
.family-member .info .age { font-size: 14px; color: #8b8b8b; }
.family-member .delete-member { color: #d1d5db; cursor: pointer; font-size: 18px; padding: 0 8px; transition: 0.2s; }
.family-member .delete-member:hover { color: #e53935; }
.add-member-btn { display: flex; align-items: center; justify-content: center; margin-top: 16px; color: #6ba531; font-size: 15px; font-weight: 500; cursor: pointer; transition: 0.2s; }
.add-member-btn:hover { opacity: 0.8; }
.add-member-btn span { font-size: 20px; margin-left: 8px; font-weight: 300; }
/* ----- БЛОК: Категории в предпочтениях ----- */
.category-selector-block .category-header h3 { font-size: 16px; color: #1c1c1c; margin-bottom: 4px; }
.category-selector-block .category-header p { font-size: 14px; color: #8b8b8b; margin-bottom: 16px; }
.categories-wrapper { display: flex; flex-wrap: wrap; gap: 8px; }
.category-btn {
padding: 8px 16px;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: 0.2s;
}
.category-btn.active {
background-color: #134233; /* Темно-зеленый как на скриншоте */
color: #ffffff;
}
.category-btn.inactive {
background-color: #f2f9ef; /* Светло-зеленый */
color: #1c1c1c;
}
.category-btn.inactive:hover {
background-color: #e4f0de;
}
.toggle-categories-btn {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f9ef;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.2s;
}
.toggle-categories-btn:hover { background-color: #e4f0de; }
.toggle-categories-btn svg { width: 18px; height: 18px; stroke: #1c1c1c; transition: transform 0.3s ease; }
.toggle-categories-btn.collapsed svg { transform: rotate(180deg); }
/* Адрес */
.address-input-wrap { position: relative; }
.address-input-wrap input { width: 100%; padding: 12px 36px 12px 16px; border: 1px solid #e1e1e1; border-radius: 8px; font-size: 14px; color: #1c1c1c; background: #fafafa; outline: none; }
.address-input-wrap .clear-input { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #b0b0b0; cursor: pointer; font-size: 18px; }
/* --- Модальное окно (Добавить/Редактировать человека) --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-content { background: #ffffff; border-radius: 24px; width: 100%; max-width: 440px; padding: 24px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); max-height: 95vh; overflow-y: auto;}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h2 { font-size: 20px; font-weight: 600; color: #1c1c1c; }
.modal-header .close-modal { font-size: 24px; color: #b0b0b0; cursor: pointer; line-height: 1; }
.modal-header .close-modal:hover { color: #1c1c1c; }
.categories-grid {gap: 4px;display: flex;flex-wrap: wrap;}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; color: #1c1c1c; margin-bottom: 6px; }
.form-group input { width: 100%; padding: 10px 12px; border: 1px solid #e1e1e1; border-radius: 8px; font-size: 14px; outline: none; transition: 0.2s; }
.form-group input:focus { border-color: #6ba531; }
.form-row { display: flex; gap: 16px; margin-bottom: 16px; }
.form-row .form-group { flex: 1; margin-bottom: 0; }
.hint { display: block; font-size: 12px; color: #8b8b8b; margin-top: 4px; }
.gender-toggles { display: flex; gap: 8px; margin-bottom: 16px; }
.gender-btn { flex: 1; padding: 10px; border: 1px solid #e1e1e1; border-radius: 8px; background: #ffffff; font-size: 14px; cursor: pointer; transition: 0.2s; }
.gender-btn.active { background: #e9f6d9; border-color: #e9f6d9; font-weight: 500; }
/* Внутренние стили для модального окна (Запрещенные / Любимые) */
.modal-prefs-grid { display: flex; gap: 16px; margin-bottom: 20px; border-top: 1px solid #f0f0f0; padding-top: 16px; }
.modal-prefs-grid .pref-col { flex: 1; position: relative; }
.modal-prefs-grid .pref-col-title { display: block; font-size: 14px; font-weight: 600; color: #1c1c1c; margin-bottom: 6px; }
.modal-prefs-grid .pref-input { width: 100%; padding: 8px 10px; border: 1px solid #e1e1e1; border-radius: 8px; font-size: 14px; outline: none; margin-bottom: 6px; }
.modal-prefs-grid .pref-input:focus { border-color: #6ba531; }
.modal-prefs-grid .autocomplete-list { position: absolute; top: 65px; left: 0; width: 100%; background: #fff; border: 1px solid #e1e1e1; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); max-height: 120px; overflow-y: auto; display: none; z-index: 20; }
.modal-prefs-grid .autocomplete-list.active { display: block; }
.modal-prefs-grid .autocomplete-list div { padding: 8px 12px; cursor: pointer; font-size: 14px; transition: 0.2s; }
.modal-prefs-grid .autocomplete-list div:hover { background: #f3f4f6; }
.modal-prefs-grid .tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-prefs-grid .tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 13px; }
.modal-prefs-grid .tag-red { background-color: #fce4ec; color: #c62828; }
.modal-prefs-grid .tag-green { background-color: #f0f4c3; color: #33691e; }
.modal-prefs-grid .tag-close { margin-left: 6px; cursor: pointer; font-size: 15px; opacity: 0.6; }
.modal-prefs-grid .tag-close:hover { opacity: 1; }
.save-btn { width: 100%; padding: 12px; background: #6ba531; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.save-btn:hover { background: #5b8f29; }
@media (max-width: 900px) {
.container { flex-direction: column; }
.column { width: 100%; padding: 20px;}
.column + .column { border-left: none; border-top: 1px solid #f0f0f0; }
.form-row, .modal-prefs-grid { flex-direction: column; gap: 16px; }
.col-left { min-height: 400px; }
}
/* --- Стили для попапа --- */
#cookie-popup {
position: fixed;
bottom: 25px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: #ffffff;
border-radius: 20px;
border: 1px solid #e9edf0;
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.02);
padding: 15px 24px;
display: flex;
align-items: center;
gap: 20px;
width: 95%;
max-width: 780px;
z-index: 9999;
/* Начальное состояние (скрыто) */
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Класс для показа попапа */
#cookie-popup.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Класс для скрытия (при нажатии) */
#cookie-popup.hide {
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(30px);
}
/* Иконка печенья */
.cookie-icon-wrapper {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #edf2f7;
box-shadow: inset 0 0 0 1px #ffffff, 0 2px 4px rgba(0,0,0,0.03);
overflow: hidden;
}
.cookie-icon-wrapper img {
width: 85%;
height: 85%;
object-fit: contain;
}
/* Текст */
.cookie-text {
margin: 0;
flex-grow: 1;
color: #1c3a2e; /* Темный зелено-серый цвет текста */
font-size: 15px;
line-height: 1.5;
letter-spacing: 0.01em;
}
.cookie-text .highlight {
color: #69a342; /* Зеленый цвет для слова "куки" */
font-weight: 600;
}
/* Кнопка */
#cookie-accept {
flex-shrink: 0;
background-color: #d6e6d4; /* Светло-оливковый фон */
color: #1c3a2e;
border: none;
padding: 10px 24px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
white-space: nowrap;
}
#cookie-accept:hover {
background-color: #c2d6c0;
}
#cookie-accept:active {
transform: scale(0.96);
}
/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
#cookie-popup {
flex-wrap: wrap;
justify-content: center;
padding: 20px;
bottom: 15px;
text-align: center;
border-radius: 16px;
gap: 12px;
}
.cookie-icon-wrapper {
width: 50px;
height: 50px;
}
.cookie-text {
font-size: 14px;
width: 100%;
order: 2;
}
#cookie-accept {
width: 100%;
justify-content: center;
padding: 12px;
order: 3;
}
}
< / style >
< / head >
< body >
< div class = "container" >
<!-- Левая колонка -->
< div class = "column col-left" id = "app" >
< h1 > Автокорзина< / h1 >
< p class = "subtitle" > Собираем продукты под ваши настройки< / p >
< div class = "cart-summary" >
< div >
< div class = "summary-title" > Ваша корзина на < span class = "summary-days" > - < / span > < / div >
< div class = "summary-details" id = "summary-details" > 84 товара • 12 020 ₽< / div >
< / div >
< button class = "reorder-btn" > Начать заново< / button >
< / div >
< div class = "cart-scroll-wrapper" id = "scroll-wrapper" >
< ul class = "cart-items" id = "cart-list" > < / ul >
< / div >
< div class = "show-more" id = "show-more-btn" >
Показать ещё < span id = "remaining-count" > -< / span > товаров
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < polyline points = "6 9 12 15 18 9" > < / polyline > < / svg >
< / div >
< div class = "cart-footer" >
< div class = "total-wrap" >
< div style = "display: flex; align-items: center;" >
< div class = "icon-circle bg-green-light" style = "margin-right: 12px; width: 40px; height: 40px; font-size: 18px;" > 🛍️< / div >
< div >
< span class = "total-label" > Итого< / span >
< div id = "total-price" > - < / div >
< / div >
< / div >
< / div >
< button class = "checkout-btn" > Оформить заказ< / button >
< / div >
< / div >
<!-- Правая колонка -->
< div class = "column" >
< h1 > Настройте корзину под себя< / h1 >
< p class = "subtitle" > Чем больше вы расскажете, тем точнее будет подбор< / p >
< div class = "settings-panel" id = "settings-panel" >
< div class = "accordion-item open" >
< div class = "accordion-header" >
< div class = "header-left" >
< div class = "icon-circle bg-green-light" > 📅< / div >
< span class = "header-title" > Н а < / span >
< / div >
< div class = "arrow-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < polyline points = "6 9 12 15 18 9" > < / polyline > < / svg >
< / div >
< / div >
< div class = "accordion-content" >
< div class = "days-options" >
< button class = "day-btn" data-days = "1" > 1< / button >
< button class = "day-btn" data-days = "3" > 3< / button >
< button class = "day-btn" data-days = "7" > 7< / button >
< / div >
< / div >
< / div >
< div class = "accordion-item" >
< div class = "accordion-header" >
< div class = "header-left" >
< div class = "icon-circle bg-green-light" > 👤< / div >
< div >
< div class = "header-title" > Кто будет есть?< / div >
< div class = "setting-desc" id = "family-desc" > 2 человека< / div >
< / div >
< / div >
< div class = "arrow-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < polyline points = "6 9 12 15 18 9" > < / polyline > < / svg >
< / div >
< / div >
< div class = "accordion-content" >
< div class = "family-list" id = "family-list" >
<!-- Семья рендерится через JS -->
< / div >
< div class = "add-member-btn" id = "addMemberBtn" >
Добавить человека < span > +< / span >
< / div >
< / div >
< / div >
<!-- Вкладка Предпочтения (Категории) -->
< div class = "accordion-item" id = "prefs-accordion" >
< div class = "accordion-header" >
< div class = "header-left" >
< div class = "icon-circle bg-gray-light" > ❤️< / div >
< div >
< div class = "header-title" > Предпочтения< / div >
< div class = "setting-desc" id = "prefs-desc" > Категории продуктов< / div >
< / div >
< / div >
< div class = "arrow-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < polyline points = "6 9 12 15 18 9" > < / polyline > < / svg >
< / div >
< / div >
< div class = "accordion-content" >
< div class = "category-selector-block" >
< div class = "category-header" >
< p > Выберите группы продуктов, которые хотите видеть в корзине< / p >
< / div >
< div class = "categories-wrapper" >
< div class = "categories-grid" id = "categories-grid" > < / div >
< button class = "toggle-categories-btn" id = "expand-categories" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < polyline points = "18 15 12 9 6 15" > < / polyline > < / svg >
< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Модальное окно добавления/редактирования человека с -->
< div class = "modal-overlay" id = "personModal" >
< div class = "modal-content" >
< div class = "modal-header" >
< h2 id = "modalTitle" > Добавить человека< / h2 >
< span class = "close-modal" id = "closeModalBtn" > × < / span >
< / div >
< div class = "modal-body" >
< div class = "form-group" >
< label > Имя< / label >
< input type = "text" id = "inputName" placeholder = "Имя" >
< / div >
< div class = "form-group" >
< label > Пол< / label >
< div class = "gender-toggles" id = "genderToggles" >
< button class = "gender-btn" data-gender = "f" > Женский< / button >
< button class = "gender-btn active" data-gender = "m" > Мужской< / button >
< / div >
< / div >
< div class = "form-row" >
< div class = "form-group" >
< label > Возраст< / label >
< input type = "number" id = "inputAge" value = "30" >
< span class = "hint" > от 7 лет< / span >
< / div >
< div class = "form-group" >
< label > В е с < / label >
< input type = "number" id = "inputWeight" value = "87" >
< / div >
< div class = "form-group" >
< label > Рост< / label >
< input type = "number" id = "inputHeight" value = "177" >
< / div >
< / div >
<!-- ВОЗВРАЩЁННЫЕ ПОЛЯ: Запрещённые и Любимые -->
< div class = "modal-prefs-grid" >
< div class = "pref-col" >
< span class = "pref-col-title" > Запрещённые< / span >
< input class = "pref-input" type = "text" placeholder = "Например: лук" data-type = "avoid" >
< div class = "autocomplete-list" data-type = "avoid" > < / div >
< div class = "tags-wrap" data-target = "avoid" > < / div >
< / div >
< div class = "pref-col" >
< span class = "pref-col-title" > Любимые< / span >
< input class = "pref-input" type = "text" data-type = "favorite" >
< div class = "autocomplete-list" data-type = "favorite" > < / div >
< div class = "tags-wrap" data-target = "favorite" > < / div >
< / div >
< / div >
< button class = "save-btn" id = "savePersonBtn" > Сохранить< / button >
< / div >
< / div >
< / div >
< div id = "cookie-popup" >
< div class = "cookie-icon-wrapper" >
<!-- Замените src на свою картинку печенья -->
< img src = "https://cdn-icons-png.flaticon.com/512/642/642573.png" alt = "Cookie icon" >
< / div >
< p class = "cookie-text" >
Мы используем < a class = "highlight" href = "/cookies_and_recommendations.html#c" target = "_blank" > куки< / a > и < a class = "highlight" href = "/cookies_and_recommendations.html#r" target = "_blank" > рекомендательные технологии< / a > , это помогает
улучшать сервис и запоминать ваши настройки
< / p >
< button id = "cookie-accept" > Хорошо< / button >
< / div >
2026-08-21 15:17:08 +00:00
< script nonce = "**MY_PRETTY_CSP_NONCE**" src = "autocart.js" > < / script >
2026-08-21 14:52:45 +00:00
< / body >
< / html >
