72 lines
2.7 KiB
HTML
72 lines
2.7 KiB
HTML
{% extends 'programmer/base.html' %}
|
||
{% load django_bootstrap5 %}
|
||
{% load static %}
|
||
|
||
{% block extra_css %}
|
||
<link rel="stylesheet" href="{% static 'programmer/css/competence.css' %}">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="page-header">
|
||
<h1 class="page-title">Компетенции</h1>
|
||
<p class="page-subtitle">Профессиональные навыки и опыт</p>
|
||
</div>
|
||
|
||
<div class="competence-grid">
|
||
{% for p in posts %}
|
||
<div class="modern-card fade-in">
|
||
<div class="competence-item">
|
||
{% if p.photo %}
|
||
<div class="competence-scan-wrapper">
|
||
<div class="competence-scan-container">
|
||
<img src="{{ p.photo.url }}"
|
||
alt="Сертификат 1С: {{ p.title }} - {{ p.content|striptags }}"
|
||
class="competence-scan"
|
||
onclick="openCompetenceModal('{{ p.photo.url }}', '{{ p.title }}')">
|
||
<div class="scan-hint">
|
||
<span class="scan-zoom-icon">🔍</span>
|
||
<span class="scan-text">Нажмите для увеличения</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="competence-content">
|
||
<h2 class="competence-title">{{ p.title }}</h2>
|
||
<div class="competence-description">
|
||
{{ p.content|linebreaks }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
{% if not posts %}
|
||
<div class="modern-card text-center fade-in">
|
||
<h3>📚 Информация о компетенциях</h3>
|
||
<p class="card-subtitle">Раздел находится в разработке</p>
|
||
<div class="card-actions justify-center">
|
||
<a href="{% url 'solution' %}" class="btn btn-primary">Посмотреть проекты</a>
|
||
<a href="{% url 'about' %}" class="btn btn-secondary">Обо мне</a>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Модальное окно для увеличенного просмотра -->
|
||
<div id="competenceModal" class="modal competence-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="competenceModalTitle">Компетенция</h3>
|
||
<button class="modal-close" onclick="closeCompetenceModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<img class="modal-image" id="competenceModalImage" alt="Увеличенное изображение компетенции">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script src="{% static 'programmer/js/competence.js' %}"></script>
|
||
{% endblock %} |