Add nopaque video to index

This commit is contained in:
Patrick Jentsch 2021-12-08 11:51:34 +01:00
parent 832a0283bd
commit 1fd7a2e38c
2 changed files with 23 additions and 19 deletions

View File

@ -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%;
}

View File

@ -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 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>