za-ek/marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

promo!

Browse Source
This commit is contained in:
Zakhar 2026-08-22 21:51:25 +03:00
parent f0ffd89860
commit 9baa29bd68
14 changed files with 2335 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
auto_cart.html
View File

File diff suppressed because one or more lines are too long

2
autocart.js
View File

File diff suppressed because one or more lines are too long

BIN
images/background-raspberry.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 MiB

BIN
images/broc-boy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
images/broc-girl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
images/broc-man.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/broc-woman.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

11
images/calendar.svg Normal file
View File

@ -0,0 +1,11 @@
<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"/>
<rect x="13" y="16" width="18" height="15" rx="2" stroke="#5EA12D" stroke-width="2"/>
<path d="M13 20C13 18.1144 13 17.1716 13.5858 16.5858C13.5858 16.5858 13.5858 16.5858 13.5858 16.5858C14.1716 16 15.1144 16 17 16H27C28.8856 16 29.8284 16 30.4142 16.5858C30.4142 16.5858 30.4142 16.5858 30.4142 16.5858C31 17.1716 31 18.1144 31 20H13Z" fill="#5EA12D"/>
<path d="M17 13L17 16" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
<path d="M27 13L27 16" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
<rect x="17" y="22" width="4" height="2" rx="0.5" fill="#5EA12D"/>
<rect x="17" y="26" width="4" height="2" rx="0.5" fill="#5EA12D"/>
<rect x="23" y="22" width="4" height="2" rx="0.5" fill="#5EA12D"/>
<rect x="23" y="26" width="4" height="2" rx="0.5" fill="#5EA12D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 980 B

BIN
images/cookie.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

31
images/empty-cart-loader.svg Normal file
View File

@ -0,0 +1,31 @@
<svg width="59" height="59" viewBox="0 0 59 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_17984_112152)">
<path opacity="0.05" d="M48.9753 29.1432C48.9753 25.3796 47.9044 21.6937 45.8878 18.516C43.8711 15.3383 40.992 12.8 37.5866 11.1975" stroke="#5EA12D" stroke-width="3" stroke-linecap="round"/>
<path opacity="0.1" d="M48.9753 29.1432C48.9753 24.0987 47.053 19.2437 43.5998 15.5664" stroke="#5EA12D" stroke-width="3" stroke-linecap="round"/>
<path opacity="0.3" d="M48.9753 29.1432C48.9753 26.6435 48.5027 24.1663 47.5825 21.8421" stroke="#5EA12D" stroke-width="3" stroke-linecap="round"/>
<path d="M47.4753 29.1432C47.4753 29.1048 47.4751 29.0664 47.4749 29.028" stroke="#5EA12D" stroke-width="6" stroke-linecap="round"/>
</g>
<g clip-path="url(#clip1_17984_112152)">
<path opacity="0.05" d="M19.2247 11.9684C15.9653 13.8502 13.3086 16.6206 11.565 19.9559C9.8213 23.2912 9.06262 27.0538 9.37755 30.8042" stroke="#5EA12D" stroke-width="3" stroke-linecap="round"/>
<path opacity="0.1" d="M19.2247 11.9684C14.856 14.4907 11.6125 18.5829 10.1545 23.4121" stroke="#5EA12D" stroke-width="3" stroke-linecap="round"/>
<path opacity="0.3" d="M19.2247 11.9684C17.0598 13.2183 15.1508 14.8661 13.5981 16.8251" stroke="#5EA12D" stroke-width="3" stroke-linecap="round"/>
<path d="M19.9747 13.2674C19.9414 13.2866 19.9082 13.3059 19.8751 13.3254" stroke="#5EA12D" stroke-width="6" stroke-linecap="round"/>
</g>
<g clip-path="url(#clip2_17984_112152)">
<path opacity="0.05" d="M19.2259 46.318C22.4852 48.1998 26.2128 49.1154 29.9731 48.9578C33.7334 48.8002 37.3712 47.5759 40.4617 45.428" stroke="#5EA12D" stroke-width="3" stroke-linecap="round"/>
<path opacity="0.1" d="M19.2259 46.318C23.5946 48.8403 28.7602 49.6031 33.6715 48.4512" stroke="#5EA12D" stroke-width="3" stroke-linecap="round"/>
<path opacity="0.3" d="M19.2259 46.318C21.3907 47.5679 23.7723 48.3973 26.2452 48.7624" stroke="#5EA12D" stroke-width="3" stroke-linecap="round"/>
<path d="M19.9759 45.019C20.0091 45.0382 20.0424 45.0573 20.0758 45.0763" stroke="#5EA12D" stroke-width="6" stroke-linecap="round"/>
</g>
<defs>
<clipPath id="clip0_17984_112152">
<rect width="42.6667" height="42.6667" fill="white" transform="translate(7.80859 7.8125)"/>
</clipPath>
<clipPath id="clip1_17984_112152">
<rect width="42.6667" height="42.6667" fill="white" transform="translate(21.333 58.2891) rotate(-120)"/>
</clipPath>
<clipPath id="clip2_17984_112152">
<rect width="42.6667" height="42.6667" fill="white" transform="translate(58.2842 21.3359) rotate(120)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

14
images/family.svg Normal file
View File

@ -0,0 +1,14 @@
<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"/>
<g clip-path="url(#clip0_17853_112468)">
<path d="M26.7274 30.4471C26.2716 29.1713 25.2672 28.0439 23.8701 27.2399C22.4729 26.4358 20.7611 26 19 26C17.2389 26 15.5271 26.4358 14.1299 27.2399C12.7328 28.0439 11.7284 29.1713 11.2726 30.4471" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
<path d="M31.9224 28.56C32.1082 29.0801 32.6805 29.3511 33.2006 29.1652C33.7207 28.9794 33.9916 28.4072 33.8058 27.8871L32.8641 28.2235L31.9224 28.56ZM32.8641 28.2235L33.8058 27.8871C33.4834 26.9846 32.7978 26.2502 31.9343 25.7532L31.4355 26.6199L30.9367 27.4867C31.4703 27.7938 31.7891 28.1867 31.9224 28.56L32.8641 28.2235ZM31.4355 26.6199L31.9343 25.7532C31.0701 25.2559 30.0394 25 29.0004 25L29.0004 26L29.0004 27C29.7226 27 30.4036 27.1799 30.9367 27.4867L31.4355 26.6199ZM29.0004 26L29.0004 25C27.9615 25 26.9307 25.2559 26.0666 25.7532L26.5654 26.6199L27.0642 27.4867C27.5972 27.1799 28.2783 27 29.0004 27L29.0004 26ZM26.5654 26.6199L26.0666 25.7532C25.203 26.2502 24.5174 26.9846 24.195 27.8871L25.1367 28.2235L26.0784 28.56C26.2118 28.1867 26.5306 27.7938 27.0642 27.4867L26.5654 26.6199Z" fill="#5EA12D"/>
<ellipse cx="19" cy="18" rx="4" ry="4" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
<circle cx="28.5" cy="20.5" r="2.5" stroke="#5EA12D" stroke-width="2" stroke-linecap="round"/>
</g>
<defs>
<clipPath id="clip0_17853_112468">
<rect width="24" height="24" fill="white" transform="translate(10 10)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
images/preferences.svg Normal file
View File

@ -0,0 +1,4 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 640 B

503
src/auto_cart.html
View File

@ -4,30 +4,117 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Автокорзина</title>
<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>
<style nonce="**MY_PRETTY_CSP_NONCE**">
@font-face {
font-family: 'FallbackFont';
src: local('Helvetica');
size-adjust: 98.5%;
}
/* Базовые сбросы */
* { 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; }
* { 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;
display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; min-height: 100vh;
}
.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;
}
/* --- Колонки --- */
.column { padding: 30px; flex: 1; width: 50%; overflow-y: auto;}
.column { padding: 40px; 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; }
.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 {
content: 'Собираем...';
display: block;
position: absolute;
top: 0; bottom: 0; left: 0; right: 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; }
.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;
}
@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;}
.summary-days { color: #6ba531; }
.summary-details { font-size: 14px; color: #8b8b8b; margin-top: 4px; }
.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;}
.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 { flex: 1; overflow-y: auto; overflow-x: hidden; padding-right: 4px; margin-bottom: 10px; position: relative; transition: max-height 0.3s ease;
display: flex;}
.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; }
@ -36,7 +123,10 @@
.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; }
#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; }
/* Лоадер при замене */
.cart-item.replacing .item-image::after {
@ -51,99 +141,182 @@
@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; }
.item-name { font-size: 15px; color: #0C3B2E; margin-bottom: 4px; }
.item-price { font-size: 14px; color: #A3ADA2; }
/* Меню (Три точки) */
.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-btn:hover { background: #f3f4f6; color: #0C3B2E; }
.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 { padding: 10px 16px; font-size: 14px; color: #0C3B2E; 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 svg { 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-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; }
.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; }
.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 */
}
/* --- Правая колонка (Аккордеон) --- */
#filter-title {margin-bottom: 40px;}
h2 {font-size: 20px; line-height: 24px; margin-bottom: 8px;color: #0C3B2E;}
.settings-panel { border: 1px solid #ebebeb; border-radius: 16px;}
.accordion-item { border-bottom: 1px solid #ebebeb; }
.accordion-item { border-bottom: 1px solid #ebebeb;position: relative;}
.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; }
.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; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 24px; }
.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; }
.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 { 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; }
.day-btn:hover { border-color: #6ba531; }
.day-btn.active { background: #e9f6d9; border-color: #e9f6d9; font-weight: 500; }
.day-btn.active { background: #E6F696; border-color: #5EA12D; }
/* Семья (Кто будет есть?) */
.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 .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%;}
.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 .info .name { font-size: 16px; font-weight: 600; color: #0C3B2E; }
.family-member .info .age { font-size: 14px; color: #A3ADA2; }
.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; }
.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;}
.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; }
.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;}
.categories-wrapper { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle-categories-btn, .category-btn {
height: 32px;
}
.category-btn {
padding: 8px 16px;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: 0.2s;
transition: background-color 1.2s;
}
.category-btn:focus {
outline: none;
background-color: #9FC6A4;
box-shadow: 0 4px 10px rgba(12, 59, 46, 0.1);
}
.category-btn.active {
background-color: #134233; /* Темно-зеленый как на скриншоте */
color: #ffffff;
background-color: #0C3B2E; /* Темно-зеленый как на скриншоте */
color: #F1FAF0;
}
.category-btn.inactive {
background-color: #f2f9ef; /* Светло-зеленый */
color: #1c1c1c;
background-color: #F1FAF0; /* Светло-зеленый */
color: #0C3B2E;
}
.category-btn.inactive:hover {
background-color: #e4f0de;
}
.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;
}
.toggle-categories-btn {
width: 38px;
height: 38px;
height: 32px;
min-width: 32px;
display: flex;
align-items: center;
justify-content: center;
@ -154,31 +327,36 @@
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 svg { width: 18px; height: 18px; stroke: #0C3B2E; 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 input { width: 100%; padding: 12px 36px 12px 16px; border: 1px solid #e1e1e1; border-radius: 8px; font-size: 14px; color: #0C3B2E; 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 h2 { font-size: 20px; font-weight: 600; color: #0C3B2E; }
.modal-header .close-modal { font-size: 24px; color: #b0b0b0; cursor: pointer; line-height: 1; }
.modal-header .close-modal:hover { color: #1c1c1c; }
.modal-header .close-modal:hover { color: #0C3B2E; }
.categories-grid {gap: 4px;display: flex;flex-wrap: wrap;}
.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;}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; color: #1c1c1c; margin-bottom: 6px; }
.form-group label { display: block; font-size: 14px; color: #0C3B2E; 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; }
.hint { display: block; font-size: 12px; color: #A3ADA2; 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; }
@ -187,7 +365,7 @@
/* Внутренние стили для модального окна (Запрещенные / Любимые) */
.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-col-title { display: block; font-size: 14px; font-weight: 600; color: #0C3B2E; 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; }
@ -220,9 +398,9 @@
transform: translateX(-50%) translateY(20px);
background: #ffffff;
border-radius: 20px;
border: 1px solid #e9edf0;
border: 2px solid #E7EDE7;
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.02);
padding: 15px 24px;
padding: 16px 32px;
display: flex;
align-items: center;
gap: 20px;
@ -253,15 +431,15 @@
/* Иконка печенья */
.cookie-icon-wrapper {
flex-shrink: 0;
width: 64px;
height: 64px;
width: 48px;
height: 48px;
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);
box-shadow: inset 0 4px 10px 0 rgba(12, 59, 46, 0.1);
overflow: hidden;
}
@ -275,9 +453,9 @@
.cookie-text {
margin: 0;
flex-grow: 1;
color: #1c3a2e; /* Темный зелено-серый цвет текста */
font-size: 15px;
line-height: 1.5;
color: #0C3B2E; /* Темный зелено-серый цвет текста */
font-size: 14px;
line-height: 20px;
letter-spacing: 0.01em;
}
@ -309,6 +487,120 @@
transform: scale(0.96);
}
/* 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;
}
/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
#cookie-popup {
@ -346,19 +638,29 @@
<div class="container">
<!-- Левая колонка -->
<div class="column col-left" id="app">
<div id="title-block">
<h1>Автокорзина</h1>
<p class="subtitle">Собираем продукты под ваши настройки</p>
</div>
<div class="cart-summary">
<div>
<div class="summary-title">Ваша корзина на <span class="summary-days"> - </span></div>
<div class="summary-details" id="summary-details">84 товара &bull; 12 020 ₽</div>
<div class="relative">
<div><div class="loader hidden" id="summary-loader">Собираем...</div></div>
<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>
</div>
<button class="reorder-btn">Начать заново</button>
</div>
<div class="cart-scroll-wrapper" id="scroll-wrapper">
<ul class="cart-items" id="cart-list"></ul>
<img src="/images/empty-cart-loader.svg" alt="сбор корзины" id="empty-cart-loader">
</div>
<div class="show-more" id="show-more-btn">
@ -369,7 +671,15 @@
<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 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>
<div>
<span class="total-label">Итого</span>
<div id="total-price"> - </div>
@ -382,49 +692,57 @@
<!-- Правая колонка -->
<div class="column">
<h1>Настройте корзину под себя</h1>
<div id="filter-title">
<h2>Настройте корзину под себя</h2>
<p class="subtitle">Чем больше вы расскажете, тем точнее будет подбор</p>
</div>
<div class="settings-panel" id="settings-panel">
<div class="accordion-item open">
<div class="accordion-item">
<div class="accordion-header">
<div class="header-left">
<div class="icon-circle bg-green-light">📅</div>
<div class="icon-circle bg-green-light"><img src="/images/calendar.svg" alt="календарь" /></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>
<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>
</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>
<button class="day-btn active" data-days="7">7</button>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item open">
<div class="accordion-header">
<div class="header-left">
<div class="icon-circle bg-green-light">👤</div>
<div class="icon-circle bg-green-light"><img src="/images/family.svg" alt="семья" /></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>
<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>
</div>
</div>
<div class="accordion-content">
<div class="family-list" id="family-list">
<!-- Семья рендерится через JS -->
</div>
<div class="add-member-btn" id="addMemberBtn">
<div class="add-member-btn-wrapper">
<button class="add-member-btn" id="addMemberBtn">
Добавить человека <span>+</span>
</button>
</div>
</div>
</div>
@ -433,23 +751,31 @@
<div class="accordion-item" id="prefs-accordion">
<div class="accordion-header">
<div class="header-left">
<div class="icon-circle bg-gray-light">❤️</div>
<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>
<div>
<div class="header-title">Предпочтения</div>
<div class="setting-desc" id="prefs-desc">Категории продуктов</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>
<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>
</div>
</div>
<div class="accordion-content">
<div class="category-selector-block">
<div class="category-header">
<h3>Что добавить в корзину?</h3>
<p>Выберите группы продуктов, которые хотите видеть в корзине</p>
</div>
<div class="categories-wrapper">
<div class="categories-grid" id="categories-grid"></div>
<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>
@ -460,6 +786,7 @@
</div>
</div>
</div>
</div>
<!-- Модальное окно добавления/редактирования человека с НОВЫМИ ПОЛЯМИ -->
<div class="modal-overlay" id="personModal">
@ -518,10 +845,25 @@
</div>
</div>
</div>
<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>
<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">
<img src="/images/cookie.png" alt="Cookie icon">
</div>
<p class="cookie-text">
@ -531,6 +873,7 @@
<button id="cookie-accept">Хорошо</button>
</div>
<!--<button class="reorder-btn">Начать заново</button>-->
<script nonce="**MY_PRETTY_CSP_NONCE**" src="autocart.js"></script>
</body>
</html>

1858
src/autocart.js
View File

File diff suppressed because it is too large Load Diff