Implement modern media gallery with enhanced features

- 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)
2025-11-26 18:52:07 +09:00
parent 8e1751ef5d
commit b51d79c5a1
18 changed files with 9277 additions and 353 deletions
--- a/smartsoltech/web/migrations/0015_projectcategory_remove_portfolioitem_categories_and_more.py
+++ b/smartsoltech/web/migrations/0015_projectcategory_remove_portfolioitem_categories_and_more.py
@@ -179,7 +179,7 @@ class Migration(migrations.Migration):
        migrations.AddField(
            model_name='project',
            name='categories',
-            field=models.ManyToManyField(blank=True, related_name='projects', to='web.projectcategory', verbose_name='Категории'),
+            field=models.ManyToManyField(blank=True, related_name='projects', to='web.category', verbose_name='Категории'),
        ),
        migrations.CreateModel(
            name='ProjectMedia',
--- a/smartsoltech/web/migrations/0016_delete_projectcategory_alter_category_options_and_more.py
+++ b/smartsoltech/web/migrations/0016_delete_projectcategory_alter_category_options_and_more.py
@@ -38,11 +38,8 @@ class Migration(migrations.Migration):
            name='slug',
            field=models.SlugField(blank=True, max_length=100, null=True, unique=True, verbose_name='URL'),
        ),
-        migrations.AlterField(
-            model_name='project',
-            name='categories',
-            field=models.ManyToManyField(blank=True, related_name='projects', to='web.category', verbose_name='Категории'),
-        ),
+        # Удаляем проблемную операцию изменения ManyToManyField
+        # Поле уже существует с нужными параметрами
        migrations.AlterField(
            model_name='projectmedia',
            name='project',
--- a/smartsoltech/web/migrations/0017_auto_20251126_0146.py
+++ b/smartsoltech/web/migrations/0017_auto_20251126_0146.py
@@ -0,0 +1,13 @@
+# Generated by Django 5.1.1 on 2025-11-26 01:46
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0016_delete_projectcategory_alter_category_options_and_more'),
+    ]
+
+    operations = [
+    ]
--- a/smartsoltech/web/migrations/0018_fix_project_categories_column.py
+++ b/smartsoltech/web/migrations/0018_fix_project_categories_column.py
@@ -0,0 +1,47 @@
+# Fix for column name in project categories table
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0017_auto_20251126_0146'),
+    ]
+
+    operations = [
+        migrations.RunSQL(
+            # Forward SQL - rename column and fix constraints
+            """
+            -- Rename the column if it still exists as projectcategory_id
+            DO $$
+            BEGIN
+                IF EXISTS (
+                    SELECT column_name 
+                    FROM information_schema.columns 
+                    WHERE table_name = 'web_project_categories' 
+                    AND column_name = 'projectcategory_id'
+                ) THEN
+                    ALTER TABLE web_project_categories RENAME COLUMN projectcategory_id TO category_id;
+                    
+                    -- Add foreign key constraint if it doesn't exist
+                    IF NOT EXISTS (
+                        SELECT constraint_name 
+                        FROM information_schema.table_constraints 
+                        WHERE table_name = 'web_project_categories' 
+                        AND constraint_name = 'web_project_categories_category_id_fk'
+                    ) THEN
+                        ALTER TABLE web_project_categories 
+                        ADD CONSTRAINT web_project_categories_category_id_fk 
+                        FOREIGN KEY (category_id) REFERENCES web_category(id) ON DELETE CASCADE;
+                    END IF;
+                END IF;
+            END $$;
+            """,
+            # Reverse SQL
+            """
+            ALTER TABLE web_project_categories RENAME COLUMN category_id TO projectcategory_id;
+            ALTER TABLE web_project_categories DROP CONSTRAINT IF EXISTS web_project_categories_category_id_fk;
+            """
+        ),
+    ]
--- a/smartsoltech/web/templates/web/blog.html
+++ b/smartsoltech/web/templates/web/blog.html
@@ -0,0 +1,322 @@
+{% 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 %}
--- a/smartsoltech/web/templates/web/blog_post_detail.html
+++ b/smartsoltech/web/templates/web/blog_post_detail.html
@@ -0,0 +1,399 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+{% block title %}{{ blog_post.title }} - SmartSolTech{% endblock %}
+
+{% block content %}
+<!-- Hero Section -->
+<section class="hero-modern">
+    <div class="container-modern">
+        <div class="row gy-4 align-items-center">
+            <div class="col-lg-8 mx-auto text-center">
+                <div class="blog-header">
+                    <div class="mb-3">
+                        <span class="badge bg-primary-modern">
+                            <i class="fas fa-newspaper me-1"></i>
+                            Блог
+                        </span>
+                    </div>
+                    <h1 class="display-5 fw-bold mb-4">{{ blog_post.title }}</h1>
+                    <div class="blog-meta d-flex justify-content-center align-items-center flex-wrap gap-3 text-muted">
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-calendar-alt me-2"></i>
+                            <span>{{ blog_post.published_date|date:"d.m.Y" }}</span>
+                        </div>
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-clock me-2"></i>
+                            <span>{{ blog_post.published_date|date:"H:i" }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Blog Content -->
+<section class="section-padding">
+    <div class="container-modern">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <!-- Featured Image/Video -->
+                {% if blog_post.video %}
+                <div class="mb-5">
+                    <video class="w-100 rounded-4 shadow-lg" 
+                           style="max-height: 500px; object-fit: cover;" 
+                           controls
+                           {% if blog_post.video_poster %}poster="{{ blog_post.video_poster.url }}"{% endif %}>
+                        <source src="{{ blog_post.video.url }}" type="video/mp4">
+                        {% if blog_post.image %}
+                            <!-- Fallback image if video not supported -->
+                            <img src="{{ blog_post.image.url }}" class="w-100 rounded-4 shadow-lg" style="max-height: 500px; object-fit: cover;" alt="{{ blog_post.title }}">
+                        {% endif %}
+                        Ваш браузер не поддерживает видео.
+                    </video>
+                </div>
+                {% elif blog_post.image %}
+                <div class="mb-5">
+                    <img class="w-100 rounded-4 shadow-lg" 
+                         style="max-height: 500px; object-fit: cover;" 
+                         src="{{ blog_post.image.url }}" 
+                         alt="{{ blog_post.title }}" />
+                </div>
+                {% endif %}
+                
+                <!-- Blog Content -->
+                <div class="blog-content">
+                    <div class="content-wrapper">
+                        {{ blog_post.content|safe }}
+                    </div>
+                </div>
+                
+                <!-- Blog Navigation -->
+                <div class="blog-navigation mt-5 pt-4 border-top">
+                    <div class="row align-items-center">
+                        <div class="col-auto">
+                            <a href="{% url 'home' %}#blog" class="btn btn-outline-primary">
+                                <i class="fas fa-arrow-left me-2"></i>
+                                Вернуться к блогу
+                            </a>
+                        </div>
+                        <div class="col text-end">
+                            <!-- Social Share Buttons -->
+                            <div class="share-buttons">
+                                <span class="text-muted me-3">Поделиться:</span>
+                                <a href="javascript:void(0)" 
+                                   onclick="shareToSocial('telegram')" 
+                                   class="btn btn-sm btn-outline-primary me-2" 
+                                   title="Поделиться в Telegram">
+                                    <i class="fab fa-telegram"></i>
+                                </a>
+                                <a href="javascript:void(0)" 
+                                   onclick="shareToSocial('whatsapp')" 
+                                   class="btn btn-sm btn-outline-success me-2" 
+                                   title="Поделиться в WhatsApp">
+                                    <i class="fab fa-whatsapp"></i>
+                                </a>
+                                <a href="javascript:void(0)" 
+                                   onclick="shareToSocial('copy')" 
+                                   class="btn btn-sm btn-outline-secondary" 
+                                   title="Скопировать ссылку">
+                                    <i class="fas fa-copy"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Sidebar -->
+            <div class="col-lg-4">
+                <div class="blog-sidebar">
+                    <!-- Contact CTA -->
+                    <div class="card-modern mb-4">
+                        <div class="card-body text-center">
+                            <div class="mb-3">
+                                <i class="fas fa-comments text-primary" style="font-size: 2rem;"></i>
+                            </div>
+                            <h5 class="mb-3">Есть вопросы?</h5>
+                            <p class="text-muted mb-4">
+                                Свяжитесь с нами для бесплатной консультации
+                            </p>
+                            <a href="mailto:info@smartsoltech.kr" class="btn btn-primary-modern">
+                                <i class="fas fa-envelope me-2"></i>
+                                Написать нам
+                            </a>
+                        </div>
+                    </div>
+                    
+                    <!-- Services CTA -->
+                    <div class="card-modern">
+                        <div class="card-body">
+                            <h6 class="mb-3">
+                                <i class="fas fa-cogs text-primary me-2"></i>
+                                Наши услуги
+                            </h6>
+                            <div class="d-grid gap-2">
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-laptop-code me-2"></i>
+                                    Веб-разработка
+                                </a>
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-mobile-alt me-2"></i>
+                                    Мобильные приложения
+                                </a>
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-chart-line me-2"></i>
+                                    IT консалтинг
+                                </a>
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-cloud me-2"></i>
+                                    Облачные решения
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- CTA Section -->
+<section class="section-padding bg-gradient text-white">
+    <div class="container-modern text-center">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <h2 class="display-6 fw-bold mb-4">
+                    Готовы обсудить ваш проект?
+                </h2>
+                <p class="lead mb-5 opacity-90">
+                    Получите бесплатную консультацию от наших экспертов
+                </p>
+                <div class="d-flex flex-wrap gap-3 justify-content-center">
+                    <a href="mailto:info@smartsoltech.kr" class="btn btn-light btn-lg text-primary">
+                        <i class="fas fa-envelope me-2"></i>
+                        Связаться с нами
+                    </a>
+                    <a href="{% url 'services' %}" class="btn btn-outline-light btn-lg">
+                        <i class="fas fa-th-large me-2"></i>
+                        Наши услуги
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Social sharing functionality
+function shareToSocial(platform) {
+    const url = encodeURIComponent(window.location.href);
+    const title = encodeURIComponent('{{ blog_post.title|addslashes }}');
+    const text = encodeURIComponent('{{ blog_post.title|addslashes }} - SmartSolTech');
+    
+    let shareUrl = '';
+    
+    switch(platform) {
+        case 'telegram':
+            shareUrl = `https://t.me/share/url?url=${url}&text=${text}`;
+            break;
+        case 'whatsapp':
+            shareUrl = `https://wa.me/?text=${text}%20${url}`;
+            break;
+        case 'copy':
+            navigator.clipboard.writeText(window.location.href).then(() => {
+                // Show success message
+                const btn = event.target.closest('a');
+                const originalIcon = btn.innerHTML;
+                btn.innerHTML = '<i class="fas fa-check"></i>';
+                btn.classList.add('btn-success');
+                btn.classList.remove('btn-outline-secondary');
+                
+                setTimeout(() => {
+                    btn.innerHTML = originalIcon;
+                    btn.classList.remove('btn-success');
+                    btn.classList.add('btn-outline-secondary');
+                }, 2000);
+            }).catch(err => {
+                console.error('Failed to copy: ', err);
+            });
+            return;
+    }
+    
+    if (shareUrl) {
+        window.open(shareUrl, '_blank', 'width=550,height=420');
+    }
+}
+
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});
+</script>
+
+<style>
+.blog-header {
+    margin-bottom: 2rem;
+}
+
+.blog-meta {
+    font-size: 0.9rem;
+}
+
+.blog-content {
+    line-height: 1.8;
+    font-size: 1.1rem;
+}
+
+.blog-content h1,
+.blog-content h2,
+.blog-content h3,
+.blog-content h4,
+.blog-content h5,
+.blog-content h6 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+.blog-content p {
+    margin-bottom: 1.5rem;
+    color: var(--text-secondary);
+}
+
+.blog-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 1.5rem 0;
+}
+
+.blog-content blockquote {
+    border-left: 4px solid var(--primary-color);
+    background: var(--bg-light);
+    padding: 1rem 1.5rem;
+    margin: 1.5rem 0;
+    border-radius: 0 8px 8px 0;
+    font-style: italic;
+}
+
+.blog-content ul,
+.blog-content ol {
+    margin-bottom: 1.5rem;
+    padding-left: 2rem;
+}
+
+.blog-content li {
+    margin-bottom: 0.5rem;
+}
+
+.blog-content pre {
+    background: var(--bg-dark);
+    color: var(--text-light);
+    padding: 1.5rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 1.5rem 0;
+}
+
+.blog-content code {
+    background: var(--bg-light);
+    color: var(--primary-color);
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+}
+
+.blog-content pre code {
+    background: none;
+    color: inherit;
+    padding: 0;
+}
+
+.blog-sidebar {
+    position: sticky;
+    top: 2rem;
+}
+
+.share-buttons a {
+    transition: transform 0.2s ease;
+}
+
+.share-buttons a:hover {
+    transform: translateY(-2px);
+}
+
+.blog-navigation {
+    background: var(--bg-light);
+    padding: 1.5rem;
+    border-radius: 12px;
+}
+
+/* Content typography improvements */
+.content-wrapper {
+    font-family: 'Georgia', serif;
+}
+
+.content-wrapper h1 { font-size: 2.5rem; }
+.content-wrapper h2 { font-size: 2rem; }
+.content-wrapper h3 { font-size: 1.5rem; }
+.content-wrapper h4 { font-size: 1.25rem; }
+.content-wrapper h5 { font-size: 1.1rem; }
+.content-wrapper h6 { font-size: 1rem; }
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+    .blog-header h1 {
+        font-size: 2rem;
+    }
+    
+    .blog-meta {
+        font-size: 0.8rem;
+    }
+    
+    .share-buttons {
+        margin-top: 1rem;
+    }
+    
+    .share-buttons span {
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+    
+    .blog-sidebar {
+        position: relative;
+        top: auto;
+        margin-top: 2rem;
+    }
+    
+    .content-wrapper h1 { font-size: 1.8rem; }
+    .content-wrapper h2 { font-size: 1.5rem; }
+    .content-wrapper h3 { font-size: 1.3rem; }
+}
+
+/* Print styles */
+@media print {
+    .blog-navigation,
+    .blog-sidebar,
+    .share-buttons {
+        display: none;
+    }
+    
+    .blog-content {
+        font-size: 12pt;
+        line-height: 1.5;
+    }
+}
+</style>
+{% endblock %}
--- a/smartsoltech/web/templates/web/gallery_preview.html
+++ b/smartsoltech/web/templates/web/gallery_preview.html
@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Предпросмотр современной галереи</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    
+    <!-- Lightbox2 CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
+    
+    <!-- Наши стили -->
+    <link href="../../static/assets/css/compact-gallery.css" rel="stylesheet">
+    
+    <style>
+        body {
+            background: #f8fafc;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            padding: 2rem 0;
+        }
+        
+        .container {
+            max-width: 1200px;
+        }
+        
+        .preview-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .preview-header h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #1e293b;
+            margin-bottom: 1rem;
+        }
+        
+        .preview-header p {
+            font-size: 1.2rem;
+            color: #64748b;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="preview-header">
+            <h1>Современная медиа-галерея</h1>
+            <p>Интерактивная галерея с навигацией, миниатюрами и полноэкранным просмотром</p>
+        </div>
+        
+        <!-- Современная медиа-галерея -->
+        <div class="modern-media-gallery">
+            <!-- Основное медиа -->
+            <div class="main-media-container">
+                <div class="main-media-wrapper">
+                    <!-- Медиа элементы -->
+                    <div class="main-media-item active" data-index="0">
+                        <img src="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение+1" 
+                             alt="Изображение 1" class="main-media-img">
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Название изображения</div>
+                                <div class="media-meta">Фото • 1920x1080 • 2.3 MB</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openLightbox(0)">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="1">
+                        <img src="https://via.placeholder.com/800x500/7c3aed/ffffff?text=Главное+изображение+2" 
+                             alt="Изображение 2" class="main-media-img">
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Второе изображение</div>
+                                <div class="media-meta">Фото • 1920x1080 • 1.8 MB</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openLightbox(1)">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="2">
+                        <video class="main-media-video" controls>
+                            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
+                        </video>
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Демо видео</div>
+                                <div class="media-meta">Видео • MP4 • 1:32</div>
+                            </div>
+                            <button class="media-action-btn" onclick="toggleVideo(2)">
+                                <i class="fas fa-play"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="3">
+                        <div class="embed-container">
+                            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
+                                    class="main-media-embed" 
+                                    allowfullscreen></iframe>
+                        </div>
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">YouTube видео</div>
+                                <div class="media-meta">Встраивание • YouTube</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openFullscreen(3)">
+                                <i class="fas fa-external-link-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="4">
+                        <img src="https://via.placeholder.com/800x500/06b6d4/ffffff?text=Главное+изображение+3" 
+                             alt="Изображение 3" class="main-media-img">
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Третье изображение</div>
+                                <div class="media-meta">Фото • 1920x1080 • 3.1 MB</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openLightbox(4)">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Навигационные кнопки -->
+                    <button class="media-nav-btn prev-btn" onclick="gallery.previousMedia()">
+                        <i class="fas fa-chevron-left"></i>
+                    </button>
+                    
+                    <button class="media-nav-btn next-btn" onclick="gallery.nextMedia()">
+                        <i class="fas fa-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Индикатор прогресса -->
+            <div class="gallery-progress">
+                <div class="progress-bar" style="width: 20%"></div>
+            </div>
+            
+            <!-- Миниатюры -->
+            <div class="thumbnails-container">
+                <div class="thumbnails-wrapper">
+                    <div class="thumbnail-item active" data-index="0" onclick="gallery.switchToMedia(0)">
+                        <img src="https://via.placeholder.com/80x60/4f46e5/ffffff?text=1" alt="Thumb 1" class="thumbnail-img">
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">1</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="1" onclick="gallery.switchToMedia(1)">
+                        <img src="https://via.placeholder.com/80x60/7c3aed/ffffff?text=2" alt="Thumb 2" class="thumbnail-img">
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">2</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="2" onclick="gallery.switchToMedia(2)">
+                        <div class="video-thumbnail-placeholder">
+                            <i class="fas fa-play"></i>
+                        </div>
+                        <div class="media-type-badge video">
+                            <i class="fas fa-play"></i>
+                        </div>
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">3</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="3" onclick="gallery.switchToMedia(3)">
+                        <div class="embed-thumbnail-placeholder">
+                            <i class="fab fa-youtube"></i>
+                        </div>
+                        <div class="media-type-badge embed">
+                            <i class="fas fa-link"></i>
+                        </div>
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">4</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="4" onclick="gallery.switchToMedia(4)">
+                        <img src="https://via.placeholder.com/80x60/06b6d4/ffffff?text=3" alt="Thumb 3" class="thumbnail-img">
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">5</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Lightbox2 JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
+
+    <script>
+        // Класс для управления современной галереей
+        class ModernMediaGallery {
+            constructor(container) {
+                this.container = container;
+                this.mediaItems = container.querySelectorAll('.main-media-item');
+                this.thumbnails = container.querySelectorAll('.thumbnail-item');
+                this.progressBar = container.querySelector('.progress-bar');
+                this.currentIndex = 0;
+                
+                this.initGallery();
+                this.bindEvents();
+            }
+            
+            initGallery() {
+                this.updateProgress();
+                this.preloadMedia();
+            }
+            
+            bindEvents() {
+                // Клавиатурные события
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        this.previousMedia();
+                    } else if (e.key === 'ArrowRight') {
+                        e.preventDefault();
+                        this.nextMedia();
+                    }
+                });
+                
+                // Touch события для свайпа
+                let startX = 0;
+                let startY = 0;
+                
+                this.container.addEventListener('touchstart', (e) => {
+                    startX = e.touches[0].clientX;
+                    startY = e.touches[0].clientY;
+                }, { passive: true });
+                
+                this.container.addEventListener('touchend', (e) => {
+                    const endX = e.changedTouches[0].clientX;
+                    const endY = e.changedTouches[0].clientY;
+                    
+                    const deltaX = endX - startX;
+                    const deltaY = endY - startY;
+                    
+                    // Проверяем, что это горизонтальный свайп
+                    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
+                        if (deltaX > 0) {
+                            this.previousMedia();
+                        } else {
+                            this.nextMedia();
+                        }
+                    }
+                }, { passive: true });
+            }
+            
+            switchToMedia(index) {
+                if (index === this.currentIndex) return;
+                
+                // Останавливаем текущее видео
+                this.stopCurrentVideo();
+                
+                // Обновляем активные элементы
+                this.mediaItems[this.currentIndex].classList.remove('active');
+                this.thumbnails[this.currentIndex].classList.remove('active');
+                
+                this.currentIndex = index;
+                
+                this.mediaItems[this.currentIndex].classList.add('active');
+                this.thumbnails[this.currentIndex].classList.add('active');
+                
+                this.updateProgress();
+                this.scrollToActiveThumbnail();
+            }
+            
+            nextMedia() {
+                const nextIndex = (this.currentIndex + 1) % this.mediaItems.length;
+                this.switchToMedia(nextIndex);
+            }
+            
+            previousMedia() {
+                const prevIndex = (this.currentIndex - 1 + this.mediaItems.length) % this.mediaItems.length;
+                this.switchToMedia(prevIndex);
+            }
+            
+            updateProgress() {
+                const progress = ((this.currentIndex + 1) / this.mediaItems.length) * 100;
+                this.progressBar.style.width = `${progress}%`;
+            }
+            
+            scrollToActiveThumbnail() {
+                const activeThumbnail = this.thumbnails[this.currentIndex];
+                const container = activeThumbnail.parentElement;
+                
+                const thumbnailOffsetLeft = activeThumbnail.offsetLeft;
+                const thumbnailWidth = activeThumbnail.offsetWidth;
+                const containerWidth = container.offsetWidth;
+                
+                const scrollLeft = thumbnailOffsetLeft - (containerWidth / 2) + (thumbnailWidth / 2);
+                container.scrollTo({
+                    left: scrollLeft,
+                    behavior: 'smooth'
+                });
+            }
+            
+            stopCurrentVideo() {
+                const currentItem = this.mediaItems[this.currentIndex];
+                const video = currentItem.querySelector('video');
+                if (video) {
+                    video.pause();
+                }
+            }
+            
+            preloadMedia() {
+                this.mediaItems.forEach((item, index) => {
+                    if (index <= 2) { // Предзагружаем первые 3 элемента
+                        const img = item.querySelector('img');
+                        if (img && !img.complete) {
+                            // Изображение уже загружается
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Инициализация галереи
+        let gallery;
+        
+        document.addEventListener('DOMContentLoaded', function() {
+            const galleryContainer = document.querySelector('.modern-media-gallery');
+            if (galleryContainer) {
+                gallery = new ModernMediaGallery(galleryContainer);
+            }
+        });
+        
+        // Глобальные функции для интерактивности
+        function openLightbox(index) {
+            // Функция для открытия изображения в лайтбоксе
+            console.log('Открытие лайтбокса для изображения', index);
+        }
+        
+        function toggleVideo(index) {
+            const video = gallery.mediaItems[index].querySelector('video');
+            if (video.paused) {
+                video.play();
+            } else {
+                video.pause();
+            }
+        }
+        
+        function openFullscreen(index) {
+            // Функция для открытия встраиваемого контента в полном экране
+            console.log('Открытие в полном экране', index);
+        }
+    </script>
+</body>
+</html>
--- a/smartsoltech/web/templates/web/home_modern.html
+++ b/smartsoltech/web/templates/web/home_modern.html
@@ -901,60 +901,64 @@ document.addEventListener('DOMContentLoaded', function() {
                // Показываем текст активного индикатора
                const title = indicator.querySelector('.pill-indicator-title');
                if (title) {
-                    indicator.style.color = '#333';
-                    title.style.opacity = '1';
-                    title.style.transform = 'scale(1)';
+                    // Убираем inline стили, чтобы CSS правила работали корректно
+                    indicator.style.color = '';
+                    title.style.opacity = '';
+                    title.style.transform = '';
                }
            } else {
                indicator.classList.remove('active');
-                // Скрываем текст неактивных индикаторов
+                // Скрываем текст неактивных индикаторов и убираем inline стили
                const title = indicator.querySelector('.pill-indicator-title');
                if (title) {
-                    indicator.style.color = 'transparent';
-                    title.style.opacity = '0';
-                    title.style.transform = 'scale(0.8)';
+                    indicator.style.color = '';
+                    title.style.opacity = '';
+                    title.style.transform = '';
+                    // Убираем любые hover эффекты
+                    indicator.style.transform = '';
+                    indicator.style.background = '';
                }
            }
        });
        
-        // Обновляем ширину внешней пилюли
+        // Динамический расчет ширины внешнего контейнера
        setTimeout(() => {
-            if (outerPill) {
-                const activeIndicator = indicators[index];
+            if (outerPill && indicators.length > 0) {
+                let totalWidth = 0;
                
-                if (activeIndicator) {
-                    // Даем время для применения стилей активного элемента
-                    setTimeout(() => {
-                        // Вычисляем ширину активной пилюли на основе текста
-                        const titleElement = activeIndicator.querySelector('.pill-indicator-title');
-                        let activePillWidth = 80; // минимальная ширина активного элемента
-                        
-                        if (titleElement && titleElement.textContent) {
-                            // Формула: длина текста * 8px + padding (32px) + min-width
-                            const textLength = titleElement.textContent.length;
-                            activePillWidth = Math.max(textLength * 8 + 32, 80);
-                        }
-                        
-                        // Количество неактивных маркеров
-                        const inactiveCount = indicators.length - 1;
-                        
-                        // Ширина неактивных элементов: 32px каждый + margin 4px между ними
-                        const inactiveWidth = inactiveCount * 32 + (inactiveCount > 0 ? inactiveCount * 4 : 0);
-                        
-                        // Margin активного элемента: 16px (8px с каждой стороны)
-                        const activeMargin = inactiveCount > 0 ? 16 : 0;
-                        
-                        // Общая ширина: активный + неактивные + margin + padding контейнера
-                        const totalWidth = activePillWidth + inactiveWidth + activeMargin + 32;
-                        
-                        console.log('Active pill width:', activePillWidth, 'Inactive width:', inactiveWidth, 'Total:', totalWidth);
-                        
-                        outerPill.style.width = totalWidth + 'px';
-                        outerPill.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
-                    }, 50);
-                }
+                // Проходим по всем маркерам и суммируем их ширины
+                indicators.forEach((indicator, i) => {
+                    if (i === index && indicator.classList.contains('active')) {
+                        // Активный маркер - измеряем его реальную ширину
+                        const rect = indicator.getBoundingClientRect();
+                        totalWidth += rect.width || 60; // fallback к минимальной ширине
+                    } else {
+                        // Неактивный маркер - фиксированная ширина 36px
+                        totalWidth += 36;
+                    }
+                    
+                    // Добавляем gap между маркерами (16px), кроме последнего
+                    if (i < indicators.length - 1) {
+                        totalWidth += 16;
+                    }
+                });
+                
+                // Добавляем padding контейнера: 10px слева + 10px справа
+                totalWidth += 20;
+                
+                // Применяем новую ширину
+                outerPill.style.width = totalWidth + 'px';
+                
+                console.log('Pill state update:');
+                console.log('- Active index:', index);
+                console.log('- Total width:', totalWidth + 'px');
+                console.log('- Active element width:', 
+                    indicators[index] ? indicators[index].getBoundingClientRect().width + 'px' : 'N/A');
+                console.log('- Inactive elements count:', indicators.length - 1);
+                console.log('- Gaps total:', (indicators.length - 1) * 16 + 'px');
+                console.log('- Padding total: 20px');
            }
-        }, 10);
+        }, 50);
        
        currentActiveIndex = index;
    }
@@ -981,19 +985,23 @@ document.addEventListener('DOMContentLoaded', function() {
            if (!this.classList.contains('active')) {
                this.style.transform = 'scale(1.1)';
                this.style.background = 'rgba(255, 255, 255, 0.6)';
+                this.style.borderColor = 'rgba(255, 255, 255, 0.7)';
            }
        });
        
        indicator.addEventListener('mouseleave', function() {
            if (!this.classList.contains('active')) {
-                this.style.transform = 'scale(1)';
-                this.style.background = 'rgba(255, 255, 255, 0.4)';
+                // Возвращаем к исходному состоянию
+                this.style.transform = '';
+                this.style.background = '';
+                this.style.borderColor = '';
            }
        });
    });
    
    // Bootstrap carousel события
    if (carousel) {
+        // Обработка начала смены слайда
        carousel.addEventListener('slide.bs.carousel', function(event) {
            const nextIndex = event.to;
            console.log('Carousel sliding to:', nextIndex);
@@ -1007,25 +1015,74 @@ document.addEventListener('DOMContentLoaded', function() {
                }, 400);
            }
            
+            // Обновляем состояние пилюли сразу при начале смены слайда
            updatePillState(nextIndex);
        });
        
-        // Инициализируем первое состояние
+        // Дополнительная обработка завершения смены слайда для надежности
+        carousel.addEventListener('slid.bs.carousel', function(event) {
+            const currentIndex = event.to;
+            console.log('Carousel slide completed:', currentIndex);
+            
+            // Дополнительное обновление состояния для гарантии корректного отображения
+            setTimeout(() => {
+                updatePillState(currentIndex);
+            }, 100);
+        });
+        
+        // Инициализируем первое состояние и рассчитываем начальную ширину
        setTimeout(() => {
            console.log('Initializing pill state...');
            updatePillState(0);
+            
+            // Дополнительная инициализация ширины контейнера
+            if (outerPill && indicators.length > 0) {
+                let initialWidth = 20; // padding
+                
+                // Первый элемент активный, остальные неактивные
+                indicators.forEach((indicator, i) => {
+                    if (i === 0) {
+                        // Даем время активному элементу развернуться
+                        setTimeout(() => {
+                            const rect = indicator.getBoundingClientRect();
+                            let width = 20 + rect.width; // padding + активный элемент
+                            
+                            // Добавляем неактивные элементы
+                            if (indicators.length > 1) {
+                                width += (indicators.length - 1) * 36; // неактивные элементы
+                                width += (indicators.length - 1) * 16; // gaps между элементами
+                            }
+                            
+                            outerPill.style.width = width + 'px';
+                            console.log('Initial container width:', width + 'px');
+                        }, 100);
+                    }
+                });
+            }
        }, 200);
    }
    
-    // Отслеживаем изменения размеров активного элемента
-    if (window.ResizeObserver) {
+    // Отслеживаем изменения размеров активного элемента для пересчета ширины
+    if (window.ResizeObserver && outerPill) {
        const resizeObserver = new ResizeObserver(entries => {
-            if (outerPill) {
-                const activeIndicator = indicators[currentActiveIndex];
-                if (activeIndicator && activeIndicator.classList.contains('active')) {
-                    updatePillState(currentActiveIndex);
+            // Пересчитываем ширину контейнера при изменении размеров
+            let totalWidth = 0;
+            
+            indicators.forEach((indicator, i) => {
+                if (indicator.classList.contains('active')) {
+                    const rect = indicator.getBoundingClientRect();
+                    totalWidth += rect.width;
+                } else {
+                    totalWidth += 36;
                }
-            }
+                
+                if (i < indicators.length - 1) {
+                    totalWidth += 16;
+                }
+            });
+            
+            totalWidth += 20; // padding
+            outerPill.style.width = totalWidth + 'px';
        });
        
        indicators.forEach(indicator => {
--- a/smartsoltech/web/templates/web/project_detail.html
+++ b/smartsoltech/web/templates/web/project_detail.html
--- a/smartsoltech/web/templates/web/projects_list.html
+++ b/smartsoltech/web/templates/web/projects_list.html
@@ -49,88 +49,139 @@

 .projects-grid {
    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    max-width: 100%;
    gap: 2rem;
    margin-bottom: 3rem;
 }

-@media (max-width: 992px) {
-    .projects-grid {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 1.5rem;
-    }
-}
-
-@media (max-width: 576px) {
-    .projects-grid {
-        grid-template-columns: 1fr;
-        gap: 1.5rem;
-    }
-}
-
+/* Ограничиваем максимальный размер карточки */
 .project-card {
+    max-width: 400px;
+    width: 100%;
    background: white;
    border-radius: 20px;
    overflow: hidden;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-    transition: box-shadow 0.3s ease !important;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
+    transition: all 0.3s ease;
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
+    border: 1px solid #f1f5f9;
 }

 .project-card:hover {
-    box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
-    transform: none !important;
+    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
+    transform: translateY(-5px);
+    border-color: #e2e8f0;
 }

-.project-thumbnail {
+/* Верхняя часть карточки - медиа контент */
+.project-media {
    width: 100%;
-    height: 200px;
+    height: 180px;
    overflow: hidden;
    position: relative;
-    background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
+    background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
 }

-.project-thumbnail img {
+.project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
-    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    will-change: transform;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

-.project-card:hover .project-thumbnail img {
-    transform: scale(1.15) translateY(-10px) !important;
+.project-card:hover .project-media img {
+    transform: scale(1.08);
 }

-.project-thumbnail::after {
+.project-media video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+/* Заглушка для проектов без изображения */
+.project-media.no-image {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+}
+
+.project-media.no-image::before {
+    content: '\f1c2'; /* FontAwesome folder icon */
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+    font-size: 2.5rem;
+    opacity: 0.7;
+}
+
+.project-media::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
-    height: 50%;
-    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
+    height: 40%;
+    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    pointer-events: none;
 }

+/* Медиа плеер для видео */
+.media-player {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.play-btn {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    color: #667eea;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+}
+
+.play-btn:hover {
+    background: white;
+    transform: translate(-50%, -50%) scale(1.1);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+}
+
 .project-badge {
    position: absolute;
-    top: 10px;
-    right: 10px;
+    top: 15px;
+    right: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
-    padding: 0.35rem 0.75rem;
-    border-radius: 15px;
+    padding: 0.4rem 0.8rem;
+    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
-    z-index: 1;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    z-index: 2;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }

+/* Основной контент карточки */
 .project-content {
    padding: 1rem;
    flex-grow: 1;
@@ -141,66 +192,135 @@
 .project-title {
    font-size: 1.1rem;
    font-weight: 700;
-    color: #2d3748;
+    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
+    min-height: 2.6rem; /* Фиксированная высота для выравнивания */
 }

 .project-description {
-    color: #718096;
+    color: #64748b;
    margin-bottom: 0.75rem;
    flex-grow: 1;
    line-height: 1.5;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
+    min-height: 2.5rem; /* Фиксированная высота для выравнивания */
+}
+
+/* Статистика проекта */
+.project-stats-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    background: #f8fafc;
+    border-radius: 8px;
+    font-size: 0.8rem;
+}
+
+.stats-left {
+    display: flex;
+    gap: 1rem;
+}
+
+.stat-item {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    color: #64748b;
+}
+
+.stat-item i {
+    color: #667eea;
+    font-size: 0.85rem;
+}
+
+.project-year {
+    color: #94a3b8;
+    font-weight: 500;
+}
+
+/* Футер карточки - категории и дополнительная информация */
+.project-footer {
+    padding: 0 1rem 1rem;
+    border-top: 1px solid #f1f5f9;
+    margin-top: auto;
+}
+
+.project-categories {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin-bottom: 0.5rem;
+}
+
+.category-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+    color: #667eea;
+    border-radius: 12px;
+    font-size: 0.7rem;
+    font-weight: 500;
+    white-space: nowrap;
+    border: 1px solid rgba(102, 126, 234, 0.2);
+}
+
+.category-tag i {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
 }

 .project-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    padding-top: 0.75rem;
-    border-top: 1px solid #e2e8f0;
-    margin-top: auto;
-    flex-wrap: wrap;
-    gap: 0.5rem;
    font-size: 0.85rem;
+    color: #94a3b8;
 }

-.project-stats {
+.project-info {
    display: flex;
-    gap: 0.75rem;
-    font-size: 0.85rem;
-    color: #718096;
+    gap: 1rem;
+    font-size: 0.8rem;
 }

-.project-stats i {
-    color: #667eea;
-}
-
-.project-categories {
-    margin-bottom: 0.75rem;
+.project-info span {
    display: flex;
-    flex-wrap: wrap;
-    gap: 0.35rem;
+    align-items: center;
+    gap: 0.25rem;
 }

-.category-tag {
-    display: inline-block;
-    padding: 0.2rem 0.6rem;
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-    color: #667eea;
-    border-radius: 12px;
+.project-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 15px;
    font-size: 0.75rem;
-    font-size: 0.85rem;
-    white-space: nowrap;
+    font-weight: 600;
+}
+
+.status-completed {
+    background: rgba(34, 197, 94, 0.1);
+    color: #16a34a;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.status-progress {
+    background: rgba(59, 130, 246, 0.1);
+    color: #2563eb;
+    border: 1px solid rgba(59, 130, 246, 0.2);
 }

 .no-projects {
@@ -229,22 +349,56 @@
        font-size: 1rem;
    }
    
-    .project-thumbnail {
-        height: 180px;
+    .projects-grid {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 1.5rem;
+    }
+    
+    .project-card {
+        max-width: 350px;
+    }
+    
+    .project-media {
+        height: 160px;
    }
    
    .project-title {
        font-size: 1rem;
+        min-height: 2.2rem;
+    }
+    
+    .project-content {
+        padding: 0.85rem;
+    }
+    
+    .project-footer {
+        padding: 0 0.85rem 0.85rem;
+    }
+    
+    .stats-left {
+        gap: 0.75rem;
    }
    
    .project-meta {
-        font-size: 0.8rem;
+        font-size: 0.75rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.35rem;
    }
 }

@media (max-width: 576px) {
-    .project-thumbnail {
-        height: 160px;
+    .projects-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1.5rem;
+    }
+    
+    .project-card {
+        max-width: 320px;
+    }
+    
+    .project-media {
+        height: 140px;
    }
    
    .category-btn {
@@ -255,6 +409,42 @@
    .project-content {
        padding: 0.75rem;
    }
+    
+    .project-footer {
+        padding: 0 0.75rem 0.75rem;
+    }
+    
+    .project-title {
+        font-size: 0.95rem;
+        min-height: 2rem;
+    }
+    
+    .project-description {
+        min-height: 2rem;
+        font-size: 0.8rem;
+    }
+    
+    .project-stats-section {
+        padding: 0.4rem 0.6rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.35rem;
+        font-size: 0.75rem;
+    }
+    
+    .stats-left {
+        gap: 1rem;
+    }
+    
+    .project-info {
+        gap: 0.75rem;
+        font-size: 0.7rem;
+    }
+    
+    .category-tag {
+        font-size: 0.65rem;
+        padding: 0.2rem 0.4rem;
+    }
 }

 /* Скелетон загрузка */
@@ -301,51 +491,91 @@
        {% for project in projects %}
        <a href="{% url 'project_detail' project.pk %}" class="text-decoration-none">
            <div class="project-card">
-                <div class="project-thumbnail">
-                        {% if project.thumbnail %}
-                        <img src="{{ project.thumbnail.url }}" alt="{{ project.name }}" loading="lazy" decoding="async">
-                        {% elif project.image %}
-                        <img src="{{ project.image.url }}" alt="{{ project.name }}" loading="lazy" decoding="async">
-                        {% else %}
-                        <img src="{% static 'img/default-project.jpg' %}" alt="{{ project.name }}" loading="lazy" decoding="async">
-                        {% endif %}
-                        
-                        {% if project.is_featured %}
-                        <div class="project-badge">
-                            <i class="fas fa-star me-1"></i>Избранное
+                <!-- Верхняя часть - медиа контент -->
+                <div class="project-media{% if not project.video and not project.thumbnail and not project.image %} no-image{% endif %}">
+                    {% if project.video %}
+                        <div class="media-player">
+                            <video poster="{% if project.video_poster %}{{ project.video_poster.url }}{% elif project.thumbnail %}{{ project.thumbnail.url }}{% endif %}" 
+                                   preload="metadata" muted>
+                                <source src="{{ project.video.url }}" type="video/mp4">
+                            </video>
+                            <button class="play-btn" type="button" aria-label="Воспроизвести видео">
+                                <i class="fas fa-play"></i>
+                            </button>
                        </div>
+                    {% elif project.thumbnail %}
+                        <img src="{{ project.thumbnail.url }}" alt="{{ project.name }}" loading="lazy" decoding="async">
+                    {% elif project.image %}
+                        <img src="{{ project.image.url }}" alt="{{ project.name }}" loading="lazy" decoding="async">
+                    {% endif %}
+                    
+                    {% if project.is_featured %}
+                    <div class="project-badge">
+                        <i class="fas fa-star me-1"></i>Избранное
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <!-- Основной контент карточки -->
+                <div class="project-content">
+                    <h3 class="project-title">{{ project.name }}</h3>
+                    
+                    {% if project.short_description %}
+                    <p class="project-description">{{ project.short_description|truncatewords:25 }}</p>
+                    {% endif %}
+                    
+                    <!-- Статистика проекта -->
+                    <div class="project-stats-section">
+                        <div class="stats-left">
+                            <div class="stat-item">
+                                <i class="fas fa-eye"></i>
+                                <span>{{ project.views_count }}</span>
+                            </div>
+                            <div class="stat-item">
+                                <i class="fas fa-heart"></i>
+                                <span>{{ project.likes_count }}</span>
+                            </div>
+                        </div>
+                        {% if project.completion_date %}
+                        <div class="project-year">{{ project.completion_date|date:"Y" }}</div>
                        {% endif %}
                    </div>
+                </div>
+                
+                <!-- Футер карточки -->
+                <div class="project-footer">
+                    {% if project.categories.exists %}
+                    <div class="project-categories">
+                        {% for category in project.categories.all %}
+                        <span class="category-tag">
+                            <i class="{{ category.icon }}"></i>{{ category.name }}
+                        </span>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
                    
-                    <div class="project-content">
-                        <h3 class="project-title">{{ project.name }}</h3>
-                        
-                        {% if project.categories.exists %}
-                        <div class="project-categories">
-                            {% for category in project.categories.all %}
-                            <span class="category-tag">
-                                <i class="{{ category.icon }} me-1"></i>{{ category.name }}
-                            </span>
-                            {% endfor %}
+                    <div class="project-meta">
+                        <div class="project-info">
+                            {% if project.duration %}
+                            <span><i class="fas fa-clock"></i>{{ project.duration }}</span>
+                            {% endif %}
+                            {% if project.team_size %}
+                            <span><i class="fas fa-users"></i>{{ project.team_size }}</span>
+                            {% endif %}
                        </div>
-                        {% endif %}
-                        
-                        {% if project.short_description %}
-                        <p class="project-description">{{ project.short_description|truncatewords:20 }}</p>
-                        {% endif %}
-                        
-                        <div class="project-meta">
-                            <div class="project-stats">
-                                <span><i class="fas fa-eye me-1"></i>{{ project.views_count }}</span>
-                                <span><i class="fas fa-heart me-1"></i>{{ project.likes_count }}</span>
-                            </div>
-                            {% if project.completion_date %}
-                            <small class="text-muted">{{ project.completion_date|date:"Y" }}</small>
+                        <div class="project-status status-{{ project.status }}">
+                            {% if project.status == 'completed' %}
+                                <i class="fas fa-check-circle"></i>Завершен
+                            {% elif project.status == 'in_progress' %}
+                                <i class="fas fa-spinner"></i>В процессе
+                            {% else %}
+                                <i class="fas fa-archive"></i>В архиве
                            {% endif %}
                        </div>
                    </div>
                </div>
-            </a>
+            </div>
+        </a>
        {% endfor %}
    </div>
    {% else %}
@@ -360,3 +590,134 @@
    {% endif %}
 </div>
 {% endblock %}
+
+{% block extra_js %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Обработчик для видео плеера
+    const playBtns = document.querySelectorAll('.play-btn');
+    
+    playBtns.forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            const mediaPlayer = this.closest('.media-player');
+            const video = mediaPlayer.querySelector('video');
+            
+            if (video) {
+                if (video.paused) {
+                    video.play();
+                    this.style.opacity = '0';
+                } else {
+                    video.pause();
+                    this.style.opacity = '1';
+                }
+            }
+        });
+    });
+    
+    // Обработчики событий видео
+    const videos = document.querySelectorAll('.media-player video');
+    
+    videos.forEach(video => {
+        const playBtn = video.closest('.media-player').querySelector('.play-btn');
+        
+        video.addEventListener('play', () => {
+            if (playBtn) playBtn.style.opacity = '0';
+        });
+        
+        video.addEventListener('pause', () => {
+            if (playBtn) playBtn.style.opacity = '1';
+        });
+        
+        video.addEventListener('ended', () => {
+            if (playBtn) playBtn.style.opacity = '1';
+        });
+    });
+    
+    // Анимация появления карточек при загрузке
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+            }
+        });
+    }, observerOptions);
+    
+    // Применяем анимацию к карточкам
+    const cards = document.querySelectorAll('.project-card');
+    cards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(30px)';
+        card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
+        observer.observe(card);
+    });
+    
+    // Lazy loading для изображений
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    
+    if ('IntersectionObserver' in window) {
+        const imageObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.classList.add('loaded');
+                    imageObserver.unobserve(img);
+                }
+            });
+        });
+        
+        images.forEach(img => {
+            imageObserver.observe(img);
+        });
+    }
+});
+</script>
+
+<style>
+/* Анимации для загруженных изображений */
+.project-media img {
+    transition: opacity 0.3s ease;
+    opacity: 0.8;
+}
+
+.project-media img.loaded {
+    opacity: 1;
+}
+
+/* Плавная анимация при hover */
+.project-card {
+    will-change: transform, box-shadow;
+}
+
+.project-card:hover .project-media img {
+    will-change: transform;
+}
+
+/* Улучшенные переходы для статуса */
+.status-completed {
+    background: rgba(34, 197, 94, 0.1);
+    color: #16a34a;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.status-in_progress {
+    background: rgba(59, 130, 246, 0.1);
+    color: #2563eb;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.status-archived {
+    background: rgba(107, 114, 128, 0.1);
+    color: #6b7280;
+    border: 1px solid rgba(107, 114, 128, 0.2);
+}
+</style>
+{% endblock %}
--- a/smartsoltech/web/views.py
+++ b/smartsoltech/web/views.py
@@ -152,7 +152,7 @@ def about_view(request):


 def blog_view(request):
-    blog_posts = BlogPost.objects.all().order_by('-created_at')
+    blog_posts = BlogPost.objects.all().order_by('-published_date')
    return render(request, 'web/blog.html', {'blog_posts': blog_posts})

 def news_view(request):