From 4db0a985c5b87983a18f74671d1a42db658e33a1 Mon Sep 17 00:00:00 2001
From: Tor Hveem <tor@hveem.no>
Date: Sun, 6 Oct 2013 13:59:34 +0200
Subject: [PATCH] Improve design of landing page

---
 index.html | 55 ++++++++++++++++++++++++++++++------------------------
 1 file changed, 31 insertions(+), 24 deletions(-)
diff --git a/index.html b/index.html
index 2fdabd1..b62397a 100644
--- a/index.html
+++ b/index.html
@@ -13,35 +13,42 @@
   </head>
   <body ng-app="weechat">
     <div ng-controller="WeechatCtrl">
-      <div ng-hide="connected">
-        <form class="form-horizontal">
-          <legend>Connection</legend>
+      <div ng-hide="connected" class="container">
+        <h2>
+            <img src="img/favicon.png">
+            glowing bear
+            <small>
+                WeeChat web frontend 
+            </small>
+        </h2>
+        <div>To start using, please enable relay in your WeeChat client:
+            <pre>
+            /set relay.network.password yourpassword
+            /relay add weechat 9001</pre>
+        Note: The communication goes directly between your browser and your weechat in clear text.
+        Connection settings are saved between sessions, including password, in your own browser.
+        </div>
+        <h3>Connection settings</h3>
+        <form role="form">
             <div class="alert alert-danger" ng-show="errorMessage">
-              <strong>Oh no!</strong> We cannot connect!
+                <strong>Oh no!</strong> We cannot connect!
             </div>
-          <div class="control-group">
-            <label class="control-label" for="hostport">Hostport</label>
-            <div class="controls">
-              <input type="text" id="hostport" ng-model="hostport" placeholder="Hostport">
+            <div class="form-group">
+                <label class="control-label" for="hostport">Hostname and port</label>
+                <input type="text" class="form-control" id="hostport" ng-model="hostport" placeholder="Hostport">
+                <p class="help-block">Enter the hostname and the port to the WeeChat relay, separated by a :</p>
             </div>
-          </div>
-          <div class="control-group">
-            <label class="control-label" for="proto">Proto</label>
-            <div class="controls">
-              <input type="text" id="proto" ng-model="proto" placeholder="proto">
+            <div class="form-group">
+                <label class="control-label" for="password">WeeChat relay password</label>
+                <input type="password"class="form-control"  id="password" ng-model="password" placeholder="Password">
+                <p class="help-block">Password will be stored in your browser session</p>
             </div>
-          </div>
-          <div class="control-group">
-            <label class="control-label" for="password">Password</label>
-            <div class="controls">
-              <input type="password" id="password" ng-model="password" placeholder="Password">
+            <div class="form-group">
+                <label class="control-label" for="proto">Proto</label>
+                <input type="text" class="form-control" id="proto" ng-model="proto" placeholder="proto">
+                <p class="help-block">Default is fine.</p>
             </div>
-          </div>
-          <div class="control-group">
-            <div class="controls">
-               <button class="btn btn-primary" ng-click="connect()">Connect!</button>
-            </div>
-          </div>
+            <button class="btn btn-lg btn-primary" ng-click="connect()">Connect!</button>
         </form>
       </div>
       <div ng-show="connected">
