Azimkin/santeh-ray
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: добавить страницы и фрагменты для улучшения структуры шаблонов

Browse Source 
- Добавлены страницы "Услуги", "Доставка", "Гарантия", "Контакты" с view и URL
- Вынесены hero, advantages, и о нас в отдельные фрагменты
- Обновлены header и footer для активных ссылок и адаптивности
- Добавлен normalize.css для унификации стилей
This commit is contained in:
azimkin
2026-03-30 21:52:08 +02:00
parent 1eff7c6227
commit d522489e7f
20 changed files with 1622 additions and 931 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
templates/_fragments/footer.html
View File

@@ -1,31 +1,33 @@
<!-- FOOTER FRAGMENT -->
<footer>
<div class="footer-col">
<div class="footer-logo">SantehRay</div>
</div>
<div class="footer-col">
<h4>ПОКУПАТЕЛЮ</h4>
<ul>
<li><a href="#">Каталог</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Акции</a></li>
<li><a href="#">Новинки</a></li>
</ul>
</div>
<div class="footer-col">
<h4>ПОМОЩЬ</h4>
<ul>
<li><a href="#">Доставка и оплата</a></li>
<li><a href="#">Гарантия и возврат</a></li>
<li>Ответы на вопросы</li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div class="footer-col">
<h4>КОНТАКТЫ</h4>
<ul>
<li><a href="mailto:info@santehray.by">info@santehray.by</a></li>
<li>+375 (29) 688-18-19</li>
</ul>
</div>
</footer>
<div class="container footer-container">
<div class="footer-col">
<div class="footer-logo">SantehRay</div>
</div>
<div class="footer-col">
<h4>ПОКУПАТЕЛЮ</h4>
<ul>
<li><a href="#">Каталог</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Акции</a></li>
<li><a href="#">Новинки</a></li>
</ul>
</div>
<div class="footer-col">
<h4>ПОМОЩЬ</h4>
<ul>
<li><a href="#">Доставка и оплата</a></li>
<li><a href="#">Гарантия и возврат</a></li>
<li>Ответы на вопросы</li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div class="footer-col">
<h4>КОНТАКТЫ</h4>
<ul>
<li><a href="mailto:info@santehray.by">info@santehray.by</a></li>
<li>+375 (29) 688-18-19</li>
</ul>
</div>
</div>
</footer>

120
templates/_fragments/header.html
View File

@@ -1,56 +1,74 @@
<!-- HEADER FRAGMENT -->
<header>
<div class="header-top">
<div class="logo">SantehRay</div>
<div class="search-wrap">
<select>
<option>Все категории</option>
<option>Сантехника</option>
<option>Декор</option>
</select>
<input type="text" placeholder="Кто ищет, тот найдет...">
<button>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
</svg>
</button>
</div>
<div class="header-icons">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</a>
</div>
</div>
<div class="container">
<div class="header-top">
<div class="logo">SantehRay</div>
<form action="">
<div class="search-wrap">
<label>
<select>
<option>Все категории</option>
<option>Сантехника</option>
<option>Декор</option>
</select>
</label>
<label>
<input class="search-input" type="text" placeholder="Кто ищет, тот найдет...">
</label>
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path>
</svg>
</button>
</div>
</form>
<div class="header-icons">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-cart2" viewBox="0 0 16 16">
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-person" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"></path>
</svg>
</a>
</div>
</div>
<nav class="nav-bar">
<a href="#" class="catalog-btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="18" height="18">
<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
</svg>
Каталог
</a>
<div class="nav-links">
<a href="#">Главная</a>
<a href="#">Услуги</a>
<a href="#">Доставка</a>
<a href="#">Гарантия</a>
<a href="#">Контакты</a>
<nav class="nav-bar">
<a href="/catalog/" class="catalog-btn {% if active == 'catalog' %}active-page{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2" width="18" height="18">
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
Каталог
</a>
<div class="nav-links">
<a class="{% if active == 'home' %}active-page{% endif %}" href="/">Главная</a>
<a class="{% if active == 'services' %}active-page{% endif %}" href="/services/">Услуги</a>
<a class="{% if active == 'shipping' %}active-page{% endif %}" href="/shipping/">Доставка</a>
<a class="{% if active == 'warranty' %}active-page{% endif %}" href="/warranty/">Гарантия</a>
<a class="{% if active == 'contacts' %}active-page{% endif %}" href="/contacts/">Контакты</a>
</div>
<a href="tel:+375296881819" class="phone-link">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
class="bi bi-telephone" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"></path>
</svg>
+375 (29) 688-18-19
</a>
</nav>
</div>
<a href="tel:+375296881819" class="phone-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7" width="18" height="18">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.56 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.95.573 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
+375 (29) 688-18-19
</a>
</nav>
</header>

15
templates/_layouts/base.html
View File

@@ -5,13 +5,18 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Santehray - {% block title %}{{ title }}{% endblock %}</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/normalize.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
{% block add_css %}
<!-- Additional CSS -->
{% endblock %}
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
{% block content %}
{% endblock %}
</body>
</html>

57
templates/home/_fragments/about.html Normal file
View File

@@ -0,0 +1,57 @@
{% load static %}
<section class="about-section">
<div class="container">
<h2 class="about-title">О нас</h2>
<div class="about-left">
<div class="about-left-block">
<p class="about-left-subtitle">С 2000 года мы — не просто магазин сантехники, а надёжный партнёр для
тех, кто ценит комфорт,
качество и
спокойствие.</p>
<h3 class="about-left-suggestion">Мы предлагаем:</h3>
<div class="about-left-list">
<div class="about-left-list-item">
<div class="about-left-list-item-number">1</div>
<div class="about-left-list-item-content">
<span class="about-left-list-item-content-title">Сантехническое оборудование</span>
<span class="about-left-list-item-content-desc">Смесители, унитазы, мойки, душевые, умывальники, система фильтрации воды</span>
</div>
</div>
<div class="about-left-list-item">
<div class="about-left-list-item-number">2</div>
<div class="about-left-list-item-content">
<span class="about-left-list-item-content-title">Предметы декора</span>
<div class="about-left-list-item-content-desc">Зеркала, ролл-маты, дозаторы, корзины,
разделочные доски, система
разделения мусора
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-right about-right">
<div class="about-right-block">
<p class="about-right-text">
Мы работаем только с проверенными поставщиками — европейскими и российскими
брендами, чья продукция прошла испытание временем, реальными квартирами и сотнями довольных
клиентов.</p>
<div class="about-right-stats">
<div class="about-right-stats-item">
<p class="about-right-stats-item-num">20+</p>
<p class="about-right-stats-item-label">лет работы</p>
</div>
<div class="about-right-stats-item">
<span class="about-right-stats-item-num">45 000+</span>
<span class="about-right-stats-item-label">довольных покупателей</span>
</div>
<div class="about-right-stats-item">
<span class="about-right-stats-item-num">5600+</span>
<span class="about-right-stats-item-label">товаров</span>
</div>
</div>
</div>
</div>
</div>
</section>

42
templates/home/_fragments/advantages.html Normal file
View File

@@ -0,0 +1,42 @@
<!-- ADVANTAGES -->
<section class="advantages">
<div class="container">
<div class="advantages-list">
<h2 class="advantages-title">ПОЧЕМУ ВЫБИРАЮТ НАС?</h2>
<div class="advantages-item">
<div class="advantages-item-number">1</div>
<h3 class="advantages-item-title">КАЧЕСТВЕННЫЙ ТОВАР</h3>
<p class="advantages-item-subtitle">Работаем с проверенными поставщиками</p>
</div>
<div class="advantages-item">
<div class="advantages-item-number">2</div>
<h3 class="advantages-item-title">ЧЕСТНАЯ ГАРАНТИЯ</h3>
<p class="advantages-item-subtitle">Работаем с проверенными поставщиками</p>
</div>
<div class="advantages-item">
<div class="advantages-item-number">3</div>
<h3 class="advantages-item-title">БЫСТРАЯ ДОСТАВКА</h3>
<p class="advantages-item-subtitle">Огромный выбор сантехники в наличии и доставка со склада</p>
</div>
</div>
<div class="advantages-cards">
<div class="advantages-card advantages-card-left">
<div class="advantages-card-content">
<div class="flex-right">
<div class="advantages-card-splash">Новинки в каталоге</div>
<h2 class="advantages-card-title text-align-right">Сантехническое оборудование</h2>
<a href="/catalog/#santechnics" class="advantages-card-button">Смотреть</a>
</div>
</div>
</div>
<div class="advantages-card advantages-card-right">
<div class="advantages-card-content">
<div class="advantages-card-splash">Большая распродажа</div>
<h2 class="advantages-card-title">Предметы декора</h2>
<a href="/catalog/#santechnics" class="advantages-card-button">Смотреть</a>
</div>
</div>
</div>
</div>
</section>

8
templates/home/_fragments/banner.html Normal file
View File

@@ -0,0 +1,8 @@
<section class="kitchen-banner container">
<div class="kitchen-content">
<p>Успей заказать с большой выгодой и получите доставку в подарок!</p>
<h2>ГОТОВОЕ РЕШЕНИЕ ДЛЯ КУХНИ</h2>
<a href="#" class="active-page">Перейти</a>
</div>
{# <img src="{% static 'img/kitchen-banner.jpg' %}" alt="">#}
</section>

51
templates/home/_fragments/faq.html Normal file
View File

@@ -0,0 +1,51 @@
<section class="faq-section container">
<h2>ОТВЕТЫ НА ВОПРОСЫ</h2>
<div class="faq-grid">
<div class="faq-item">
<div class="faq-icon">?</div>
<div class="faq-body">
<h4>Могу ли я отказаться от заказа при доставке?</h4>
<p>Да, вы можете отказаться приобретать модель. В таком случае, просим уведомить специалиста
магазина о отказе, не нарушать заводскую упаковку товара, чтобы он не утратил товарный вид. Но
вы должны будете оплатить доставку товара, даже в случае отказа.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-icon">?</div>
<div class="faq-body">
<h4>Куда обращаться по гарантии?</h4>
<p>В случае обнаружения недостатка товара при получении либо при его использовании в течении
гарантийного срока, необходимо обратиться с письменной претензией на почту info@santehray.by или
в наш магазин. Далее с вами свяжутся для уточнения подробностей.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-icon">?</div>
<div class="faq-body">
<h4>Можно ли покупать товары в рассрочку?</h4>
<p>Да. У нас есть система кредитования, где вы можете приобрести модель в рассрочку полностью или
частично. Для этого нужно обратиться в наш магазин и узнать подробности.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-icon">?</div>
<div class="faq-body">
<h4>Можно ли где-то лично посмотреть товары?</h4>
<p>У нас есть физический магазин, который находится по адресу: Беларусь, г. Минск, ул. Тимирязева,
д. 123, к.1, пав. 59, там вы сможете ознакомится со всем ассортиментом.</p>
</div>
</div>
</div>
<div class="faq-cta">
<a href="#">
<div>?</div>
ЗАДАТЬ ВОПРОС
</a>
</div>
</section>

25
templates/home/_fragments/hero.html Normal file
View File

@@ -0,0 +1,25 @@
{% load static %}
<!-- HERO -->
<section class="hero">
<div class="container">
<div class="flex-right">
<div class="hero-content">
<h1 class="hero-title">ДОБАВЬТЕ ЭСТЕТИЧНОСТИ<br>В СВОЙ ИНТЕРЬЕР</h1>
<div class="hero-subtitle-container">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor"
class="bi bi-check-circle hero-checkmark" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"></path>
</svg>
<p class="hero-subtitle">Подбор сантехнического оборудования на заказ.
<br>А также огромный выбор инсталляций и декора
<br>в наличии на складах города с быстрой доставкой
</p>
</div>
<div class="hero-button-container">
<a href="/catalog/" class="hero-button">ПЕРЕЙТИ В КАТАЛОГ</a>
</div>
</div>
</div>
</div>
</section>

194
templates/home/_fragments/popular-products.html Normal file
View File

@@ -0,0 +1,194 @@
{% load static %}
<section class="products-section container">
<h2 class="products-title">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
<div class="products-grid">
<article class="product product-1">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15"></path>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-cart2" viewBox="0 0 16 16">
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
</svg>
</button>
</div>
</article>
<article class="product product-2">
</article>
<article class="product product-3">
</article>
<article class="product product-4">
</article>
<article class="product product-5">
</article>
<article class="product product-6">
</article>
</div>
{% comment %}
<!-- Card 1 — tall -->
<div class="product-card tall">
<img class="product-card-img" src="{% static 'img/kitchen-sink.jpg' %}" alt="Кухонная мойка">
<div class="product-info">
<div class="p-name">Кухонная мойка</div>
<div class="p-sub">Искусственный камень, врезная на столешницу</div>
<div class="p-price">1600 руб</div>
</div>
</div>
<!-- Card 2 -->
<div class="product-card">
<img class="product-card-img" src="{% static 'img/chopping-board.jpg' %}" alt="Разделочная доска"
style="aspect-ratio:4/3;">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Разделочная доска</div>
<div class="p-sub">Нержавеющая сталь</div>
<div class="p-price">50 руб</div>
</div>
</div>
<!-- Card 3 — tall -->
<div class="product-card tall">
<img class="product-card-img" src="{% static 'img/terra-mirror.jpg' %}" alt="Зеркало Terra">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Зеркало Terra</div>
<div class="p-sub">Холодная подсветка, фронтальная</div>
<div class="p-price">200 руб</div>
</div>
</div>
<!-- Card 4 -->
<div class="product-card">
<img class="product-card-img" src="{% static 'img/toilet.jpg' %}" alt="Унитаз"
style="aspect-ratio:4/3;">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Унитаз</div>
<div class="p-sub">Напольный с бачком, безободковый</div>
<div class="p-price">1600 руб</div>
</div>
</div>
<!-- Card 5 (коврик) -->
<div class="product-card">
<img class="product-card-img" src="{% static 'img/rubber-mat.jpg' %}" alt="Коврик"
style="aspect-ratio:4/3;">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Коврик для посуды</div>
<div class="p-sub">Мгновенно впитывает воду</div>
<div class="p-price">20 руб</div>
</div>
</div>
<!-- Card 6 (смеситель) -->
<div class="product-card">
<img class="product-card-img" src="{% static 'img/mixer.jpg' %}" alt="Смеситель"
style="aspect-ratio:4/3;">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Смеситель</div>
<div class="p-sub">Однорычажный смеситель</div>
<div class="p-price">340 руб</div>
</div>
</div>
</div>{% endcomment %}
<div class="products-footer">
<a href="#" class="btn-primary">ПЕРЕЙТИ В КАТАЛОГ</a>
</div>
</section>

16
templates/home/contacts.html Normal file
View File

@@ -0,0 +1,16 @@
{% extends "_layouts/base.html" %}
{% load static %}
{% block title %}Главная{% endblock %}
{% block add_css %}
{% endblock %}
{% block content %}
{% include "_fragments/header.html" %}
{# TODO #}
В разработке
{% include "_fragments/footer.html" %}
{% endblock %}

310
templates/home/index.html
View File

@@ -3,309 +3,25 @@
{% block title %}Главная{% endblock %}
{% block add_css %}
<link rel="stylesheet" href="{% static "css/index.css" %}">
{% endblock %}
{% block content %}
<!-- HEADER -->
{% include "_fragments/header.html" %}
<!-- HEADER -->
{% include "_fragments/header.html" with active="home" %}
<!-- HERO -->
<section class="hero">
<div class="hero-bg-circle"></div>
<img class="hero-img" src="{% static 'img/santeh-equipment.jpg' %}" alt="Сантехника">
<div class="hero-content">
<h1>ДОБАВЬТЕ ЭСТЕТИЧНОСТИ<br>В СВОЙ ИНТЕРЬЕР</h1>
<div class="hero-check">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#36213e" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<polyline points="9 12 11 14 15 10"/>
</svg>
<p>Подбор сантехнического оборудования на заказ.<br>А также огромный выбор инсталляций и декора<br>в наличии на складах города с быстрой доставкой</p>
</div>
<a href="#" class="btn-primary">ПЕРЕЙТИ В КАТАЛОГ</a>
</div>
</section>
{% include "home/_fragments/hero.html" %}
<!-- WHY US -->
<section class="why-us">
<h2 class="why-us-title">ПОЧЕМУ ВЫБИРАЮТ НАС?</h2>
<div class="why-item">
<div class="why-num">1</div>
<h3>КАЧЕСТВЕННЫЙ ТОВАР</h3>
<p>Работаем с проверенными поставщиками</p>
</div>
<div class="why-item">
<div class="why-num">2</div>
<h3>ЧЕСТНАЯ ГАРАНТИЯ</h3>
<p>Работаем с проверенными поставщиками</p>
</div>
<div class="why-item">
<div class="why-num alt">3</div>
<h3>БЫСТРАЯ ДОСТАВКА</h3>
<p>Огромный выбор сантехники в наличии и доставка со склада</p>
</div>
</section>
{% include 'home/_fragments/advantages.html' %}
<!-- PROMO BANNERS -->
<section class="promo-section">
<div class="promo-card">
<img src="{% static 'img/sanitary-equipment-promo.jpg' %}" alt="">
<div class="promo-card-content">
<div class="promo-tag">Новинки в каталоге</div>
<h2>Сантехническое оборудование</h2>
<a href="#" class="promo-link">Смотреть</a>
</div>
</div>
<div class="promo-card">
<img src="{% static 'img/decor-promo.jpg' %}" alt="">
<div class="promo-card-content">
<div class="promo-tag">Большая распродажа</div>
<h2>Предметы декора</h2>
<a href="#" class="promo-link">Смотреть</a>
</div>
</div>
</section>
{% include 'home/_fragments/about.html' %}
<!-- ABOUT -->
<section class="about-section">
<div class="about-left">
<h2>О нас</h2>
<p>С 2000 года мы — не просто магазин сантехники, а надёжный партнёр для тех, кто ценит комфорт, качество и спокойствие.</p>
<h3>Мы предлагаем:</h3>
<ul class="about-list">
<li>
<div class="num">1</div>
<div class="li-content">
<span class="li-title">Сантехническое оборудование</span>
<span class="li-desc">Смесители, унитазы, мойки, душевые, умывальники, система фильтрации воды</span>
</div>
</li>
<li>
<div class="num">2</div>
<div class="li-content">
<span class="li-title">Предметы декора</span>
<div class="li-desc">Зеркала, ролл-маты, дозаторы, корзины, разделочные доски, система разделения мусора</div>
</div>
</li>
</ul>
</div>
<div class="about-right">
<img src="{% static 'img/about-image.jpg' %}" alt="О нас">
<p>Мы работаем только с проверенными поставщиками — европейскими и российскими брендами, чья продукция прошла испытание временем, реальными квартирами и сотнями довольных клиентов.</p>
<div class="stats-row">
<div class="stat">
<span class="stat-num">20+</span>
<span class="stat-label">лет работы</span>
</div>
<div class="stat">
<span class="stat-num">45 000+</span>
<span class="stat-label">довольных покупателей</span>
</div>
<div class="stat">
<span class="stat-num">5600+</span>
<span class="stat-label">товаров</span>
</div>
</div>
<img src="{% static 'img/stats-image.jpg' %}" alt="">
</div>
</section>
{% include 'home/_fragments/banner.html' %}
<!-- KITCHEN BANNER -->
<div class="kitchen-banner">
<div class="kitchen-content">
<p>Успей заказать с большой выгодой и получите доставку в подарок!</p>
<h2>ГОТОВОЕ РЕШЕНИЕ ДЛЯ КУХНИ</h2>
<a href="#" class="btn-outline-light">Перейти</a>
</div>
<img src="{% static 'img/kitchen-banner.jpg' %}" alt="">
</div>
{% include 'home/_fragments/popular-products.html' %}
<!-- POPULAR PRODUCTS -->
<section class="products-section">
<h2 class="section-title">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
<div class="products-grid">
{% include 'home/_fragments/faq.html' %}
<!-- Card 1 — tall -->
<div class="product-card tall">
<img class="product-card-img" src="{% static 'img/kitchen-sink.jpg' %}" alt="Кухонная мойка">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Кухонная мойка</div>
<div class="p-sub">Искусственный камень, врезная на столешницу</div>
<div class="p-price">1600 руб</div>
</div>
</div>
<!-- Card 2 -->
<div class="product-card">
<img class="product-card-img" src="{% static 'img/chopping-board.jpg' %}" alt="Разделочная доска" style="aspect-ratio:4/3;">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Разделочная доска</div>
<div class="p-sub">Нержавеющая сталь</div>
<div class="p-price">50 руб</div>
</div>
</div>
<!-- Card 3 — tall -->
<div class="product-card tall">
<img class="product-card-img" src="{% static 'img/terra-mirror.jpg' %}" alt="Зеркало Terra">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Зеркало Terra</div>
<div class="p-sub">Холодная подсветка, фронтальная</div>
<div class="p-price">200 руб</div>
</div>
</div>
<!-- Card 4 -->
<div class="product-card">
<img class="product-card-img" src="{% static 'img/toilet.jpg' %}" alt="Унитаз" style="aspect-ratio:4/3;">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Унитаз</div>
<div class="p-sub">Напольный с бачком, безободковый</div>
<div class="p-price">1600 руб</div>
</div>
</div>
<!-- Card 5 (коврик) -->
<div class="product-card">
<img class="product-card-img" src="{% static 'img/rubber-mat.jpg' %}" alt="Коврик" style="aspect-ratio:4/3;">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Коврик для посуды</div>
<div class="p-sub">Мгновенно впитывает воду</div>
<div class="p-price">20 руб</div>
</div>
</div>
<!-- Card 6 (смеситель) -->
<div class="product-card">
<img class="product-card-img" src="{% static 'img/mixer.jpg' %}" alt="Смеситель" style="aspect-ratio:4/3;">
<div class="product-actions">
<button title="В избранное">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</button>
<button title="В корзину">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
</button>
</div>
<div class="product-info">
<div class="p-name">Смеситель</div>
<div class="p-sub">Однорычажный смеситель</div>
<div class="p-price">340 руб</div>
</div>
</div>
</div>
<div class="products-footer">
<a href="#" class="btn-primary">ПЕРЕЙТИ В КАТАЛОГ</a>
</div>
</section>
<!-- FAQ -->
<section class="faq-section">
<h2 class="section-title">ОТВЕТЫ НА ВОПРОСЫ</h2>
<div class="faq-grid">
<div class="faq-item">
<div class="faq-icon">?</div>
<div class="faq-body">
<h4>Могу ли я отказаться от заказа при доставке?</h4>
<p>Да, вы можете отказаться приобретать модель. В таком случае, просим уведомить специалиста магазина о отказе, не нарушать заводскую упаковку товара, чтобы он не утратил товарный вид. Но вы должны будете оплатить доставку товара, даже в случае отказа.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-icon">?</div>
<div class="faq-body">
<h4>Куда обращаться по гарантии?</h4>
<p>В случае обнаружения недостатка товара при получении либо при его использовании в течении гарантийного срока, необходимо обратиться с письменной претензией на почту info@santehray.by или в наш магазин. Далее с вами свяжутся для уточнения подробностей.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-icon">?</div>
<div class="faq-body">
<h4>Можно ли покупать товары в рассрочку?</h4>
<p>Да. У нас есть система кредитования, где вы можете приобрести модель в рассрочку полностью или частично. Для этого нужно обратиться в наш магазин и узнать подробности.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-icon">?</div>
<div class="faq-body">
<h4>Можно ли где-то лично посмотреть товары?</h4>
<p>У нас есть физический магазин, который находится по адресу: Беларусь, г. Минск, ул. Тимирязева, д. 123, к.1, пав. 59, там вы сможете ознакомится со всем ассортиментом.</p>
</div>
</div>
</div>
<div class="faq-cta">
<a href="#" class="btn-primary">ЗАДАТЬ ВОПРОС</a>
</div>
</section>
<!-- FOOTER -->
{% include "_fragments/footer.html" %}
{% include "_fragments/footer.html" %}
{% endblock %}

16
templates/home/shipping.html Normal file
View File

@@ -0,0 +1,16 @@
{% extends "_layouts/base.html" %}
{% load static %}
{% block title %}Главная{% endblock %}
{% block add_css %}
{% endblock %}
{% block content %}
{% include "_fragments/header.html" %}
{# TODO #}
В разработке
{% include "_fragments/footer.html" %}
{% endblock %}

16
templates/home/warranty.html Normal file
View File

@@ -0,0 +1,16 @@
{% extends "_layouts/base.html" %}
{% load static %}
{% block title %}Главная{% endblock %}
{% block add_css %}
{% endblock %}
{% block content %}
{% include "_fragments/header.html" %}
{# TODO #}
В разработке
{% include "_fragments/footer.html" %}
{% endblock %}