1 line
18 KiB
HTML
1 line
18 KiB
HTML
<!doctype html><html lang=ru><meta charset=UTF-8><meta content="width=device-width,initial-scale=1.0" name=viewport><title>Автокорзина</title><style>*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}body{background-color:#f5f7f8;justify-content:center;align-items:flex-start;min-height:100vh;padding:40px 20px;display:flex}.container{background:#fff;border-radius:24px;width:100%;max-width:1200px;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 4px 20px #0000000a}.column{flex:1;width:50%;padding:30px;overflow-y:auto}.column+.column{border-left:1px solid #f0f0f0}.col-left{flex-direction:column;height:auto;min-height:550px;display:flex}h1{color:#1c1c1c;margin-bottom:6px;font-size:24px;font-weight:700}.subtitle{color:#8b8b8b;flex-shrink:0;margin-bottom:28px;font-size:14px}.cart-summary{flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.summary-title{color:#1c1c1c;font-size:18px;font-weight:600}.summary-days{color:#6ba531}.summary-details{color:#8b8b8b;margin-top:4px;font-size:14px}.reorder-btn{color:#6ba531;cursor:pointer;background:0 0;border:1px solid #6ba531;border-radius:8px;flex-shrink:0;padding:8px 16px;font-size:14px;transition:all .2s}.reorder-btn:hover{color:#fff;background:#6ba531}.cart-scroll-wrapper{flex:1;margin-bottom:10px;padding-right:4px;transition:max-height .3s;position:relative;overflow:hidden auto}.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{border-bottom:1px solid #f0f0f0;align-items:center;padding:16px 0;transition:opacity .4s,transform .4s;display:flex;position:relative}.cart-item.replacing{opacity:.5;pointer-events:none}.item-image{background-color:#f8f9fa;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:72px;height:65px;margin-right:16px;font-size:28px;display:flex;position:relative;overflow:hidden}.cart-item.replacing .item-image:after{content:"";border:3px solid #e1e1e1;border-top-color:#6ba531;border-radius:50%;width:30px;height:30px;animation:.8s linear infinite spin;position:absolute}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.item-details{flex:1}.item-name{color:#1c1c1c;margin-bottom:4px;font-size:15px}.item-price{color:#8b8b8b;font-size:14px}.menu-btn-wrapper{position:relative}.menu-btn{color:#b0b0b0;cursor:pointer;letter-spacing:2px;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:20px;transition:all .2s}.menu-btn:hover{color:#1c1c1c;background:#f3f4f6}.menu-dropdown{z-index:10;background:#fff;border:1px solid #eee;border-radius:8px;min-width:150px;margin-top:4px;padding:6px 0;display:none;position:absolute;top:100%;right:0;box-shadow:0 4px 12px #00000014}.menu-dropdown.active{display:block}.menu-dropdown ul{list-style:none}.menu-dropdown li{color:#1c1c1c;cursor:pointer;padding:10px 16px;font-size:14px;transition:all .2s}.menu-dropdown li:hover{background:#f3f4f6}.show-more{color:#6ba531;cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:20px 0 10px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.show-more:hover{opacity:.8}.show-more svg{stroke:#6ba531;width:14px;height:14px;margin-left:6px}.show-more.hidden{display:none}.cart-footer{border-top:1px solid #f0f0f0;flex-shrink:0;justify-content:space-between;align-items:center;padding-top:20px;display:flex}.total-wrap{flex-direction:column;align-items:flex-start;display:flex}.total-label{color:#8b8b8b;font-size:14px}#total-price{color:#1c1c1c;font-size:22px;font-weight:700}.checkout-btn{color:#fff;cursor:pointer;background-color:#6ba531;border:none;border-radius:12px;padding:14px 32px;font-size:16px;font-weight:600;transition:background .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{cursor:pointer;user-select:none;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.header-left{align-items:center;display:flex}.icon-circle{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;margin-right:12px;font-size:16px;display:flex}.bg-green-light{color:#6ba531;background-color:#e9f6d9}.bg-gray-light{color:#8b8b8b;background-color:#f3f4f6}.header-title{color:#1c1c1c;font-size:15px;font-weight:500}.setting-desc{color:#8b8b8b;margin-top:2px;font-size:14px}.arrow-icon{color:#8b8b8b;transition:transform .3s}.arrow-icon svg{stroke:#8b8b8b;stroke-width:2px;width:16px;height:16px}.accordion-content{max-height:0;padding:0 24px;transition:max-height .4s,padding .3s;overflow:hidden}.accordion-item.open .accordion-content{max-height:500px;padding:0 24px 20px}.accordion-item.open .arrow-icon{transform:rotate(180deg)}.days-options{gap:12px;display:flex}.day-btn{color:#1c1c1c;cursor:pointer;background:#fff;border:1px solid #e1e1e1;border-radius:8px;flex:1;padding:10px 0;font-size:14px;transition:all .2s}.day-btn:hover{border-color:#6ba531}.day-btn.active{background:#e9f6d9;border-color:#e9f6d9;font-weight:500}.family-list{flex-direction:column;gap:12px;display:flex}.family-member{cursor:pointer;background:#fff;border:1px solid #ebebeb;border-radius:12px;align-items:center;padding:12px 16px;transition:all .2s;display:flex}.family-member:hover{border-color:silver;box-shadow:0 2px 8px #00000005}.family-member .avatar{background:#f8f9fa;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;margin-right:14px;font-size:24px;display:flex}.family-member .info{pointer-events:none;flex-direction:column;flex:1;display:flex}.family-member .info .name{color:#1c1c1c;font-size:16px;font-weight:600}.family-member .info .age{color:#8b8b8b;font-size:14px}.family-member .delete-member{color:#d1d5db;cursor:pointer;padding:0 8px;font-size:18px;transition:all .2s}.family-member .delete-member:hover{color:#e53935}.add-member-btn{color:#6ba531;cursor:pointer;justify-content:center;align-items:center;margin-top:16px;font-size:15px;font-weight:500;transition:all .2s;display:flex}.add-member-btn:hover{opacity:.8}.add-member-btn span{margin-left:8px;font-size:20px;font-weight:300}.category-selector-block .category-header h3{color:#1c1c1c;margin-bottom:4px;font-size:16px}.category-selector-block .category-header p{color:#8b8b8b;margin-bottom:16px;font-size:14px}.categories-wrapper{flex-wrap:wrap;gap:8px;display:flex}.category-btn{cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:14px;transition:all .2s}.category-btn.active{color:#fff;background-color:#134233}.category-btn.inactive{color:#1c1c1c;background-color:#f2f9ef}.category-btn.inactive:hover{background-color:#e4f0de}.toggle-categories-btn{cursor:pointer;background-color:#f2f9ef;border:none;border-radius:8px;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s;display:flex}.toggle-categories-btn:hover{background-color:#e4f0de}.toggle-categories-btn svg{stroke:#1c1c1c;width:18px;height:18px;transition:transform .3s}.toggle-categories-btn.collapsed svg{transform:rotate(180deg)}.address-input-wrap{position:relative}.address-input-wrap input{color:#1c1c1c;background:#fafafa;border:1px solid #e1e1e1;border-radius:8px;outline:none;width:100%;padding:12px 36px 12px 16px;font-size:14px}.address-input-wrap .clear-input{color:#b0b0b0;cursor:pointer;font-size:18px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.modal-overlay{backdrop-filter:blur(2px);z-index:1000;background:#0006;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.modal-content{background:#fff;border-radius:24px;width:100%;max-width:440px;max-height:95vh;padding:24px;overflow-y:auto;box-shadow:0 8px 30px #0003}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-header h2{color:#1c1c1c;font-size:20px;font-weight:600}.modal-header .close-modal{color:#b0b0b0;cursor:pointer;font-size:24px;line-height:1}.modal-header .close-modal:hover{color:#1c1c1c}.categories-grid{flex-wrap:wrap;gap:4px;display:flex}.form-group{margin-bottom:16px}.form-group label{color:#1c1c1c;margin-bottom:6px;font-size:14px;display:block}.form-group input{border:1px solid #e1e1e1;border-radius:8px;outline:none;width:100%;padding:10px 12px;font-size:14px;transition:all .2s}.form-group input:focus{border-color:#6ba531}.form-row{gap:16px;margin-bottom:16px;display:flex}.form-row .form-group{flex:1;margin-bottom:0}.hint{color:#8b8b8b;margin-top:4px;font-size:12px;display:block}.gender-toggles{gap:8px;margin-bottom:16px;display:flex}.gender-btn{cursor:pointer;background:#fff;border:1px solid #e1e1e1;border-radius:8px;flex:1;padding:10px;font-size:14px;transition:all .2s}.gender-btn.active{background:#e9f6d9;border-color:#e9f6d9;font-weight:500}.modal-prefs-grid{border-top:1px solid #f0f0f0;gap:16px;margin-bottom:20px;padding-top:16px;display:flex}.modal-prefs-grid .pref-col{flex:1;position:relative}.modal-prefs-grid .pref-col-title{color:#1c1c1c;margin-bottom:6px;font-size:14px;font-weight:600;display:block}.modal-prefs-grid .pref-input{border:1px solid #e1e1e1;border-radius:8px;outline:none;width:100%;margin-bottom:6px;padding:8px 10px;font-size:14px}.modal-prefs-grid .pref-input:focus{border-color:#6ba531}.modal-prefs-grid .autocomplete-list{z-index:20;background:#fff;border:1px solid #e1e1e1;border-radius:8px;width:100%;max-height:120px;display:none;position:absolute;top:65px;left:0;overflow-y:auto;box-shadow:0 4px 12px #0000000f}.modal-prefs-grid .autocomplete-list.active{display:block}.modal-prefs-grid .autocomplete-list div{cursor:pointer;padding:8px 12px;font-size:14px;transition:all .2s}.modal-prefs-grid .autocomplete-list div:hover{background:#f3f4f6}.modal-prefs-grid .tags-wrap{flex-wrap:wrap;gap:6px;display:flex}.modal-prefs-grid .tag{border-radius:6px;align-items:center;padding:4px 10px;font-size:13px;display:inline-flex}.modal-prefs-grid .tag-red{color:#c62828;background-color:#fce4ec}.modal-prefs-grid .tag-green{color:#33691e;background-color:#f0f4c3}.modal-prefs-grid .tag-close{cursor:pointer;opacity:.6;margin-left:6px;font-size:15px}.modal-prefs-grid .tag-close:hover{opacity:1}.save-btn{color:#fff;cursor:pointer;background:#6ba531;border:none;border-radius:12px;width:100%;padding:12px;font-size:16px;font-weight:600;transition:all .2s}.save-btn:hover{background:#5b8f29}@media (width<=900px){.container{flex-direction:column}.column{width:100%;padding:20px}.column+.column{border-top:1px solid #f0f0f0;border-left:none}.form-row,.modal-prefs-grid{flex-direction:column;gap:16px}.col-left{min-height:400px}}#cookie-popup{z-index:9999;opacity:0;visibility:hidden;background:#fff;border:1px solid #e9edf0;border-radius:20px;align-items:center;gap:20px;width:95%;max-width:780px;padding:15px 24px;transition:all .4s cubic-bezier(.25,.46,.45,.94);display:flex;position:fixed;bottom:25px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 8px 30px #0000000d,0 4px 10px #00000005}#cookie-popup.show{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}#cookie-popup.hide{opacity:0;visibility:hidden;transform:translate(-50%)translateY(30px)}.cookie-icon-wrapper{background:#fff;border:1px solid #edf2f7;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;display:flex;overflow:hidden;box-shadow:inset 0 0 0 1px #fff,0 2px 4px #00000008}.cookie-icon-wrapper img{object-fit:contain;width:85%;height:85%}.cookie-text{color:#1c3a2e;letter-spacing:.01em;flex-grow:1;margin:0;font-size:15px;line-height:1.5}.cookie-text .highlight{color:#69a342;font-weight:600}#cookie-accept{color:#1c3a2e;cursor:pointer;white-space:nowrap;background-color:#d6e6d4;border:none;border-radius:10px;flex-shrink:0;padding:10px 24px;font-size:15px;font-weight:600;transition:background-color .2s,transform .1s}#cookie-accept:hover{background-color:#c2d6c0}#cookie-accept:active{transform:scale(.96)}@media (width<=600px){#cookie-popup{text-align:center;border-radius:16px;flex-wrap:wrap;justify-content:center;gap:12px;padding:20px;bottom:15px}.cookie-icon-wrapper{width:50px;height:50px}.cookie-text{order:2;width:100%;font-size:14px}#cookie-accept{order:3;justify-content:center;width:100%;padding:12px}}</style><body><div class=container><div class="column col-left" id=app><h1>Автокорзина</h1><p class=subtitle>Собираем продукты под ваши настройки<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-linecap=round stroke-linejoin=round stroke-width=2><polyline points="6 9 12 15 18 9"></polyline></svg></div><div class=cart-footer><div class=total-wrap><div style=align-items:center;display:flex><div class="icon-circle bg-green-light" style=width:40px;height:40px;margin-right:12px;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>Чем больше вы расскажете, тем точнее будет подбор<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-linecap=round stroke-linejoin=round stroke-width=2><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-linecap=round stroke-linejoin=round stroke-width=2><polyline points="6 9 12 15 18 9"></polyline></svg></div></div><div class=accordion-content><div class=family-list id=family-list></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-linecap=round stroke-linejoin=round stroke-width=2><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>Выберите группы продуктов, которые хотите видеть в корзине</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-linecap=round stroke-linejoin=round stroke-width=2><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 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 id=inputAge type=number value=30><span class=hint>от 7 лет</span></div><div class=form-group><label>Вес</label><input id=inputWeight type=number value=87></div><div class=form-group><label>Рост</label><input id=inputHeight type=number value=177></div></div><div class=modal-prefs-grid><div class=pref-col><span class=pref-col-title>Запрещённые</span><input placeholder="Например: лук" class=pref-input 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 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><img alt="Cookie icon" src=https://cdn-icons-png.flaticon.com/512/642/642573.png></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><script src=autocart.js></script> |