za-ek/marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
marketing/src_static/auto_cart.html

881 lines
42 KiB
HTML
Raw Permalink Normal View History

promo!
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>
promo!
2026-08-22 18:51:25 +00:00
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
rel="preload"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap"
id="style_preload"
as="style"
/>
<script nonce="**MY_PRETTY_CSP_NONCE**">document.getElementById('style_preload').addEventListener('load', (function() {
this.rel='stylesheet'
}))</script>
<noscript>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=optional"
rel="stylesheet"
type="text/css"
/>
</noscript>
promo!
2026-08-21 15:17:08 +00:00
<style nonce="**MY_PRETTY_CSP_NONCE**">
promo!
2026-08-22 18:51:25 +00:00
@font-face {
font-family: 'FallbackFont';
src: local('Helvetica');
size-adjust: 98.5%;
}
promo!
2026-08-21 14:52:45 +00:00
/* Базовые сбросы */
promo!
2026-08-22 18:51:25 +00:00
* { margin: 0; padding: 0; box-sizing: border-box;
font-family: 'Roboto', 'FallbackFont', system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;}
html {overflow: hidden;}
body {
background-color: #FF7D89;
background-image: url('/images/background-raspberry.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;
background-position: left top;
100svh
2026-09-05 18:48:01 +00:00
display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; min-height: 100svh;
promo!
2026-08-22 18:51:25 +00:00
}
.container {
position: relative;
display: flex;
width: 100%;
max-width: 1228px;
background: #ffffff;
border-radius: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
overflow: hidden;
height: 90vh;
}
promo!
2026-08-21 14:52:45 +00:00
/* --- Колонки --- */
promo!
2026-08-22 18:51:25 +00:00
.column { padding: 40px; flex: 1; width: 50%; overflow-y: auto;}
promo!
2026-08-21 14:52:45 +00:00
.column + .column { border-left: 1px solid #f0f0f0; }
/* --- Левая колонка (Фиксированная высота) --- */
promo!
2026-08-22 18:51:25 +00:00
.relative {position: relative;}
#title-block {margin-bottom: 32px;}
.col-left { display: flex; flex-direction: column; height:100%;max-width: 490px;}
h1 { font-size: 32px; line-height: 38px; font-weight: 700; color: #0C3B2E; margin-bottom: 8px; }
.subtitle { font-size: 16px;line-height: 19px; color: #A3ADA2; flex-shrink: 0; font-weight: 350;}
#summary-loader.hidden {visibility: hidden;}
.loader{
font-size: 16px;
line-height: 19px;
display:inline-block;
color:transparent;
-webkit-background-clip: text;
background-clip: text;
position: absolute;
}
.loader:after,
.loader:before {
promo! before react
2026-08-24 03:45:21 +00:00
content: 'Брок бегает по супермаркету...';
promo!
2026-08-22 18:51:25 +00:00
display: block;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.loader:before {
background: linear-gradient(79deg, #FFBA00 0%, #FFEC47 31%, #C4E30F 63%, #5EA12D 98%) 100%;
-webkit-background-clip: text;
background-clip: text;
animation: OpacityAnim 1s ease-in-out 0s infinite alternate;
}
.loader:after {
background: linear-gradient(79deg, #5EA12D 2%, #C4E30F 38%, #FFEC47 69%, #FFBA00 100%) 100%;
-webkit-background-clip: text;
background-clip: text;
animation: OpacityAnim 1s ease-in-out -1s infinite alternate;
}
promo!
2026-08-21 14:52:45 +00:00
promo!
2026-08-22 18:51:25 +00:00
@keyframes OpacityAnim {
0%{opacity: 1.0}
100%{opacity: 0.0}
}
.cart-summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-shrink: 0;width: 100%; }
.cart-summary > div {width: 100%;}
.summary-title { font-size: 20px; line-height: 24px; font-weight: 600; color: #0C3B2E; margin-bottom: 8px;}
promo!
2026-08-21 14:52:45 +00:00
.summary-days { color: #6ba531; }
promo!
2026-08-22 18:51:25 +00:00
.summary-details { font-size: 14px; color: #A3ADA2;display: flex; justify-content: start; align-items: center; gap: 8px;position: absolute;flex: 1;width: 100%;}
.summary-details.hidden { visibility: hidden; }
.summary-details span { font-weight: 350;}
.summary-details b {font-family: initial;font-size: 20px;line-height: 8px;margin-bottom: -2px;}
.summary-excess {background-color: #F1FAF0;padding:3px 6px 5px 6px;color:#6D8982;border-radius: 4px;font-size: 14px;font-weight: 350;}
promo!
2026-08-21 14:52:45 +00:00
.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; }
/* Список и скролл */
promo!
2026-08-22 18:51:25 +00:00
.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;
display: flex;}
promo!
2026-08-21 14:52:45 +00:00
.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; }
promo!
2026-08-22 18:51:25 +00:00
#empty-cart-loader {animation: spin 1.4s cubic-bezier(0.4,0.2,0.35,0.7) infinite;position: absolute;left: 50%;margin-left: -30px;align-self: center;}
#empty-cart-loader.hidden { visibility: hidden; }
.item-image { width: 72px; height: 65px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-right: 16px; flex-shrink: 0; position: relative; overflow: hidden; }
promo!
2026-08-21 14:52:45 +00:00
/* Лоадер при замене */
.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; }
promo!
2026-08-22 18:51:25 +00:00
.item-name { font-size: 15px; color: #0C3B2E; margin-bottom: 4px; }
.item-price { font-size: 14px; color: #A3ADA2; }
promo!
2026-08-21 14:52:45 +00:00
/* Меню (Три точки) */
.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; }
promo!
2026-08-22 18:51:25 +00:00
.menu-btn:hover { background: #f3f4f6; color: #0C3B2E; }
promo!
2026-08-21 14:52:45 +00:00
.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; }
promo!
2026-08-22 18:51:25 +00:00
.menu-dropdown li { padding: 10px 16px; font-size: 14px; color: #0C3B2E; cursor: pointer; transition: 0.2s; }
promo!
2026-08-21 14:52:45 +00:00
.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; }
promo!
2026-08-22 18:51:25 +00:00
.show-more svg { width: 14px; height: 14px; stroke: #6ba531; }
promo!
2026-08-21 14:52:45 +00:00
.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; }
promo!
2026-08-22 18:51:25 +00:00
.total-label { font-size: 16px; line-height: 19px; color: #0C3B2E;visibility: hidden;}
.cart-footer .icon-circle {visibility: hidden;}
.cart-footer .checkout-btn {visibility: hidden;}
#total-price { font-size: 20px; line-height: 24px; font-weight: 500; color: #0C3B2E; margin-top: 4px;visibility: hidden;}
.checkout-btn { background-color: #5EA12D;height: 54px; color: #ffffff; border: none; padding: 14px 32px; border-radius: 12px; font-size: 16px; font-weight: 370; line-height: 20px; cursor: pointer; transition: background 0.2s; }
promo!
2026-08-21 14:52:45 +00:00
.total-wrap { display: flex; flex-direction: column; align-items: flex-start; }
promo! before react
2026-08-24 03:45:21 +00:00
.total-wrap > div { display: flex; align-items: center; }
promo!
2026-08-22 18:51:25 +00:00
.checkout-btn:hover { background-color: #72B541; }
.checkout-btn:focus, .checkout-btn:focus-visible { background-color: #72B541;box-shadow: 0 4px 10px rgba(12, 59, 46, 0.1); }
.checkout-btn:active { background-color: #4A8D19;}
.cart-footer.visible .total-label,
.cart-footer.visible .icon-circle,
.cart-footer.visible .checkout-btn,
.cart-footer.visible #total-price {visibility: visible;}
button {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
promo!
2026-08-21 14:52:45 +00:00
/* --- Правая колонка (Аккордеон) --- */
promo!
2026-08-22 18:51:25 +00:00
#filter-title {margin-bottom: 40px;}
h2 {font-size: 20px; line-height: 24px; margin-bottom: 8px;color: #0C3B2E;}
promo!
2026-08-21 14:52:45 +00:00
.settings-panel { border: 1px solid #ebebeb; border-radius: 16px;}
promo!
2026-08-22 18:51:25 +00:00
.accordion-item { border-bottom: 1px solid #ebebeb;position: relative;}
promo!
2026-08-21 14:52:45 +00:00
.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; }
promo!
2026-08-22 18:51:25 +00:00
.icon-circle { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: 8px; flex-shrink: 0; }
.bg-green-light rect { fill: #E6F696; }
.bg-green-light path { stroke: #5EA12D; }
.bg-gray-light rect { fill: #E7EDE7; }
.bg-gray-light path { stroke: #A3ADA2; }
.header-title { font-size: 16px; line-height: 19px; font-weight: 500; color: #0C3B2E; }
.setting-desc { font-size: 14px; color: #A3ADA2; margin-top: 2px; }
.arrow-icon { color: #A3ADA2; transition: transform 0.3s ease; }
.arrow-icon svg { width: 16px; height: 16px; stroke: #A3ADA2; stroke-width: 2; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 24px; position: relative; }
promo!
2026-08-21 14:52:45 +00:00
.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; }
promo!
2026-08-22 18:51:25 +00:00
.day-btn { flex: 1; height: 52px;max-width:140px;border: 2px solid #e1e1e1; border-radius: 8px; background: #ffffff; font-size: 16px; line-height:19px;font-weight: 350; color: #0C3B2E; cursor: pointer; transition: 0.2s; }
promo!
2026-08-21 14:52:45 +00:00
.day-btn:hover { border-color: #6ba531; }
promo!
2026-08-22 18:51:25 +00:00
.day-btn.active { background: #E6F696; border-color: #5EA12D; }
promo! before react
2026-08-24 03:45:21 +00:00
.day-btn:focus { outline: none; }
promo!
2026-08-21 14:52:45 +00:00
/* Семья (Кто будет есть?) */
.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); }
promo!
2026-08-22 18:51:25 +00:00
.family-member .avatar { width: 46px; height: 46px; border-radius: 50%; background: #f8f9fa; display: flex; align-items: center; justify-content: center; margin-right: 14px; overflow: hidden;font-size: 12px;}
.family-member .avatar img {max-width: 100%;}
promo!
2026-08-21 14:52:45 +00:00
.family-member .info { flex: 1; display: flex; flex-direction: column; pointer-events: none; }
promo!
2026-08-22 18:51:25 +00:00
.family-member .info .name { font-size: 16px; font-weight: 600; color: #0C3B2E; }
.family-member .info .age { font-size: 14px; color: #A3ADA2; }
promo!
2026-08-21 14:52:45 +00:00
.family-member .delete-member { color: #d1d5db; cursor: pointer; font-size: 18px; padding: 0 8px; transition: 0.2s; }
.family-member .delete-member:hover { color: #e53935; }
promo!
2026-08-22 18:51:25 +00:00
.family-member:nth-child(n+1) .avatar {background-color: #B4AAFF}
.family-member:nth-child(n+2) .avatar {background-color: #CEE0FF}
.family-member:nth-child(n+3) .avatar {background-color: #E6F696}
.family-member:nth-child(n+4) .avatar {background-color: #FFF488}
.family-member:nth-child(n+5) .avatar {background-color: #FFD623}
.add-member-btn-wrapper {width: 100%;display: flex;align-items: center;justify-content: center;}
.add-member-btn { padding:18px 23px;border-radius:12px;height:52px;display: flex; align-items: center; justify-content: center; margin-top: 16px; color: #6ba531; font-size: 15px; font-weight: 350; cursor: pointer; transition: 0.2s; background-color: transparent;border:0;}
.add-member-btn:hover { background-color: #F7FBF6;}
.add-member-btn:active { background-color: #EEF8EB;}
.add-member-btn:focus { background-color: #EEF8EB;outline: none;}
promo!
2026-08-21 14:52:45 +00:00
.add-member-btn span { font-size: 20px; margin-left: 8px; font-weight: 300; }
/* ----- БЛОК: Категории в предпочтениях ----- */
promo!
2026-08-22 18:51:25 +00:00
.category-selector-block .category-header h3 { font-size: 16px; line-height: 19px; color: #0C3B2E; margin-bottom: 4px;font-weight: 350; }
.category-selector-block .category-header p { font-size: 14px; color: #A3ADA2; margin-bottom: 16px; font-weight: 350;}
promo!
2026-08-21 14:52:45 +00:00
.categories-wrapper { display: flex; flex-wrap: wrap; gap: 8px; }
promo!
2026-08-22 18:51:25 +00:00
.toggle-categories-btn, .category-btn {
height: 32px;
}
promo!
2026-08-21 14:52:45 +00:00
.category-btn {
padding: 8px 16px;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
promo!
2026-08-22 18:51:25 +00:00
transition: background-color 1.2s;
}
.category-btn:focus {
outline: none;
background-color: #9FC6A4;
box-shadow: 0 4px 10px rgba(12, 59, 46, 0.1);
promo!
2026-08-21 14:52:45 +00:00
}
.category-btn.active {
promo!
2026-08-22 18:51:25 +00:00
background-color: #0C3B2E; /* Темно-зеленый как на скриншоте */
color: #F1FAF0;
promo!
2026-08-21 14:52:45 +00:00
}
.category-btn.inactive {
promo!
2026-08-22 18:51:25 +00:00
background-color: #F1FAF0; /* Светло-зеленый */
color: #0C3B2E;
promo!
2026-08-21 14:52:45 +00:00
}
.category-btn.inactive:hover {
background-color: #e4f0de;
}
promo!
2026-08-22 18:51:25 +00:00
.spacer-width {
visibility: hidden;
position: relative;
}
.spacer-over {
position: absolute;
z-index: 2;
}
.loading-border {
position: relative;
overflow: hidden;
}
.loading-border .spacer-over,
.loading-border:before,
.loading-border:after {
color:#0C3B2E;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.loading-border::before {
content: '';
background: linear-gradient(79deg, #FFBA00 0%, #FFEC47 31%, #C4E30F 63%, #5EA12D 98%) 100%;
animation: OpacityAnim 1s ease-in-out 0s infinite alternate;
}
.loading-border::after {
content: '';
background: linear-gradient(79deg, #5EA12D 2%, #C4E30F 38%, #FFEC47 69%, #FFBA00 100%) 100%;
animation: OpacityAnim 1s ease-in-out -1s infinite alternate;
}
promo!
2026-08-21 14:52:45 +00:00
.toggle-categories-btn {
promo!
2026-08-22 18:51:25 +00:00
height: 32px;
min-width: 32px;
promo!
2026-08-21 14:52:45 +00:00
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; }
promo!
2026-08-22 18:51:25 +00:00
.toggle-categories-btn svg { width: 18px; height: 18px; stroke: #0C3B2E; transition: transform 0.3s ease; }
promo!
2026-08-21 14:52:45 +00:00
.toggle-categories-btn.collapsed svg { transform: rotate(180deg); }
/* Адрес */
.address-input-wrap { position: relative; }
promo!
2026-08-22 18:51:25 +00:00
.address-input-wrap input { width: 100%; padding: 12px 36px 12px 16px; border: 1px solid #e1e1e1; border-radius: 8px; font-size: 14px; color: #0C3B2E; background: #fafafa; outline: none; }
promo!
2026-08-21 14:52:45 +00:00
.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; }
promo!
2026-08-22 18:51:25 +00:00
.modal-header h2 { font-size: 20px; font-weight: 600; color: #0C3B2E; }
promo!
2026-08-21 14:52:45 +00:00
.modal-header .close-modal { font-size: 24px; color: #b0b0b0; cursor: pointer; line-height: 1; }
promo!
2026-08-22 18:51:25 +00:00
.modal-header .close-modal:hover { color: #0C3B2E; }
.categories-grid {gap: 10px;display: flex;flex-wrap: wrap;}
.category-header {visibility: hidden;}
#expand-categories {visibility: hidden;}
#expand-categories.show-more {padding: 6px 8px 6px 16px;display: flex;gap: 8px;justify-content: center;align-items: center;width: auto;color:#0C3B2E; font-size: 14px;font-weight: 350;}
.visible #expand-categories {visibility: visible;}
.visible .category-header {visibility: visible;}
promo!
2026-08-21 14:52:45 +00:00
.form-group { margin-bottom: 16px; }
promo!
2026-08-22 18:51:25 +00:00
.form-group label { display: block; font-size: 14px; color: #0C3B2E; margin-bottom: 6px; }
promo!
2026-08-21 14:52:45 +00:00
.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; }
promo!
2026-08-22 18:51:25 +00:00
.hint { display: block; font-size: 12px; color: #A3ADA2; margin-top: 4px; }
promo!
2026-08-21 14:52:45 +00:00
.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; }
promo!
2026-08-22 18:51:25 +00:00
.modal-prefs-grid .pref-col-title { display: block; font-size: 14px; font-weight: 600; color: #0C3B2E; margin-bottom: 6px; }
promo!
2026-08-21 14:52:45 +00:00
.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;
promo!
2026-08-22 18:51:25 +00:00
border: 2px solid #E7EDE7;
promo!
2026-08-21 14:52:45 +00:00
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.02);
promo!
2026-08-22 18:51:25 +00:00
padding: 16px 32px;
promo!
2026-08-21 14:52:45 +00:00
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;
promo!
2026-08-22 18:51:25 +00:00
width: 48px;
height: 48px;
promo!
2026-08-21 14:52:45 +00:00
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #edf2f7;
promo!
2026-08-22 18:51:25 +00:00
box-shadow: inset 0 4px 10px 0 rgba(12, 59, 46, 0.1);
promo!
2026-08-21 14:52:45 +00:00
overflow: hidden;
}
.cookie-icon-wrapper img {
width: 85%;
height: 85%;
object-fit: contain;
}
/* Текст */
.cookie-text {
margin: 0;
flex-grow: 1;
promo!
2026-08-22 18:51:25 +00:00
color: #0C3B2E; /* Темный зелено-серый цвет текста */
font-size: 14px;
line-height: 20px;
promo!
2026-08-21 14:52:45 +00:00
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);
}
promo!
2026-08-22 18:51:25 +00:00
/* CSS с префиксами */
/* Обертка на весь экран */
.product-modal-overlay {
position: fixed;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
justify-content: center;
align-items: center;
z-index: 1000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.product-modal-overlay.show {
display: flex;
}
/* Само окно */
.product-modal-window {
background-color: #ffffff;
border-radius: 12px;
width: 100%;
max-width: 340px;
padding: 20px 24px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
position: relative;
box-sizing: border-box;
}
/* Кнопка закрытия (крестик) */
.product-modal-close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
color: #b3b3b3;
font-size: 24px;
line-height: 1;
cursor: pointer;
padding: 5px;
}
.product-modal-close:hover {
color: #777;
}
/* Блок с картинкой */
.product-modal-image {
display: flex;
justify-content: center;
margin: 20px 0;
}
.product-modal-image img {
width: 160px;
height: auto;
object-fit: contain;
}
/* Заголовок */
.product-modal-title {
font-size: 18px;
font-weight: 700;
text-align: center;
color: #222222;
line-height: 1.4;
margin: 0 0 10px 0;
}
/* Подзаголовок (цена и количество) */
.product-modal-details {
font-size: 15px;
text-align: center;
color: #555555;
margin: 0 0 24px 0;
}
/* Основная зеленая кнопка */
.product-modal-btn {
display: block;
width: 100%;
background-color: #5ba653;
color: #ffffff;
font-size: 16px;
font-weight: 600;
padding: 14px 0;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s;
}
.product-modal-btn:hover {
background-color: #4e9247;
}
/* Ссылка внизу */
.product-modal-link {
display: block;
text-align: center;
margin-top: 15px;
color: #5ba653;
font-size: 14px;
text-decoration: none;
font-weight: 500;
}
.product-modal-link:hover {
text-decoration: underline;
}
promo!
2026-08-21 14:52:45 +00:00
/* Адаптивность для мобильных устройств */
@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">
promo!
2026-08-22 18:51:25 +00:00
<div id="title-block">
<h1>Автокорзина</h1>
<p class="subtitle">Собираем продукты под ваши настройки</p>
</div>
promo!
2026-08-21 14:52:45 +00:00
<div class="cart-summary">
<div>
<div class="summary-title">Ваша корзина на <span class="summary-days"> - </span></div>
promo!
2026-08-22 18:51:25 +00:00
<div class="relative">
promo! before react
2026-08-24 03:45:21 +00:00
<div><div class="loader hidden" id="summary-loader">Брок бегает по супермаркету...</div></div>
promo!
2026-08-22 18:51:25 +00:00
<div class="summary-details" id="summary-details">
<span>84 товара</span>
<b>&bull;</b>
<span>12 020 ₽</span>
<div class="summary-excess">С запасами до 13 дней</div>
</div>
</div>
promo!
2026-08-21 14:52:45 +00:00
</div>
</div>
<div class="cart-scroll-wrapper" id="scroll-wrapper">
<ul class="cart-items" id="cart-list"></ul>
promo!
2026-08-22 18:51:25 +00:00
<img src="/images/empty-cart-loader.svg" alt="сбор корзины" id="empty-cart-loader">
promo!
2026-08-21 14:52:45 +00:00
</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">
promo! before react
2026-08-24 03:45:21 +00:00
<div>
promo!
2026-08-22 18:51:25 +00:00
<div class="icon-circle bg-green-light">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="22" fill="#E6F696"/>
<path d="M18 18L18 17C18 14.7909 19.7909 13 22 13C24.2091 13 26 14.7909 26 17L26 18" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
<path d="M25 24V22" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
<path d="M19 24V22" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
<path d="M14 22C14 20.1144 14 19.1716 14.5858 18.5858C15.1716 18 16.1144 18 18 18H26C27.8856 18 28.8284 18 29.4142 18.5858C30 19.1716 30 20.1144 30 22V23C30 26.7712 30 28.6569 28.8284 29.8284C27.6569 31 25.7712 31 22 31C18.2288 31 16.3431 31 15.1716 29.8284C14 28.6569 14 26.7712 14 23V22Z" stroke="#5EA12D" stroke-width="2"/>
</svg>
</div>
promo!
2026-08-21 14:52:45 +00:00
<div>
<span class="total-label">Итого</span>
<div id="total-price"> - </div>
</div>
</div>
</div>
<button class="checkout-btn">Оформить заказ</button>
</div>
</div>
<!-- Правая колонка -->
<div class="column">
promo!
2026-08-22 18:51:25 +00:00
<div id="filter-title">
<h2>Настройте корзину под себя</h2>
<p class="subtitle">Чем больше вы расскажете, тем точнее будет подбор</p>
</div>
promo!
2026-08-21 14:52:45 +00:00
<div class="settings-panel" id="settings-panel">
promo!
2026-08-22 18:51:25 +00:00
<div class="accordion-item">
promo!
2026-08-21 14:52:45 +00:00
<div class="accordion-header">
<div class="header-left">
promo!
2026-08-22 18:51:25 +00:00
<div class="icon-circle bg-green-light"><img src="/images/calendar.svg" alt="календарь" /></div>
promo!
2026-08-21 14:52:45 +00:00
<span class="header-title">На сколько дней собираем корзину?</span>
</div>
<div class="arrow-icon">
promo!
2026-08-22 18:51:25 +00:00
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 9L12 16L5 9" stroke="#0C3B2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
promo!
2026-08-21 14:52:45 +00:00
</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>
promo!
2026-08-22 18:51:25 +00:00
<button class="day-btn active" data-days="7">7</button>
promo!
2026-08-21 14:52:45 +00:00
</div>
</div>
</div>
promo!
2026-08-22 18:51:25 +00:00
<div class="accordion-item open">
promo!
2026-08-21 14:52:45 +00:00
<div class="accordion-header">
<div class="header-left">
promo!
2026-08-22 18:51:25 +00:00
<div class="icon-circle bg-green-light"><img src="/images/family.svg" alt="семья" /></div>
promo!
2026-08-21 14:52:45 +00:00
<div>
<div class="header-title">Кто будет есть?</div>
<div class="setting-desc" id="family-desc">2 человека</div>
</div>
</div>
<div class="arrow-icon">
promo!
2026-08-22 18:51:25 +00:00
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 9L12 16L5 9" stroke="#0C3B2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
promo!
2026-08-21 14:52:45 +00:00
</div>
</div>
<div class="accordion-content">
<div class="family-list" id="family-list">
<!-- Семья рендерится через JS -->
</div>
promo!
2026-08-22 18:51:25 +00:00
<div class="add-member-btn-wrapper">
<button class="add-member-btn" id="addMemberBtn">
Добавить человека <span>+</span>
</button>
promo!
2026-08-21 14:52:45 +00:00
</div>
</div>
</div>
<!-- Вкладка Предпочтения (Категории) -->
<div class="accordion-item" id="prefs-accordion">
<div class="accordion-header">
<div class="header-left">
promo!
2026-08-22 18:51:25 +00:00
<div class="icon-circle bg-gray-light" id="preferences-icon">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="22"/>
<path d="M14.4507 23.9082L21.4033 30.4395C21.6428 30.6644 21.7625 30.7769 21.9037 30.8046C21.9673 30.8171 22.0327 30.8171 22.0963 30.8046C22.2375 30.7769 22.3572 30.6644 22.5967 30.4395L29.5493 23.9082C31.5055 22.0706 31.743 19.0466 30.0978 16.9261L29.7885 16.5273C27.8203 13.9906 23.8696 14.416 22.4867 17.3137C22.2913 17.723 21.7087 17.723 21.5133 17.3137C20.1304 14.416 16.1797 13.9906 14.2115 16.5273L13.9022 16.9261C12.2569 19.0466 12.4945 22.0706 14.4507 23.9082Z" stroke-width="2"/>
</svg>
</div>
promo!
2026-08-21 14:52:45 +00:00
<div>
<div class="header-title">Предпочтения</div>
promo!
2026-08-22 18:51:25 +00:00
<div class="setting-desc" id="prefs-desc">Не указаны</div>
promo!
2026-08-21 14:52:45 +00:00
</div>
</div>
<div class="arrow-icon">
promo!
2026-08-22 18:51:25 +00:00
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 9L12 16L5 9" stroke="#0C3B2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
promo!
2026-08-21 14:52:45 +00:00
</div>
</div>
<div class="accordion-content">
<div class="category-selector-block">
<div class="category-header">
promo!
2026-08-22 18:51:25 +00:00
<h3>Что добавить в корзину?</h3>
promo!
2026-08-21 14:52:45 +00:00
<p>Выберите группы продуктов, которые хотите видеть в корзине</p>
</div>
<div class="categories-wrapper">
promo!
2026-08-22 18:51:25 +00:00
<div class="categories-grid" id="categories-grid">
<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>
promo!
2026-08-21 14:52:45 +00:00
</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>
promo!
2026-08-22 18:51:25 +00:00
<div class="product-modal-overlay" id="modalProductOverlay">
<div class="product-modal-window">
<button class="product-modal-close" aria-label="Закрыть">&times;</button>
<div class="product-modal-image">
<!-- Замените src на ваш реальный URL картинки -->
<img src="" id="modalProductImage" alt="Мороженое Baskin Robbins">
</div>
<h2 class="product-modal-title" id="modalProductTitle">Мороженое "Baskin Robbins" Банан с клубникой, 90 мл</h2>
<p class="product-modal-details"><span id="modalProductQuantity">1 шт</span> · <span id="modalProductPrice">200 ₽</span></p>
<button class="product-modal-btn" id="modalProductReplaceBtn">Заменить</button>
<a href="#" class="product-modal-link" id="modalProductAnotherBtn">Ещё вариант</a>
</div>
</div>
promo!
2026-08-21 14:52:45 +00:00
<div id="cookie-popup">
<div class="cookie-icon-wrapper">
promo!
2026-08-22 18:51:25 +00:00
<img src="/images/cookie.png" alt="Cookie icon">
promo!
2026-08-21 14:52:45 +00:00
</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>
promo!
2026-08-22 18:51:25 +00:00
<!--<button class="reorder-btn">Начать заново</button>-->
promo!
2026-08-21 15:17:08 +00:00
<script nonce="**MY_PRETTY_CSP_NONCE**" src="autocart.js"></script>
promo!
2026-08-21 14:52:45 +00:00
</body>
</html>
Reference in New Issue Copy Permalink