feat(education): Integracja wideo z Platformą Edukacyjną
- Dodano 2 filmy: zajawka 30s i tutorial 2min - Modal z odtwarzaczem wideo (klik na kartę) - Badge "Nowe" dla dostępnych materiałów - Podgląd pierwszej klatki wideo - Obsługa klawisza Escape do zamknięcia Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
80c8fd6e0e
commit
52abe33dd1
@ -15,23 +15,24 @@ from . import bp
|
||||
@login_required
|
||||
def index():
|
||||
"""Strona główna Platformy Edukacyjnej."""
|
||||
# Placeholder - materiały będą dodawane w przyszłości
|
||||
materials = [
|
||||
{
|
||||
'id': 1,
|
||||
'title': 'Wprowadzenie do Norda Biznes Partner',
|
||||
'description': 'Poznaj funkcje portalu i dowiedz się jak efektywnie wykorzystać networking.',
|
||||
'description': 'Krótka prezentacja portalu - poznaj główne funkcje i możliwości platformy.',
|
||||
'type': 'video',
|
||||
'duration': '5 min',
|
||||
'status': 'coming_soon'
|
||||
'duration': '30 sek',
|
||||
'status': 'available',
|
||||
'video_url': 'videos/nordabiz-zajawka-final.mp4'
|
||||
},
|
||||
{
|
||||
'id': 2,
|
||||
'title': 'Jak korzystać z NordaGPT',
|
||||
'description': 'Poradnik wyszukiwania firm za pomocą asystenta AI.',
|
||||
'description': 'Tutorial pokazujący jak używać asystenta AI do wyszukiwania firm i informacji.',
|
||||
'type': 'video',
|
||||
'duration': '3 min',
|
||||
'status': 'coming_soon'
|
||||
'duration': '2 min',
|
||||
'status': 'available',
|
||||
'video_url': 'videos/nordabiz-tutorial.mp4'
|
||||
},
|
||||
{
|
||||
'id': 3,
|
||||
|
||||
@ -23,8 +23,8 @@
|
||||
}
|
||||
|
||||
.education-banner {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border: 1px solid #fbbf24;
|
||||
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
||||
border: 1px solid #3b82f6;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
@ -36,7 +36,7 @@
|
||||
.education-banner svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #d97706;
|
||||
color: #2563eb;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
@ -47,12 +47,12 @@
|
||||
|
||||
.education-banner .info-title {
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
color: #1e40af;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.education-banner .info-text {
|
||||
color: #b45309;
|
||||
color: #1d4ed8;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
@ -65,7 +65,6 @@
|
||||
.material-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--shadow);
|
||||
transition: all 0.2s ease;
|
||||
@ -83,7 +82,7 @@
|
||||
}
|
||||
|
||||
.material-card.coming-soon::after {
|
||||
content: 'Wkrótce';
|
||||
content: 'Wkrotce';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: -24px;
|
||||
@ -95,6 +94,86 @@
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.material-card.available {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.material-card.available:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.material-card.available::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, rgba(37, 99, 235, 0.05) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.video-preview {
|
||||
position: relative;
|
||||
background: #1a1a2e;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
aspect-ratio: 16/9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-preview video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.play-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.material-card:hover .play-overlay {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.play-button {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.material-card:hover .play-button {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.play-button svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: #2563eb;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.material-content {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.material-type {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -147,6 +226,74 @@
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* Video Modal */
|
||||
.video-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
z-index: 9999;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.video-modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.video-modal-content {
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-modal-close {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.video-modal-close:hover {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.video-modal video {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.video-modal-title {
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: var(--spacing-md);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.new-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
background: #22c55e;
|
||||
color: white;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -160,46 +307,113 @@
|
||||
</svg>
|
||||
Platforma Edukacyjna
|
||||
</h1>
|
||||
<p>Materiały szkoleniowe i poradniki dla członków Stowarzyszenia Norda Biznes</p>
|
||||
<p>Materialy szkoleniowe i poradniki dla czlonkow Stowarzyszenia Norda Biznes</p>
|
||||
</div>
|
||||
|
||||
<div class="education-banner">
|
||||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
|
||||
<path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div class="info-content">
|
||||
<div class="info-title">Platforma w budowie</div>
|
||||
<div class="info-title">Nowe materialy wideo!</div>
|
||||
<div class="info-text">
|
||||
Pracujemy nad materiałami edukacyjnymi dla członków. Wkrótce pojawią się tutaj filmy instruktażowe,
|
||||
poradniki i artykuły pomagające w efektywnym korzystaniu z portalu i networkingu.
|
||||
Dodalismy pierwsze filmy instruktazowe. Kliknij na karte z wideo, zeby je odtworzyc.
|
||||
Kolejne materialy pojawia sie wkrotce.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="materials-grid">
|
||||
{% for material in materials %}
|
||||
<div class="material-card {% if material.status == 'coming_soon' %}coming-soon{% endif %}">
|
||||
<span class="material-type {{ material.type }}">
|
||||
{% if material.type == 'video' %}
|
||||
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
Wideo
|
||||
{% elif material.type == 'article' %}
|
||||
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
|
||||
Artykul
|
||||
{% elif material.type == 'guide' %}
|
||||
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
|
||||
Poradnik
|
||||
{% endif %}
|
||||
</span>
|
||||
<h3 class="material-title">{{ material.title }}</h3>
|
||||
<p class="material-description">{{ material.description }}</p>
|
||||
<div class="material-meta">
|
||||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
{{ material.duration }}
|
||||
<div class="material-card {% if material.status == 'coming_soon' %}coming-soon{% else %}available{% endif %}"
|
||||
{% if material.status == 'available' and material.video_url %}
|
||||
onclick="openVideo('{{ url_for('static', filename=material.video_url) }}', '{{ material.title }}')"
|
||||
{% endif %}>
|
||||
|
||||
{% if material.status == 'available' and material.type == 'video' %}
|
||||
<div class="video-preview">
|
||||
<span class="new-badge">Nowe</span>
|
||||
<video muted preload="metadata">
|
||||
<source src="{{ url_for('static', filename=material.video_url) }}#t=1" type="video/mp4">
|
||||
</video>
|
||||
<div class="play-overlay">
|
||||
<div class="play-button">
|
||||
<svg fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="material-content">
|
||||
<span class="material-type {{ material.type }}">
|
||||
{% if material.type == 'video' %}
|
||||
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
Wideo
|
||||
{% elif material.type == 'article' %}
|
||||
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
|
||||
Artykul
|
||||
{% elif material.type == 'guide' %}
|
||||
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
|
||||
Poradnik
|
||||
{% endif %}
|
||||
</span>
|
||||
<h3 class="material-title">{{ material.title }}</h3>
|
||||
<p class="material-description">{{ material.description }}</p>
|
||||
<div class="material-meta">
|
||||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
{{ material.duration }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Video Modal -->
|
||||
<div class="video-modal" id="videoModal" onclick="closeVideo(event)">
|
||||
<div class="video-modal-content" onclick="event.stopPropagation()">
|
||||
<button class="video-modal-close" onclick="closeVideo()">×</button>
|
||||
<video id="modalVideo" controls>
|
||||
<source src="" type="video/mp4">
|
||||
Twoja przegladarka nie obsluguje odtwarzania wideo.
|
||||
</video>
|
||||
<p class="video-modal-title" id="modalVideoTitle"></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
function openVideo(videoUrl, title) {
|
||||
const modal = document.getElementById('videoModal');
|
||||
const video = document.getElementById('modalVideo');
|
||||
const titleEl = document.getElementById('modalVideoTitle');
|
||||
|
||||
video.src = videoUrl;
|
||||
titleEl.textContent = title;
|
||||
modal.classList.add('active');
|
||||
video.play();
|
||||
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeVideo(event) {
|
||||
if (event && event.target !== document.getElementById('videoModal')) return;
|
||||
|
||||
const modal = document.getElementById('videoModal');
|
||||
const video = document.getElementById('modalVideo');
|
||||
|
||||
video.pause();
|
||||
video.src = '';
|
||||
modal.classList.remove('active');
|
||||
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeVideo();
|
||||
}
|
||||
});
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user