diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7d0f0f6a7c9cf408bb5b38df69bb2c5669cc4cbd..60de8f933dac0cf769595c8f80e0b7c6995d364a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -9,7 +9,7 @@
</a>
</div>
- <div class="navbar-menu is-active">
+ <div class="navbar-menu">
<div class="navbar-start">
<a routerLink="/" routerLinkActive="is-active" class="navbar-item is-hoverable">
<span class="icon"><i class="fa fa-home"></i></span>
diff --git a/src/app/pages/about-page/about-page.component.html b/src/app/pages/about-page/about-page.component.html
index 45094ab126acc03f58f9fb5790d98ac26065126d..7d30ee20dae598a0b75438a1f7ae1f5ef6df5b39 100644
--- a/src/app/pages/about-page/about-page.component.html
+++ b/src/app/pages/about-page/about-page.component.html
@@ -1,4 +1,75 @@
-<div class="content">
-Write information about the project and website here
+<div class="scroll">
+ <div class="content">
+ <section class="hero is-small is-primary">
+ <div class="hero-body">
+ <div class="container">
+ <h1 class="title">About COVex</h1>
+ </div>
+ </div>
+ </section>
+
+ <div class="hero container">
+ <div class="column is-8 is-offset-2">
+ <div class="container has-text-centered">
+ <img src="assets/covex_logo.png">
+ <h2 class="subtitle is-3"> A Coronavirus Explorer </h2>
+ </div>
+ <div class="content">
+ <p>
+ <br>
+ COVex (Coronavirus Explorer) is a unique online network and systems medicine platform for data analysis that
+ integrates virus-human interactions for SARS-CoV-2 and SARS-CoV-1. It implements different network-based
+ approaches for the identification of new drug targets and new repurposable drugs.
+ </p>
+ <h2 class="subtitle">General workflow of the platform</h2>
+ <ol>
+ <li>Select the viral interaction dataset (SARS-CoV1-Pfefferle, SARS-CoV1-VirHostNet, SARS-CoV2-Gordon).</li>
+ <li>Select proteins of interest as seed proteins.</li>
+ <li>Perform network analysis (multi-Steiner, TrustRank, KeyPathwayMiner, closeness centrality).</li>
+ <li>Platform usage: basic and advanced options</li>
+ <li>Inspect the resulting subnetworks.</li>
+ <li>Find drugs associated with the subnetwork (TrustRank, closeness centrality).</li>
+ <li>Download your results.</li>
+ </ol>
+ <p>COVex also provides a quick analysis option to perform steps 3 to 5 (starting from the seed proteins) to
+ return
+ a list of drugs ranked by default using TrustRank.</p>
+ <h2>Help/Contact information</h2>
+ <ul>
+ <li>Systems and Network Medicine: Sepideh Sadegh (sadegh@zw.tum.de)</li>
+ <li>Web platform: Julian Matschinske (julian.matschinske@wzw.tum.de)</li>
+ <li>Project coordination: Prof. Dr. Jan Baumbach (jan.baumbach@wzw.tum.de)</li>
+ <li>Lab Website: http://www.exbio.de</li>
+ </ul>
+
+ <h2>License</h2>
+ <p>COVex is freely available for non-commercial use. The Software is provided "AS IS" without warranty
+ whatsoever.
+ COVex is publicly available and its source code is released under the GPLv3 license </p>
+ <div class="has-text-centered">
+ <h2>Impressum</h2>
+ <p>Prof. Dr. Jan Baumbach
+ Chair of Experimental Bioinformatics
+ <br>
+ <i class="fa fa-phone"></i> Phone: +49-8161-71-2136<br>
+ <i class="fa fa-phone"></i> Fax: +49-8161-71-2186<br>
+ <i class="fa fa-envelope"> </i> Email: exbio@wzw.tum.de<br>
+ <i class="fa fa-map-marker"></i> Address: ​​​Prof. Dr. Jan Baumbach
+ <br>
+ Chair of Experimental Bioinformatics
+ <br>
+ TUM School of Life Sciences Weihenstephan
+ <br>
+ Technical University of Munich<br>
+ Maximus-von-Imhof-Forum 3<br>
+ 85354 Freising<br>
+ Germany </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
+
+
diff --git a/src/app/pages/about-page/about-page.component.scss b/src/app/pages/about-page/about-page.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..7525aa42fca20dd2cfe91318362961684927d59b 100644
--- a/src/app/pages/about-page/about-page.component.scss
+++ b/src/app/pages/about-page/about-page.component.scss
@@ -0,0 +1,9 @@
+i {
+ width: 30px;
+}
+
+div.scroll{
+
+ height: calc(100vh - 102px);
+ overflow: auto;
+}
diff --git a/src/app/pages/home-page/home-page.component.html b/src/app/pages/home-page/home-page.component.html
index fb5b9fc8ee14549778e6fc02744cbe60582ed4d6..0c63352035de74e414f9ac8b5c21a3b296a72549 100644
--- a/src/app/pages/home-page/home-page.component.html
+++ b/src/app/pages/home-page/home-page.component.html
@@ -1,33 +1,30 @@
-<section class="hero is-primary is-fullheight">
- <div class="hero-body">
- <div class="container has-text-centered">
- <div class="column is-6 is-offset-3">
+<div class="content landing scroll">
+ <div class="container has-text-centered">
+ <div class="column is-6 width100">
- <img src="assets/covex_logo.png">
+ <img src="assets/covex_logo.png">
- <h1 class="subtitle is-2">
- <i>Explore</i> the <b> virus-host interactome</b>
- </h1>
- <h1 class="subtitle is-2">
- <i>Find</i> <b> putative drug targets</b>
- </h1>
- <h1 class="subtitle is-2">
- <i>Repurpose</i> <b> drugs </b>
- </h1>
- <h1 class="subtitle is-2">
- <i>All in one web-tool</i>
- </h1>
+ <h1 class="subtitle is-2">
+ <i>Explore the </i> <b> virus-host interactome</b>
+ </h1>
+ <h1 class="subtitle is-2">
+ <i>Find</i> <b> putative drug targets</b>
+ </h1>
+ <h1 class="subtitle is-2">
+ <i>Repurpose</i> <b> drugs </b>
+ </h1>
+ <h1 class="subtitle is-3">
+ <i>All in one </i><b>web-tool</b>
+ </h1>
- <button class="button has-text-info is-large is-rounded ">
- <a routerLink="/explorer" routerLinkActive="is-active">
- <span class="icon"><i class="fa fa-project-diagram has-text-info"></i></span>
- <span>Start now!</span>
- </a>
- </button>
+ <button class="button has-text-info is-large is-rounded ">
+ <a routerLink="/explorer" routerLinkActive="is-active">
+ <span class="icon"><i class="fa fa-project-diagram has-text-info"></i></span>
+ <span>Start now!</span>
+ </a>
+ </button>
- </div>
</div>
</div>
+</div>
-</section>
-<script async type="text/javascript" src="../js/bulma.js"></script>
diff --git a/src/app/pages/home-page/home-page.component.scss b/src/app/pages/home-page/home-page.component.scss
index 3759e173a67c44eb83bc51213f66ea0bb7c7c2b9..e55c62e935e32a4e4df548d5ed31643c41b9cb9f 100644
--- a/src/app/pages/home-page/home-page.component.scss
+++ b/src/app/pages/home-page/home-page.component.scss
@@ -4,3 +4,32 @@ img {
background-color: rgba(255, 255, 255, 0.7);
border-radius: 25px;
}
+
+div.scroll {
+ height: calc(100vh - 82.36px);
+ overflow: auto;
+}
+
+h1.subtitle.is-2 {
+ color: #d0d0d0;
+ font-family: "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+h1.subtitle.is-3 {
+ color: #d0d0d0;
+ font-family: "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+div.column.is-6.width100 {
+ width: 100%;
+}
+
+div.container.has-text-centered {
+ margin-top: 10%;
+}
+
+.centered {
+ position: fixed; /* or absolute */
+ top: 50%;
+ left: 50%;
+}
diff --git a/src/assets/covex_logo.jpg b/src/assets/covex_logo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cb3c06274b7173d8752b4ea508a7c1a826b39de7
Binary files /dev/null and b/src/assets/covex_logo.jpg differ
diff --git a/src/assets/virus_background.jpg b/src/assets/virus_background.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..91d0419568e2d17108ce0259ba1db7bb1f1a09fb
Binary files /dev/null and b/src/assets/virus_background.jpg differ
diff --git a/src/assets/virus_backgroundr.jpg b/src/assets/virus_backgroundr.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f3e995d771423d61061c935bec584cb4ffe5460d
Binary files /dev/null and b/src/assets/virus_backgroundr.jpg differ
diff --git a/src/styles.scss b/src/styles.scss
index 1e2849298f770ab7d3308ba45cc62b9d43e675d1..e8385ffee8e46535727d88d1fc3a65307b7b1e81 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -23,13 +23,12 @@ body {
overflow: hidden;
}
-.hero.is-primary {
+.landing {
background-color: $primary;
- background-image: url("assets/virus_background.png");
+ background-image: url("assets/virus_background.jpg");
background-size: cover;
background-repeat: no-repeat;
- background-position: 80%;
- padding: 50px;
+ height: calc(100vh - 82.36px);
}
div.navbar-menu {