StreetScienceCommunity · YedilSerzhan · Aug 2, 2023 · Aug 2, 2023 · Aug 2, 2023 · Aug 8, 2023
diff --git a/README.md b/README.md
@@ -68,42 +68,13 @@ If you want to report a problem or suggest an enhancement we'd love for you to [
 
 Thank you very much for visiting our project repository. We hope you feel inspired and welcomed to test or even contribute to our online microbiome data analysis.
 
-
-## How can I generate the website locally?
+## How can I run the website?
 
 The Project relies on Flask and Postgres. The detailed installation instructions are available [here](docs/deployment.md)
 
+## How can I generate videos from slides?
 
-## Generate videos
-
-### Requirements
-
-Ubuntu
-
-```
-$ sudo apt-get install sox
-$ sudo apt-get install libsox-fmt-mp3
-```
-
-#### Steps
-
-In different terminals:
-
-1. Launch MozillaTTS for speech
-
-   ```
-   $ docker run -it -p 5002:5002 synesthesiam/mozillatts
-   ```
-
-2. Launch scripts
-
-   ```
-   $ conda activate dnanalyzer
-   $ ./bin/ari-make.sh <path to slide>
-   ```
-
-You need to modify `<path to slide>`, e.g `./bin/ari-make.sh game/level1/intro/slides.md`
-
+The video generation relies on scripts in the folder `\bin`. The detailed installation instructions are available [here](docs/video_generation.md)
 
 ## Update quiz questions
 If changes are made to the quiz questions in yaml files under the folder `game`

diff --git a/docs/database_relational_diagram.png b/docs/database_relational_diagram.png
diff --git a/docs/diagrams/database_relational_diagram.drawio b/docs/diagrams/database_relational_diagram.drawio
diff --git a/docs/diagrams/database_relational_diagram.png b/docs/diagrams/database_relational_diagram.png
diff --git a/docs/diagrams/system_architecture_diagram.drawio b/docs/diagrams/system_architecture_diagram.drawio
@@ -0,0 +1,91 @@
+<mxfile host="app.diagrams.net" modified="2023-08-02T10:29:48.131Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36" etag="bFjh9_jRZSo3hhToOiEy" version="21.6.6" type="device">
+  <diagram name="Page-1" id="qpBcqYqqgBRkhlTTzO9E">
+    <mxGraphModel dx="2284" dy="1907" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-1" value="" style="rounded=0;whiteSpace=wrap;html=1;movable=0;resizable=0;rotatable=0;deletable=0;editable=0;locked=1;connectable=0;" vertex="1" parent="1">
+          <mxGeometry x="-160" y="-100" width="1220" height="960" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-11" value="" style="group" vertex="1" connectable="0" parent="1">
+          <mxGeometry x="30" y="70" width="170" height="200" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-2" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-11">
+          <mxGeometry width="170" height="200" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-4" value="&lt;b&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;Frontend&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-11">
+          <mxGeometry x="55" y="40" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-6" value="built with Flask Template&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-11">
+          <mxGeometry x="20" y="120" width="130" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-12" value="" style="group" vertex="1" connectable="0" parent="1">
+          <mxGeometry x="390" y="70" width="170" height="200" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-8" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-12">
+          <mxGeometry width="170" height="200" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-9" value="&lt;b&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;Backend&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-12">
+          <mxGeometry x="55" y="40" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-10" value="built with Python Flask" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-12">
+          <mxGeometry x="20" y="120" width="130" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-22" value="using ghevaluator to compare workflows" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-12">
+          <mxGeometry x="20" y="150" width="130" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-13" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" target="xy38HAdLjRSqa7wOKrc2-8">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="200" y="170" as="sourcePoint" />
+            <mxPoint x="310" y="130" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-14" value="User auth &amp;amp; Game tracking&lt;br&gt;requests &amp;amp; reponses" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="210" y="120" width="170" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-19" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="560" y="170" as="sourcePoint" />
+            <mxPoint x="750" y="170" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-20" value="question retrival and storing" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="570" y="120" width="170" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-21" value="" style="group" vertex="1" connectable="0" parent="1">
+          <mxGeometry x="750" y="70" width="160" height="192.5" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-16" value="" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-21">
+          <mxGeometry width="160" height="192.5" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-17" value="&lt;b&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;Database&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-21">
+          <mxGeometry x="50" y="36.25" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-18" value="built with PostgreSQL" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-21">
+          <mxGeometry x="50" y="116.25" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-26" value="" style="group" vertex="1" connectable="0" parent="1">
+          <mxGeometry x="770" y="380" width="120" height="140" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-23" value="" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-26">
+          <mxGeometry width="120" height="140" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-24" value="&lt;b&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;YAML files&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-26">
+          <mxGeometry x="5" y="30" width="110" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-25" value="Storing the questions" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="xy38HAdLjRSqa7wOKrc2-26">
+          <mxGeometry x="10" y="80" width="100" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-27" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="xy38HAdLjRSqa7wOKrc2-23" target="xy38HAdLjRSqa7wOKrc2-16">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="810" y="370" as="sourcePoint" />
+            <mxPoint x="830" y="270" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="xy38HAdLjRSqa7wOKrc2-28" value="Using init_yaml_to_db.py&lt;br&gt;to populate the database" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="680" y="310" width="140" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/docs/diagrams/system_architecture_diagram.png b/docs/diagrams/system_architecture_diagram.png
diff --git a/docs/system_architecture_diagram.png b/docs/system_architecture_diagram.png
diff --git a/docs/video_generation.md b/docs/video_generation.md
@@ -0,0 +1,29 @@
+## Generate videos
+
+### Requirements
+
+Ubuntu
+
+```
+$ sudo apt-get install sox
+$ sudo apt-get install libsox-fmt-mp3
+```
+
+### Steps
+
+In different terminals:
+
+1. Launch MozillaTTS for speech
+
+   ```
+   $ docker run -it -p 5002:5002 synesthesiam/mozillatts
+   ```
+
+2. Launch scripts
+
+   ```
+   $ conda activate dnanalyzer
+   $ ./bin/ari-make.sh <path to slide>
+   ```
+
+You need to modify `<path to slide>`, e.g `./bin/ari-make.sh game/level1/intro/slides.md`
diff --git a/routes/main.py b/routes/main.py
@@ -15,6 +15,15 @@
 
 WORKFLOW_URL = " https://usegalaxy.eu/training-material/topics/assembly/tutorials/general-introduction/workflows/assembly-general-introduction.ga"
 
+@bp.route('/coming_soon', methods=['GET'])
+def coming_soon():
+    """
+    Function to return coming soon page
+    @return: return to the coming soon page
+    @rtype: flask template
+    """
+    return render_template("coming_soon.html")
+
 @bp.route('/login', methods=['GET', 'POST'])
 def login():
     """

diff --git a/static/images/undraw_under_construction.svg b/static/images/undraw_under_construction.svg
diff --git a/templates/coming_soon.html b/templates/coming_soon.html
@@ -0,0 +1,16 @@
+{% extends 'base.html' %}
+
+{% block body %}
+
+<div class="columns is-centered my-6">
+	<div class="column is-half my-6" >
+        <h1 class="title is-1 has-text-centered">Coming soon!</h1>
+        <div class="column section1_img is-hidden-mobile">
+            <figure>
+                <img src="/static/images/undraw_under_construction.svg" alt="">
+            </figure>
+        </div>
+	</div>
+</div>
+
+{% endblock %}
diff --git a/templates/index.html b/templates/index.html
@@ -84,7 +84,7 @@ <h1 class="is-size-3-mobile welcome_text">Welcome to our online & interactive ga
                             </div>
                         </div>
                         <footer class="card-footer">
-                            <a href="/coming_soon" class="button is-info is-medium is-fullwidth">Learn more</a>
+                            <a href="/level/3/intro" class="button is-info is-medium is-fullwidth">Learn more</a>
                         </footer>
                     </div>
                 </li>