You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
template-for-verstka/return.html

418 lines
26 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/font/stylesheet.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="cont">
<div class="header_block">
<a href="#" class="header_logo">
<img src="assets/img/icons/logo.svg" alt="">
</a>
<div class="header_navs">
<a href="#" class="header_nav">Главная</a>
<a href="#" class="header_nav">продукция</a>
<a href="#" class="header_nav">О cosmopet</a>
<a href="#" class="header_nav">Блог</a>
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a>
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a>
</div>
<button class="header_bars"><img src="assets/img/icons/bars2.svg" alt=""></button>
</div>
</div>
<div class="header_mob">
<button class="header_close"><img src="assets/img/icons/i-close.svg" alt=""></button>
<div class="header_navs">
<a href="#" class="header_nav">Главная</a>
<a href="#" class="header_nav">продукция</a>
<a href="#" class="header_nav">О cosmopet</a>
<a href="#" class="header_nav">Блог</a>
<div class="header_links">
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a>
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a>
</div>
</div>
</div>
<div class="header_mob-bg"></div>
</header>
<section class="return">
<form class="cont">
<a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none">
<path d="M9 1L2 7.5L9 14" stroke="#121212" stroke-width="2"/>
</svg>
вернуться
</a>
<div class="section_top">
<h1 class="section_title d-flex align-items-center justify-content-between">
Возврат
<a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg>
</a>
</h1>
<p class="delivered_date">Заказ №Ru7485-2347 от dd.mm.yy</p>
</div>
<div class="data_block data_block_table data_block_table3">
<div class="data_block_top">
<div class="data_block_title">позиция</div>
<div class="data_block_title">Кол-во</div>
<div class="data_block_title">цена</div>
</div>
<div class="data_block_body">
<div class="order_item">
<div class="product_image">
<label>
<div class="checkmark"></div>
<input type="checkbox" name="radio1">
</label>
<img src="assets/img/product1.png" alt="">
<div class="product_title">cosmodog индейка 2 кг</div>
</div>
<div class="order_item_text counter">1 шт</div>
<div class="order_item_text price">2000 ₽</div>
</div>
<div class="order_item">
<div class="product_image">
<label>
<div class="checkmark"></div>
<input type="checkbox" name="radio1">
</label>
<img src="assets/img/product1.png" alt="">
<div class="product_title">cosmodog индейка 2 кг</div>
</div>
<div class="counter">
<span class="minus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g opacity="0.3">
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
<input type="number" value="1" min="1" max="100">
<span class="plus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g opacity="0.3">
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
шт
</div>
<div class="order_item_text price">1600 ₽</div>
</div>
</div>
</div>
<div class="pets_form_actions d-flex justify-content-between">
<a href="#" class="main_btn btn_return_modal1">Указать причину возврата</a>
<button class="main_btn" disabled id="return_button">Оформить</button>
</div>
</form>
</section>
<footer class="footer footer2">
<div class="cont">
<div class="footer_block">
<div class="footer_menu">
<a href="#" class="footer_logo"><img src="assets/img/icons/logo2.svg" alt=""></a>
<div class="footer_navs">
<a href="#" class="footer_nav">Главная</a>
<a href="#" class="footer_nav">продукция</a>
<a href="#" class="footer_nav">О cosmopet</a>
<a href="#" class="footer_nav">Блог</a>
<a href="#" class="footer_link"><img src="assets/img/icons/i-user2.svg" alt=""></a>
<a href="#" class="footer_link"><img src="assets/img/icons/i-card2.svg" alt=""></a>
</div>
</div>
<div class="footer_box">
<h2 class="footer_box-title">Отзывы и предложения <img src="assets/img/icons/footer_line-mob.svg" alt="" class="footer_line-mob1"></h2>
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line1">
<a href="#" class="footer_box-link">pro@cosmopet.shop</a>
</div>
<div class="footer_box">
<h2 class="footer_box-title">связь с ветеринаром <img src="assets/img/icons/footer_line-mob2.svg" alt="" class="footer_line-mob2"></h2>
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line2">
<a href="#" class="footer_box-link">vetvopros@cosmopet.shop</a>
</div>
<div class="footer_form">
<div class="footer_form-info">
<div class="footer_form-title">
<h2>Обратная связь</h2>
<img src="assets/img/icons/footer_line2.svg" alt="">
</div>
<div class="footer_form-inp">
<input type="text" placeholder="ваше имя">
<input type="email" placeholder="почта">
</div>
</div>
<div class="footer_form-textarea">
<textarea placeholder="обращение"></textarea>
<button class="footer_form-btn btn--black-hover">отправить</button>
</div>
</div>
<div class="footer_social">
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-vk2.svg" alt=""></a>
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg2.svg" alt=""></a>
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex2.svg" alt=""></a>
</div>
<div class="footer_bottom">
<a href="#">123182 г. Москва, 4-й Красногорский пр., д. 2/4, стр. 1, этаж/ком. 3/1</a>
<a href="#">Соглашение о конфиденциальности</a>
</div>
</div>
</div>
</footer>
<div class="modal modal_big return_modal1">
<span class="plus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g opacity="0.3">
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
<div class="modal_title">Завка на возврат заказаоформлена, спасибо за обращение</div>
<img src="assets/img/animal_image2.png" alt="" class="return_modal_image">
</div>
<div class="modal modal_big return_modal2">
<div class="modal_content">
<span class="plus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g opacity="0.3">
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
<div class="products">
<div class="product_item">
<img src="assets/img/product1.png" alt="">
<div class="product_title">COSMODOG индейка 2 кг</div>
</div>
<div class="product_item deactive">
<img src="assets/img/product1.png" alt="">
<div class="product_title">COSMODOG индейка 2 кг</div>
</div>
<div class="product_item deactive">
<img src="assets/img/product1.png" alt="">
<div class="product_title">COSMODOG индейка 2 кг</div>
</div>
</div>
<div class="modal_title">Укажите причину возврата</div>
<form method="post">
<div class="checkbox_card">
<div class="input_wrap">
<label>
<div class="checkmark"></div>
<input type="checkbox">
<p>Товар не подошёл</p>
</label>
</div>
<div class="input_wrap">
<label>
<div class="checkmark"></div>
<input type="checkbox">
<p>Проблемы с товаром</p>
</label>
</div>
</div>
<div class="modal_title">Комментарий</div>
<textarea></textarea>
<div class="modal_title">Фото доказательства</div>
<p class="caption_text">В формате PNG, JPEG</p>
<div class="remined_text d-flex align-items-start">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 29C22.5081 29 29 22.5081 29 14.5C29 6.49187 22.5081 0 14.5 0C6.49187 0 0 6.49187 0 14.5C0 22.5081 6.49187 29 14.5 29ZM15.1 7C11.7 7 10 9 10 13H11.66C11.66 11.4 11.94 10.28 12.5 9.64C13.0733 9 13.94 8.68 15.1 8.68C16.0733 8.68 16.8133 8.9 17.32 9.34C17.84 9.76667 18.1 10.3067 18.1 10.96C18.1 11.3867 18.0333 11.7533 17.9 12.06C17.78 12.3533 17.5733 12.64 17.28 12.92C17 13.2 16.58 13.5533 16.02 13.98C15.1667 14.62 14.5467 15.3133 14.16 16.06C13.7867 16.7933 13.5933 17.6133 13.58 18.52H15.14C15.1533 17.72 15.3267 17.0467 15.66 16.5C15.9933 15.9533 16.4533 15.4533 17.04 15C18.08 14.1867 18.8 13.4867 19.2 12.9C19.6 12.3133 19.8 11.6 19.8 10.76C19.8 10.0933 19.6 9.47333 19.2 8.9C18.8133 8.32667 18.26 7.86667 17.54 7.52C16.82 7.17333 16.0067 7 15.1 7ZM13.34 22.6C13.62 22.8667 13.96 23 14.36 23C14.7467 23 15.0733 22.8667 15.34 22.6C15.6067 22.32 15.74 21.98 15.74 21.58C15.74 21.1933 15.6067 20.8667 15.34 20.6C15.0733 20.32 14.7467 20.18 14.36 20.18C13.96 20.18 13.62 20.32 13.34 20.6C13.0733 20.8667 12.94 21.1933 12.94 21.58C12.94 21.98 13.0733 22.32 13.34 22.6Z" fill="#F4F1F0"/>
</svg>
Чтобы заявку одобрили, добавьте все требуемые фото. На них должно быть видно, что товар не использовался и сохранил свой товарный вид
</div>
<label class="photo_image">
<img src="assets/img/empty.png" alt="empty">
<input type="file" accept="image/png, image/jpeg" required>
<div>
<div class="image_title">Товар</div>
<p>Обязательно</p>
</div>
</label>
<label class="photo_image">
<img src="assets/img/empty.png" alt="empty">
<input type="file" accept="image/png, image/jpeg" required>
<div>
<div class="image_title">Коробка/пакет</div>
<p>Обязательно</p>
</div>
</label>
<button class="main_btn"><span class="desctop_none">Оформить</span><span class="mobile_none">Подтвердить</span></button>
</form>
</div>
</div>
<div class="modal auth_modal auth1">
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
<div class="d-flex flex-column align-items-center gap-15">
<a href="#" class="main_btn login_btn">Вход</a>
<a href="#" class="main_btn register_btn">Регистрация</a>
</div>
</div>
<form class="modal auth_modal auth2">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Регистрация</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="text" class="input" placeholder="Имя">
<p>error</p>
</label>
<label>
<input type="tel" class="input" placeholder="Телефон">
<p>error</p>
</label>
<label>
<input type="email" class="input" placeholder="Email">
<p>error</p>
</label>
<label>
<input type="password" class="input error" placeholder="Пароль">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<label>
<div class="checkmark"></div>
<input type="checkbox">
<p class="opacity_txt">Согласие на получение рекламных предложений</p>
</label>
<button class="main_btn">Регистрация</button>
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p>
</div>
</form>
<form class="modal auth_modal auth3">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Регистрация</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="password" class="input" placeholder="Код">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p>
<button class="main_btn">Регистрация</button>
</div>
</form>
<form class="modal auth_modal auth4">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Вход</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="text" class="input" placeholder="Телефон или Email">
<p>error</p>
</label>
<label>
<input type="password" class="input" placeholder="Код">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<a href="#" class="conditions">Забыли пароль? </a>
<button class="main_btn">Вход</button>
</div>
</form>
<form class="modal auth_modal auth5">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Вход</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="password" class="input" placeholder="Код">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p>
<button class="main_btn">Вход</button>
</div>
</form>
<div class="modal_back"></div>
</div>
<script src="assets/js/main.js"></script>
</body>
</html>