From 1fd7a2e38c3b5b0cae663d77b7cff12f4ba9215f Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 8 Dec 2021 11:51:34 +0100
Subject: [PATCH] Add nopaque video to index

---
 app/static/css/nopaque.css       | 15 +++++++++++++++
 app/templates/main/index.html.j2 | 27 ++++++++-------------------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/static/css/nopaque.css b/app/static/css/nopaque.css
index 381c2f40..90f4df68 100644
--- a/app/static/css/nopaque.css
+++ b/app/static/css/nopaque.css
@@ -57,3 +57,18 @@ h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons,
 
 .hoverable {cursor: pointer;}
 .s-attr.chip .p-attr.chip {background-color: inherit;}
+
+
+.responsive-youtube-video-container {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;
+}
+.responsive-youtube-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/app/templates/main/index.html.j2 b/app/templates/main/index.html.j2
index 94db3551..bbc44283 100644
--- a/app/templates/main/index.html.j2
+++ b/app/templates/main/index.html.j2
@@ -51,7 +51,7 @@
         {% if current_user.is_anonymous %}
         <li><a href="#registration-and-log-in">Registration and log in</a></li>
         {% endif %}
-        <li><a href="#workflow">Workflow</a></li>
+        <li><a href="#introduction-video">Introduction video</a></li>
       </ul>
     </div>
   </div>
@@ -118,7 +118,7 @@
         {% if current_user.is_anonymous %}
         <li><a href="#registration-and-log-in">Registration and log in</a></li>
         {% endif %}
-        <li><a href="#workflow">Workflow</a></li>
+        <li><a href="#introduction-video">Introduction video</a></li>
       </ul>
     </div>
   </div>
@@ -174,7 +174,7 @@
         {% if current_user.is_anonymous %}
         <li><a href="#registration-and-log-in">Registration and log in</a></li>
         {% endif %}
-        <li><a href="#workflow">Workflow</a></li>
+        <li><a href="#introduction-video">Introduction video</a></li>
       </ul>
     </div>
   </div>
@@ -187,26 +187,15 @@
 </div>
 {% endif %}
 
-<div class="section white scrollspy" id="workflow">
+<div class="section white scrollspy" id="introduction-video">
   <div class="row container">
     <!-- <div class="col s12 m10"> -->
     <div class="col s12">
-      <h3>Workflow</h3>
-      <p>Coming soon...</p>
-      <!--<img src="{{ url_for('static', filename='images/workflow.png') }}" alt="Workflow" class="responsive-img">-->
+      <h3>Introduction video</h3>
+      <div class="responsive-youtube-video-container">
+        <iframe class="responsive-youtube-video" src="https://www.youtube-nocookie.com/embed/KPGZSW_7SWk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      </div>
     </div>
-    <!--
-    <div class="col s12 m2">
-      <ul class="section table-of-contents">
-        <li><a href="#information">Why you should use nopaque</a></li>
-        <li><a href="#services">What nopaque can do for you</a></li>
-        {% if current_user.is_anonymous %}
-        <li><a href="#registration-and-log-in">Registration and log in</a></li>
-        {% endif %}
-        <li><a href="#workflow">Workflow</a></li>
-      </ul>
-    </div>
-    -->
   </div>
 </div>