Andrey K. Choi
b51d79c5a1
Some checks failed
continuous-integration/drone/push Build is failing
- Fix CSS loading issue in project_detail.html template - Add comprehensive ModernMediaGallery JavaScript class with touch navigation - Implement glassmorphism design with backdrop-filter effects - Add responsive breakpoint system for mobile devices - Include embedded critical CSS styles for gallery functionality - Add technology sidebar with vertical list layout and hover effects - Support for images, videos, and embedded content with thumbnails - Add lightbox integration and media type badges - Implement progress bar and thumbnail navigation - Add keyboard controls (arrow keys) and touch swipe gestures - Include supplementary styles for video/embed placeholders - Fix template block naming compatibility (extra_css → extra_styles)
322 lines
11 KiB
HTML
322 lines
11 KiB
HTML
{% extends 'web/base_modern.html' %}
|
||
{% load static %}
|
||
{% block title %}Блог - SmartSolTech{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- Hero Section -->
|
||
<section class="hero-modern">
|
||
<div class="container-modern">
|
||
<div class="row justify-content-center text-center">
|
||
<div class="col-lg-8">
|
||
<div class="hero-content">
|
||
<h1 class="display-4 fw-bold mb-4">
|
||
<span class="text-gradient">Блог</span> SmartSolTech
|
||
</h1>
|
||
<p class="lead text-muted mb-5">
|
||
Новости, статьи и инсайты из мира IT и технологий
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Blog Posts Section -->
|
||
<section class="section-padding">
|
||
<div class="container-modern">
|
||
{% if blog_posts %}
|
||
<div class="row g-4">
|
||
{% for post in blog_posts %}
|
||
<div class="col-lg-4 col-md-6">
|
||
<article class="card-modern h-100 hover-lift">
|
||
<!-- Post Image/Video -->
|
||
{% if post.video %}
|
||
<div style="height: 250px; overflow: hidden; border-radius: 15px 15px 0 0; position: relative;">
|
||
<video class="w-100 h-100"
|
||
style="object-fit: cover;"
|
||
muted
|
||
{% if post.video_poster %}poster="{{ post.video_poster.url }}"{% endif %}>
|
||
<source src="{{ post.video.url }}" type="video/mp4">
|
||
{% if post.image %}
|
||
<img src="{{ post.image.url }}" class="w-100 h-100" style="object-fit: cover;" alt="{{ post.title }}">
|
||
{% endif %}
|
||
</video>
|
||
<div class="position-absolute top-0 end-0 p-3">
|
||
<span class="badge bg-primary">
|
||
<i class="fas fa-play"></i> Видео
|
||
</span>
|
||
</div>
|
||
<div class="position-absolute bottom-0 start-0 end-0 p-3" style="background: linear-gradient(transparent, rgba(0,0,0,0.7));">
|
||
<button class="btn btn-light btn-sm" onclick="this.closest('div').previousElementSibling.play()">
|
||
<i class="fas fa-play me-1"></i> Воспроизвести
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{% elif post.image %}
|
||
<div style="height: 250px; overflow: hidden; border-radius: 15px 15px 0 0;">
|
||
<img src="{{ post.image.url }}" alt="{{ post.title }}"
|
||
class="w-100 h-100"
|
||
style="object-fit: cover;"
|
||
loading="lazy">
|
||
</div>
|
||
{% else %}
|
||
<div class="w-100 bg-gradient d-flex align-items-center justify-content-center"
|
||
style="height: 250px; border-radius: 15px 15px 0 0;">
|
||
<i class="fas fa-newspaper text-white" style="font-size: 3rem; opacity: 0.7;"></i>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Post Content -->
|
||
<div class="card-body d-flex flex-column">
|
||
<div class="mb-3">
|
||
<span class="badge bg-primary-modern">
|
||
<i class="fas fa-newspaper me-1"></i>
|
||
Блог
|
||
</span>
|
||
</div>
|
||
|
||
<h3 class="h5 mb-3 text-dark">
|
||
<a href="{% url 'blog_post_detail' post.pk %}"
|
||
class="text-decoration-none text-dark hover-primary">
|
||
{{ post.title }}
|
||
</a>
|
||
</h3>
|
||
|
||
<div class="text-muted mb-3 flex-grow-1">
|
||
{% if post.content %}
|
||
<p>{{ post.content|striptags|truncatewords:20 }}</p>
|
||
{% else %}
|
||
<p>Нет описания...</p>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Post Meta -->
|
||
<div class="d-flex justify-content-between align-items-center mt-auto pt-3 border-top">
|
||
<small class="text-muted">
|
||
<i class="fas fa-calendar-alt me-1"></i>
|
||
{{ post.published_date|date:"d.m.Y" }}
|
||
</small>
|
||
<a href="{% url 'blog_post_detail' post.pk %}"
|
||
class="btn btn-sm btn-outline-primary">
|
||
Читать далее
|
||
<i class="fas fa-arrow-right ms-1"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- Pagination (если планируется) -->
|
||
<div class="text-center mt-5">
|
||
<div class="d-inline-flex align-items-center gap-3">
|
||
<span class="text-muted">Показано {{ blog_posts.count }} из {{ blog_posts.count }} постов</span>
|
||
</div>
|
||
</div>
|
||
|
||
{% else %}
|
||
<!-- Empty State -->
|
||
<div class="text-center py-5">
|
||
<div class="empty-state">
|
||
<div class="mb-4">
|
||
<i class="fas fa-newspaper text-muted" style="font-size: 4rem;"></i>
|
||
</div>
|
||
<h3 class="h4 mb-3">Пока нет постов в блоге</h3>
|
||
<p class="text-muted mb-4">
|
||
Мы работаем над созданием интересного контента для вас
|
||
</p>
|
||
<a href="{% url 'home' %}" class="btn btn-primary-modern">
|
||
<i class="fas fa-home me-2"></i>
|
||
На главную
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Newsletter Section -->
|
||
<section class="section-padding bg-light">
|
||
<div class="container-modern">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-6 text-center">
|
||
<div class="newsletter-cta">
|
||
<div class="mb-4">
|
||
<i class="fas fa-envelope text-primary" style="font-size: 3rem;"></i>
|
||
</div>
|
||
<h2 class="h3 mb-3">Следите за новостями</h2>
|
||
<p class="text-muted mb-4">
|
||
Подпишитесь на наши обновления, чтобы получать последние новости и статьи
|
||
</p>
|
||
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||
<a href="mailto:info@smartsoltech.kr" class="btn btn-primary-modern">
|
||
<i class="fas fa-envelope me-2"></i>
|
||
Связаться с нами
|
||
</a>
|
||
<a href="{% url 'services' %}" class="btn btn-outline-primary">
|
||
<i class="fas fa-cogs me-2"></i>
|
||
Наши услуги
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|
||
|
||
{% block extra_scripts %}
|
||
<script>
|
||
// Smooth scrolling for blog navigation
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Video play on hover
|
||
const videoCards = document.querySelectorAll('video');
|
||
videoCards.forEach(video => {
|
||
video.addEventListener('mouseenter', function() {
|
||
this.currentTime = 0;
|
||
this.play().catch(e => console.log('Video autoplay prevented'));
|
||
});
|
||
|
||
video.addEventListener('mouseleave', function() {
|
||
this.pause();
|
||
});
|
||
});
|
||
|
||
// Enhanced card hover effects
|
||
const cards = document.querySelectorAll('.hover-lift');
|
||
cards.forEach(card => {
|
||
card.addEventListener('mouseenter', function() {
|
||
this.style.transform = 'translateY(-10px)';
|
||
});
|
||
|
||
card.addEventListener('mouseleave', function() {
|
||
this.style.transform = 'translateY(0)';
|
||
});
|
||
});
|
||
});
|
||
|
||
// Search functionality (if needed later)
|
||
function searchBlogPosts(query) {
|
||
// Future implementation for blog search
|
||
console.log('Searching for:', query);
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.hover-lift {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.hover-lift:hover {
|
||
box-shadow: 0 15px 40px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.hover-primary:hover {
|
||
color: var(--primary-color) !important;
|
||
}
|
||
|
||
.card-modern article {
|
||
border: none;
|
||
}
|
||
|
||
.empty-state {
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.newsletter-cta {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 20px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* Blog post content styling */
|
||
.text-muted p {
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Video overlay improvements */
|
||
video {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
video:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* Mobile responsiveness */
|
||
@media (max-width: 768px) {
|
||
.hero-modern .display-4 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.newsletter-cta {
|
||
margin: 0 1rem;
|
||
}
|
||
|
||
.d-flex.justify-content-center.gap-3 {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.d-flex.justify-content-center.gap-3 .btn {
|
||
width: 100%;
|
||
max-width: 250px;
|
||
}
|
||
}
|
||
|
||
/* Print styles */
|
||
@media print {
|
||
.newsletter-cta,
|
||
.btn {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Enhanced accessibility */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.hover-lift,
|
||
video {
|
||
transition: none;
|
||
}
|
||
|
||
video:hover {
|
||
transform: none;
|
||
}
|
||
|
||
.hover-lift:hover {
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
/* Focus styles for better accessibility */
|
||
.hover-primary:focus {
|
||
outline: 2px solid var(--primary-color);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Loading states */
|
||
.card-modern img {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.card-modern img:not([src]) {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Enhanced video controls */
|
||
.position-absolute .btn:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* Custom scrollbar for mobile */
|
||
@media (max-width: 768px) {
|
||
.container-modern {
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %} |