pdb-js/src/app/app.component.html

@@ -1,7 +1,7 @@
 
 
 <div id="main-toolbar">
-  <button mat-button [routerLink]="['/']"><img src="assets/img/scatter-chart2.svg"  aria-hidden="false" aria-label="go to home page" /> Plotilio</button>
+  <button mat-button [routerLink]="['/']"><img src="assets/img/strip-chart.svg"  aria-hidden="false" aria-label="go to home page" /> Plotilio</button>
   <button mat-button [routerLink]="['/vis']">Visualization</button>
   <button mat-button [routerLink]="['/dashboard']">Dashboards</button>
 </div>

pdb-js/src/app/main-page/main-page.component.html

@@ -9,11 +9,41 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
+  h1 {
+    font-size: 5em;
+    text-align: center;
+  }
+  .link-section {
+    display: flex;
+  }
+  .sub-section {
+    display: inline;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 2em;
+  }
+  .sub-section > * {
+    text-align: center;
+  }
 </style>
 
 <div id="main-page-links">
-<a [routerLink]="['/vis']" class="button-large" title="Visualization"><img src="assets/img/scatter-chart2.svg" class="icon-large" aria-hidden="false" aria-label="go to visualization page" /></a>
+  <!--
-<a [routerLink]="['/dashboard']" class="button-large" title="Dashboards"><img src="assets/img/dashboard-line.svg" class="icon-large" aria-hidden="false" aria-label="go to dashboard page" /></a>
+
+    <div style="text-align: center;"><img src="assets/img/strip-chart.svg" class="icon-huge" aria-hidden="true"/></div>
+  -->
+  <h1>Plotilio</h1>
+  <div class="link-section">
+    <div class="sub-section">
+      <a [routerLink]="['/vis']" class="button-large" title="Visualization"><img src="assets/img/scatter-chart3.svg" class="icon-large" aria-hidden="false" aria-label="go to visualization page" /></a>
+      <p>Do awesome visualizations.</p>
+    </div>
+    <div class="sub-section">
+      <a [routerLink]="['/dashboard']" class="button-large" title="Dashboards"><img src="assets/img/dashboard-line.svg" class="icon-large" aria-hidden="false" aria-label="go to dashboard page" /></a>
+      <p>Create the most sophisticated dashboards.</p>
+    </div>
+  </div>
 
 <!--a href="/upload" class="button-large" title="upload data"><img src="assets/img/upload.svg" class="icon-large" aria-hidden="false" aria-label="upload data" /></a-->
 </div>

pdb-js/src/assets/img/scatter-chart3.svg

@@ -0,0 +1,23 @@
+<svg 
+    width="64"
+    height="64"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+	<defs>
+		<g id="cross">
+			<rect x="4" y="0" width="4" height="12" style="fill: #0051c2;" />
+			<rect x="0" y="4" width="12" height="4" style="fill: #0051c2;" />
+		</g>
+	</defs>
+
+	<use x="12" y="10" xlink:href="#cross"  />
+	<use x="30" y="6" xlink:href="#cross"  />
+	<use x="26" y="32" xlink:href="#cross"  />
+	<use x="12" y="38" xlink:href="#cross"  />
+	<use x="44" y="20" xlink:href="#cross"  />
+
+	<path d="M4,0
+	         L4,60
+	         L64,60"
+	      style="stroke:black; stroke-width: 6px; fill:none;"/>
+</svg>

pdb-js/src/styles.scss

@@ -117,6 +117,11 @@ button[disabled] .icon-inline {
   height: 8em;
   margin: 1em;
 }
+.icon-huge {
+  width: 12em;
+  height: 12em;
+  margin: 1em;
+}
 
 .icon-select {
   width: 1.5em;