106 lines
3.9 KiB
HTML
106 lines
3.9 KiB
HTML
{% extends 'web/base_modern.html' %}
|
||
{% load static %}
|
||
|
||
{% block title %}{{ item.title }} - Портфолио - SmartSolTech{% endblock %}
|
||
|
||
{% block extra_head %}
|
||
<!-- Lightbox CSS -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">
|
||
<style>
|
||
.hover-zoom {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.hover-zoom:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<section class="section-padding">
|
||
<div class="container" style="max-width: 1000px;">
|
||
<!-- Breadcrumb -->
|
||
<nav aria-label="breadcrumb" class="mb-4">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="{% url 'home' %}">Главная</a></li>
|
||
<li class="breadcrumb-item"><a href="{% url 'portfolio_list' %}">Портфолио</a></li>
|
||
<li class="breadcrumb-item active">{{ item.title }}</li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<!-- Project Header -->
|
||
<div class="text-center mb-5">
|
||
{% if item.category %}
|
||
<span class="badge bg-primary mb-3">{{ item.category.name }}</span>
|
||
{% endif %}
|
||
<h1 class="display-5 fw-bold mb-3">{{ item.title }}</h1>
|
||
{% if item.client_name %}
|
||
<p class="text-muted">
|
||
<i class="fas fa-user"></i> Клиент: {{ item.client_name }}
|
||
</p>
|
||
{% endif %}
|
||
{% if item.completion_date %}
|
||
<p class="text-muted">
|
||
<i class="far fa-calendar"></i> Дата завершения: {{ item.completion_date|date:"d.m.Y" }}
|
||
</p>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Project Image -->
|
||
{% if item.image %}
|
||
<div class="mb-5">
|
||
<img src="{{ item.image.url }}" class="img-fluid rounded" alt="{{ item.title }}" style="width: 100%; max-height: 600px; object-fit: cover;">
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Project Gallery -->
|
||
{% if item.gallery_images.all %}
|
||
<div class="mb-5">
|
||
<h3 class="mb-4">Галерея проекта</h3>
|
||
<div class="row g-3">
|
||
{% for gallery_image in item.gallery_images.all %}
|
||
<div class="col-md-4 col-sm-6">
|
||
<a href="{{ gallery_image.image.url }}" data-lightbox="portfolio-gallery" {% if gallery_image.caption %}data-title="{{ gallery_image.caption }}"{% endif %}>
|
||
<img src="{{ gallery_image.image.url }}" class="img-fluid rounded shadow-sm hover-zoom" alt="{{ gallery_image.caption }}" style="width: 100%; height: 250px; object-fit: cover; cursor: pointer; transition: transform 0.3s;">
|
||
</a>
|
||
{% if gallery_image.caption %}
|
||
<p class="text-muted small mt-2 text-center">{{ gallery_image.caption }}</p>
|
||
{% endif %}
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Project Description -->
|
||
<div class="card-modern mb-5">
|
||
<div class="card-body">
|
||
<h3 class="mb-4">О проекте</h3>
|
||
<div class="project-description">
|
||
{{ item.description|linebreaks }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Back to Portfolio -->
|
||
<div class="text-center mt-5">
|
||
<a href="{% url 'portfolio_list' %}" class="btn btn-outline-primary">
|
||
<i class="fas fa-arrow-left me-2"></i> Все проекты
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|
||
|
||
{% block extra_scripts %}
|
||
<!-- Lightbox JS -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
|
||
<script>
|
||
lightbox.option({
|
||
'resizeDuration': 200,
|
||
'wrapAround': true,
|
||
'albumLabel': 'Изображение %1 из %2'
|
||
});
|
||
</script>
|
||
{% endblock %}
|