feat: добавить слайдер для преимуществ, фонты и portable setup

- Интегрирован Swiper.js для слайдера преимуществ - Обновлены преимущества: добавлены новые элементы и улучшена структура - Добавлены новые шрифты (BerlinType, Noah) и подключены стили - Добавлен start.bat для автоматической настройки Python, Git и запуска проекта
2026-04-04 11:15:40 +02:00
parent 09ca1c6997
commit 777b753230
15 changed files with 296 additions and 43 deletions
--- a/start.bat
+++ b/start.bat
@@ -0,0 +1,90 @@
+@echo off
+setlocal enabledelayedexpansion
+
+set "PROJECT_DIR=%~dp0"
+if "%PROJECT_DIR:~-1%"=="\" set "PROJECT_DIR=%PROJECT_DIR:~0,-1%"
+
+set "PYTHON_DIR=%PROJECT_DIR%\python-embed"
+set "GIT_DIR=%PROJECT_DIR%\portable-git"
+set "REPO_URL=https://git.azimkin.dev/Azimkin/santeh-ray.git"
+
+if exist "%PYTHON_DIR%\python.exe" (
+    echo Python is already set up.
+    goto :python_done
+)
+
+echo Creating Python directory...
+mkdir "%PYTHON_DIR%" 2>nul
+
+echo Downloading Python 3.14.3 embeddable...
+powershell -Command "Invoke-WebRequest -Uri 'https://www.python.org/ftp/python/3.14.3/python-3.14.3-embed-amd64.zip' -OutFile '%PROJECT_DIR%\python-embed.zip'"
+
+echo Extracting Python...
+powershell -Command "Expand-Archive -Path '%PROJECT_DIR%\python-embed.zip' -DestinationPath '%PYTHON_DIR%' -Force"
+del "%PROJECT_DIR%\python-embed.zip"
+
+echo Configuring Python for pip support...
+echo python314.zip> "%PYTHON_DIR%\python314._pth"
+echo .>> "%PYTHON_DIR%\python314._pth"
+echo Lib>> "%PYTHON_DIR%\python314._pth"
+echo Lib\site-packages>> "%PYTHON_DIR%\python314._pth"
+echo ..>> "%PYTHON_DIR%\python314._pth"
+echo import site>> "%PYTHON_DIR%\python314._pth"
+
+echo Downloading get-pip.py...
+powershell -Command "Invoke-WebRequest -Uri 'https://bootstrap.pypa.io/get-pip.py' -OutFile '%PYTHON_DIR%\get-pip.py'"
+
+echo Installing pip...
+"%PYTHON_DIR%\python.exe" "%PYTHON_DIR%\get-pip.py" --no-warn-script-location
+del "%PYTHON_DIR%\get-pip.py"
+
+echo Portable Python with pip setup complete!
+
+:python_done
+
+set "PATH=%PYTHON_DIR%;%PYTHON_DIR%\Lib\site-packages;%PYTHON_DIR%\Scripts;%PATH%"
+
+if exist "%GIT_DIR%\cmd\git.exe" (
+    echo Git is already set up.
+    goto :git_done
+)
+
+echo Creating Git directory...
+mkdir "%GIT_DIR%" 2>nul
+
+echo Downloading Portable Git (MinGit zip)...
+powershell -Command "Invoke-WebRequest -Uri 'https://github.com/git-for-windows/git/releases/download/v2.42.0.windows.2/MinGit-2.42.0.2-64-bit.zip' -OutFile '%PROJECT_DIR%\portable-git.zip'"
+
+echo Extracting Git...
+powershell -Command "Expand-Archive -Path '%PROJECT_DIR%\portable-git.zip' -DestinationPath '%GIT_DIR%' -Force"
+del "%PROJECT_DIR%\portable-git.zip"
+
+echo Portable Git setup complete!
+
+:git_done
+
+set "PATH=%GIT_DIR%\cmd;%PATH%"
+set "GIT_EXE=%GIT_DIR%\cmd\git.exe"
+
+if exist "%PROJECT_DIR%\.git\HEAD" (
+    echo Git repository found. Pulling updates...
+    "%GIT_EXE%" pull
+    goto :project_done
+)
+
+echo No git repository found.
+echo Cloning repository...
+"%GIT_EXE%" clone %REPO_URL%
+
+:project_done
+
+echo Installing requirements...
+"%PYTHON_DIR%\python.exe" -m pip install -r "%PROJECT_DIR%\requirements.txt" --no-warn-script-location
+
+echo Applying database migrations...
+"%PYTHON_DIR%\python.exe" "%PROJECT_DIR%\manage.py" migrate
+
+echo Starting server...
+"%PYTHON_DIR%\python.exe" "%PROJECT_DIR%\manage.py" runserver
+
+pause
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -16,7 +16,7 @@
 }

 .hero-title {
-    font-family: "Inter", sans-serif;
+
    font-style: normal;
    font-weight: 500;
    font-size: 50px;
@@ -35,7 +35,7 @@
 }

 .hero-subtitle {
-    font-family: "Inter", sans-serif;
+
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
@@ -59,7 +59,7 @@
 .hero-button {
    display: inline-block;
    background: #63768d;
-    font-family: "Inter", sans-serif;
+
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
@@ -75,15 +75,15 @@
    margin-top: 100px;
 }

-.advantages-list {
+.advantages-header {
    display: flex;
-    flex-direction: row;
    justify-content: space-between;
+    /*align-items: flex-start;*/
 }

 .advantages-title {
    width: 300px;
-    font-family: "Inter", sans-serif;
+
    font-style: normal;
    font-weight: 400;
    font-size: 44px;
@@ -93,10 +93,54 @@
    color: #36213e;
 }

+.advantages-nav {
+    display: flex;
+    gap: 12px;
+    justify-content: end;
+}
+
+.advantages-nav-btn {
+    width: 48px;
+    height: 48px;
+    border-radius: 100%;
+    background: #63768d;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    transition: background 0.2s, opacity 0.2s;
+}
+
+.advantages-nav-btn:hover {
+    background: #554971;
+}
+
+.advantages-nav-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.advantages-list {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.advantages-right {
+    max-width: 900px;
+}
+
+.advantages-carousel {
+    margin-top: 10px;
+    width: 900px;
+    height: 130px;
+    overflow: hidden;
+}
+
 .advantages-item {
    width: 250px;
-    height: 150px;
-    margin-top: 10px;
 }

 .advantages-item-number {
@@ -110,7 +154,7 @@

    /* Number in circle */
    color: white;
-    font-family: "Inter", sans-serif;
+
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
@@ -119,7 +163,7 @@
 }

 .advantages-item-title {
-    font-family: "Inter", sans-serif;
+
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
@@ -133,7 +177,7 @@

 .advantages-item-subtitle {
    margin-top: 7px;
-    font-family: "Inter", sans-serif;
+
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
@@ -176,13 +220,13 @@
 }

 .advantages-card-splash {
-    font-family: "Inter", sans-serif;
+
    font-style: normal;
    font-weight: 500;
-    font-size: 18px;
+    font-size: 25px;
    line-height: 22px;

-    color: #b8f3ff;
+    color: #ffffff;
 }

 .advantages-card-title {
@@ -190,27 +234,31 @@
    width: 291px;
    height: 84px;

-    font-family: "Inter", sans-serif;
+
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.3;

-    color: #b8f3ff;
+    color: #ffffff;
 }

 .advantages-card-button {
    display: inline-block;
    margin-top: 50px;
-    font-family: "Inter", sans-serif;
+
+    padding: 10px 10px;
+
+    border: 1px solid #ffffff;
+
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    text-align: left;
-    text-decoration: underline;
+    /*text-decoration: underline;*/

-    color: #b8f3ff;
+    color: #ffffff;
 }


@@ -577,7 +625,7 @@
    justify-content: center;

    & > a {
-        padding: 15px 45px;
+        padding: 15px 45px 15px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
@@ -608,7 +656,7 @@
            line-height: 24px;
            text-align: left;

-            margin-right: 5px;
+            margin-right: 13px;

            color: #63768d;
        }
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,3 +1,58 @@
+/* ── FONTS ── */
+@font-face {
+    font-family: 'BerlinType';
+    src: url('../fonts/BerlinTypeWeb-Regular.eot');
+    src: url('../fonts/BerlinTypeWeb-Regular.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/BerlinTypeWeb-Regular.woff2') format('woff2'),
+         url('../fonts/BerlinTypeWeb-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'BerlinType';
+    src: url('../fonts/BerlinTypeWeb-Bold.eot');
+    src: url('../fonts/BerlinTypeWeb-Bold.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/BerlinTypeWeb-Bold.woff2') format('woff2'),
+         url('../fonts/BerlinTypeWeb-Bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noah';
+    src: url('../fonts/noah-regular.otf') format('opentype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noah';
+    src: url('../fonts/noah-regularitalic.otf') format('opentype');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noah';
+    src: url('../fonts/noah-bold.otf') format('opentype');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noah';
+    src: url('../fonts/noah-bolditalic.otf') format('opentype');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}
+
 *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
@@ -14,12 +69,16 @@
 }

 body {
-    font-family: 'Inter', sans-serif;
+    font-family: 'Noah', sans-serif;
    color: var(--dark);
    background: var(--bg);
    overflow-x: hidden;
 }

+h1, h2, h3, h4, h5, h6 {
+    font-family: 'BerlinType', serif;
+}
+
 /* Container to maintain consistent width */
 .container {
    max-width: 1160px;
@@ -81,7 +140,7 @@ header {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 12px 80px;
+    padding: 12px 0;
    gap: 20px;
 }

@@ -171,7 +230,7 @@ header {
 .nav-bar {
    display: flex;
    align-items: center;
-    padding: 10px 80px;
+    padding: 10px 0;
    gap: 0;
    border-top: 1px solid rgba(54, 33, 62, .07);
    justify-content: space-between;
--- a/static/fonts/BerlinTypeWeb-Bold.eot
+++ b/static/fonts/BerlinTypeWeb-Bold.eot
--- a/static/fonts/BerlinTypeWeb-Bold.woff
+++ b/static/fonts/BerlinTypeWeb-Bold.woff
--- a/static/fonts/BerlinTypeWeb-Bold.woff2
+++ b/static/fonts/BerlinTypeWeb-Bold.woff2
--- a/static/fonts/BerlinTypeWeb-Regular.eot
+++ b/static/fonts/BerlinTypeWeb-Regular.eot
--- a/static/fonts/BerlinTypeWeb-Regular.woff
+++ b/static/fonts/BerlinTypeWeb-Regular.woff
--- a/static/fonts/BerlinTypeWeb-Regular.woff2
+++ b/static/fonts/BerlinTypeWeb-Regular.woff2
--- a/static/fonts/noah-bold.otf
+++ b/static/fonts/noah-bold.otf
--- a/static/fonts/noah-bolditalic.otf
+++ b/static/fonts/noah-bolditalic.otf
--- a/static/fonts/noah-regular.otf
+++ b/static/fonts/noah-regular.otf
--- a/static/fonts/noah-regularitalic.otf
+++ b/static/fonts/noah-regularitalic.otf
--- a/templates/_layouts/base.html
+++ b/templates/_layouts/base.html
@@ -11,6 +11,8 @@
          rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/normalize.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
    {% block add_css %}
        <!-- Additional CSS -->
    {% endblock %}
--- a/templates/home/_fragments/advantages.html
+++ b/templates/home/_fragments/advantages.html
@@ -3,20 +3,59 @@
    <div class="container">
        <div class="advantages-list">
            <h2 class="advantages-title">ПОЧЕМУ ВЫБИРАЮТ НАС?</h2>
-            <div class="advantages-item">
+            <div class="advantages-right">
+                <div class="advantages-nav">
+                    <button class="advantages-nav-btn advantages-nav-prev" id="advantages-nav-prev"
+                            aria-label="Previous">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                             stroke-width="2">
+                            <polyline points="15 18 9 12 15 6"></polyline>
+                        </svg>
+                    </button>
+                    <button class="advantages-nav-btn advantages-nav-next" id="advantages-nav-next" aria-label="Next">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                             stroke-width="2">
+                            <polyline points="9 18 15 12 9 6"></polyline>
+                        </svg>
+                    </button>
+                </div>
+
+                <div class="advantages-carousel">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide 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="swiper-slide advantages-item">
                            <div class="advantages-item-number">2</div>
                            <h3 class="advantages-item-title">ЧЕСТНАЯ ГАРАНТИЯ</h3>
-                <p class="advantages-item-subtitle">Работаем с проверенными поставщиками</p>
+                            <p class="advantages-item-subtitle">Гарантия на все товары от 1 до 5 лет</p>
                        </div>
-            <div class="advantages-item">
+                        <div class="swiper-slide advantages-item">
                            <div class="advantages-item-number">3</div>
                            <h3 class="advantages-item-title">БЫСТРАЯ ДОСТАВКА</h3>
-                <p class="advantages-item-subtitle">Огромный выбор сантехники в наличии и доставка со склада</p>
+                            <p class="advantages-item-subtitle">Огромный выбор сантехники в наличии и доставка со
+                                склада</p>
+                        </div>
+                        <div class="swiper-slide advantages-item">
+                            <div class="advantages-item-number">4</div>
+                            <h3 class="advantages-item-title">САМОВЫВОЗ</h3>
+                            <p class="advantages-item-subtitle">Ниже, удобный самовывоз из Минска</p>
+                        </div>
+                        <div class="swiper-slide advantages-item">
+                            <div class="advantages-item-number">5</div>
+                            <h3 class="advantages-item-title">ИНДИВИДУАЛЬНЫЙ ПОДХОД</h3>
+                            <p class="advantages-item-subtitle">Каждый заказ мы прорабатываем и обсуждаем с клиентом
+                                индивидуально</p>
+                        </div>
+                        <div class="swiper-slide advantages-item">
+                            <div class="advantages-item-number">6</div>
+                            <h3 class="advantages-item-title">ПРОЗРАЧНЫЕ УСЛОВИЯ</h3>
+                            <p class="advantages-item-subtitle">Регулярные акции и скидки для постоянных клиентов</p>
+                        </div>
+                    </div>
+                </div>
            </div>
        </div>

@@ -24,19 +63,34 @@
            <div class="advantages-card advantages-card-left">
                <div class="advantages-card-content">
                    <div class="flex-right">
-                        <div class="advantages-card-splash">Новинки в каталоге</div>
+                        <h3 class="advantages-card-splash">Новинки в каталоге</h3>
                        <h2 class="advantages-card-title text-align-right">Сантехническое оборудование</h2>
-                        <a href="/catalog/#santechnics" class="advantages-card-button">Смотреть</a>
+                        <a href="/catalog?category=plumbing" 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>
+                    <h3 class="advantages-card-splash">Большая распродажа</h3>
                    <h2 class="advantages-card-title">Предметы декора</h2>
-                    <a href="/catalog/#santechnics" class="advantages-card-button">Смотреть</a>
+                    <a href="/catalog?category=decoration" class="advantages-card-button">Смотреть</a>
                </div>
            </div>
        </div>
    </div>
 </section>
+
+<script>
+    const swiper = new Swiper('.advantages-carousel', {
+        slidesPerView: 3,
+        slidesPerGroup: 1,
+        loop: false,
+        effect: 'slide',
+
+        // Navigation arrows
+        navigation: {
+            nextEl: '#advantages-nav-next',
+            prevEl: '#advantages-nav-prev',
+        },
+    });
+</script>