styled active clas

public/src/installer/install.js

@@ -0,0 +1,14 @@
+"use strict";
+
+$('document').ready(function() {
+	setupInputs();
+
+
+
+	function setupInputs() {
+		$('.form-control').on('focus', function() {
+			$('.input-row.active').removeClass('active');
+			$(this).parents('.input-row').addClass('active');
+		});
+	}
+});

src/views/install/index.tpl

@@ -21,6 +21,23 @@
 	.btn, .form-control, .navbar { border-radius: 0; }
 	.container { font-size: 18px; }
 	body, small, p, div { font-family: "Roboto", sans-serif; }
+	.input-row {
+		margin-bottom: 20px;
+	}
+	.input-row.active .input-field {
+		border-right: 5px solid #BF3E11;
+		padding-right: 20px;
+	}
+	.input-row.active .help-text {
+		display: block;
+	}
+
+	.help-text {
+		line-height: 20px;
+		color: #888;
+		font-size: 85%;
+		display: none;
+	}
 	</style>
 </head>
 
@@ -52,15 +69,30 @@
 			<h1>Welcome to the NodeBB Installer! <hr /><small>You are just a few steps away from launching your own NodeBB forum</small></h1>
 		</p>
 		<br />
-		<p>
-			<small>Administrator</small>
-		</p>
-		<p>
-			<label for="username">Username</label>
-			<input type="text" class="form-control" name="username" placeholder="Username" />
-		</p>
+		<form>
+			<div class="row input-row">
+				<div class="col-sm-8 col-xs-12 input-field">
+					<label for="username">Username</label>
+					<input type="text" class="form-control" name="username" placeholder="Username" />	
+				</div>
+				<div class="col-sm-4 help-text">
+					Here is some sample help text. Username should be between <strong>6</strong> and <strong>12</strong> characters long.
+				</div>
+			</div>
+			<div class="row input-row">
+				<div class="col-sm-8 col-xs-12 input-field">
+					<label for="username">Username</label>
+					<input type="text" class="form-control" name="username" placeholder="Username" />	
+				</div>
+				<div class="col-sm-4 help-text">
+					Here is some sample help text. Username should be between <strong>6</strong> and <strong>12</strong> characters long.
+				</div>
+			</div>
+		</form>
 	</div>
 
+	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+	<script type="text/javascript" src="src/installer/install.js"></script>
 </body>
 </html>