Implement modern media gallery with enhanced features
Some checks failed
continuous-integration/drone/push Build is failing
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)
This commit is contained in:
350
preview.html
Normal file
350
preview.html
Normal file
@@ -0,0 +1,350 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Проект Django E-commerce - Предварительный просмотр</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
|
||||
<link rel="stylesheet" href="smartsoltech/static/assets/css/modern-styles.css">
|
||||
<link rel="stylesheet" href="smartsoltech/static/assets/css/compact-gallery.css">"
|
||||
<style>
|
||||
.main-content {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
.content-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-content">
|
||||
<div class="content-wrapper">
|
||||
|
||||
<!-- Компактная медиа-галерея -->
|
||||
<div class="compact-media-gallery">
|
||||
<div class="row g-3">
|
||||
<!-- Основное изображение -->
|
||||
<div class="col-lg-8">
|
||||
<div class="main-media-display">
|
||||
<div class="main-media-item" id="main-media">
|
||||
<a href="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение" data-lightbox="project-gallery" data-title="Главное изображение проекта">
|
||||
<img src="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение" alt="Главное изображение" class="main-media-img">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Сетка превью -->
|
||||
<div class="col-lg-4">
|
||||
<div class="media-thumbnails-grid">
|
||||
<div class="thumbnail-item active" data-index="0">
|
||||
<div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение', 'image', 'Главное изображение проекта')">
|
||||
<img src="https://via.placeholder.com/200x200/4f46e5/ffffff?text=Превью+1" alt="Превью 1" class="thumbnail-img">
|
||||
<div class="thumbnail-overlay">
|
||||
<i class="fas fa-search-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение" data-lightbox="project-gallery" data-title="Главное изображение проекта" style="display: none;"></a>
|
||||
</div>
|
||||
|
||||
<div class="thumbnail-item" data-index="1">
|
||||
<div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/7c3aed/ffffff?text=Скриншот+1', 'image', 'Скриншот интерфейса')">
|
||||
<img src="https://via.placeholder.com/200x200/7c3aed/ffffff?text=Превью+2" alt="Превью 2" class="thumbnail-img">
|
||||
<div class="thumbnail-overlay">
|
||||
<i class="fas fa-search-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://via.placeholder.com/800x500/7c3aed/ffffff?text=Скриншот+1" data-lightbox="project-gallery" data-title="Скриншот интерфейса" style="display: none;"></a>
|
||||
</div>
|
||||
|
||||
<div class="thumbnail-item" data-index="2">
|
||||
<div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/f59e0b/ffffff?text=Скриншот+2', 'image', 'Мобильная версия')">
|
||||
<img src="https://via.placeholder.com/200x200/f59e0b/ffffff?text=Превью+3" alt="Превью 3" class="thumbnail-img">
|
||||
<div class="thumbnail-overlay">
|
||||
<i class="fas fa-search-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://via.placeholder.com/800x500/f59e0b/ffffff?text=Скриншот+2" data-lightbox="project-gallery" data-title="Мобильная версия" style="display: none;"></a>
|
||||
</div>
|
||||
|
||||
<div class="thumbnail-item" data-index="3">
|
||||
<div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/10b981/ffffff?text=Админ+панель', 'image', 'Административная панель')">
|
||||
<img src="https://via.placeholder.com/200x200/10b981/ffffff?text=Превью+4" alt="Превью 4" class="thumbnail-img">
|
||||
<div class="thumbnail-overlay">
|
||||
<i class="fas fa-search-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://via.placeholder.com/800x500/10b981/ffffff?text=Админ+панель" data-lightbox="project-gallery" data-title="Административная панель" style="display: none;"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Основной контент - двухколоночная структура -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Левая колонка - описание проекта -->
|
||||
<div class="col-lg-8">
|
||||
<div class="project-content">
|
||||
<h2 class="mb-4">Описание проекта</h2>
|
||||
<div class="description-text">
|
||||
<p>Этот проект представляет собой <strong>современное веб-приложение</strong> электронной коммерции, разработанное с использованием Django и современных технологий фронтенда.</p>
|
||||
|
||||
<h3>Ключевые особенности</h3>
|
||||
<ul>
|
||||
<li><em>Адаптивный дизайн</em>, оптимизированный для всех устройств</li>
|
||||
<li>Интеграция с <a href="#">популярными платежными системами</a></li>
|
||||
<li>Многоуровневая система категорий товаров</li>
|
||||
<li>Расширенная система поиска и фильтрации</li>
|
||||
<li>Административная панель для управления контентом</li>
|
||||
</ul>
|
||||
|
||||
<blockquote>
|
||||
Проект демонстрирует современные подходы к веб-разработке, включая использование микросервисной архитектуры, контейнеризации и непрерывной интеграции.
|
||||
</blockquote>
|
||||
|
||||
<h4>Технические детали</h4>
|
||||
<p>Для обеспечения высокой производительности использовались следующие решения:</p>
|
||||
|
||||
<ol>
|
||||
<li><code>Redis</code> для кеширования данных</li>
|
||||
<li><code>PostgreSQL</code> как основная база данных</li>
|
||||
<li><code>Docker</code> для контейнеризации</li>
|
||||
</ol>
|
||||
|
||||
<hr>
|
||||
|
||||
<p><strong>Результат:</strong> Платформа способна обрабатывать <em>более 10,000 одновременных пользователей</em> с временем отклика менее 200ms.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Правая колонка - технологии -->
|
||||
<div class="col-lg-4">
|
||||
<div class="tech-sidebar-section">
|
||||
<h3 class="tech-sidebar-title">Технологии</h3>
|
||||
<div class="technologies-html-content">
|
||||
<p><code>Python</code> <code>Django</code> <code>PostgreSQL</code></p>
|
||||
<p><code>JavaScript</code> <code>HTML5</code> <code>CSS3</code></p>
|
||||
<p><code>Docker</code> <code>Redis</code> <code>Bootstrap</code></p>
|
||||
<p><strong>Дополнительно:</strong> <code>Bash</code> <code>SQLite3</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Дополнительная секция -->
|
||||
<div class="row mt-5">
|
||||
<div class="col-12">
|
||||
<div class="additional-info p-4 rounded-4" style="background: #f8fafc; border: 1px solid #e2e8f0;">
|
||||
<h3 class="mb-3">Результаты проекта</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-3 text-center">
|
||||
<div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">150%</div>
|
||||
<div class="stat-label">Рост продаж</div>
|
||||
</div>
|
||||
<div class="col-md-3 text-center">
|
||||
<div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">2.5x</div>
|
||||
<div class="stat-label">Быстрее загрузка</div>
|
||||
</div>
|
||||
<div class="col-md-3 text-center">
|
||||
<div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">95%</div>
|
||||
<div class="stat-label">Доступность</div>
|
||||
</div>
|
||||
<div class="col-md-3 text-center">
|
||||
<div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">100%</div>
|
||||
<div class="stat-label">Адаптивность</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Карусель похожих проектов -->
|
||||
<div class="similar-projects-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Похожие проекты</h2>
|
||||
<div class="similar-projects-carousel">
|
||||
<div class="swiper similarSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="similar-project-card">
|
||||
<div class="similar-thumb">
|
||||
<img src="https://via.placeholder.com/300x200/4f46e5/ffffff?text=Проект+1" alt="Проект 1">
|
||||
<div class="project-overlay">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="similar-content">
|
||||
<h4 class="project-title">E-commerce платформа</h4>
|
||||
<p class="project-description">Современная платформа для онлайн-торговли с интеграцией платежных систем</p>
|
||||
<div class="project-categories">
|
||||
<span class="category-tag">Web</span>
|
||||
<span class="category-tag">Django</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="similar-project-card">
|
||||
<div class="similar-thumb">
|
||||
<img src="https://via.placeholder.com/300x200/7c3aed/ffffff?text=Проект+2" alt="Проект 2">
|
||||
<div class="project-overlay">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="similar-content">
|
||||
<h4 class="project-title">CRM система</h4>
|
||||
<p class="project-description">Система управления клиентскими отношениями с аналитикой</p>
|
||||
<div class="project-categories">
|
||||
<span class="category-tag">CRM</span>
|
||||
<span class="category-tag">Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="similar-project-card">
|
||||
<div class="similar-thumb">
|
||||
<img src="https://via.placeholder.com/300x200/f59e0b/ffffff?text=Проект+3" alt="Проект 3">
|
||||
<div class="project-overlay">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="similar-content">
|
||||
<h4 class="project-title">Мобильное приложение</h4>
|
||||
<p class="project-description">iOS и Android приложение для управления задачами</p>
|
||||
<div class="project-categories">
|
||||
<span class="category-tag">Mobile</span>
|
||||
<span class="category-tag">React Native</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="similar-project-card">
|
||||
<div class="similar-thumb">
|
||||
<div class="image-placeholder">
|
||||
<div class="placeholder-content">
|
||||
<i class="fas fa-image placeholder-icon"></i>
|
||||
<div class="placeholder-text">Проект без изображения</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-overlay">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="similar-content">
|
||||
<h4 class="project-title">Analytics Dashboard</h4>
|
||||
<p class="project-description">Интерактивная панель аналитики с визуализацией данных</p>
|
||||
<div class="project-categories">
|
||||
<span class="category-tag">Analytics</span>
|
||||
<span class="category-tag">D3.js</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next similar-next"></div>
|
||||
<div class="swiper-button-prev similar-prev"></div>
|
||||
<div class="swiper-pagination similar-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
|
||||
<script>
|
||||
// Функция переключения основного медиа
|
||||
function switchMainMedia(url, type, caption, poster = '') {
|
||||
const mainMediaContainer = document.getElementById('main-media');
|
||||
if (!mainMediaContainer) return;
|
||||
|
||||
// Очищаем контейнер
|
||||
mainMediaContainer.innerHTML = '';
|
||||
|
||||
if (type === 'image') {
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('data-lightbox', 'project-gallery');
|
||||
link.setAttribute('data-title', caption);
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = url;
|
||||
img.alt = caption;
|
||||
img.className = 'main-media-img';
|
||||
|
||||
link.appendChild(img);
|
||||
mainMediaContainer.appendChild(link);
|
||||
} else if (type === 'video') {
|
||||
const video = document.createElement('video');
|
||||
video.controls = true;
|
||||
video.className = 'main-media-video';
|
||||
if (poster) {
|
||||
video.poster = poster;
|
||||
}
|
||||
|
||||
const source = document.createElement('source');
|
||||
source.src = url;
|
||||
source.type = 'video/mp4';
|
||||
|
||||
video.appendChild(source);
|
||||
video.appendChild(document.createTextNode('Ваш браузер не поддерживает видео.'));
|
||||
|
||||
mainMediaContainer.appendChild(video);
|
||||
}
|
||||
|
||||
// Обновляем активный thumbnail
|
||||
document.querySelectorAll('.thumbnail-item').forEach(item => item.classList.remove('active'));
|
||||
event.target.closest('.thumbnail-item').classList.add('active');
|
||||
}
|
||||
|
||||
// Инициализация Swiper для карусели
|
||||
const swiper = new Swiper('.similarSwiper', {
|
||||
effect: 'coverflow',
|
||||
grabCursor: true,
|
||||
centeredSlides: true,
|
||||
slidesPerView: 'auto',
|
||||
spaceBetween: 40,
|
||||
loop: true,
|
||||
coverflowEffect: {
|
||||
rotate: 15,
|
||||
stretch: 0,
|
||||
depth: 200,
|
||||
modifier: 1.5,
|
||||
slideShadows: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.similar-next',
|
||||
prevEl: '.similar-prev',
|
||||
},
|
||||
pagination: {
|
||||
el: '.similar-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
breakpoints: {
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user