Maciej Pienczyn
700382b55d
Personalized guide with GBP links (write review, view profile, photos) for each member's company. Includes tips on collecting reviews, responding to feedback, Local Guides program, and Google policies. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
422 lines
12 KiB
HTML
422 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Platforma Edukacyjna - Norda Biznes Partner{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.education-header {
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.education-header h1 {
|
|
font-size: var(--font-size-3xl);
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.education-header p {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
.education-banner {
|
|
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);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.education-banner svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: #2563eb;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.education-banner .info-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.education-banner .info-title {
|
|
font-weight: 600;
|
|
color: #1e40af;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.education-banner .info-text {
|
|
color: #1d4ed8;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.materials-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.material-card {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: var(--shadow);
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.material-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.material-card.coming-soon {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.material-card.coming-soon::after {
|
|
content: 'Wkrotce';
|
|
position: absolute;
|
|
top: 12px;
|
|
right: -24px;
|
|
background: var(--warning);
|
|
color: white;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
padding: 4px 32px;
|
|
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;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.material-type.video {
|
|
background: #fee2e2;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.material-type.article {
|
|
background: #dbeafe;
|
|
color: #2563eb;
|
|
}
|
|
|
|
.material-type.guide {
|
|
background: #d1fae5;
|
|
color: #059669;
|
|
}
|
|
|
|
.material-title {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.material-description {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.material-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.material-meta svg {
|
|
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 %}
|
|
|
|
{% block content %}
|
|
<div class="education-header">
|
|
<h1>
|
|
<svg width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color: var(--warning);">
|
|
<path d="M12 14l9-5-9-5-9 5 9 5z"/>
|
|
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
|
|
<path d="M12 14l9-5-9-5-9 5 9 5zm0 0v6"/>
|
|
</svg>
|
|
Platforma Edukacyjna
|
|
</h1>
|
|
<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="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">Nowe materialy wideo!</div>
|
|
<div class="info-text">
|
|
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{% else %}available{% endif %}"
|
|
{% if material.status == 'available' and material.video_url %}
|
|
onclick="openVideo('{{ url_for('static', filename=material.video_url) }}', '{{ material.title }}')"
|
|
{% elif material.status == 'available' and material.url %}
|
|
onclick="window.location.href='{{ url_for(material.url) }}'"
|
|
{% 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 %}
|