diff --git a/src/app/app.component.html b/src/app/app.component.html
index 601fa7038540ca001574d53c5911ecd377f0df41..7d0f0f6a7c9cf408bb5b38df69bb2c5669cc4cbd 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,7 @@
<div class="container is-fluid">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
- <img src="assets/logo.png" class="menu-icon" alt="logo" width="50px"/>
+ <img routerLink="/" src="assets/covex_logo.png" class="menu-icon is-hoverable navbar-item" alt="logo" width="200"/>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
diff --git a/src/app/pages/home-page/home-page.component.html b/src/app/pages/home-page/home-page.component.html
index d0d4cd44afe8063d7785b8b4bbb2eddaee71b5aa..fb5b9fc8ee14549778e6fc02744cbe60582ed4d6 100644
--- a/src/app/pages/home-page/home-page.component.html
+++ b/src/app/pages/home-page/home-page.component.html
@@ -1,17 +1,33 @@
-<section class="hero is-primary is-large">
+<section class="hero is-primary is-fullheight">
<div class="hero-body">
- <div class="container">
- <h1 class="title">
- SARS-CoV-2 Explorer
- </h1>
- <h2 class="subtitle">
- Explore the Protein interactions of SARS-CoV-2
- </h2>
+ <div class="container has-text-centered">
+ <div class="column is-6 is-offset-3">
+
+ <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>
+
+ <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>
-</section>
-
-<div class="content">
-General Information about the Website
-</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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..3759e173a67c44eb83bc51213f66ea0bb7c7c2b9 100644
--- a/src/app/pages/home-page/home-page.component.scss
+++ b/src/app/pages/home-page/home-page.component.scss
@@ -0,0 +1,6 @@
+img {
+ width: 600px;
+ padding: 30px;
+ background-color: rgba(255, 255, 255, 0.7);
+ border-radius: 25px;
+}
diff --git a/src/assets/covex_logo.png b/src/assets/covex_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff01400851865ccb47bec645a3cc22895377ffed
Binary files /dev/null and b/src/assets/covex_logo.png differ
diff --git a/src/assets/covex_logo_small.png b/src/assets/covex_logo_small.png
new file mode 100644
index 0000000000000000000000000000000000000000..d380da83d80039adc43e5d19b9ec06220b93e932
Binary files /dev/null and b/src/assets/covex_logo_small.png differ
diff --git a/src/assets/virus_background.png b/src/assets/virus_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6e99687efd80de598ecda76efa344c71f789984
Binary files /dev/null and b/src/assets/virus_background.png differ
diff --git a/src/index.html b/src/index.html
index 3a8acea8a766bd1ebf7a4fe6142b918998ab4a81..c37837526e8c00e5f3e9f34328ec1ee07a7e1eb9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title>CovPPI</title>
+ <title>CoVex</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/ico" href="../../assets/logo.png">
+ <link rel="icon" type="image/ico" href="assets/covex_logo_small.png">
<script src="https://kit.fontawesome.com/3ad4fe992f.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
diff --git a/src/styles.scss b/src/styles.scss
index 84ced324ca10b07f040ce0eb9aed25d35f20522f..84f5472c73082db27cd83428d7b7db2551581331 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -6,6 +6,11 @@
@import "~@ng-select/ng-select/themes/default.theme.css";
$family-sans-serif: "Varela Round", sans-serif;
+$primary: #3070B3;
+$success: #48C774;
+$danger: #EF476F;
+$link: $primary;
+$info: $primary;
@import "~bulma/bulma.sass";
@import "~primeng/resources/primeng.css";
@import "~primeicons/primeicons.css";
@@ -19,24 +24,19 @@ body {
}
.hero.is-primary {
- background-color: #118AB2;
- background-image: url("assets/logo.png"), linear-gradient(to left, #f2fcfe, #118AB2);
+ background-color: $primary;
+ background-image: url("assets/virus_background.png");
+ background-size: cover;
background-repeat: no-repeat;
- background-position: 80%;
- padding: 50px;
}
-.button.is-primary, .button.is-primary:hover, .button.is-primary:disabled {
- background-color: #118AB2;
-}
-
-.button.is-danger, .button.is-danger:hover, .button.is-danger:disabled {
- background-color: #EF476F;
-}
-
-.button.is-success, .button.is-success:hover, .button.is-success:disabled {
- background-color: #48C774;
-}
+//.hero.is-primary {
+// background-color: $primary;
+// background-image: linear-gradient(to left, #f2fcfe, $primary);
+// background-repeat: no-repeat;
+// background-position: 80%;
+// padding: 50px;
+//}
div.navbar-menu {
margin-left: 5px;
@@ -162,23 +162,23 @@ div.field.has-addons.add-remove-toggle {
}
.fa-check {
- color: #48C774;
+ color: $success;
}
.fa-search.investigational {
- color: #e2b600;
+ color: $warning;
}
.fa-spinner {
- color: #e2b600;
+ color: $warning;
}
.fa-pause {
- color: #e2b600;
+ color: $warning;
}
.fa-exclamation-triangle {
- color: #EF476F;
+ color: $danger;
}
.footer-toggle-buttons {