master
parent
8eed77fe1b
commit
45d8729f84
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -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;
|
||||
}
|
|
@ -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; /* Цвет для части текста */
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 263 KiB |
|
@ -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 -->
|
||||
{% 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%;">
|
||||
<img src="{{ product.image.url }}" class="w-100 h-100 position-absolute" style="object-fit: cover; top: 0; left: 0;" alt={{ product.name }}>
|
||||
<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">
|
||||
{% if product.image %}
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div> <!-- Add this line -->
|
||||
</div>
|
||||
{% endfor %}
|
||||
</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">
|
||||
<p class="m-0 text-center text-white footer-text">Nitaku shop <span>&</span> Silky Way 2024</p>
|
||||
<div class="col-lg-14">
|
||||
<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="text-center mt-3">
|
||||
<h5 class="text-white">Посетите нашего телеграм бота!</h5>
|
||||
<p class="text-white">Распознавайте товары в картинах и найдите их онлайн.</p>
|
||||
<a href="https://t.me/silky_way_bot" class="btn btn-warning"> Silky Way </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-14">
|
||||
<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>
|
||||
|
|
|
@ -1,19 +1,157 @@
|
|||
{% extends "main/base.html" %}
|
||||
{% load static %}
|
||||
{% block title %}
|
||||
{{ product.name }}
|
||||
{% endblock %}
|
||||
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="{% static "/deps/css/bootstrap/bootstrap.min.css" %}">
|
||||
<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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item text-white" href="https://t.me/silky_way_bot">Контактная информация</a></li>
|
||||
<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">
|
||||
<img src="{% if product.image %}{{ product.image.url }}{% else %}
|
||||
{% static "deps/img/no_image.jpg" %}{% endif %}">
|
||||
<h1>{{ product.name }}</h1>
|
||||
<h2>
|
||||
<a href="{{ product.category.get_absolute_url }}">
|
||||
{{ product.category }}
|
||||
</a>
|
||||
</h2>
|
||||
<p class="price">${{ product.price }}</p>
|
||||
{{ product.description|linebreaks }}
|
||||
</div>
|
||||
<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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue