deev.space/templates/includes/project_card.html
2025-12-03 04:39:24 +03:00

152 lines
No EOL
5.6 KiB
HTML

{% load custom_filters %}
<div class="project-card {{ project.card_size }}"
data-aos="fade-up"
data-aos-delay="{{ delay|default:0 }}00"
data-technologies="{{ project.technologies|lower }}">
{% if project.card_size == 'featured' %}
<!-- Featured Layout (Large) -->
<div class="project-image">
{% if project.img_main %}
<img src="{{ project.img_main.url }}" alt="{{ project.title }}" loading="lazy">
{% else %}
<div class="project-image-placeholder">
<i class="{{ project.icon|default:'fas fa-code' }}"></i>
</div>
{% endif %}
<div class="project-logo">
<i class="{{ project.icon|default:'fas fa-code' }}"></i>
</div>
<span class="project-status {{ project.status|status_class }}">
{{ project.status|status_label }}
</span>
</div>
<div class="project-content">
<h3 class="project-title">
{{ project.title }}
{% if project.users_count %}
<span class="project-users">
<i class="fas fa-users"></i>
{{ project.users_count }}
</span>
{% endif %}
</h3>
<p class="project-description">{{ project.short_description }}</p>
{% if project.features %}
<ul class="project-features">
{% for feature in project.get_features_list|slice:":3" %}
<li><i class="fas fa-check"></i> {{ feature }}</li>
{% endfor %}
</ul>
{% endif %}
<div class="project-tech">
{% for tech in project.get_technologies_list|slice:":6" %}
<span class="tech-badge">
<i class="{{ tech|tech_icon }}"></i>
{{ tech }}
</span>
{% endfor %}
</div>
<div class="project-links">
{% if project.github_url %}
<a href="{{ project.github_url }}" target="_blank" rel="noopener" class="project-link">
<i class="fab fa-github"></i>
GitHub
</a>
{% endif %}
{% if project.demo_url %}
<a href="{{ project.demo_url }}" target="_blank" rel="noopener" class="project-link">
<i class="fas fa-external-link-alt"></i>
Демо
</a>
{% endif %}
</div>
</div>
{% elif project.card_size == 'small' %}
<!-- Small Layout (Compact) -->
<div class="project-content">
<div class="project-logo-small">
<i class="{{ project.icon|default:'fas fa-code' }}"></i>
</div>
<h3 class="project-title">{{ project.title }}</h3>
<span class="project-status {{ project.status|status_class }}">
{{ project.status|status_label }}
</span>
<div class="project-tech">
{% for tech in project.get_technologies_list|slice:":2" %}
<span class="tech-badge">
<i class="{{ tech|tech_icon }}"></i>
{{ tech }}
</span>
{% endfor %}
</div>
</div>
{% else %}
<!-- Regular Layout -->
<div class="project-image">
{% if project.img_main %}
<img src="{{ project.img_main.url }}" alt="{{ project.title }}" loading="lazy">
{% else %}
<div class="project-image-placeholder">
<i class="{{ project.icon|default:'fas fa-code' }}"></i>
</div>
{% endif %}
<div class="project-logo">
<i class="{{ project.icon|default:'fas fa-code' }}"></i>
</div>
<span class="project-status {{ project.status|status_class }}">
{{ project.status|status_label }}
</span>
</div>
<div class="project-content">
<h3 class="project-title">
{{ project.title }}
{% if project.users_count %}
<span class="project-users">
<i class="fas fa-users"></i>
{{ project.users_count }}
</span>
{% endif %}
</h3>
<p class="project-description">{{ project.short_description }}</p>
<div class="project-tech">
{% for tech in project.get_technologies_list|slice:":4" %}
<span class="tech-badge">
<i class="{{ tech|tech_icon }}"></i>
{{ tech }}
</span>
{% endfor %}
</div>
<div class="project-links">
{% if project.github_url %}
<a href="{{ project.github_url }}" target="_blank" rel="noopener" class="project-link">
<i class="fab fa-github"></i>
GitHub
</a>
{% endif %}
{% if project.demo_url %}
<a href="{{ project.demo_url }}" target="_blank" rel="noopener" class="project-link">
<i class="fas fa-external-link-alt"></i>
Демо
</a>
{% endif %}
</div>
</div>
{% endif %}
</div>