Navigation in onboarding UI.

services/web/app/views/project/editor.jade

@@ -15,7 +15,8 @@ block content
 				p.text-center.text-danger(ng-if="state.error").ng-cloak 
 					span(ng-bind-html="state.error")
 
-
+		include ./editor/feature-onboarding
+		
 		.global-alerts(ng-cloak)
 			.alert.alert-danger.small(ng-if="connection.forced_disconnect")
 				strong #{translate("disconnected")}
@@ -72,7 +73,6 @@ block content
 				include ./editor/chat
 				
 	include ./editor/hotkeys
-	include ./editor/feature-onboarding
 
 	script(type="text/ng-template", id="genericMessageModalTemplate")
 		.modal-header

services/web/app/views/project/editor/feature-onboarding.jade

@@ -1,8 +1,34 @@
-.feat-onboard
+.feat-onboard(
+	ng-controller="FeatureOnboardingController"
+	ng-cloak
+)
 	.feat-onboard-wrapper
 		h1.feat-onboard-title
-			| Introducing
+			| Introducing 
 			span.feat-onboard-title-name Code check
-		p.feat-onboard-description
-			span.feat-onboard-description-name Code check
-			| will highlight potential problems in your LaTeX code, allowing you to handle errors earlier and become more productive.
+		div(ng-if="step === 1;")
+			p.feat-onboard-description
+				span.feat-onboard-description-name Code check 
+				| will highlight potential problems in your LaTeX code, allowing you to handle errors earlier and become more productive.
+			.row.feat-onboard-adv-wrapper
+				.col-xs-4
+					h2.feat-onboard-adv-title 
+						| Missing 
+						span.feat-onboard-adv-title-highlight brackets
+					p Lorem ipsum feature description stuff.
+				.col-xs-4
+					h2.feat-onboard-adv-title 
+						| Missing 
+						span.feat-onboard-adv-title-highlight brackets
+					p Lorem ipsum feature description stuff.
+				.col-xs-4
+					h2.feat-onboard-adv-title 
+						| Missing 
+						span.feat-onboard-adv-title-highlight brackets
+					p Lorem ipsum feature description stuff.
+			div
+				.btn.btn-primary(ng-click="turnCodeCheckOn();") Yes, turn Code check on
+			div
+				.btn.btn-default(ng-click="turnCodeCheckOn();") No, disable it for now
+		div(ng-if="step === 2;")
+			p Step 2, TODO.

services/web/public/coffee/ide.coffee

@@ -10,6 +10,7 @@ define [
 	"ide/binary-files/BinaryFilesManager"
 	"ide/references/ReferencesManager"
 	"ide/SafariScrollPatcher"
+	"ide/FeatureOnboardingController"
 	"ide/settings/index"
 	"ide/share/index"
 	"ide/chat/index"

services/web/public/coffee/ide/FeatureOnboardingController.coffee

@@ -0,0 +1,15 @@
+define [
+	"base"
+], (App) ->
+	App.controller "FeatureOnboardingController", ($scope, $modal, event_tracking) ->
+		$scope.step = 1;
+
+		$scope.turnCodeCheckOn = () ->
+			goToStep2()
+			
+		$scope.turnCodeCheckOn = () ->
+			goToStep2()
+
+		goToStep2 = () ->
+			$scope.step = 2
+			$scope.ui.leftMenuShown = true

services/web/public/stylesheets/app/editor/feature-onboarding.less

@@ -4,5 +4,35 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, .8);
-}
+	background-color: rgba(0, 0, 0, .85);
+	color: #FFF;
+	text-align: center;
+	z-index: 100;
+}
+	.feat-onboard-wrapper {
+		width: 600px;
+		margin: 130px auto 0;
+	}
+		.feat-onboard-title {
+			color: @brand-primary;
+		}
+			.feat-onboard-title-name {
+				color: #FFF;
+				font-weight: bold;
+			}
+		.feat-onboard-description {
+
+		}
+			.feat-onboard-description-name {
+				font-weight: bold;
+			}
+
+	.feat-onboard-adv-wrapper {
+		text-align: left;
+	}
+		.feat-onboard-adv-title {
+			color: #FFF;
+		}
+			.feat-onboard-adv-title-highlight {
+				font-weight: bold;
+			}