website: getting started UI page

website/source/intro/getting-started/ui.html.markdown

@@ -0,0 +1,50 @@
+---
+layout: "intro"
+page_title: "Web UI"
+sidebar_current: "gettingstarted-ui"
+---
+
+# Consul Web UI
+
+Consul comes with support for a
+[beautiful, functional web UI](http://demo.consul.io) out of the box.
+This UI can be used for viewing all services and nodes, viewing all
+health checks and their current status, and for reading and setting
+key/value data. The UI automatically supports multi-datacenter.
+
+For ease of deployment, the UI is
+[distributed](/downloads_web_ui.html)
+as static HTML and JavaScript.
+You don't need a separate web server to run the web UI. The Consul
+agent itself can be configured to serve the UI.
+
+## Screenshot and Demo
+
+You can view a live demo of the Consul Web UI
+[here](http://demo.consul.io).
+
+A screenshot of one page of the demo is shown below so you can get an
+idea of what the web UI is like. Click the screenshot for the full size.
+
+<div class="center">
+<a href="/images/consul_web_ui.png">
+<img src="/images/consul_web_ui.png">
+</a>
+</div>
+
+## Set Up
+
+To set up the web UI,
+[download the web UI package](/downloads_web_ui.html)
+and unzip it to a directory somewhere on the server where the Consul agent
+is also being run. Then, just append the `-ui-dir` to the `consul agent`
+command pointing to the directory where you unzipped the UI (the
+directory with the `index.html` file):
+
+```
+$ consul agent -ui-dir /path/to/ui
+...
+```
+
+The UI is available at the `/ui` path on the same port as the HTTP API.
+By default this is `http://localhost:8500/ui`.

website/source/layouts/intro.erb

@@ -66,6 +66,10 @@
 					<a href="/intro/getting-started/kv.html">Key/Value Data</a>
 					</li>
 
+					<li<%= sidebar_current("gettingstarted-ui") %>>
+					<a href="/intro/getting-started/ui.html">Web UI</a>
+					</li>
+
 					<li<%= sidebar_current("gettingstarted-nextsteps") %>>
 					<a href="/intro/getting-started/next-steps.html">Next Steps</a>
 					</li>

website/source/stylesheets/_docs.less

@@ -32,7 +32,7 @@ body.layout-intro{
 
 .docs-sidebar{
     position: relative;
-    z-index: 20;	
+    z-index: 20;
     margin-bottom: 30px;
 	margin-top: 50px;
 	margin-right: 4%;
@@ -73,7 +73,7 @@ body.layout-intro{
 			padding: 10px 0;
 			margin: 0 30px;
 			border-bottom: 2px solid #fff;
-			
+
 			>.nav{
 				li{
 					a{
@@ -170,6 +170,12 @@ body.layout-intro{
 		}
 	}
 
+    img{
+        max-width: 650px;
+        margin-top: 25px;
+        margin-bottom: 25px;
+    }
+
 	h1{
 		color: @purple;
 		text-transform: uppercase;
@@ -205,6 +211,10 @@ body.layout-intro{
 
 @media (max-width: 480px) {
 	.bs-docs-section{
+        img{
+            max-width: 450px;
+        }
+
 		h1{
 			font-size: 32px;
 		}