creating a landing page

main/templates/index.html

@@ -77,6 +77,32 @@
         {% include "download.html" %}
         {% elif mode == "methods" %}
         {% include "methods.html" %}
+        {% elif mode == "landing" %}
+        <form method="get" id="queryform" action="/EleQTL/multiplot/">
+        <textarea rows=3 cols=30 id="queryArea" name="query" title="Type your query"></textarea>
+                <br>
+                <input type="submit" id="multiplot_submit" value="Search"/>
+        </form>
+            <div id="landing_page">
+                <div onclick="location.href='/EleQTL/multiplot/';" id="landing_multiplot">
+                    <span>All eQTL patterns for a single gene</span>
+                </div>
+                <div onclick="location.href='/EleQTL/correlation/';" id="landing_correlation">
+                    <span>Correlating QTL profiles</span>
+                </div>
+                <div onclick="location.href='/EleQTL/coregulation/';" id="landing_coregulation">
+                    <span>Shared peaks</span>
+                </div>
+                <div onclick="location.href='/EleQTL/cistrans/';" id="landing_experiment">
+                    <span>Experiment overview</span>
+                </div>
+                <div onclick="location.href='/EleQTL/multiplot/';" id="landing_GOterms">
+                    <span>Look for GO terms</span>
+                </div>
+                <div onclick="location.href='/EleQTL/suggestions/';" id="landing_phenotypes">
+                    <span>List phenotypes</span>
+                </div>
+            </div>
         {% else %}
         <form method="get" id="queryform"
                 {% if mode == 'correlation' %}

static/css/main.css

@@ -496,3 +496,147 @@ div#loading{
     100% { transform: rotate(360deg); }
 }
 
+
+#landing_page {
+    background: #90B9F9;
+    border-radius: 20px;
+    border: 2px solid #667999;
+    margin: 25px;
+    padding: 25px;
+    float: right;
+    height: 1000;
+    width: 100%;
+    text-align:center;
+}
+
+#landing_multiplot {
+    float: left;
+    border-radius: 20px;
+    border: 1px solid #667999;
+    width: 48%;
+    height: 33%;
+    background-color: white;
+    text-align:center;
+    background-image: url("/EleQTL/static/image/multiQTL.png");
+    background-size: 70%;
+    background-position: 50% 40%;
+    background-repeat: no-repeat;
+    margin: 1% 1%;
+}
+
+#landing_multiplot:hover {
+    border-radius: 20px;
+    border: 2px solid #667999;
+    background-color: #667999;
+    color: white;
+}
+
+#landing_correlation{
+    float: left;
+    border-radius: 20px;
+    border: 1px solid #667999;
+    width: 48%;
+    height: 33%;
+    background-color: white;
+    text-align:center;
+    background-image: url("/EleQTL/static/image/correlation.png");
+    background-size: 35%;
+    background-position: 50% 40%;
+    background-repeat: no-repeat;
+    margin: 1% 1%;
+}
+
+
+#landing_correlation:hover {
+    border-radius: 20px;
+    border: 2px solid #667999;
+    background-color: #667999;
+    color: white;
+}
+
+#landing_coregulation{
+    float: right;
+    border-radius: 20px;
+    border: 1px solid #667999;
+    width: 48%;
+    height: 33%;
+    background-color: white;
+    text-align:center;
+    background-image: url("/EleQTL/static/image/coregulation.png");
+    background-size: 70%;
+    background-position: 50% 40%;
+    background-repeat: no-repeat;
+    margin: 1% 1%;
+}
+
+#landing_coregulation:hover {
+    border-radius: 20px;
+    border: 2px solid #667999;
+    background-color: #667999;
+    color: white;
+}
+
+#landing_experiment {
+    float: right;
+    border-radius: 20px;
+    border: 1px solid #667999;
+    width: 48%;
+    height: 33%;
+    background-color: white;
+    text-align:center;
+    background-image: url("/EleQTL/static/image/cistrans.png");
+    background-size: 70%;
+    background-position: 50% 40%;
+    background-repeat: no-repeat;
+    margin: 1% 1%;
+}
+
+#landing_experiment:hover {
+    border-radius: 20px;
+    border: 2px solid #667999;
+    background-color: #667999;
+    color: white;
+}
+
+#landing_GOterms {
+    float: right;
+    border-radius: 20px;
+    border: 1px solid #667999;
+    width: 48%;
+    height: 33%;
+    background-color: white;
+    text-align:center;
+    background-image: url("/EleQTL/static/image/cistrans.png");
+    background-size: 70%;
+    background-position: 50% 40%;
+    background-repeat: no-repeat;
+    margin: 1% 1%;
+}
+
+#landing_GOterms:hover {
+    border-radius: 20px;
+    border: 2px solid #667999;
+    background-color: #667999;
+    color: white;
+}
+
+#landing_phenotypes {
+    float: right;
+    border-radius: 20px;
+    border: 1px solid #667999;
+    width: 48%;
+    height: 33%;
+    background-color: white;
+    text-align:center;
+    background-size: 70%;
+    background-position: 50% 40%;
+    background-repeat: no-repeat;
+    margin: 1% 1%;
+}
+
+#landing_phenotypes:hover {
+    border-radius: 20px;
+    border: 2px solid #667999;
+    background-color: #667999;
+    color: white;
+}