NitakuShop/main/templates/main/index.html

156 lines
7.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{% 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/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"%}">
<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>Home</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</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-1">
<div class="col-lg-2">
<!-- Пустой блок на Ваше усмотрение -->
</div>
<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 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>
</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>
</div>
{% endfor %}
</div>
</div>
<section>
{# <div class="container">#}
{# <!-- Каталог и корзина с фиксированным расположением на странице -->#}
{##}
{# <!-- Карта товара -->#}
{# <div class="col-lg-4 col-md-6 p-4">#}
{# <div class="card border-primary rounded custom-shadow">#}
{# <img src="{% static "/deps/images/goods/O1CN01xsBTy51MVZ2HM1sjf_!!4200721440-0-cib.jpg"%}" class="card-img-top" alt="...">#}
{# <div class="card-body">#}
{# <a href="../goods/product.html">#}
{# <p class="card-title">Anime girl/p>#}
{# </a>#}
{# <p class="card-text text-truncate">Re Zero</p>#}
{##}
{# <div class="d-flex justify-content-between">#}
{##}
{# <p><strong>90.00 $</strong></p>#}
{##}
{# <!-- <p><strong>100.00 $</strong></p> -->#}
{##}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{##}
{# </div>#}
{# </div>#}
{# </div>#}
{# <!-- Закончилась разметка модального окна -->#}
{# </div>#}
{# </div>#}
<!-- Контент -->
</section>
<footer class="py-2 bg-dark"> <!-- Уменьшаем высоту (padding) -->
<div class="container">
<div class="row">
<!-- Колонка для рекламного блока -->
<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-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>
<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>