Add a splash page. Adds #21

Includes a self-made logo. Suggestions welcome.

web/app/home/home.component.html

@@ -1,3 +1,20 @@
-<div>
+<div class="header">
-    <h1>Hello world</h1>
+    <img src="/img/logo.png">
+</div>
+<div class="wrapper">
+    <div class="center">
+        <h3>An alternative integrations manager for Riot</h3>
+        <p>Dimension is a way for people hosting Riot to expand their integrations offering to their users.</p>
+        <img src="/img/screenshot_bordered.png">
+        <br/>
+        <br/>
+        <p>Point your Riot <code>config.json</code> to Dimension to start using it:</p>
+        <pre>
+        "integrations_ui_url": "https://dimension.t2bot.io/riot"
+        "integrations_rest_url": "https://dimension.t2bot.io/api/v1/scalar"
+        </pre>
+        <br/>
+        <br/>
+        <p>Learn more on <a href="https://github.com/turt2live/matrix-dimension">Github</a>. Talk about it in <a href="https://matrix.to/#/#dimension:t2l.io">#dimension:t2l.io</a></p>
+    </div>
 </div>

web/app/home/home.component.scss

@@ -1 +1,17 @@
 // component styles are encapsulated and only applied to their components
+.header {
+  text-align: center;
+  background-color: #fff;
+}
+
+.header img {
+  height: 125px;
+}
+
+.wrapper {
+  margin-top: 20px;
+}
+
+.center {
+  text-align: center;
+}

web/app/riot/riot.component.html

@@ -1,13 +1,15 @@
-<div *ngIf="error">
+<div id="wrapper">
-    <p class="text-danger">{{ error }}</p>
+    <div *ngIf="error">
-</div>
+        <p class="text-danger">{{ error }}</p>
-<div *ngIf="loading && !error">
+    </div>
-    <p><i class="fa fa-circle-o-notch fa-spin"></i> Loading...</p>
+    <div *ngIf="loading && !error">
-</div>
+        <p><i class="fa fa-circle-o-notch fa-spin"></i> Loading...</p>
-<div *ngIf="!error && !loading">
+    </div>
-    <h3>Manage Integrations</h3>
+    <div *ngIf="!error && !loading">
-    <p>Turn on anything you like. If an integration has some special configuration, it will have a configuration icon next to it.</p>
+        <h3>Manage Integrations</h3>
-    <div class="integration-container">
+        <p>Turn on anything you like. If an integration has some special configuration, it will have a configuration icon next to it.</p>
-        <my-bot *ngFor="let bot of bots" [bot]="bot" (updated)="updateBot(bot)"></my-bot>
+        <div class="integration-container">
+            <my-bot *ngFor="let bot of bots" [bot]="bot" (updated)="updateBot(bot)"></my-bot>
+        </div>
     </div>
 </div>

web/app/riot/riot.component.scss

@@ -2,3 +2,7 @@
 .integration-container {
   display: flex;
 }
+
+#wrapper {
+  padding: 30px;
+}

web/style/app.scss

@@ -4,6 +4,6 @@
 body {
   background: #ddd !important;
   margin: 0;
-  padding: 30px;
+  padding: 0;
   color: #222;
 }