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 @@
Krótki przewodnik (40 sekund)
+ +