From fce63e4ac8fb537c1dd9c5950b3df639b3b5d3d1 Mon Sep 17 00:00:00 2001
From: Norwin Roosen <github@nroo.de>
Date: Wed, 7 Nov 2018 01:41:57 +0100
Subject: [PATCH] ota-wizard: nice layout for first step

---
 src/pages/ota-wizard/ota-wizard.html | 42 +++++++++++++++++-----------
 src/pages/ota-wizard/ota-wizard.scss | 29 +++++++++++++++++++
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/src/pages/ota-wizard/ota-wizard.html b/src/pages/ota-wizard/ota-wizard.html
index 86dfd15..d8275ec 100644
--- a/src/pages/ota-wizard/ota-wizard.html
+++ b/src/pages/ota-wizard/ota-wizard.html
@@ -8,24 +8,34 @@
 </ion-header>
 
 <ion-content padding="false"> <!-- FIXME: remove padding -->
-  <ion-slides pager>
+  <ion-slides #slides pager (ionSlideDidChange)="onSlideChange()">
+
+    <!-- intro -->
     <ion-slide>
-      <h1>Welcome</h1>
+      <ion-grid>
+        <ion-row>
+          <ion-col col-lg-6>
+            <ion-icon name="wifi" style="font-size: 160px"></ion-icon>
+            <h2>Welcome</h2>
+            <p>
+              To <b>program your senseBox</b> wirelessly, please follow these steps.
+              We will help you connect to your senseBox via <b>WiFi</b>.
+            </p>
+          </ion-col>
 
-      <img src="TODO-nice-wifi-sensebox-pictrogram>" />
-
-      <p>
-        To program your senseBox wirelessly, please follow these steps.
-        We will help you connect to your senseBox via WiFi.
-        <br/>
-        Please make sure that your senseBox..
-      </p>
-
-      <ul style="text-align: left">
-        <li>has the WiFi shield plugged in</li>
-        <li>has the initial OTA sketch installed</li>
-        <li>TODO review this list foo bar lorem ipsum</li>
-      </ul>
+          <ion-col col-lg-6>
+            <p>First, please make sure that your senseBox...</p>
+            <ul style="text-align: left">
+              <li>has the <b>WiFi shield</b> plugged in</li>
+              <li>has the initial <b>OTA sketch</b> installed</li>
+            </ul>
+            <button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
+              Continue
+              <ion-icon name="arrow-forward"></ion-icon>
+            </button>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
     </ion-slide>
 
     <ion-slide>
diff --git a/src/pages/ota-wizard/ota-wizard.scss b/src/pages/ota-wizard/ota-wizard.scss
index 8b5358c..8c17c18 100644
--- a/src/pages/ota-wizard/ota-wizard.scss
+++ b/src/pages/ota-wizard/ota-wizard.scss
@@ -4,4 +4,33 @@ page-ota-wizard {
   .swiper-pagination-bullet-active {
     background: map-get($colors, primary);
   }
+
+  ion-slide {
+    img {
+      max-height: 50%;
+      max-width: 60%;
+      margin: 18px 0;
+
+      & ~ h2 {
+        margin-top: 2.8rem;
+      }
+    }
+
+    p, ul {
+      padding: 0 20px;
+      font-size: 16px;
+      line-height: 1.4;
+      color: #60646B;
+
+      b {
+        color: #000000;
+        font-weight: 500;
+      }
+    }
+
+    ul {
+      margin-left: 3%;
+      list-style-type: disc;
+    }
+  }
 }