a

main/static/deps/css/catal.css

@@ -0,0 +1,37 @@
+
+.card:hover {
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    background-color: rgba(49, 0, 89, 0.73); /* Цвет фона при наведении */
+}
+
+/* Стили для текста и заголовков в карточке */
+.card-title {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+}
+
+.card-text {
+    color: #8805ff; /* Цвет текста */
+}
+
+/* Стили для цены */
+.card strong {
+    color: #e38900; /* Цвет цены */
+}
+
+/* Стили для ссылок */
+.card a {
+    text-decoration: none;
+    color: #ffffff; /* Цвет ссылок */
+    transition: color 0.3s;
+}
+
+.card a:hover {
+    color: #1b003d; /* Цвет ссылок при наведении */
+}
+.card {
+    background-color: rgba(0, 0, 0, 0.62); /* Цвет фона карточки */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s, background-color 0.3s;
+    border: none;
+}

main/static/deps/css/fordetail.css

@@ -0,0 +1,100 @@
+body {
+  background-image: url("../images/det.jpg");
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center center;
+  background-size: cover;
+  height: 100%;
+}
+
+.dropdown-toggle::after {
+  content: none;
+}
+
+.custom-shadow {
+  box-shadow: 5px 5px 25px 19px #380069;
+}
+
+.product_id {
+  color: #cb5cff;
+  font-size: 15px;
+}
+
+.badge.bg-warning.text-dark {
+  position: absolute;
+  top: 10px;
+  right: 5px;
+  z-index: 1;
+  padding: 5px 10px;
+  border-radius: 3px;
+  font-size: 1rem;
+  box-shadow: 2px 2px 15px 9px #000000;
+}
+
+.badge-banner {
+  top: 80%;
+  border-radius: 15px;
+  font-size: 0.7rem;
+}
+/* Ваши стили для футера */
+footer {
+    padding-top: 20px; /* Расстояние от верха футера */
+    background-color: #343a40; /* Цвет фона футера */
+    color: #ffffff; /* Цвет текста внутри футера */
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.footer-ad {
+    flex-grow: 1; /* Растянуть колонку на всю доступную ширину */
+}
+
+.ad-text {
+    text-align: center;
+}
+
+.ad-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-top: 10px;
+}
+
+.ad-heading {
+    color: #ffffff;
+    font-size: 18px;
+}
+
+.ad-description {
+    color: #ffffff;
+    font-size: 14px;
+    margin-bottom: 10px;
+}
+
+.ad-button {
+    background-color: #ffc107; /* Цвет кнопки */
+    color: #343a40; /* Цвет текста на кнопке */
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    transition: background-color 0.3s;
+}
+
+.ad-button:hover {
+    background-color: #ffca2c; /* Цвет кнопки при наведении */
+}
+.footer-text {
+    font-size: 18px; /* Размер шрифта */
+    font-weight: bold; /* Жирное начертание */
+    margin-top: 10px; /* Верхний отступ */
+}
+
+.footer-text span {
+    color: #ff6b6b; /* Цвет для части текста */
+}

main/templates/main/index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="{% static "/deps/css/my_css.css"%}">
     <!-- Стиль footer-a для главной страницы -->
     <link rel="stylesheet" href="{% static "/deps/css/my_footer_css.css"%}">
+    <link rel="stylesheet" href="{% static "/deps/css/catal.css"%}">
     <!-- Favicons for different platforms -->
     <link rel="apple-touch-icon" sizes="180x180" href="{% static "/deps/favicon/apple-touch-icon.png"%}">
     <link rel="icon" type="image/png" sizes="32x32" href="{% static "/deps/favicon/favicon-32x32.png"%}">
@@ -58,29 +59,38 @@
             </div>
     
             <div id="header">
-                <h3><img src="{% static "deps/favicon/favicon.ico.png"%}" alt="Логотип"> Nitaku shop</h3>
+                <h1><img src="{% static "deps/favicon/favicon.ico.png"%}" alt="Логотип"> <a class="navbar-brand" href="{% url "index"%}">Nitaku Shop</a></h1>
             </div>
         </div>
-        <div class="row"> <!-- Add this line -->
+        <div class="row">
     {% for product in products %}
         <div class="col-12 col-md-6 col-lg-4 p-4">
             <div class="card border-primary rounded custom-shadow">
-                    <div class="aspect-ratio overflow-hidden" style="position: relative; padding-top: 100%;">
+                {% if product.image %}
-                        <img src="{{ product.image.url }}" class="w-100 h-100 position-absolute" style="object-fit: cover; top: 0; left: 0;" alt={{ product.name }}>
+                    <a href="{{ product.get_absolute_url }}"><div class="aspect-ratio overflow-hidden" style="position: relative; padding-top: 100%;">
+                        <img src="{{ product.image.url }}" class="w-100 h-100 position-absolute" style="object-fit: cover; top: 0; left: 0;" alt="{{ product.name }}">
                     </div>
+                    </a>
+                {% else %}
+                    <!-- Заглушка или альтернативное содержимое для товаров без изображений -->
+                    <div class="aspect-ratio overflow-hidden" style="position: relative; padding-top: 100%;">
+                        <img src="{% static 'deps/img/no_image.jpg' %}" class="w-100 h-100 position-absolute" style="object-fit: cover; top: 0; left: 0;" alt="{{ product.name }}">
+                    </div>
+                {% endif %}
                 <div class="card-body">
                     <a href="{{ product.get_absolute_url }}">
                         <p class="card-title">{{ product.name }}</p>
                     </a>
                     <p class="card-text text-truncate">{{ product.description }}</p>
                     <div class="d-flex justify-content-between">
-                            <p><strong>{{ product.price }} $</strong></p>
+                        <p><strong>{{ product.price }}₸</strong></p>
                     </div>
                 </div>
             </div>
         </div>
     {% endfor %}
-        </div> <!-- Add this line -->
+</div>
+
     </div>
     <section>
 {#        <div class="container">#}
@@ -116,21 +126,22 @@
         <!-- Контент -->
 
     </section>
-<footer class="py-4 bg-dark">
+<footer class="py-2 bg-dark"> <!-- Уменьшаем высоту (padding) -->
     <div class="container">
         <div class="row">
             <!-- Колонка для рекламного блока -->
-            <div class="col-lg-8">
+            <div class="col-lg-14">
-                <p class="m-0 text-center text-white footer-text">Nitaku shop <span>&</span> Silky Way 2024</p>
+                <p class="m-0 text-center text-white footer-text" style="font-size: 18px;">Nitaku shop <span>&</span> Silky Way 2024</p> <!-- Изменяем размер шрифта -->
             </div>
             <!-- Колонка для рекламного блока -->
-            <div class="col-lg-4">
+            <div class="col-lg-14">
     <div class="text-center mt-3">
-                    <h5 class="text-white">Посетите нашего телеграм бота!</h5>
+        <h5 class="text-white" style="font-size: 14px;">Посетите нашего телеграм бота!</h5>
-                    <p class="text-white">Распознавайте товары в картинах и найдите их онлайн.</p>
+        <p class="text-white" style="font-size: 14px;">Распознавайте товары в картинах и найдите их онлайн.</p>
-                    <a href="https://t.me/silky_way_bot" class="btn btn-warning"> Silky Way </a>
+        <a href="https://t.me/silky_way_bot" class="btn btn-warning" style="font-size: 14px;"> Silky Way </a>
-                </div>
     </div>
+</div>
+
         </div>
     </div>
 </footer>

main/templates/main/product/detail.html

@@ -1,19 +1,157 @@
-{% extends "main/base.html" %}
 {% load static %}
-{% block title %}
+
- {{ product.name }}
+{% load static %}
-{% endblock %}
+<!DOCTYPE html>
-{% block content %}
+<html lang="en">
- <div class="product-detail">
+
- <img src="{% if product.image %}{{ product.image.url }}{% else %}
+<head>
- {% static "deps/img/no_image.jpg" %}{% endif %}">
+    <meta charset="UTF-8">
- <h1>{{ product.name }}</h1>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <h2>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <a href="{{ product.category.get_absolute_url }}">
+    <link rel="stylesheet" href="{% static "/deps/css/bootstrap/bootstrap.min.css" %}">
- {{ product.category }}
+    <link rel="stylesheet" href="{% static "/deps/css/fordetail.css" %}">
+    <link rel="stylesheet" href="{% static "/deps/css/my_footer_css.css" %}">
+    <link rel="stylesheet" href="{% static "/deps/css/catal.css" %}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{% static "/deps/favicon/apple-touch-icon.png" %}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{% static "/deps/favicon/favicon-32x32.png" %}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{% static "/deps/favicon/favicon-16x16.png" %}">
+    <link rel="manifest" href="{% static "/deps/favicon/site.webmanifest" %}">
+    <title>Nitaku Shop</title>
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
+            <div class="container">
+                <a class="navbar-brand" href="{% url "index" %}">Nitaku Shop</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle text-white" href="#" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                Информация
                             </a>
- </h2>
+                            <ul class="dropdown-menu">
- <p class="price">${{ product.price }}</p>
+                                <li><a class="dropdown-item text-white" href="https://t.me/silky_way_bot">Контактная информация</a></li>
- {{ product.description|linebreaks }}
+                                <li><a class="dropdown-item text-white" href="{% url 'about' %}">Про нас</a></li>
+                            </ul>
+                        </li>
+                    </ul>
                 </div>
+            </div>
+        </nav>
+    </header>
+
+    <div class="container">
+        <div class="row mt-4">
+            <div id="header">
+                <h1><img src="{% static "deps/favicon/favicon.ico.png"%}" alt="Логотип"> <a class="navbar-brand" href="{% url "index"%}">Nitaku Shop</a></h1>
+            </div>
+        </div>
+        <div class="row">
+            {% for product in products %}
+                <div class="col-12 col-md-6 col-lg-4 mt-4">
+                    <div class="card border-primary rounded custom-shadow">
+                        {% if product.image %}
+                            <div class="aspect-ratio overflow-hidden" style="position: relative; padding-top: 100%;">
+                                <img src="{{ product.image.url }}" class="w-100 h-100 position-absolute" style="object-fit: cover; top: 0; left: 0;" alt="{{ product.name }}">
+                            </div>
+                        {% else %}
+                            <div class="aspect-ratio overflow-hidden" style="position: relative; padding-top: 100%;">
+                                <img src="{% static 'deps/img/no_image.jpg' %}" class="w-100 h-100 position-absolute" style="object-fit: cover; top: 0; left: 0;" alt="{{ product.name }}">
+                            </div>
+                        {% endif %}
+                        <div class="card-body">
+                            <a href="{{ product.get_absolute_url }}" style="text-decoration: none; color: #212529;">
+                                <h5 class="card-title">{{ product.name }}</h5>
+                            </a>
+                            <p class="card-text text-truncate">{{ product.description }}</p>
+                            <div class="d-flex justify-content-between">
+                                <p><strong>{{ product.price }}₸</strong></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+
+    <section>
+
+
+{% block content %}
+    <div class="product-detail-container" style="background-color: rgba(51,0,93,0.73); padding: 10px;">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <img src="{% if product.image %}{{ product.image.url }}{% else %}{% static "deps/img/no_image.jpg" %}{% endif %}" class="img-fluid product-image" alt="{{ product.name }}">
+                </div>
+                <div class="col-md-6">
+                    <div class="product-details">
+                        <h1 class="product-name" style="color: #ffffff;">{{ product.name }}</h1>
+                        <p class="price" style="font-size: 35px; font-weight: bold; color: rgba(255,128,0,0.73);">₸{{ product.price }}</p>
+                        <p class="description" style="font-size: 800px;">{{ product.description|linebreaks }}</p>
+                        <a href="{% url 'index' %}" class="btn btn-primary">Вернуться на главную</a>
+
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <style>
+        .product-detail-container {
+            margin-top: 10px;
+            border-radius: 10px;
+            box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
+        }
+
+        .product-image {
+            border-radius: 100px;
+
+        }
+
+        .product-details {
+            padding: 10px;
+        }
+
+        .product-name {
+            margin-bottom: 19px;
+        }
+        .description {
+    font-size: 800px !important;
+    color: white !important; /* Замените #yourDesiredColor на желаемый цвет */
+}
+
+    </style>
 {% endblock %}
+
+    </section>
+
+    <footer class="py-2 bg-dark">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <p class="m-0 text-white footer-text" style="font-size: 16px;">Nitaku Shop <span>&</span> Silky Way 2024</p>
+                    <div class="text-center mt-3">
+                        <h5 class="text-white" style="font-size: 14px;">Посетите нашего телеграм бота!</h5>
+                        <p class="text-white" style="font-size: 14px;">Распознавайте товары в картинах и найдите их онлайн.</p>
+                        <a href="https://t.me/silky_way_bot" class="btn btn-warning" style="font-size: 14px;">Silky Way</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="{% static "/deps/js/jquery/jquery-3.7.0.min.js" %}"></script>
+    <script src="{% static "/deps/js/jquery-events.js" %}"></script>
+    <script src="{% static "/deps/js/jquery-ajax.js" %}"></script>
+    <script src="{% static "/deps/js/bootstrap/bootstrap.bundle.min.js" %}"></script>
+</body>
+
+</html>

main/templates/main/product/list.html

@@ -24,7 +24,7 @@
  {% for product in products %}
  <div class="item">
  <a href="{{ product.get_absolute_url }}">
- <img src="{% if product.image %}{{ product.image.url }}{% else %}{% static "img/no_image.png" %}{% endif %}">
+ <img src="{% if product.image %}{{ product.image.url }}{% else %}{% static "deps/img/no_image.jpg" %}{% endif %}">
  </a>
  <a href="{{ product.get_absolute_url }}">{{ product.name }}</a>
  <br>