diff --git a/static/videos/nordagpt-demo-poster.jpg b/static/videos/nordagpt-demo-poster.jpg new file mode 100644 index 0000000..02c0532 Binary files /dev/null and b/static/videos/nordagpt-demo-poster.jpg differ diff --git a/static/videos/nordagpt-demo.mp4 b/static/videos/nordagpt-demo.mp4 new file mode 100644 index 0000000..7e58251 Binary files /dev/null and b/static/videos/nordagpt-demo.mp4 differ diff --git a/templates/chat.html b/templates/chat.html index e2964b6..49ae6da 100755 --- a/templates/chat.html +++ b/templates/chat.html @@ -720,6 +720,138 @@ .model-benefits li strong { color: var(--text-primary); } + + /* ============================================ + Video Help Button & Modal + ============================================ */ + .video-help-btn { + background: rgba(255,255,255,0.3) !important; + } + + .video-help-btn:hover { + background: rgba(255,255,255,0.5) !important; + } + + .video-help-modal { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.8); + z-index: 1001; + padding: var(--spacing-lg); + overflow-y: auto; + animation: fadeIn 0.2s ease; + } + + .video-help-modal.active { + display: flex; + align-items: flex-start; + justify-content: center; + } + + .video-help-content { + background: white; + border-radius: var(--radius-lg); + max-width: 800px; + width: 100%; + padding: var(--spacing-xl); + margin-top: 40px; + position: relative; + box-shadow: 0 20px 60px rgba(0,0,0,0.4); + animation: slideUp 0.3s ease; + } + + .video-help-close { + position: absolute; + top: var(--spacing-md); + right: var(--spacing-md); + background: none; + border: none; + font-size: 1.5rem; + color: var(--text-secondary); + cursor: pointer; + width: 36px; + height: 36px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition); + } + + .video-help-close:hover { + background: #f3f4f6; + color: var(--text-primary); + } + + .video-help-content h2 { + font-size: var(--font-size-xl); + color: var(--text-primary); + margin: 0 0 var(--spacing-xs); + padding-right: var(--spacing-xl); + } + + .video-help-subtitle { + color: var(--text-secondary); + font-size: var(--font-size-sm); + margin: 0 0 var(--spacing-lg); + } + + .video-container { + position: relative; + background: #000; + border-radius: var(--radius); + overflow: hidden; + margin-bottom: var(--spacing-lg); + } + + .video-container video { + width: 100%; + display: block; + max-height: 450px; + } + + .video-help-tips { + background: #f5f3ff; + border: 1px solid #c4b5fd; + border-radius: var(--radius); + padding: var(--spacing-lg); + } + + .video-help-tips h3 { + font-size: var(--font-size-md); + color: var(--text-primary); + margin: 0 0 var(--spacing-md); + } + + .video-help-tips ul { + margin: 0; + padding-left: var(--spacing-lg); + } + + .video-help-tips li { + padding: var(--spacing-xs) 0; + color: var(--text-secondary); + font-size: var(--font-size-sm); + } + + .video-help-tips li strong { + color: #5b21b6; + } + + @media (max-width: 768px) { + .video-help-content { + margin-top: 20px; + padding: var(--spacing-md); + } + + .video-container video { + max-height: 280px; + } + } {% endblock %} @@ -760,6 +892,12 @@ + @@ -867,6 +1005,32 @@ + +
+
+ +

🎬 Jak korzystać z NordaGPT?

+

Krótki przewodnik (40 sekund)

+ +
+ +
+ +
+

💡 Szybkie wskazówki

+
    +
  • Znajdź firmę: "Kto oferuje usługi IT?"
  • +
  • Sprawdź prezesa: "Kto jest prezesem PIXLAB?"
  • +
  • Wydarzenia: "Kiedy następne spotkanie Norda?"
  • +
  • Rekomendacje: "Poleć drukarnie z dobrymi opiniami"
  • +
+
+
+
+
@@ -952,6 +1116,39 @@ document.addEventListener('click', function(e) { document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { closeModelInfoModal(); + closeVideoHelpModal(); + } +}); + +// ============================================ +// Video Help Modal Functions +// ============================================ +function openVideoHelpModal() { + document.getElementById('videoHelpModal').classList.add('active'); + document.body.style.overflow = 'hidden'; + // Auto-play video when modal opens + const video = document.getElementById('helpVideo'); + if (video) { + video.currentTime = 0; + // Don't autoplay - let user control + } +} + +function closeVideoHelpModal() { + document.getElementById('videoHelpModal').classList.remove('active'); + document.body.style.overflow = ''; + // Pause video when modal closes + const video = document.getElementById('helpVideo'); + if (video) { + video.pause(); + } +} + +// Close video modal on backdrop click +document.addEventListener('click', function(e) { + const videoModal = document.getElementById('videoHelpModal'); + if (e.target === videoModal) { + closeVideoHelpModal(); } });